Complete template system overhaul: CSS variables, theme management, and UI improvements #74
@@ -20,242 +20,34 @@
|
||||
* --------------------------------------------- */
|
||||
|
||||
:root[data-bs-theme='dark']{
|
||||
/* System hint for native widgets */
|
||||
color-scheme: dark;
|
||||
|
||||
/* Brand & links */
|
||||
/* ===== BRAND & THEME COLORS ===== */
|
||||
--color-primary: #112855;
|
||||
--accent-color-primary: #3f8ff0;
|
||||
--accent-color-secondary: #6fb3ff;
|
||||
|
||||
/* ===== NAVIGATION ===== */
|
||||
--mainmenu-nav-link-color: #fff;
|
||||
|
||||
--color-link: #224FAA;
|
||||
--color-hover: #224FAA;
|
||||
|
||||
/* Header background (kept same image; works over dark bg) */
|
||||
--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); --header-background-attachment: fixed;
|
||||
--header-background-repeat: repeat;
|
||||
--header-background-size: auto;
|
||||
|
||||
/* Section containers */
|
||||
--container-below-topbar-bg-image: ;
|
||||
--container-below-topbar-bg-color: ;
|
||||
--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-top-a-bg-image: ;
|
||||
--container-top-a-bg-color: ;
|
||||
--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-b-bg-image: ;
|
||||
--container-top-b-bg-color: ;
|
||||
--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-toc-bg: ;
|
||||
--container-toc-color: #dbe3ff;
|
||||
|
||||
--container-sidebar-bg-image: ;
|
||||
--container-sidebar-bg-color: ;
|
||||
--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-bottom-a-bg-image: ;
|
||||
--container-bottom-a-bg-color: ;
|
||||
--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-radius: 5px;
|
||||
|
||||
--container-bottom-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* Nav & accents */
|
||||
--nav-text-color: var(--mainmenu-nav-link-color);
|
||||
--nav-bg-color: var(--color-link);
|
||||
--border: 5px;
|
||||
|
||||
--muted-color: #6d757e;
|
||||
--hr-color: var(--border-color, #dfe3e7);
|
||||
--link-active-color: var(--link-color);
|
||||
--code-color-ink: var(--code-color, #e93f8e);
|
||||
--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);
|
||||
|
||||
/* Palette */
|
||||
--blue: #91a4ff;
|
||||
--black: #000;
|
||||
--indigo: #b19cff;
|
||||
--purple: #c0a5ff;
|
||||
--pink: #ff8fc0;
|
||||
--red: #ff7a73;
|
||||
--orange: #ff9c4d;
|
||||
--yellow: #ffd166;
|
||||
--green: #78d694;
|
||||
--teal: #76e3ff;
|
||||
--cyan: #6fb7ff;
|
||||
--white: #fff;
|
||||
|
||||
/* Grays tuned for dark */
|
||||
--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;
|
||||
|
||||
/* Contextuals (keep brand hues) */
|
||||
--primary: #010156;
|
||||
--secondary: #48525d;
|
||||
--success: #4aa664;
|
||||
--info: #4f7aa0;
|
||||
--warning: #c77a00;
|
||||
--danger: #c23a31;
|
||||
--light: #1b2027;
|
||||
--dark: #0f1318;
|
||||
|
||||
/* RGB helpers */
|
||||
--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;
|
||||
|
||||
/* Emphasis & subtle variants */
|
||||
--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;
|
||||
|
||||
/* Typography & layout */
|
||||
--body-font-family: -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';
|
||||
--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;
|
||||
|
||||
--emphasis-color: #fff;
|
||||
--emphasis-color-rgb: 255, 255, 255;
|
||||
|
||||
--secondary-color: #e6ebf1bf;
|
||||
--secondary-color-rgb: 230, 235, 241;
|
||||
|
||||
--secondary-bg: #151b22;
|
||||
--secondary-bg-rgb: 21, 27, 34;
|
||||
|
||||
--tertiary-color: #e6ebf180;
|
||||
--tertiary-color-rgb: 230, 235, 241;
|
||||
--tertiary-bg: #10151b;
|
||||
--tertiary-bg-rgb: 16, 21, 27;
|
||||
|
||||
--heading-color: #f1f5f9;
|
||||
|
||||
/* ===== LINKS ===== */
|
||||
--color-link: #224FAA;
|
||||
--color-hover: #224FAA;
|
||||
--link-color: #8ab4f8;
|
||||
--link-color-rgb: 138, 180, 248;
|
||||
--link-decoration: underline;
|
||||
--link-hover-color: #c3d6ff;
|
||||
--link-hover-color-rgb: 195, 214, 255;
|
||||
--link-active-color: var(--link-color);
|
||||
|
||||
--code-color: #ff7abd;
|
||||
--highlight-color: #111;
|
||||
--highlight-bg: #ffe28a1a;
|
||||
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border-color: #2b323b;
|
||||
--border-color-translucent: #ffffff26;
|
||||
|
||||
--border-radius: .25rem;
|
||||
--border-radius-sm: .2rem;
|
||||
--border-radius-lg: .3rem;
|
||||
--border-radius-xl: .3rem;
|
||||
--border-radius-xxl: 2rem;
|
||||
--border-radius-2xl: var(--border-radius-xxl);
|
||||
--border-radius-pill: 50rem;
|
||||
|
||||
--box-shadow: 0 .5rem 1rem #00000066;
|
||||
--box-shadow-sm: 0 .125rem .25rem #00000040;
|
||||
--box-shadow-lg: 0 1rem 3rem #00000080;
|
||||
--box-shadow-inset: inset 0 1px 2px #00000040;
|
||||
|
||||
--focus-ring-width: .25rem;
|
||||
--focus-ring-opacity: .6;
|
||||
--focus-ring-color: #5472ff66;
|
||||
|
||||
--form-valid-color: #78d694;
|
||||
--form-valid-border-color: #78d694;
|
||||
--form-invalid-color: #ff8e86;
|
||||
--form-invalid-border-color: #ff8e86;
|
||||
|
||||
/* Offcanvas (moved from template.css) */
|
||||
/* ===== OFFCANVAS ===== */
|
||||
--offcanvas-color: var(--body-color);
|
||||
--offcanvas-padding-x: 1rem;
|
||||
--offcanvas-padding-y: 1rem;
|
||||
|
||||
/* Navbar */
|
||||
/* ===== NAVBAR ===== */
|
||||
--navbar-padding-x: 1rem;
|
||||
--navbar-padding-y: 0.5rem;
|
||||
--navbar-color: var(--nav-text-color);
|
||||
@@ -281,26 +73,238 @@
|
||||
--nav-link-active-color: var(--mainmenu-nav-link-color);
|
||||
--nav-link-disabled-color: #6c757d;
|
||||
|
||||
/* Responsive tokens */
|
||||
/* ===== 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';
|
||||
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--body-font-family: -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';
|
||||
--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;
|
||||
--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;
|
||||
|
||||
/* ===== LAYOUT & SPACING ===== */
|
||||
--padding-x: 1rem;
|
||||
--padding-y: 1rem;
|
||||
--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);
|
||||
--border: 5px;
|
||||
|
||||
/* ===== BREAKPOINTS ===== */
|
||||
--bp-xs: 0;
|
||||
--bp-sm: 576px;
|
||||
--bp-md: 768px;
|
||||
--bp-lg: 992px;
|
||||
--bp-xl: 1200px;
|
||||
|
||||
/* Utility opacity defaults */
|
||||
--bg-opacity: 1;
|
||||
/* ===== 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;
|
||||
|
||||
/* Layout padding */
|
||||
--padding-x: 1rem;
|
||||
--padding-y: 1rem;
|
||||
/* ===== STANDARD COLORS ===== */
|
||||
--blue: #91a4ff;
|
||||
--indigo: #b19cff;
|
||||
--purple: #c0a5ff;
|
||||
--pink: #ff8fc0;
|
||||
--red: #ff7a73;
|
||||
--orange: #ff9c4d;
|
||||
--yellow: #ffd166;
|
||||
--green: #78d694;
|
||||
--teal: #76e3ff;
|
||||
--cyan: #6fb7ff;
|
||||
--black: #000;
|
||||
--white: #fff;
|
||||
|
||||
/* Button utilities */
|
||||
/* ===== 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;
|
||||
--white-rgb: 255, 255, 255;
|
||||
--black-rgb: 0, 0, 0;
|
||||
|
||||
/* ===== HEADER BACKGROUND ===== */
|
||||
--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg');
|
||||
--header-background-attachment: fixed;
|
||||
--header-background-repeat: repeat;
|
||||
--header-background-size: auto;
|
||||
|
||||
/* ===== CONTAINER BACKGROUNDS ===== */
|
||||
/* Below Topbar Container */
|
||||
--container-below-topbar-bg-image: ;
|
||||
--container-below-topbar-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* Top A Container */
|
||||
--container-top-a-bg-image: ;
|
||||
--container-top-a-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* Top B Container */
|
||||
--container-top-b-bg-image: ;
|
||||
--container-top-b-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* TOC Container */
|
||||
--container-toc-bg: ;
|
||||
--container-toc-color: #dbe3ff;
|
||||
|
||||
/* Sidebar Container */
|
||||
--container-sidebar-bg-image: ;
|
||||
--container-sidebar-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* Bottom A Container */
|
||||
--container-bottom-a-bg-image: ;
|
||||
--container-bottom-a-bg-color: ;
|
||||
--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-radius: 5px;
|
||||
|
||||
/* Bottom B Container */
|
||||
--container-bottom-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* ===== BORDERS ===== */
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border-color: #2b323b;
|
||||
--border-color-translucent: #ffffff26;
|
||||
--border-radius: .25rem;
|
||||
--border-radius-sm: .2rem;
|
||||
--border-radius-lg: .3rem;
|
||||
--border-radius-xl: .3rem;
|
||||
--border-radius-xxl: 2rem;
|
||||
--border-radius-2xl: var(--border-radius-xxl);
|
||||
--border-radius-pill: 50rem;
|
||||
|
||||
/* ===== SHADOWS ===== */
|
||||
--box-shadow: 0 .5rem 1rem #00000066;
|
||||
--box-shadow-sm: 0 .125rem .25rem #00000040;
|
||||
--box-shadow-lg: 0 1rem 3rem #00000080;
|
||||
--box-shadow-inset: inset 0 1px 2px #00000040;
|
||||
|
||||
/* ===== 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;
|
||||
|
||||
/* ===== BUTTONS ===== */
|
||||
--btn-border-radius: var(--border-radius);
|
||||
--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* Card variables */
|
||||
/* ===== CARDS ===== */
|
||||
--card-spacer-y: 1rem;
|
||||
--card-spacer-x: 1rem;
|
||||
--card-title-spacer-y: 0.5rem;
|
||||
@@ -319,7 +323,8 @@
|
||||
--card-img-overlay-padding: 1rem;
|
||||
--card-group-margin: 0.75rem;
|
||||
|
||||
/* VirtueMart surfaces */
|
||||
/* ===== VIRTUEMART (VM) ===== */
|
||||
/* VM Surfaces */
|
||||
--vm-surface: var(--secondary-bg);
|
||||
--vm-surface-2: var(--tertiary-bg);
|
||||
--vm-text: var(--body-color);
|
||||
@@ -328,13 +333,13 @@
|
||||
--vm-border: var(--border-color);
|
||||
--vm-price-color: var(--success);
|
||||
|
||||
/* VM layout and density */
|
||||
/* VM Layout and Density */
|
||||
--vm-container-max-width: 1200px;
|
||||
--vm-section-gap: 2rem;
|
||||
--vm-block-radius: var(--border-radius);
|
||||
--vm-block-shadow: var(--box-shadow-sm);
|
||||
|
||||
/* VM typography */
|
||||
/* VM Typography */
|
||||
--vm-category-title-size: 2rem;
|
||||
--vm-subcategory-title-size: 1.5rem;
|
||||
--vm-page-title-size: 1.75rem;
|
||||
@@ -346,19 +351,19 @@
|
||||
--vm-price-detail-size: 1.125rem;
|
||||
--vm-price-desc-size: 0.875rem;
|
||||
|
||||
/* VM controls */
|
||||
/* VM Controls */
|
||||
--vm-input-radius: var(--border-radius);
|
||||
--vm-input-shadow: var(--box-shadow-sm);
|
||||
--vm-qty-width: 80px;
|
||||
--vm-cart-dropdown-min-width: 300px;
|
||||
|
||||
/* VM alerts */
|
||||
/* VM Alerts */
|
||||
--vm-alert-radius: var(--border-radius);
|
||||
--vm-alert-shadow: var(--box-shadow-sm);
|
||||
--vm-availability-bg: var(--success-bg-subtle);
|
||||
--vm-availability-text: var(--success);
|
||||
|
||||
/* VM buttons */
|
||||
/* VM Buttons */
|
||||
--vm-btn-padding-x: 1rem;
|
||||
--vm-btn-padding-y: 0.5rem;
|
||||
--vm-btn-radius: var(--border-radius);
|
||||
@@ -370,7 +375,7 @@
|
||||
--vm-btn-secondary-text: #ffffff;
|
||||
--vm-btn-secondary-border: var(--secondary);
|
||||
|
||||
/* VM image overlay controls */
|
||||
/* VM Image Overlay Controls */
|
||||
--vm-image-overlay-gap-x: 0.5rem;
|
||||
--vm-image-overlay-gap-y: 0.5rem;
|
||||
--vm-image-overlay-raise: 0.25rem;
|
||||
@@ -383,7 +388,7 @@
|
||||
--vm-image-overlay-btn-color: var(--body-color);
|
||||
--vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* VM vendor menu tokens */
|
||||
/* VM Vendor Menu */
|
||||
--vm-vendor-menu-bg: var(--secondary-bg);
|
||||
--vm-vendor-menu-border: var(--border-color);
|
||||
--vm-vendor-menu-radius: var(--border-radius);
|
||||
@@ -397,7 +402,7 @@
|
||||
--vm-vendor-menu-link-active: var(--primary);
|
||||
--vm-vendor-menu-hover-bg: var(--tertiary-bg);
|
||||
|
||||
/* Gable colors */
|
||||
/* ===== GABLE ===== */
|
||||
--gab-blue: #4d9fff;
|
||||
--gab-green: #5cb85c;
|
||||
--gab-red: #ff6b6b;
|
||||
@@ -448,7 +453,6 @@
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
/* Buttons — inherit brand hues; ensure strong contrast on dark bg */
|
||||
.btn-primary {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(240, 98%, 17%);
|
||||
@@ -475,7 +479,6 @@
|
||||
--btn-active-border-color: #12203f;
|
||||
}
|
||||
|
||||
/* Outline buttons on dark: keep readable borders */
|
||||
.btn-outline-light {
|
||||
--btn-color: #e6ebf1;
|
||||
--btn-border-color: #e6ebf1;
|
||||
@@ -488,7 +491,6 @@
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
/* Links as buttons */
|
||||
.btn-link {
|
||||
--btn-font-weight: 400;
|
||||
--btn-color: var(--link-color);
|
||||
|
||||
@@ -20,253 +20,35 @@
|
||||
* --------------------------------------------- */
|
||||
|
||||
:root[data-bs-theme='dark']{
|
||||
/* System hint for native widgets */
|
||||
color-scheme: dark;
|
||||
|
||||
/* Brand & links */
|
||||
/* ===== BRAND & THEME COLORS ===== */
|
||||
--color-primary: #112855;
|
||||
--accent-color-primary: #3f8ff0;
|
||||
--accent-color-secondary: #6fb3ff;
|
||||
|
||||
/* ===== NAVIGATION ===== */
|
||||
--mainmenu-nav-link-color: #fff;
|
||||
--nav-text-color: gray;
|
||||
--nav-bg-color: var(--color-primary);
|
||||
|
||||
/* ===== LINKS ===== */
|
||||
--color-link: white;
|
||||
--color-hover: gray;
|
||||
--color-active: var(--mainmenu-nav-link-color);
|
||||
|
||||
/* Header background (kept same image; works over dark bg) */
|
||||
--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); --header-background-attachment: fixed;
|
||||
--header-background-repeat: repeat;
|
||||
--header-background-size: auto;
|
||||
|
||||
/* Section containers */
|
||||
--container-below-topbar-bg-image: ;
|
||||
--container-below-topbar-bg-color: ;
|
||||
--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-top-a-bg-image: ;
|
||||
--container-top-a-bg-color: ;
|
||||
--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-b-bg-image: ;
|
||||
--container-top-b-bg-color: ;
|
||||
--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-toc-bg: ;
|
||||
--container-toc-color: #dbe3ff;
|
||||
|
||||
--container-sidebar-bg-image: ;
|
||||
--container-sidebar-bg-color: ;
|
||||
--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-bottom-a-bg-image: ;
|
||||
--container-bottom-a-bg-color: ;
|
||||
--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-radius: 5px;
|
||||
|
||||
--container-bottom-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* Nav & accents */
|
||||
--nav-text-color: gray;
|
||||
--nav-bg-color: var(--color-primary);
|
||||
--border: 5px;
|
||||
|
||||
--muted-color: #6d757e;
|
||||
--hr-color: var(--border-color, #dfe3e7);
|
||||
--link-active-color: var(--link-color);
|
||||
--code-color-ink: var(--code-color, #e93f8e);
|
||||
--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);
|
||||
|
||||
/* Palette */
|
||||
--blue: #91a4ff;
|
||||
--black: #000;
|
||||
--indigo: #b19cff;
|
||||
--purple: #c0a5ff;
|
||||
--pink: #ff8fc0;
|
||||
--red: #ff7a73;
|
||||
--orange: #ff9c4d;
|
||||
--yellow: #ffd166;
|
||||
--green: #78d694;
|
||||
--teal: #76e3ff;
|
||||
--cyan: #6fb7ff;
|
||||
--white: #fff;
|
||||
|
||||
/* Grays tuned for dark */
|
||||
--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;
|
||||
|
||||
/* Contextuals (keep brand hues) */
|
||||
--primary: #010156;
|
||||
--secondary: #48525d;
|
||||
--success: #4aa664;
|
||||
--info: #4f7aa0;
|
||||
--warning: #c77a00;
|
||||
--danger: #c23a31;
|
||||
--light: #1b2027;
|
||||
--dark: #0f1318;
|
||||
|
||||
/* RGB helpers */
|
||||
--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;
|
||||
|
||||
/* Emphasis & subtle variants */
|
||||
--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;
|
||||
|
||||
/* Typography & layout */
|
||||
--body-font-family: -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';
|
||||
--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;
|
||||
|
||||
--emphasis-color: #fff;
|
||||
--emphasis-color-rgb: 255, 255, 255;
|
||||
|
||||
--secondary-color: #e6ebf1bf;
|
||||
--secondary-color-rgb: 230, 235, 241;
|
||||
|
||||
--secondary-bg: #151b22;
|
||||
--secondary-bg-rgb: 21, 27, 34;
|
||||
|
||||
--tertiary-color: #e6ebf180;
|
||||
--tertiary-color-rgb: 230, 235, 241;
|
||||
--tertiary-bg: #10151b;
|
||||
--tertiary-bg-rgb: 16, 21, 27;
|
||||
|
||||
--heading-color: #f1f5f9;
|
||||
|
||||
--link-color: #8ab4f8;
|
||||
--link-color-rgb: 138, 180, 248;
|
||||
--link-decoration: underline;
|
||||
--link-hover-color: #c3d6ff;
|
||||
--link-hover-color-rgb: 195, 214, 255;
|
||||
--link-active-color: var(--link-color);
|
||||
|
||||
--code-color: #ff7abd;
|
||||
--highlight-color: #111;
|
||||
--highlight-bg: #ffe28a1a;
|
||||
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border-color: #2b323b;
|
||||
--border-color-translucent: #ffffff26;
|
||||
|
||||
--border-radius: .25rem;
|
||||
--border-radius-sm: .2rem;
|
||||
--border-radius-lg: .3rem;
|
||||
--border-radius-xl: .3rem;
|
||||
--border-radius-xxl: 2rem;
|
||||
--border-radius-2xl: var(--border-radius-xxl);
|
||||
--border-radius-pill: 50rem;
|
||||
|
||||
--box-shadow: 0 .5rem 1rem #00000066;
|
||||
--box-shadow-sm: 0 .125rem .25rem #00000040;
|
||||
--box-shadow-lg: 0 1rem 3rem #00000080;
|
||||
--box-shadow-inset: inset 0 1px 2px #00000040;
|
||||
|
||||
--focus-ring-width: .25rem;
|
||||
--focus-ring-opacity: .6;
|
||||
--focus-ring-color: #5472ff66;
|
||||
|
||||
/* Forms and inputs - adapted for dark mode */
|
||||
--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;
|
||||
|
||||
/* Offcanvas (moved from template.css) */
|
||||
/* ===== OFFCANVAS ===== */
|
||||
--offcanvas-color: var(--body-color);
|
||||
--offcanvas-padding-x: 1rem;
|
||||
--offcanvas-padding-y: 1rem;
|
||||
|
||||
/* Navbar */
|
||||
/* ===== NAVBAR ===== */
|
||||
--navbar-padding-x: 1rem;
|
||||
--navbar-padding-y: 0.5rem;
|
||||
--navbar-color: var(--nav-text-color);
|
||||
@@ -292,26 +74,238 @@
|
||||
--nav-link-active-color: var(--mainmenu-nav-link-color);
|
||||
--nav-link-disabled-color: #6c757d;
|
||||
|
||||
/* Responsive tokens */
|
||||
/* ===== 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';
|
||||
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--body-font-family: -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';
|
||||
--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;
|
||||
--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;
|
||||
|
||||
/* ===== LAYOUT & SPACING ===== */
|
||||
--padding-x: 1rem;
|
||||
--padding-y: 1rem;
|
||||
--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);
|
||||
--border: 5px;
|
||||
|
||||
/* ===== BREAKPOINTS ===== */
|
||||
--bp-xs: 0;
|
||||
--bp-sm: 576px;
|
||||
--bp-md: 768px;
|
||||
--bp-lg: 992px;
|
||||
--bp-xl: 1200px;
|
||||
|
||||
/* Utility opacity defaults */
|
||||
--bg-opacity: 1;
|
||||
/* ===== 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;
|
||||
|
||||
/* Layout padding */
|
||||
--padding-x: 1rem;
|
||||
--padding-y: 1rem;
|
||||
/* ===== STANDARD COLORS ===== */
|
||||
--blue: #91a4ff;
|
||||
--indigo: #b19cff;
|
||||
--purple: #c0a5ff;
|
||||
--pink: #ff8fc0;
|
||||
--red: #ff7a73;
|
||||
--orange: #ff9c4d;
|
||||
--yellow: #ffd166;
|
||||
--green: #78d694;
|
||||
--teal: #76e3ff;
|
||||
--cyan: #6fb7ff;
|
||||
--black: #000;
|
||||
--white: #fff;
|
||||
|
||||
/* Button utilities */
|
||||
/* ===== 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;
|
||||
--white-rgb: 255, 255, 255;
|
||||
--black-rgb: 0, 0, 0;
|
||||
|
||||
/* ===== HEADER BACKGROUND ===== */
|
||||
--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg');
|
||||
--header-background-attachment: fixed;
|
||||
--header-background-repeat: repeat;
|
||||
--header-background-size: auto;
|
||||
|
||||
/* ===== CONTAINER BACKGROUNDS ===== */
|
||||
/* Below Topbar Container */
|
||||
--container-below-topbar-bg-image: ;
|
||||
--container-below-topbar-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* Top A Container */
|
||||
--container-top-a-bg-image: ;
|
||||
--container-top-a-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* Top B Container */
|
||||
--container-top-b-bg-image: ;
|
||||
--container-top-b-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* TOC Container */
|
||||
--container-toc-bg: ;
|
||||
--container-toc-color: #dbe3ff;
|
||||
|
||||
/* Sidebar Container */
|
||||
--container-sidebar-bg-image: ;
|
||||
--container-sidebar-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* Bottom A Container */
|
||||
--container-bottom-a-bg-image: ;
|
||||
--container-bottom-a-bg-color: ;
|
||||
--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-radius: 5px;
|
||||
|
||||
/* Bottom B Container */
|
||||
--container-bottom-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* ===== BORDERS ===== */
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border-color: #2b323b;
|
||||
--border-color-translucent: #ffffff26;
|
||||
--border-radius: .25rem;
|
||||
--border-radius-sm: .2rem;
|
||||
--border-radius-lg: .3rem;
|
||||
--border-radius-xl: .3rem;
|
||||
--border-radius-xxl: 2rem;
|
||||
--border-radius-2xl: var(--border-radius-xxl);
|
||||
--border-radius-pill: 50rem;
|
||||
|
||||
/* ===== SHADOWS ===== */
|
||||
--box-shadow: 0 .5rem 1rem #00000066;
|
||||
--box-shadow-sm: 0 .125rem .25rem #00000040;
|
||||
--box-shadow-lg: 0 1rem 3rem #00000080;
|
||||
--box-shadow-inset: inset 0 1px 2px #00000040;
|
||||
|
||||
/* ===== 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;
|
||||
|
||||
/* ===== BUTTONS ===== */
|
||||
--btn-border-radius: var(--border-radius);
|
||||
--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* Card variables */
|
||||
/* ===== CARDS ===== */
|
||||
--card-spacer-y: 1rem;
|
||||
--card-spacer-x: 1rem;
|
||||
--card-title-spacer-y: 0.5rem;
|
||||
@@ -330,7 +324,8 @@
|
||||
--card-img-overlay-padding: 1rem;
|
||||
--card-group-margin: 0.75rem;
|
||||
|
||||
/* VirtueMart surfaces */
|
||||
/* ===== VIRTUEMART (VM) ===== */
|
||||
/* VM Surfaces */
|
||||
--vm-surface: var(--secondary-bg);
|
||||
--vm-surface-2: var(--tertiary-bg);
|
||||
--vm-text: var(--body-color);
|
||||
@@ -339,13 +334,13 @@
|
||||
--vm-border: var(--border-color);
|
||||
--vm-price-color: var(--success);
|
||||
|
||||
/* VM layout and density */
|
||||
/* VM Layout and Density */
|
||||
--vm-container-max-width: 1200px;
|
||||
--vm-section-gap: 2rem;
|
||||
--vm-block-radius: var(--border-radius);
|
||||
--vm-block-shadow: var(--box-shadow-sm);
|
||||
|
||||
/* VM typography */
|
||||
/* VM Typography */
|
||||
--vm-category-title-size: 2rem;
|
||||
--vm-subcategory-title-size: 1.5rem;
|
||||
--vm-page-title-size: 1.75rem;
|
||||
@@ -357,19 +352,19 @@
|
||||
--vm-price-detail-size: 1.125rem;
|
||||
--vm-price-desc-size: 0.875rem;
|
||||
|
||||
/* VM controls */
|
||||
/* VM Controls */
|
||||
--vm-input-radius: var(--border-radius);
|
||||
--vm-input-shadow: var(--box-shadow-sm);
|
||||
--vm-qty-width: 80px;
|
||||
--vm-cart-dropdown-min-width: 300px;
|
||||
|
||||
/* VM alerts */
|
||||
/* VM Alerts */
|
||||
--vm-alert-radius: var(--border-radius);
|
||||
--vm-alert-shadow: var(--box-shadow-sm);
|
||||
--vm-availability-bg: var(--success-bg-subtle);
|
||||
--vm-availability-text: var(--success);
|
||||
|
||||
/* VM buttons */
|
||||
/* VM Buttons */
|
||||
--vm-btn-padding-x: 1rem;
|
||||
--vm-btn-padding-y: 0.5rem;
|
||||
--vm-btn-radius: var(--border-radius);
|
||||
@@ -381,7 +376,7 @@
|
||||
--vm-btn-secondary-text: #ffffff;
|
||||
--vm-btn-secondary-border: var(--secondary);
|
||||
|
||||
/* VM image overlay controls */
|
||||
/* VM Image Overlay Controls */
|
||||
--vm-image-overlay-gap-x: 0.5rem;
|
||||
--vm-image-overlay-gap-y: 0.5rem;
|
||||
--vm-image-overlay-raise: 0.25rem;
|
||||
@@ -394,7 +389,7 @@
|
||||
--vm-image-overlay-btn-color: var(--body-color);
|
||||
--vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* VM vendor menu tokens */
|
||||
/* VM Vendor Menu */
|
||||
--vm-vendor-menu-bg: var(--secondary-bg);
|
||||
--vm-vendor-menu-border: var(--border-color);
|
||||
--vm-vendor-menu-radius: var(--border-radius);
|
||||
@@ -408,7 +403,7 @@
|
||||
--vm-vendor-menu-link-active: var(--primary);
|
||||
--vm-vendor-menu-hover-bg: var(--tertiary-bg);
|
||||
|
||||
/* Gable colors */
|
||||
/* ===== GABLE ===== */
|
||||
--gab-blue: #4d9fff;
|
||||
--gab-green: #5cb85c;
|
||||
--gab-red: #ff6b6b;
|
||||
|
||||
@@ -21,85 +21,93 @@
|
||||
|
||||
:root[data-bs-theme="light"] {
|
||||
color-scheme: light;
|
||||
|
||||
/* ===== BRAND & THEME COLORS ===== */
|
||||
--color-primary: #112855;
|
||||
--accent-color-primary: #3f8ff0;
|
||||
--accent-color-secondary: #3f8ff0;
|
||||
|
||||
/* ===== NAVIGATION ===== */
|
||||
--mainmenu-nav-link-color: white;
|
||||
|
||||
--color-link: #224FAA;
|
||||
--color-hover: var(--accent-color-primary);
|
||||
|
||||
--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg');
|
||||
--header-background-attachment: fixed;
|
||||
--header-background-repeat: repeat;
|
||||
--header-background-size: auto;
|
||||
|
||||
--container-below-topbar-bg-image: ;
|
||||
--container-below-topbar-bg-color ;
|
||||
--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-top-a-bg-image: ;
|
||||
--container-top-a-bg-color: ;
|
||||
--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-b-bg-image: ;
|
||||
--container-top-b-bg-color: ;
|
||||
--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-toc-bg: var(--mainmenu-nav-link-color);
|
||||
--container-toc-color: var(--color-primary);
|
||||
|
||||
--container-sidebar-bg-image: ;
|
||||
--container-sidebar-bg-color: ;
|
||||
--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-bottom-a-bg-image: ;
|
||||
--container-bottom-a-bg-color: ;
|
||||
--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-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
--nav-text-color: var(--mainmenu-nav-link-color);
|
||||
--nav-bg-color: var(--color-link);
|
||||
--border: 5px;
|
||||
|
||||
--muted-color: #6d757e;
|
||||
--hr-color: var(--border-color, #dfe3e7);
|
||||
/* ===== LINKS ===== */
|
||||
--color-link: #224FAA;
|
||||
--color-hover: var(--accent-color-primary);
|
||||
--link-color: #224faa;
|
||||
--link-color-rgb: 34, 79, 170;
|
||||
--link-decoration: underline;
|
||||
--link-hover-color: #424077;
|
||||
--link-hover-color-rgb: 66, 64, 119;
|
||||
--link-active-color: var(--link-color);
|
||||
|
||||
/* ===== OFFCANVAS ===== */
|
||||
--offcanvas-color: var(--body-color);
|
||||
--offcanvas-padding-x: 1rem;
|
||||
--offcanvas-padding-y: 1rem;
|
||||
|
||||
/* ===== NAVBAR ===== */
|
||||
--navbar-padding-x: 1rem;
|
||||
--navbar-padding-y: 0.5rem;
|
||||
--navbar-color: var(--nav-text-color);
|
||||
--navbar-active-color: var(--mainmenu-nav-link-color);
|
||||
--navbar-disabled-color: #6c757d;
|
||||
--navbar-brand-padding-y: 0.3125rem;
|
||||
--navbar-brand-margin-end: 1rem;
|
||||
--navbar-brand-font-size: 1.25rem;
|
||||
--navbar-brand-color: var(--nav-text-color);
|
||||
--navbar-brand-active-color: var(--mainmenu-nav-link-color);
|
||||
--navbar-nav-link-padding-x: 0.5rem;
|
||||
--navbar-toggler-padding-y: 0.25rem;
|
||||
--navbar-toggler-padding-x: 0.75rem;
|
||||
--navbar-toggler-font-size: 1.25rem;
|
||||
--navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
|
||||
--navbar-toggler-border-radius: 0.25rem;
|
||||
--navbar-toggler-focus-width: 0.25rem;
|
||||
--navbar-toggler-transition: box-shadow 0.15s ease-in-out;
|
||||
--nav-link-padding-x: 1rem;
|
||||
--nav-link-padding-y: 0.5rem;
|
||||
--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;
|
||||
|
||||
/* ===== 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";
|
||||
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--body-font-family: -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");
|
||||
--body-font-size: 1rem;
|
||||
--body-font-weight: 400;
|
||||
--body-line-height: 1.5;
|
||||
--body-color: #22262a;
|
||||
--body-color-rgb: 34, 38, 42;
|
||||
--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;
|
||||
|
||||
/* ===== LAYOUT & SPACING ===== */
|
||||
--padding-x: 1rem;
|
||||
--padding-y: 1rem;
|
||||
--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);
|
||||
--kbd-ink: var(--body-bg, #fff);
|
||||
@@ -107,28 +115,16 @@
|
||||
--toc-ink: var(--color-primary, #112855);
|
||||
--selection-bg: var(--highlight-bg, #fbeea8);
|
||||
--selection-ink: var(--body-color, #22262a);
|
||||
--border: 5px;
|
||||
|
||||
--blue: #010156;
|
||||
--black: #000;
|
||||
--indigo: #6812f3;
|
||||
--purple: #6f42c2;
|
||||
--pink: #e93f8e;
|
||||
--red: #a51f18;
|
||||
--orange: #fd7e17;
|
||||
--yellow: #ad6200;
|
||||
--green: #448344;
|
||||
--teal: #5abfdd;
|
||||
--cyan: #30638d;
|
||||
--white: #fff;
|
||||
--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;
|
||||
/* ===== BREAKPOINTS ===== */
|
||||
--bp-xs: 0;
|
||||
--bp-sm: 576px;
|
||||
--bp-md: 768px;
|
||||
--bp-lg: 992px;
|
||||
--bp-xl: 1200px;
|
||||
|
||||
/* ===== BOOTSTRAP PALETTE ===== */
|
||||
--primary: #010156;
|
||||
--secondary: #6d757e;
|
||||
--success: #448344;
|
||||
@@ -169,38 +165,106 @@
|
||||
--danger-border-subtle: #dba5a2;
|
||||
--light-border-subtle: #eaedf0;
|
||||
--dark-border-subtle: #adb5bd;
|
||||
|
||||
/* ===== STANDARD COLORS ===== */
|
||||
--blue: #010156;
|
||||
--indigo: #6812f3;
|
||||
--purple: #6f42c2;
|
||||
--pink: #e93f8e;
|
||||
--red: #a51f18;
|
||||
--orange: #fd7e17;
|
||||
--yellow: #ad6200;
|
||||
--green: #448344;
|
||||
--teal: #5abfdd;
|
||||
--cyan: #30638d;
|
||||
--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;
|
||||
--white-rgb: 255, 255, 255;
|
||||
--black-rgb: 0, 0, 0;
|
||||
--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";
|
||||
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--gradient: linear-gradient(180deg, #ffffff26, #fff0);
|
||||
--body-font-family: -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");
|
||||
--body-font-size: 1rem;
|
||||
--body-font-weight: 400;
|
||||
--body-line-height: 1.5;
|
||||
--body-color: #22262a;
|
||||
--body-color-rgb: 34, 38, 42;
|
||||
--body-bg: #fff;
|
||||
--body-bg-rgb: 255, 255, 255;
|
||||
--emphasis-color: #000;
|
||||
--emphasis-color-rgb: 0, 0, 0;
|
||||
--secondary-color: #22262abf;
|
||||
--secondary-color-rgb: 34, 38, 42;
|
||||
--secondary-bg: #eaedf0;
|
||||
--secondary-bg-rgb: 234, 237, 240;
|
||||
--tertiary-color: #22262a80;
|
||||
--tertiary-color-rgb: 34, 38, 42;
|
||||
--tertiary-bg: #f9fafb;
|
||||
--tertiary-bg-rgb: 249, 250, 251;
|
||||
--heading-color: inherit;
|
||||
--link-color: #224faa;
|
||||
--link-color-rgb: 34, 79, 170;
|
||||
--link-decoration: underline;
|
||||
--link-hover-color: #424077;
|
||||
--link-hover-color-rgb: 66, 64, 119;
|
||||
--code-color: #e93f8e;
|
||||
--highlight-color: #22262a;
|
||||
--highlight-bg: #fbeea8;
|
||||
|
||||
/* ===== HEADER BACKGROUND ===== */
|
||||
--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg');
|
||||
--header-background-attachment: fixed;
|
||||
--header-background-repeat: repeat;
|
||||
--header-background-size: auto;
|
||||
|
||||
/* ===== CONTAINER BACKGROUNDS ===== */
|
||||
/* Below Topbar Container */
|
||||
--container-below-topbar-bg-image: ;
|
||||
--container-below-topbar-bg-color ;
|
||||
--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: ;
|
||||
|
||||
/* Top A Container */
|
||||
--container-top-a-bg-image: ;
|
||||
--container-top-a-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* Top B Container */
|
||||
--container-top-b-bg-image: ;
|
||||
--container-top-b-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* 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-position: auto;
|
||||
--container-sidebar-bg-attachment: scroll;
|
||||
--container-sidebar-bg-repeat: repeat;
|
||||
--container-sidebar-bg-size: auto;
|
||||
--container-sidebar-border: ;
|
||||
--container-sidebar-border-radius: ;
|
||||
|
||||
/* Bottom A Container */
|
||||
--container-bottom-a-bg-image: ;
|
||||
--container-bottom-a-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* Bottom B Container */
|
||||
--container-bottom-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* ===== BORDERS ===== */
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border-color: #dfe3e7;
|
||||
@@ -212,69 +276,35 @@
|
||||
--border-radius-xxl: 2rem;
|
||||
--border-radius-2xl: var(--border-radius-xxl)*2;
|
||||
--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;
|
||||
|
||||
/* ===== 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;
|
||||
|
||||
/* Offcanvas (moved from template.css) */
|
||||
--offcanvas-color: var(--body-color);
|
||||
--offcanvas-padding-x: 1rem;
|
||||
--offcanvas-padding-y: 1rem;
|
||||
|
||||
/* Navbar */
|
||||
--navbar-padding-x: 1rem;
|
||||
--navbar-padding-y: 0.5rem;
|
||||
--navbar-color: var(--nav-text-color);
|
||||
--navbar-active-color: var(--mainmenu-nav-link-color);
|
||||
--navbar-disabled-color: #6c757d;
|
||||
--navbar-brand-padding-y: 0.3125rem;
|
||||
--navbar-brand-margin-end: 1rem;
|
||||
--navbar-brand-font-size: 1.25rem;
|
||||
--navbar-brand-color: var(--nav-text-color);
|
||||
--navbar-brand-active-color: var(--mainmenu-nav-link-color);
|
||||
--navbar-nav-link-padding-x: 0.5rem;
|
||||
--navbar-toggler-padding-y: 0.25rem;
|
||||
--navbar-toggler-padding-x: 0.75rem;
|
||||
--navbar-toggler-font-size: 1.25rem;
|
||||
--navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
|
||||
--navbar-toggler-border-radius: 0.25rem;
|
||||
--navbar-toggler-focus-width: 0.25rem;
|
||||
--navbar-toggler-transition: box-shadow 0.15s ease-in-out;
|
||||
--nav-link-padding-x: 1rem;
|
||||
--nav-link-padding-y: 0.5rem;
|
||||
--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;
|
||||
|
||||
/* Responsive tokens */
|
||||
--nav-toggle-size: 3rem;
|
||||
--bp-xs: 0;
|
||||
--bp-sm: 576px;
|
||||
--bp-md: 768px;
|
||||
--bp-lg: 992px;
|
||||
--bp-xl: 1200px;
|
||||
|
||||
/* Utility opacity defaults */
|
||||
--bg-opacity: 1;
|
||||
|
||||
/* Layout padding */
|
||||
--padding-x: 1rem;
|
||||
--padding-y: 1rem;
|
||||
|
||||
/* Button utilities */
|
||||
/* ===== BUTTONS ===== */
|
||||
--btn-border-radius: var(--border-radius);
|
||||
--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
|
||||
/* Card variables */
|
||||
/* ===== CARDS ===== */
|
||||
--card-spacer-y: 1rem;
|
||||
--card-spacer-x: 1rem;
|
||||
--card-title-spacer-y: 0.5rem;
|
||||
@@ -293,7 +323,8 @@
|
||||
--card-img-overlay-padding: 1rem;
|
||||
--card-group-margin: 0.75rem;
|
||||
|
||||
/* VirtueMart surfaces */
|
||||
/* ===== VIRTUEMART (VM) ===== */
|
||||
/* VM Surfaces */
|
||||
--vm-surface: #ffffff;
|
||||
--vm-surface-2: #f8f9fa;
|
||||
--vm-text: var(--body-color);
|
||||
@@ -302,13 +333,13 @@
|
||||
--vm-border: var(--border-color);
|
||||
--vm-price-color: var(--success);
|
||||
|
||||
/* VM layout and density */
|
||||
/* VM Layout and Density */
|
||||
--vm-container-max-width: 1200px;
|
||||
--vm-section-gap: 2rem;
|
||||
--vm-block-radius: var(--border-radius);
|
||||
--vm-block-shadow: var(--box-shadow-sm);
|
||||
|
||||
/* VM typography */
|
||||
/* VM Typography */
|
||||
--vm-category-title-size: 2rem;
|
||||
--vm-subcategory-title-size: 1.5rem;
|
||||
--vm-page-title-size: 1.75rem;
|
||||
@@ -320,19 +351,19 @@
|
||||
--vm-price-detail-size: 1.125rem;
|
||||
--vm-price-desc-size: 0.875rem;
|
||||
|
||||
/* VM controls */
|
||||
/* VM Controls */
|
||||
--vm-input-radius: var(--border-radius);
|
||||
--vm-input-shadow: var(--box-shadow-sm);
|
||||
--vm-qty-width: 80px;
|
||||
--vm-cart-dropdown-min-width: 300px;
|
||||
|
||||
/* VM alerts */
|
||||
/* VM Alerts */
|
||||
--vm-alert-radius: var(--border-radius);
|
||||
--vm-alert-shadow: var(--box-shadow-sm);
|
||||
--vm-availability-bg: var(--success-bg-subtle);
|
||||
--vm-availability-text: var(--success);
|
||||
|
||||
/* VM buttons */
|
||||
/* VM Buttons */
|
||||
--vm-btn-padding-x: 1rem;
|
||||
--vm-btn-padding-y: 0.5rem;
|
||||
--vm-btn-radius: var(--border-radius);
|
||||
@@ -344,7 +375,7 @@
|
||||
--vm-btn-secondary-text: #ffffff;
|
||||
--vm-btn-secondary-border: var(--secondary);
|
||||
|
||||
/* VM image overlay controls */
|
||||
/* VM Image Overlay Controls */
|
||||
--vm-image-overlay-gap-x: 0.5rem;
|
||||
--vm-image-overlay-gap-y: 0.5rem;
|
||||
--vm-image-overlay-raise: 0.25rem;
|
||||
@@ -357,7 +388,7 @@
|
||||
--vm-image-overlay-btn-color: var(--body-color);
|
||||
--vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* VM vendor menu tokens */
|
||||
/* VM Vendor Menu */
|
||||
--vm-vendor-menu-bg: var(--body-bg);
|
||||
--vm-vendor-menu-border: var(--border-color);
|
||||
--vm-vendor-menu-radius: var(--border-radius);
|
||||
@@ -371,7 +402,7 @@
|
||||
--vm-vendor-menu-link-active: var(--primary);
|
||||
--vm-vendor-menu-hover-bg: var(--secondary-bg);
|
||||
|
||||
/* Gable colors */
|
||||
/* ===== GABLE ===== */
|
||||
--gab-blue: #0066cc;
|
||||
--gab-green: #28a745;
|
||||
--gab-red: #dc3545;
|
||||
|
||||
@@ -21,85 +21,93 @@
|
||||
|
||||
:root[data-bs-theme="light"] {
|
||||
color-scheme: light;
|
||||
|
||||
/* ===== BRAND & THEME COLORS ===== */
|
||||
--color-primary: #112855;
|
||||
--accent-color-primary: #3f8ff0;
|
||||
--accent-color-secondary: #3f8ff0;
|
||||
|
||||
/* ===== NAVIGATION ===== */
|
||||
--mainmenu-nav-link-color: white;
|
||||
|
||||
--color-link: #224FAA;
|
||||
--color-hover: var(--accent-color-primary);
|
||||
|
||||
--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg');
|
||||
--header-background-attachment: fixed;
|
||||
--header-background-repeat: repeat;
|
||||
--header-background-size: auto;
|
||||
|
||||
--container-below-topbar-bg-image: ;
|
||||
--container-below-topbar-bg-color ;
|
||||
--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-top-a-bg-image: ;
|
||||
--container-top-a-bg-color: ;
|
||||
--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-b-bg-image: ;
|
||||
--container-top-b-bg-color: ;
|
||||
--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-toc-bg: var(--mainmenu-nav-link-color);
|
||||
--container-toc-color: var(--color-primary);
|
||||
|
||||
--container-sidebar-bg-image: ;
|
||||
--container-sidebar-bg-color: ;
|
||||
--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-bottom-a-bg-image: ;
|
||||
--container-bottom-a-bg-color: ;
|
||||
--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-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
--nav-text-color: white;
|
||||
--nav-bg-color: var(--color-link);
|
||||
--border: 5px;
|
||||
|
||||
--muted-color: #6d757e;
|
||||
--hr-color: var(--border-color, #dfe3e7);
|
||||
/* ===== LINKS ===== */
|
||||
--color-link: #224FAA;
|
||||
--color-hover: var(--accent-color-primary);
|
||||
--link-color: #224faa;
|
||||
--link-color-rgb: 34, 79, 170;
|
||||
--link-decoration: underline;
|
||||
--link-hover-color: #424077;
|
||||
--link-hover-color-rgb: 66, 64, 119;
|
||||
--link-active-color: var(--link-color);
|
||||
|
||||
/* ===== OFFCANVAS ===== */
|
||||
--offcanvas-color: var(--body-color);
|
||||
--offcanvas-padding-x: 1rem;
|
||||
--offcanvas-padding-y: 1rem;
|
||||
|
||||
/* ===== NAVBAR ===== */
|
||||
--navbar-padding-x: 1rem;
|
||||
--navbar-padding-y: 0.5rem;
|
||||
--navbar-color: var(--nav-text-color);
|
||||
--navbar-active-color: var(--mainmenu-nav-link-color);
|
||||
--navbar-disabled-color: #6c757d;
|
||||
--navbar-brand-padding-y: 0.3125rem;
|
||||
--navbar-brand-margin-end: 1rem;
|
||||
--navbar-brand-font-size: 1.25rem;
|
||||
--navbar-brand-color: var(--nav-text-color);
|
||||
--navbar-brand-active-color: var(--mainmenu-nav-link-color);
|
||||
--navbar-nav-link-padding-x: 0.5rem;
|
||||
--navbar-toggler-padding-y: 0.25rem;
|
||||
--navbar-toggler-padding-x: 0.75rem;
|
||||
--navbar-toggler-font-size: 1.25rem;
|
||||
--navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
|
||||
--navbar-toggler-border-radius: 0.25rem;
|
||||
--navbar-toggler-focus-width: 0.25rem;
|
||||
--navbar-toggler-transition: box-shadow 0.15s ease-in-out;
|
||||
--nav-link-padding-x: 1rem;
|
||||
--nav-link-padding-y: 0.5rem;
|
||||
--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;
|
||||
|
||||
/* ===== 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";
|
||||
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--body-font-family: -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");
|
||||
--body-font-size: 1rem;
|
||||
--body-font-weight: 400;
|
||||
--body-line-height: 1.5;
|
||||
--body-color: #22262a;
|
||||
--body-color-rgb: 34, 38, 42;
|
||||
--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;
|
||||
|
||||
/* ===== LAYOUT & SPACING ===== */
|
||||
--padding-x: 1rem;
|
||||
--padding-y: 1rem;
|
||||
--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);
|
||||
--kbd-ink: var(--body-bg, #fff);
|
||||
@@ -107,28 +115,16 @@
|
||||
--toc-ink: var(--color-primary, #112855);
|
||||
--selection-bg: var(--highlight-bg, #fbeea8);
|
||||
--selection-ink: var(--body-color, #22262a);
|
||||
--border: 5px;
|
||||
|
||||
--blue: #010156;
|
||||
--black: #000;
|
||||
--indigo: #6812f3;
|
||||
--purple: #6f42c2;
|
||||
--pink: #e93f8e;
|
||||
--red: #a51f18;
|
||||
--orange: #fd7e17;
|
||||
--yellow: #ad6200;
|
||||
--green: #448344;
|
||||
--teal: #5abfdd;
|
||||
--cyan: #30638d;
|
||||
--white: #fff;
|
||||
--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;
|
||||
/* ===== BREAKPOINTS ===== */
|
||||
--bp-xs: 0;
|
||||
--bp-sm: 576px;
|
||||
--bp-md: 768px;
|
||||
--bp-lg: 992px;
|
||||
--bp-xl: 1200px;
|
||||
|
||||
/* ===== BOOTSTRAP PALETTE ===== */
|
||||
--primary: #010156;
|
||||
--secondary: #6d757e;
|
||||
--success: #448344;
|
||||
@@ -169,38 +165,106 @@
|
||||
--danger-border-subtle: #dba5a2;
|
||||
--light-border-subtle: #eaedf0;
|
||||
--dark-border-subtle: #adb5bd;
|
||||
|
||||
/* ===== STANDARD COLORS ===== */
|
||||
--blue: #010156;
|
||||
--indigo: #6812f3;
|
||||
--purple: #6f42c2;
|
||||
--pink: #e93f8e;
|
||||
--red: #a51f18;
|
||||
--orange: #fd7e17;
|
||||
--yellow: #ad6200;
|
||||
--green: #448344;
|
||||
--teal: #5abfdd;
|
||||
--cyan: #30638d;
|
||||
--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;
|
||||
--white-rgb: 255, 255, 255;
|
||||
--black-rgb: 0, 0, 0;
|
||||
--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";
|
||||
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--gradient: linear-gradient(180deg, #ffffff26, #fff0);
|
||||
--body-font-family: -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");
|
||||
--body-font-size: 1rem;
|
||||
--body-font-weight: 400;
|
||||
--body-line-height: 1.5;
|
||||
--body-color: #22262a;
|
||||
--body-color-rgb: 34, 38, 42;
|
||||
--body-bg: #fff;
|
||||
--body-bg-rgb: 255, 255, 255;
|
||||
--emphasis-color: #000;
|
||||
--emphasis-color-rgb: 0, 0, 0;
|
||||
--secondary-color: #22262abf;
|
||||
--secondary-color-rgb: 34, 38, 42;
|
||||
--secondary-bg: #eaedf0;
|
||||
--secondary-bg-rgb: 234, 237, 240;
|
||||
--tertiary-color: #22262a80;
|
||||
--tertiary-color-rgb: 34, 38, 42;
|
||||
--tertiary-bg: #f9fafb;
|
||||
--tertiary-bg-rgb: 249, 250, 251;
|
||||
--heading-color: inherit;
|
||||
--link-color: #224faa;
|
||||
--link-color-rgb: 34, 79, 170;
|
||||
--link-decoration: underline;
|
||||
--link-hover-color: #424077;
|
||||
--link-hover-color-rgb: 66, 64, 119;
|
||||
--code-color: #e93f8e;
|
||||
--highlight-color: #22262a;
|
||||
--highlight-bg: #fbeea8;
|
||||
|
||||
/* ===== HEADER BACKGROUND ===== */
|
||||
--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg');
|
||||
--header-background-attachment: fixed;
|
||||
--header-background-repeat: repeat;
|
||||
--header-background-size: auto;
|
||||
|
||||
/* ===== CONTAINER BACKGROUNDS ===== */
|
||||
/* Below Topbar Container */
|
||||
--container-below-topbar-bg-image: ;
|
||||
--container-below-topbar-bg-color ;
|
||||
--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: ;
|
||||
|
||||
/* Top A Container */
|
||||
--container-top-a-bg-image: ;
|
||||
--container-top-a-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* Top B Container */
|
||||
--container-top-b-bg-image: ;
|
||||
--container-top-b-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* 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-position: auto;
|
||||
--container-sidebar-bg-attachment: scroll;
|
||||
--container-sidebar-bg-repeat: repeat;
|
||||
--container-sidebar-bg-size: auto;
|
||||
--container-sidebar-border: ;
|
||||
--container-sidebar-border-radius: ;
|
||||
|
||||
/* Bottom A Container */
|
||||
--container-bottom-a-bg-image: ;
|
||||
--container-bottom-a-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* Bottom B Container */
|
||||
--container-bottom-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* ===== BORDERS ===== */
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border-color: #dfe3e7;
|
||||
@@ -212,14 +276,17 @@
|
||||
--border-radius-xxl: 2rem;
|
||||
--border-radius-2xl: var(--border-radius-xxl)*2;
|
||||
--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;
|
||||
|
||||
/* ===== FOCUS & FORMS ===== */
|
||||
--focus-ring-width: .25rem;
|
||||
--focus-ring-opacity: .25;
|
||||
--focus-ring-color: #01015640;
|
||||
/* Forms and inputs */
|
||||
--input-color: hsl(210, 11%, 15%);
|
||||
--input-bg: hsl(210, 20%, 98%);
|
||||
--input-border-color: hsl(210, 14%, 83%);
|
||||
|
|
||||
@@ -228,63 +295,16 @@
|
||||
--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;
|
||||
|
||||
/* Offcanvas (moved from template.css) */
|
||||
--offcanvas-color: var(--body-color);
|
||||
--offcanvas-padding-x: 1rem;
|
||||
--offcanvas-padding-y: 1rem;
|
||||
|
||||
/* Navbar */
|
||||
--navbar-padding-x: 1rem;
|
||||
--navbar-padding-y: 0.5rem;
|
||||
--navbar-color: var(--nav-text-color);
|
||||
--navbar-active-color: var(--mainmenu-nav-link-color);
|
||||
--navbar-disabled-color: #6c757d;
|
||||
--navbar-brand-padding-y: 0.3125rem;
|
||||
--navbar-brand-margin-end: 1rem;
|
||||
--navbar-brand-font-size: 1.25rem;
|
||||
--navbar-brand-color: var(--nav-text-color);
|
||||
--navbar-brand-active-color: var(--mainmenu-nav-link-color);
|
||||
--navbar-nav-link-padding-x: 0.5rem;
|
||||
--navbar-toggler-padding-y: 0.25rem;
|
||||
--navbar-toggler-padding-x: 0.75rem;
|
||||
--navbar-toggler-font-size: 1.25rem;
|
||||
--navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
|
||||
--navbar-toggler-border-radius: 0.25rem;
|
||||
--navbar-toggler-focus-width: 0.25rem;
|
||||
--navbar-toggler-transition: box-shadow 0.15s ease-in-out;
|
||||
--nav-link-padding-x: 1rem;
|
||||
--nav-link-padding-y: 0.5rem;
|
||||
--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;
|
||||
|
||||
/* Responsive tokens */
|
||||
--nav-toggle-size: 3rem;
|
||||
--bp-xs: 0;
|
||||
--bp-sm: 576px;
|
||||
--bp-md: 768px;
|
||||
--bp-lg: 992px;
|
||||
--bp-xl: 1200px;
|
||||
|
||||
/* Utility opacity defaults */
|
||||
--bg-opacity: 1;
|
||||
|
||||
/* Layout padding */
|
||||
--padding-x: 1rem;
|
||||
--padding-y: 1rem;
|
||||
|
||||
/* Button utilities */
|
||||
/* ===== BUTTONS ===== */
|
||||
--btn-border-radius: var(--border-radius);
|
||||
--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
|
||||
/* Card variables */
|
||||
/* ===== CARDS ===== */
|
||||
--card-spacer-y: 1rem;
|
||||
--card-spacer-x: 1rem;
|
||||
--card-title-spacer-y: 0.5rem;
|
||||
@@ -303,7 +323,8 @@
|
||||
--card-img-overlay-padding: 1rem;
|
||||
--card-group-margin: 0.75rem;
|
||||
|
||||
/* VirtueMart surfaces */
|
||||
/* ===== VIRTUEMART (VM) ===== */
|
||||
/* VM Surfaces */
|
||||
--vm-surface: #ffffff;
|
||||
--vm-surface-2: #f8f9fa;
|
||||
--vm-text: var(--body-color);
|
||||
@@ -312,13 +333,13 @@
|
||||
--vm-border: var(--border-color);
|
||||
--vm-price-color: var(--success);
|
||||
|
||||
/* VM layout and density */
|
||||
/* VM Layout and Density */
|
||||
--vm-container-max-width: 1200px;
|
||||
--vm-section-gap: 2rem;
|
||||
--vm-block-radius: var(--border-radius);
|
||||
--vm-block-shadow: var(--box-shadow-sm);
|
||||
|
||||
/* VM typography */
|
||||
/* VM Typography */
|
||||
--vm-category-title-size: 2rem;
|
||||
--vm-subcategory-title-size: 1.5rem;
|
||||
--vm-page-title-size: 1.75rem;
|
||||
@@ -330,19 +351,19 @@
|
||||
--vm-price-detail-size: 1.125rem;
|
||||
--vm-price-desc-size: 0.875rem;
|
||||
|
||||
/* VM controls */
|
||||
/* VM Controls */
|
||||
--vm-input-radius: var(--border-radius);
|
||||
--vm-input-shadow: var(--box-shadow-sm);
|
||||
--vm-qty-width: 80px;
|
||||
--vm-cart-dropdown-min-width: 300px;
|
||||
|
||||
/* VM alerts */
|
||||
/* VM Alerts */
|
||||
--vm-alert-radius: var(--border-radius);
|
||||
--vm-alert-shadow: var(--box-shadow-sm);
|
||||
--vm-availability-bg: var(--success-bg-subtle);
|
||||
--vm-availability-text: var(--success);
|
||||
|
||||
/* VM buttons */
|
||||
/* VM Buttons */
|
||||
--vm-btn-padding-x: 1rem;
|
||||
--vm-btn-padding-y: 0.5rem;
|
||||
--vm-btn-radius: var(--border-radius);
|
||||
@@ -354,7 +375,7 @@
|
||||
--vm-btn-secondary-text: #ffffff;
|
||||
--vm-btn-secondary-border: var(--secondary);
|
||||
|
||||
/* VM image overlay controls */
|
||||
/* VM Image Overlay Controls */
|
||||
--vm-image-overlay-gap-x: 0.5rem;
|
||||
--vm-image-overlay-gap-y: 0.5rem;
|
||||
--vm-image-overlay-raise: 0.25rem;
|
||||
@@ -367,7 +388,7 @@
|
||||
--vm-image-overlay-btn-color: var(--body-color);
|
||||
--vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* VM vendor menu tokens */
|
||||
/* VM Vendor Menu */
|
||||
--vm-vendor-menu-bg: var(--body-bg);
|
||||
--vm-vendor-menu-border: var(--border-color);
|
||||
--vm-vendor-menu-radius: var(--border-radius);
|
||||
@@ -381,7 +402,7 @@
|
||||
--vm-vendor-menu-link-active: var(--primary);
|
||||
--vm-vendor-menu-hover-bg: var(--secondary-bg);
|
||||
|
||||
/* Gable colors */
|
||||
/* ===== GABLE ===== */
|
||||
--gab-blue: #0066cc;
|
||||
--gab-green: #28a745;
|
||||
--gab-red: #dc3545;
|
||||
|
||||
@@ -31,37 +31,181 @@
|
||||
* --------------------------------------------- */
|
||||
|
||||
:root[data-bs-theme='dark']{
|
||||
/* System hint for native widgets */
|
||||
color-scheme: dark;
|
||||
|
||||
/* ===== PRIMARY BRAND COLORS ===== */
|
||||
/* Main brand color used throughout the template */
|
||||
/* ===== BRAND & THEME COLORS ===== */
|
||||
--color-primary: #112855;
|
||||
|
||||
/* Accent colors for interactive elements */
|
||||
--accent-color-primary: #3f8ff0;
|
||||
--accent-color-secondary: #6fb3ff;
|
||||
|
||||
The custom palette template instructs users to copy this file for both light and dark custom palettes, but the file only defines variables under :root[data-bs-theme='dark']. If copied to the light palette location, it will have no effect in light mode. Consider including both a light and dark :root block in this template (or provide separate light/dark template files and update the instructions accordingly). The custom palette template instructs users to copy this file for both light and dark custom palettes, but the file only defines variables under :root[data-bs-theme='dark']. If copied to the light palette location, it will have no effect in light mode. Consider including both a light and dark :root block in this template (or provide separate light/dark template files and update the instructions accordingly).
|
||||
/* ===== LINK COLORS ===== */
|
||||
/* Color for hyperlinks in dark mode */
|
||||
--color-link: white;
|
||||
|
||||
/* Color when hovering over links */
|
||||
--color-hover: gray;
|
||||
|
||||
/* Active link color */
|
||||
--color-active: var(--mainmenu-nav-link-color);
|
||||
|
||||
/* ===== NAVIGATION ===== */
|
||||
/* Text color in main menu */
|
||||
--mainmenu-nav-link-color: #fff;
|
||||
|
||||
/* Background color for navigation */
|
||||
--nav-text-color: gray;
|
||||
--nav-bg-color: var(--color-primary);
|
||||
|
||||
/* ===== LINKS ===== */
|
||||
--color-link: white;
|
||||
--color-hover: gray;
|
||||
--color-active: var(--mainmenu-nav-link-color);
|
||||
--link-color: #8ab4f8;
|
||||
--link-color-rgb: 138, 180, 248;
|
||||
--link-decoration: underline;
|
||||
--link-hover-color: #c3d6ff;
|
||||
--link-hover-color-rgb: 195, 214, 255;
|
||||
--link-active-color: var(--link-color);
|
||||
|
||||
/* ===== OFFCANVAS ===== */
|
||||
--offcanvas-color: var(--body-color);
|
||||
--offcanvas-padding-x: 1rem;
|
||||
--offcanvas-padding-y: 1rem;
|
||||
|
||||
/* ===== NAVBAR ===== */
|
||||
--navbar-padding-x: 1rem;
|
||||
--navbar-padding-y: 0.5rem;
|
||||
--navbar-color: var(--nav-text-color);
|
||||
--navbar-active-color: var(--mainmenu-nav-link-color);
|
||||
--navbar-disabled-color: #6c757d;
|
||||
--navbar-brand-padding-y: 0.3125rem;
|
||||
--navbar-brand-margin-end: 1rem;
|
||||
--navbar-brand-font-size: 1.25rem;
|
||||
--navbar-brand-color: var(--nav-text-color);
|
||||
--navbar-brand-active-color: var(--mainmenu-nav-link-color);
|
||||
--navbar-nav-link-padding-x: 0.5rem;
|
||||
--navbar-toggler-padding-y: 0.25rem;
|
||||
--navbar-toggler-padding-x: 0.75rem;
|
||||
--navbar-toggler-font-size: 1.25rem;
|
||||
--navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
|
||||
--navbar-toggler-border-radius: 0.25rem;
|
||||
--navbar-toggler-focus-width: 0.25rem;
|
||||
--navbar-toggler-transition: box-shadow 0.15s ease-in-out;
|
||||
--nav-link-padding-x: 1rem;
|
||||
--nav-link-padding-y: 0.5rem;
|
||||
--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;
|
||||
|
||||
/* ===== 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';
|
||||
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
|
||||
--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;
|
||||
--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;
|
||||
|
||||
/* ===== LAYOUT & SPACING ===== */
|
||||
--padding-x: 1rem;
|
||||
--padding-y: 1rem;
|
||||
--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);
|
||||
--border: 5px;
|
||||
|
||||
/* ===== BREAKPOINTS ===== */
|
||||
--bp-xs: 0;
|
||||
--bp-sm: 576px;
|
||||
--bp-md: 768px;
|
||||
--bp-lg: 992px;
|
||||
--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;
|
||||
|
||||
/* ===== STANDARD COLORS ===== */
|
||||
--blue: #91a4ff;
|
||||
--indigo: #b19cff;
|
||||
--purple: #c0a5ff;
|
||||
--pink: #ff8fc0;
|
||||
--red: #ff7a73;
|
||||
--orange: #ff9c4d;
|
||||
--yellow: #ffd166;
|
||||
--green: #78d694;
|
||||
--teal: #76e3ff;
|
||||
--cyan: #6fb7ff;
|
||||
--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;
|
||||
--white-rgb: 255, 255, 255;
|
||||
--black-rgb: 0, 0, 0;
|
||||
|
||||
/* ===== HEADER BACKGROUND ===== */
|
||||
/* Background image for header section (same as light mode) */
|
||||
--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg');
|
||||
--header-background-attachment: fixed;
|
||||
--header-background-repeat: repeat;
|
||||
@@ -98,7 +242,7 @@
|
||||
--container-top-b-border: ;
|
||||
--container-top-b-border-radius: ;
|
||||
|
||||
/* Table of Contents Container */
|
||||
/* TOC Container */
|
||||
--container-toc-bg: ;
|
||||
--container-toc-color: #dbe3ff;
|
||||
|
||||
@@ -132,98 +276,11 @@
|
||||
--container-bottom-b-border: ;
|
||||
--container-bottom-b-border-radius: ;
|
||||
|
||||
/* ===== BOOTSTRAP 5 COLOR PALETTE (Dark Mode) ===== */
|
||||
/* Lightened colors for dark mode visibility */
|
||||
--blue: #91a4ff;
|
||||
--black: #000;
|
||||
--indigo: #b19cff;
|
||||
--purple: #c0a5ff;
|
||||
--pink: #ff8fc0;
|
||||
--red: #ff7a73;
|
||||
--orange: #ff9c4d;
|
||||
--yellow: #ffd166;
|
||||
--green: #78d694;
|
||||
--teal: #76e3ff;
|
||||
--cyan: #6fb7ff;
|
||||
--white: #fff;
|
||||
|
||||
/* Gray scale tuned for dark mode */
|
||||
--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;
|
||||
|
||||
/* Contextual colors (adjusted for dark backgrounds) */
|
||||
--primary: #010156;
|
||||
--secondary: #48525d;
|
||||
--success: #4aa664;
|
||||
--info: #4f7aa0;
|
||||
--warning: #c77a00;
|
||||
--danger: #c23a31;
|
||||
--light: #1b2027;
|
||||
--dark: #0f1318;
|
||||
|
||||
/* ===== BODY & TYPOGRAPHY ===== */
|
||||
--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
|
||||
--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;
|
||||
|
||||
/* ===== ADDITIONAL THEME COLORS ===== */
|
||||
--muted-color: #6d757e;
|
||||
--hr-color: var(--border-color, #dfe3e7);
|
||||
--link-active-color: var(--link-color);
|
||||
--code-color: #ff7abd;
|
||||
--code-color-ink: var(--code-color, #e93f8e);
|
||||
--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);
|
||||
|
||||
--emphasis-color: #fff;
|
||||
--emphasis-color-rgb: 255, 255, 255;
|
||||
|
||||
--secondary-color: #e6ebf1bf;
|
||||
--secondary-color-rgb: 230, 235, 241;
|
||||
--secondary-bg: #151b22;
|
||||
--secondary-bg-rgb: 21, 27, 34;
|
||||
|
||||
--tertiary-color: #e6ebf180;
|
||||
--tertiary-color-rgb: 230, 235, 241;
|
||||
--tertiary-bg: #10151b;
|
||||
--tertiary-bg-rgb: 16, 21, 27;
|
||||
|
||||
--heading-color: #f1f5f9;
|
||||
|
||||
--link-color: #8ab4f8;
|
||||
--link-color-rgb: 138, 180, 248;
|
||||
--link-decoration: underline;
|
||||
--link-hover-color: #c3d6ff;
|
||||
--link-hover-color-rgb: 195, 214, 255;
|
||||
|
||||
--highlight-color: #111;
|
||||
--highlight-bg: #ffe28a1a;
|
||||
|
||||
/* ===== BORDERS & SHADOWS ===== */
|
||||
--border: 5px;
|
||||
/* ===== BORDERS ===== */
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border-color: #2b323b;
|
||||
--border-color-translucent: #ffffff26;
|
||||
|
||||
--border-radius: .25rem;
|
||||
--border-radius-sm: .2rem;
|
||||
--border-radius-lg: .3rem;
|
||||
@@ -231,72 +288,34 @@
|
||||
--border-radius-xxl: 2rem;
|
||||
--border-radius-pill: 50rem;
|
||||
|
||||
/* ===== SHADOWS ===== */
|
||||
--box-shadow: 0 .5rem 1rem #00000066;
|
||||
--box-shadow-sm: 0 .125rem .25rem #00000040;
|
||||
--box-shadow-lg: 0 1rem 3rem #00000080;
|
||||
--box-shadow-inset: inset 0 1px 2px #00000040;
|
||||
|
||||
/* ===== FORM COLORS ===== */
|
||||
/* ===== 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;
|
||||
|
||||
/* Offcanvas (moved from template.css) */
|
||||
--offcanvas-color: var(--body-color);
|
||||
--offcanvas-padding-x: 1rem;
|
||||
--offcanvas-padding-y: 1rem;
|
||||
|
||||
/* Navbar */
|
||||
--navbar-padding-x: 1rem;
|
||||
--navbar-padding-y: 0.5rem;
|
||||
--navbar-color: var(--nav-text-color);
|
||||
--navbar-active-color: var(--mainmenu-nav-link-color);
|
||||
--navbar-disabled-color: #6c757d;
|
||||
--navbar-brand-padding-y: 0.3125rem;
|
||||
--navbar-brand-margin-end: 1rem;
|
||||
--navbar-brand-font-size: 1.25rem;
|
||||
--navbar-brand-color: var(--nav-text-color);
|
||||
--navbar-brand-active-color: var(--mainmenu-nav-link-color);
|
||||
--navbar-nav-link-padding-x: 0.5rem;
|
||||
--navbar-toggler-padding-y: 0.25rem;
|
||||
--navbar-toggler-padding-x: 0.75rem;
|
||||
--navbar-toggler-font-size: 1.25rem;
|
||||
--navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
|
||||
--navbar-toggler-border-radius: 0.25rem;
|
||||
--navbar-toggler-focus-width: 0.25rem;
|
||||
--navbar-toggler-transition: box-shadow 0.15s ease-in-out;
|
||||
--nav-link-padding-x: 1rem;
|
||||
--nav-link-padding-y: 0.5rem;
|
||||
--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;
|
||||
|
||||
/* Responsive tokens */
|
||||
--nav-toggle-size: 3rem;
|
||||
--bp-xs: 0;
|
||||
--bp-sm: 576px;
|
||||
--bp-md: 768px;
|
||||
--bp-lg: 992px;
|
||||
--bp-xl: 1200px;
|
||||
|
||||
/* Utility opacity defaults */
|
||||
--bg-opacity: 1;
|
||||
|
||||
/* Layout padding */
|
||||
--padding-x: 1rem;
|
||||
--padding-y: 1rem;
|
||||
|
||||
/* Button utilities */
|
||||
/* ===== BUTTONS ===== */
|
||||
--btn-border-radius: var(--border-radius);
|
||||
--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* Card variables */
|
||||
/* ===== CARDS ===== */
|
||||
--card-spacer-y: 1rem;
|
||||
--card-spacer-x: 1rem;
|
||||
--card-title-spacer-y: 0.5rem;
|
||||
@@ -315,7 +334,8 @@
|
||||
--card-img-overlay-padding: 1rem;
|
||||
--card-group-margin: 0.75rem;
|
||||
|
||||
/* VirtueMart surfaces */
|
||||
/* ===== VIRTUEMART (VM) ===== */
|
||||
/* VM Surfaces */
|
||||
--vm-surface: var(--secondary-bg);
|
||||
--vm-surface-2: var(--tertiary-bg);
|
||||
--vm-text: var(--body-color);
|
||||
@@ -324,13 +344,13 @@
|
||||
--vm-border: var(--border-color);
|
||||
--vm-price-color: var(--success);
|
||||
|
||||
/* VM layout and density */
|
||||
/* VM Layout and Density */
|
||||
--vm-container-max-width: 1200px;
|
||||
--vm-section-gap: 2rem;
|
||||
--vm-block-radius: var(--border-radius);
|
||||
--vm-block-shadow: var(--box-shadow-sm);
|
||||
|
||||
/* VM typography */
|
||||
/* VM Typography */
|
||||
--vm-category-title-size: 2rem;
|
||||
--vm-subcategory-title-size: 1.5rem;
|
||||
--vm-page-title-size: 1.75rem;
|
||||
@@ -342,19 +362,19 @@
|
||||
--vm-price-detail-size: 1.125rem;
|
||||
--vm-price-desc-size: 0.875rem;
|
||||
|
||||
/* VM controls */
|
||||
/* VM Controls */
|
||||
--vm-input-radius: var(--border-radius);
|
||||
--vm-input-shadow: var(--box-shadow-sm);
|
||||
--vm-qty-width: 80px;
|
||||
--vm-cart-dropdown-min-width: 300px;
|
||||
|
||||
/* VM alerts */
|
||||
/* VM Alerts */
|
||||
--vm-alert-radius: var(--border-radius);
|
||||
--vm-alert-shadow: var(--box-shadow-sm);
|
||||
--vm-availability-bg: var(--success-bg-subtle);
|
||||
--vm-availability-text: var(--success);
|
||||
|
||||
/* VM buttons */
|
||||
/* VM Buttons */
|
||||
--vm-btn-padding-x: 1rem;
|
||||
--vm-btn-padding-y: 0.5rem;
|
||||
--vm-btn-radius: var(--border-radius);
|
||||
@@ -366,7 +386,7 @@
|
||||
--vm-btn-secondary-text: #ffffff;
|
||||
--vm-btn-secondary-border: var(--secondary);
|
||||
|
||||
/* VM image overlay controls */
|
||||
/* VM Image Overlay Controls */
|
||||
--vm-image-overlay-gap-x: 0.5rem;
|
||||
--vm-image-overlay-gap-y: 0.5rem;
|
||||
--vm-image-overlay-raise: 0.25rem;
|
||||
@@ -379,7 +399,7 @@
|
||||
--vm-image-overlay-btn-color: var(--body-color);
|
||||
--vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* VM vendor menu tokens */
|
||||
/* VM Vendor Menu */
|
||||
--vm-vendor-menu-bg: var(--secondary-bg);
|
||||
--vm-vendor-menu-border: var(--border-color);
|
||||
--vm-vendor-menu-radius: var(--border-radius);
|
||||
@@ -393,7 +413,7 @@
|
||||
--vm-vendor-menu-link-active: var(--primary);
|
||||
--vm-vendor-menu-hover-bg: var(--tertiary-bg);
|
||||
|
||||
/* Gable colors */
|
||||
/* ===== GABLE ===== */
|
||||
--gab-blue: #4d9fff;
|
||||
--gab-green: #5cb85c;
|
||||
--gab-red: #ff6b6b;
|
||||
|
||||
Reference in New Issue
Block a user
--body-font-familyhas an extra closing parenthesis at the end of the font stack. When used (e.g.font-family: var(--body-font-family)), this can invalidate the property and cause fallback fonts to be used instead. Remove the trailing)so the variable value is a valid font-family list.