From 4a0d6df02d26ed85c2ab4761eb6904f29fe241f2 Mon Sep 17 00:00:00 2001 From: Jonathan Miller Date: Sat, 18 Apr 2026 17:16:59 -0500 Subject: [PATCH] Reorder theme files + sync script rebuilds custom vars in standard order MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Standard themes reorganized: Foundation → Layout → Navigation → Forms → Components (alphabetical) → Bootstrap → Custom → Extensions Sync script now fully rebuilds the custom file's :root block in starter file order, preserving user values while reordering. Missing variables are inserted at their correct position. Bump 03.10.04 Co-Authored-By: Claude Opus 4.6 (1M context) --- README.md | 4 +- src/joomla.asset.json | 2 +- src/media/css/theme/dark.standard.css | 1178 +++++++++++++----------- src/media/css/theme/light.standard.css | 1176 ++++++++++++----------- src/sync_custom_vars.php | 120 ++- src/templateDetails.xml | 4 +- updates.xml | 26 +- 7 files changed, 1354 insertions(+), 1156 deletions(-) diff --git a/README.md b/README.md index 9b54d7a..162ec03 100644 --- a/README.md +++ b/README.md @@ -9,13 +9,13 @@ INGROUP: MokoCassiopeia.Documentation REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia FILE: ./README.md - VERSION: 03.10.03 + VERSION: 03.10.04 BRIEF: Documentation for MokoCassiopeia template --> # MokoCassiopeia → MokoOnyx -> **This template is being renamed to MokoOnyx.** Version 03.10.03 is the bridge release that automatically migrates your settings. After updating, MokoOnyx will be your active template and MokoCassiopeia can be safely uninstalled. +> **This template is being renamed to MokoOnyx.** Version 03.10.04 is the bridge release that automatically migrates your settings. After updating, MokoOnyx will be your active template and MokoCassiopeia can be safely uninstalled. **A Modern, Lightweight Joomla Template Based on Cassiopeia** diff --git a/src/joomla.asset.json b/src/joomla.asset.json index 1d58434..f15a65f 100644 --- a/src/joomla.asset.json +++ b/src/joomla.asset.json @@ -17,7 +17,7 @@ "defgroup": "Joomla.Template.Site", "ingroup": "MokoCassiopeia.Template.Assets", "path": "./media/templates/site/mokocassiopeia/joomla.asset.json", - "version": "03.10.03", + "version": "03.10.04", "brief": "Joomla asset registry for MokoCassiopeia" } }, diff --git a/src/media/css/theme/dark.standard.css b/src/media/css/theme/dark.standard.css index 0b2cab7..8ccce6b 100644 --- a/src/media/css/theme/dark.standard.css +++ b/src/media/css/theme/dark.standard.css @@ -12,26 +12,144 @@ :root[data-bs-theme='dark']{ color-scheme: dark; + /* ===== BRAND & THEME COLORS ===== */ --color-primary: #112855; --accent-color-primary: #3f8ff0; --accent-color-secondary: #6fb3ff; + +/* ===== 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: black; +--code-color-ink: var(--code-color, #e93f8e); +--code-bg-color: lightgreen; +--highlight-color: #111; +--highlight-bg: #ffe28a1a; + + +/* ===== 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; + + +/* ===== OPACITY UTILITIES ===== */ +--opacity-0: 0; +--opacity-5: 0.05; +--opacity-10: 0.1; +--opacity-15: 0.15; +--opacity-20: 0.2; +--opacity-25: 0.25; +--opacity-30: 0.3; +--opacity-50: 0.5; +--opacity-75: 0.75; +--opacity-100: 1; + + +/* ===== LAYOUT & SPACING ===== */ +--padding-x: 0.15rem; +--padding-y: 0.15rem; +--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; + + +/* ===== 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; + + +/* ===== COMMON SHADOW COLORS ===== */ +--shadow-color-light: rgba(var(--black-rgb), var(--opacity-30)); +--shadow-color-medium: rgba(var(--black-rgb), var(--opacity-50)); +--shadow-color-dark: rgba(var(--black-rgb), var(--opacity-75)); +--border-color-translucent: rgba(var(--white-rgb), var(--opacity-10)); +--highlight-translucent: rgba(var(--white-rgb), var(--opacity-5)); + + /* ===== 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); ---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); /* ===== NAVBAR ===== */ --navbar-padding-x: 1rem; @@ -59,135 +177,18 @@ color-scheme: dark; --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: #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: black; ---code-color-ink: var(--code-color, #e93f8e); ---code-bg-color: lightgreen; ---highlight-color: #111; ---highlight-bg: #ffe28a1a; -/* ===== LAYOUT & SPACING ===== */ ---padding-x: 0.15rem; ---padding-y: 0.15rem; ---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; +/* ===== 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); -/* ===== 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; - -/* ===== ALERT LINK COLORS ===== */ ---alert-primary-link-color: #b3c1ff; ---alert-secondary-link-color: #9fa6ad; ---alert-success-link-color: #a0e5b3; ---alert-info-link-color: #8eccf2; ---alert-warning-link-color: #ffe4a0; ---alert-danger-link-color: #ffa8a3; ---alert-light-link-color: #f0f4f8; ---alert-dark-link-color: #9fa6ad; - -/* ===== LIST GROUP ITEM COLORS ===== */ ---list-group-item-primary-color: #8ca3ff; ---list-group-item-primary-bg: #1a2550; ---list-group-item-primary-active-bg: #223066; ---list-group-item-secondary-color: #9fa6ad; ---list-group-item-secondary-bg: #2b323b; ---list-group-item-secondary-active-bg: #363d47; ---list-group-item-success-color: #a0e5b3; ---list-group-item-success-bg: #1e3d2d; ---list-group-item-success-active-bg: #275538; ---list-group-item-info-color: #8eccf2; ---list-group-item-info-bg: #1a3448; ---list-group-item-info-active-bg: #234459; ---list-group-item-warning-color: #ffe4a0; ---list-group-item-warning-bg: #4a3410; ---list-group-item-warning-active-bg: #5c4216; ---list-group-item-danger-color: #ffa8a3; ---list-group-item-danger-bg: #4a1e1c; ---list-group-item-danger-active-bg: #5c2823; ---list-group-item-light-color: #e9ecef; ---list-group-item-light-bg: #1e2430; ---list-group-item-light-active-bg: #282f3d; ---list-group-item-dark-color: #48525d; ---list-group-item-dark-bg: #0e1318; ---list-group-item-dark-active-bg: #161b22; /* ===== LINK UTILITY COLORS ===== */ --link-primary-color: hsl(240, 98%, 50%); @@ -207,85 +208,6 @@ color-scheme: dark; --link-dark-color: hsl(210, 10%, 35%); --link-dark-hover-color: hsl(210, 10%, 30%); -/* ===== COMPONENT-SPECIFIC COLORS ===== */ ---mod-finder-link-hover: #5a6470; ---form-legend-color: #9fa6ad; ---border-gray: #3a4250; ---subhead-color: #9fa6ad; ---box-shadow-gray: #1a2027; ---btn-active-text-gray: #7a8490; ---indicator-success-bg: var(--success); ---item-list-color: #2a2f34; ---notification-badge-bg: var(--danger); ---content-bg-gray: #2b323b; ---taba-btn-green: #5a9c2f; ---taba-btn-blue: #3d75a8; ---taba-btn-red: #c43620; ---taba-btn-gray: #6a7080; ---taba-msg-bg: #1e2430; ---toc-link-color: #9fa6ad; ---toc-link-active-color: #91a4ff; ---choices-disabled-bg: #2b323b; ---choices-input-bg: var(--body-bg); ---choices-border-light: #48525d; ---choices-arrow-color: #9fa6ad; ---choices-inner-bg: #1a2027; ---choices-focused-border: #5472ff; ---choices-dropdown-bg: var(--body-bg); ---choices-item-bg: #1a5f75; ---choices-item-border: #1a748f; ---choices-item-hover-bg: #1a748f; ---choices-item-hover-border: #1a8aa8; ---choices-item-disabled-bg: #48525d; ---choices-item-disabled-border: #36404a; ---choices-item-highlighted: #2b323b; ---choices-input-inner-bg: #1a2027; - -/* ===== 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; - -/* ===== OPACITY UTILITIES ===== */ ---opacity-0: 0; ---opacity-5: 0.05; ---opacity-10: 0.1; ---opacity-15: 0.15; ---opacity-20: 0.2; ---opacity-25: 0.25; ---opacity-30: 0.3; ---opacity-50: 0.5; ---opacity-75: 0.75; ---opacity-100: 1; - -/* ===== COMMON SHADOW COLORS ===== */ ---shadow-color-light: rgba(var(--black-rgb), var(--opacity-30)); ---shadow-color-medium: rgba(var(--black-rgb), var(--opacity-50)); ---shadow-color-dark: rgba(var(--black-rgb), var(--opacity-75)); ---border-color-translucent: rgba(var(--white-rgb), var(--opacity-10)); ---highlight-translucent: rgba(var(--white-rgb), var(--opacity-5)); /* ===== HEADER BACKGROUND ===== */ --header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); @@ -293,6 +215,7 @@ color-scheme: dark; --header-background-repeat: repeat; --header-background-size: auto; + /* ===== CONTAINER BACKGROUNDS ===== */ /* Below Topbar Container */ --container-below-topbar-bg-image: none; @@ -358,24 +281,6 @@ color-scheme: dark; --container-bottom-b-border: none; --container-bottom-b-border-radius: 0; -/* ===== 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; @@ -396,10 +301,85 @@ color-scheme: dark; --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); + +/* ===== ACCORDION ===== */ +--accordion-color: var(--body-color); +--accordion-bg: var(--body-bg); +--accordion-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, border-radius 0.15s ease; +--accordion-border-color: var(--border-color); +--accordion-border-width: 1px; +--accordion-border-radius: 0.25rem; +--accordion-inner-border-radius: calc(0.25rem - 1px); +--accordion-btn-padding-x: 1.25rem; +--accordion-btn-padding-y: 1rem; +--accordion-btn-color: var(--body-color); +--accordion-btn-bg: var(--accordion-bg); +--accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e6ebf1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); +--accordion-btn-icon-width: 1.25rem; +--accordion-btn-icon-transform: rotate(-180deg); +--accordion-btn-icon-transition: transform 0.2s ease-in-out; +--accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ab4f8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); +--accordion-btn-focus-border-color: var(--input-focus-border-color); +--accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); +--accordion-body-padding-x: 1.25rem; +--accordion-body-padding-y: 1rem; +--accordion-active-color: var(--link-color); +--accordion-active-bg: var(--secondary-bg); + + +/* ===== ALERT ===== */ +--alert-bg: transparent; +--alert-padding-x: 1rem; +--alert-padding-y: 1rem; +--alert-margin-bottom: 1rem; +--alert-color: #000; +--alert-border-color: transparent; +--alert-border: 1px solid var(--alert-border-color); +--alert-border-radius: 0.25rem; + + +/* ===== ALERT LINK COLORS ===== */ +--alert-primary-link-color: #b3c1ff; +--alert-secondary-link-color: #9fa6ad; +--alert-success-link-color: #a0e5b3; +--alert-info-link-color: #8eccf2; +--alert-warning-link-color: #ffe4a0; +--alert-danger-link-color: #ffa8a3; +--alert-light-link-color: #f0f4f8; +--alert-dark-link-color: #9fa6ad; + + +/* ===== BACKDROP ===== */ +--backdrop-zindex: 1040; +--backdrop-bg: hsl(0, 0%, 0%); +--backdrop-opacity: 0.5; + + +/* ===== BADGE ===== */ +--badge-padding-x: 0.65em; +--badge-padding-y: 0.35em; +--badge-font-size: 0.75em; +--badge-font-weight: 700; +--badge-color: var(--body-color); +--badge-border-radius: 0.25rem; + + +/* ===== BREADCRUMB ===== */ +--breadcrumb-padding-x: 0; +--breadcrumb-padding-y: 0; +--breadcrumb-margin-bottom: 1rem; +--breadcrumb-bg: ; +--breadcrumb-border-radius: ; +--breadcrumb-divider-color: var(--gray-600); +--breadcrumb-item-padding-x: 0.5rem; +--breadcrumb-item-active-color: var(--link-color); + + /* ===== CARDS ===== */ --card-spacer-y: 1rem; --card-spacer-x: 1rem; @@ -419,6 +399,406 @@ color-scheme: dark; --card-img-overlay-padding: 1rem; --card-group-margin: 0.75rem; + +/* ===== DROPDOWN ===== */ +--dropdown-zindex: 1000; +--dropdown-min-width: 10rem; +--dropdown-padding-x: 0; +--dropdown-padding-y: 0.5rem; +--dropdown-spacer: 0.125rem; +--dropdown-font-size: 1rem; +--dropdown-color: var(--body-color); +--dropdown-bg: var(--secondary-bg); +--dropdown-border-color: var(--border-color-translucent); +--dropdown-border-radius: 0.25rem; +--dropdown-border-width: 1px; +--dropdown-inner-border-radius: calc(0.25rem - 1px); +--dropdown-divider-bg: var(--border-color-translucent); +--dropdown-divider-margin-y: 0.5rem; +--dropdown-box-shadow: 0 0.5rem 1rem var(--shadow-color-medium); +--dropdown-link-color: var(--body-color); +--dropdown-link-active-color: var(--body-color); +--dropdown-link-active-bg: hsl(240, 98%, 17%); +--dropdown-link-disabled-color: var(--gray-600); +--dropdown-item-padding-x: 1rem; +--dropdown-item-padding-y: 0.25rem; +--dropdown-header-color: var(--gray-600); +--dropdown-header-padding-x: 1rem; +--dropdown-header-padding-y: 0.5rem; + + +/* ===== LIST GROUP ===== */ +--list-group-color: var(--body-color); +--list-group-bg: var(--secondary-bg); +--list-group-border-color: rgba(var(--white-rgb), 0.125); +--list-group-border-width: 1px; +--list-group-border-radius: 0.25rem; +--list-group-item-padding-x: 1rem; +--list-group-item-padding-y: 0.5rem; +--list-group-action-color: var(--gray-800); +--list-group-action-active-color: var(--body-color); +--list-group-action-active-bg: var(--tertiary-bg); +--list-group-disabled-color: var(--gray-600); +--list-group-disabled-bg: var(--secondary-bg); +--list-group-active-color: var(--body-color); +--list-group-active-bg: hsl(240, 98%, 17%); +--list-group-active-border-color: hsl(240, 98%, 17%); + + +/* ===== LIST GROUP ITEM COLORS ===== */ +--list-group-item-primary-color: #8ca3ff; +--list-group-item-primary-bg: #1a2550; +--list-group-item-primary-active-bg: #223066; +--list-group-item-secondary-color: #9fa6ad; +--list-group-item-secondary-bg: #2b323b; +--list-group-item-secondary-active-bg: #363d47; +--list-group-item-success-color: #a0e5b3; +--list-group-item-success-bg: #1e3d2d; +--list-group-item-success-active-bg: #275538; +--list-group-item-info-color: #8eccf2; +--list-group-item-info-bg: #1a3448; +--list-group-item-info-active-bg: #234459; +--list-group-item-warning-color: #ffe4a0; +--list-group-item-warning-bg: #4a3410; +--list-group-item-warning-active-bg: #5c4216; +--list-group-item-danger-color: #ffa8a3; +--list-group-item-danger-bg: #4a1e1c; +--list-group-item-danger-active-bg: #5c2823; +--list-group-item-light-color: #e9ecef; +--list-group-item-light-bg: #1e2430; +--list-group-item-light-active-bg: #282f3d; +--list-group-item-dark-color: #48525d; +--list-group-item-dark-bg: #0e1318; +--list-group-item-dark-active-bg: #161b22; + + +/* ===== MODAL ===== */ +--modal-zindex: 1050; +--modal-width: 500px; +--modal-padding: 1rem; +--modal-margin: 0.5rem; +--modal-color: ; +--modal-bg: var(--secondary-bg); +--modal-border-color: var(--border-color-translucent); +--modal-border-width: 1px; +--modal-border-radius: 0.3rem; +--modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3); +--modal-inner-border-radius: calc(0.3rem - 1px); +--modal-header-padding-x: 1rem; +--modal-header-padding-y: 1rem; +--modal-header-padding: 1rem 1rem; +--modal-header-border-color: var(--border-color); +--modal-header-border-width: 1px; +--modal-title-line-height: 1.5; +--modal-footer-gap: 0.5rem; +--modal-footer-bg: ; +--modal-footer-border-color: var(--border-color); +--modal-footer-border-width: 1px; + + +/* ===== NAV TABS ===== */ +--nav-tabs-border-width: 1px; +--nav-tabs-border-color: var(--border-color); +--nav-tabs-border-radius: 0.25rem; +--nav-tabs-link-active-color: var(--body-color); +--nav-tabs-link-active-bg: var(--secondary-bg); +--nav-tabs-link-active-border-color: var(--border-color) var(--border-color) var(--secondary-bg); + + +/* ===== NAV PILLS ===== */ +--nav-pills-border-radius: 0.25rem; +--nav-pills-link-active-color: var(--body-color); +--nav-pills-link-active-bg: hsl(240, 98%, 17%); + + +/* ===== OFFCANVAS ===== */ +--offcanvas-zindex: 1045; +--offcanvas-width: 400px; +--offcanvas-height: 30vh; +--offcanvas-padding-x: 1rem; +--offcanvas-padding-y: 1rem; +--offcanvas-color: var(--body-color); +--offcanvas-bg: var(--body-bg); +--offcanvas-border-width: 1px; +--offcanvas-border-color: var(--border-color-translucent); +--offcanvas-box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3); + + +/* ===== PAGINATION ===== */ +--pagination-padding-x: 0.75rem; +--pagination-padding-y: 0.375rem; +--pagination-font-size: 1rem; +--pagination-color: var(--link-color); +--pagination-bg: var(--secondary-bg); +--pagination-border-width: 1px; +--pagination-border-color: var(--border-color); +--pagination-border-radius: 0.25rem; +--pagination-focus-color: var(--link-active-color); +--pagination-focus-bg: var(--tertiary-bg); +--pagination-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); +--pagination-active-color: var(--body-color); +--pagination-active-bg: hsl(240, 98%, 17%); +--pagination-active-border-color: hsl(240, 98%, 17%); +--pagination-disabled-color: var(--gray-600); +--pagination-disabled-bg: var(--secondary-bg); +--pagination-disabled-border-color: var(--border-color); + + +/* ===== POPOVER ===== */ +--popover-zindex: 1060; +--popover-max-width: 276px; +--popover-font-size: 0.875rem; +--popover-bg: var(--secondary-bg); +--popover-border-width: 1px; +--popover-border-color: var(--border-color-translucent); +--popover-border-radius: 0.3rem; +--popover-inner-border-radius: calc(0.3rem - 1px); +--popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); +--popover-header-padding-x: 1rem; +--popover-header-padding-y: 0.5rem; +--popover-header-font-size: 1rem; +--popover-header-color: ; +--popover-header-bg: var(--tertiary-bg); +--popover-body-padding-x: 1rem; +--popover-body-padding-y: 1rem; +--popover-body-color: var(--body-color); +--popover-arrow-width: 1rem; +--popover-arrow-height: 0.5rem; +--popover-arrow-border: var(--popover-border-color); + + +/* ===== PROGRESS ===== */ +--progress-height: 1rem; +--progress-font-size: 0.75rem; +--progress-bg: var(--secondary-bg); +--progress-border-radius: 0.25rem; +--progress-box-shadow: inset 0 1px 2px rgba(var(--black-rgb), 0.3); +--progress-bar-color: var(--body-color); +--progress-bar-bg: hsl(240, 98%, 40%); +--progress-bar-transition: width 0.6s ease; + + +/* ===== SPINNER ===== */ +--spinner-width: 2rem; +--spinner-height: 2rem; +--spinner-vertical-align: -0.125em; +--spinner-border-width: 0.25em; +--spinner-animation-speed: 0.75s; + + +/* ===== TABLE ===== */ +--table-color: var(--body-color); +--table-bg: transparent; +--table-border-color: var(--border-color); +--table-accent-bg: transparent; +--table-striped-color: var(--body-color); +--table-striped-bg: rgba(var(--white-rgb), var(--opacity-5)); +--table-active-color: var(--body-color); +--table-active-bg: rgba(var(--white-rgb), 0.1); + + +/* ===== TOAST ===== */ +--toast-zindex: 1090; +--toast-padding-x: 0.75rem; +--toast-padding-y: 0.5rem; +--toast-spacing: 1em; +--toast-max-width: 350px; +--toast-font-size: 0.875rem; +--toast-color: ; +--toast-bg: rgba(21, 27, 34, 0.9); +--toast-border-width: 1px; +--toast-border-color: var(--border-color-translucent); +--toast-border-radius: 0.25rem; +--toast-box-shadow: 0 0.5rem 1rem var(--shadow-color-medium); +--toast-header-color: var(--gray-600); +--toast-header-bg: rgba(21, 27, 34, 0.85); +--toast-header-border-color: rgba(var(--white-rgb), var(--opacity-10)); + + +/* ===== TOOLTIP ===== */ +--tooltip-zindex: 1070; +--tooltip-max-width: 200px; +--tooltip-padding-x: 0.5rem; +--tooltip-padding-y: 0.25rem; +--tooltip-margin: ; +--tooltip-font-size: 0.875rem; +--tooltip-color: var(--body-color); +--tooltip-bg: hsl(0, 0%, 0%); +--tooltip-border-radius: 0.25rem; +--tooltip-opacity: 0.9; +--tooltip-arrow-width: 0.8rem; +--tooltip-arrow-height: 0.4rem; + + +/* ===== 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; + + +/* ===== HERO / BANNER OVERLAY ===== */ +--hero-height: 70vh; +--hero-color: var(--body-color); +--hero-bg-repeat: no-repeat; +--hero-bg-attachment: fixed; +--hero-bg-position: top center; +--hero-bg-size: cover; +--hero-border-bottom: solid var(--accent-color-secondary); +--hero-overlay-bg: hsla(0, 0%, 0%, 0.3); +--hero-overlay-bg-position: center; +--hero-overlay-bg-size: cover; +--hero-overlay-padding: 1em; +--hero-overlay-text-align: center; +--hero-overlay-text-color: var(--body-color); + + +/* ===== HERO VARIANTS ===== */ +/* Primary — deep navy, dark overlay */ +--hero-primary-bg-color: #0d1e3a; +--hero-primary-overlay: linear-gradient(rgba(13, 30, 58, .65), rgba(13, 30, 58, .65)); +--hero-primary-color: #f1f5f9; + +/* Secondary — darker navy, heavier overlay */ +--hero-secondary-bg-color: #080f1e; +--hero-secondary-overlay: linear-gradient(rgba(8, 15, 30, .80), rgba(8, 15, 30, .80)); +--hero-secondary-color: #f1f5f9; + + +/* ===== HERO CARD (inner .hero element) ===== */ +/* Default card — uses primary variant values */ +--hero-card-bg: var(--hero-primary-bg-color); +--hero-card-color: white; +--hero-card-overlay: var(--hero-primary-overlay); +--hero-card-border-radius: .5rem; +--hero-card-padding-x: 2rem; +--hero-card-padding-y: 3rem; +--hero-card-max-width: 800px; + +/* Alternative card — uses secondary variant values */ +--hero-alt-card-bg: var(--hero-secondary-bg-color); +--hero-alt-card-color: var(--hero-secondary-color); +--hero-alt-card-overlay: var(--hero-secondary-overlay); +--hero-alt-card-border-radius: .5rem; +--hero-alt-card-padding-x: 2rem; +--hero-alt-card-padding-y: 3rem; +--hero-alt-card-max-width: 600px; + + +/* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */ +--block-color-1: var(--secondary-bg); +--block-text-1: var(--body-color); + +--block-color-2: var(--accent-color-primary); +--block-text-2: #fff; + +--block-color-3: rgba(238, 194, 52, .15); +--block-text-3: var(--body-color); + +--block-color-4: rgba(74, 166, 100, .15); +--block-text-4: var(--body-color); + + +/* ===== BLOCK COLOR OVERRIDES ===== */ +--block-highlight-bg: var(--accent-color-primary); +--block-highlight-text: #fff; + +--block-cta-bg: var(--color-primary); +--block-cta-text: #f1f5f9; + +--block-alert-bg: var(--danger, #c23a31); +--block-alert-text: #fff; + + +/* ===== FOOTER ===== */ +--footer-padding-top: 1rem; +--footer-padding-bottom: 80px; +--footer-grid-padding-y: 2.5rem; +--footer-grid-padding-x: 0.5em; + + +/* ===== THEME FAB ===== */ +--theme-fab-bg: #e6ebf1; +--theme-fab-color: #0e1318; +--theme-fab-btn-bg: transparent; +--theme-fab-border: rgba(0, 0, 0, 0.15); + + +/* ===== OFFLINE PAGE ===== */ +--offline-card-bg: rgba(0, 0, 0, 0.6); + + +/* ===== COMPONENT-SPECIFIC COLORS ===== */ +--mod-finder-link-hover: #5a6470; +--form-legend-color: #9fa6ad; +--border-gray: #3a4250; +--subhead-color: #9fa6ad; +--box-shadow-gray: #1a2027; +--btn-active-text-gray: #7a8490; +--indicator-success-bg: var(--success); +--item-list-color: #2a2f34; +--notification-badge-bg: var(--danger); +--content-bg-gray: #2b323b; +--taba-btn-green: #5a9c2f; +--taba-btn-blue: #3d75a8; +--taba-btn-red: #c43620; +--taba-btn-gray: #6a7080; +--taba-msg-bg: #1e2430; +--toc-link-color: #9fa6ad; +--toc-link-active-color: #91a4ff; +--choices-disabled-bg: #2b323b; +--choices-input-bg: var(--body-bg); +--choices-border-light: #48525d; +--choices-arrow-color: #9fa6ad; +--choices-inner-bg: #1a2027; +--choices-focused-border: #5472ff; +--choices-dropdown-bg: var(--body-bg); +--choices-item-bg: #1a5f75; +--choices-item-border: #1a748f; +--choices-item-hover-bg: #1a748f; +--choices-item-hover-border: #1a8aa8; +--choices-item-disabled-bg: #48525d; +--choices-item-disabled-border: #36404a; +--choices-item-highlighted: #2b323b; +--choices-input-inner-bg: #1a2027; + + /* ===== VIRTUEMART (VM) ===== */ /* VM Surfaces */ --vm-surface: var(--secondary-bg); @@ -498,6 +878,7 @@ color-scheme: dark; --vm-vendor-menu-link-active: var(--primary); --vm-vendor-menu-hover-bg: var(--tertiary-bg); + /* ===== GABLE ===== */ --gab-blue: #4d9fff; --gab-green: #5cb85c; @@ -507,335 +888,6 @@ color-scheme: dark; --gab-gray2: #adb5bd; --gab-gray3: #ced4da; -/* ===== HERO / BANNER OVERLAY ===== */ ---hero-height: 70vh; ---hero-color: var(--body-color); ---hero-bg-repeat: no-repeat; ---hero-bg-attachment: fixed; ---hero-bg-position: top center; ---hero-bg-size: cover; ---hero-border-bottom: solid var(--accent-color-secondary); ---hero-overlay-bg: hsla(0, 0%, 0%, 0.3); ---hero-overlay-bg-position: center; ---hero-overlay-bg-size: cover; ---hero-overlay-padding: 1em; ---hero-overlay-text-align: center; ---hero-overlay-text-color: var(--body-color); - -/* ===== HERO VARIANTS ===== */ -/* Primary — deep navy, dark overlay */ ---hero-primary-bg-color: #0d1e3a; ---hero-primary-overlay: linear-gradient(rgba(13, 30, 58, .65), rgba(13, 30, 58, .65)); ---hero-primary-color: #f1f5f9; - -/* Secondary — darker navy, heavier overlay */ ---hero-secondary-bg-color: #080f1e; ---hero-secondary-overlay: linear-gradient(rgba(8, 15, 30, .80), rgba(8, 15, 30, .80)); ---hero-secondary-color: #f1f5f9; - -/* ===== HERO CARD (inner .hero element) ===== */ -/* Default card — uses primary variant values */ ---hero-card-bg: var(--hero-primary-bg-color); ---hero-card-color: white; ---hero-card-overlay: var(--hero-primary-overlay); ---hero-card-border-radius: .5rem; ---hero-card-padding-x: 2rem; ---hero-card-padding-y: 3rem; ---hero-card-max-width: 800px; - -/* Alternative card — uses secondary variant values */ ---hero-alt-card-bg: var(--hero-secondary-bg-color); ---hero-alt-card-color: var(--hero-secondary-color); ---hero-alt-card-overlay: var(--hero-secondary-overlay); ---hero-alt-card-border-radius: .5rem; ---hero-alt-card-padding-x: 2rem; ---hero-alt-card-padding-y: 3rem; ---hero-alt-card-max-width: 600px; - -/* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */ ---block-color-1: var(--secondary-bg); ---block-text-1: var(--body-color); - ---block-color-2: var(--accent-color-primary); ---block-text-2: #fff; - ---block-color-3: rgba(238, 194, 52, .15); ---block-text-3: var(--body-color); - ---block-color-4: rgba(74, 166, 100, .15); ---block-text-4: var(--body-color); - -/* ===== BLOCK COLOR OVERRIDES ===== */ ---block-highlight-bg: var(--accent-color-primary); ---block-highlight-text: #fff; - ---block-cta-bg: var(--color-primary); ---block-cta-text: #f1f5f9; - ---block-alert-bg: var(--danger, #c23a31); ---block-alert-text: #fff; - -/* ===== OFFCANVAS ===== */ ---offcanvas-zindex: 1045; ---offcanvas-width: 400px; ---offcanvas-height: 30vh; ---offcanvas-padding-x: 1rem; ---offcanvas-padding-y: 1rem; ---offcanvas-color: var(--body-color); ---offcanvas-bg: var(--body-bg); ---offcanvas-border-width: 1px; ---offcanvas-border-color: var(--border-color-translucent); ---offcanvas-box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3); - -/* ===== ACCORDION ===== */ ---accordion-color: var(--body-color); ---accordion-bg: var(--body-bg); ---accordion-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, border-radius 0.15s ease; ---accordion-border-color: var(--border-color); ---accordion-border-width: 1px; ---accordion-border-radius: 0.25rem; ---accordion-inner-border-radius: calc(0.25rem - 1px); ---accordion-btn-padding-x: 1.25rem; ---accordion-btn-padding-y: 1rem; ---accordion-btn-color: var(--body-color); ---accordion-btn-bg: var(--accordion-bg); ---accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e6ebf1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-icon-width: 1.25rem; ---accordion-btn-icon-transform: rotate(-180deg); ---accordion-btn-icon-transition: transform 0.2s ease-in-out; ---accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ab4f8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-focus-border-color: var(--input-focus-border-color); ---accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); ---accordion-body-padding-x: 1.25rem; ---accordion-body-padding-y: 1rem; ---accordion-active-color: var(--link-color); ---accordion-active-bg: var(--secondary-bg); - -/* ===== BREADCRUMB ===== */ ---breadcrumb-padding-x: 0; ---breadcrumb-padding-y: 0; ---breadcrumb-margin-bottom: 1rem; ---breadcrumb-bg: ; ---breadcrumb-border-radius: ; ---breadcrumb-divider-color: var(--gray-600); ---breadcrumb-item-padding-x: 0.5rem; ---breadcrumb-item-active-color: var(--link-color); - -/* ===== PAGINATION ===== */ ---pagination-padding-x: 0.75rem; ---pagination-padding-y: 0.375rem; ---pagination-font-size: 1rem; ---pagination-color: var(--link-color); ---pagination-bg: var(--secondary-bg); ---pagination-border-width: 1px; ---pagination-border-color: var(--border-color); ---pagination-border-radius: 0.25rem; ---pagination-focus-color: var(--link-active-color); ---pagination-focus-bg: var(--tertiary-bg); ---pagination-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); ---pagination-active-color: var(--body-color); ---pagination-active-bg: hsl(240, 98%, 17%); ---pagination-active-border-color: hsl(240, 98%, 17%); ---pagination-disabled-color: var(--gray-600); ---pagination-disabled-bg: var(--secondary-bg); ---pagination-disabled-border-color: var(--border-color); - -/* ===== BADGE ===== */ ---badge-padding-x: 0.65em; ---badge-padding-y: 0.35em; ---badge-font-size: 0.75em; ---badge-font-weight: 700; ---badge-color: var(--body-color); ---badge-border-radius: 0.25rem; - -/* ===== ALERT ===== */ ---alert-bg: transparent; ---alert-padding-x: 1rem; ---alert-padding-y: 1rem; ---alert-margin-bottom: 1rem; ---alert-color: #000; ---alert-border-color: transparent; ---alert-border: 1px solid var(--alert-border-color); ---alert-border-radius: 0.25rem; - -/* ===== PROGRESS ===== */ ---progress-height: 1rem; ---progress-font-size: 0.75rem; ---progress-bg: var(--secondary-bg); ---progress-border-radius: 0.25rem; ---progress-box-shadow: inset 0 1px 2px rgba(var(--black-rgb), 0.3); ---progress-bar-color: var(--body-color); ---progress-bar-bg: hsl(240, 98%, 40%); ---progress-bar-transition: width 0.6s ease; - -/* ===== LIST GROUP ===== */ ---list-group-color: var(--body-color); ---list-group-bg: var(--secondary-bg); ---list-group-border-color: rgba(var(--white-rgb), 0.125); ---list-group-border-width: 1px; ---list-group-border-radius: 0.25rem; ---list-group-item-padding-x: 1rem; ---list-group-item-padding-y: 0.5rem; ---list-group-action-color: var(--gray-800); ---list-group-action-active-color: var(--body-color); ---list-group-action-active-bg: var(--tertiary-bg); ---list-group-disabled-color: var(--gray-600); ---list-group-disabled-bg: var(--secondary-bg); ---list-group-active-color: var(--body-color); ---list-group-active-bg: hsl(240, 98%, 17%); ---list-group-active-border-color: hsl(240, 98%, 17%); - -/* ===== DROPDOWN ===== */ ---dropdown-zindex: 1000; ---dropdown-min-width: 10rem; ---dropdown-padding-x: 0; ---dropdown-padding-y: 0.5rem; ---dropdown-spacer: 0.125rem; ---dropdown-font-size: 1rem; ---dropdown-color: var(--body-color); ---dropdown-bg: var(--secondary-bg); ---dropdown-border-color: var(--border-color-translucent); ---dropdown-border-radius: 0.25rem; ---dropdown-border-width: 1px; ---dropdown-inner-border-radius: calc(0.25rem - 1px); ---dropdown-divider-bg: var(--border-color-translucent); ---dropdown-divider-margin-y: 0.5rem; ---dropdown-box-shadow: 0 0.5rem 1rem var(--shadow-color-medium); ---dropdown-link-color: var(--body-color); ---dropdown-link-active-color: var(--body-color); ---dropdown-link-active-bg: hsl(240, 98%, 17%); ---dropdown-link-disabled-color: var(--gray-600); ---dropdown-item-padding-x: 1rem; ---dropdown-item-padding-y: 0.25rem; ---dropdown-header-color: var(--gray-600); ---dropdown-header-padding-x: 1rem; ---dropdown-header-padding-y: 0.5rem; - -/* ===== TOAST ===== */ ---toast-zindex: 1090; ---toast-padding-x: 0.75rem; ---toast-padding-y: 0.5rem; ---toast-spacing: 1em; ---toast-max-width: 350px; ---toast-font-size: 0.875rem; ---toast-color: ; ---toast-bg: rgba(21, 27, 34, 0.9); ---toast-border-width: 1px; ---toast-border-color: var(--border-color-translucent); ---toast-border-radius: 0.25rem; ---toast-box-shadow: 0 0.5rem 1rem var(--shadow-color-medium); ---toast-header-color: var(--gray-600); ---toast-header-bg: rgba(21, 27, 34, 0.85); ---toast-header-border-color: rgba(var(--white-rgb), var(--opacity-10)); - -/* ===== MODAL ===== */ ---modal-zindex: 1050; ---modal-width: 500px; ---modal-padding: 1rem; ---modal-margin: 0.5rem; ---modal-color: ; ---modal-bg: var(--secondary-bg); ---modal-border-color: var(--border-color-translucent); ---modal-border-width: 1px; ---modal-border-radius: 0.3rem; ---modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3); ---modal-inner-border-radius: calc(0.3rem - 1px); ---modal-header-padding-x: 1rem; ---modal-header-padding-y: 1rem; ---modal-header-padding: 1rem 1rem; ---modal-header-border-color: var(--border-color); ---modal-header-border-width: 1px; ---modal-title-line-height: 1.5; ---modal-footer-gap: 0.5rem; ---modal-footer-bg: ; ---modal-footer-border-color: var(--border-color); ---modal-footer-border-width: 1px; - -/* ===== TOOLTIP ===== */ ---tooltip-zindex: 1070; ---tooltip-max-width: 200px; ---tooltip-padding-x: 0.5rem; ---tooltip-padding-y: 0.25rem; ---tooltip-margin: ; ---tooltip-font-size: 0.875rem; ---tooltip-color: var(--body-color); ---tooltip-bg: hsl(0, 0%, 0%); ---tooltip-border-radius: 0.25rem; ---tooltip-opacity: 0.9; ---tooltip-arrow-width: 0.8rem; ---tooltip-arrow-height: 0.4rem; - -/* ===== POPOVER ===== */ ---popover-zindex: 1060; ---popover-max-width: 276px; ---popover-font-size: 0.875rem; ---popover-bg: var(--secondary-bg); ---popover-border-width: 1px; ---popover-border-color: var(--border-color-translucent); ---popover-border-radius: 0.3rem; ---popover-inner-border-radius: calc(0.3rem - 1px); ---popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); ---popover-header-padding-x: 1rem; ---popover-header-padding-y: 0.5rem; ---popover-header-font-size: 1rem; ---popover-header-color: ; ---popover-header-bg: var(--tertiary-bg); ---popover-body-padding-x: 1rem; ---popover-body-padding-y: 1rem; ---popover-body-color: var(--body-color); ---popover-arrow-width: 1rem; ---popover-arrow-height: 0.5rem; ---popover-arrow-border: var(--popover-border-color); - -/* ===== SPINNER ===== */ ---spinner-width: 2rem; ---spinner-height: 2rem; ---spinner-vertical-align: -0.125em; ---spinner-border-width: 0.25em; ---spinner-animation-speed: 0.75s; - -/* ===== NAV TABS ===== */ ---nav-tabs-border-width: 1px; ---nav-tabs-border-color: var(--border-color); ---nav-tabs-border-radius: 0.25rem; ---nav-tabs-link-active-color: var(--body-color); ---nav-tabs-link-active-bg: var(--secondary-bg); ---nav-tabs-link-active-border-color: var(--border-color) var(--border-color) var(--secondary-bg); - -/* ===== NAV PILLS ===== */ ---nav-pills-border-radius: 0.25rem; ---nav-pills-link-active-color: var(--body-color); ---nav-pills-link-active-bg: hsl(240, 98%, 17%); - -/* ===== TABLE ===== */ ---table-color: var(--body-color); ---table-bg: transparent; ---table-border-color: var(--border-color); ---table-accent-bg: transparent; ---table-striped-color: var(--body-color); ---table-striped-bg: rgba(var(--white-rgb), var(--opacity-5)); ---table-active-color: var(--body-color); ---table-active-bg: rgba(var(--white-rgb), 0.1); - -/* ===== FOOTER ===== */ ---footer-padding-top: 1rem; ---footer-padding-bottom: 80px; ---footer-grid-padding-y: 2.5rem; ---footer-grid-padding-x: 0.5em; - -/* ===== BACKDROP ===== */ ---backdrop-zindex: 1040; ---backdrop-bg: hsl(0, 0%, 0%); ---backdrop-opacity: 0.5; - -/* ===== THEME FAB ===== */ ---theme-fab-bg: #e6ebf1; ---theme-fab-color: #0e1318; ---theme-fab-btn-bg: transparent; ---theme-fab-border: rgba(0, 0, 0, 0.15); - -/* ===== OFFLINE PAGE ===== */ ---offline-card-bg: rgba(0, 0, 0, 0.6); } .btn { diff --git a/src/media/css/theme/light.standard.css b/src/media/css/theme/light.standard.css index 97c35c8..ae01b7b 100644 --- a/src/media/css/theme/light.standard.css +++ b/src/media/css/theme/light.standard.css @@ -12,25 +12,144 @@ :root[data-bs-theme="light"] { color-scheme: light; + /* ===== BRAND & THEME COLORS ===== */ --color-primary: #112855; --accent-color-primary: #3f8ff0; --accent-color-secondary: #6fb3ff; + +/* ===== 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: black; +--code-color-ink: var(--code-color, #e93f8e); +--code-bg-color: lightgreen; +--highlight-color: #22262a; +--highlight-bg: #fbeea8; + + +/* ===== 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; + + +/* ===== OPACITY UTILITIES ===== */ +--opacity-0: 0; +--opacity-5: 0.05; +--opacity-10: 0.1; +--opacity-15: 0.15; +--opacity-20: 0.2; +--opacity-25: 0.25; +--opacity-30: 0.3; +--opacity-50: 0.5; +--opacity-75: 0.75; +--opacity-100: 1; + + +/* ===== LAYOUT & SPACING ===== */ +--padding-x: 0.15rem; +--padding-y: 0.15rem; +--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); +--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; + + +/* ===== BORDERS ===== */ +--border-width: 1px; +--border-style: solid; +--border-color: #dfe3e7; +--border-color-translucent: #0000002d; +--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)*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; + + +/* ===== COMMON SHADOW COLORS ===== */ +--shadow-color-light: rgba(var(--black-rgb), var(--opacity-15)); +--shadow-color-medium: rgba(var(--black-rgb), var(--opacity-25)); +--shadow-color-dark: rgba(var(--black-rgb), var(--opacity-30)); +--border-color-translucent: rgba(var(--black-rgb), var(--opacity-10)); +--highlight-translucent: rgba(var(--white-rgb), var(--opacity-15)); + + /* ===== NAVIGATION ===== */ --mainmenu-nav-link-color: white; --nav-text-color: white; --nav-bg-color: var(--color-link); -/* ===== 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); /* ===== NAVBAR ===== */ --navbar-padding-x: 1rem; @@ -58,135 +177,17 @@ color-scheme: light; --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: black; ---code-color-ink: var(--code-color, #e93f8e); ---code-bg-color: lightgreen; ---highlight-color: #22262a; ---highlight-bg: #fbeea8; -/* ===== LAYOUT & SPACING ===== */ ---padding-x: 0.15rem; ---padding-y: 0.15rem; ---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); ---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; +/* ===== 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); -/* ===== BREAKPOINTS ===== */ ---bp-xs: 0; ---bp-sm: 576px; ---bp-md: 768px; ---bp-lg: 992px; ---bp-xl: 1200px; - -/* ===== BOOTSTRAP PALETTE ===== */ ---primary: #010156; ---secondary: #6d757e; ---success: #448344; ---info: #30638d; ---warning: #ad6200; ---danger: #a51f18; ---light: #f9fafb; ---dark: #353b41; ---primary-rgb: 1, 1, 86; ---secondary-rgb: 109, 117, 126; ---success-rgb: 68, 131, 68; ---info-rgb: 48, 99, 141; ---warning-rgb: 173, 98, 0; ---danger-rgb: 165, 31, 24; ---light-rgb: 249, 250, 251; ---dark-rgb: 53, 59, 65; ---primary-text-emphasis: #002; ---secondary-text-emphasis: #2c2f32; ---success-text-emphasis: #1b351b; ---info-text-emphasis: #132838; ---warning-text-emphasis: #452700; ---danger-text-emphasis: #420c09; ---light-text-emphasis: #484f56; ---dark-text-emphasis: #484f56; ---primary-bg-subtle: #ccd; ---secondary-bg-subtle: #e2e3e5; ---success-bg-subtle: #dae6da; ---info-bg-subtle: #d6e0e8; ---warning-bg-subtle: #efe0cc; ---danger-bg-subtle: #edd2d1; ---light-bg-subtle: #fcfcfd; ---dark-bg-subtle: #ced4da; ---primary-border-subtle: #99b; ---secondary-border-subtle: #c5c8cb; ---success-border-subtle: #b4ceb4; ---info-border-subtle: #acc1d1; ---warning-border-subtle: #dec099; ---danger-border-subtle: #dba5a2; ---light-border-subtle: #eaedf0; ---dark-border-subtle: #adb5bd; - -/* ===== ALERT LINK COLORS ===== */ ---alert-primary-link-color: #01012a; ---alert-secondary-link-color: #34383d; ---alert-success-link-color: #213f21; ---alert-info-link-color: #172f44; ---alert-warning-link-color: #532f00; ---alert-danger-link-color: #4f0f0b; ---alert-light-link-color: #505050; ---alert-dark-link-color: #1a1c1f; - -/* ===== LIST GROUP ITEM COLORS ===== */ ---list-group-item-primary-color: #010134; ---list-group-item-primary-bg: #ccccdd; ---list-group-item-primary-active-bg: #b8b8c7; ---list-group-item-secondary-color: #41464c; ---list-group-item-secondary-bg: #e2e3e5; ---list-group-item-secondary-active-bg: #cbccce; ---list-group-item-success-color: #294f29; ---list-group-item-success-bg: #dae6da; ---list-group-item-success-active-bg: #c4cfc4; ---list-group-item-info-color: #1d3b55; ---list-group-item-info-bg: #d6e0e8; ---list-group-item-info-active-bg: #c1cad1; ---list-group-item-warning-color: #683b00; ---list-group-item-warning-bg: #efe0cc; ---list-group-item-warning-active-bg: #d7cab8; ---list-group-item-danger-color: #63130e; ---list-group-item-danger-bg: #edd2d1; ---list-group-item-danger-active-bg: #d5bdbc; ---list-group-item-light-color: #646464; ---list-group-item-light-bg: #fefefe; ---list-group-item-light-active-bg: #e5e5e5; ---list-group-item-dark-color: #202327; ---list-group-item-dark-bg: #d7d8d9; ---list-group-item-dark-active-bg: #c2c2c3; /* ===== LINK UTILITY COLORS ===== */ --link-primary-color: hsl(240, 98%, 17%); @@ -206,85 +207,6 @@ color-scheme: light; --link-dark-color: hsl(210, 10%, 23%); --link-dark-hover-color: #2a2f34; -/* ===== COMPONENT-SPECIFIC COLORS ===== */ ---mod-finder-link-hover: #e6e6e6; ---form-legend-color: #495057; ---border-gray: #b2bfcd; ---subhead-color: #495057; ---box-shadow-gray: #ddd; ---btn-active-text-gray: #A0A0A0; ---indicator-success-bg: var(--success); ---item-list-color: #F5F5F5; ---notification-badge-bg: var(--danger); ---content-bg-gray: #DDD; ---taba-btn-green: #7ac143; ---taba-btn-blue: #5091cd; ---taba-btn-red: #f44321; ---taba-btn-gray: #AAA; ---taba-msg-bg: #f5f5f5; ---toc-link-color: #767676; ---toc-link-active-color: #563d7c; ---choices-disabled-bg: #eaeaea; ---choices-input-bg: var(--white); ---choices-border-light: #ddd; ---choices-arrow-color: #333; ---choices-inner-bg: #f9f9f9; ---choices-focused-border: #b7b7b7; ---choices-dropdown-bg: var(--white); ---choices-item-bg: #00bcd4; ---choices-item-border: #00a5bb; ---choices-item-hover-bg: #00a5bb; ---choices-item-hover-border: #008fa1; ---choices-item-disabled-bg: #aaaaaa; ---choices-item-disabled-border: #919191; ---choices-item-highlighted: #f2f2f2; ---choices-input-inner-bg: #f9f9f9; - -/* ===== 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; - -/* ===== OPACITY UTILITIES ===== */ ---opacity-0: 0; ---opacity-5: 0.05; ---opacity-10: 0.1; ---opacity-15: 0.15; ---opacity-20: 0.2; ---opacity-25: 0.25; ---opacity-30: 0.3; ---opacity-50: 0.5; ---opacity-75: 0.75; ---opacity-100: 1; - -/* ===== COMMON SHADOW COLORS ===== */ ---shadow-color-light: rgba(var(--black-rgb), var(--opacity-15)); ---shadow-color-medium: rgba(var(--black-rgb), var(--opacity-25)); ---shadow-color-dark: rgba(var(--black-rgb), var(--opacity-30)); ---border-color-translucent: rgba(var(--black-rgb), var(--opacity-10)); ---highlight-translucent: rgba(var(--white-rgb), var(--opacity-15)); /* ===== HEADER BACKGROUND ===== */ --header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); @@ -292,6 +214,7 @@ color-scheme: light; --header-background-repeat: repeat; --header-background-size: auto; + /* ===== CONTAINER BACKGROUNDS ===== */ /* Below Topbar Container */ --container-below-topbar-bg-image: none; @@ -357,24 +280,6 @@ color-scheme: light; --container-bottom-b-border: none; --container-bottom-b-border-radius: 0; -/* ===== BORDERS ===== */ ---border-width: 1px; ---border-style: solid; ---border-color: #dfe3e7; ---border-color-translucent: #0000002d; ---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)*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; @@ -395,10 +300,85 @@ color-scheme: light; --form-invalid-color: #a51f18; --form-invalid-border-color: #a51f18; + /* ===== 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); + +/* ===== ACCORDION ===== */ +--accordion-color: hsl(210, 11%, 15%); +--accordion-bg: var(--body-bg); +--accordion-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, border-radius 0.15s ease; +--accordion-border-color: var(--border-color); +--accordion-border-width: 1px; +--accordion-border-radius: 0.25rem; +--accordion-inner-border-radius: calc(0.25rem - 1px); +--accordion-btn-padding-x: 1.25rem; +--accordion-btn-padding-y: 1rem; +--accordion-btn-color: hsl(210, 11%, 15%); +--accordion-btn-bg: var(--accordion-bg); +--accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='hsl%28210, 11%25, 15%25%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); +--accordion-btn-icon-width: 1.25rem; +--accordion-btn-icon-transform: rotate(-180deg); +--accordion-btn-icon-transition: transform 0.2s ease-in-out; +--accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f244d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); +--accordion-btn-focus-border-color: var(--input-focus-border-color); +--accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); +--accordion-body-padding-x: 1.25rem; +--accordion-body-padding-y: 1rem; +--accordion-active-color: #0f244d; +--accordion-active-bg: #e7eaee; + + +/* ===== ALERT ===== */ +--alert-bg: transparent; +--alert-padding-x: 1rem; +--alert-padding-y: 1rem; +--alert-margin-bottom: 1rem; +--alert-color: #000; +--alert-border-color: transparent; +--alert-border: 1px solid var(--alert-border-color); +--alert-border-radius: 0.25rem; + + +/* ===== ALERT LINK COLORS ===== */ +--alert-primary-link-color: #01012a; +--alert-secondary-link-color: #34383d; +--alert-success-link-color: #213f21; +--alert-info-link-color: #172f44; +--alert-warning-link-color: #532f00; +--alert-danger-link-color: #4f0f0b; +--alert-light-link-color: #505050; +--alert-dark-link-color: #1a1c1f; + + +/* ===== BACKDROP ===== */ +--backdrop-zindex: 1040; +--backdrop-bg: hsl(0, 0%, 0%); +--backdrop-opacity: 0.5; + + +/* ===== BADGE ===== */ +--badge-padding-x: 0.65em; +--badge-padding-y: 0.35em; +--badge-font-size: 0.75em; +--badge-font-weight: 700; +--badge-color: var(--body-bg); +--badge-border-radius: 0.25rem; + + +/* ===== BREADCRUMB ===== */ +--breadcrumb-padding-x: 0; +--breadcrumb-padding-y: 0; +--breadcrumb-margin-bottom: 1rem; +--breadcrumb-bg: ; +--breadcrumb-border-radius: ; +--breadcrumb-divider-color: hsl(210, 7%, 46%); +--breadcrumb-item-padding-x: 0.5rem; +--breadcrumb-item-active-color: var(--link-color); + + /* ===== CARDS ===== */ --card-spacer-y: 1rem; --card-spacer-x: 1rem; @@ -418,6 +398,406 @@ color-scheme: light; --card-img-overlay-padding: 1rem; --card-group-margin: 0.75rem; + +/* ===== DROPDOWN ===== */ +--dropdown-zindex: 1000; +--dropdown-min-width: 10rem; +--dropdown-padding-x: 0; +--dropdown-padding-y: 0.5rem; +--dropdown-spacer: 0.125rem; +--dropdown-font-size: 1rem; +--dropdown-color: hsl(210, 11%, 15%); +--dropdown-bg: var(--body-bg); +--dropdown-border-color: var(--border-color-translucent); +--dropdown-border-radius: 0.25rem; +--dropdown-border-width: 1px; +--dropdown-inner-border-radius: calc(0.25rem - 1px); +--dropdown-divider-bg: var(--border-color-translucent); +--dropdown-divider-margin-y: 0.5rem; +--dropdown-box-shadow: 0 0.5rem 1rem var(--shadow-color-light); +--dropdown-link-color: hsl(210, 11%, 15%); +--dropdown-link-active-color: var(--body-bg); +--dropdown-link-active-bg: hsl(240, 98%, 17%); +--dropdown-link-disabled-color: hsl(210, 11%, 71%); +--dropdown-item-padding-x: 1rem; +--dropdown-item-padding-y: 0.25rem; +--dropdown-header-color: hsl(210, 7%, 46%); +--dropdown-header-padding-x: 1rem; +--dropdown-header-padding-y: 0.5rem; + + +/* ===== LIST GROUP ===== */ +--list-group-color: hsl(210, 11%, 15%); +--list-group-bg: var(--body-bg); +--list-group-border-color: rgba(var(--black-rgb), 0.125); +--list-group-border-width: 1px; +--list-group-border-radius: 0.25rem; +--list-group-item-padding-x: 1rem; +--list-group-item-padding-y: 0.5rem; +--list-group-action-color: hsl(210, 9%, 31%); +--list-group-action-active-color: hsl(210, 11%, 15%); +--list-group-action-active-bg: hsl(210, 16%, 93%); +--list-group-disabled-color: hsl(210, 7%, 46%); +--list-group-disabled-bg: var(--body-bg); +--list-group-active-color: var(--body-bg); +--list-group-active-bg: hsl(240, 98%, 17%); +--list-group-active-border-color: hsl(240, 98%, 17%); + + +/* ===== LIST GROUP ITEM COLORS ===== */ +--list-group-item-primary-color: #010134; +--list-group-item-primary-bg: #ccccdd; +--list-group-item-primary-active-bg: #b8b8c7; +--list-group-item-secondary-color: #41464c; +--list-group-item-secondary-bg: #e2e3e5; +--list-group-item-secondary-active-bg: #cbccce; +--list-group-item-success-color: #294f29; +--list-group-item-success-bg: #dae6da; +--list-group-item-success-active-bg: #c4cfc4; +--list-group-item-info-color: #1d3b55; +--list-group-item-info-bg: #d6e0e8; +--list-group-item-info-active-bg: #c1cad1; +--list-group-item-warning-color: #683b00; +--list-group-item-warning-bg: #efe0cc; +--list-group-item-warning-active-bg: #d7cab8; +--list-group-item-danger-color: #63130e; +--list-group-item-danger-bg: #edd2d1; +--list-group-item-danger-active-bg: #d5bdbc; +--list-group-item-light-color: #646464; +--list-group-item-light-bg: #fefefe; +--list-group-item-light-active-bg: #e5e5e5; +--list-group-item-dark-color: #202327; +--list-group-item-dark-bg: #d7d8d9; +--list-group-item-dark-active-bg: #c2c2c3; + + +/* ===== MODAL ===== */ +--modal-zindex: 1050; +--modal-width: 500px; +--modal-padding: 1rem; +--modal-margin: 0.5rem; +--modal-color: ; +--modal-bg: var(--body-bg); +--modal-border-color: var(--border-color-translucent); +--modal-border-width: 1px; +--modal-border-radius: 0.3rem; +--modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); +--modal-inner-border-radius: calc(0.3rem - 1px); +--modal-header-padding-x: 1rem; +--modal-header-padding-y: 1rem; +--modal-header-padding: 1rem 1rem; +--modal-header-border-color: var(--border-color); +--modal-header-border-width: 1px; +--modal-title-line-height: 1.5; +--modal-footer-gap: 0.5rem; +--modal-footer-bg: ; +--modal-footer-border-color: var(--border-color); +--modal-footer-border-width: 1px; + + +/* ===== NAV TABS ===== */ +--nav-tabs-border-width: 1px; +--nav-tabs-border-color: hsl(210, 14%, 89%); +--nav-tabs-border-radius: 0.25rem; +--nav-tabs-link-active-color: hsl(210, 9%, 31%); +--nav-tabs-link-active-bg: var(--body-bg); +--nav-tabs-link-active-border-color: hsl(210, 14%, 89%) hsl(210, 14%, 89%) var(--body-bg); + + +/* ===== NAV PILLS ===== */ +--nav-pills-border-radius: 0.25rem; +--nav-pills-link-active-color: var(--body-bg); +--nav-pills-link-active-bg: hsl(240, 98%, 17%); + + +/* ===== OFFCANVAS ===== */ +--offcanvas-zindex: 1045; +--offcanvas-width: 400px; +--offcanvas-height: 30vh; +--offcanvas-padding-x: 1rem; +--offcanvas-padding-y: 1rem; +--offcanvas-color: var(--body-color); +--offcanvas-bg: var(--body-bg); +--offcanvas-border-width: 1px; +--offcanvas-border-color: var(--border-color-translucent); +--offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); + + +/* ===== PAGINATION ===== */ +--pagination-padding-x: 0.75rem; +--pagination-padding-y: 0.375rem; +--pagination-font-size: 1rem; +--pagination-color: var(--link-color); +--pagination-bg: var(--body-bg); +--pagination-border-width: 1px; +--pagination-border-color: hsl(210, 14%, 89%); +--pagination-border-radius: 0.25rem; +--pagination-focus-color: var(--link-active-color); +--pagination-focus-bg: hsl(210, 16%, 93%); +--pagination-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); +--pagination-active-color: var(--body-bg); +--pagination-active-bg: hsl(240, 98%, 17%); +--pagination-active-border-color: hsl(240, 98%, 17%); +--pagination-disabled-color: hsl(210, 7%, 46%); +--pagination-disabled-bg: var(--body-bg); +--pagination-disabled-border-color: hsl(210, 14%, 89%); + + +/* ===== POPOVER ===== */ +--popover-zindex: 1060; +--popover-max-width: 276px; +--popover-font-size: 0.875rem; +--popover-bg: var(--body-bg); +--popover-border-width: 1px; +--popover-border-color: var(--border-color-translucent); +--popover-border-radius: 0.3rem; +--popover-inner-border-radius: calc(0.3rem - 1px); +--popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); +--popover-header-padding-x: 1rem; +--popover-header-padding-y: 0.5rem; +--popover-header-font-size: 1rem; +--popover-header-color: ; +--popover-header-bg: #f0f0f0; +--popover-body-padding-x: 1rem; +--popover-body-padding-y: 1rem; +--popover-body-color: hsl(210, 11%, 15%); +--popover-arrow-width: 1rem; +--popover-arrow-height: 0.5rem; +--popover-arrow-border: var(--popover-border-color); + + +/* ===== PROGRESS ===== */ +--progress-height: 1rem; +--progress-font-size: 0.75rem; +--progress-bg: hsl(210, 16%, 93%); +--progress-border-radius: 0.25rem; +--progress-box-shadow: inset 0 1px 2px rgba(var(--black-rgb), 0.075); +--progress-bar-color: var(--body-bg); +--progress-bar-bg: hsl(240, 98%, 17%); +--progress-bar-transition: width 0.6s ease; + + +/* ===== SPINNER ===== */ +--spinner-width: 2rem; +--spinner-height: 2rem; +--spinner-vertical-align: -0.125em; +--spinner-border-width: 0.25em; +--spinner-animation-speed: 0.75s; + + +/* ===== TABLE ===== */ +--table-color: var(--body-color); +--table-bg: transparent; +--table-border-color: var(--border-color); +--table-accent-bg: transparent; +--table-striped-color: var(--body-color); +--table-striped-bg: rgba(var(--black-rgb), var(--opacity-5)); +--table-active-color: var(--body-color); +--table-active-bg: rgba(var(--black-rgb), 0.075); + + +/* ===== TOAST ===== */ +--toast-zindex: 1090; +--toast-padding-x: 0.75rem; +--toast-padding-y: 0.5rem; +--toast-spacing: 1em; +--toast-max-width: 350px; +--toast-font-size: 0.875rem; +--toast-color: ; +--toast-bg: rgba(255, 255, 255, 0.85); +--toast-border-width: 1px; +--toast-border-color: var(--border-color-translucent); +--toast-border-radius: 0.25rem; +--toast-box-shadow: 0 0.5rem 1rem var(--shadow-color-light); +--toast-header-color: hsl(210, 7%, 46%); +--toast-header-bg: rgba(var(--white-rgb), 0.85); +--toast-header-border-color: rgba(var(--black-rgb), var(--opacity-5)); + + +/* ===== TOOLTIP ===== */ +--tooltip-zindex: 1070; +--tooltip-max-width: 200px; +--tooltip-padding-x: 0.5rem; +--tooltip-padding-y: 0.25rem; +--tooltip-margin: ; +--tooltip-font-size: 0.875rem; +--tooltip-color: var(--body-bg); +--tooltip-bg: hsl(0, 0%, 0%); +--tooltip-border-radius: 0.25rem; +--tooltip-opacity: 0.9; +--tooltip-arrow-width: 0.8rem; +--tooltip-arrow-height: 0.4rem; + + +/* ===== BOOTSTRAP PALETTE ===== */ +--primary: #010156; +--secondary: #6d757e; +--success: #448344; +--info: #30638d; +--warning: #ad6200; +--danger: #a51f18; +--light: #f9fafb; +--dark: #353b41; +--primary-rgb: 1, 1, 86; +--secondary-rgb: 109, 117, 126; +--success-rgb: 68, 131, 68; +--info-rgb: 48, 99, 141; +--warning-rgb: 173, 98, 0; +--danger-rgb: 165, 31, 24; +--light-rgb: 249, 250, 251; +--dark-rgb: 53, 59, 65; +--primary-text-emphasis: #002; +--secondary-text-emphasis: #2c2f32; +--success-text-emphasis: #1b351b; +--info-text-emphasis: #132838; +--warning-text-emphasis: #452700; +--danger-text-emphasis: #420c09; +--light-text-emphasis: #484f56; +--dark-text-emphasis: #484f56; +--primary-bg-subtle: #ccd; +--secondary-bg-subtle: #e2e3e5; +--success-bg-subtle: #dae6da; +--info-bg-subtle: #d6e0e8; +--warning-bg-subtle: #efe0cc; +--danger-bg-subtle: #edd2d1; +--light-bg-subtle: #fcfcfd; +--dark-bg-subtle: #ced4da; +--primary-border-subtle: #99b; +--secondary-border-subtle: #c5c8cb; +--success-border-subtle: #b4ceb4; +--info-border-subtle: #acc1d1; +--warning-border-subtle: #dec099; +--danger-border-subtle: #dba5a2; +--light-border-subtle: #eaedf0; +--dark-border-subtle: #adb5bd; + + +/* ===== HERO / BANNER OVERLAY ===== */ +--hero-height: 70vh; +--hero-color: var(--body-color); +--hero-bg-repeat: no-repeat; +--hero-bg-attachment: fixed; +--hero-bg-position: top center; +--hero-bg-size: cover; +--hero-border-bottom: solid var(--accent-color-secondary); +--hero-overlay-bg: hsla(0, 0%, 0%, 0.1); +--hero-overlay-bg-position: center; +--hero-overlay-bg-size: cover; +--hero-overlay-padding: 1em; +--hero-overlay-text-align: center; +--hero-overlay-text-color: var(--body-color); + + +/* ===== HERO VARIANTS ===== */ +/* Primary — sky blue, light overlay */ +--hero-primary-bg-color: var(--color-primary); +--hero-primary-overlay: linear-gradient(rgba(163, 205, 226, .45), rgba(163, 205, 226, .45)); +--hero-primary-color: var(--color-primary); + +/* Secondary — navy, stronger overlay */ +--hero-secondary-bg-color: var(--color-primary); +--hero-secondary-overlay: linear-gradient(rgba(17, 40, 85, .75), rgba(17, 40, 85, .75)); +--hero-secondary-color: #f1f5f9; + + +/* ===== HERO CARD (inner .hero element) ===== */ +/* Default card — uses primary variant values */ +--hero-card-bg: var(--hero-primary-bg-color); +--hero-card-color: white; +--hero-card-overlay: var(--hero-primary-overlay); +--hero-card-border-radius: .5rem; +--hero-card-padding-x: 2rem; +--hero-card-padding-y: 3rem; +--hero-card-max-width: 800px; + +/* Alternative card — uses secondary variant values */ +--hero-alt-card-bg: var(--hero-secondary-bg-color); +--hero-alt-card-color: var(--hero-secondary-color); +--hero-alt-card-overlay: var(--hero-secondary-overlay); +--hero-alt-card-border-radius: .5rem; +--hero-alt-card-padding-x: 2rem; +--hero-alt-card-padding-y: 3rem; +--hero-alt-card-max-width: 600px; + + +/* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */ +--block-color-1: var(--color-primary); +--block-text-1: var(--body-color); + +--block-color-2: var(--accent-color-primary); +--block-text-2: #fff; + +--block-color-3: var(--warning, #eec234); +--block-text-3: var(--body-color); + +--block-color-4: var(--success-bg-subtle, #eef7f0); +--block-text-4: var(--body-color); + + +/* ===== BLOCK COLOR OVERRIDES ===== */ +--block-highlight-bg: var(--accent-color-primary); +--block-highlight-text: #fff; + +--block-cta-bg: var(--color-primary); +--block-cta-text: #fff; + +--block-alert-bg: var(--danger, #a51f18); +--block-alert-text: #fff; + + +/* ===== FOOTER ===== */ +--footer-padding-top: 1rem; +--footer-padding-bottom: 80px; +--footer-grid-padding-y: 2.5rem; +--footer-grid-padding-x: 0.5em; + + +/* ===== THEME FAB ===== */ +--theme-fab-bg: var(--color-primary, #112855); +--theme-fab-color: #fff; +--theme-fab-btn-bg: rgba(255,255,255,.15); +--theme-fab-border: rgba(255, 255, 255, 0.3); + + +/* ===== OFFLINE PAGE ===== */ +--offline-card-bg: rgba(0, 0, 0, 0.55); + + +/* ===== COMPONENT-SPECIFIC COLORS ===== */ +--mod-finder-link-hover: #e6e6e6; +--form-legend-color: #495057; +--border-gray: #b2bfcd; +--subhead-color: #495057; +--box-shadow-gray: #ddd; +--btn-active-text-gray: #A0A0A0; +--indicator-success-bg: var(--success); +--item-list-color: #F5F5F5; +--notification-badge-bg: var(--danger); +--content-bg-gray: #DDD; +--taba-btn-green: #7ac143; +--taba-btn-blue: #5091cd; +--taba-btn-red: #f44321; +--taba-btn-gray: #AAA; +--taba-msg-bg: #f5f5f5; +--toc-link-color: #767676; +--toc-link-active-color: #563d7c; +--choices-disabled-bg: #eaeaea; +--choices-input-bg: var(--white); +--choices-border-light: #ddd; +--choices-arrow-color: #333; +--choices-inner-bg: #f9f9f9; +--choices-focused-border: #b7b7b7; +--choices-dropdown-bg: var(--white); +--choices-item-bg: #00bcd4; +--choices-item-border: #00a5bb; +--choices-item-hover-bg: #00a5bb; +--choices-item-hover-border: #008fa1; +--choices-item-disabled-bg: #aaaaaa; +--choices-item-disabled-border: #919191; +--choices-item-highlighted: #f2f2f2; +--choices-input-inner-bg: #f9f9f9; + + /* ===== VIRTUEMART (VM) ===== */ /* VM Surfaces */ --vm-surface: #ffffff; @@ -497,6 +877,7 @@ color-scheme: light; --vm-vendor-menu-link-active: var(--primary); --vm-vendor-menu-hover-bg: var(--secondary-bg); + /* ===== GABLE ===== */ --gab-blue: #0066cc; --gab-green: #28a745; @@ -506,335 +887,6 @@ color-scheme: light; --gab-gray2: #6c757d; --gab-gray3: #adb5bd; -/* ===== HERO / BANNER OVERLAY ===== */ ---hero-height: 70vh; ---hero-color: var(--body-color); ---hero-bg-repeat: no-repeat; ---hero-bg-attachment: fixed; ---hero-bg-position: top center; ---hero-bg-size: cover; ---hero-border-bottom: solid var(--accent-color-secondary); ---hero-overlay-bg: hsla(0, 0%, 0%, 0.1); ---hero-overlay-bg-position: center; ---hero-overlay-bg-size: cover; ---hero-overlay-padding: 1em; ---hero-overlay-text-align: center; ---hero-overlay-text-color: var(--body-color); - -/* ===== HERO VARIANTS ===== */ -/* Primary — sky blue, light overlay */ ---hero-primary-bg-color: var(--color-primary); ---hero-primary-overlay: linear-gradient(rgba(163, 205, 226, .45), rgba(163, 205, 226, .45)); ---hero-primary-color: var(--color-primary); - -/* Secondary — navy, stronger overlay */ ---hero-secondary-bg-color: var(--color-primary); ---hero-secondary-overlay: linear-gradient(rgba(17, 40, 85, .75), rgba(17, 40, 85, .75)); ---hero-secondary-color: #f1f5f9; - -/* ===== HERO CARD (inner .hero element) ===== */ -/* Default card — uses primary variant values */ ---hero-card-bg: var(--hero-primary-bg-color); ---hero-card-color: white; ---hero-card-overlay: var(--hero-primary-overlay); ---hero-card-border-radius: .5rem; ---hero-card-padding-x: 2rem; ---hero-card-padding-y: 3rem; ---hero-card-max-width: 800px; - -/* Alternative card — uses secondary variant values */ ---hero-alt-card-bg: var(--hero-secondary-bg-color); ---hero-alt-card-color: var(--hero-secondary-color); ---hero-alt-card-overlay: var(--hero-secondary-overlay); ---hero-alt-card-border-radius: .5rem; ---hero-alt-card-padding-x: 2rem; ---hero-alt-card-padding-y: 3rem; ---hero-alt-card-max-width: 600px; - -/* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */ ---block-color-1: var(--color-primary); ---block-text-1: var(--body-color); - ---block-color-2: var(--accent-color-primary); ---block-text-2: #fff; - ---block-color-3: var(--warning, #eec234); ---block-text-3: var(--body-color); - ---block-color-4: var(--success-bg-subtle, #eef7f0); ---block-text-4: var(--body-color); - -/* ===== BLOCK COLOR OVERRIDES ===== */ ---block-highlight-bg: var(--accent-color-primary); ---block-highlight-text: #fff; - ---block-cta-bg: var(--color-primary); ---block-cta-text: #fff; - ---block-alert-bg: var(--danger, #a51f18); ---block-alert-text: #fff; - -/* ===== OFFCANVAS ===== */ ---offcanvas-zindex: 1045; ---offcanvas-width: 400px; ---offcanvas-height: 30vh; ---offcanvas-padding-x: 1rem; ---offcanvas-padding-y: 1rem; ---offcanvas-color: var(--body-color); ---offcanvas-bg: var(--body-bg); ---offcanvas-border-width: 1px; ---offcanvas-border-color: var(--border-color-translucent); ---offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); - -/* ===== ACCORDION ===== */ ---accordion-color: hsl(210, 11%, 15%); ---accordion-bg: var(--body-bg); ---accordion-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, border-radius 0.15s ease; ---accordion-border-color: var(--border-color); ---accordion-border-width: 1px; ---accordion-border-radius: 0.25rem; ---accordion-inner-border-radius: calc(0.25rem - 1px); ---accordion-btn-padding-x: 1.25rem; ---accordion-btn-padding-y: 1rem; ---accordion-btn-color: hsl(210, 11%, 15%); ---accordion-btn-bg: var(--accordion-bg); ---accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='hsl%28210, 11%25, 15%25%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-icon-width: 1.25rem; ---accordion-btn-icon-transform: rotate(-180deg); ---accordion-btn-icon-transition: transform 0.2s ease-in-out; ---accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f244d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-focus-border-color: var(--input-focus-border-color); ---accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); ---accordion-body-padding-x: 1.25rem; ---accordion-body-padding-y: 1rem; ---accordion-active-color: #0f244d; ---accordion-active-bg: #e7eaee; - -/* ===== BREADCRUMB ===== */ ---breadcrumb-padding-x: 0; ---breadcrumb-padding-y: 0; ---breadcrumb-margin-bottom: 1rem; ---breadcrumb-bg: ; ---breadcrumb-border-radius: ; ---breadcrumb-divider-color: hsl(210, 7%, 46%); ---breadcrumb-item-padding-x: 0.5rem; ---breadcrumb-item-active-color: var(--link-color); - -/* ===== PAGINATION ===== */ ---pagination-padding-x: 0.75rem; ---pagination-padding-y: 0.375rem; ---pagination-font-size: 1rem; ---pagination-color: var(--link-color); ---pagination-bg: var(--body-bg); ---pagination-border-width: 1px; ---pagination-border-color: hsl(210, 14%, 89%); ---pagination-border-radius: 0.25rem; ---pagination-focus-color: var(--link-active-color); ---pagination-focus-bg: hsl(210, 16%, 93%); ---pagination-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); ---pagination-active-color: var(--body-bg); ---pagination-active-bg: hsl(240, 98%, 17%); ---pagination-active-border-color: hsl(240, 98%, 17%); ---pagination-disabled-color: hsl(210, 7%, 46%); ---pagination-disabled-bg: var(--body-bg); ---pagination-disabled-border-color: hsl(210, 14%, 89%); - -/* ===== BADGE ===== */ ---badge-padding-x: 0.65em; ---badge-padding-y: 0.35em; ---badge-font-size: 0.75em; ---badge-font-weight: 700; ---badge-color: var(--body-bg); ---badge-border-radius: 0.25rem; - -/* ===== ALERT ===== */ ---alert-bg: transparent; ---alert-padding-x: 1rem; ---alert-padding-y: 1rem; ---alert-margin-bottom: 1rem; ---alert-color: #000; ---alert-border-color: transparent; ---alert-border: 1px solid var(--alert-border-color); ---alert-border-radius: 0.25rem; - -/* ===== PROGRESS ===== */ ---progress-height: 1rem; ---progress-font-size: 0.75rem; ---progress-bg: hsl(210, 16%, 93%); ---progress-border-radius: 0.25rem; ---progress-box-shadow: inset 0 1px 2px rgba(var(--black-rgb), 0.075); ---progress-bar-color: var(--body-bg); ---progress-bar-bg: hsl(240, 98%, 17%); ---progress-bar-transition: width 0.6s ease; - -/* ===== LIST GROUP ===== */ ---list-group-color: hsl(210, 11%, 15%); ---list-group-bg: var(--body-bg); ---list-group-border-color: rgba(var(--black-rgb), 0.125); ---list-group-border-width: 1px; ---list-group-border-radius: 0.25rem; ---list-group-item-padding-x: 1rem; ---list-group-item-padding-y: 0.5rem; ---list-group-action-color: hsl(210, 9%, 31%); ---list-group-action-active-color: hsl(210, 11%, 15%); ---list-group-action-active-bg: hsl(210, 16%, 93%); ---list-group-disabled-color: hsl(210, 7%, 46%); ---list-group-disabled-bg: var(--body-bg); ---list-group-active-color: var(--body-bg); ---list-group-active-bg: hsl(240, 98%, 17%); ---list-group-active-border-color: hsl(240, 98%, 17%); - -/* ===== DROPDOWN ===== */ ---dropdown-zindex: 1000; ---dropdown-min-width: 10rem; ---dropdown-padding-x: 0; ---dropdown-padding-y: 0.5rem; ---dropdown-spacer: 0.125rem; ---dropdown-font-size: 1rem; ---dropdown-color: hsl(210, 11%, 15%); ---dropdown-bg: var(--body-bg); ---dropdown-border-color: var(--border-color-translucent); ---dropdown-border-radius: 0.25rem; ---dropdown-border-width: 1px; ---dropdown-inner-border-radius: calc(0.25rem - 1px); ---dropdown-divider-bg: var(--border-color-translucent); ---dropdown-divider-margin-y: 0.5rem; ---dropdown-box-shadow: 0 0.5rem 1rem var(--shadow-color-light); ---dropdown-link-color: hsl(210, 11%, 15%); ---dropdown-link-active-color: var(--body-bg); ---dropdown-link-active-bg: hsl(240, 98%, 17%); ---dropdown-link-disabled-color: hsl(210, 11%, 71%); ---dropdown-item-padding-x: 1rem; ---dropdown-item-padding-y: 0.25rem; ---dropdown-header-color: hsl(210, 7%, 46%); ---dropdown-header-padding-x: 1rem; ---dropdown-header-padding-y: 0.5rem; - -/* ===== TOAST ===== */ ---toast-zindex: 1090; ---toast-padding-x: 0.75rem; ---toast-padding-y: 0.5rem; ---toast-spacing: 1em; ---toast-max-width: 350px; ---toast-font-size: 0.875rem; ---toast-color: ; ---toast-bg: rgba(255, 255, 255, 0.85); ---toast-border-width: 1px; ---toast-border-color: var(--border-color-translucent); ---toast-border-radius: 0.25rem; ---toast-box-shadow: 0 0.5rem 1rem var(--shadow-color-light); ---toast-header-color: hsl(210, 7%, 46%); ---toast-header-bg: rgba(var(--white-rgb), 0.85); ---toast-header-border-color: rgba(var(--black-rgb), var(--opacity-5)); - -/* ===== MODAL ===== */ ---modal-zindex: 1050; ---modal-width: 500px; ---modal-padding: 1rem; ---modal-margin: 0.5rem; ---modal-color: ; ---modal-bg: var(--body-bg); ---modal-border-color: var(--border-color-translucent); ---modal-border-width: 1px; ---modal-border-radius: 0.3rem; ---modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); ---modal-inner-border-radius: calc(0.3rem - 1px); ---modal-header-padding-x: 1rem; ---modal-header-padding-y: 1rem; ---modal-header-padding: 1rem 1rem; ---modal-header-border-color: var(--border-color); ---modal-header-border-width: 1px; ---modal-title-line-height: 1.5; ---modal-footer-gap: 0.5rem; ---modal-footer-bg: ; ---modal-footer-border-color: var(--border-color); ---modal-footer-border-width: 1px; - -/* ===== TOOLTIP ===== */ ---tooltip-zindex: 1070; ---tooltip-max-width: 200px; ---tooltip-padding-x: 0.5rem; ---tooltip-padding-y: 0.25rem; ---tooltip-margin: ; ---tooltip-font-size: 0.875rem; ---tooltip-color: var(--body-bg); ---tooltip-bg: hsl(0, 0%, 0%); ---tooltip-border-radius: 0.25rem; ---tooltip-opacity: 0.9; ---tooltip-arrow-width: 0.8rem; ---tooltip-arrow-height: 0.4rem; - -/* ===== POPOVER ===== */ ---popover-zindex: 1060; ---popover-max-width: 276px; ---popover-font-size: 0.875rem; ---popover-bg: var(--body-bg); ---popover-border-width: 1px; ---popover-border-color: var(--border-color-translucent); ---popover-border-radius: 0.3rem; ---popover-inner-border-radius: calc(0.3rem - 1px); ---popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); ---popover-header-padding-x: 1rem; ---popover-header-padding-y: 0.5rem; ---popover-header-font-size: 1rem; ---popover-header-color: ; ---popover-header-bg: #f0f0f0; ---popover-body-padding-x: 1rem; ---popover-body-padding-y: 1rem; ---popover-body-color: hsl(210, 11%, 15%); ---popover-arrow-width: 1rem; ---popover-arrow-height: 0.5rem; ---popover-arrow-border: var(--popover-border-color); - -/* ===== SPINNER ===== */ ---spinner-width: 2rem; ---spinner-height: 2rem; ---spinner-vertical-align: -0.125em; ---spinner-border-width: 0.25em; ---spinner-animation-speed: 0.75s; - -/* ===== NAV TABS ===== */ ---nav-tabs-border-width: 1px; ---nav-tabs-border-color: hsl(210, 14%, 89%); ---nav-tabs-border-radius: 0.25rem; ---nav-tabs-link-active-color: hsl(210, 9%, 31%); ---nav-tabs-link-active-bg: var(--body-bg); ---nav-tabs-link-active-border-color: hsl(210, 14%, 89%) hsl(210, 14%, 89%) var(--body-bg); - -/* ===== NAV PILLS ===== */ ---nav-pills-border-radius: 0.25rem; ---nav-pills-link-active-color: var(--body-bg); ---nav-pills-link-active-bg: hsl(240, 98%, 17%); - -/* ===== TABLE ===== */ ---table-color: var(--body-color); ---table-bg: transparent; ---table-border-color: var(--border-color); ---table-accent-bg: transparent; ---table-striped-color: var(--body-color); ---table-striped-bg: rgba(var(--black-rgb), var(--opacity-5)); ---table-active-color: var(--body-color); ---table-active-bg: rgba(var(--black-rgb), 0.075); - -/* ===== FOOTER ===== */ ---footer-padding-top: 1rem; ---footer-padding-bottom: 80px; ---footer-grid-padding-y: 2.5rem; ---footer-grid-padding-x: 0.5em; - -/* ===== BACKDROP ===== */ ---backdrop-zindex: 1040; ---backdrop-bg: hsl(0, 0%, 0%); ---backdrop-opacity: 0.5; - -/* ===== THEME FAB ===== */ ---theme-fab-bg: var(--color-primary, #112855); ---theme-fab-color: #fff; ---theme-fab-btn-bg: rgba(255,255,255,.15); ---theme-fab-border: rgba(255, 255, 255, 0.3); - -/* ===== OFFLINE PAGE ===== */ ---offline-card-bg: rgba(0, 0, 0, 0.55); } .btn { diff --git a/src/sync_custom_vars.php b/src/sync_custom_vars.php index 39c6471..2db9824 100644 --- a/src/sync_custom_vars.php +++ b/src/sync_custom_vars.php @@ -97,28 +97,24 @@ final class MokoCssVarSync private static function syncFile(string $starterPath, string $userPath): array { $starterVars = self::extractVarsWithContext($starterPath); - $userVars = self::extractVarNames($userPath); + $userVarsMap = self::extractVarsWithContext($userPath); + $userNames = self::extractVarNames($userPath); + // Find missing variables $missing = []; foreach ($starterVars as $name => $declaration) { - if (!isset($userVars[$name])) { + if (!isset($userNames[$name])) { $missing[$name] = $declaration; } } - if (empty($missing)) { - return ['added' => [], 'skipped' => []]; - } + // Rebuild the entire :root block in starter file order. + // User's custom values are preserved; missing vars get starter defaults. + $reordered = self::rebuildInStarterOrder($starterPath, $userVarsMap, $missing); - // Group missing variables by their section comment header. - $sections = self::groupBySection($missing, $starterPath); - - // Build the injection block. - $injection = self::buildInjectionBlock($sections); - - // Insert before the closing } of the :root rule. + // Replace the :root block in the user file with the reordered version. $userCss = file_get_contents($userPath); - $userCss = self::injectBeforeRootClose($userCss, $injection); + $userCss = self::replaceRootBlock($userCss, $reordered); // Write back (atomic: write to .tmp then rename). $tmpPath = $userPath . '.tmp'; @@ -128,6 +124,104 @@ final class MokoCssVarSync return ['added' => array_keys($missing), 'skipped' => []]; } + /** + * Rebuild all variables in the order they appear in the starter file. + * User values are preserved; missing vars use starter defaults. + * + * @param string $starterPath Path to starter file. + * @param array $userVars User's variable name => declaration. + * @param array $missing Missing variable name => starter declaration. + * @return string Complete CSS content for inside :root { }. + */ + private static function rebuildInStarterOrder(string $starterPath, array $userVars, array $missing): string + { + $lines = file($starterPath, FILE_IGNORE_NEW_LINES); + $output = []; + $inRoot = false; + $depth = 0; + + foreach ($lines as $line) { + // Track when we enter :root + if (!$inRoot && preg_match('/:root/', $line)) { + $inRoot = true; + continue; + } + + if (!$inRoot) { + continue; + } + + // Track braces + if (strpos($line, '{') !== false) { + $depth++; + continue; + } + if (strpos($line, '}') !== false) { + $depth--; + if ($depth < 0) { + break; // End of :root + } + continue; + } + + // Section comment headers — always include + if (preg_match('/\/\*\s*=+\s*.+?\s*=+\s*\*\//', $line)) { + $output[] = $line; + continue; + } + + // Regular comments — include + if (preg_match('/^\s*\/\*/', $line) || preg_match('/^\s*\*/', $line)) { + $output[] = $line; + continue; + } + + // Blank lines — include + if (trim($line) === '') { + $output[] = ''; + continue; + } + + // Variable declaration + if (preg_match('/^\s*(--[\w-]+)\s*:/', $line, $m)) { + $name = trim($m[1]); + if (isset($userVars[$name])) { + // Use the user's custom value + $output[] = $userVars[$name]; + } elseif (isset($missing[$name])) { + // New variable — use starter default + $output[] = $missing[$name]; + } + continue; + } + + // Other lines (e.g. color-scheme) — include as-is + $output[] = $line; + } + + return implode("\n", $output); + } + + /** + * Replace the content inside :root { ... } with new content. + */ + private static function replaceRootBlock(string $css, string $newContent): string + { + $rootStart = preg_match('/:root[^{]*\{/', $css, $m, PREG_OFFSET_CAPTURE); + if (!$rootStart) { + return $css; + } + + $openBrace = $m[0][1] + strlen($m[0][0]); + $closeBrace = self::findRootClosingBrace($css); + + if ($closeBrace === false) { + return $css; + } + + return substr($css, 0, $openBrace) . "\n" . $newContent . "\n" . substr($css, $closeBrace); + } + /** * Extract CSS custom property declarations with their full text (name: value). * Only extracts from the first :root block. diff --git a/src/templateDetails.xml b/src/templateDetails.xml index f9135d6..e64e9b9 100644 --- a/src/templateDetails.xml +++ b/src/templateDetails.xml @@ -39,13 +39,13 @@ MokoCassiopeia - 03.10.03 + 03.10.04 script.php 2026-04-15 Jonathan Miller || Moko Consulting hello@mokoconsulting.tech (C)GNU General Public License Version 3 - 2026 Moko Consulting - Version 03.10.03 License Joomla PHP

