Complete template system overhaul: CSS variables, theme management, and UI improvements #74
@@ -12,34 +12,35 @@
|
||||
INGROUP: MokoCassiopeia
|
||||
PATH: ./media/templates/site/mokocassiopeia/css/global/dark/colors_alternative.css
|
||||
VERSION: 03.05.00
|
||||
BRIEF: Alternative dark mode color definitions for MokoCassiopeia template
|
||||
BRIEF: Alternative dark mode color definitions (Teal & Purple) for MokoCassiopeia template
|
||||
*/
|
||||
|
||||
/* -----------------------------------------------
|
||||
* DARK THEME
|
||||
* ALTERNATIVE DARK THEME - TEAL & PURPLE
|
||||
* --------------------------------------------- */
|
||||
|
||||
:root[data-bs-theme='dark']{
|
||||
color-scheme: dark;
|
||||
|
||||
/* ===== BRAND & THEME COLORS ===== */
|
||||
--color-primary: #112855;
|
||||
--accent-color-primary: #3f8ff0;
|
||||
--accent-color-secondary: #6fb3ff;
|
||||
--color-primary: #14b8a6;
|
||||
--accent-color-primary: #c084fc;
|
||||
--accent-color-secondary: #d8b4fe;
|
||||
|
||||
/* ===== NAVIGATION ===== */
|
||||
--mainmenu-nav-link-color: #fff;
|
||||
--nav-text-color: var(--mainmenu-nav-link-color);
|
||||
--nav-bg-color: var(--color-link);
|
||||
--nav-text-color: #e2e8f0;
|
||||
--nav-bg-color: #0f766e;
|
||||
|
||||
/* ===== LINKS ===== */
|
||||
--color-link: #224FAA;
|
||||
--color-hover: #224FAA;
|
||||
--link-color: #8ab4f8;
|
||||
--link-color-rgb: 138, 180, 248;
|
||||
--color-link: #e9d5ff;
|
||||
--color-hover: #c084fc;
|
||||
--color-active: var(--mainmenu-nav-link-color);
|
||||
--link-color: #c084fc;
|
||||
--link-color-rgb: 192, 132, 252;
|
||||
--link-decoration: underline;
|
||||
--link-hover-color: #c3d6ff;
|
||||
--link-hover-color-rgb: 195, 214, 255;
|
||||
--link-hover-color: #d8b4fe;
|
||||
--link-hover-color-rgb: 216, 180, 254;
|
||||
--link-active-color: var(--link-color);
|
||||
|
||||
/* ===== OFFCANVAS ===== */
|
||||
@@ -52,7 +53,7 @@ color-scheme: dark;
|
||||
--navbar-padding-y: 0.5rem;
|
||||
--navbar-color: var(--nav-text-color);
|
||||
--navbar-active-color: var(--mainmenu-nav-link-color);
|
||||
--navbar-disabled-color: #6c757d;
|
||||
--navbar-disabled-color: #475569;
|
||||
--navbar-brand-padding-y: 0.3125rem;
|
||||
--navbar-brand-margin-end: 1rem;
|
||||
--navbar-brand-font-size: 1.25rem;
|
||||
@@ -71,7 +72,7 @@ color-scheme: dark;
|
||||
--nav-link-font-weight: 400;
|
||||
--nav-link-color: var(--nav-text-color);
|
||||
--nav-link-active-color: var(--mainmenu-nav-link-color);
|
||||
--nav-link-disabled-color: #6c757d;
|
||||
--nav-link-disabled-color: #475569;
|
||||
|
||||
/* ===== TYPOGRAPHY & BODY ===== */
|
||||
--font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
@@ -80,22 +81,22 @@ color-scheme: dark;
|
||||
--body-font-size: 1rem;
|
||||
--body-font-weight: 400;
|
||||
--body-line-height: 1.5;
|
||||
--body-color: #e6ebf1;
|
||||
--body-color-rgb: 230, 235, 241;
|
||||
--body-bg: #0e1318;
|
||||
--body-bg-rgb: 14, 19, 24;
|
||||
--body-color: #e2e8f0;
|
||||
--body-color-rgb: 226, 232, 240;
|
||||
--body-bg: #0f172a;
|
||||
--body-bg-rgb: 15, 23, 42;
|
||||
--heading-color: #f1f5f9;
|
||||
--emphasis-color: #fff;
|
||||
--emphasis-color-rgb: 255, 255, 255;
|
||||
--secondary-color: #e6ebf1bf;
|
||||
--secondary-color-rgb: 230, 235, 241;
|
||||
--tertiary-color: #e6ebf180;
|
||||
--tertiary-color-rgb: 230, 235, 241;
|
||||
--muted-color: #6d757e;
|
||||
--code-color: #ff7abd;
|
||||
--code-color-ink: var(--code-color, #e93f8e);
|
||||
--highlight-color: #111;
|
||||
--highlight-bg: #ffe28a1a;
|
||||
--secondary-color: #cbd5e1;
|
||||
--secondary-color-rgb: 203, 213, 225;
|
||||
--tertiary-color: #94a3b8;
|
||||
--tertiary-color-rgb: 148, 163, 184;
|
||||
--muted-color: #64748b;
|
||||
--code-color: #e879f9;
|
||||
--code-color-ink: var(--code-color, #e879f9);
|
||||
--highlight-color: #0f172a;
|
||||
--highlight-bg: #fef08a1a;
|
||||
|
||||
/* ===== LAYOUT & SPACING ===== */
|
||||
--padding-x: 1rem;
|
||||
@@ -103,18 +104,18 @@ color-scheme: dark;
|
||||
--bg-opacity: 1;
|
||||
--nav-toggle-size: 3rem;
|
||||
--gradient: linear-gradient(180deg, #ffffff26, #fff0);
|
||||
--secondary-bg: #151b22;
|
||||
--secondary-bg-rgb: 21, 27, 34;
|
||||
--tertiary-bg: #10151b;
|
||||
--tertiary-bg-rgb: 16, 21, 27;
|
||||
--hr-color: var(--border-color, #dfe3e7);
|
||||
--border-color-soft: var(--border-color, #dfe3e7);
|
||||
--kbd-bg: var(--secondary-bg, #eaedf0);
|
||||
--kbd-ink: var(--body-bg, #fff);
|
||||
--toc-bg: var(--secondary-bg, #eaedf0);
|
||||
--toc-ink: var(--color-primary, #112855);
|
||||
--selection-bg: var(--highlight-bg, #fbeea8);
|
||||
--selection-ink: var(--body-color, #22262a);
|
||||
--secondary-bg: #1e293b;
|
||||
--secondary-bg-rgb: 30, 41, 59;
|
||||
--tertiary-bg: #334155;
|
||||
--tertiary-bg-rgb: 51, 65, 85;
|
||||
--hr-color: var(--border-color, #334155);
|
||||
--border-color-soft: var(--border-color, #334155);
|
||||
--kbd-bg: var(--secondary-bg, #1e293b);
|
||||
--kbd-ink: var(--body-bg, #0f172a);
|
||||
--toc-bg: var(--secondary-bg, #1e293b);
|
||||
--toc-ink: var(--color-primary, #14b8a6);
|
||||
--selection-bg: var(--highlight-bg, #fef08a1a);
|
||||
--selection-ink: var(--body-color, #e2e8f0);
|
||||
--border: 5px;
|
||||
|
||||
/* ===== BREAKPOINTS ===== */
|
||||
@@ -125,71 +126,71 @@ color-scheme: dark;
|
||||
--bp-xl: 1200px;
|
||||
|
||||
/* ===== BOOTSTRAP PALETTE ===== */
|
||||
--primary: #010156;
|
||||
--secondary: #48525d;
|
||||
--success: #4aa664;
|
||||
--info: #4f7aa0;
|
||||
--warning: #c77a00;
|
||||
--danger: #c23a31;
|
||||
--light: #1b2027;
|
||||
--dark: #0f1318;
|
||||
--primary-rgb: 1,1,86;
|
||||
--secondary-rgb: 72,82,93;
|
||||
--success-rgb: 74,166,100;
|
||||
--info-rgb: 79,122,160;
|
||||
--warning-rgb: 199,122,0;
|
||||
--danger-rgb: 194,58,49;
|
||||
--light-rgb: 27,32,39;
|
||||
--dark-rgb: 15,19,24;
|
||||
--primary-text-emphasis: #c7ccff;
|
||||
--secondary-text-emphasis: #cfd6de;
|
||||
--success-text-emphasis: #bde8c9;
|
||||
--info-text-emphasis: #bcd6ee;
|
||||
--warning-text-emphasis: #ffd9a6;
|
||||
--danger-text-emphasis: #ffb7b2;
|
||||
--light-text-emphasis: #d2d8df;
|
||||
--dark-text-emphasis: #d2d8df;
|
||||
--primary-bg-subtle: #0b1030;
|
||||
--secondary-bg-subtle: #1e2430;
|
||||
--success-bg-subtle: #0f2a1b;
|
||||
--info-bg-subtle: #0d2232;
|
||||
--warning-bg-subtle: #2a1e06;
|
||||
--danger-bg-subtle: #2d1110;
|
||||
--light-bg-subtle: #12161d;
|
||||
--dark-bg-subtle: #1e2430;
|
||||
--primary-border-subtle: #2b3a7a;
|
||||
--secondary-border-subtle: #2b323b;
|
||||
--success-border-subtle: #2b5b40;
|
||||
--info-border-subtle: #254861;
|
||||
--warning-border-subtle: #5a3c0e;
|
||||
--danger-border-subtle: #5c2723;
|
||||
--light-border-subtle: #222831;
|
||||
--dark-border-subtle: #2b323b;
|
||||
--primary: #14b8a6;
|
||||
--secondary: #64748b;
|
||||
--success: #34d399;
|
||||
--info: #38bdf8;
|
||||
--warning: #fbbf24;
|
||||
--danger: #fb7185;
|
||||
--light: #334155;
|
||||
--dark: #0f172a;
|
||||
--primary-rgb: 20, 184, 166;
|
||||
--secondary-rgb: 100, 116, 139;
|
||||
--success-rgb: 52, 211, 153;
|
||||
--info-rgb: 56, 189, 248;
|
||||
--warning-rgb: 251, 191, 36;
|
||||
--danger-rgb: 251, 113, 133;
|
||||
--light-rgb: 51, 65, 85;
|
||||
--dark-rgb: 15, 23, 42;
|
||||
--primary-text-emphasis: #99f6e4;
|
||||
--secondary-text-emphasis: #cbd5e1;
|
||||
--success-text-emphasis: #a7f3d0;
|
||||
--info-text-emphasis: #bae6fd;
|
||||
--warning-text-emphasis: #fde68a;
|
||||
--danger-text-emphasis: #fecdd3;
|
||||
--light-text-emphasis: #cbd5e1;
|
||||
--dark-text-emphasis: #cbd5e1;
|
||||
--primary-bg-subtle: #134e4a;
|
||||
--secondary-bg-subtle: #1e293b;
|
||||
--success-bg-subtle: #064e3b;
|
||||
--info-bg-subtle: #0c4a6e;
|
||||
--warning-bg-subtle: #78350f;
|
||||
--danger-bg-subtle: #881337;
|
||||
--light-bg-subtle: #1e293b;
|
||||
--dark-bg-subtle: #0f172a;
|
||||
--primary-border-subtle: #115e59;
|
||||
--secondary-border-subtle: #334155;
|
||||
--success-border-subtle: #065f46;
|
||||
--info-border-subtle: #075985;
|
||||
--warning-border-subtle: #92400e;
|
||||
--danger-border-subtle: #9f1239;
|
||||
--light-border-subtle: #334155;
|
||||
--dark-border-subtle: #1e293b;
|
||||
|
||||
/* ===== STANDARD COLORS ===== */
|
||||
--blue: #91a4ff;
|
||||
--indigo: #b19cff;
|
||||
--purple: #c0a5ff;
|
||||
--pink: #ff8fc0;
|
||||
--red: #ff7a73;
|
||||
--orange: #ff9c4d;
|
||||
--yellow: #ffd166;
|
||||
--green: #78d694;
|
||||
--teal: #76e3ff;
|
||||
--cyan: #6fb7ff;
|
||||
--blue: #60a5fa;
|
||||
--indigo: #818cf8;
|
||||
--purple: #c084fc;
|
||||
--pink: #f472b6;
|
||||
--red: #f87171;
|
||||
--orange: #fb923c;
|
||||
--yellow: #fbbf24;
|
||||
--green: #34d399;
|
||||
--teal: #2dd4bf;
|
||||
--cyan: #22d3ee;
|
||||
--black: #000;
|
||||
--white: #fff;
|
||||
|
||||
/* ===== GRAY SCALE ===== */
|
||||
--gray-100: #161a20;
|
||||
--gray-200: #1b2027;
|
||||
--gray-300: #222831;
|
||||
--gray-400: #2b323b;
|
||||
--gray-500: #36404a;
|
||||
--gray-600: #48525d;
|
||||
--gray-700: #5b6672;
|
||||
--gray-800: #cfd6de;
|
||||
--gray-900: #e6ebf1;
|
||||
--gray-100: #1e293b;
|
||||
--gray-200: #334155;
|
||||
--gray-300: #475569;
|
||||
--gray-400: #64748b;
|
||||
--gray-500: #94a3b8;
|
||||
--gray-600: #cbd5e1;
|
||||
--gray-700: #e2e8f0;
|
||||
--gray-800: #f1f5f9;
|
||||
--gray-900: #f8fafc;
|
||||
--white-rgb: 255, 255, 255;
|
||||
--black-rgb: 0, 0, 0;
|
||||
|
||||
@@ -201,73 +202,73 @@ color-scheme: dark;
|
||||
|
||||
/* ===== CONTAINER BACKGROUNDS ===== */
|
||||
/* Below Topbar Container */
|
||||
--container-below-topbar-bg-image: ;
|
||||
--container-below-topbar-bg-color: ;
|
||||
--container-below-topbar-bg-image: none;
|
||||
--container-below-topbar-bg-color: transparent;
|
||||
--container-below-topbar-bg-position: center;
|
||||
--container-below-topbar-bg-attachment: fixed;
|
||||
--container-below-topbar-bg-repeat: no-repeat;
|
||||
--container-below-topbar-bg-size: cover;
|
||||
--container-below-topbar-border: ;
|
||||
--container-below-topbar-border-radius: ;
|
||||
--container-below-topbar-border: none;
|
||||
--container-below-topbar-border-radius: 0;
|
||||
|
||||
/* Top A Container */
|
||||
--container-top-a-bg-image: ;
|
||||
--container-top-a-bg-color: ;
|
||||
--container-top-a-bg-image: none;
|
||||
--container-top-a-bg-color: transparent;
|
||||
--container-top-a-bg-position: center;
|
||||
--container-top-a-bg-attachment: fixed;
|
||||
--container-top-a-bg-repeat: no-repeat;
|
||||
--container-top-a-bg-size: cover;
|
||||
--container-top-a-border: ;
|
||||
--container-top-a-border-radius: ;
|
||||
--container-top-a-border: none;
|
||||
--container-top-a-border-radius: 0;
|
||||
|
||||
/* Top B Container */
|
||||
--container-top-b-bg-image: ;
|
||||
--container-top-b-bg-color: ;
|
||||
--container-top-b-bg-image: none;
|
||||
--container-top-b-bg-color: transparent;
|
||||
--container-top-b-bg-position: center;
|
||||
--container-top-b-bg-attachment: fixed;
|
||||
--container-top-b-bg-repeat: no-repeat;
|
||||
--container-top-b-bg-size: cover;
|
||||
--container-top-b-border: ;
|
||||
--container-top-b-border-radius: ;
|
||||
--container-top-b-border: none;
|
||||
--container-top-b-border-radius: 0;
|
||||
|
||||
/* TOC Container */
|
||||
--container-toc-bg: ;
|
||||
--container-toc-color: #dbe3ff;
|
||||
--container-toc-bg: var(--secondary-bg);
|
||||
--container-toc-color: #99f6e4;
|
||||
|
||||
/* Sidebar Container */
|
||||
--container-sidebar-bg-image: ;
|
||||
--container-sidebar-bg-color: ;
|
||||
--container-sidebar-bg-image: none;
|
||||
--container-sidebar-bg-color: transparent;
|
||||
--container-sidebar-bg-position: center;
|
||||
--container-sidebar-bg-attachment: scroll;
|
||||
--container-sidebar-bg-repeat: repeat;
|
||||
--container-sidebar-bg-size: auto;
|
||||
--container-sidebar-border: ;
|
||||
--container-sidebar-border-radius: ;
|
||||
--container-sidebar-border: none;
|
||||
--container-sidebar-border-radius: 0;
|
||||
|
||||
/* Bottom A Container */
|
||||
--container-bottom-a-bg-image: ;
|
||||
--container-bottom-a-bg-color: ;
|
||||
--container-bottom-a-bg-image: none;
|
||||
--container-bottom-a-bg-color: transparent;
|
||||
--container-bottom-a-bg-position: center;
|
||||
--container-bottom-a-bg-attachment: fixed;
|
||||
--container-bottom-a-bg-repeat: no-repeat;
|
||||
--container-bottom-a-bg-size: cover;
|
||||
--container-bottom-a-border: ;
|
||||
--container-bottom-a-border: none;
|
||||
--container-bottom-a-border-radius: 5px;
|
||||
|
||||
/* Bottom B Container */
|
||||
--container-bottom-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: ;
|
||||
--container-bottom-b-bg-image: none;
|
||||
--container-bottom-b-bg-color: transparent;
|
||||
--container-bottom-b-bg-position: center;
|
||||
--container-bottom-b-bg-attachment: fixed;
|
||||
--container-bottom-b-bg-repeat: no-repeat;
|
||||
--container-bottom-b-bg-size: cover;
|
||||
--container-bottom-b-border: ;
|
||||
--container-bottom-b-border-radius: ;
|
||||
--container-bottom-b-border: none;
|
||||
--container-bottom-b-border-radius: 0;
|
||||
|
||||
/* ===== BORDERS ===== */
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border-color: #2b323b;
|
||||
--border-color: #334155;
|
||||
--border-color-translucent: #ffffff26;
|
||||
--border-radius: .25rem;
|
||||
--border-radius-sm: .2rem;
|
||||
@@ -286,19 +287,19 @@ color-scheme: dark;
|
||||
/* ===== FOCUS & FORMS ===== */
|
||||
--focus-ring-width: .25rem;
|
||||
--focus-ring-opacity: .6;
|
||||
--focus-ring-color: #5472ff66;
|
||||
--input-color: #e6ebf1;
|
||||
--input-bg: #1a2332;
|
||||
--input-border-color: #3a4250;
|
||||
--input-focus-border-color: #5472ff;
|
||||
--input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25);
|
||||
--input-placeholder-color: #8894aa;
|
||||
--input-disabled-bg: #0f1318;
|
||||
--input-disabled-border-color: #2b323b;
|
||||
--form-valid-color: #78d694;
|
||||
--form-valid-border-color: #78d694;
|
||||
--form-invalid-color: #ff8e86;
|
||||
--form-invalid-border-color: #ff8e86;
|
||||
--focus-ring-color: #14b8a666;
|
||||
--input-color: #e2e8f0;
|
||||
--input-bg: #1e293b;
|
||||
--input-border-color: #475569;
|
||||
--input-focus-border-color: #14b8a6;
|
||||
--input-focus-box-shadow: 0 0 0 0.25rem rgba(20, 184, 166, 0.25);
|
||||
--input-placeholder-color: #94a3b8;
|
||||
--input-disabled-bg: #0f172a;
|
||||
--input-disabled-border-color: #334155;
|
||||
--form-valid-color: #34d399;
|
||||
--form-valid-border-color: #34d399;
|
||||
--form-invalid-color: #fb7185;
|
||||
--form-invalid-border-color: #fb7185;
|
||||
|
||||
/* ===== BUTTONS ===== */
|
||||
--btn-border-radius: var(--border-radius);
|
||||
@@ -329,7 +330,7 @@ color-scheme: dark;
|
||||
--vm-surface-2: var(--tertiary-bg);
|
||||
--vm-text: var(--body-color);
|
||||
--vm-text-strong: #ffffff;
|
||||
--vm-text-muted: var(--gray-700);
|
||||
--vm-text-muted: var(--gray-600);
|
||||
--vm-border: var(--border-color);
|
||||
--vm-price-color: var(--success);
|
||||
|
||||
@@ -403,19 +404,19 @@ color-scheme: dark;
|
||||
--vm-vendor-menu-hover-bg: var(--tertiary-bg);
|
||||
|
||||
/* ===== GABLE ===== */
|
||||
--gab-blue: #4d9fff;
|
||||
--gab-green: #5cb85c;
|
||||
--gab-red: #ff6b6b;
|
||||
--gab-orange: #ff9f5a;
|
||||
--gab-gray1: #868e96;
|
||||
--gab-gray2: #adb5bd;
|
||||
--gab-gray3: #ced4da;
|
||||
--gab-blue: #60a5fa;
|
||||
--gab-green: #34d399;
|
||||
--gab-red: #f87171;
|
||||
--gab-orange: #fb923c;
|
||||
--gab-gray1: #94a3b8;
|
||||
--gab-gray2: #cbd5e1;
|
||||
--gab-gray3: #e2e8f0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
--btn-padding-x: 1rem;
|
||||
--btn-padding-y: 0.6rem;
|
||||
--btn-font-family: ;
|
||||
--btn-font-family: inherit;
|
||||
--btn-font-size: 1rem;
|
||||
--btn-font-weight: 400;
|
||||
--btn-line-height: 1.5;
|
||||
@@ -454,60 +455,60 @@ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(240, 98%, 17%);
|
||||
--btn-border-color: hsl(240, 98%, 17%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #010149;
|
||||
--btn-hover-border-color: #010145;
|
||||
--btn-focus-shadow-rgb: 84, 114, 255;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #010145;
|
||||
--btn-active-border-color: #010141;
|
||||
--btn-color: #ffffff;
|
||||
--btn-bg: #14b8a6;
|
||||
--btn-border-color: #14b8a6;
|
||||
--btn-hover-color: #ffffff;
|
||||
--btn-hover-bg: #0d9488;
|
||||
--btn-hover-border-color: #0d9488;
|
||||
--btn-focus-shadow-rgb: 20, 184, 166;
|
||||
--btn-active-color: #ffffff;
|
||||
--btn-active-bg: #0d9488;
|
||||
--btn-active-border-color: #0f766e;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
--btn-color: var(--nav-text-color);
|
||||
--btn-bg: var(--nav-bg-color);
|
||||
--btn-border-color: #3a4250;
|
||||
--btn-border-color: #475569;
|
||||
--btn-hover-color: #fff;
|
||||
--btn-hover-bg: #1b2a55;
|
||||
--btn-hover-border-color: #162448;
|
||||
--btn-focus-shadow-rgb: 84, 114, 255;
|
||||
--btn-hover-bg: #115e59;
|
||||
--btn-hover-border-color: #134e4a;
|
||||
--btn-focus-shadow-rgb: 20, 184, 166;
|
||||
--btn-active-color: #fff;
|
||||
--btn-active-bg: #162448;
|
||||
--btn-active-border-color: #12203f;
|
||||
--btn-active-bg: #134e4a;
|
||||
--btn-active-border-color: #134e4a;
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
--btn-color: #e6ebf1;
|
||||
--btn-border-color: #e6ebf1;
|
||||
--btn-hover-color: #111;
|
||||
--btn-hover-bg: #e6ebf1;
|
||||
--btn-hover-border-color: #e6ebf1;
|
||||
--btn-active-color: #111;
|
||||
--btn-active-bg: #d7dce2;
|
||||
--btn-active-border-color: #d7dce2;
|
||||
--btn-color: #e2e8f0;
|
||||
--btn-border-color: #e2e8f0;
|
||||
--btn-hover-color: #0f172a;
|
||||
--btn-hover-bg: #e2e8f0;
|
||||
--btn-hover-border-color: #e2e8f0;
|
||||
--btn-active-color: #0f172a;
|
||||
--btn-active-bg: #cbd5e1;
|
||||
--btn-active-border-color: #cbd5e1;
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
--btn-font-weight: 400;
|
||||
--btn-color: var(--link-color);
|
||||
--btn-color: var(--color-link);
|
||||
--btn-bg: transparent;
|
||||
--btn-border-color: transparent;
|
||||
--btn-hover-color: var(--link-hover-color);
|
||||
--btn-hover-border-color: transparent;
|
||||
--btn-active-color: var(--link-hover-color);
|
||||
--btn-active-border-color: transparent;
|
||||
--btn-disabled-color: #6d7781;
|
||||
--btn-disabled-color: #64748b;
|
||||
--btn-disabled-border-color: transparent;
|
||||
--btn-box-shadow: none;
|
||||
--btn-focus-shadow-rgb: 84, 114, 255;
|
||||
--btn-focus-shadow-rgb: 20, 184, 166;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
--btn-color: var(--nav-text-color);
|
||||
--btn-color: var(--color-hover);
|
||||
--btn-bg: var(--nav-bg-color);
|
||||
}
|
||||
|
||||
@@ -202,68 +202,68 @@ color-scheme: dark;
|
||||
|
||||
/* ===== CONTAINER BACKGROUNDS ===== */
|
||||
/* Below Topbar Container */
|
||||
--container-below-topbar-bg-image: ;
|
||||
--container-below-topbar-bg-color: ;
|
||||
--container-below-topbar-bg-image: none;
|
||||
--container-below-topbar-bg-color: transparent;
|
||||
--container-below-topbar-bg-position: center;
|
||||
--container-below-topbar-bg-attachment: fixed;
|
||||
--container-below-topbar-bg-repeat: no-repeat;
|
||||
--container-below-topbar-bg-size: cover;
|
||||
--container-below-topbar-border: ;
|
||||
--container-below-topbar-border-radius: ;
|
||||
--container-below-topbar-border: none;
|
||||
--container-below-topbar-border-radius: 0;
|
||||
|
||||
/* Top A Container */
|
||||
--container-top-a-bg-image: ;
|
||||
--container-top-a-bg-color: ;
|
||||
--container-top-a-bg-image: none;
|
||||
--container-top-a-bg-color: transparent;
|
||||
--container-top-a-bg-position: center;
|
||||
--container-top-a-bg-attachment: fixed;
|
||||
--container-top-a-bg-repeat: no-repeat;
|
||||
--container-top-a-bg-size: cover;
|
||||
--container-top-a-border: ;
|
||||
--container-top-a-border-radius: ;
|
||||
--container-top-a-border: none;
|
||||
--container-top-a-border-radius: 0;
|
||||
|
||||
/* Top B Container */
|
||||
--container-top-b-bg-image: ;
|
||||
--container-top-b-bg-color: ;
|
||||
--container-top-b-bg-image: none;
|
||||
--container-top-b-bg-color: transparent;
|
||||
--container-top-b-bg-position: center;
|
||||
--container-top-b-bg-attachment: fixed;
|
||||
--container-top-b-bg-repeat: no-repeat;
|
||||
--container-top-b-bg-size: cover;
|
||||
--container-top-b-border: ;
|
||||
--container-top-b-border-radius: ;
|
||||
--container-top-b-border: none;
|
||||
--container-top-b-border-radius: 0;
|
||||
|
||||
/* TOC Container */
|
||||
--container-toc-bg: ;
|
||||
--container-toc-bg: var(--secondary-bg);
|
||||
--container-toc-color: #dbe3ff;
|
||||
|
||||
/* Sidebar Container */
|
||||
--container-sidebar-bg-image: ;
|
||||
--container-sidebar-bg-color: ;
|
||||
--container-sidebar-bg-image: none;
|
||||
--container-sidebar-bg-color: transparent;
|
||||
--container-sidebar-bg-position: center;
|
||||
--container-sidebar-bg-attachment: scroll;
|
||||
--container-sidebar-bg-repeat: repeat;
|
||||
--container-sidebar-bg-size: auto;
|
||||
--container-sidebar-border: ;
|
||||
--container-sidebar-border-radius: ;
|
||||
--container-sidebar-border: none;
|
||||
--container-sidebar-border-radius: 0;
|
||||
|
||||
/* Bottom A Container */
|
||||
--container-bottom-a-bg-image: ;
|
||||
--container-bottom-a-bg-color: ;
|
||||
--container-bottom-a-bg-image: none;
|
||||
--container-bottom-a-bg-color: transparent;
|
||||
--container-bottom-a-bg-position: center;
|
||||
--container-bottom-a-bg-attachment: fixed;
|
||||
--container-bottom-a-bg-repeat: no-repeat;
|
||||
--container-bottom-a-bg-size: cover;
|
||||
--container-bottom-a-border: ;
|
||||
--container-bottom-a-border: none;
|
||||
--container-bottom-a-border-radius: 5px;
|
||||
|
||||
/* Bottom B Container */
|
||||
--container-bottom-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: ;
|
||||
--container-bottom-b-bg-image: none;
|
||||
--container-bottom-b-bg-color: transparent;
|
||||
--container-bottom-b-bg-position: center;
|
||||
--container-bottom-b-bg-attachment: fixed;
|
||||
--container-bottom-b-bg-repeat: no-repeat;
|
||||
--container-bottom-b-bg-size: cover;
|
||||
--container-bottom-b-border: ;
|
||||
--container-bottom-b-border-radius: ;
|
||||
--container-bottom-b-border: none;
|
||||
--container-bottom-b-border-radius: 0;
|
||||
|
||||
/* ===== BORDERS ===== */
|
||||
--border-width: 1px;
|
||||
@@ -416,7 +416,7 @@ color-scheme: dark;
|
||||
.btn {
|
||||
--btn-padding-x: 1rem;
|
||||
--btn-padding-y: 0.6rem;
|
||||
--btn-font-family: ;
|
||||
--btn-font-family: inherit;
|
||||
--btn-font-size: 1rem;
|
||||
--btn-font-weight: 400;
|
||||
--btn-line-height: 1.5;
|
||||
|
||||
@@ -12,34 +12,34 @@
|
||||
INGROUP: MokoCassiopeia
|
||||
PATH: ./media/templates/site/mokocassiopeia/css/global/light/colors_alternative.css
|
||||
VERSION: 03.05.00
|
||||
BRIEF: Alternative light mode color definitions for MokoCassiopeia template
|
||||
BRIEF: Alternative light mode color definitions (Teal & Purple) for MokoCassiopeia template
|
||||
*/
|
||||
|
||||
/* -----------------------------------------------
|
||||
* LIGHT THEME
|
||||
* ALTERNATIVE LIGHT THEME - TEAL & PURPLE
|
||||
* --------------------------------------------- */
|
||||
|
||||
:root[data-bs-theme="light"] {
|
||||
color-scheme: light;
|
||||
|
||||
/* ===== BRAND & THEME COLORS ===== */
|
||||
--color-primary: #112855;
|
||||
--accent-color-primary: #3f8ff0;
|
||||
--accent-color-secondary: #3f8ff0;
|
||||
--color-primary: #0d9488;
|
||||
--accent-color-primary: #a855f7;
|
||||
--accent-color-secondary: #c084fc;
|
||||
|
||||
/* ===== NAVIGATION ===== */
|
||||
--mainmenu-nav-link-color: white;
|
||||
--nav-text-color: var(--mainmenu-nav-link-color);
|
||||
--nav-bg-color: var(--color-link);
|
||||
--nav-text-color: white;
|
||||
--nav-bg-color: #0d9488;
|
||||
|
||||
/* ===== LINKS ===== */
|
||||
--color-link: #224FAA;
|
||||
--color-hover: var(--accent-color-primary);
|
||||
--link-color: #224faa;
|
||||
--link-color-rgb: 34, 79, 170;
|
||||
--color-link: #7c3aed;
|
||||
--color-hover: #a855f7;
|
||||
--link-color: #7c3aed;
|
||||
--link-color-rgb: 124, 58, 237;
|
||||
--link-decoration: underline;
|
||||
--link-hover-color: #424077;
|
||||
--link-hover-color-rgb: 66, 64, 119;
|
||||
--link-hover-color: #a855f7;
|
||||
--link-hover-color-rgb: 168, 85, 247;
|
||||
--link-active-color: var(--link-color);
|
||||
|
||||
/* ===== OFFCANVAS ===== */
|
||||
@@ -52,7 +52,7 @@ color-scheme: light;
|
||||
--navbar-padding-y: 0.5rem;
|
||||
--navbar-color: var(--nav-text-color);
|
||||
--navbar-active-color: var(--mainmenu-nav-link-color);
|
||||
--navbar-disabled-color: #6c757d;
|
||||
--navbar-disabled-color: #94a3b8;
|
||||
--navbar-brand-padding-y: 0.3125rem;
|
||||
--navbar-brand-margin-end: 1rem;
|
||||
--navbar-brand-font-size: 1.25rem;
|
||||
@@ -71,7 +71,7 @@ color-scheme: light;
|
||||
--nav-link-font-weight: 400;
|
||||
--nav-link-color: var(--nav-text-color);
|
||||
--nav-link-active-color: var(--mainmenu-nav-link-color);
|
||||
--nav-link-disabled-color: #6c757d;
|
||||
--nav-link-disabled-color: #94a3b8;
|
||||
|
||||
/* ===== TYPOGRAPHY & BODY ===== */
|
||||
--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
@@ -80,22 +80,22 @@ color-scheme: light;
|
||||
--body-font-size: 1rem;
|
||||
--body-font-weight: 400;
|
||||
--body-line-height: 1.5;
|
||||
--body-color: #22262a;
|
||||
--body-color-rgb: 34, 38, 42;
|
||||
--body-color: #1e293b;
|
||||
--body-color-rgb: 30, 41, 59;
|
||||
--body-bg: #fff;
|
||||
--body-bg-rgb: 255, 255, 255;
|
||||
--heading-color: inherit;
|
||||
--emphasis-color: #000;
|
||||
--emphasis-color-rgb: 0, 0, 0;
|
||||
--secondary-color: #22262abf;
|
||||
--secondary-color-rgb: 34, 38, 42;
|
||||
--tertiary-color: #22262a80;
|
||||
--tertiary-color-rgb: 34, 38, 42;
|
||||
--muted-color: #6d757e;
|
||||
--code-color: #e93f8e;
|
||||
--code-color-ink: var(--code-color, #e93f8e);
|
||||
--highlight-color: #22262a;
|
||||
--highlight-bg: #fbeea8;
|
||||
--emphasis-color: #0f172a;
|
||||
--emphasis-color-rgb: 15, 23, 42;
|
||||
--secondary-color: #475569;
|
||||
--secondary-color-rgb: 71, 85, 105;
|
||||
--tertiary-color: #64748b;
|
||||
--tertiary-color-rgb: 100, 116, 139;
|
||||
--muted-color: #64748b;
|
||||
--code-color: #c026d3;
|
||||
--code-color-ink: var(--code-color, #c026d3);
|
||||
--highlight-color: #1e293b;
|
||||
--highlight-bg: #fde68a;
|
||||
|
||||
/* ===== LAYOUT & SPACING ===== */
|
||||
--padding-x: 1rem;
|
||||
@@ -103,18 +103,18 @@ color-scheme: light;
|
||||
--bg-opacity: 1;
|
||||
--nav-toggle-size: 3rem;
|
||||
--gradient: linear-gradient(180deg, #ffffff26, #fff0);
|
||||
--secondary-bg: #eaedf0;
|
||||
--secondary-bg-rgb: 234, 237, 240;
|
||||
--tertiary-bg: #f9fafb;
|
||||
--tertiary-bg-rgb: 249, 250, 251;
|
||||
--hr-color: var(--border-color, #dfe3e7);
|
||||
--border-color-soft: var(--border-color, #dfe3e7);
|
||||
--kbd-bg: var(--secondary-bg, #eaedf0);
|
||||
--secondary-bg: #f1f5f9;
|
||||
--secondary-bg-rgb: 241, 245, 249;
|
||||
--tertiary-bg: #f8fafc;
|
||||
--tertiary-bg-rgb: 248, 250, 252;
|
||||
--hr-color: var(--border-color, #e2e8f0);
|
||||
--border-color-soft: var(--border-color, #e2e8f0);
|
||||
--kbd-bg: var(--secondary-bg, #f1f5f9);
|
||||
--kbd-ink: var(--body-bg, #fff);
|
||||
--toc-bg: var(--secondary-bg, #eaedf0);
|
||||
--toc-ink: var(--color-primary, #112855);
|
||||
--selection-bg: var(--highlight-bg, #fbeea8);
|
||||
--selection-ink: var(--body-color, #22262a);
|
||||
--toc-bg: var(--secondary-bg, #f1f5f9);
|
||||
--toc-ink: var(--color-primary, #0d9488);
|
||||
--selection-bg: var(--highlight-bg, #fde68a);
|
||||
--selection-ink: var(--body-color, #1e293b);
|
||||
--border: 5px;
|
||||
|
||||
/* ===== BREAKPOINTS ===== */
|
||||
@@ -125,71 +125,71 @@ color-scheme: light;
|
||||
--bp-xl: 1200px;
|
||||
|
||||
/* ===== BOOTSTRAP PALETTE ===== */
|
||||
--primary: #010156;
|
||||
--secondary: #6d757e;
|
||||
--success: #448344;
|
||||
--info: #30638d;
|
||||
--warning: #ad6200;
|
||||
--danger: #a51f18;
|
||||
--light: #f9fafb;
|
||||
--dark: #353b41;
|
||||
--primary-rgb: 1, 1, 86;
|
||||
--secondary-rgb: 109, 117, 126;
|
||||
--success-rgb: 68, 131, 68;
|
||||
--info-rgb: 48, 99, 141;
|
||||
--warning-rgb: 173, 98, 0;
|
||||
--danger-rgb: 165, 31, 24;
|
||||
--light-rgb: 249, 250, 251;
|
||||
--dark-rgb: 53, 59, 65;
|
||||
--primary-text-emphasis: #002;
|
||||
--secondary-text-emphasis: #2c2f32;
|
||||
--success-text-emphasis: #1b351b;
|
||||
--info-text-emphasis: #132838;
|
||||
--warning-text-emphasis: #452700;
|
||||
--danger-text-emphasis: #420c09;
|
||||
--light-text-emphasis: #484f56;
|
||||
--dark-text-emphasis: #484f56;
|
||||
--primary-bg-subtle: #ccd;
|
||||
--secondary-bg-subtle: #e2e3e5;
|
||||
--success-bg-subtle: #dae6da;
|
||||
--info-bg-subtle: #d6e0e8;
|
||||
--warning-bg-subtle: #efe0cc;
|
||||
--danger-bg-subtle: #edd2d1;
|
||||
--primary: #0d9488;
|
||||
--secondary: #64748b;
|
||||
--success: #10b981;
|
||||
--info: #0ea5e9;
|
||||
--warning: #f59e0b;
|
||||
--danger: #f43f5e;
|
||||
--light: #f8fafc;
|
||||
--dark: #334155;
|
||||
--primary-rgb: 13, 148, 136;
|
||||
--secondary-rgb: 100, 116, 139;
|
||||
--success-rgb: 16, 185, 129;
|
||||
--info-rgb: 14, 165, 233;
|
||||
--warning-rgb: 245, 158, 11;
|
||||
--danger-rgb: 244, 63, 94;
|
||||
--light-rgb: 248, 250, 252;
|
||||
--dark-rgb: 51, 65, 85;
|
||||
--primary-text-emphasis: #0f766e;
|
||||
--secondary-text-emphasis: #334155;
|
||||
--success-text-emphasis: #047857;
|
||||
--info-text-emphasis: #0369a1;
|
||||
--warning-text-emphasis: #c2410c;
|
||||
--danger-text-emphasis: #be123c;
|
||||
--light-text-emphasis: #475569;
|
||||
--dark-text-emphasis: #475569;
|
||||
--primary-bg-subtle: #ccfbf1;
|
||||
--secondary-bg-subtle: #e2e8f0;
|
||||
--success-bg-subtle: #d1fae5;
|
||||
--info-bg-subtle: #e0f2fe;
|
||||
--warning-bg-subtle: #fef3c7;
|
||||
--danger-bg-subtle: #ffe4e6;
|
||||
--light-bg-subtle: #fcfcfd;
|
||||
--dark-bg-subtle: #ced4da;
|
||||
--primary-border-subtle: #99b;
|
||||
--secondary-border-subtle: #c5c8cb;
|
||||
--success-border-subtle: #b4ceb4;
|
||||
--info-border-subtle: #acc1d1;
|
||||
--warning-border-subtle: #dec099;
|
||||
--danger-border-subtle: #dba5a2;
|
||||
--light-border-subtle: #eaedf0;
|
||||
--dark-border-subtle: #adb5bd;
|
||||
--dark-bg-subtle: #cbd5e1;
|
||||
--primary-border-subtle: #99f6e4;
|
||||
--secondary-border-subtle: #cbd5e1;
|
||||
--success-border-subtle: #a7f3d0;
|
||||
--info-border-subtle: #bae6fd;
|
||||
--warning-border-subtle: #fde68a;
|
||||
--danger-border-subtle: #fecdd3;
|
||||
--light-border-subtle: #f1f5f9;
|
||||
--dark-border-subtle: #94a3b8;
|
||||
|
||||
/* ===== STANDARD COLORS ===== */
|
||||
--blue: #010156;
|
||||
--indigo: #6812f3;
|
||||
--purple: #6f42c2;
|
||||
--pink: #e93f8e;
|
||||
--red: #a51f18;
|
||||
--orange: #fd7e17;
|
||||
--yellow: #ad6200;
|
||||
--green: #448344;
|
||||
--teal: #5abfdd;
|
||||
--cyan: #30638d;
|
||||
--blue: #3b82f6;
|
||||
--indigo: #6366f1;
|
||||
--purple: #a855f7;
|
||||
--pink: #ec4899;
|
||||
--red: #ef4444;
|
||||
--orange: #f97316;
|
||||
--yellow: #f59e0b;
|
||||
--green: #10b981;
|
||||
--teal: #14b8a6;
|
||||
--cyan: #06b6d4;
|
||||
--black: #000;
|
||||
--white: #fff;
|
||||
|
||||
/* ===== GRAY SCALE ===== */
|
||||
--gray-100: #f9fafb;
|
||||
--gray-200: #eaedf0;
|
||||
--gray-300: #dfe3e7;
|
||||
--gray-400: #ced4da;
|
||||
--gray-500: #adb5bd;
|
||||
--gray-600: #6d757e;
|
||||
--gray-700: #484f56;
|
||||
--gray-800: #353b41;
|
||||
--gray-900: #22262a;
|
||||
--gray-100: #f8fafc;
|
||||
--gray-200: #f1f5f9;
|
||||
--gray-300: #e2e8f0;
|
||||
--gray-400: #cbd5e1;
|
||||
--gray-500: #94a3b8;
|
||||
--gray-600: #64748b;
|
||||
--gray-700: #475569;
|
||||
--gray-800: #334155;
|
||||
--gray-900: #1e293b;
|
||||
--white-rgb: 255, 255, 255;
|
||||
--black-rgb: 0, 0, 0;
|
||||
|
||||
@@ -201,73 +201,73 @@ color-scheme: light;
|
||||
|
||||
/* ===== CONTAINER BACKGROUNDS ===== */
|
||||
/* Below Topbar Container */
|
||||
--container-below-topbar-bg-image: ;
|
||||
--container-below-topbar-bg-color ;
|
||||
--container-below-topbar-bg-image: none;
|
||||
--container-below-topbar-bg-color: transparent;
|
||||
--container-below-topbar-bg-position: auto;
|
||||
--container-below-topbar-bg-attachment: fixed;
|
||||
--container-below-topbar-bg-repeat: repeat;
|
||||
--container-below-topbar-bg-size: auto;
|
||||
--container-below-topbar-border: ;
|
||||
--container-below-topbar-border-radius: ;
|
||||
--container-below-topbar-border: none;
|
||||
--container-below-topbar-border-radius: 0;
|
||||
|
||||
/* Top A Container */
|
||||
--container-top-a-bg-image: ;
|
||||
--container-top-a-bg-color: ;
|
||||
--container-top-a-bg-image: none;
|
||||
--container-top-a-bg-color: transparent;
|
||||
--container-top-a-bg-position: auto;
|
||||
--container-top-a-bg-attachment: fixed;
|
||||
--container-top-a-bg-repeat: repeat;
|
||||
--container-top-a-bg-size: auto;
|
||||
--container-top-a-border: ;
|
||||
--container-top-a-border-radius: ;
|
||||
--container-top-a-border: none;
|
||||
--container-top-a-border-radius: 0;
|
||||
|
||||
/* Top B Container */
|
||||
--container-top-b-bg-image: ;
|
||||
--container-top-b-bg-color: ;
|
||||
--container-top-b-bg-image: none;
|
||||
--container-top-b-bg-color: transparent;
|
||||
--container-top-b-bg-position: auto;
|
||||
--container-top-b-bg-attachment: fixed;
|
||||
--container-top-b-bg-repeat: repeat;
|
||||
--container-top-b-bg-size: auto;
|
||||
--container-top-b-border: ;
|
||||
--container-top-b-border-radius: ;
|
||||
--container-top-b-border: none;
|
||||
--container-top-b-border-radius: 0;
|
||||
|
||||
/* TOC Container */
|
||||
--container-toc-bg: var(--mainmenu-nav-link-color);
|
||||
--container-toc-color: var(--color-primary);
|
||||
|
||||
/* Sidebar Container */
|
||||
--container-sidebar-bg-image: ;
|
||||
--container-sidebar-bg-color: ;
|
||||
--container-sidebar-bg-image: none;
|
||||
--container-sidebar-bg-color: transparent;
|
||||
--container-sidebar-bg-position: auto;
|
||||
--container-sidebar-bg-attachment: scroll;
|
||||
--container-sidebar-bg-repeat: repeat;
|
||||
--container-sidebar-bg-size: auto;
|
||||
--container-sidebar-border: ;
|
||||
--container-sidebar-border-radius: ;
|
||||
--container-sidebar-border: none;
|
||||
--container-sidebar-border-radius: 0;
|
||||
|
||||
/* Bottom A Container */
|
||||
--container-bottom-a-bg-image: ;
|
||||
--container-bottom-a-bg-color: ;
|
||||
--container-bottom-a-bg-image: none;
|
||||
--container-bottom-a-bg-color: transparent;
|
||||
--container-bottom-a-bg-position: auto;
|
||||
--container-bottom-a-bg-attachment: fixed;
|
||||
--container-bottom-a-bg-repeat: repeat;
|
||||
--container-bottom-a-bg-size: auto;
|
||||
--container-bottom-a-border: ;
|
||||
--container-bottom-a-border-radius: ;
|
||||
--container-bottom-a-border: none;
|
||||
--container-bottom-a-border-radius: 0;
|
||||
|
||||
/* Bottom B Container */
|
||||
--container-bottom-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: ;
|
||||
--container-bottom-b-bg-image: none;
|
||||
--container-bottom-b-bg-color: transparent;
|
||||
--container-bottom-b-bg-position: auto;
|
||||
--container-bottom-b-bg-attachment: fixed;
|
||||
--container-bottom-b-bg-repeat: repeat;
|
||||
--container-bottom-b-bg-size: auto;
|
||||
--container-bottom-b-border: ;
|
||||
--container-bottom-b-border-radius: ;
|
||||
--container-bottom-b-border: none;
|
||||
--container-bottom-b-border-radius: 0;
|
||||
|
||||
/* ===== BORDERS ===== */
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border-color: #dfe3e7;
|
||||
--border-color: #e2e8f0;
|
||||
--border-color-translucent: #0000002d;
|
||||
--border-radius: .25rem;
|
||||
--border-radius-sm: .2rem;
|
||||
@@ -278,27 +278,27 @@ color-scheme: light;
|
||||
--border-radius-pill: 50rem;
|
||||
|
||||
/* ===== SHADOWS ===== */
|
||||
--box-shadow: 0 .5rem 1rem #00000026;
|
||||
--box-shadow-sm: 0 .125rem .25rem #00000013;
|
||||
--box-shadow-lg: 0 1rem 3rem #0000002d;
|
||||
--box-shadow-inset: inset 0 1px 2px #00000013;
|
||||
--box-shadow: 0 .5rem 1rem #0000001a;
|
||||
--box-shadow-sm: 0 .125rem .25rem #0000000d;
|
||||
--box-shadow-lg: 0 1rem 3rem #00000026;
|
||||
--box-shadow-inset: inset 0 1px 2px #0000000d;
|
||||
|
||||
/* ===== FOCUS & FORMS ===== */
|
||||
--focus-ring-width: .25rem;
|
||||
--focus-ring-opacity: .25;
|
||||
--focus-ring-color: #01015640;
|
||||
--input-color: hsl(210, 11%, 15%);
|
||||
--input-bg: hsl(210, 20%, 98%);
|
||||
--input-border-color: hsl(210, 14%, 83%);
|
||||
--input-focus-border-color: #8894aa;
|
||||
--input-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
|
||||
--input-placeholder-color: hsl(210, 7%, 46%);
|
||||
--input-disabled-bg: hsl(210, 16%, 93%);
|
||||
--input-disabled-border-color: hsl(210, 14%, 83%);
|
||||
--form-valid-color: #448344;
|
||||
--form-valid-border-color: #448344;
|
||||
--form-invalid-color: #a51f18;
|
||||
--form-invalid-border-color: #a51f18;
|
||||
--focus-ring-color: #0d948840;
|
||||
--input-color: #1e293b;
|
||||
--input-bg: #f8fafc;
|
||||
--input-border-color: #cbd5e1;
|
||||
--input-focus-border-color: #14b8a6;
|
||||
--input-focus-box-shadow: 0 0 0 0.25rem rgba(13, 148, 136, 0.25);
|
||||
--input-placeholder-color: #64748b;
|
||||
--input-disabled-bg: #e2e8f0;
|
||||
--input-disabled-border-color: #cbd5e1;
|
||||
--form-valid-color: #10b981;
|
||||
--form-valid-border-color: #10b981;
|
||||
--form-invalid-color: #f43f5e;
|
||||
--form-invalid-border-color: #f43f5e;
|
||||
|
||||
/* ===== BUTTONS ===== */
|
||||
--btn-border-radius: var(--border-radius);
|
||||
@@ -326,10 +326,10 @@ color-scheme: light;
|
||||
/* ===== VIRTUEMART (VM) ===== */
|
||||
/* VM Surfaces */
|
||||
--vm-surface: #ffffff;
|
||||
--vm-surface-2: #f8f9fa;
|
||||
--vm-surface-2: #f8fafc;
|
||||
--vm-text: var(--body-color);
|
||||
--vm-text-strong: #000000;
|
||||
--vm-text-muted: #6c757d;
|
||||
--vm-text-strong: #0f172a;
|
||||
--vm-text-muted: #64748b;
|
||||
--vm-border: var(--border-color);
|
||||
--vm-price-color: var(--success);
|
||||
|
||||
@@ -403,23 +403,23 @@ color-scheme: light;
|
||||
--vm-vendor-menu-hover-bg: var(--secondary-bg);
|
||||
|
||||
/* ===== GABLE ===== */
|
||||
--gab-blue: #0066cc;
|
||||
--gab-green: #28a745;
|
||||
--gab-red: #dc3545;
|
||||
--gab-orange: #fd7e14;
|
||||
--gab-gray1: #495057;
|
||||
--gab-gray2: #6c757d;
|
||||
--gab-gray3: #adb5bd;
|
||||
--gab-blue: #3b82f6;
|
||||
--gab-green: #10b981;
|
||||
--gab-red: #ef4444;
|
||||
--gab-orange: #f97316;
|
||||
--gab-gray1: #475569;
|
||||
--gab-gray2: #64748b;
|
||||
--gab-gray3: #94a3b8;
|
||||
}
|
||||
|
||||
.btn {
|
||||
--btn-padding-x: 1rem;
|
||||
--btn-padding-y: 0.6rem;
|
||||
--btn-font-family: ;
|
||||
--btn-font-family: inherit;
|
||||
--btn-font-size: 1rem;
|
||||
--btn-font-weight: 400;
|
||||
--btn-line-height: 1.5;
|
||||
--btn-color: hsl(210, 11%, 15%);
|
||||
--btn-color: #1e293b;
|
||||
--btn-bg: transparent;
|
||||
--btn-border-width: 1px;
|
||||
--btn-border-color: transparent;
|
||||
@@ -454,274 +454,274 @@ color-scheme: light;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(240, 98%, 17%);
|
||||
--btn-border-color: hsl(240, 98%, 17%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #010149;
|
||||
--btn-hover-border-color: #010145;
|
||||
--btn-focus-shadow-rgb: 39, 39, 111;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #010145;
|
||||
--btn-active-border-color: #010141;
|
||||
--btn-color: #ffffff;
|
||||
--btn-bg: #0d9488;
|
||||
--btn-border-color: #0d9488;
|
||||
--btn-hover-color: #ffffff;
|
||||
--btn-hover-bg: #0f766e;
|
||||
--btn-hover-border-color: #0f766e;
|
||||
--btn-focus-shadow-rgb: 13, 148, 136;
|
||||
--btn-active-color: #ffffff;
|
||||
--btn-active-bg: #0f766e;
|
||||
--btn-active-border-color: #115e59;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(240, 98%, 17%);
|
||||
--btn-disabled-border-color: hsl(240, 98%, 17%);
|
||||
--btn-disabled-color: #ffffff;
|
||||
--btn-disabled-bg: #0d9488;
|
||||
--btn-disabled-border-color: #0d9488;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
--btn-color: --nav-text-color;
|
||||
--btn-bg: --nav-bg-color;
|
||||
--btn-border-color: hsl(210, 7%, 46%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #5d636b;
|
||||
--btn-hover-border-color: #575e65;
|
||||
--btn-focus-shadow-rgb: gray;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #575e65;
|
||||
--btn-active-border-color: #52585f;
|
||||
--btn-color: #ffffff;
|
||||
--btn-bg: #64748b;
|
||||
--btn-border-color: #64748b;
|
||||
--btn-hover-color: #ffffff;
|
||||
--btn-hover-bg: #475569;
|
||||
--btn-hover-border-color: #475569;
|
||||
--btn-focus-shadow-rgb: 100, 116, 139;
|
||||
--btn-active-color: #ffffff;
|
||||
--btn-active-bg: #475569;
|
||||
--btn-active-border-color: #334155;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(210, 7%, 46%);
|
||||
--btn-disabled-border-color: hsl(210, 7%, 46%);
|
||||
--btn-disabled-color: #ffffff;
|
||||
--btn-disabled-bg: #64748b;
|
||||
--btn-disabled-border-color: #64748b;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(120, 32%, 39%);
|
||||
--btn-border-color: hsl(120, 32%, 39%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #3a6f3a;
|
||||
--btn-hover-border-color: #366936;
|
||||
--btn-focus-shadow-rgb: 96, 150, 96;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #366936;
|
||||
--btn-active-border-color: #336233;
|
||||
--btn-color: #ffffff;
|
||||
--btn-bg: #10b981;
|
||||
--btn-border-color: #10b981;
|
||||
--btn-hover-color: #ffffff;
|
||||
--btn-hover-bg: #059669;
|
||||
--btn-hover-border-color: #059669;
|
||||
--btn-focus-shadow-rgb: 16, 185, 129;
|
||||
--btn-active-color: #ffffff;
|
||||
--btn-active-bg: #059669;
|
||||
--btn-active-border-color: #047857;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(120, 32%, 39%);
|
||||
--btn-disabled-border-color: hsl(120, 32%, 39%);
|
||||
--btn-disabled-color: #ffffff;
|
||||
--btn-disabled-bg: #10b981;
|
||||
--btn-disabled-border-color: #10b981;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(207, 49%, 37%);
|
||||
--btn-border-color: hsl(207, 49%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #295478;
|
||||
--btn-hover-border-color: #264f71;
|
||||
--btn-focus-shadow-rgb: 79, 122, 158;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #264f71;
|
||||
--btn-active-border-color: #244a6a;
|
||||
--btn-color: #ffffff;
|
||||
--btn-bg: #0ea5e9;
|
||||
--btn-border-color: #0ea5e9;
|
||||
--btn-hover-color: #ffffff;
|
||||
--btn-hover-bg: #0284c7;
|
||||
--btn-hover-border-color: #0284c7;
|
||||
--btn-focus-shadow-rgb: 14, 165, 233;
|
||||
--btn-active-color: #ffffff;
|
||||
--btn-active-bg: #0284c7;
|
||||
--btn-active-border-color: #0369a1;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(207, 49%, 37%);
|
||||
--btn-disabled-border-color: hsl(207, 49%, 37%);
|
||||
--btn-disabled-color: #ffffff;
|
||||
--btn-disabled-bg: #0ea5e9;
|
||||
--btn-disabled-border-color: #0ea5e9;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(34, 100%, 34%);
|
||||
--btn-border-color: hsl(34, 100%, 34%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #935300;
|
||||
--btn-hover-border-color: #8a4e00;
|
||||
--btn-focus-shadow-rgb: 185, 122, 38;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #8a4e00;
|
||||
--btn-active-border-color: #824a00;
|
||||
--btn-color: #ffffff;
|
||||
--btn-bg: #f59e0b;
|
||||
--btn-border-color: #f59e0b;
|
||||
--btn-hover-color: #ffffff;
|
||||
--btn-hover-bg: #d97706;
|
||||
--btn-hover-border-color: #d97706;
|
||||
--btn-focus-shadow-rgb: 245, 158, 11;
|
||||
--btn-active-color: #ffffff;
|
||||
--btn-active-bg: #d97706;
|
||||
--btn-active-border-color: #b45309;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(34, 100%, 34%);
|
||||
--btn-disabled-border-color: hsl(34, 100%, 34%);
|
||||
--btn-disabled-color: #ffffff;
|
||||
--btn-disabled-bg: #f59e0b;
|
||||
--btn-disabled-border-color: #f59e0b;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(3, 75%, 37%);
|
||||
--btn-border-color: hsl(3, 75%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #8c1a14;
|
||||
--btn-hover-border-color: #841913;
|
||||
--btn-focus-shadow-rgb: 179, 65, 59;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #841913;
|
||||
--btn-active-border-color: #7c1712;
|
||||
--btn-color: #ffffff;
|
||||
--btn-bg: #f43f5e;
|
||||
--btn-border-color: #f43f5e;
|
||||
--btn-hover-color: #ffffff;
|
||||
--btn-hover-bg: #e11d48;
|
||||
--btn-hover-border-color: #e11d48;
|
||||
--btn-focus-shadow-rgb: 244, 63, 94;
|
||||
--btn-active-color: #ffffff;
|
||||
--btn-active-bg: #e11d48;
|
||||
--btn-active-border-color: #be123c;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(3, 75%, 37%);
|
||||
--btn-disabled-border-color: hsl(3, 75%, 37%);
|
||||
--btn-disabled-color: #ffffff;
|
||||
--btn-disabled-bg: #f43f5e;
|
||||
--btn-disabled-border-color: #f43f5e;
|
||||
}
|
||||
|
||||
.btn-light {
|
||||
--btn-color: hsl(0, 0%, 0%);
|
||||
--btn-bg: hsl(210, 17%, 98%);
|
||||
--btn-border-color: hsl(210, 17%, 98%);
|
||||
--btn-hover-color: hsl(0, 0%, 0%);
|
||||
--btn-hover-bg: #d4d5d5;
|
||||
--btn-hover-border-color: #c7c8c9;
|
||||
--btn-focus-shadow-rgb: 212, 213, 213;
|
||||
--btn-active-color: hsl(0, 0%, 0%);
|
||||
--btn-active-bg: #c7c8c9;
|
||||
--btn-active-border-color: #bbbcbc;
|
||||
--btn-color: #1e293b;
|
||||
--btn-bg: #f8fafc;
|
||||
--btn-border-color: #f8fafc;
|
||||
--btn-hover-color: #1e293b;
|
||||
--btn-hover-bg: #e2e8f0;
|
||||
--btn-hover-border-color: #e2e8f0;
|
||||
--btn-focus-shadow-rgb: 248, 250, 252;
|
||||
--btn-active-color: #1e293b;
|
||||
--btn-active-bg: #e2e8f0;
|
||||
--btn-active-border-color: #cbd5e1;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 0%);
|
||||
--btn-disabled-bg: hsl(210, 17%, 98%);
|
||||
--btn-disabled-border-color: hsl(210, 17%, 98%);
|
||||
--btn-disabled-color: #1e293b;
|
||||
--btn-disabled-bg: #f8fafc;
|
||||
--btn-disabled-border-color: #f8fafc;
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(210, 10%, 23%);
|
||||
--btn-border-color: hsl(210, 10%, 23%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #53585e;
|
||||
--btn-hover-border-color: #494f54;
|
||||
--btn-focus-shadow-rgb: 83, 88, 94;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #5d6267;
|
||||
--btn-active-border-color: #494f54;
|
||||
--btn-color: #ffffff;
|
||||
--btn-bg: #334155;
|
||||
--btn-border-color: #334155;
|
||||
--btn-hover-color: #ffffff;
|
||||
--btn-hover-bg: #1e293b;
|
||||
--btn-hover-border-color: #1e293b;
|
||||
--btn-focus-shadow-rgb: 51, 65, 85;
|
||||
--btn-active-color: #ffffff;
|
||||
--btn-active-bg: #1e293b;
|
||||
--btn-active-border-color: #0f172a;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(210, 10%, 23%);
|
||||
--btn-disabled-border-color: hsl(210, 10%, 23%);
|
||||
--btn-disabled-color: #ffffff;
|
||||
--btn-disabled-bg: #334155;
|
||||
--btn-disabled-border-color: #334155;
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
--btn-color: hsl(240, 98%, 17%);
|
||||
--btn-border-color: hsl(240, 98%, 17%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(240, 98%, 17%);
|
||||
--btn-hover-border-color: hsl(240, 98%, 17%);
|
||||
--btn-focus-shadow-rgb: 1, 1, 86;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(240, 98%, 17%);
|
||||
--btn-active-border-color: hsl(240, 98%, 17%);
|
||||
--btn-color: #0d9488;
|
||||
--btn-border-color: #0d9488;
|
||||
--btn-hover-color: #ffffff;
|
||||
--btn-hover-bg: #0d9488;
|
||||
--btn-hover-border-color: #0d9488;
|
||||
--btn-focus-shadow-rgb: 13, 148, 136;
|
||||
--btn-active-color: #ffffff;
|
||||
--btn-active-bg: #0d9488;
|
||||
--btn-active-border-color: #0d9488;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(240, 98%, 17%);
|
||||
--btn-disabled-color: #0d9488;
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(240, 98%, 17%);
|
||||
--btn-disabled-border-color: #0d9488;
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
--btn-color: hsl(210, 7%, 46%);
|
||||
--btn-border-color: hsl(210, 7%, 46%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(210, 7%, 46%);
|
||||
--btn-hover-border-color: hsl(210, 7%, 46%);
|
||||
--btn-focus-shadow-rgb: 109, 117, 126;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(210, 7%, 46%);
|
||||
--btn-active-border-color: hsl(210, 7%, 46%);
|
||||
--btn-color: #64748b;
|
||||
--btn-border-color: #64748b;
|
||||
--btn-hover-color: #ffffff;
|
||||
--btn-hover-bg: #64748b;
|
||||
--btn-hover-border-color: #64748b;
|
||||
--btn-focus-shadow-rgb: 100, 116, 139;
|
||||
--btn-active-color: #ffffff;
|
||||
--btn-active-bg: #64748b;
|
||||
--btn-active-border-color: #64748b;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 7%, 46%);
|
||||
--btn-disabled-color: #64748b;
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 7%, 46%);
|
||||
--btn-disabled-border-color: #64748b;
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-success {
|
||||
--btn-color: hsl(120, 32%, 39%);
|
||||
--btn-border-color: hsl(120, 32%, 39%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(120, 32%, 39%);
|
||||
--btn-hover-border-color: hsl(120, 32%, 39%);
|
||||
--btn-focus-shadow-rgb: 68, 131, 68;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(120, 32%, 39%);
|
||||
--btn-active-border-color: hsl(120, 32%, 39%);
|
||||
--btn-color: #10b981;
|
||||
--btn-border-color: #10b981;
|
||||
--btn-hover-color: #ffffff;
|
||||
--btn-hover-bg: #10b981;
|
||||
--btn-hover-border-color: #10b981;
|
||||
--btn-focus-shadow-rgb: 16, 185, 129;
|
||||
--btn-active-color: #ffffff;
|
||||
--btn-active-bg: #10b981;
|
||||
--btn-active-border-color: #10b981;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(120, 32%, 39%);
|
||||
--btn-disabled-color: #10b981;
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(120, 32%, 39%);
|
||||
--btn-disabled-border-color: #10b981;
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-info {
|
||||
--btn-color: hsl(207, 49%, 37%);
|
||||
--btn-border-color: hsl(207, 49%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(207, 49%, 37%);
|
||||
--btn-hover-border-color: hsl(207, 49%, 37%);
|
||||
--btn-focus-shadow-rgb: 48, 99, 141;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(207, 49%, 37%);
|
||||
--btn-active-border-color: hsl(207, 49%, 37%);
|
||||
--btn-color: #0ea5e9;
|
||||
--btn-border-color: #0ea5e9;
|
||||
--btn-hover-color: #ffffff;
|
||||
--btn-hover-bg: #0ea5e9;
|
||||
--btn-hover-border-color: #0ea5e9;
|
||||
--btn-focus-shadow-rgb: 14, 165, 233;
|
||||
--btn-active-color: #ffffff;
|
||||
--btn-active-bg: #0ea5e9;
|
||||
--btn-active-border-color: #0ea5e9;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(207, 49%, 37%);
|
||||
--btn-disabled-color: #0ea5e9;
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(207, 49%, 37%);
|
||||
--btn-disabled-border-color: #0ea5e9;
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-warning {
|
||||
--btn-color: hsl(34, 100%, 34%);
|
||||
--btn-border-color: hsl(34, 100%, 34%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(34, 100%, 34%);
|
||||
--btn-hover-border-color: hsl(34, 100%, 34%);
|
||||
--btn-focus-shadow-rgb: 173, 98, 0;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(34, 100%, 34%);
|
||||
--btn-active-border-color: hsl(34, 100%, 34%);
|
||||
--btn-color: #f59e0b;
|
||||
--btn-border-color: #f59e0b;
|
||||
--btn-hover-color: #ffffff;
|
||||
--btn-hover-bg: #f59e0b;
|
||||
--btn-hover-border-color: #f59e0b;
|
||||
--btn-focus-shadow-rgb: 245, 158, 11;
|
||||
--btn-active-color: #ffffff;
|
||||
--btn-active-bg: #f59e0b;
|
||||
--btn-active-border-color: #f59e0b;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(34, 100%, 34%);
|
||||
--btn-disabled-color: #f59e0b;
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(34, 100%, 34%);
|
||||
--btn-disabled-border-color: #f59e0b;
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-danger {
|
||||
--btn-color: hsl(3, 75%, 37%);
|
||||
--btn-border-color: hsl(3, 75%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(3, 75%, 37%);
|
||||
--btn-hover-border-color: hsl(3, 75%, 37%);
|
||||
--btn-focus-shadow-rgb: 165, 31, 24;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(3, 75%, 37%);
|
||||
--btn-active-border-color: hsl(3, 75%, 37%);
|
||||
--btn-color: #f43f5e;
|
||||
--btn-border-color: #f43f5e;
|
||||
--btn-hover-color: #ffffff;
|
||||
--btn-hover-bg: #f43f5e;
|
||||
--btn-hover-border-color: #f43f5e;
|
||||
--btn-focus-shadow-rgb: 244, 63, 94;
|
||||
--btn-active-color: #ffffff;
|
||||
--btn-active-bg: #f43f5e;
|
||||
--btn-active-border-color: #f43f5e;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(3, 75%, 37%);
|
||||
--btn-disabled-color: #f43f5e;
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(3, 75%, 37%);
|
||||
--btn-disabled-border-color: #f43f5e;
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
--btn-color: hsl(210, 17%, 98%);
|
||||
--btn-border-color: hsl(210, 17%, 98%);
|
||||
--btn-hover-color: hsl(0, 0%, 0%);
|
||||
--btn-hover-bg: hsl(210, 17%, 98%);
|
||||
--btn-hover-border-color: hsl(210, 17%, 98%);
|
||||
--btn-focus-shadow-rgb: 249, 250, 251;
|
||||
--btn-active-color: hsl(0, 0%, 0%);
|
||||
--btn-active-bg: hsl(210, 17%, 98%);
|
||||
--btn-active-border-color: hsl(210, 17%, 98%);
|
||||
--btn-color: #f8fafc;
|
||||
--btn-border-color: #f8fafc;
|
||||
--btn-hover-color: #1e293b;
|
||||
--btn-hover-bg: #f8fafc;
|
||||
--btn-hover-border-color: #f8fafc;
|
||||
--btn-focus-shadow-rgb: 248, 250, 252;
|
||||
--btn-active-color: #1e293b;
|
||||
--btn-active-bg: #f8fafc;
|
||||
--btn-active-border-color: #f8fafc;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 17%, 98%);
|
||||
--btn-disabled-color: #f8fafc;
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 17%, 98%);
|
||||
--btn-disabled-border-color: #f8fafc;
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
--btn-color: hsl(210, 10%, 23%);
|
||||
--btn-border-color: hsl(210, 10%, 23%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(210, 10%, 23%);
|
||||
--btn-hover-border-color: hsl(210, 10%, 23%);
|
||||
--btn-focus-shadow-rgb: 53, 59, 65;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(210, 10%, 23%);
|
||||
--btn-active-border-color: hsl(210, 10%, 23%);
|
||||
--btn-color: #334155;
|
||||
--btn-border-color: #334155;
|
||||
--btn-hover-color: #ffffff;
|
||||
--btn-hover-bg: #334155;
|
||||
--btn-hover-border-color: #334155;
|
||||
--btn-focus-shadow-rgb: 51, 65, 85;
|
||||
--btn-active-color: #ffffff;
|
||||
--btn-active-bg: #334155;
|
||||
--btn-active-border-color: #334155;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 10%, 23%);
|
||||
--btn-disabled-color: #334155;
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 10%, 23%);
|
||||
--btn-disabled-border-color: #334155;
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
@@ -734,9 +734,9 @@ color-scheme: light;
|
||||
--btn-hover-border-color: transparent;
|
||||
--btn-active-color: var(--link-hover-color);
|
||||
--btn-active-border-color: transparent;
|
||||
--btn-disabled-color: hsl(210, 7%, 46%);
|
||||
--btn-disabled-color: #64748b;
|
||||
--btn-disabled-border-color: transparent;
|
||||
--btn-box-shadow: none;
|
||||
--btn-focus-shadow-rgb: 39, 39, 111;
|
||||
--btn-focus-shadow-rgb: 13, 148, 136;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@@ -201,68 +201,68 @@ color-scheme: light;
|
||||
|
||||
/* ===== CONTAINER BACKGROUNDS ===== */
|
||||
/* Below Topbar Container */
|
||||
--container-below-topbar-bg-image: ;
|
||||
--container-below-topbar-bg-color ;
|
||||
--container-below-topbar-bg-image: none;
|
||||
--container-below-topbar-bg-color: transparent;
|
||||
--container-below-topbar-bg-position: auto;
|
||||
--container-below-topbar-bg-attachment: fixed;
|
||||
--container-below-topbar-bg-repeat: repeat;
|
||||
--container-below-topbar-bg-size: auto;
|
||||
--container-below-topbar-border: ;
|
||||
--container-below-topbar-border-radius: ;
|
||||
--container-below-topbar-border: none;
|
||||
--container-below-topbar-border-radius: 0;
|
||||
|
||||
/* Top A Container */
|
||||
--container-top-a-bg-image: ;
|
||||
--container-top-a-bg-color: ;
|
||||
--container-top-a-bg-image: none;
|
||||
--container-top-a-bg-color: transparent;
|
||||
--container-top-a-bg-position: auto;
|
||||
--container-top-a-bg-attachment: fixed;
|
||||
--container-top-a-bg-repeat: repeat;
|
||||
--container-top-a-bg-size: auto;
|
||||
--container-top-a-border: ;
|
||||
--container-top-a-border-radius: ;
|
||||
--container-top-a-border: none;
|
||||
--container-top-a-border-radius: 0;
|
||||
|
||||
/* Top B Container */
|
||||
--container-top-b-bg-image: ;
|
||||
--container-top-b-bg-color: ;
|
||||
--container-top-b-bg-image: none;
|
||||
--container-top-b-bg-color: transparent;
|
||||
--container-top-b-bg-position: auto;
|
||||
--container-top-b-bg-attachment: fixed;
|
||||
--container-top-b-bg-repeat: repeat;
|
||||
--container-top-b-bg-size: auto;
|
||||
--container-top-b-border: ;
|
||||
--container-top-b-border-radius: ;
|
||||
--container-top-b-border: none;
|
||||
--container-top-b-border-radius: 0;
|
||||
|
||||
/* TOC Container */
|
||||
--container-toc-bg: var(--mainmenu-nav-link-color);
|
||||
--container-toc-color: var(--color-primary);
|
||||
|
||||
/* Sidebar Container */
|
||||
--container-sidebar-bg-image: ;
|
||||
--container-sidebar-bg-color: ;
|
||||
--container-sidebar-bg-image: none;
|
||||
--container-sidebar-bg-color: transparent;
|
||||
--container-sidebar-bg-position: auto;
|
||||
--container-sidebar-bg-attachment: scroll;
|
||||
--container-sidebar-bg-repeat: repeat;
|
||||
--container-sidebar-bg-size: auto;
|
||||
--container-sidebar-border: ;
|
||||
--container-sidebar-border-radius: ;
|
||||
--container-sidebar-border: none;
|
||||
--container-sidebar-border-radius: 0;
|
||||
|
||||
/* Bottom A Container */
|
||||
--container-bottom-a-bg-image: ;
|
||||
--container-bottom-a-bg-color: ;
|
||||
--container-bottom-a-bg-image: none;
|
||||
--container-bottom-a-bg-color: transparent;
|
||||
--container-bottom-a-bg-position: auto;
|
||||
--container-bottom-a-bg-attachment: fixed;
|
||||
--container-bottom-a-bg-repeat: repeat;
|
||||
--container-bottom-a-bg-size: auto;
|
||||
--container-bottom-a-border: ;
|
||||
--container-bottom-a-border-radius: ;
|
||||
--container-bottom-a-border: none;
|
||||
--container-bottom-a-border-radius: 0;
|
||||
|
||||
/* Bottom B Container */
|
||||
--container-bottom-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: ;
|
||||
--container-bottom-b-bg-image: none;
|
||||
--container-bottom-b-bg-color: transparent;
|
||||
--container-bottom-b-bg-position: auto;
|
||||
--container-bottom-b-bg-attachment: fixed;
|
||||
--container-bottom-b-bg-repeat: repeat;
|
||||
--container-bottom-b-bg-size: auto;
|
||||
--container-bottom-b-border: ;
|
||||
--container-bottom-b-border-radius: ;
|
||||
--container-bottom-b-border: none;
|
||||
--container-bottom-b-border-radius: 0;
|
||||
|
||||
/* ===== BORDERS ===== */
|
||||
--border-width: 1px;
|
||||
@@ -415,7 +415,7 @@ color-scheme: light;
|
||||
.btn {
|
||||
--btn-padding-x: 1rem;
|
||||
--btn-padding-y: 0.6rem;
|
||||
--btn-font-family: ;
|
||||
--btn-font-family: inherit;
|
||||
--btn-font-size: 1rem;
|
||||
--btn-font-weight: 400;
|
||||
--btn-line-height: 1.5;
|
||||
|
||||
@@ -18357,3 +18357,201 @@ nav[data-toggle=toc] .nav-link.active+ul{
|
||||
.icon-check::before { content: "\f00c"; }
|
||||
.icon-plus::before { content: "\f067"; }
|
||||
.icon-minus::before { content: "\f068"; }
|
||||
|
||||
/* ===== BOOTSTRAP & JOOMLA BUTTONS ===== */
|
||||
.btn-primary {
|
||||
--btn-color: white;
|
||||
--btn-bg: var(--color-primary);
|
||||
--btn-border-color: var(--color-primary);
|
||||
--btn-hover-bg: color-mix(in srgb, var(--color-primary) 85%, black);
|
||||
--btn-hover-border-color: color-mix(in srgb, var(--color-primary) 85%, black);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
--btn-color: var(--body-bg);
|
||||
--btn-bg: var(--secondary);
|
||||
--btn-border-color: var(--secondary);
|
||||
--btn-hover-bg: color-mix(in srgb, var(--secondary) 85%, black);
|
||||
--btn-hover-border-color: color-mix(in srgb, var(--secondary) 85%, black);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
--btn-color: white;
|
||||
--btn-bg: var(--success);
|
||||
--btn-border-color: var(--success);
|
||||
--btn-hover-bg: color-mix(in srgb, var(--success) 85%, black);
|
||||
--btn-hover-border-color: color-mix(in srgb, var(--success) 85%, black);
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
--btn-color: white;
|
||||
--btn-bg: var(--info);
|
||||
--btn-border-color: var(--info);
|
||||
--btn-hover-bg: color-mix(in srgb, var(--info) 85%, black);
|
||||
--btn-hover-border-color: color-mix(in srgb, var(--info) 85%, black);
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
--btn-color: white;
|
||||
--btn-bg: var(--warning);
|
||||
--btn-border-color: var(--warning);
|
||||
--btn-hover-bg: color-mix(in srgb, var(--warning) 85%, black);
|
||||
--btn-hover-border-color: color-mix(in srgb, var(--warning) 85%, black);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
--btn-color: white;
|
||||
--btn-bg: var(--danger);
|
||||
--btn-border-color: var(--danger);
|
||||
--btn-hover-bg: color-mix(in srgb, var(--danger) 85%, black);
|
||||
--btn-hover-border-color: color-mix(in srgb, var(--danger) 85%, black);
|
||||
}
|
||||
|
||||
.btn-light {
|
||||
--btn-color: var(--body-color);
|
||||
--btn-bg: var(--light);
|
||||
--btn-border-color: var(--light);
|
||||
--btn-hover-bg: color-mix(in srgb, var(--light) 90%, black);
|
||||
--btn-hover-border-color: color-mix(in srgb, var(--light) 90%, black);
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
--btn-color: white;
|
||||
--btn-bg: var(--dark);
|
||||
--btn-border-color: var(--dark);
|
||||
--btn-hover-bg: color-mix(in srgb, var(--dark) 85%, black);
|
||||
--btn-hover-border-color: color-mix(in srgb, var(--dark) 85%, black);
|
||||
}
|
||||
|
||||
/* Outline button variants */
|
||||
.btn-outline-primary {
|
||||
--btn-color: var(--color-primary);
|
||||
--btn-border-color: var(--color-primary);
|
||||
--btn-hover-color: white;
|
||||
--btn-hover-bg: var(--color-primary);
|
||||
--btn-hover-border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
--btn-color: var(--secondary);
|
||||
--btn-border-color: var(--secondary);
|
||||
--btn-hover-color: white;
|
||||
--btn-hover-bg: var(--secondary);
|
||||
--btn-hover-border-color: var(--secondary);
|
||||
|
|
||||
}
|
||||
|
||||
.btn-outline-success {
|
||||
--btn-color: var(--success);
|
||||
--btn-border-color: var(--success);
|
||||
--btn-hover-color: white;
|
||||
--btn-hover-bg: var(--success);
|
||||
--btn-hover-border-color: var(--success);
|
||||
}
|
||||
|
||||
.btn-outline-info {
|
||||
--btn-color: var(--info);
|
||||
--btn-border-color: var(--info);
|
||||
--btn-hover-color: white;
|
||||
--btn-hover-bg: var(--info);
|
||||
--btn-hover-border-color: var(--info);
|
||||
}
|
||||
|
||||
.btn-outline-warning {
|
||||
--btn-color: var(--warning);
|
||||
--btn-border-color: var(--warning);
|
||||
--btn-hover-color: white;
|
||||
--btn-hover-bg: var(--warning);
|
||||
--btn-hover-border-color: var(--warning);
|
||||
}
|
||||
|
||||
.btn-outline-danger {
|
||||
--btn-color: var(--danger);
|
||||
--btn-border-color: var(--danger);
|
||||
--btn-hover-color: white;
|
||||
--btn-hover-bg: var(--danger);
|
||||
--btn-hover-border-color: var(--danger);
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
--btn-color: var(--light);
|
||||
--btn-border-color: var(--light);
|
||||
--btn-hover-color: var(--body-color);
|
||||
--btn-hover-bg: var(--light);
|
||||
--btn-hover-border-color: var(--light);
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
--btn-color: var(--dark);
|
||||
--btn-border-color: var(--dark);
|
||||
--btn-hover-color: white;
|
||||
--btn-hover-bg: var(--dark);
|
||||
--btn-hover-border-color: var(--dark);
|
||||
}
|
||||
|
||||
/* ===== BOOTSTRAP & JOOMLA ALERTS ===== */
|
||||
.alert-primary {
|
||||
--alert-bg: color-mix(in srgb, var(--primary) 10%, var(--body-bg));
|
||||
--alert-color: color-mix(in srgb, var(--primary) 90%, black);
|
||||
--alert-border-color: color-mix(in srgb, var(--primary) 20%, var(--body-bg));
|
||||
}
|
||||
|
||||
.alert-secondary {
|
||||
--alert-bg: color-mix(in srgb, var(--secondary) 10%, var(--body-bg));
|
||||
--alert-color: color-mix(in srgb, var(--secondary) 90%, black);
|
||||
--alert-border-color: color-mix(in srgb, var(--secondary) 20%, var(--body-bg));
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
--alert-bg: color-mix(in srgb, var(--success) 10%, var(--body-bg));
|
||||
--alert-color: color-mix(in srgb, var(--success) 90%, black);
|
||||
--alert-border-color: color-mix(in srgb, var(--success) 20%, var(--body-bg));
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
--alert-bg: color-mix(in srgb, var(--info) 10%, var(--body-bg));
|
||||
--alert-color: color-mix(in srgb, var(--info) 90%, black);
|
||||
--alert-border-color: color-mix(in srgb, var(--info) 20%, var(--body-bg));
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
`.container-search .icon-search` is forced to `color: var(--nav-bg-color)`, which can override the icon color inside the styled submit button (the button text/icon color is otherwise set via `color: var(--mainmenu-nav-link-color)`). Consider letting the icon inherit from the button (or set it to the same foreground variable) to avoid low-contrast icons.
```suggestion
color: inherit;
```
|
||||
--alert-bg: color-mix(in srgb, var(--warning) 10%, var(--body-bg));
|
||||
--alert-color: color-mix(in srgb, var(--warning) 90%, black);
|
||||
--alert-border-color: color-mix(in srgb, var(--warning) 20%, var(--body-bg));
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
--alert-bg: color-mix(in srgb, var(--danger) 10%, var(--body-bg));
|
||||
--alert-color: color-mix(in srgb, var(--danger) 90%, black);
|
||||
--alert-border-color: color-mix(in srgb, var(--danger) 20%, var(--body-bg));
|
||||
}
|
||||
|
||||
.alert-light {
|
||||
--alert-bg: var(--light);
|
||||
--alert-color: var(--body-color);
|
||||
--alert-border-color: color-mix(in srgb, var(--light) 85%, black);
|
||||
}
|
||||
|
||||
.alert-dark {
|
||||
--alert-bg: var(--dark);
|
||||
--alert-color: white;
|
||||
--alert-border-color: var(--dark);
|
||||
}
|
||||
|
||||
/* Joomla-specific alert mappings */
|
||||
.alert-message {
|
||||
--alert-bg: var(--alert-info, color-mix(in srgb, var(--info) 10%, var(--body-bg)));
|
||||
--alert-color: color-mix(in srgb, var(--info) 90%, black);
|
||||
--alert-border-color: color-mix(in srgb, var(--info) 20%, var(--body-bg));
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
--alert-bg: var(--alert-danger, color-mix(in srgb, var(--danger) 10%, var(--body-bg)));
|
||||
--alert-color: color-mix(in srgb, var(--danger) 90%, black);
|
||||
--alert-border-color: color-mix(in srgb, var(--danger) 20%, var(--body-bg));
|
||||
}
|
||||
|
||||
.alert-notice {
|
||||
--alert-bg: var(--alert-warning, color-mix(in srgb, var(--warning) 10%, var(--body-bg)));
|
||||
--alert-color: color-mix(in srgb, var(--warning) 90%, black);
|
||||
--alert-border-color: color-mix(in srgb, var(--warning) 20%, var(--body-bg));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user
.site-titleis set tocolor: var(--nav-bg-color), but the header/nav container also usesbackground-color: var(--nav-bg-color). This will make the site title text effectively invisible in the header. Use a foreground variable instead (e.g.,--nav-text-color/--mainmenu-nav-link-color).