changed structure
This commit is contained in:
Julian Kiedaisch
182
assets/style.css
182
assets/style.css
@@ -1,177 +1,37 @@
|
|||||||
body#custom-css {
|
:root {
|
||||||
--is-dark: 1; /* Or --is-dark: 1 if it's a dark theme */
|
--red: #FF3B3B;
|
||||||
|
--green: #2E9D04;
|
||||||
|
|
||||||
/* Primary color variants (from darkest to lightest) */
|
--fg: #ffffff;
|
||||||
--primary: #71b737;
|
--bg: #1a1a1a;
|
||||||
--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;
|
--input-fg: #ffffff;
|
||||||
--border-secondary: hsl(0, 0%, 32%);
|
--input-bg: #535353;
|
||||||
|
--input-placeholder: #cecece;
|
||||||
|
--input-border-color: #a5a5a5;
|
||||||
|
|
||||||
/* Base colors */
|
--bg-secondary: hsl(0, 0%, 45%);
|
||||||
--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 */
|
--primary: #71b737;
|
||||||
--icon-bg: hsl(0, 0%, 100%);
|
--on-primary: #ffffff;
|
||||||
--active-icon-color: #ffffff;
|
--border-primary: #71b737;
|
||||||
--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: hsl(0, 0%, 22%);
|
||||||
--menu-bg-600: hsl(0, 0%, 18%);
|
--menu-fg: hsl(0, 0%, 90%);
|
||||||
--menu-bg-550: hsl(0, 0%, 19%);
|
--header-bg: var(--bg);
|
||||||
--menu-bg-500: hsl(0, 0%, 20%);
|
--header-fg: var(--fg);
|
||||||
--menu-bg-450: hsl(0, 0%, 21%);
|
--secondary-icon-color: hsl(221, 59%, 61%);
|
||||||
--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 */
|
--alert-primary-fg: var(--fg);
|
||||||
--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 */
|
--is-dark: 1;
|
||||||
--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 {
|
#custom-css .video-thumbnail .play-overlay .icon::before {
|
||||||
background-color: hsl(221, 59%, 61%);
|
background-color: hsl(221, 59%, 61%);
|
||||||
}
|
}
|
||||||
|
|
||||||
#custom-css .result-type {
|
body#custom-css .accordion-button:not(.collapsed) {
|
||||||
background-color: var(--primary-500);
|
--bs-accordion-active-color: var(--fg);
|
||||||
}
|
|
||||||
|
|
||||||
#custom-css ::selection {
|
|
||||||
background-color: var(--primary-700);
|
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user