MokoCassiopeia Template Description

MokoCassiopeia continues Joomla's tradition of space-themed default templates— building on the legacy of Solarflare (Joomla 1.0), Milkyway (Joomla 1.5), and Protostar (Joomla 3.0).

This template is a customized fork of the Cassiopeia template introduced in Joomla 4, preserving its modern, accessible, and mobile-first foundation while introducing new stylistic enhancements and structural refinements specifically tailored for use by Moko Consulting.

Custom Colour Themes

Starter palette files are included with the template. To create a custom colour scheme, copy templates/mokocassiopeia/templates/light.custom.css to media/templates/site/mokocassiopeia/css/theme/light.custom.css, or templates/mokocassiopeia/templates/dark.custom.css to media/templates/site/mokocassiopeia/css/theme/dark.custom.css. Customise the CSS variables to match your brand, then activate your palette in System → Site Templates → MokoCassiopeia → Theme tab by selecting "Custom" for the Light or Dark Mode Palette. A full variable reference is available in the CSS Variables tab in template options.

Custom CSS & JavaScript

For site-specific styles and scripts that should survive template updates, create the following files:

  • media/templates/site/mokocassiopeia/css/user.css — loaded on every page for custom CSS overrides.
  • media/templates/site/mokocassiopeia/js/user.js — loaded on every page for custom JavaScript.

