/************************************************************** Brand font — Clarity City Weights available: 500 (Medium), 600 (SemiBold), 700 (Bold). Files live in /public/fonts/ and are served at /fonts/*.woff2. **************************************************************/ @font-face { font-family: 'Clarity City'; src: url('/fonts/ClarityCity-Medium.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Clarity City'; src: url('/fonts/ClarityCity-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Clarity City'; src: url('/fonts/ClarityCity-Bold.woff2') format('woff2'); font-weight: 700 900; font-style: normal; font-display: swap; } /* Make Clarity City the default sans-serif everywhere (Bootstrap reads --bs-font-sans-serif into --bs-body-font-family). */ :root { --bs-font-sans-serif: 'Clarity City', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; --bs-body-font-family: var(--bs-font-sans-serif); } body { font-family: var(--bs-font-sans-serif); } /************************************************************** With this file, you can tune the themes. Generally, it's sufficient to change the primary color. If you want to change images, this is not here Background images and logo's must be change by mapping this specific image file in the public folder. colors about highlight are used for syntax highlighting you can find the color schemes online. Here we use atom-one-dark and atom-one-light. colors about ace-editor, we always use the dark theme. We start from the monokai theme, but you can change the background to match "--bg-dark" If you ever created an awesome theme, please contribute it back to the project! ***************************************************************/ [data-bs-theme=light] { /* primary color */ --af-primary : var(--bs-primary); --af-primary-subtle : var(--bs-primary-bg-subtle); --af-primary-bg-subtle: var(--bs-primary-bg-subtle); /* body color */ --af-body-color: #495057; --af-body-color-rgb: 73, 80, 87; --af-body-bg: #fff; --af-body-bg-rgb: 255, 255, 255; /* table action buttons */ --af-gray-muted: #dee2e6; --af-edit : var(--bs-orange); /* for the color theme we allow actions colors */ --af-delete : var(--bs-red); /* for the color theme we allow actions colors */ --af-change : var(--bs-green); /* for the color theme we allow actions colors */ --af-test : var(--bs-purple); /* for the color theme we allow actions colors */ --af-preview : var(--bs-teal); /* for the color theme we allow actions colors */ --af-refresh : var(--bs-pink); /* for the color theme we allow actions colors */ --af-trigger : var(--bs-indigo); /* for the color theme we allow actions colors */ /* category */ --af-bg-categories: var(--bs-tertiary-bg); --af-bg-badge : var(--af-primary); --af-text-badge : var(--bs-white); /* overlay icon circles - full vibrant colors for color theme */ --af-overlay-circle-primary : var(--bs-primary); --af-overlay-circle-secondary: var(--bs-secondary); --af-overlay-circle-success : var(--bs-success); --af-overlay-circle-danger : var(--bs-danger); --af-overlay-circle-warning : var(--bs-orange); --af-overlay-circle-info : var(--bs-info); --af-overlay-circle-border : transparent; --af-overlay-icon-color : var(--bs-white); /* active background */ --af-bg-active : var(--af-primary); --af-text-active: var(--bs-light); /* background tiles */ --af-bg-primary-color : var(--af-primary); --af-bg-primary-subtle-color : var(--af-primary-bg-subtle); --af-bg-secondary-color : var(--bs-secondary); --af-bg-secondary-subtle-color: var(--bs-secondary-bg-subtle); --af-bg-success-color : var(--bs-success); --af-bg-success-subtle-color : var(--bs-success-bg-subtle); --af-bg-danger-color : var(--bs-danger); --af-bg-danger-subtle-color : var(--bs-danger-bg-subtle); --af-bg-warning-color : var(--bs-warning); --af-bg-warning-subtle-color : var(--bs-warning-bg-subtle); --af-bg-info-color : var(--bs-info); --af-bg-info-subtle-color : var(--bs-info-bg-subtle); --af-bg-light-color : var(--bs-light); --af-bg-light-subtle-color : var(--bs-light-bg-subtle); --af-bg-dark-color : var(--bs-dark); --af-bg-dark-subtle-color : var(--bs-dark-bg-subtle); --af-bg-body-secondary-color : var(--bs-body-secondary); --af-bg-body-tertiary-color : var(--bs-body-tertiary); --af-bg-body-color : var(--bs-body); --af-bg-black-color : var(--bs-black); --af-bg-white-color : var(--bs-white); --af-bg-transparent-color : var(--bs-transparent); /* navbar */ --af-navbar-link-color : var(--bs-white); --af-navbar-link-hover-color : var(--af-primary-subtle); --af-navbar-link-active-color: var(--af-primary-subtle); --af-bg-navbar : var(--af-primary); --af-text-navbar : var(--bs-light); /* defaults */ --af-shadow: 0, 0, 0; /* highlight */ --af-hl-base: #fafafa; --af-hl-mono-1: #383a42; --af-hl-mono-2: #686b77; --af-hl-mono-3: #a0a1a7; --af-hl-hue-1: #0184bb; --af-hl-hue-2: #4078f2; --af-hl-hue-3: #a626a4; --af-hl-hue-4: #50a14f; --af-hl-hue-5: #e45649; --af-hl-hue-5-2: #c91243; --af-hl-hue-6: #986801; --af-hl-hue-6-2: #c18401; /* ansible output */ --af-ansible-output-success: var(--bs-success); --af-ansible-output-warning: var(--bs-orange); --af-ansible-output-error: var(--bs-danger); --af-ansible-output-info: var(--bs-info); --af-ansible-output-bg-timestamp: var(--bs-info-bg-subtle); --af-ansible-output-timestamp: var(--bs-info); /* ace-editor */ --af-ace-editor-bg: var(--bs-dark); /* always dark theme */ } [data-bs-theme=dark] { /* primary color */ --af-primary : var(--bs-primary); --af-primary-subtle : var(--bs-primary-bg-subtle); --af-primary-bg-subtle: var(--bs-primary-bg-subtle); /* body color */ --af-body-color: #bfc4c9; --af-body-color-rgb: 191, 196, 201; --af-body-bg: #212529; --af-body-bg-rgb: 33, 37, 41; /* table action buttons */ --af-gray-muted: #343a40; --af-edit : var(--bs-cyan); /* no color for dark theme */ --af-delete : var(--bs-cyan); /* no color for dark theme */ --af-change : var(--bs-cyan); /* no color for dark theme */ --af-test : var(--bs-cyan); /* no color for dark theme */ --af-preview : var(--bs-cyan); /* no color for dark theme */ --af-refresh : var(--bs-cyan); /* no color for dark theme */ --af-trigger : var(--bs-cyan); /* no color for dark theme */ /* categories */ --af-bg-categories: var(--bs-dark); --af-bg-badge : var(--bs-cyan); --af-text-badge : var(--bs-white); /* overlay icon circles - more vibrant colors for dark theme */ --af-overlay-circle-primary : var(--bs-primary-border-subtle); --af-overlay-circle-secondary: var(--bs-secondary-border-subtle); --af-overlay-circle-success : var(--bs-success-border-subtle); --af-overlay-circle-danger : var(--bs-danger-border-subtle); --af-overlay-circle-warning : var(--bs-warning-border-subtle); --af-overlay-circle-info : var(--bs-info-border-subtle); --af-overlay-circle-border : rgba(255, 255, 255, 1); --af-overlay-icon-color : var(--bs-white); /* active background */ --af-bg-active : var(--af-primary); --af-text-active: var(--bs-light); /* background tiles */ --af-bg-primary-color : var(--bs-primary); /* subtle color for dark theme */ --af-bg-primary-subtle-color : var(--bs-primary-bg-subtle); /* subtle color for dark theme */ --af-bg-secondary-color : var(--bs-secondary); /* subtle color for dark theme */ --af-bg-secondary-subtle-color: var(--bs-secondary-bg-subtle); /* subtle color for dark theme */ --af-bg-success-color : var(--bs-success); /* subtle color for dark theme */ --af-bg-success-subtle-color : var(--bs-success-bg-subtle); /* subtle color for dark theme */ --af-bg-danger-color : var(--bs-danger); /* subtle color for dark theme */ --af-bg-danger-subtle-color : var(--bs-danger-bg-subtle); /* subtle color for dark theme */ --af-bg-warning-color : var(--bs-warning); /* subtle color for dark theme */ --af-bg-warning-subtle-color : var(--bs-warning-bg-subtle); /* subtle color for dark theme */ --af-bg-info-color : var(--bs-info); /* subtle color for dark theme */ --af-bg-info-subtle-color : var(--bs-info-bg-subtle); /* subtle color for dark theme */ --af-bg-light-color : var(--bs-light); /* subtle color for dark theme */ --af-bg-light-subtle-color : var(--bs-light-bg-subtle); /* subtle color for dark theme */ --af-bg-dark-color : var(--bs-dark); /* subtle color for dark theme */ --af-bg-dark-subtle-color : var(--bs-dark-bg-subtle); /* subtle color for dark theme */ --af-bg-body-secondary-color : var(--bs-secondary-bg); /* subtle color for dark theme */ --af-bg-body-tertiary-color : var(--bs-tertiary-bg); /* subtle color for dark theme */ --af-bg-body-color : var(--bs-body-bg); /* subtle color for dark theme */ --af-bg-black-color : var(--bs-black); /* subtle color for dark theme */ --af-bg-white-color : var(--bs-white); /* subtle color for dark theme */ /* navbar */ --af-navbar-link-color : var(--bs-white); --af-navbar-link-hover-color : var(--af-primary); --af-navbar-link-active-color: var(--af-primary); --af-bg-navbar : var(--bs-dark); --af-text-navbar : var(--bs-light); /* defaults */ --af-shadow: 128,128,128; /* highlight */ --af-hl-base: #282c34; --af-hl-mono-1: #abb2bf; --af-hl-mono-2: #818896; --af-hl-mono-3: #5c6370; --af-hl-hue-1: #56b6c2; --af-hl-hue-2: #61aeee; --af-hl-hue-3: #c678dd; --af-hl-hue-4: #98c379; --af-hl-hue-5: #e06c75; --af-hl-hue-5-2: #be5046; --af-hl-hue-6: #d19a66; --af-hl-hue-6-2: #e6c07b; /* ansible output */ --af-ansible-output-success: var(--bs-success); --af-ansible-output-warning: var(--bs-orange); --af-ansible-output-error: var(--bs-danger); --af-ansible-output-info: var(--bs-info); --af-ansible-output-bg-timestamp: var(--bs-dark); --af-ansible-output-timestamp: var(--bs-info); /* ace-editor */ --af-ace-editor-bg: var(--bs-dark); /* always dark theme */ } }