178 lines
5.8 KiB
CSS
178 lines
5.8 KiB
CSS
:root {
|
|
--is-dark: 1; /* Or --is-dark: 1 if it's a dark theme */
|
|
|
|
/* Primary color variants (from darkest to lightest) */
|
|
--primary: #71b737;
|
|
--primary-700: #5a9228;
|
|
--primary-650: #62a02d;
|
|
--primary-600: #69ad32;
|
|
--primary-550: #71b737;
|
|
--primary-500: #7ec245;
|
|
--primary-450: #8bc954;
|
|
--primary-400: #98d063;
|
|
--primary-350: #a5d772;
|
|
--primary-300: #b2de81;
|
|
--primary-250: #bfe590;
|
|
--primary-200: #ccec9f;
|
|
--primary-150: #5a9228;
|
|
--primary-100: #e6fabd;
|
|
--primary-50: #f3fde6;
|
|
|
|
--border-primary: #71b737;
|
|
--border-secondary: hsl(0, 0%, 32%);
|
|
|
|
/* Base colors */
|
|
--bg: hsl(0, 0%, 12%);
|
|
--fg: hsl(0, 0%, 100%);
|
|
--fg-400: hsl(0, 0%, 95%);
|
|
--fg-350: hsl(0, 0%, 90%);
|
|
--fg-300: hsl(0, 0%, 85%);
|
|
--fg-250: hsl(0, 0%, 85%);
|
|
--fg-200: hsl(0, 0%, 85%);
|
|
--fg-100: hsl(0, 0%, 75%);
|
|
|
|
/* Icon colors */
|
|
--icon-bg: hsl(0, 0%, 100%);
|
|
--active-icon-color: #ffffff;
|
|
--secondary-icon-color: hsl(221, 59%, 61%);
|
|
|
|
/* On-primary colors (text/icons on primary background) */
|
|
--on-primary: hsl(0, 0%, 100%);
|
|
--on-primary-700: hsl(0, 0%, 100%);
|
|
--on-primary-650: hsl(0, 0%, 100%);
|
|
--on-primary-600: hsl(0, 0%, 100%);
|
|
--on-primary-550: hsl(0, 0%, 100%);
|
|
--on-primary-500: hsl(0, 0%, 100%);
|
|
--on-primary-450: hsl(0, 0%, 98%);
|
|
--on-primary-400: hsl(0, 0%, 20%);
|
|
--on-primary-350: hsl(0, 0%, 18%);
|
|
--on-primary-300: hsl(0, 0%, 16%);
|
|
--on-primary-250: hsl(0, 0%, 14%);
|
|
--on-primary-200: hsl(0, 0%, 12%);
|
|
--on-primary-150: hsl(0, 0%, 10%);
|
|
--on-primary-100: hsl(0, 0%, 8%);
|
|
--on-primary-50: hsl(0, 0%, 6%);
|
|
|
|
/* Alert colors */
|
|
--alert-primary-fg: var(--on-primary);
|
|
--alert-primary-bg: #ca8047;
|
|
--alert-primary-border-color: #cd9e7a;
|
|
|
|
/* Header */
|
|
--header-bg: var(--bg);
|
|
--header-fg: hsl(0, 0%, 90%);
|
|
|
|
/* Secondary background */
|
|
--bg-secondary: hsl(0, 0%, 22%);
|
|
--bg-secondary-50: hsl(0, 0%, 12%);
|
|
--bg-secondary-100: hsl(0, 0%, 17%);
|
|
--bg-secondary-150: hsl(0, 0%, 22%);
|
|
--bg-secondary-200: hsl(0, 0%, 22%);
|
|
--bg-secondary-250: hsl(0, 0%, 22%);
|
|
--bg-secondary-300: hsl(0, 0%, 22%);
|
|
--bg-secondary-350: hsl(0, 0%, 27%);
|
|
--bg-secondary-400: hsl(0, 0%, 32%);
|
|
--bg-secondary-450: hsl(0, 0%, 37%);
|
|
--bg-secondary-500: hsl(0, 0%, 42%);
|
|
--bg-secondary-550: hsl(0, 0%, 47%);
|
|
--bg-secondary-600: hsl(0, 0%, 52%);
|
|
/* Menu colors */
|
|
--menu-fg: hsl(0, 0%, 90%);
|
|
--menu-fg-600: hsl(0, 0%, 60%);
|
|
--menu-fg-550: hsl(0, 0%, 65%);
|
|
--menu-fg-500: hsl(0, 0%, 70%);
|
|
--menu-fg-450: hsl(0, 0%, 75%);
|
|
--menu-fg-400: hsl(0, 0%, 80%);
|
|
--menu-fg-350: hsl(0, 0%, 82%);
|
|
--menu-fg-300: hsl(0, 0%, 84%);
|
|
--menu-fg-250: hsl(0, 0%, 86%);
|
|
--menu-fg-200: hsl(0, 0%, 88%);
|
|
--menu-fg-150: hsl(0, 0%, 90%);
|
|
--menu-fg-100: hsl(0, 0%, 92%);
|
|
--menu-fg-50: hsl(0, 0%, 94%);
|
|
|
|
--menu-bg: hsl(0, 0%, 22%);
|
|
--menu-bg-600: hsl(0, 0%, 18%);
|
|
--menu-bg-550: hsl(0, 0%, 19%);
|
|
--menu-bg-500: hsl(0, 0%, 20%);
|
|
--menu-bg-450: hsl(0, 0%, 21%);
|
|
--menu-bg-400: hsl(0, 0%, 24%);
|
|
--menu-bg-350: hsl(0, 0%, 26%);
|
|
--menu-bg-300: hsl(0, 0%, 28%);
|
|
--menu-bg-250: hsl(0, 0%, 30%);
|
|
--menu-bg-200: hsl(0, 0%, 32%);
|
|
|
|
/* Input fields */
|
|
--input-fg: hsl(0, 0%, 95%);
|
|
--input-bg: hsl(0, 0%, 18%);
|
|
--input-bg-550: hsl(0, 0%, 20%);
|
|
--input-bg-600: hsl(0, 0%, 16%);
|
|
--input-bg-in-secondary: hsl(0, 0%, 16%);
|
|
--input-bg-in-modal: hsl(0, 0%, 18%);
|
|
--input-danger-fg: #ff6b6b;
|
|
--input-danger-bg: rgba(255, 107, 107, 0.1);
|
|
--input-placeholder-color: hsl(0, 0%, 55%);
|
|
--input-border-color: hsl(0, 0%, 32%);
|
|
--input-check-active-fg: #ffffff;
|
|
--input-check-active-bg: var(--primary);
|
|
--input-placeholder-color: var(--menu-fg-600);
|
|
|
|
/* Textarea */
|
|
--textarea-fg: hsl(0, 0%, 95%);
|
|
--textarea-bg: hsl(0, 0%, 18%);
|
|
--textarea-bg-in-secondary: hsl(0, 0%, 16%);
|
|
--textarea-bg-in-modal: hsl(0, 0%, 18%);
|
|
--textarea-placeholder-color: var(--menu-fg-600);
|
|
|
|
/* Support button */
|
|
--support-btn-bg: var(--primary);
|
|
--support-btn-fg: #ffffff;
|
|
--support-btn-heart-bg: #e74c3c;
|
|
|
|
/* PrimeNG Select components */
|
|
--p-select-focus-ring-color: var(--secondary-icon-color);
|
|
--p-select-placeholder-color: var(--menu-fg-600);
|
|
--p-multiselect-background: hsl(0, 0%, 18%);
|
|
--p-select-background: hsl(0, 0%, 18%);
|
|
--p-select-border-color: hsl(0, 0%, 32%);
|
|
--p-select-focus-border-color: hsl(0, 0%, 42%);
|
|
--p-select-option-focus-background: var(--primary-400);
|
|
--p-select-option-focus-color: #ffffff;
|
|
--p-select-option-background: var(--bg-secondary-350);
|
|
--p-select-option-color: #ffffff;
|
|
--p-select-overlay-color: hsl(0, 0%, 95%);
|
|
--p-select-overlay-background: hsl(0, 0%, 20%);
|
|
--p-select-overlay-border-color: hsl(0, 0%, 32%);
|
|
--p-select-dropdown-color: hsl(0, 0%, 90%);
|
|
--p-select-option-selected-focus-background: var(--primary-500);
|
|
--p-select-option-selected-focus-color: #ffffff;
|
|
--p-select-option-selected-background: var(--primary);
|
|
|
|
--p-datatable-header-background: var(--bg-secondary-350);
|
|
--p-datatable-header-color: var(--fg);
|
|
--p-datatable-header-cell-color: var(--fg);
|
|
--p-datatable-header-cell-background: var(--bg-secondary-300);
|
|
--p-datatable-row-background:var(--bg-secondary-400);
|
|
--p-datatable-row-color: var(--fg);
|
|
--p-datatable-header-cell-selected-color: var(--fg);
|
|
--p-datatable-header-cell-selected-background: var(--bg-secondary-300);
|
|
--p-paginator-background: var(--bg-secondary-450);
|
|
--p-paginator-color: var(--fg);
|
|
--p-paginator-current-page-report-color: var(--fg-350);
|
|
--p-datatable-body-cell-border-color: var(--fg-100);
|
|
--p-paginator-nav-button-selected-background: var(--fg-100);
|
|
--p-paginator-nav-button-selected-color: var(--bg);
|
|
}
|
|
|
|
#custom-css .video-thumbnail .play-overlay .icon::before {
|
|
background-color: hsl(221, 59%, 61%);
|
|
}
|
|
|
|
#custom-css .result-type {
|
|
background-color: var(--primary-500);
|
|
}
|
|
|
|
#custom-css ::selection {
|
|
background-color: var(--primary-700);
|
|
}
|