These files are gitignored and will not be overwritten by template updates.

Code Attribution

This template is based on the original Cassiopeia template developed by the Joomla! Project and released under the GNU General Public License.

Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards.

It includes integration with Bootstrap TOC, an open-source table of contents generator by A. Feld, licensed under the MIT License.

All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable.

]]> + Version 03.10.04 License Joomla PHP

MokoCassiopeia Template Description

MokoCassiopeia continues Joomla's tradition of space-themed default templates— building on the legacy of Solarflare (Joomla 1.0), Milkyway (Joomla 1.5), and Protostar (Joomla 3.0).

This template is a customized fork of the Cassiopeia template introduced in Joomla 4, preserving its modern, accessible, and mobile-first foundation while introducing new stylistic enhancements and structural refinements specifically tailored for use by Moko Consulting.

Custom Colour Themes

Starter palette files are included with the template. To create a custom colour scheme, copy templates/mokocassiopeia/templates/light.custom.css to media/templates/site/mokocassiopeia/css/theme/light.custom.css, or templates/mokocassiopeia/templates/dark.custom.css to media/templates/site/mokocassiopeia/css/theme/dark.custom.css. Customise the CSS variables to match your brand, then activate your palette in System → Site Templates → MokoCassiopeia → Theme tab by selecting "Custom" for the Light or Dark Mode Palette. A full variable reference is available in the CSS Variables tab in template options.

Custom CSS & JavaScript

For site-specific styles and scripts that should survive template updates, create the following files:

  • media/templates/site/mokocassiopeia/css/user.css — loaded on every page for custom CSS overrides.
  • media/templates/site/mokocassiopeia/js/user.js — loaded on every page for custom JavaScript.

These files are gitignored and will not be overwritten by template updates.

Code Attribution

This template is based on the original Cassiopeia template developed by the Joomla! Project and released under the GNU General Public License.

Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards.

It includes integration with Bootstrap TOC, an open-source table of contents generator by A. Feld, licensed under the MIT License.

All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable.

]]> 1 component.php diff --git a/updates.xml b/updates.xml index dc3cfdf..d36332a 100644 --- a/updates.xml +++ b/updates.xml @@ -1,7 +1,7 @@ @@ -13,11 +13,11 @@ mokocassiopeia template site - 03.10.03 + 03.10.04 2026-04-18 https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/tag/development - https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/development/mokocassiopeia-03.10.03-dev.zip + https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/development/mokocassiopeia-03.10.04-dev.zip a7bc2dbc7abeb91a8e079c4d29b8c77366a28066bcf963b01c351593865f0f7c development @@ -34,11 +34,11 @@ mokocassiopeia template site - 03.10.03 + 03.10.04 2026-04-14 https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/tag/alpha - https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/alpha/mokocassiopeia-03.10.03-alpha.zip + https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/alpha/mokocassiopeia-03.10.04-alpha.zip c2660acdf7389244462485f7ab4c286e9f851366a148acc16739a184576f7932 alpha @@ -55,11 +55,11 @@ mokocassiopeia template site - 03.10.03 + 03.10.04 2026-04-14 https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/tag/beta - https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/beta/mokocassiopeia-03.10.03-beta.zip + https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/beta/mokocassiopeia-03.10.04-beta.zip 4cbe4fc379182ef17580396e7d12ce4ce95a90017ef364b922bdc2d04b0b3d97 beta @@ -76,12 +76,12 @@ mokocassiopeia template site - 03.10.03 + 03.10.04 2026-04-14 https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/tag/release-candidate - https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/release-candidate/mokocassiopeia-03.10.03-rc.zip - https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/download/release-candidate/mokocassiopeia-03.10.03-rc.zip + https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/release-candidate/mokocassiopeia-03.10.04-rc.zip + https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/download/release-candidate/mokocassiopeia-03.10.04-rc.zip c2660acdf7389244462485f7ab4c286e9f851366a148acc16739a184576f7932 rc @@ -98,12 +98,12 @@ mokocassiopeia template site - 03.10.03 + 03.10.04 2026-04-14 https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/tag/v03 - https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.10.03.zip - https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.10.03.zip + https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.10.04.zip + https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.10.04.zip c2660acdf7389244462485f7ab4c286e9f851366a148acc16739a184576f7932 stable