From 6a831c8bd79d5efb72782d4b1787408d87a7fa8c Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 04:42:51 +0000 Subject: [PATCH 01/45] Initial plan From 1719d0e6fd71fc8a0de356bf986cde8140f428c6 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 04:47:25 +0000 Subject: [PATCH 02/45] Fix language constants and update dates to 2026 Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- README.md | 2 +- .../language/en-GB/tpl_mokocassiopeia.sys.ini | 2 +- .../language/en-US/tpl_mokocassiopeia.sys.ini | 2 +- src/language/en-GB/tpl_mokocassiopeia.ini | 7 +++---- src/language/en-US/tpl_mokocassiopeia.ini | 11 +++++------ src/templates/component.php | 2 +- src/templates/custom.php | 2 +- src/templates/error.php | 2 +- src/templates/html/com_content/article/toc-left.php | 2 +- src/templates/html/com_content/article/toc-right.php | 2 +- src/templates/index.php | 2 +- src/templates/offline.php | 2 +- src/templates/templateDetails.xml | 10 +++++----- 13 files changed, 23 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 34eabf7..d1ef4b0 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ - -
+
@@ -134,7 +134,7 @@
-
+
From 41616291916249a6b6e63473a674b5d0bafdab8c Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 04:48:47 +0000 Subject: [PATCH 03/45] Fix double semicolon in sys.ini files copyright comments Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/administrator/language/en-GB/tpl_mokocassiopeia.sys.ini | 2 +- src/administrator/language/en-US/tpl_mokocassiopeia.sys.ini | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/administrator/language/en-GB/tpl_mokocassiopeia.sys.ini b/src/administrator/language/en-GB/tpl_mokocassiopeia.sys.ini index b600142..1987925 100644 --- a/src/administrator/language/en-GB/tpl_mokocassiopeia.sys.ini +++ b/src/administrator/language/en-GB/tpl_mokocassiopeia.sys.ini @@ -1,4 +1,4 @@ -; ; Copyright (C) 2026 Moko Consulting +; Copyright (C) 2026 Moko Consulting ; ; This file is part of a Moko Consulting project. ; diff --git a/src/administrator/language/en-US/tpl_mokocassiopeia.sys.ini b/src/administrator/language/en-US/tpl_mokocassiopeia.sys.ini index 31b82ae..8327df0 100644 --- a/src/administrator/language/en-US/tpl_mokocassiopeia.sys.ini +++ b/src/administrator/language/en-US/tpl_mokocassiopeia.sys.ini @@ -1,4 +1,4 @@ -; ; Copyright (C) 2026 Moko Consulting +; Copyright (C) 2026 Moko Consulting ; ; This file is part of a Moko Consulting project. ; From 2e366ea45173ebf7efb01fd0494a5fb2fbe19f05 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 05:02:16 +0000 Subject: [PATCH 04/45] Convert language constants from hyphenated to underscore format Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- .../language/en-GB/tpl_mokocassiopeia.sys.ini | 26 +++++++++---------- .../language/en-US/tpl_mokocassiopeia.sys.ini | 26 +++++++++---------- 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/src/administrator/language/en-GB/tpl_mokocassiopeia.sys.ini b/src/administrator/language/en-GB/tpl_mokocassiopeia.sys.ini index 1987925..666f1f7 100644 --- a/src/administrator/language/en-GB/tpl_mokocassiopeia.sys.ini +++ b/src/administrator/language/en-GB/tpl_mokocassiopeia.sys.ini @@ -12,24 +12,24 @@ ; BRIEF: English (GB) system language strings for template metadata and installer ; TPL_MOKOCASSIOPEIA="MokoCassiopeia Site template" -TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_COLLAPSE-METISMENU="Collapsible Dropdown" -TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_DROPDOWN-METISMENU="Dropdown" +TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_COLLAPSE_METISMENU="Collapsible Dropdown" +TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_DROPDOWN_METISMENU="Dropdown" TPL_MOKOCASSIOPEIA_POSITION_BANNER="Banner" -TPL_MOKOCASSIOPEIA_POSITION_BELOW-TOP="Below Top" -TPL_MOKOCASSIOPEIA_POSITION_BOTTOM-A="Bottom-A" -TPL_MOKOCASSIOPEIA_POSITION_BOTTOM-B="Bottom-B" +TPL_MOKOCASSIOPEIA_POSITION_BELOW_TOP="Below Top" +TPL_MOKOCASSIOPEIA_POSITION_BOTTOM_A="Bottom-A" +TPL_MOKOCASSIOPEIA_POSITION_BOTTOM_B="Bottom-B" TPL_MOKOCASSIOPEIA_POSITION_BREADCRUMBS="Breadcrumbs" TPL_MOKOCASSIOPEIA_POSITION_DEBUG="Debug" TPL_MOKOCASSIOPEIA_POSITION_FOOTER="Footer" -TPL_MOKOCASSIOPEIA_POSITION_MAIN-BOTTOM="Main-bottom" -TPL_MOKOCASSIOPEIA_POSITION_MAIN-TOP="Main-top" +TPL_MOKOCASSIOPEIA_POSITION_MAIN_BOTTOM="Main-bottom" +TPL_MOKOCASSIOPEIA_POSITION_MAIN_TOP="Main-top" TPL_MOKOCASSIOPEIA_POSITION_MENU="Menu" TPL_MOKOCASSIOPEIA_POSITION_SEARCH="Search" -TPL_MOKOCASSIOPEIA_POSITION_SIDEBAR-LEFT="Sidebar-left" -TPL_MOKOCASSIOPEIA_POSITION_SIDEBAR-RIGHT="Sidebar-right" -TPL_MOKOCASSIOPEIA_POSITION_TOP-A="Top-a" -TPL_MOKOCASSIOPEIA_POSITION_TOP-B="Top-b" +TPL_MOKOCASSIOPEIA_POSITION_SIDEBAR_LEFT="Sidebar-left" +TPL_MOKOCASSIOPEIA_POSITION_SIDEBAR_RIGHT="Sidebar-right" +TPL_MOKOCASSIOPEIA_POSITION_TOP_A="Top-a" +TPL_MOKOCASSIOPEIA_POSITION_TOP_B="Top-b" TPL_MOKOCASSIOPEIA_POSITION_TOPBAR="Top Bar" -TPL_MOKOCASSIOPEIA_POSITION_DRAWER-LEFT="Drawer-Left" -TPL_MOKOCASSIOPEIA_POSITION_DRAWER-RIGHT="Drawer-Right" +TPL_MOKOCASSIOPEIA_POSITION_DRAWER_LEFT="Drawer-Left" +TPL_MOKOCASSIOPEIA_POSITION_DRAWER_RIGHT="Drawer-Right" TPL_MOKOCASSIOPEIA_XML_DESCRIPTION="

MokoCassiopeia Template Description

MokoCassiopeia 3.0 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.

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.

" diff --git a/src/administrator/language/en-US/tpl_mokocassiopeia.sys.ini b/src/administrator/language/en-US/tpl_mokocassiopeia.sys.ini index 8327df0..6f1c6a9 100644 --- a/src/administrator/language/en-US/tpl_mokocassiopeia.sys.ini +++ b/src/administrator/language/en-US/tpl_mokocassiopeia.sys.ini @@ -12,24 +12,24 @@ ; BRIEF: English (US) system language strings for template metadata and installer ; TPL_MOKOCASSIOPEIA="MokoCassiopeia Site template" -TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_COLLAPSE-METISMENU="Collapsible Dropdown" -TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_DROPDOWN-METISMENU="Dropdown" +TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_COLLAPSE_METISMENU="Collapsible Dropdown" +TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_DROPDOWN_METISMENU="Dropdown" TPL_MOKOCASSIOPEIA_POSITION_BANNER="Banner" -TPL_MOKOCASSIOPEIA_POSITION_BELOW-TOP="Below Top" -TPL_MOKOCASSIOPEIA_POSITION_BOTTOM-A="Bottom-A" -TPL_MOKOCASSIOPEIA_POSITION_BOTTOM-B="Bottom-B" +TPL_MOKOCASSIOPEIA_POSITION_BELOW_TOP="Below Top" +TPL_MOKOCASSIOPEIA_POSITION_BOTTOM_A="Bottom-A" +TPL_MOKOCASSIOPEIA_POSITION_BOTTOM_B="Bottom-B" TPL_MOKOCASSIOPEIA_POSITION_BREADCRUMBS="Breadcrumbs" TPL_MOKOCASSIOPEIA_POSITION_DEBUG="Debug" TPL_MOKOCASSIOPEIA_POSITION_FOOTER="Footer" -TPL_MOKOCASSIOPEIA_POSITION_MAIN-BOTTOM="Main-bottom" -TPL_MOKOCASSIOPEIA_POSITION_MAIN-TOP="Main-top" +TPL_MOKOCASSIOPEIA_POSITION_MAIN_BOTTOM="Main-bottom" +TPL_MOKOCASSIOPEIA_POSITION_MAIN_TOP="Main-top" TPL_MOKOCASSIOPEIA_POSITION_MENU="Menu" TPL_MOKOCASSIOPEIA_POSITION_SEARCH="Search" -TPL_MOKOCASSIOPEIA_POSITION_SIDEBAR-LEFT="Sidebar-left" -TPL_MOKOCASSIOPEIA_POSITION_SIDEBAR-RIGHT="Sidebar-right" -TPL_MOKOCASSIOPEIA_POSITION_TOP-A="Top-a" -TPL_MOKOCASSIOPEIA_POSITION_TOP-B="Top-b" +TPL_MOKOCASSIOPEIA_POSITION_SIDEBAR_LEFT="Sidebar-left" +TPL_MOKOCASSIOPEIA_POSITION_SIDEBAR_RIGHT="Sidebar-right" +TPL_MOKOCASSIOPEIA_POSITION_TOP_A="Top-a" +TPL_MOKOCASSIOPEIA_POSITION_TOP_B="Top-b" TPL_MOKOCASSIOPEIA_POSITION_TOPBAR="Top Bar" -TPL_MOKOCASSIOPEIA_POSITION_DRAWER-LEFT="Drawer-Left" -TPL_MOKOCASSIOPEIA_POSITION_DRAWER-RIGHT="Drawer-Right" +TPL_MOKOCASSIOPEIA_POSITION_DRAWER_LEFT="Drawer-Left" +TPL_MOKOCASSIOPEIA_POSITION_DRAWER_RIGHT="Drawer-Right" TPL_MOKOCASSIOPEIA_XML_DESCRIPTION="

MokoCassiopeia Template Description

MokoCassiopeia 3.0 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.

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.

" From 67f9af7a85938477117f868b077c04a1f5cb9ee2 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 05:05:36 +0000 Subject: [PATCH 05/45] Add missing fieldset label constants to sys.ini files Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/administrator/language/en-GB/tpl_mokocassiopeia.sys.ini | 2 ++ src/administrator/language/en-US/tpl_mokocassiopeia.sys.ini | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/administrator/language/en-GB/tpl_mokocassiopeia.sys.ini b/src/administrator/language/en-GB/tpl_mokocassiopeia.sys.ini index 666f1f7..eda3eff 100644 --- a/src/administrator/language/en-GB/tpl_mokocassiopeia.sys.ini +++ b/src/administrator/language/en-GB/tpl_mokocassiopeia.sys.ini @@ -12,6 +12,8 @@ ; BRIEF: English (GB) system language strings for template metadata and installer ; TPL_MOKOCASSIOPEIA="MokoCassiopeia Site template" +TPL_MOKOCASSIOPEIA_GOOGLE_FIELDSET_LABEL="Google" +TPL_MOKOCASSIOPEIA_DRAWERS_FIELDSET_LABEL="Drawers" TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_COLLAPSE_METISMENU="Collapsible Dropdown" TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_DROPDOWN_METISMENU="Dropdown" TPL_MOKOCASSIOPEIA_POSITION_BANNER="Banner" diff --git a/src/administrator/language/en-US/tpl_mokocassiopeia.sys.ini b/src/administrator/language/en-US/tpl_mokocassiopeia.sys.ini index 6f1c6a9..db2034a 100644 --- a/src/administrator/language/en-US/tpl_mokocassiopeia.sys.ini +++ b/src/administrator/language/en-US/tpl_mokocassiopeia.sys.ini @@ -12,6 +12,8 @@ ; BRIEF: English (US) system language strings for template metadata and installer ; TPL_MOKOCASSIOPEIA="MokoCassiopeia Site template" +TPL_MOKOCASSIOPEIA_GOOGLE_FIELDSET_LABEL="Google" +TPL_MOKOCASSIOPEIA_DRAWERS_FIELDSET_LABEL="Drawers" TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_COLLAPSE_METISMENU="Collapsible Dropdown" TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_DROPDOWN_METISMENU="Dropdown" TPL_MOKOCASSIOPEIA_POSITION_BANNER="Banner" From dd02abf76bee9e9f84efd219620e40f452c84651 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 05:06:17 +0000 Subject: [PATCH 06/45] Remove default logo file path from template configuration Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/templates/templateDetails.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/templates/templateDetails.xml b/src/templates/templateDetails.xml index 676187d..d99b492 100644 --- a/src/templates/templateDetails.xml +++ b/src/templates/templateDetails.xml @@ -220,7 +220,7 @@ - + From 56b94175da9a031642883d03499719ac75b8d264 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 05:14:34 +0000 Subject: [PATCH 07/45] Update comprehensive plan for all fixes Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/templates/error.php | 11 +++++------ src/templates/index.php | 11 +++++------ src/templates/templateDetails.xml | 2 +- 3 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/templates/error.php b/src/templates/error.php index a7fc67e..3d2ad3b 100644 --- a/src/templates/error.php +++ b/src/templates/error.php @@ -169,13 +169,12 @@ if ($logoFile !== '') { false, 0 ); -} elseif ($this->params->get('siteTitle')) { - $brandHtml = '' - . htmlspecialchars($this->params->get('siteTitle'), ENT_COMPAT, 'UTF-8') - . ''; } else { - // Fallback to a bundled image (relative to media paths) - $brandHtml = HTMLHelper::_('image', 'full_logo.png', $sitename, ['class' => 'logo d-inline-block', 'loading' => 'eager', 'decoding' => 'async'], true, 0); + // If no logo file, show the title (defaults to "MokoCassiopeia" if not set) + $siteTitle = $this->params->get('siteTitle', 'MokoCassiopeia'); + $brandHtml = '' + . htmlspecialchars($siteTitle, ENT_COMPAT, 'UTF-8') + . ''; } // ------------------ Error details ------------------ diff --git a/src/templates/index.php b/src/templates/index.php index 210d850..4375332 100644 --- a/src/templates/index.php +++ b/src/templates/index.php @@ -205,13 +205,12 @@ if ($logoFile !== '') { false, 0 ); -} elseif ($this->params->get('siteTitle')) { - $brandHtml = '' - . htmlspecialchars($this->params->get('siteTitle'), ENT_COMPAT, 'UTF-8') - . ''; } else { - // Fallback to a bundled image (relative to media paths) - $brandHtml = HTMLHelper::_('image', 'full_logo.png', $sitename, ['class' => 'logo d-inline-block', 'loading' => 'eager', 'decoding' => 'async'], true, 0); + // If no logo file, show the title (defaults to "MokoCassiopeia" if not set) + $siteTitle = $this->params->get('siteTitle', 'MokoCassiopeia'); + $brandHtml = '' + . htmlspecialchars($siteTitle, ENT_COMPAT, 'UTF-8') + . ''; } // Layout flags diff --git a/src/templates/templateDetails.xml b/src/templates/templateDetails.xml index d99b492..0137c00 100644 --- a/src/templates/templateDetails.xml +++ b/src/templates/templateDetails.xml @@ -221,7 +221,7 @@ - + From 733bcc3496668bfb3bc4c01c4ca798566d1119d1 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 05:17:06 +0000 Subject: [PATCH 08/45] Fix input fields to follow dark theme with CSS variables Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/media/css/colors/dark/colors_standard.css | 10 +++++++ .../css/colors/light/colors_standard.css | 10 +++++++ src/media/css/template.css | 28 +++++++++---------- 3 files changed, 34 insertions(+), 14 deletions(-) diff --git a/src/media/css/colors/dark/colors_standard.css b/src/media/css/colors/dark/colors_standard.css index b1d5a06..dceb18c 100644 --- a/src/media/css/colors/dark/colors_standard.css +++ b/src/media/css/colors/dark/colors_standard.css @@ -246,6 +246,16 @@ --focus-ring-opacity: .6; --focus-ring-color: #5472ff66; + /* Forms and inputs - adapted for dark mode */ + --input-color: #e6ebf1; + --input-bg: #1a2332; + --input-border-color: #3a4250; + --input-focus-border-color: #5472ff; + --input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); + --input-placeholder-color: #8894aa; + --input-disabled-bg: #0f1318; + --input-disabled-border-color: #2b323b; + --form-valid-color: #78d694; --form-valid-border-color: #78d694; --form-invalid-color: #ff8e86; diff --git a/src/media/css/colors/light/colors_standard.css b/src/media/css/colors/light/colors_standard.css index a578960..87036b5 100644 --- a/src/media/css/colors/light/colors_standard.css +++ b/src/media/css/colors/light/colors_standard.css @@ -219,6 +219,16 @@ --focus-ring-width: .25rem; --focus-ring-opacity: .25; --focus-ring-color: #01015640; + /* Forms and inputs */ + --input-color: hsl(210, 11%, 15%); + --input-bg: #ffffff; + --input-border-color: hsl(210, 14%, 83%); + --input-focus-border-color: #8894aa; + --input-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); + --input-placeholder-color: hsl(210, 7%, 46%); + --input-disabled-bg: hsl(210, 16%, 93%); + --input-disabled-border-color: hsl(210, 14%, 83%); + --form-valid-color: #448344; --form-valid-border-color: #448344; --form-invalid-color: #a51f18; diff --git a/src/media/css/template.css b/src/media/css/template.css index 5d1d9ca..fc8bb80 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -2601,10 +2601,10 @@ progress { font-size: 1rem; font-weight: 400; line-height: 1; - color: hsl(210, 11%, 15%); - background-color: var(--body-color); + color: var(--input-color); + background-color: var(--input-bg); background-clip: padding-box; - border: 1px solid hsl(210, 14%, 83%); + border: 1px solid var(--input-border-color); -webkit-appearance: none; -moz-appearance: none; appearance: none; @@ -2633,12 +2633,12 @@ progress { } .form-control:focus { - color: hsl(210, 11%, 15%); - background-color: var(--body-color); - border-color: #8894aa; + color: var(--input-color); + background-color: var(--input-bg); + border-color: var(--input-focus-border-color); outline: 0; - -webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); - box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); + -webkit-box-shadow: var(--input-focus-box-shadow); + box-shadow: var(--input-focus-box-shadow); } .form-control::-webkit-date-and-time-value { @@ -2646,32 +2646,32 @@ progress { } .form-control::-webkit-input-placeholder { - color: hsl(210, 7%, 46%); + color: var(--input-placeholder-color); opacity: 1; } .form-control::-moz-placeholder { - color: hsl(210, 7%, 46%); + color: var(--input-placeholder-color); opacity: 1; } .form-control:-ms-input-placeholder { - color: hsl(210, 7%, 46%); + color: var(--input-placeholder-color); opacity: 1; } .form-control::-ms-input-placeholder { - color: hsl(210, 7%, 46%); + color: var(--input-placeholder-color); opacity: 1; } .form-control::placeholder { - color: hsl(210, 7%, 46%); + color: var(--input-placeholder-color); opacity: 1; } .form-control:disabled { - background-color: hsl(210, 16%, 93%); + background-color: var(--input-disabled-bg); opacity: 1; } From 20e9b396889359abb61f2870bd8254b14b195693 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 05:18:12 +0000 Subject: [PATCH 09/45] Add search button styling and fix responsive header layout Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/media/css/user.css | 63 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/src/media/css/user.css b/src/media/css/user.css index 740330f..d012938 100644 --- a/src/media/css/user.css +++ b/src/media/css/user.css @@ -16,3 +16,66 @@ */ /* Add your custom CSS here */ + +/* Enhanced search button styling */ +.mod-finder__search.input-group button, +.container-search button[type="submit"] { + background-color: var(--color-primary); + color: var(--mainmenu-nav-link-color); + border-color: var(--color-primary); + padding: 0.6rem 1rem; + border-radius: 0 0.25rem 0.25rem 0; + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; +} + +.mod-finder__search.input-group button:hover, +.container-search button[type="submit"]:hover { + background-color: var(--color-hover); + border-color: var(--color-hover); +} + +.mod-finder__search.input-group button:focus, +.container-search button[type="submit"]:focus { + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); +} + +/* Responsive header menu and search layout improvements */ +@media (max-width: 991.98px) { + .container-header .container-nav { + flex-direction: column; + } + + .container-header .container-nav nav { + width: 100%; + margin-bottom: 1rem; + } + + .container-header .container-search { + width: 100%; + margin-top: 0.5rem; + } + + .mod-finder__search.input-group { + max-width: 100%; + } +} + +@media (min-width: 992px) { + .container-header .container-nav { + display: flex; + flex-direction: row; + align-items: center; + gap: 2rem; + } + + .container-header .container-nav nav { + flex: 1; + } + + .container-header .container-search { + flex: 0 0 auto; + min-width: 300px; + margin-top: 0; + } +} From 32444af374e7e65f92deee41c9a7e9c9a7a38d9e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 05:18:44 +0000 Subject: [PATCH 10/45] Add security documentation for custom head content feature Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- SECURITY.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/SECURITY.md b/SECURITY.md index 4a48a2d..33d286b 100644 --- a/SECURITY.md +++ b/SECURITY.md @@ -123,6 +123,25 @@ Security posture is reinforced through operational controls: * Consistent path normalization and whitespace hygiene checks where required for release correctness. * Least privilege for GitHub Actions permissions. +### Template Security Features + +**Custom Head Content Injection** + +The template provides Custom Head Code fields (`custom_head_start` and `custom_head_end`) that allow administrators to inject custom HTML, CSS, and JavaScript code. This is an intentional feature for: + +* Adding analytics scripts (Google Analytics, Google Tag Manager) +* Custom meta tags +* Third-party integrations +* Custom styling + +**Security Considerations:** + +* These fields use `filter="raw"` to allow HTML/JS injection +* **Access is restricted to Joomla administrators only** via template configuration +* This is not an XSS vulnerability as it requires administrator privileges +* Administrators should only add trusted code from verified sources +* Regular security audits should review custom head content + This policy does not guarantee that all vulnerabilities will be prevented. It defines how risk is managed when issues are discovered. ## Safe Harbor From d7e12d3897a8a4561138cb8d46e8992eb15809b9 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 05:20:30 +0000 Subject: [PATCH 11/45] Address code review feedback: Add disabled border styling and update SECURITY.md revision history Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- SECURITY.md | 1 + src/media/css/template.css | 1 + 2 files changed, 2 insertions(+) diff --git a/SECURITY.md b/SECURITY.md index 33d286b..9c2b528 100644 --- a/SECURITY.md +++ b/SECURITY.md @@ -181,4 +181,5 @@ If you want credit, include the name or handle to list in an advisory. If you pr | Date | Change Summary | Author | | ---------- | ------------------------------------------------------------------------------------------------ | --------------- | +| 2026-01-30 | Added Template Security Features section documenting custom head content injection controls. | Copilot Agent | | 2025-12-18 | Initial publication of security policy, intake channels, triage targets, and disclosure process. | Moko Consulting | diff --git a/src/media/css/template.css b/src/media/css/template.css index fc8bb80..b1097b3 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -2672,6 +2672,7 @@ progress { .form-control:disabled { background-color: var(--input-disabled-bg); + border-color: var(--input-disabled-border-color); opacity: 1; } From 50b9298a69f9ec73ccccc7d52b56b30d20052b6b Mon Sep 17 00:00:00 2001 From: Jonathan Miller <230051081+jmiller-moko@users.noreply.github.com> Date: Thu, 29 Jan 2026 23:26:46 -0600 Subject: [PATCH 12/45] Fixed remanent `moko-cassiopeia` --- src/media/css/colors/dark/colors_alternative.css | 4 ++-- src/media/css/colors/dark/colors_standard.css | 4 ++-- src/media/css/colors/light/colors_alternative.css | 4 ++-- src/media/css/colors/light/colors_standard.css | 4 ++-- src/media/css/editor.css | 2 +- src/media/css/system/searchtools/searchtools.css | 2 +- src/media/css/template-rtl.css | 2 +- src/media/css/template.css | 2 +- 8 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/media/css/colors/dark/colors_alternative.css b/src/media/css/colors/dark/colors_alternative.css index d934c26..841fe66 100644 --- a/src/media/css/colors/dark/colors_alternative.css +++ b/src/media/css/colors/dark/colors_alternative.css @@ -10,7 +10,7 @@ # FILE INFORMATION DEFGROUP: Joomla.Template.Site INGROUP: MokoCassiopeia - PATH: ./media/templates/site/moko-cassiopeia/css/global/dark/colors_alternative.css + PATH: ./media/templates/site/mokocassiopeia/css/global/dark/colors_alternative.css VERSION: 03.05.00 BRIEF: Alternative dark mode color definitions for MokoCassiopeia template */ @@ -34,7 +34,7 @@ --color-hover: #224FAA; /* Header background (kept same image; works over dark bg) */ - --header-background-image: url('../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); --header-background-attachment: fixed; + --header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); --header-background-attachment: fixed; --header-background-repeat: repeat; --header-background-size: auto; diff --git a/src/media/css/colors/dark/colors_standard.css b/src/media/css/colors/dark/colors_standard.css index dceb18c..9efe72d 100644 --- a/src/media/css/colors/dark/colors_standard.css +++ b/src/media/css/colors/dark/colors_standard.css @@ -10,7 +10,7 @@ # FILE INFORMATION DEFGROUP: Joomla.Template.Site INGROUP: MokoCassiopeia - PATH: ./media/templates/site/moko-cassiopeia/css/global/dark/colors_standard.css + PATH: ./media/templates/site/mokocassiopeia/css/global/dark/colors_standard.css VERSION: 03.05.00 BRIEF: Standard dark mode color definitions for MokoCassiopeia template */ @@ -35,7 +35,7 @@ --color-active: var(--mainmenu-nav-link-color); /* Header background (kept same image; works over dark bg) */ - --header-background-image: url('../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); --header-background-attachment: fixed; + --header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); --header-background-attachment: fixed; --header-background-repeat: repeat; --header-background-size: auto; diff --git a/src/media/css/colors/light/colors_alternative.css b/src/media/css/colors/light/colors_alternative.css index ca59a1c..77a36cc 100644 --- a/src/media/css/colors/light/colors_alternative.css +++ b/src/media/css/colors/light/colors_alternative.css @@ -10,7 +10,7 @@ # FILE INFORMATION DEFGROUP: Joomla.Template.Site INGROUP: MokoCassiopeia - PATH: ./media/templates/site/moko-cassiopeia/css/global/light/colors_alternative.css + PATH: ./media/templates/site/mokocassiopeia/css/global/light/colors_alternative.css VERSION: 03.05.00 BRIEF: Alternative light mode color definitions for MokoCassiopeia template */ @@ -30,7 +30,7 @@ --color-link: #224FAA; --color-hover: var(--accent-color-primary); - --header-background-image: url('../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); + --header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); --header-background-attachment: fixed; --header-background-repeat: repeat; --header-background-size: auto; diff --git a/src/media/css/colors/light/colors_standard.css b/src/media/css/colors/light/colors_standard.css index 87036b5..2d688f3 100644 --- a/src/media/css/colors/light/colors_standard.css +++ b/src/media/css/colors/light/colors_standard.css @@ -10,7 +10,7 @@ # FILE INFORMATION DEFGROUP: Joomla.Template.Site INGROUP: MokoCassiopeia - PATH: ./media/templates/site/moko-cassiopeia/css/global/light/colors_standard.css + PATH: ./media/templates/site/mokocassiopeia/css/global/light/colors_standard.css VERSION: 03.05.00 BRIEF: Standard light mode color definitions for MokoCassiopeia template */ @@ -30,7 +30,7 @@ --color-link: #224FAA; --color-hover: var(--accent-color-primary); - --header-background-image: url('../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); + --header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); --header-background-attachment: fixed; --header-background-repeat: repeat; --header-background-size: auto; diff --git a/src/media/css/editor.css b/src/media/css/editor.css index ecce477..cdef689 100644 --- a/src/media/css/editor.css +++ b/src/media/css/editor.css @@ -10,7 +10,7 @@ # FILE INFORMATION DEFGROUP: Joomla.Template.Site INGROUP: MokoCassiopeia - PATH: ./media/templates/site/moko-cassiopeia/css/editor.css + PATH: ./media/templates/site/mokocassiopeia/css/editor.css VERSION: 03.05.00 BRIEF: Stylesheet for Joomla editor content within MokoCassiopeia template */ diff --git a/src/media/css/system/searchtools/searchtools.css b/src/media/css/system/searchtools/searchtools.css index a698d18..069dd2f 100644 --- a/src/media/css/system/searchtools/searchtools.css +++ b/src/media/css/system/searchtools/searchtools.css @@ -10,7 +10,7 @@ # FILE INFORMATION DEFGROUP: Joomla.Template.Site INGROUP: MokoCassiopeia - PATH: ./media/templates/site/moko-cassiopeia/css/system/searchtools/searchtools.css + PATH: ./media/templates/site/mokocassiopeia/css/system/searchtools/searchtools.css VERSION: 03.05.00 BRIEF: Stylesheet for Joomla search tools integration in MokoCassiopeia template */ diff --git a/src/media/css/template-rtl.css b/src/media/css/template-rtl.css index 9de2728..efd1cda 100644 --- a/src/media/css/template-rtl.css +++ b/src/media/css/template-rtl.css @@ -10,7 +10,7 @@ # FILE INFORMATION DEFGROUP: Joomla.Template.Site INGROUP: MokoCassiopeia - PATH: ./media/templates/site/moko-cassiopeia/css/template-rtl.css + PATH: ./media/templates/site/mokocassiopeia/css/template-rtl.css VERSION: 03.05.00 BRIEF: Right-to-left (RTL) layout stylesheet for MokoCassiopeia template */ diff --git a/src/media/css/template.css b/src/media/css/template.css index b1097b3..e27f5d2 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -10,7 +10,7 @@ # FILE INFORMATION DEFGROUP: Joomla.Template.Site INGROUP: MokoCassiopeia - PATH: ./media/templates/site/moko-cassiopeia/css/template.css + PATH: ./media/templates/site/mokocassiopeia/css/template.css VERSION: 03.05.00 BRIEF: Main stylesheet providing layout, typography, and component styles for MokoCassiopeia */ From b1ce13ca8b24604b4cab5ba9a6fd75d5431fcd13 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 05:27:53 +0000 Subject: [PATCH 13/45] Fix missing asset registry error: Replace template.global.base with template.base Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/templates/component.php | 4 ++-- src/templates/error.php | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/templates/component.php b/src/templates/component.php index b7614a9..d8f5efb 100644 --- a/src/templates/component.php +++ b/src/templates/component.php @@ -91,8 +91,8 @@ $wa->useStyle('template.vendor.social-media-demo'); // css/user.css $wa->useStyle('vendor.bootstrap-toc'); // Optional demo/showcase CSS (available for use, not loaded by default) -// To use: Add 'template.global.social-media-demo' to your article/module -// $wa->useStyle('template.global.social-media-demo'); +// To use: Create the CSS file and register it in joomla.asset.json, then add to your article/module +// Example: $wa->useStyle('template.social-media-demo'); // Color theme (light + optional dark) $colorLightKey = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_LightColorName)); diff --git a/src/templates/error.php b/src/templates/error.php index 3d2ad3b..18155cf 100644 --- a/src/templates/error.php +++ b/src/templates/error.php @@ -72,8 +72,7 @@ $templatePath = 'media/templates/site/mokocassiopeia'; // =========================== // Core template CSS -$wa->useStyle('template.global.base'); // css/template.css -$wa->useStyle('template.global.social-media-demo'); // css/global/social-media-demo.css +$wa->useStyle('template.base'); // css/template.css // Optional vendor CSS $wa->useStyle('vendor.bootstrap-toc'); From 6f3fa4ef788ea31b6d2ed6c8905bb349ec83137c Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 05:29:53 +0000 Subject: [PATCH 14/45] Make title text follow nav background color and improve search container styling Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- .../css/colors/light/colors_standard.css | 2 +- src/media/css/user.css | 56 +++++++++++++++++++ 2 files changed, 57 insertions(+), 1 deletion(-) diff --git a/src/media/css/colors/light/colors_standard.css b/src/media/css/colors/light/colors_standard.css index 2d688f3..c82c361 100644 --- a/src/media/css/colors/light/colors_standard.css +++ b/src/media/css/colors/light/colors_standard.css @@ -221,7 +221,7 @@ --focus-ring-color: #01015640; /* Forms and inputs */ --input-color: hsl(210, 11%, 15%); - --input-bg: #ffffff; + --input-bg: hsl(210, 20%, 98%); --input-border-color: hsl(210, 14%, 83%); --input-focus-border-color: #8894aa; --input-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); diff --git a/src/media/css/user.css b/src/media/css/user.css index d012938..91f5273 100644 --- a/src/media/css/user.css +++ b/src/media/css/user.css @@ -17,6 +17,17 @@ /* Add your custom CSS here */ +/* Site title styling - match nav background color */ +.site-title { + color: var(--nav-bg-color); + font-weight: 600; + font-size: 1.5rem; +} + +.container-header .navbar-brand .site-title { + color: var(--nav-bg-color); +} + /* Enhanced search button styling */ .mod-finder__search.input-group button, .container-search button[type="submit"] { @@ -40,6 +51,51 @@ box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); } +/* Enhanced container-search styling */ +.container-header .container-search { + position: relative; +} + +.container-search .mod-finder__search.input-group { + display: flex; + align-items: stretch; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + border-radius: 0.25rem; + overflow: hidden; + transition: box-shadow 0.2s ease-in-out; +} + +.container-search .mod-finder__search.input-group:focus-within { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +.container-search .form-control, +.container-search .awesomplete input { + border-right: none; + padding: 0.6rem 1rem; + font-size: 0.95rem; + border-radius: 0.25rem 0 0 0.25rem; +} + +.container-search .form-control:focus, +.container-search .awesomplete input:focus { + border-color: var(--input-focus-border-color); + box-shadow: none; +} + +.container-search button[type="submit"], +.container-search .input-group button { + display: flex; + align-items: center; + justify-content: center; + min-width: 3rem; + font-weight: 500; +} + +.container-search .icon-search { + font-size: 1rem; +} + /* Responsive header menu and search layout improvements */ @media (max-width: 991.98px) { .container-header .container-nav { From d2ab55d9b0b9a8b45fdc8d067bc0372d5100b844 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 05:34:58 +0000 Subject: [PATCH 15/45] Fix component.php: Remove incorrect asset reference Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/templates/component.php | 1 - 1 file changed, 1 deletion(-) diff --git a/src/templates/component.php b/src/templates/component.php index d8f5efb..a00924f 100644 --- a/src/templates/component.php +++ b/src/templates/component.php @@ -85,7 +85,6 @@ $templatePath = 'media/templates/site/mokocassiopeia'; // Core template CSS $wa->useStyle('template.base'); // css/template.css -$wa->useStyle('template.vendor.social-media-demo'); // css/user.css // Optional vendor CSS $wa->useStyle('vendor.bootstrap-toc'); From 89a27c4bd6f7993d3c20a481615d2f023e221afd Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 05:40:40 +0000 Subject: [PATCH 16/45] Implement conditional TOC loading and cleanup Bootstrap/TOC code Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/media/css/template.css | 100 ------------------------------------ src/media/js/template.js | 20 +------- src/templates/component.php | 23 --------- src/templates/error.php | 20 -------- src/templates/index.php | 17 +----- 5 files changed, 2 insertions(+), 178 deletions(-) diff --git a/src/media/css/template.css b/src/media/css/template.css index e27f5d2..f807945 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -14012,10 +14012,6 @@ meter { border-bottom-left-radius: 0; } -.article-index .toclink.active { - color: currentColor; -} - .j-main-container .alert { margin: 0.75rem; } @@ -16786,102 +16782,6 @@ form .form-select { border-color: #C7C7C7 } -/* --- TOC right-rail container (non-invasive) --- */ -.container-toc-right { - float: right; - width: 280px; - margin: 0 0 1.25rem 1.25rem; - /* gap from main content */ - position: relative; - z-index: 1; - color: var(--container-toc-color); -} - -/* Make the inner nav sticky without touching bootstrap-toc styles */ -.container-toc-right>nav[id='toc'] { - position: sticky; - top: 6rem; - /* adjust to sit below your header/nav */ - max-height: calc(100vh - 7rem); - overflow: auto; - background: var(--container-toc-bg); - border: 1px solid rgba(0, 0, 0, .08); - border-radius: .75rem; - padding: 1rem; - box-shadow: 0 4px 12px rgba(0, 0, 0, .06); -} - -/* Optional: title spacing if you render a heading inside #toc */ -.container-toc-right>nav[id='toc']>.toc-title { - margin: 0 0 .5rem 0; - font-weight: 600; - border-bottom: 1px solid rgba(0, 0, 0, .06); - padding-bottom: .5rem; -} - -/* Responsive: stack on smaller screens */ -@media (max-width: 991.98px) { - .container-toc-right { - float: none; - width: 100%; - margin: 1rem 0; - } - - .container-toc-right>nav[id='toc'] { - position: relative; - top: auto; - max-height: 300px; - } -} - -/* --- TOC left-rail container (non-invasive) --- */ -.container-toc-left { - float: left; - width: 280px; - margin: 0 1.25rem 1.25rem 0; - /* space on right side for main content */ - position: relative; - z-index: 1; - color: var(--container-toc-color); -} - -/* Make the inner nav sticky without altering bootstrap-toc core styles */ -.container-toc-left>nav[id='toc'] { - position: sticky; - top: 6rem; - /* adjust if your site header height differs */ - max-height: calc(100vh - 7rem); - overflow: auto; - background: var(--bs-body-bg, #fff); - border: 1px solid rgba(0, 0, 0, .08); - border-radius: .75rem; - padding: 1rem; - box-shadow: 0 4px 12px rgba(0, 0, 0, .06); -} - -/* Optional: TOC title styling */ -.container-toc-left>nav[id='toc']>.toc-title { - margin: 0 0 .5rem 0; - font-weight: 600; - border-bottom: 1px solid rgba(0, 0, 0, .06); - padding-bottom: .5rem; -} - -/* Responsive: stack under content on smaller screens */ -@media (max-width: 991.98px) { - .container-toc-left { - float: none; - width: 100%; - margin: 1rem 0; - } - - .container-toc-left>nav[id='toc'] { - position: relative; - top: auto; - max-height: 300px; - } -} - .container-below-topbar { padding: var(--padding-x) var(--padding-y); background-image: var(--container-below-topbar-bg-image); diff --git a/src/media/js/template.js b/src/media/js/template.js index 8970e36..c183742 100644 --- a/src/media/js/template.js +++ b/src/media/js/template.js @@ -11,17 +11,12 @@ INGROUP: MokoCassiopeia PATH: ./media/templates/site/moko-cassiopeia/js/template.js VERSION: 03.06.01 - BRIEF: Consolidated JavaScript for MokoCassiopeia template including theme, TOC, and utilities + BRIEF: Consolidated JavaScript for MokoCassiopeia template including theme and utilities */ (function (win, doc) { "use strict"; - // ======================================================================== - // BOOTSTRAP TOC (inline minified version) - // ======================================================================== - !function(a){"use strict";window.Toc={helpers:{findOrFilter:function(e,t){var n=e.find(t);return e.filter(t).add(n).filter(":not([data-toc-skip])")},generateUniqueIdBase:function(e){return a(e).text().trim().replace(/\'/gi,"").replace(/[& +$,:;=?@"#{}|^~[`%!'<>\]\.\/\(\)\*\\\n\t\b\v]/g,"-").replace(/-{2,}/g,"-").substring(0,64).replace(/^-+|-+$/gm,"").toLowerCase()||e.tagName.toLowerCase()},generateUniqueId:function(e){for(var t=this.generateUniqueIdBase(e),n=0;;n++){var r=t;if(0')},createChildNavList:function(e){var t=this.createNavList();return e.append(t),t},generateNavEl:function(e,t){var n=a('');n.attr("href","#"+e),n.text(t);var r=a("
  • ");return r.append(n),r},generateNavItem:function(e){var t=this.generateAnchor(e),n=a(e),r=n.data("toc-text")||n.text();return this.generateNavEl(t,r)},getTopLevel:function(e){for(var t=1;t<=6;t++){if(1params->get('custom_head_start', null); $params_custom_head_end = $this->params->get('custom_head_end', null); $params_developmentmode = $this->params->get('developmentmode', false); -// Bootstrap behaviors (assets handled via WAM) -HTMLHelper::_('bootstrap.framework'); -HTMLHelper::_('bootstrap.alert'); -HTMLHelper::_('bootstrap.button'); -HTMLHelper::_('bootstrap.carousel'); -HTMLHelper::_('bootstrap.collapse'); -HTMLHelper::_('bootstrap.dropdown'); -HTMLHelper::_('bootstrap.modal'); -HTMLHelper::_('bootstrap.offcanvas'); -HTMLHelper::_('bootstrap.popover'); -HTMLHelper::_('bootstrap.scrollspy'); -HTMLHelper::_('bootstrap.tab'); -HTMLHelper::_('bootstrap.tooltip'); -HTMLHelper::_('bootstrap.toast'); - // Detecting Active Variables $option = $input->getCmd('option', ''); $view = $input->getCmd('view', ''); @@ -86,13 +71,6 @@ $templatePath = 'media/templates/site/mokocassiopeia'; // Core template CSS $wa->useStyle('template.base'); // css/template.css -// Optional vendor CSS -$wa->useStyle('vendor.bootstrap-toc'); - -// Optional demo/showcase CSS (available for use, not loaded by default) -// To use: Create the CSS file and register it in joomla.asset.json, then add to your article/module -// Example: $wa->useStyle('template.social-media-demo'); - // Color theme (light + optional dark) $colorLightKey = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_LightColorName)); $colorDarkKey = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_DarkColorName)); @@ -122,7 +100,6 @@ try { // Scripts $wa->useScript('template.js'); $wa->useScript('theme-init.js'); -$wa->useScript('vendor.bootstrap-toc.js'); /** * VirtueMart detection: diff --git a/src/templates/error.php b/src/templates/error.php index 18155cf..5cea3d0 100644 --- a/src/templates/error.php +++ b/src/templates/error.php @@ -41,22 +41,6 @@ $params_custom_head_start = $params->get('custom_head_start', ''); $params_custom_head_end = $params->get('custom_head_end', ''); $params_developmentmode = $params->get('developmentmode', false); -// Bootstrap behaviors (assets handled via WAM) -HTMLHelper::_('bootstrap.framework'); -HTMLHelper::_('bootstrap.loadCss', true); -HTMLHelper::_('bootstrap.alert'); -HTMLHelper::_('bootstrap.button'); -HTMLHelper::_('bootstrap.carousel'); -HTMLHelper::_('bootstrap.collapse'); -HTMLHelper::_('bootstrap.dropdown'); -HTMLHelper::_('bootstrap.modal'); -HTMLHelper::_('bootstrap.offcanvas'); -HTMLHelper::_('bootstrap.popover'); -HTMLHelper::_('bootstrap.scrollspy'); -HTMLHelper::_('bootstrap.tab'); -HTMLHelper::_('bootstrap.tooltip'); -HTMLHelper::_('bootstrap.toast'); - // ------------------ Params ------------------ $stickyHeader = (bool) $params->get('stickyHeader', 0); @@ -74,9 +58,6 @@ $templatePath = 'media/templates/site/mokocassiopeia'; // Core template CSS $wa->useStyle('template.base'); // css/template.css -// Optional vendor CSS -$wa->useStyle('vendor.bootstrap-toc'); - // Color theme (light + optional dark) $colorLightKey = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_LightColorName)); $colorDarkKey = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_DarkColorName)); @@ -107,7 +88,6 @@ try { $wa->useScript('template.js'); $wa->useScript('theme-init.js'); $wa->useScript('darkmode-toggle.js'); -$wa->useScript('vendor.bootstrap-toc.js'); // Meta $this->setMetaData('viewport', 'width=device-width, initial-scale=1'); diff --git a/src/templates/index.php b/src/templates/index.php index 4375332..9e9b03f 100644 --- a/src/templates/index.php +++ b/src/templates/index.php @@ -61,22 +61,7 @@ $params_developmentmode = $this->params->get('developmentmode', false); $params_theme_enabled = $this->params->get('theme_enabled', 1); $params_theme_fab_enabled = $this->params->get('theme_fab_enabled', 1); $params_theme_fab_pos = $this->params->get('theme_fab_pos', 'br'); -/* -// Bootstrap behaviors (assets handled via WAM) -HTMLHelper::_('bootstrap.framework'); -HTMLHelper::_('bootstrap.alert'); -HTMLHelper::_('bootstrap.button'); -HTMLHelper::_('bootstrap.carousel'); -HTMLHelper::_('bootstrap.collapse'); -HTMLHelper::_('bootstrap.dropdown'); -HTMLHelper::_('bootstrap.modal'); -HTMLHelper::_('bootstrap.offcanvas'); -HTMLHelper::_('bootstrap.popover'); -HTMLHelper::_('bootstrap.scrollspy'); -HTMLHelper::_('bootstrap.tab'); -HTMLHelper::_('bootstrap.tooltip'); -HTMLHelper::_('bootstrap.toast'); -*/ + // Detecting Active Variables $option = $input->getCmd('option', ''); $view = $input->getCmd('view', ''); From b10bff1ab681f0283a4dda432ef977add5d8bbab Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 05:44:39 +0000 Subject: [PATCH 17/45] Update CSS path references from /css/global/ to /css/colors/ Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/templates/component.php | 8 ++++---- src/templates/error.php | 8 ++++---- src/templates/index.php | 8 ++++---- src/templates/templateDetails.xml | 2 +- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/templates/component.php b/src/templates/component.php index 423833c..6055781 100644 --- a/src/templates/component.php +++ b/src/templates/component.php @@ -79,22 +79,22 @@ $darkKey = 'template.dark.' . $colorDarkKey; try { $wa->useStyle('template.light.colors_standard'); } catch (\Throwable $e) { - $wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/global/light/colors_standard.css'); + $wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/colors/light/colors_standard.css'); } try { $wa->useStyle('template.dark.colors_standard'); } catch (\Throwable $e) { - $wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/global/dark/colors_standard.css'); + $wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/colors/dark/colors_standard.css'); } try { $wa->useStyle($lightKey); } catch (\Throwable $e) { - $wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/global/light/' . $colorLightKey . '.css'); + $wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/colors/light/' . $colorLightKey . '.css'); } try { $wa->useStyle($darkKey); } catch (\Throwable $e) { - $wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/global/dark/' . $colorDarkKey . '.css'); + $wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/colors/dark/' . $colorDarkKey . '.css'); } // Scripts diff --git a/src/templates/error.php b/src/templates/error.php index 5cea3d0..d371773 100644 --- a/src/templates/error.php +++ b/src/templates/error.php @@ -66,22 +66,22 @@ $darkKey = 'template.dark.' . $colorDarkKey; try { $wa->useStyle('template.light.colors_standard'); } catch (\Throwable $e) { - $wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/global/light/colors_standard.css'); + $wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/colors/light/colors_standard.css'); } try { $wa->useStyle('template.dark.colors_standard'); } catch (\Throwable $e) { - $wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/global/dark/colors_standard.css'); + $wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/colors/dark/colors_standard.css'); } try { $wa->useStyle($lightKey); } catch (\Throwable $e) { - $wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/global/light/' . $colorLightKey . '.css'); + $wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/colors/light/' . $colorLightKey . '.css'); } try { $wa->useStyle($darkKey); } catch (\Throwable $e) { - $wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/global/dark/' . $colorDarkKey . '.css'); + $wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/colors/dark/' . $colorDarkKey . '.css'); } // Scripts diff --git a/src/templates/index.php b/src/templates/index.php index 9e9b03f..c64baa1 100644 --- a/src/templates/index.php +++ b/src/templates/index.php @@ -97,25 +97,25 @@ $darkKey = 'template.dark.' . $colorDarkKey; try { $wa->useStyle('template.light.colors_standard'); } catch (\Throwable $e) { - $wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/global/light/colors_standard.css'); + $wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/colors/light/colors_standard.css'); } try { $wa->useStyle('template.dark.colors_standard'); } catch (\Throwable $e) { - $wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/global/dark/colors_standard.css'); + $wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/colors/dark/colors_standard.css'); } try { $wa->useStyle($lightKey); } catch (\Throwable $e) { - $wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/global/light/' . $colorLightKey . '.css'); + $wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/colors/light/' . $colorLightKey . '.css'); } try { $wa->useStyle($darkKey); } catch (\Throwable $e) { - $wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/global/dark/' . $colorDarkKey . '.css'); + $wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/colors/dark/' . $colorDarkKey . '.css'); } // Scripts diff --git a/src/templates/templateDetails.xml b/src/templates/templateDetails.xml index 0137c00..a5f4d58 100644 --- a/src/templates/templateDetails.xml +++ b/src/templates/templateDetails.xml @@ -205,7 +205,7 @@ - + From b939115430ad61749c48cd515c35dd5493210d9d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 05:45:53 +0000 Subject: [PATCH 18/45] Remove non-existent script references (theme-init.js, darkmode-toggle.js) Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/templates/component.php | 1 - src/templates/error.php | 2 -- 2 files changed, 3 deletions(-) diff --git a/src/templates/component.php b/src/templates/component.php index 6055781..9b55099 100644 --- a/src/templates/component.php +++ b/src/templates/component.php @@ -99,7 +99,6 @@ try { // Scripts $wa->useScript('template.js'); -$wa->useScript('theme-init.js'); /** * VirtueMart detection: diff --git a/src/templates/error.php b/src/templates/error.php index d371773..5752d46 100644 --- a/src/templates/error.php +++ b/src/templates/error.php @@ -86,8 +86,6 @@ try { // Scripts $wa->useScript('template.js'); -$wa->useScript('theme-init.js'); -$wa->useScript('darkmode-toggle.js'); // Meta $this->setMetaData('viewport', 'width=device-width, initial-scale=1'); From 8c6ec98a93b32ac9964b6d20f70d0b471dd1e6b0 Mon Sep 17 00:00:00 2001 From: Jonathan Miller <230051081+jmiller-moko@users.noreply.github.com> Date: Thu, 29 Jan 2026 23:52:07 -0600 Subject: [PATCH 19/45] Update joomla.asset.json --- src/templates/joomla.asset.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/templates/joomla.asset.json b/src/templates/joomla.asset.json index ed68ba5..3f05752 100644 --- a/src/templates/joomla.asset.json +++ b/src/templates/joomla.asset.json @@ -4,7 +4,7 @@ "description": "MokoCassiopeia template assets", "license": "GPL-3.0-or-later", "x-header": { - "copyright_year": 2025, + "copyright_year": 2026, "author": "Jonathan Miller", "owner": "Moko Consulting", "contact": "hello@mokoconsulting.tech", From a2a26d504eac71a63250006d4d691a0d41bf4204 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 05:53:11 +0000 Subject: [PATCH 20/45] Plan: Implement smarter Bootstrap component loading Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/media/js/template.js | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/src/media/js/template.js b/src/media/js/template.js index c183742..bc6fa48 100644 --- a/src/media/js/template.js +++ b/src/media/js/template.js @@ -193,22 +193,19 @@ /** * Initialize offcanvas drawer buttons for left/right drawers. + * Bootstrap handles drawers automatically via data-bs-toggle="offcanvas" + * This function is kept for backwards compatibility but only runs if drawers exist. */ function initDrawers() { - var leftBtn = doc.querySelector(".drawer-toggle-left"); - var rightBtn = doc.querySelector(".drawer-toggle-right"); - if (leftBtn) { - leftBtn.addEventListener("click", function () { - var target = doc.querySelector(leftBtn.getAttribute("data-bs-target")); - if (target && typeof bootstrap !== 'undefined') new bootstrap.Offcanvas(target).show(); - }); - } - if (rightBtn) { - rightBtn.addEventListener("click", function () { - var target = doc.querySelector(rightBtn.getAttribute("data-bs-target")); - if (target && typeof bootstrap !== 'undefined') new bootstrap.Offcanvas(target).show(); - }); + // Check if any drawer buttons exist before initializing + var hasDrawers = doc.querySelector(".drawer-toggle-left") || doc.querySelector(".drawer-toggle-right"); + if (!hasDrawers) { + return; // No drawers, skip initialization } + + // Bootstrap 5 handles offcanvas automatically via data-bs-toggle attribute + // No manual initialization needed if Bootstrap is loaded correctly + // The buttons already have data-bs-toggle="offcanvas" and data-bs-target="#drawer-*" } /** From d97233eea9917f93d4d9ad01694210bb1cbcb59d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 05:54:06 +0000 Subject: [PATCH 21/45] Implement smart Bootstrap loading and fix drawer functionality Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/templates/error.php | 6 ++++++ src/templates/index.php | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/src/templates/error.php b/src/templates/error.php index 5752d46..7f11193 100644 --- a/src/templates/error.php +++ b/src/templates/error.php @@ -87,6 +87,12 @@ try { // Scripts $wa->useScript('template.js'); +// Smart Bootstrap component loading - only load what's needed +if ($this->countModules('drawer-left', true) || $this->countModules('drawer-right', true)) { + // Load Bootstrap Offcanvas component for drawers + HTMLHelper::_('bootstrap.offcanvas'); +} + // Meta $this->setMetaData('viewport', 'width=device-width, initial-scale=1'); diff --git a/src/templates/index.php b/src/templates/index.php index c64baa1..0b19445 100644 --- a/src/templates/index.php +++ b/src/templates/index.php @@ -205,6 +205,12 @@ if ($this->countModules('sidebar-right', true)) { $hasClass .= ' has-sidebar-rig if ($this->countModules('drawer-left', true)) { $hasClass .= ' has-drawer-left'; } if ($this->countModules('drawer-right', true)) { $hasClass .= ' has-drawer-right'; } +// Smart Bootstrap component loading - only load what's needed +if ($this->countModules('drawer-left', true) || $this->countModules('drawer-right', true)) { + // Load Bootstrap Offcanvas component for drawers + HTMLHelper::_('bootstrap.offcanvas'); +} + // Container $wrapper = $this->params->get('fluidContainer') ? 'wrapper-fluid' : 'wrapper-static'; $stickyHeader = $this->params->get('stickyHeader') ? 'position-sticky sticky-top' : ''; From bd206cbc0eed961c08f8dd70e166b1a8725a8c40 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 05:54:52 +0000 Subject: [PATCH 22/45] Remove underline from site title and brand links Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/media/css/user.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/media/css/user.css b/src/media/css/user.css index 91f5273..4ce0cf1 100644 --- a/src/media/css/user.css +++ b/src/media/css/user.css @@ -22,10 +22,20 @@ color: var(--nav-bg-color); font-weight: 600; font-size: 1.5rem; + text-decoration: none; } .container-header .navbar-brand .site-title { color: var(--nav-bg-color); + text-decoration: none; +} + +.container-header .navbar-brand a { + text-decoration: none; +} + +.brand-logo { + text-decoration: none; } /* Enhanced search button styling */ From afd7d0aac0ab0fb5bfee0fd74fd5f809fcfac4d2 Mon Sep 17 00:00:00 2001 From: Jonathan Miller <230051081+jmiller-moko@users.noreply.github.com> Date: Fri, 30 Jan 2026 00:04:30 -0600 Subject: [PATCH 23/45] Update template.css --- src/media/css/template.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/media/css/template.css b/src/media/css/template.css index f807945..6597bc5 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -14179,7 +14179,6 @@ meter { .form-control { max-width: 100%; - background-color: var(--body-color); } .form-control.input-xlarge { @@ -14369,7 +14368,6 @@ fieldset>* { .container-header nav { padding: 0; - margin-top: 0.25em; } .container-header .site-description { @@ -14408,7 +14406,6 @@ fieldset>* { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; - padding-bottom: 0.3em; background-color: var(--nav-bg-color); border-width: var(--border-width); border-top: solid var(--accent-color-primary); @@ -14589,6 +14586,7 @@ li.current a { .container-header .mod-finder { color: var(--body-color); + margin-block-end: 0; } .container-header .mod-finder a { From ba6100b468d2be5d49c8e5d33b47943b28f36555 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 06:09:31 +0000 Subject: [PATCH 24/45] Fix form controls and button styling to use CSS variables Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/media/css/colors/light/colors_standard.css | 4 ++-- src/media/css/template.css | 2 +- src/media/css/user.css | 1 + 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/media/css/colors/light/colors_standard.css b/src/media/css/colors/light/colors_standard.css index c82c361..4609a45 100644 --- a/src/media/css/colors/light/colors_standard.css +++ b/src/media/css/colors/light/colors_standard.css @@ -294,8 +294,8 @@ } .btn-secondary { - --btn-color: --nav-text-color; - --btn-bg: --nav-bg-color; + --btn-color: var(--body-bg); + --btn-bg: var(--nav-bg-color); --btn-border-color: hsl(210, 7%, 46%); --btn-hover-color: hsl(0, 0%, 100%); --btn-hover-bg: #5d636b; diff --git a/src/media/css/template.css b/src/media/css/template.css index 6597bc5..2a093b1 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -16777,7 +16777,7 @@ body:not(.has-sidebar-right) .site-grid .container-component { form .form-control, form .form-select { - border-color: #C7C7C7 + border-color: var(--input-border-color); } .container-below-topbar { diff --git a/src/media/css/user.css b/src/media/css/user.css index 4ce0cf1..c27c9a8 100644 --- a/src/media/css/user.css +++ b/src/media/css/user.css @@ -104,6 +104,7 @@ .container-search .icon-search { font-size: 1rem; + color: var(--nav-bg-color); } /* Responsive header menu and search layout improvements */ From fe1c6f02f3b4fbc5648de49a7c9275fad8d9e677 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 06:26:47 +0000 Subject: [PATCH 25/45] Add fluid container parameter to error.php and prepare for theme fieldset split Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/templates/error.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/templates/error.php b/src/templates/error.php index 7f11193..dd3e324 100644 --- a/src/templates/error.php +++ b/src/templates/error.php @@ -42,6 +42,8 @@ $params_custom_head_end = $params->get('custom_head_end', ''); $params_developmentmode = $params->get('developmentmode', false); // ------------------ Params ------------------ +$fluidContainer = (bool) $params->get('fluidContainer', 0); +$wrapper = $fluidContainer ? 'wrapper-fluid' : 'wrapper-static'; $stickyHeader = (bool) $params->get('stickyHeader', 0); // Drawer icon params (escaped) From 162fd5e250276ca7aae5e69a1b28dbc23cf115bf Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 06:35:11 +0000 Subject: [PATCH 26/45] Fix .icon-white to use --body-bg CSS variable for proper theming Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/media/css/template.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/media/css/template.css b/src/media/css/template.css index 2a093b1..923c5a9 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -14609,7 +14609,7 @@ li.current a { } .icon-white { - color: var(--body-color); + color: var(--body-bg); } .input-group-text::before { From 515539590a7a58c5d2d8dec3507362d27d21c03b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 06:47:06 +0000 Subject: [PATCH 27/45] Set Roboto as default font and add Osaka font for titles Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/media/css/fonts/osaka.css | 13 +++++++++++++ src/media/css/user.css | 1 + src/templates/component.php | 3 +++ src/templates/error.php | 3 +++ src/templates/index.php | 3 +++ src/templates/joomla.asset.json | 6 ++++++ src/templates/templateDetails.xml | 2 +- 7 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 src/media/css/fonts/osaka.css diff --git a/src/media/css/fonts/osaka.css b/src/media/css/fonts/osaka.css new file mode 100644 index 0000000..42d3a98 --- /dev/null +++ b/src/media/css/fonts/osaka.css @@ -0,0 +1,13 @@ +/** + * @package MokoCassiopeia + * @copyright (C) 2026 Moko Consulting + * @license GNU General Public License version 3 or later + */ + +@font-face { +font-family: 'Osaka'; +src: url('../../fonts/osaka-re.ttf') format('truetype'); +font-weight: normal; +font-style: normal; +font-display: swap; +} diff --git a/src/media/css/user.css b/src/media/css/user.css index c27c9a8..77411ac 100644 --- a/src/media/css/user.css +++ b/src/media/css/user.css @@ -20,6 +20,7 @@ /* Site title styling - match nav background color */ .site-title { color: var(--nav-bg-color); + font-family: 'Osaka', sans-serif; font-weight: 600; font-size: 1.5rem; text-decoration: none; diff --git a/src/templates/component.php b/src/templates/component.php index 9b55099..9eeb946 100644 --- a/src/templates/component.php +++ b/src/templates/component.php @@ -100,6 +100,9 @@ try { // Scripts $wa->useScript('template.js'); +// Load Osaka font for site title +$wa->useStyle('template.font.osaka'); + /** * VirtueMart detection: * - Component must exist and be enabled diff --git a/src/templates/error.php b/src/templates/error.php index dd3e324..2003598 100644 --- a/src/templates/error.php +++ b/src/templates/error.php @@ -89,6 +89,9 @@ try { // Scripts $wa->useScript('template.js'); +// Load Osaka font for site title +$wa->useStyle('template.font.osaka'); + // Smart Bootstrap component loading - only load what's needed if ($this->countModules('drawer-left', true) || $this->countModules('drawer-right', true)) { // Load Bootstrap Offcanvas component for drawers diff --git a/src/templates/index.php b/src/templates/index.php index 0b19445..795669a 100644 --- a/src/templates/index.php +++ b/src/templates/index.php @@ -121,6 +121,9 @@ try { // Scripts $wa->useScript('template.js'); +// Load Osaka font for site title +$wa->useStyle('template.font.osaka'); + // Load GTM script if GTM is enabled if (!empty($params_googletagmanager) && !empty($params_googletagmanagerid)) { $wa->useScript('gtm.js'); diff --git a/src/templates/joomla.asset.json b/src/templates/joomla.asset.json index 3f05752..371e05a 100644 --- a/src/templates/joomla.asset.json +++ b/src/templates/joomla.asset.json @@ -46,6 +46,12 @@ "uri": "media/templates/site/mokocassiopeia/css/user.min.css", "attributes": {"media": "all"} }, + { + "name": "template.font.osaka", + "type": "style", + "uri": "media/templates/site/mokocassiopeia/css/fonts/osaka.css", + "attributes": {"media": "all"} + }, { "name": "template.editor", "type": "style", diff --git a/src/templates/templateDetails.xml b/src/templates/templateDetails.xml index a5f4d58..c2a8a1e 100644 --- a/src/templates/templateDetails.xml +++ b/src/templates/templateDetails.xml @@ -202,7 +202,7 @@ - + From 60919abb621d9ae67b49cd88e35f4dc640881670 Mon Sep 17 00:00:00 2001 From: Jonathan Miller <230051081+jmiller-moko@users.noreply.github.com> Date: Sat, 7 Feb 2026 10:35:03 -0600 Subject: [PATCH 28/45] Delete colors_custom_light.css --- templates/colors_custom_light.css | 227 ------------------------------ 1 file changed, 227 deletions(-) delete mode 100644 templates/colors_custom_light.css diff --git a/templates/colors_custom_light.css b/templates/colors_custom_light.css deleted file mode 100644 index 4a4c77f..0000000 --- a/templates/colors_custom_light.css +++ /dev/null @@ -1,227 +0,0 @@ -@charset "UTF-8"; -/* Copyright (C) 2025 Moko Consulting - - This file is part of a Moko Consulting project. - - SPDX-License-Identifier: GPL-3.0-or-later - - # FILE INFORMATION - DEFGROUP: Joomla.Template.Site - INGROUP: MokoCassiopeia.Templates - PATH: ./templates/colors_custom_light.css - VERSION: 03.06.03 - BRIEF: Template for custom light mode color definitions - - # USAGE INSTRUCTIONS - 1. Copy this file to: media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css - 2. Customize the CSS variables below to match your brand colors - 3. In Joomla admin, go to System → Site Templates → MokoCassiopeia - 4. Under Theme tab, set "Light Mode Palette" to "Custom" - 5. Save and view your site to see the custom colors - - NOTE: This file is excluded from version control (.gitignore) to prevent - fork-specific customizations from being committed to the repository. - */ - -/* ----------------------------------------------- - * CUSTOM LIGHT THEME - * --------------------------------------------- */ - -:root[data-bs-theme="light"] { - color-scheme: light; - - /* ===== PRIMARY BRAND COLORS ===== */ - /* Main brand color used throughout the template */ - --color-primary: #112855; - - /* Accent colors for interactive elements */ - --accent-color-primary: #3f8ff0; - --accent-color-secondary: #3f8ff0; - - /* ===== LINK COLORS ===== */ - /* Color for hyperlinks */ - --color-link: #224FAA; - - /* Color when hovering over links */ - --color-hover: var(--accent-color-primary); - - /* ===== NAVIGATION ===== */ - /* Text color in main menu */ - --mainmenu-nav-link-color: white; - - /* Background color for navigation */ - --nav-text-color: white; - --nav-bg-color: var(--color-link); - - /* ===== HEADER BACKGROUND ===== */ - /* Background image for header section */ - --header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); - --header-background-attachment: fixed; - --header-background-repeat: repeat; - --header-background-size: auto; - - /* ===== CONTAINER BACKGROUNDS ===== */ - /* Below Topbar Container */ - --container-below-topbar-bg-image: ; - --container-below-topbar-bg-color: ; - --container-below-topbar-bg-position: center; - --container-below-topbar-bg-attachment: fixed; - --container-below-topbar-bg-repeat: repeat; - --container-below-topbar-bg-size: auto; - --container-below-topbar-border: ; - --container-below-topbar-border-radius: ; - - /* Top A Container */ - --container-top-a-bg-image: ; - --container-top-a-bg-color: ; - --container-top-a-bg-position: center; - --container-top-a-bg-attachment: fixed; - --container-top-a-bg-repeat: repeat; - --container-top-a-bg-size: auto; - --container-top-a-border: ; - --container-top-a-border-radius: ; - - /* Top B Container */ - --container-top-b-bg-image: ; - --container-top-b-bg-color: ; - --container-top-b-bg-position: center; - --container-top-b-bg-attachment: fixed; - --container-top-b-bg-repeat: repeat; - --container-top-b-bg-size: auto; - --container-top-b-border: ; - --container-top-b-border-radius: ; - - /* Table of Contents Container */ - --container-toc-bg: var(--mainmenu-nav-link-color); - --container-toc-color: var(--color-primary); - - /* Sidebar Container */ - --container-sidebar-bg-image: ; - --container-sidebar-bg-color: ; - --container-sidebar-bg-position: center; - --container-sidebar-bg-attachment: scroll; - --container-sidebar-bg-repeat: repeat; - --container-sidebar-bg-size: auto; - --container-sidebar-border: ; - --container-sidebar-border-radius: ; - - /* Bottom A Container */ - --container-bottom-a-bg-image: ; - --container-bottom-a-bg-color: ; - --container-bottom-a-bg-position: center; - --container-bottom-a-bg-attachment: fixed; - --container-bottom-a-bg-repeat: repeat; - --container-bottom-a-bg-size: auto; - --container-bottom-a-border: ; - --container-bottom-a-border-radius: ; - - /* Bottom B Container */ - --container-bottom-b-bg-image: ; - --container-bottom-b-bg-color: ; - --container-bottom-b-bg-position: center; - --container-bottom-b-bg-attachment: fixed; - --container-bottom-b-bg-repeat: repeat; - --container-bottom-b-bg-size: auto; - --container-bottom-b-border: ; - --container-bottom-b-border-radius: ; - - /* ===== BOOTSTRAP 5 COLOR PALETTE ===== */ - /* Standard Bootstrap color variables */ - --blue: #010156; - --black: #000; - --indigo: #6812f3; - --purple: #6f42c2; - --pink: #e93f8e; - --red: #a51f18; - --orange: #fd7e17; - --yellow: #ad6200; - --green: #448344; - --teal: #5abfdd; - --cyan: #30638d; - --white: #fff; - - /* Gray 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; - - /* Contextual colors */ - --primary: #010156; - --secondary: #6d757e; - --success: #448344; - --info: #30638d; - --warning: #ad6200; - --danger: #a51f18; - --light: #f9fafb; - --dark: #353b41; - - /* ===== BODY & TYPOGRAPHY ===== */ - --body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; - --body-font-size: 1rem; - --body-font-weight: 400; - --body-line-height: 1.5; - --body-color: #22262a; - --body-color-rgb: 34, 38, 42; - --body-bg: #fff; - --body-bg-rgb: 255, 255, 255; - - /* ===== ADDITIONAL THEME COLORS ===== */ - --muted-color: #6d757e; - --hr-color: var(--border-color, #dfe3e7); - --link-active-color: var(--link-color); - --code-color: #e93f8e; - --code-color-ink: var(--code-color, #e93f8e); - --border-color-soft: var(--border-color, #dfe3e7); - --kbd-bg: var(--secondary-bg, #eaedf0); - --kbd-ink: var(--body-bg, #fff); - --toc-bg: var(--secondary-bg, #eaedf0); - --toc-ink: var(--color-primary, #112855); - --selection-bg: var(--highlight-bg, #fbeea8); - --selection-ink: var(--body-color, #22262a); - --emphasis-color: #000; - --emphasis-color-rgb: 0, 0, 0; - --secondary-color: #22262abf; - --secondary-bg: #eaedf0; - --tertiary-color: #22262a80; - --tertiary-bg: #f9fafb; - --heading-color: inherit; - --link-color: #224faa; - --link-color-rgb: 34, 79, 170; - --link-decoration: underline; - --link-hover-color: #424077; - --link-hover-color-rgb: 66, 64, 119; - --highlight-color: #22262a; - --highlight-bg: #fbeea8; - - /* ===== BORDERS & SHADOWS ===== */ - --border: 5px; - --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-pill: 50rem; - --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; - - /* ===== FORM COLORS ===== */ - --focus-ring-width: .25rem; - --focus-ring-opacity: .25; - --focus-ring-color: #01015640; - --form-valid-color: #448344; - --form-valid-border-color: #448344; - --form-invalid-color: #a51f18; - --form-invalid-border-color: #a51f18; -} From 0fc071928f3af6e577a99bd929d5d8fab12606ff Mon Sep 17 00:00:00 2001 From: Jonathan Miller <230051081+jmiller-moko@users.noreply.github.com> Date: Sat, 7 Feb 2026 10:37:26 -0600 Subject: [PATCH 29/45] Change filename --- templates/{colors_custom_dark.css => colors_custom.css} | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) rename templates/{colors_custom_dark.css => colors_custom.css} (97%) diff --git a/templates/colors_custom_dark.css b/templates/colors_custom.css similarity index 97% rename from templates/colors_custom_dark.css rename to templates/colors_custom.css index 18b8655..b111064 100644 --- a/templates/colors_custom_dark.css +++ b/templates/colors_custom.css @@ -13,7 +13,10 @@ BRIEF: Template for custom dark mode color definitions # USAGE INSTRUCTIONS - 1. Copy this file to: media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css + 1. Copy this file to: + `media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css` + or + `media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css` ` 2. Customize the CSS variables below to match your brand colors for dark mode 3. In Joomla admin, go to System → Site Templates → MokoCassiopeia 4. Under Theme tab, set "Dark Mode Palette" to "Custom" From eca164fa3e87ab798b0bb3bf5e454fa6a373fe93 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 16:39:56 +0000 Subject: [PATCH 30/45] Add usage instructions to custom color palette option descriptions Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/language/en-GB/tpl_mokocassiopeia.ini | 2 ++ src/language/en-US/tpl_mokocassiopeia.ini | 2 ++ src/templates/templateDetails.xml | 4 ++-- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/language/en-GB/tpl_mokocassiopeia.ini b/src/language/en-GB/tpl_mokocassiopeia.ini index d600b9c..76f4a66 100644 --- a/src/language/en-GB/tpl_mokocassiopeia.ini +++ b/src/language/en-GB/tpl_mokocassiopeia.ini @@ -77,7 +77,9 @@ TPL_MOKOCASSIOPEIA_COLOR_NAME_ALTERNATIVE="Alternative" TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom" ; New labels for Theme tab dropdowns TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL="Light color palette" +TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_DESC="Select a color palette for light mode. To use Custom, copy the template file from templates/colors_custom.css to media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css and customize the CSS variables to match your brand." TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_LABEL="Dark color palette" +TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_DESC="Select a color palette for dark mode. To use Custom, copy the template file from templates/colors_custom.css to media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css and customize the CSS variables to match your brand." ; ===== Theme tab (core feature strings) ===== TPL_MOKO_THEME_FIELDSET="Theme" diff --git a/src/language/en-US/tpl_mokocassiopeia.ini b/src/language/en-US/tpl_mokocassiopeia.ini index 96386ab..5b97e57 100644 --- a/src/language/en-US/tpl_mokocassiopeia.ini +++ b/src/language/en-US/tpl_mokocassiopeia.ini @@ -77,7 +77,9 @@ TPL_MOKOCASSIOPEIA_COLOR_NAME_ALTERNATIVE="Alternative" TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom" ; New labels for Theme tab dropdowns TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL="Light color palette" +TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_DESC="Select a color palette for light mode. To use Custom, copy the template file from templates/colors_custom.css to media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css and customize the CSS variables to match your brand." TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_LABEL="Dark color palette" +TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_DESC="Select a color palette for dark mode. To use Custom, copy the template file from templates/colors_custom.css to media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css and customize the CSS variables to match your brand." ; ===== Theme tab (core feature strings) ===== TPL_MOKO_THEME_FIELDSET="Theme" diff --git a/src/templates/templateDetails.xml b/src/templates/templateDetails.xml index c2a8a1e..f269019 100644 --- a/src/templates/templateDetails.xml +++ b/src/templates/templateDetails.xml @@ -189,12 +189,12 @@ - + - + From 83c16d1d2ac1823e56aceeaee3aa0830f2785486 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 16:42:47 +0000 Subject: [PATCH 31/45] Fix template name capitalization from mokocassiopeia to MokoCassiopeia Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/templates/templateDetails.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/templates/templateDetails.xml b/src/templates/templateDetails.xml index f269019..6b32030 100644 --- a/src/templates/templateDetails.xml +++ b/src/templates/templateDetails.xml @@ -35,7 +35,7 @@ https://mokoconsulting.tech/index.php?option=com_ars&view=update&task=stream&format=xml&id=1 - mokocassiopeia + MokoCassiopeia 03.06.03 2026-01-30 Jonathan Miller || Moko Consulting From c7118a5d30ba8e7c5ab5429e22e3dc929a98e356 Mon Sep 17 00:00:00 2001 From: Jonathan Miller <230051081+jmiller-moko@users.noreply.github.com> Date: Sat, 7 Feb 2026 10:46:46 -0600 Subject: [PATCH 32/45] Update user.css --- src/media/css/user.css | 131 ----------------------------------------- 1 file changed, 131 deletions(-) diff --git a/src/media/css/user.css b/src/media/css/user.css index 77411ac..740330f 100644 --- a/src/media/css/user.css +++ b/src/media/css/user.css @@ -16,134 +16,3 @@ */ /* Add your custom CSS here */ - -/* Site title styling - match nav background color */ -.site-title { - color: var(--nav-bg-color); - font-family: 'Osaka', sans-serif; - font-weight: 600; - font-size: 1.5rem; - text-decoration: none; -} - -.container-header .navbar-brand .site-title { - color: var(--nav-bg-color); - text-decoration: none; -} - -.container-header .navbar-brand a { - text-decoration: none; -} - -.brand-logo { - text-decoration: none; -} - -/* Enhanced search button styling */ -.mod-finder__search.input-group button, -.container-search button[type="submit"] { - background-color: var(--color-primary); - color: var(--mainmenu-nav-link-color); - border-color: var(--color-primary); - padding: 0.6rem 1rem; - border-radius: 0 0.25rem 0.25rem 0; - transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; -} - -.mod-finder__search.input-group button:hover, -.container-search button[type="submit"]:hover { - background-color: var(--color-hover); - border-color: var(--color-hover); -} - -.mod-finder__search.input-group button:focus, -.container-search button[type="submit"]:focus { - outline: 0; - box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); -} - -/* Enhanced container-search styling */ -.container-header .container-search { - position: relative; -} - -.container-search .mod-finder__search.input-group { - display: flex; - align-items: stretch; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - border-radius: 0.25rem; - overflow: hidden; - transition: box-shadow 0.2s ease-in-out; -} - -.container-search .mod-finder__search.input-group:focus-within { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); -} - -.container-search .form-control, -.container-search .awesomplete input { - border-right: none; - padding: 0.6rem 1rem; - font-size: 0.95rem; - border-radius: 0.25rem 0 0 0.25rem; -} - -.container-search .form-control:focus, -.container-search .awesomplete input:focus { - border-color: var(--input-focus-border-color); - box-shadow: none; -} - -.container-search button[type="submit"], -.container-search .input-group button { - display: flex; - align-items: center; - justify-content: center; - min-width: 3rem; - font-weight: 500; -} - -.container-search .icon-search { - font-size: 1rem; - color: var(--nav-bg-color); -} - -/* Responsive header menu and search layout improvements */ -@media (max-width: 991.98px) { - .container-header .container-nav { - flex-direction: column; - } - - .container-header .container-nav nav { - width: 100%; - margin-bottom: 1rem; - } - - .container-header .container-search { - width: 100%; - margin-top: 0.5rem; - } - - .mod-finder__search.input-group { - max-width: 100%; - } -} - -@media (min-width: 992px) { - .container-header .container-nav { - display: flex; - flex-direction: row; - align-items: center; - gap: 2rem; - } - - .container-header .container-nav nav { - flex: 1; - } - - .container-header .container-search { - flex: 0 0 auto; - min-width: 300px; - margin-top: 0; - } -} From d46846573f24b297362960fd6ff7518c312c4d55 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 16:54:09 +0000 Subject: [PATCH 33/45] Add comprehensive missing CSS variables to all color scheme files Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- .../css/colors/dark/colors_alternative.css | 156 ++++++++++++++++++ src/media/css/colors/dark/colors_standard.css | 156 ++++++++++++++++++ .../css/colors/light/colors_alternative.css | 156 ++++++++++++++++++ .../css/colors/light/colors_standard.css | 156 ++++++++++++++++++ templates/colors_custom.css | 156 ++++++++++++++++++ 5 files changed, 780 insertions(+) diff --git a/src/media/css/colors/dark/colors_alternative.css b/src/media/css/colors/dark/colors_alternative.css index 841fe66..f7ce97d 100644 --- a/src/media/css/colors/dark/colors_alternative.css +++ b/src/media/css/colors/dark/colors_alternative.css @@ -249,6 +249,162 @@ --form-valid-border-color: #78d694; --form-invalid-color: #ff8e86; --form-invalid-border-color: #ff8e86; + + /* Offcanvas (moved from template.css) */ + --offcanvas-color: var(--body-color); + --offcanvas-padding-x: 1rem; + --offcanvas-padding-y: 1rem; + + /* Navbar */ + --navbar-padding-x: 1rem; + --navbar-padding-y: 0.5rem; + --navbar-color: var(--nav-text-color); + --navbar-active-color: var(--mainmenu-nav-link-color); + --navbar-disabled-color: #6c757d; + --navbar-brand-padding-y: 0.3125rem; + --navbar-brand-margin-end: 1rem; + --navbar-brand-font-size: 1.25rem; + --navbar-brand-color: var(--nav-text-color); + --navbar-brand-active-color: var(--mainmenu-nav-link-color); + --navbar-nav-link-padding-x: 0.5rem; + --navbar-toggler-padding-y: 0.25rem; + --navbar-toggler-padding-x: 0.75rem; + --navbar-toggler-font-size: 1.25rem; + --navbar-toggler-border-color: rgba(255, 255, 255, 0.1); + --navbar-toggler-border-radius: 0.25rem; + --navbar-toggler-focus-width: 0.25rem; + --navbar-toggler-transition: box-shadow 0.15s ease-in-out; + --nav-link-padding-x: 1rem; + --nav-link-padding-y: 0.5rem; + --nav-link-font-weight: 400; + --nav-link-color: var(--nav-text-color); + --nav-link-active-color: var(--mainmenu-nav-link-color); + --nav-link-disabled-color: #6c757d; + + /* Responsive tokens */ + --nav-toggle-size: 3rem; + --bp-xs: 0; + --bp-sm: 576px; + --bp-md: 768px; + --bp-lg: 992px; + --bp-xl: 1200px; + + /* Utility opacity defaults */ + --bg-opacity: 1; + + /* Layout padding */ + --padding-x: 1rem; + --padding-y: 1rem; + + /* Button utilities */ + --btn-border-radius: var(--border-radius); + --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3); + + /* Card variables */ + --card-spacer-y: 1rem; + --card-spacer-x: 1rem; + --card-title-spacer-y: 0.5rem; + --card-border-width: 1px; + --card-border-color: var(--border-color); + --card-border-radius: var(--border-radius); + --card-box-shadow: none; + --card-inner-border-radius: calc(var(--border-radius) - 1px); + --card-cap-padding-y: 0.5rem; + --card-cap-padding-x: 1rem; + --card-cap-bg: rgba(255, 255, 255, 0.03); + --card-cap-color: var(--body-color); + --card-height: auto; + --card-color: var(--body-color); + --card-bg: var(--secondary-bg); + --card-img-overlay-padding: 1rem; + --card-group-margin: 0.75rem; + + /* VirtueMart surfaces */ + --vm-surface: var(--secondary-bg); + --vm-surface-2: var(--tertiary-bg); + --vm-text: var(--body-color); + --vm-text-strong: #ffffff; + --vm-text-muted: var(--gray-700); + --vm-border: var(--border-color); + --vm-price-color: var(--success); + + /* VM layout and density */ + --vm-container-max-width: 1200px; + --vm-section-gap: 2rem; + --vm-block-radius: var(--border-radius); + --vm-block-shadow: var(--box-shadow-sm); + + /* VM typography */ + --vm-category-title-size: 2rem; + --vm-subcategory-title-size: 1.5rem; + --vm-page-title-size: 1.75rem; + --vm-products-type-title-size: 1.25rem; + --vm-product-title-size: 1.125rem; + --vm-product-title-weight: 500; + --vm-products-type-title-weight: 600; + --vm-price-size: 1.5rem; + --vm-price-detail-size: 1.125rem; + --vm-price-desc-size: 0.875rem; + + /* VM controls */ + --vm-input-radius: var(--border-radius); + --vm-input-shadow: var(--box-shadow-sm); + --vm-qty-width: 80px; + --vm-cart-dropdown-min-width: 300px; + + /* VM alerts */ + --vm-alert-radius: var(--border-radius); + --vm-alert-shadow: var(--box-shadow-sm); + --vm-availability-bg: var(--success-bg-subtle); + --vm-availability-text: var(--success); + + /* VM buttons */ + --vm-btn-padding-x: 1rem; + --vm-btn-padding-y: 0.5rem; + --vm-btn-radius: var(--border-radius); + --vm-btn-shadow: var(--box-shadow-sm); + --vm-btn-primary-bg: var(--primary); + --vm-btn-primary-text: #ffffff; + --vm-btn-primary-border: var(--primary); + --vm-btn-secondary-bg: var(--secondary); + --vm-btn-secondary-text: #ffffff; + --vm-btn-secondary-border: var(--secondary); + + /* VM image overlay controls */ + --vm-image-overlay-gap-x: 0.5rem; + --vm-image-overlay-gap-y: 0.5rem; + --vm-image-overlay-raise: 0.25rem; + --vm-image-overlay-btn-size: 2.5rem; + --vm-image-overlay-btn-radius: 50%; + --vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7); + --vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85); + --vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2); + --vm-image-overlay-btn-border-width: 1px; + --vm-image-overlay-btn-color: var(--body-color); + --vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); + + /* VM vendor menu tokens */ + --vm-vendor-menu-bg: var(--secondary-bg); + --vm-vendor-menu-border: var(--border-color); + --vm-vendor-menu-radius: var(--border-radius); + --vm-vendor-menu-shadow: var(--box-shadow-sm); + --vm-vendor-menu-item-gap: 0.25rem; + --vm-vendor-menu-item-padding-x: 1rem; + --vm-vendor-menu-item-padding-y: 0.5rem; + --vm-vendor-menu-pill-radius: 50rem; + --vm-vendor-menu-link: var(--link-color); + --vm-vendor-menu-link-hover: var(--link-hover-color); + --vm-vendor-menu-link-active: var(--primary); + --vm-vendor-menu-hover-bg: var(--tertiary-bg); + + /* Gable colors */ + --gab-blue: #4d9fff; + --gab-green: #5cb85c; + --gab-red: #ff6b6b; + --gab-orange: #ff9f5a; + --gab-gray1: #868e96; + --gab-gray2: #adb5bd; + --gab-gray3: #ced4da; } .btn { diff --git a/src/media/css/colors/dark/colors_standard.css b/src/media/css/colors/dark/colors_standard.css index 9efe72d..daf4c3a 100644 --- a/src/media/css/colors/dark/colors_standard.css +++ b/src/media/css/colors/dark/colors_standard.css @@ -260,6 +260,162 @@ --form-valid-border-color: #78d694; --form-invalid-color: #ff8e86; --form-invalid-border-color: #ff8e86; + + /* Offcanvas (moved from template.css) */ + --offcanvas-color: var(--body-color); + --offcanvas-padding-x: 1rem; + --offcanvas-padding-y: 1rem; + + /* Navbar */ + --navbar-padding-x: 1rem; + --navbar-padding-y: 0.5rem; + --navbar-color: var(--nav-text-color); + --navbar-active-color: var(--mainmenu-nav-link-color); + --navbar-disabled-color: #6c757d; + --navbar-brand-padding-y: 0.3125rem; + --navbar-brand-margin-end: 1rem; + --navbar-brand-font-size: 1.25rem; + --navbar-brand-color: var(--nav-text-color); + --navbar-brand-active-color: var(--mainmenu-nav-link-color); + --navbar-nav-link-padding-x: 0.5rem; + --navbar-toggler-padding-y: 0.25rem; + --navbar-toggler-padding-x: 0.75rem; + --navbar-toggler-font-size: 1.25rem; + --navbar-toggler-border-color: rgba(255, 255, 255, 0.1); + --navbar-toggler-border-radius: 0.25rem; + --navbar-toggler-focus-width: 0.25rem; + --navbar-toggler-transition: box-shadow 0.15s ease-in-out; + --nav-link-padding-x: 1rem; + --nav-link-padding-y: 0.5rem; + --nav-link-font-weight: 400; + --nav-link-color: var(--nav-text-color); + --nav-link-active-color: var(--mainmenu-nav-link-color); + --nav-link-disabled-color: #6c757d; + + /* Responsive tokens */ + --nav-toggle-size: 3rem; + --bp-xs: 0; + --bp-sm: 576px; + --bp-md: 768px; + --bp-lg: 992px; + --bp-xl: 1200px; + + /* Utility opacity defaults */ + --bg-opacity: 1; + + /* Layout padding */ + --padding-x: 1rem; + --padding-y: 1rem; + + /* Button utilities */ + --btn-border-radius: var(--border-radius); + --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3); + + /* Card variables */ + --card-spacer-y: 1rem; + --card-spacer-x: 1rem; + --card-title-spacer-y: 0.5rem; + --card-border-width: 1px; + --card-border-color: var(--border-color); + --card-border-radius: var(--border-radius); + --card-box-shadow: none; + --card-inner-border-radius: calc(var(--border-radius) - 1px); + --card-cap-padding-y: 0.5rem; + --card-cap-padding-x: 1rem; + --card-cap-bg: rgba(255, 255, 255, 0.03); + --card-cap-color: var(--body-color); + --card-height: auto; + --card-color: var(--body-color); + --card-bg: var(--secondary-bg); + --card-img-overlay-padding: 1rem; + --card-group-margin: 0.75rem; + + /* VirtueMart surfaces */ + --vm-surface: var(--secondary-bg); + --vm-surface-2: var(--tertiary-bg); + --vm-text: var(--body-color); + --vm-text-strong: #ffffff; + --vm-text-muted: var(--gray-700); + --vm-border: var(--border-color); + --vm-price-color: var(--success); + + /* VM layout and density */ + --vm-container-max-width: 1200px; + --vm-section-gap: 2rem; + --vm-block-radius: var(--border-radius); + --vm-block-shadow: var(--box-shadow-sm); + + /* VM typography */ + --vm-category-title-size: 2rem; + --vm-subcategory-title-size: 1.5rem; + --vm-page-title-size: 1.75rem; + --vm-products-type-title-size: 1.25rem; + --vm-product-title-size: 1.125rem; + --vm-product-title-weight: 500; + --vm-products-type-title-weight: 600; + --vm-price-size: 1.5rem; + --vm-price-detail-size: 1.125rem; + --vm-price-desc-size: 0.875rem; + + /* VM controls */ + --vm-input-radius: var(--border-radius); + --vm-input-shadow: var(--box-shadow-sm); + --vm-qty-width: 80px; + --vm-cart-dropdown-min-width: 300px; + + /* VM alerts */ + --vm-alert-radius: var(--border-radius); + --vm-alert-shadow: var(--box-shadow-sm); + --vm-availability-bg: var(--success-bg-subtle); + --vm-availability-text: var(--success); + + /* VM buttons */ + --vm-btn-padding-x: 1rem; + --vm-btn-padding-y: 0.5rem; + --vm-btn-radius: var(--border-radius); + --vm-btn-shadow: var(--box-shadow-sm); + --vm-btn-primary-bg: var(--primary); + --vm-btn-primary-text: #ffffff; + --vm-btn-primary-border: var(--primary); + --vm-btn-secondary-bg: var(--secondary); + --vm-btn-secondary-text: #ffffff; + --vm-btn-secondary-border: var(--secondary); + + /* VM image overlay controls */ + --vm-image-overlay-gap-x: 0.5rem; + --vm-image-overlay-gap-y: 0.5rem; + --vm-image-overlay-raise: 0.25rem; + --vm-image-overlay-btn-size: 2.5rem; + --vm-image-overlay-btn-radius: 50%; + --vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7); + --vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85); + --vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2); + --vm-image-overlay-btn-border-width: 1px; + --vm-image-overlay-btn-color: var(--body-color); + --vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); + + /* VM vendor menu tokens */ + --vm-vendor-menu-bg: var(--secondary-bg); + --vm-vendor-menu-border: var(--border-color); + --vm-vendor-menu-radius: var(--border-radius); + --vm-vendor-menu-shadow: var(--box-shadow-sm); + --vm-vendor-menu-item-gap: 0.25rem; + --vm-vendor-menu-item-padding-x: 1rem; + --vm-vendor-menu-item-padding-y: 0.5rem; + --vm-vendor-menu-pill-radius: 50rem; + --vm-vendor-menu-link: var(--link-color); + --vm-vendor-menu-link-hover: var(--link-hover-color); + --vm-vendor-menu-link-active: var(--primary); + --vm-vendor-menu-hover-bg: var(--tertiary-bg); + + /* Gable colors */ + --gab-blue: #4d9fff; + --gab-green: #5cb85c; + --gab-red: #ff6b6b; + --gab-orange: #ff9f5a; + --gab-gray1: #868e96; + --gab-gray2: #adb5bd; + --gab-gray3: #ced4da; } .btn { diff --git a/src/media/css/colors/light/colors_alternative.css b/src/media/css/colors/light/colors_alternative.css index 77a36cc..f6c5f9a 100644 --- a/src/media/css/colors/light/colors_alternative.css +++ b/src/media/css/colors/light/colors_alternative.css @@ -223,6 +223,162 @@ --form-valid-border-color: #448344; --form-invalid-color: #a51f18; --form-invalid-border-color: #a51f18; + + /* Offcanvas (moved from template.css) */ + --offcanvas-color: var(--body-color); + --offcanvas-padding-x: 1rem; + --offcanvas-padding-y: 1rem; + + /* Navbar */ + --navbar-padding-x: 1rem; + --navbar-padding-y: 0.5rem; + --navbar-color: var(--nav-text-color); + --navbar-active-color: var(--mainmenu-nav-link-color); + --navbar-disabled-color: #6c757d; + --navbar-brand-padding-y: 0.3125rem; + --navbar-brand-margin-end: 1rem; + --navbar-brand-font-size: 1.25rem; + --navbar-brand-color: var(--nav-text-color); + --navbar-brand-active-color: var(--mainmenu-nav-link-color); + --navbar-nav-link-padding-x: 0.5rem; + --navbar-toggler-padding-y: 0.25rem; + --navbar-toggler-padding-x: 0.75rem; + --navbar-toggler-font-size: 1.25rem; + --navbar-toggler-border-color: rgba(0, 0, 0, 0.1); + --navbar-toggler-border-radius: 0.25rem; + --navbar-toggler-focus-width: 0.25rem; + --navbar-toggler-transition: box-shadow 0.15s ease-in-out; + --nav-link-padding-x: 1rem; + --nav-link-padding-y: 0.5rem; + --nav-link-font-weight: 400; + --nav-link-color: var(--nav-text-color); + --nav-link-active-color: var(--mainmenu-nav-link-color); + --nav-link-disabled-color: #6c757d; + + /* Responsive tokens */ + --nav-toggle-size: 3rem; + --bp-xs: 0; + --bp-sm: 576px; + --bp-md: 768px; + --bp-lg: 992px; + --bp-xl: 1200px; + + /* Utility opacity defaults */ + --bg-opacity: 1; + + /* Layout padding */ + --padding-x: 1rem; + --padding-y: 1rem; + + /* Button utilities */ + --btn-border-radius: var(--border-radius); + --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); + + /* Card variables */ + --card-spacer-y: 1rem; + --card-spacer-x: 1rem; + --card-title-spacer-y: 0.5rem; + --card-border-width: 1px; + --card-border-color: var(--border-color); + --card-border-radius: var(--border-radius); + --card-box-shadow: none; + --card-inner-border-radius: calc(var(--border-radius) - 1px); + --card-cap-padding-y: 0.5rem; + --card-cap-padding-x: 1rem; + --card-cap-bg: rgba(0, 0, 0, 0.03); + --card-cap-color: var(--body-color); + --card-height: auto; + --card-color: var(--body-color); + --card-bg: var(--body-bg); + --card-img-overlay-padding: 1rem; + --card-group-margin: 0.75rem; + + /* VirtueMart surfaces */ + --vm-surface: #ffffff; + --vm-surface-2: #f8f9fa; + --vm-text: var(--body-color); + --vm-text-strong: #000000; + --vm-text-muted: #6c757d; + --vm-border: var(--border-color); + --vm-price-color: var(--success); + + /* VM layout and density */ + --vm-container-max-width: 1200px; + --vm-section-gap: 2rem; + --vm-block-radius: var(--border-radius); + --vm-block-shadow: var(--box-shadow-sm); + + /* VM typography */ + --vm-category-title-size: 2rem; + --vm-subcategory-title-size: 1.5rem; + --vm-page-title-size: 1.75rem; + --vm-products-type-title-size: 1.25rem; + --vm-product-title-size: 1.125rem; + --vm-product-title-weight: 500; + --vm-products-type-title-weight: 600; + --vm-price-size: 1.5rem; + --vm-price-detail-size: 1.125rem; + --vm-price-desc-size: 0.875rem; + + /* VM controls */ + --vm-input-radius: var(--border-radius); + --vm-input-shadow: var(--box-shadow-sm); + --vm-qty-width: 80px; + --vm-cart-dropdown-min-width: 300px; + + /* VM alerts */ + --vm-alert-radius: var(--border-radius); + --vm-alert-shadow: var(--box-shadow-sm); + --vm-availability-bg: var(--success-bg-subtle); + --vm-availability-text: var(--success); + + /* VM buttons */ + --vm-btn-padding-x: 1rem; + --vm-btn-padding-y: 0.5rem; + --vm-btn-radius: var(--border-radius); + --vm-btn-shadow: var(--box-shadow-sm); + --vm-btn-primary-bg: var(--primary); + --vm-btn-primary-text: #ffffff; + --vm-btn-primary-border: var(--primary); + --vm-btn-secondary-bg: var(--secondary); + --vm-btn-secondary-text: #ffffff; + --vm-btn-secondary-border: var(--secondary); + + /* VM image overlay controls */ + --vm-image-overlay-gap-x: 0.5rem; + --vm-image-overlay-gap-y: 0.5rem; + --vm-image-overlay-raise: 0.25rem; + --vm-image-overlay-btn-size: 2.5rem; + --vm-image-overlay-btn-radius: 50%; + --vm-image-overlay-btn-bg: rgba(255, 255, 255, 0.9); + --vm-image-overlay-btn-bg-hover: rgba(255, 255, 255, 1); + --vm-image-overlay-btn-border-color: rgba(0, 0, 0, 0.1); + --vm-image-overlay-btn-border-width: 1px; + --vm-image-overlay-btn-color: var(--body-color); + --vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + + /* VM vendor menu tokens */ + --vm-vendor-menu-bg: var(--body-bg); + --vm-vendor-menu-border: var(--border-color); + --vm-vendor-menu-radius: var(--border-radius); + --vm-vendor-menu-shadow: var(--box-shadow-sm); + --vm-vendor-menu-item-gap: 0.25rem; + --vm-vendor-menu-item-padding-x: 1rem; + --vm-vendor-menu-item-padding-y: 0.5rem; + --vm-vendor-menu-pill-radius: 50rem; + --vm-vendor-menu-link: var(--link-color); + --vm-vendor-menu-link-hover: var(--link-hover-color); + --vm-vendor-menu-link-active: var(--primary); + --vm-vendor-menu-hover-bg: var(--secondary-bg); + + /* Gable colors */ + --gab-blue: #0066cc; + --gab-green: #28a745; + --gab-red: #dc3545; + --gab-orange: #fd7e14; + --gab-gray1: #495057; + --gab-gray2: #6c757d; + --gab-gray3: #adb5bd; } .btn { diff --git a/src/media/css/colors/light/colors_standard.css b/src/media/css/colors/light/colors_standard.css index 4609a45..1c4404a 100644 --- a/src/media/css/colors/light/colors_standard.css +++ b/src/media/css/colors/light/colors_standard.css @@ -233,6 +233,162 @@ --form-valid-border-color: #448344; --form-invalid-color: #a51f18; --form-invalid-border-color: #a51f18; + + /* Offcanvas (moved from template.css) */ + --offcanvas-color: var(--body-color); + --offcanvas-padding-x: 1rem; + --offcanvas-padding-y: 1rem; + + /* Navbar */ + --navbar-padding-x: 1rem; + --navbar-padding-y: 0.5rem; + --navbar-color: var(--nav-text-color); + --navbar-active-color: var(--mainmenu-nav-link-color); + --navbar-disabled-color: #6c757d; + --navbar-brand-padding-y: 0.3125rem; + --navbar-brand-margin-end: 1rem; + --navbar-brand-font-size: 1.25rem; + --navbar-brand-color: var(--nav-text-color); + --navbar-brand-active-color: var(--mainmenu-nav-link-color); + --navbar-nav-link-padding-x: 0.5rem; + --navbar-toggler-padding-y: 0.25rem; + --navbar-toggler-padding-x: 0.75rem; + --navbar-toggler-font-size: 1.25rem; + --navbar-toggler-border-color: rgba(0, 0, 0, 0.1); + --navbar-toggler-border-radius: 0.25rem; + --navbar-toggler-focus-width: 0.25rem; + --navbar-toggler-transition: box-shadow 0.15s ease-in-out; + --nav-link-padding-x: 1rem; + --nav-link-padding-y: 0.5rem; + --nav-link-font-weight: 400; + --nav-link-color: var(--nav-text-color); + --nav-link-active-color: var(--mainmenu-nav-link-color); + --nav-link-disabled-color: #6c757d; + + /* Responsive tokens */ + --nav-toggle-size: 3rem; + --bp-xs: 0; + --bp-sm: 576px; + --bp-md: 768px; + --bp-lg: 992px; + --bp-xl: 1200px; + + /* Utility opacity defaults */ + --bg-opacity: 1; + + /* Layout padding */ + --padding-x: 1rem; + --padding-y: 1rem; + + /* Button utilities */ + --btn-border-radius: var(--border-radius); + --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); + + /* Card variables */ + --card-spacer-y: 1rem; + --card-spacer-x: 1rem; + --card-title-spacer-y: 0.5rem; + --card-border-width: 1px; + --card-border-color: var(--border-color); + --card-border-radius: var(--border-radius); + --card-box-shadow: none; + --card-inner-border-radius: calc(var(--border-radius) - 1px); + --card-cap-padding-y: 0.5rem; + --card-cap-padding-x: 1rem; + --card-cap-bg: rgba(0, 0, 0, 0.03); + --card-cap-color: var(--body-color); + --card-height: auto; + --card-color: var(--body-color); + --card-bg: var(--body-bg); + --card-img-overlay-padding: 1rem; + --card-group-margin: 0.75rem; + + /* VirtueMart surfaces */ + --vm-surface: #ffffff; + --vm-surface-2: #f8f9fa; + --vm-text: var(--body-color); + --vm-text-strong: #000000; + --vm-text-muted: #6c757d; + --vm-border: var(--border-color); + --vm-price-color: var(--success); + + /* VM layout and density */ + --vm-container-max-width: 1200px; + --vm-section-gap: 2rem; + --vm-block-radius: var(--border-radius); + --vm-block-shadow: var(--box-shadow-sm); + + /* VM typography */ + --vm-category-title-size: 2rem; + --vm-subcategory-title-size: 1.5rem; + --vm-page-title-size: 1.75rem; + --vm-products-type-title-size: 1.25rem; + --vm-product-title-size: 1.125rem; + --vm-product-title-weight: 500; + --vm-products-type-title-weight: 600; + --vm-price-size: 1.5rem; + --vm-price-detail-size: 1.125rem; + --vm-price-desc-size: 0.875rem; + + /* VM controls */ + --vm-input-radius: var(--border-radius); + --vm-input-shadow: var(--box-shadow-sm); + --vm-qty-width: 80px; + --vm-cart-dropdown-min-width: 300px; + + /* VM alerts */ + --vm-alert-radius: var(--border-radius); + --vm-alert-shadow: var(--box-shadow-sm); + --vm-availability-bg: var(--success-bg-subtle); + --vm-availability-text: var(--success); + + /* VM buttons */ + --vm-btn-padding-x: 1rem; + --vm-btn-padding-y: 0.5rem; + --vm-btn-radius: var(--border-radius); + --vm-btn-shadow: var(--box-shadow-sm); + --vm-btn-primary-bg: var(--primary); + --vm-btn-primary-text: #ffffff; + --vm-btn-primary-border: var(--primary); + --vm-btn-secondary-bg: var(--secondary); + --vm-btn-secondary-text: #ffffff; + --vm-btn-secondary-border: var(--secondary); + + /* VM image overlay controls */ + --vm-image-overlay-gap-x: 0.5rem; + --vm-image-overlay-gap-y: 0.5rem; + --vm-image-overlay-raise: 0.25rem; + --vm-image-overlay-btn-size: 2.5rem; + --vm-image-overlay-btn-radius: 50%; + --vm-image-overlay-btn-bg: rgba(255, 255, 255, 0.9); + --vm-image-overlay-btn-bg-hover: rgba(255, 255, 255, 1); + --vm-image-overlay-btn-border-color: rgba(0, 0, 0, 0.1); + --vm-image-overlay-btn-border-width: 1px; + --vm-image-overlay-btn-color: var(--body-color); + --vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + + /* VM vendor menu tokens */ + --vm-vendor-menu-bg: var(--body-bg); + --vm-vendor-menu-border: var(--border-color); + --vm-vendor-menu-radius: var(--border-radius); + --vm-vendor-menu-shadow: var(--box-shadow-sm); + --vm-vendor-menu-item-gap: 0.25rem; + --vm-vendor-menu-item-padding-x: 1rem; + --vm-vendor-menu-item-padding-y: 0.5rem; + --vm-vendor-menu-pill-radius: 50rem; + --vm-vendor-menu-link: var(--link-color); + --vm-vendor-menu-link-hover: var(--link-hover-color); + --vm-vendor-menu-link-active: var(--primary); + --vm-vendor-menu-hover-bg: var(--secondary-bg); + + /* Gable colors */ + --gab-blue: #0066cc; + --gab-green: #28a745; + --gab-red: #dc3545; + --gab-orange: #fd7e14; + --gab-gray1: #495057; + --gab-gray2: #6c757d; + --gab-gray3: #adb5bd; } .btn { diff --git a/templates/colors_custom.css b/templates/colors_custom.css index b111064..658ead6 100644 --- a/templates/colors_custom.css +++ b/templates/colors_custom.css @@ -245,4 +245,160 @@ --form-valid-border-color: #78d694; --form-invalid-color: #ff8e86; --form-invalid-border-color: #ff8e86; + + /* Offcanvas (moved from template.css) */ + --offcanvas-color: var(--body-color); + --offcanvas-padding-x: 1rem; + --offcanvas-padding-y: 1rem; + + /* Navbar */ + --navbar-padding-x: 1rem; + --navbar-padding-y: 0.5rem; + --navbar-color: var(--nav-text-color); + --navbar-active-color: var(--mainmenu-nav-link-color); + --navbar-disabled-color: #6c757d; + --navbar-brand-padding-y: 0.3125rem; + --navbar-brand-margin-end: 1rem; + --navbar-brand-font-size: 1.25rem; + --navbar-brand-color: var(--nav-text-color); + --navbar-brand-active-color: var(--mainmenu-nav-link-color); + --navbar-nav-link-padding-x: 0.5rem; + --navbar-toggler-padding-y: 0.25rem; + --navbar-toggler-padding-x: 0.75rem; + --navbar-toggler-font-size: 1.25rem; + --navbar-toggler-border-color: rgba(255, 255, 255, 0.1); + --navbar-toggler-border-radius: 0.25rem; + --navbar-toggler-focus-width: 0.25rem; + --navbar-toggler-transition: box-shadow 0.15s ease-in-out; + --nav-link-padding-x: 1rem; + --nav-link-padding-y: 0.5rem; + --nav-link-font-weight: 400; + --nav-link-color: var(--nav-text-color); + --nav-link-active-color: var(--mainmenu-nav-link-color); + --nav-link-disabled-color: #6c757d; + + /* Responsive tokens */ + --nav-toggle-size: 3rem; + --bp-xs: 0; + --bp-sm: 576px; + --bp-md: 768px; + --bp-lg: 992px; + --bp-xl: 1200px; + + /* Utility opacity defaults */ + --bg-opacity: 1; + + /* Layout padding */ + --padding-x: 1rem; + --padding-y: 1rem; + + /* Button utilities */ + --btn-border-radius: var(--border-radius); + --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3); + + /* Card variables */ + --card-spacer-y: 1rem; + --card-spacer-x: 1rem; + --card-title-spacer-y: 0.5rem; + --card-border-width: 1px; + --card-border-color: var(--border-color); + --card-border-radius: var(--border-radius); + --card-box-shadow: none; + --card-inner-border-radius: calc(var(--border-radius) - 1px); + --card-cap-padding-y: 0.5rem; + --card-cap-padding-x: 1rem; + --card-cap-bg: rgba(255, 255, 255, 0.03); + --card-cap-color: var(--body-color); + --card-height: auto; + --card-color: var(--body-color); + --card-bg: var(--secondary-bg); + --card-img-overlay-padding: 1rem; + --card-group-margin: 0.75rem; + + /* VirtueMart surfaces */ + --vm-surface: var(--secondary-bg); + --vm-surface-2: var(--tertiary-bg); + --vm-text: var(--body-color); + --vm-text-strong: #ffffff; + --vm-text-muted: var(--gray-700); + --vm-border: var(--border-color); + --vm-price-color: var(--success); + + /* VM layout and density */ + --vm-container-max-width: 1200px; + --vm-section-gap: 2rem; + --vm-block-radius: var(--border-radius); + --vm-block-shadow: var(--box-shadow-sm); + + /* VM typography */ + --vm-category-title-size: 2rem; + --vm-subcategory-title-size: 1.5rem; + --vm-page-title-size: 1.75rem; + --vm-products-type-title-size: 1.25rem; + --vm-product-title-size: 1.125rem; + --vm-product-title-weight: 500; + --vm-products-type-title-weight: 600; + --vm-price-size: 1.5rem; + --vm-price-detail-size: 1.125rem; + --vm-price-desc-size: 0.875rem; + + /* VM controls */ + --vm-input-radius: var(--border-radius); + --vm-input-shadow: var(--box-shadow-sm); + --vm-qty-width: 80px; + --vm-cart-dropdown-min-width: 300px; + + /* VM alerts */ + --vm-alert-radius: var(--border-radius); + --vm-alert-shadow: var(--box-shadow-sm); + --vm-availability-bg: var(--success-bg-subtle); + --vm-availability-text: var(--success); + + /* VM buttons */ + --vm-btn-padding-x: 1rem; + --vm-btn-padding-y: 0.5rem; + --vm-btn-radius: var(--border-radius); + --vm-btn-shadow: var(--box-shadow-sm); + --vm-btn-primary-bg: var(--primary); + --vm-btn-primary-text: #ffffff; + --vm-btn-primary-border: var(--primary); + --vm-btn-secondary-bg: var(--secondary); + --vm-btn-secondary-text: #ffffff; + --vm-btn-secondary-border: var(--secondary); + + /* VM image overlay controls */ + --vm-image-overlay-gap-x: 0.5rem; + --vm-image-overlay-gap-y: 0.5rem; + --vm-image-overlay-raise: 0.25rem; + --vm-image-overlay-btn-size: 2.5rem; + --vm-image-overlay-btn-radius: 50%; + --vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7); + --vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85); + --vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2); + --vm-image-overlay-btn-border-width: 1px; + --vm-image-overlay-btn-color: var(--body-color); + --vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); + + /* VM vendor menu tokens */ + --vm-vendor-menu-bg: var(--secondary-bg); + --vm-vendor-menu-border: var(--border-color); + --vm-vendor-menu-radius: var(--border-radius); + --vm-vendor-menu-shadow: var(--box-shadow-sm); + --vm-vendor-menu-item-gap: 0.25rem; + --vm-vendor-menu-item-padding-x: 1rem; + --vm-vendor-menu-item-padding-y: 0.5rem; + --vm-vendor-menu-pill-radius: 50rem; + --vm-vendor-menu-link: var(--link-color); + --vm-vendor-menu-link-hover: var(--link-hover-color); + --vm-vendor-menu-link-active: var(--primary); + --vm-vendor-menu-hover-bg: var(--tertiary-bg); + + /* Gable colors */ + --gab-blue: #4d9fff; + --gab-green: #5cb85c; + --gab-red: #ff6b6b; + --gab-orange: #ff9f5a; + --gab-gray1: #868e96; + --gab-gray2: #adb5bd; + --gab-gray3: #ced4da; } From 712220dca9802206a8b5621d7de21f990efb7250 Mon Sep 17 00:00:00 2001 From: Jonathan Miller <230051081+jmiller-moko@users.noreply.github.com> Date: Sat, 7 Feb 2026 10:54:55 -0600 Subject: [PATCH 34/45] Update template.css --- src/media/css/template.css | 132 +++++++++++++++++++++++++++++++++++++ 1 file changed, 132 insertions(+) diff --git a/src/media/css/template.css b/src/media/css/template.css index 923c5a9..be9834a 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -18187,6 +18187,138 @@ nav[data-toggle=toc] .nav-link.active+ul{ } +.site-title { + color: var(--nav-bg-color); + font-family: 'Osaka', sans-serif; + font-weight: 600; + font-size: 1.5rem; + text-decoration: none; + margin-left: var(--padding-x); +} + +.container-header .navbar-brand .site-title { + color: var(--nav-bg-color); + text-decoration: none; +} + +.container-header .navbar-brand a { + text-decoration: none; +} + +.brand-logo { + text-decoration: none; +} + +/* Enhanced search button styling */ +.mod-finder__search.input-group button, +.container-search button[type="submit"] { + background-color: var(--color-primary); + color: var(--mainmenu-nav-link-color); + border-color: var(--color-primary); + padding: 0.6rem 1rem; + border-radius: 0 0.25rem 0.25rem 0; + transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; +} + +.mod-finder__search.input-group button:hover, +.container-search button[type="submit"]:hover { + background-color: var(--color-hover); + border-color: var(--color-hover); +} + +.mod-finder__search.input-group button:focus, +.container-search button[type="submit"]:focus { + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); +} + +/* Enhanced container-search styling */ +.container-header .container-search { + position: relative; +} + +.container-search .mod-finder__search.input-group { + display: flex; + align-items: stretch; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + border-radius: 0.25rem; + overflow: hidden; + transition: box-shadow 0.2s ease-in-out; +} + +.container-search .mod-finder__search.input-group:focus-within { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +.container-search .form-control, +.container-search .awesomplete input { + border-right: none; + padding: 0.6rem 1rem; + font-size: 0.95rem; + border-radius: 0.25rem 0 0 0.25rem; +} + +.container-search .form-control:focus, +.container-search .awesomplete input:focus { + border-color: var(--input-focus-border-color); + box-shadow: none; +} + +.container-search button[type="submit"], +.container-search .input-group button { + display: flex; + align-items: center; + justify-content: center; + min-width: 3rem; + font-weight: 500; +} + +.container-search .icon-search { + font-size: 1rem; + color: var(--nav-bg-color); +} + +/* Responsive header menu and search layout improvements */ +@media (max-width: 991.98px) { + .container-header .container-nav { + flex-direction: column; + } + + .container-header .container-nav nav { + width: 100%; + margin-bottom: 1rem; + } + + .container-header .container-search { + width: 100%; + margin-top: 0.5rem; + } + + .mod-finder__search.input-group { + max-width: 100%; + } +} + +@media (min-width: 992px) { + .container-header .container-nav { + display: flex; + flex-direction: row; + align-items: center; + gap: 2rem; + } + + .container-header .container-nav nav { + flex: 1; + } + + .container-header .container-search { + flex: 0 0 auto; + min-width: 300px; + margin-top: 0; + } +} + + /* Base renderer for Joomla icon-* using Font Awesome Free */ [class^="icon-"]::before, [class*=" icon-"]::before { From 631407297d880b93a1c5dfed4a0b5a572f75ab8b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 16:55:15 +0000 Subject: [PATCH 35/45] Move user.css styles to template.css and add site-title margin Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/media/css/template.css | 101 +++++++++++++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) diff --git a/src/media/css/template.css b/src/media/css/template.css index be9834a..7a8738e 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -18357,3 +18357,104 @@ nav[data-toggle=toc] .nav-link.active+ul{ .icon-check::before { content: "\f00c"; } .icon-plus::before { content: "\f067"; } .icon-minus::before { content: "\f068"; } + +/* ========================================================= + * USER CUSTOM STYLES (from user.css) + * ========================================================= */ + +/* Site title styling */ +.site-title { +color: var(--nav-bg-color); +font-family: 'Osaka', sans-serif; +font-weight: 600; +font-size: 1.5rem; +text-decoration: none; +margin-left: var(--padding-x); +} + +.container-header .navbar-brand .site-title { +color: var(--nav-bg-color); +text-decoration: none; +} + +.container-header .navbar-brand a { +text-decoration: none; +} + +.brand-logo { +text-decoration: none; +} + +/* Search container styling */ +.container-search { +position: relative; +display: flex; +align-items: center; +border-radius: 0.375rem; +overflow: hidden; +box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +transition: box-shadow 0.2s ease; +} + +.container-search:focus-within { +box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +.container-search input { +border: none; +border-radius: 0; +} + +.container-search .btn { +border-radius: 0; +display: flex; +align-items: center; +justify-content: center; +background-color: var(--color-primary); +color: var(--mainmenu-nav-link-color); +border: none; +padding: 0.5rem 1rem; +transition: background-color 0.2s ease; +} + +.container-search .btn:hover { +background-color: var(--accent-color-primary); +} + +.container-search .btn:focus { +box-shadow: none; +} + +.container-search .icon-search { +font-size: 1rem; +color: var(--nav-bg-color); +} + +/* Responsive header layout */ +@media (max-width: 991px) { +.container-header .container-nav { +flex-direction: column; +gap: 1rem; +} + +.container-search { +width: 100%; +} + +.container-search input { +flex: 1; +} +} + +@media (min-width: 992px) { +.container-header .container-nav { +display: flex; +align-items: center; +gap: 2rem; +} + +.container-search { +width: auto; +min-width: 300px; +} +} From 06e837ea58057d0584dfab81448c13c8faf91451 Mon Sep 17 00:00:00 2001 From: Jonathan Miller <230051081+jmiller-moko@users.noreply.github.com> Date: Sat, 7 Feb 2026 10:56:19 -0600 Subject: [PATCH 36/45] Update template.css --- src/media/css/template.css | 101 ------------------------------------- 1 file changed, 101 deletions(-) diff --git a/src/media/css/template.css b/src/media/css/template.css index 7a8738e..be9834a 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -18357,104 +18357,3 @@ nav[data-toggle=toc] .nav-link.active+ul{ .icon-check::before { content: "\f00c"; } .icon-plus::before { content: "\f067"; } .icon-minus::before { content: "\f068"; } - -/* ========================================================= - * USER CUSTOM STYLES (from user.css) - * ========================================================= */ - -/* Site title styling */ -.site-title { -color: var(--nav-bg-color); -font-family: 'Osaka', sans-serif; -font-weight: 600; -font-size: 1.5rem; -text-decoration: none; -margin-left: var(--padding-x); -} - -.container-header .navbar-brand .site-title { -color: var(--nav-bg-color); -text-decoration: none; -} - -.container-header .navbar-brand a { -text-decoration: none; -} - -.brand-logo { -text-decoration: none; -} - -/* Search container styling */ -.container-search { -position: relative; -display: flex; -align-items: center; -border-radius: 0.375rem; -overflow: hidden; -box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); -transition: box-shadow 0.2s ease; -} - -.container-search:focus-within { -box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); -} - -.container-search input { -border: none; -border-radius: 0; -} - -.container-search .btn { -border-radius: 0; -display: flex; -align-items: center; -justify-content: center; -background-color: var(--color-primary); -color: var(--mainmenu-nav-link-color); -border: none; -padding: 0.5rem 1rem; -transition: background-color 0.2s ease; -} - -.container-search .btn:hover { -background-color: var(--accent-color-primary); -} - -.container-search .btn:focus { -box-shadow: none; -} - -.container-search .icon-search { -font-size: 1rem; -color: var(--nav-bg-color); -} - -/* Responsive header layout */ -@media (max-width: 991px) { -.container-header .container-nav { -flex-direction: column; -gap: 1rem; -} - -.container-search { -width: 100%; -} - -.container-search input { -flex: 1; -} -} - -@media (min-width: 992px) { -.container-header .container-nav { -display: flex; -align-items: center; -gap: 2rem; -} - -.container-search { -width: auto; -min-width: 300px; -} -} From e4f880c6216afddd27c3dbcb1b3789332eebe792 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 17:08:25 +0000 Subject: [PATCH 37/45] Reorganize 4 CSS variable files with consistent structure and section headers Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- .../css/colors/dark/colors_alternative.css | 876 ++++++------ src/media/css/colors/dark/colors_standard.css | 721 +++++----- .../css/colors/light/colors_alternative.css | 691 ++++----- .../css/colors/light/colors_standard.css | 1251 +++++++++-------- templates/colors_custom.css | 694 ++++----- 5 files changed, 2151 insertions(+), 2082 deletions(-) diff --git a/src/media/css/colors/dark/colors_alternative.css b/src/media/css/colors/dark/colors_alternative.css index f7ce97d..1f7a298 100644 --- a/src/media/css/colors/dark/colors_alternative.css +++ b/src/media/css/colors/dark/colors_alternative.css @@ -20,492 +20,494 @@ * --------------------------------------------- */ :root[data-bs-theme='dark']{ - /* System hint for native widgets */ - color-scheme: dark; +color-scheme: dark; - /* Brand & links */ - --color-primary: #112855; - --accent-color-primary: #3f8ff0; - --accent-color-secondary: #6fb3ff; +/* ===== BRAND & THEME COLORS ===== */ +--color-primary: #112855; +--accent-color-primary: #3f8ff0; +--accent-color-secondary: #6fb3ff; - --mainmenu-nav-link-color: #fff; +/* ===== NAVIGATION ===== */ +--mainmenu-nav-link-color: #fff; +--nav-text-color: var(--mainmenu-nav-link-color); +--nav-bg-color: var(--color-link); - --color-link: #224FAA; - --color-hover: #224FAA; +/* ===== LINKS ===== */ +--color-link: #224FAA; +--color-hover: #224FAA; +--link-color: #8ab4f8; +--link-color-rgb: 138, 180, 248; +--link-decoration: underline; +--link-hover-color: #c3d6ff; +--link-hover-color-rgb: 195, 214, 255; +--link-active-color: var(--link-color); - /* Header background (kept same image; works over dark bg) */ - --header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); --header-background-attachment: fixed; - --header-background-repeat: repeat; - --header-background-size: auto; +/* ===== OFFCANVAS ===== */ +--offcanvas-color: var(--body-color); +--offcanvas-padding-x: 1rem; +--offcanvas-padding-y: 1rem; - /* Section containers */ - --container-below-topbar-bg-image: ; - --container-below-topbar-bg-color: ; - --container-below-topbar-bg-position: center; - --container-below-topbar-bg-attachment: fixed; - --container-below-topbar-bg-repeat: no-repeat; - --container-below-topbar-bg-size: cover; - --container-below-topbar-border: ; - --container-below-topbar-border-radius: ; +/* ===== NAVBAR ===== */ +--navbar-padding-x: 1rem; +--navbar-padding-y: 0.5rem; +--navbar-color: var(--nav-text-color); +--navbar-active-color: var(--mainmenu-nav-link-color); +--navbar-disabled-color: #6c757d; +--navbar-brand-padding-y: 0.3125rem; +--navbar-brand-margin-end: 1rem; +--navbar-brand-font-size: 1.25rem; +--navbar-brand-color: var(--nav-text-color); +--navbar-brand-active-color: var(--mainmenu-nav-link-color); +--navbar-nav-link-padding-x: 0.5rem; +--navbar-toggler-padding-y: 0.25rem; +--navbar-toggler-padding-x: 0.75rem; +--navbar-toggler-font-size: 1.25rem; +--navbar-toggler-border-color: rgba(255, 255, 255, 0.1); +--navbar-toggler-border-radius: 0.25rem; +--navbar-toggler-focus-width: 0.25rem; +--navbar-toggler-transition: box-shadow 0.15s ease-in-out; +--nav-link-padding-x: 1rem; +--nav-link-padding-y: 0.5rem; +--nav-link-font-weight: 400; +--nav-link-color: var(--nav-text-color); +--nav-link-active-color: var(--mainmenu-nav-link-color); +--nav-link-disabled-color: #6c757d; - --container-top-a-bg-image: ; - --container-top-a-bg-color: ; - --container-top-a-bg-position: center; - --container-top-a-bg-attachment: fixed; - --container-top-a-bg-repeat: no-repeat; - --container-top-a-bg-size: cover; - --container-top-a-border: ; - --container-top-a-border-radius: ; +/* ===== TYPOGRAPHY & BODY ===== */ +--font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; +--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; +--body-font-size: 1rem; +--body-font-weight: 400; +--body-line-height: 1.5; +--body-color: #e6ebf1; +--body-color-rgb: 230, 235, 241; +--body-bg: #0e1318; +--body-bg-rgb: 14, 19, 24; +--heading-color: #f1f5f9; +--emphasis-color: #fff; +--emphasis-color-rgb: 255, 255, 255; +--secondary-color: #e6ebf1bf; +--secondary-color-rgb: 230, 235, 241; +--tertiary-color: #e6ebf180; +--tertiary-color-rgb: 230, 235, 241; +--muted-color: #6d757e; +--code-color: #ff7abd; +--code-color-ink: var(--code-color, #e93f8e); +--highlight-color: #111; +--highlight-bg: #ffe28a1a; - --container-top-b-bg-image: ; - --container-top-b-bg-color: ; - --container-top-b-bg-position: center; - --container-top-b-bg-attachment: fixed; - --container-top-b-bg-repeat: no-repeat; - --container-top-b-bg-size: cover; - --container-top-b-border: ; - --container-top-b-border-radius: ; +/* ===== LAYOUT & SPACING ===== */ +--padding-x: 1rem; +--padding-y: 1rem; +--bg-opacity: 1; +--nav-toggle-size: 3rem; +--gradient: linear-gradient(180deg, #ffffff26, #fff0); +--secondary-bg: #151b22; +--secondary-bg-rgb: 21, 27, 34; +--tertiary-bg: #10151b; +--tertiary-bg-rgb: 16, 21, 27; +--hr-color: var(--border-color, #dfe3e7); +--border-color-soft: var(--border-color, #dfe3e7); +--kbd-bg: var(--secondary-bg, #eaedf0); +--kbd-ink: var(--body-bg, #fff); +--toc-bg: var(--secondary-bg, #eaedf0); +--toc-ink: var(--color-primary, #112855); +--selection-bg: var(--highlight-bg, #fbeea8); +--selection-ink: var(--body-color, #22262a); +--border: 5px; - --container-toc-bg: ; - --container-toc-color: #dbe3ff; +/* ===== BREAKPOINTS ===== */ +--bp-xs: 0; +--bp-sm: 576px; +--bp-md: 768px; +--bp-lg: 992px; +--bp-xl: 1200px; - --container-sidebar-bg-image: ; - --container-sidebar-bg-color: ; - --container-sidebar-bg-position: center; - --container-sidebar-bg-attachment: scroll; - --container-sidebar-bg-repeat: repeat; - --container-sidebar-bg-size: auto; - --container-sidebar-border: ; - --container-sidebar-border-radius: ; +/* ===== 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; - --container-bottom-a-bg-image: ; - --container-bottom-a-bg-color: ; - --container-bottom-a-bg-position: center; - --container-bottom-a-bg-attachment: fixed; - --container-bottom-a-bg-repeat: no-repeat; - --container-bottom-a-bg-size: cover; - --container-bottom-a-border: ; - --container-bottom-a-border-radius: 5px; +/* ===== 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; - --container-bottom-b-bg-image: ; - --container-bottom-b-bg-color: ; - --container-bottom-b-bg-position: center; - --container-bottom-b-bg-attachment: fixed; - --container-bottom-b-bg-repeat: no-repeat; - --container-bottom-b-bg-size: cover; - --container-bottom-b-border: ; - --container-bottom-b-border-radius: ; +/* ===== 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; - /* Nav & accents */ - --nav-text-color: var(--mainmenu-nav-link-color); - --nav-bg-color: var(--color-link); - --border: 5px; +/* ===== HEADER BACKGROUND ===== */ +--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); +--header-background-attachment: fixed; +--header-background-repeat: repeat; +--header-background-size: auto; - --muted-color: #6d757e; - --hr-color: var(--border-color, #dfe3e7); - --link-active-color: var(--link-color); - --code-color-ink: var(--code-color, #e93f8e); - --border-color-soft: var(--border-color, #dfe3e7); - --kbd-bg: var(--secondary-bg, #eaedf0); - --kbd-ink: var(--body-bg, #fff); - --toc-bg: var(--secondary-bg, #eaedf0); - --toc-ink: var(--color-primary, #112855); - --selection-bg: var(--highlight-bg, #fbeea8); - --selection-ink: var(--body-color, #22262a); +/* ===== CONTAINER BACKGROUNDS ===== */ +/* Below Topbar Container */ +--container-below-topbar-bg-image: ; +--container-below-topbar-bg-color: ; +--container-below-topbar-bg-position: center; +--container-below-topbar-bg-attachment: fixed; +--container-below-topbar-bg-repeat: no-repeat; +--container-below-topbar-bg-size: cover; +--container-below-topbar-border: ; +--container-below-topbar-border-radius: ; - /* Palette */ - --blue: #91a4ff; - --black: #000; - --indigo: #b19cff; - --purple: #c0a5ff; - --pink: #ff8fc0; - --red: #ff7a73; - --orange: #ff9c4d; - --yellow: #ffd166; - --green: #78d694; - --teal: #76e3ff; - --cyan: #6fb7ff; - --white: #fff; +/* Top A Container */ +--container-top-a-bg-image: ; +--container-top-a-bg-color: ; +--container-top-a-bg-position: center; +--container-top-a-bg-attachment: fixed; +--container-top-a-bg-repeat: no-repeat; +--container-top-a-bg-size: cover; +--container-top-a-border: ; +--container-top-a-border-radius: ; - /* Grays tuned for dark */ - --gray-100: #161a20; - --gray-200: #1b2027; - --gray-300: #222831; - --gray-400: #2b323b; - --gray-500: #36404a; - --gray-600: #48525d; - --gray-700: #5b6672; - --gray-800: #cfd6de; - --gray-900: #e6ebf1; +/* Top B Container */ +--container-top-b-bg-image: ; +--container-top-b-bg-color: ; +--container-top-b-bg-position: center; +--container-top-b-bg-attachment: fixed; +--container-top-b-bg-repeat: no-repeat; +--container-top-b-bg-size: cover; +--container-top-b-border: ; +--container-top-b-border-radius: ; - /* Contextuals (keep brand hues) */ - --primary: #010156; - --secondary: #48525d; - --success: #4aa664; - --info: #4f7aa0; - --warning: #c77a00; - --danger: #c23a31; - --light: #1b2027; - --dark: #0f1318; +/* TOC Container */ +--container-toc-bg: ; +--container-toc-color: #dbe3ff; - /* RGB helpers */ - --primary-rgb: 1,1,86; - --secondary-rgb: 72,82,93; - --success-rgb: 74,166,100; - --info-rgb: 79,122,160; - --warning-rgb: 199,122,0; - --danger-rgb: 194,58,49; - --light-rgb: 27,32,39; - --dark-rgb: 15,19,24; +/* Sidebar Container */ +--container-sidebar-bg-image: ; +--container-sidebar-bg-color: ; +--container-sidebar-bg-position: center; +--container-sidebar-bg-attachment: scroll; +--container-sidebar-bg-repeat: repeat; +--container-sidebar-bg-size: auto; +--container-sidebar-border: ; +--container-sidebar-border-radius: ; - /* Emphasis & subtle variants */ - --primary-text-emphasis: #c7ccff; - --secondary-text-emphasis: #cfd6de; - --success-text-emphasis: #bde8c9; - --info-text-emphasis: #bcd6ee; - --warning-text-emphasis: #ffd9a6; - --danger-text-emphasis: #ffb7b2; - --light-text-emphasis: #d2d8df; - --dark-text-emphasis: #d2d8df; +/* Bottom A Container */ +--container-bottom-a-bg-image: ; +--container-bottom-a-bg-color: ; +--container-bottom-a-bg-position: center; +--container-bottom-a-bg-attachment: fixed; +--container-bottom-a-bg-repeat: no-repeat; +--container-bottom-a-bg-size: cover; +--container-bottom-a-border: ; +--container-bottom-a-border-radius: 5px; - --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; +/* Bottom B Container */ +--container-bottom-b-bg-image: ; +--container-bottom-b-bg-color: ; +--container-bottom-b-bg-position: center; +--container-bottom-b-bg-attachment: fixed; +--container-bottom-b-bg-repeat: no-repeat; +--container-bottom-b-bg-size: cover; +--container-bottom-b-border: ; +--container-bottom-b-border-radius: ; - --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; +/* ===== 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; - /* Typography & layout */ - --body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - --body-font-size: 1rem; - --body-font-weight: 400; - --body-line-height: 1.5; +/* ===== 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; - --body-color: #e6ebf1; - --body-color-rgb: 230, 235, 241; - --body-bg: #0e1318; - --body-bg-rgb: 14, 19, 24; +/* ===== FOCUS & FORMS ===== */ +--focus-ring-width: .25rem; +--focus-ring-opacity: .6; +--focus-ring-color: #5472ff66; +--input-color: #e6ebf1; +--input-bg: #1a2332; +--input-border-color: #3a4250; +--input-focus-border-color: #5472ff; +--input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); +--input-placeholder-color: #8894aa; +--input-disabled-bg: #0f1318; +--input-disabled-border-color: #2b323b; +--form-valid-color: #78d694; +--form-valid-border-color: #78d694; +--form-invalid-color: #ff8e86; +--form-invalid-border-color: #ff8e86; - --emphasis-color: #fff; - --emphasis-color-rgb: 255, 255, 255; +/* ===== 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); - --secondary-color: #e6ebf1bf; - --secondary-color-rgb: 230, 235, 241; +/* ===== CARDS ===== */ +--card-spacer-y: 1rem; +--card-spacer-x: 1rem; +--card-title-spacer-y: 0.5rem; +--card-border-width: 1px; +--card-border-color: var(--border-color); +--card-border-radius: var(--border-radius); +--card-box-shadow: none; +--card-inner-border-radius: calc(var(--border-radius) - 1px); +--card-cap-padding-y: 0.5rem; +--card-cap-padding-x: 1rem; +--card-cap-bg: rgba(255, 255, 255, 0.03); +--card-cap-color: var(--body-color); +--card-height: auto; +--card-color: var(--body-color); +--card-bg: var(--secondary-bg); +--card-img-overlay-padding: 1rem; +--card-group-margin: 0.75rem; - --secondary-bg: #151b22; - --secondary-bg-rgb: 21, 27, 34; +/* ===== VIRTUEMART (VM) ===== */ +/* VM Surfaces */ +--vm-surface: var(--secondary-bg); +--vm-surface-2: var(--tertiary-bg); +--vm-text: var(--body-color); +--vm-text-strong: #ffffff; +--vm-text-muted: var(--gray-700); +--vm-border: var(--border-color); +--vm-price-color: var(--success); - --tertiary-color: #e6ebf180; - --tertiary-color-rgb: 230, 235, 241; - --tertiary-bg: #10151b; - --tertiary-bg-rgb: 16, 21, 27; +/* VM Layout and Density */ +--vm-container-max-width: 1200px; +--vm-section-gap: 2rem; +--vm-block-radius: var(--border-radius); +--vm-block-shadow: var(--box-shadow-sm); - --heading-color: #f1f5f9; +/* VM Typography */ +--vm-category-title-size: 2rem; +--vm-subcategory-title-size: 1.5rem; +--vm-page-title-size: 1.75rem; +--vm-products-type-title-size: 1.25rem; +--vm-product-title-size: 1.125rem; +--vm-product-title-weight: 500; +--vm-products-type-title-weight: 600; +--vm-price-size: 1.5rem; +--vm-price-detail-size: 1.125rem; +--vm-price-desc-size: 0.875rem; - --link-color: #8ab4f8; - --link-color-rgb: 138, 180, 248; - --link-decoration: underline; - --link-hover-color: #c3d6ff; - --link-hover-color-rgb: 195, 214, 255; +/* VM Controls */ +--vm-input-radius: var(--border-radius); +--vm-input-shadow: var(--box-shadow-sm); +--vm-qty-width: 80px; +--vm-cart-dropdown-min-width: 300px; - --code-color: #ff7abd; - --highlight-color: #111; - --highlight-bg: #ffe28a1a; +/* VM Alerts */ +--vm-alert-radius: var(--border-radius); +--vm-alert-shadow: var(--box-shadow-sm); +--vm-availability-bg: var(--success-bg-subtle); +--vm-availability-text: var(--success); - --border-width: 1px; - --border-style: solid; - --border-color: #2b323b; - --border-color-translucent: #ffffff26; +/* VM Buttons */ +--vm-btn-padding-x: 1rem; +--vm-btn-padding-y: 0.5rem; +--vm-btn-radius: var(--border-radius); +--vm-btn-shadow: var(--box-shadow-sm); +--vm-btn-primary-bg: var(--primary); +--vm-btn-primary-text: #ffffff; +--vm-btn-primary-border: var(--primary); +--vm-btn-secondary-bg: var(--secondary); +--vm-btn-secondary-text: #ffffff; +--vm-btn-secondary-border: var(--secondary); - --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; +/* VM Image Overlay Controls */ +--vm-image-overlay-gap-x: 0.5rem; +--vm-image-overlay-gap-y: 0.5rem; +--vm-image-overlay-raise: 0.25rem; +--vm-image-overlay-btn-size: 2.5rem; +--vm-image-overlay-btn-radius: 50%; +--vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7); +--vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85); +--vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2); +--vm-image-overlay-btn-border-width: 1px; +--vm-image-overlay-btn-color: var(--body-color); +--vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - --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; +/* VM Vendor Menu */ +--vm-vendor-menu-bg: var(--secondary-bg); +--vm-vendor-menu-border: var(--border-color); +--vm-vendor-menu-radius: var(--border-radius); +--vm-vendor-menu-shadow: var(--box-shadow-sm); +--vm-vendor-menu-item-gap: 0.25rem; +--vm-vendor-menu-item-padding-x: 1rem; +--vm-vendor-menu-item-padding-y: 0.5rem; +--vm-vendor-menu-pill-radius: 50rem; +--vm-vendor-menu-link: var(--link-color); +--vm-vendor-menu-link-hover: var(--link-hover-color); +--vm-vendor-menu-link-active: var(--primary); +--vm-vendor-menu-hover-bg: var(--tertiary-bg); - --focus-ring-width: .25rem; - --focus-ring-opacity: .6; - --focus-ring-color: #5472ff66; - - --form-valid-color: #78d694; - --form-valid-border-color: #78d694; - --form-invalid-color: #ff8e86; - --form-invalid-border-color: #ff8e86; - - /* Offcanvas (moved from template.css) */ - --offcanvas-color: var(--body-color); - --offcanvas-padding-x: 1rem; - --offcanvas-padding-y: 1rem; - - /* Navbar */ - --navbar-padding-x: 1rem; - --navbar-padding-y: 0.5rem; - --navbar-color: var(--nav-text-color); - --navbar-active-color: var(--mainmenu-nav-link-color); - --navbar-disabled-color: #6c757d; - --navbar-brand-padding-y: 0.3125rem; - --navbar-brand-margin-end: 1rem; - --navbar-brand-font-size: 1.25rem; - --navbar-brand-color: var(--nav-text-color); - --navbar-brand-active-color: var(--mainmenu-nav-link-color); - --navbar-nav-link-padding-x: 0.5rem; - --navbar-toggler-padding-y: 0.25rem; - --navbar-toggler-padding-x: 0.75rem; - --navbar-toggler-font-size: 1.25rem; - --navbar-toggler-border-color: rgba(255, 255, 255, 0.1); - --navbar-toggler-border-radius: 0.25rem; - --navbar-toggler-focus-width: 0.25rem; - --navbar-toggler-transition: box-shadow 0.15s ease-in-out; - --nav-link-padding-x: 1rem; - --nav-link-padding-y: 0.5rem; - --nav-link-font-weight: 400; - --nav-link-color: var(--nav-text-color); - --nav-link-active-color: var(--mainmenu-nav-link-color); - --nav-link-disabled-color: #6c757d; - - /* Responsive tokens */ - --nav-toggle-size: 3rem; - --bp-xs: 0; - --bp-sm: 576px; - --bp-md: 768px; - --bp-lg: 992px; - --bp-xl: 1200px; - - /* Utility opacity defaults */ - --bg-opacity: 1; - - /* Layout padding */ - --padding-x: 1rem; - --padding-y: 1rem; - - /* Button utilities */ - --btn-border-radius: var(--border-radius); - --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3); - - /* Card variables */ - --card-spacer-y: 1rem; - --card-spacer-x: 1rem; - --card-title-spacer-y: 0.5rem; - --card-border-width: 1px; - --card-border-color: var(--border-color); - --card-border-radius: var(--border-radius); - --card-box-shadow: none; - --card-inner-border-radius: calc(var(--border-radius) - 1px); - --card-cap-padding-y: 0.5rem; - --card-cap-padding-x: 1rem; - --card-cap-bg: rgba(255, 255, 255, 0.03); - --card-cap-color: var(--body-color); - --card-height: auto; - --card-color: var(--body-color); - --card-bg: var(--secondary-bg); - --card-img-overlay-padding: 1rem; - --card-group-margin: 0.75rem; - - /* VirtueMart surfaces */ - --vm-surface: var(--secondary-bg); - --vm-surface-2: var(--tertiary-bg); - --vm-text: var(--body-color); - --vm-text-strong: #ffffff; - --vm-text-muted: var(--gray-700); - --vm-border: var(--border-color); - --vm-price-color: var(--success); - - /* VM layout and density */ - --vm-container-max-width: 1200px; - --vm-section-gap: 2rem; - --vm-block-radius: var(--border-radius); - --vm-block-shadow: var(--box-shadow-sm); - - /* VM typography */ - --vm-category-title-size: 2rem; - --vm-subcategory-title-size: 1.5rem; - --vm-page-title-size: 1.75rem; - --vm-products-type-title-size: 1.25rem; - --vm-product-title-size: 1.125rem; - --vm-product-title-weight: 500; - --vm-products-type-title-weight: 600; - --vm-price-size: 1.5rem; - --vm-price-detail-size: 1.125rem; - --vm-price-desc-size: 0.875rem; - - /* VM controls */ - --vm-input-radius: var(--border-radius); - --vm-input-shadow: var(--box-shadow-sm); - --vm-qty-width: 80px; - --vm-cart-dropdown-min-width: 300px; - - /* VM alerts */ - --vm-alert-radius: var(--border-radius); - --vm-alert-shadow: var(--box-shadow-sm); - --vm-availability-bg: var(--success-bg-subtle); - --vm-availability-text: var(--success); - - /* VM buttons */ - --vm-btn-padding-x: 1rem; - --vm-btn-padding-y: 0.5rem; - --vm-btn-radius: var(--border-radius); - --vm-btn-shadow: var(--box-shadow-sm); - --vm-btn-primary-bg: var(--primary); - --vm-btn-primary-text: #ffffff; - --vm-btn-primary-border: var(--primary); - --vm-btn-secondary-bg: var(--secondary); - --vm-btn-secondary-text: #ffffff; - --vm-btn-secondary-border: var(--secondary); - - /* VM image overlay controls */ - --vm-image-overlay-gap-x: 0.5rem; - --vm-image-overlay-gap-y: 0.5rem; - --vm-image-overlay-raise: 0.25rem; - --vm-image-overlay-btn-size: 2.5rem; - --vm-image-overlay-btn-radius: 50%; - --vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7); - --vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85); - --vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2); - --vm-image-overlay-btn-border-width: 1px; - --vm-image-overlay-btn-color: var(--body-color); - --vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - - /* VM vendor menu tokens */ - --vm-vendor-menu-bg: var(--secondary-bg); - --vm-vendor-menu-border: var(--border-color); - --vm-vendor-menu-radius: var(--border-radius); - --vm-vendor-menu-shadow: var(--box-shadow-sm); - --vm-vendor-menu-item-gap: 0.25rem; - --vm-vendor-menu-item-padding-x: 1rem; - --vm-vendor-menu-item-padding-y: 0.5rem; - --vm-vendor-menu-pill-radius: 50rem; - --vm-vendor-menu-link: var(--link-color); - --vm-vendor-menu-link-hover: var(--link-hover-color); - --vm-vendor-menu-link-active: var(--primary); - --vm-vendor-menu-hover-bg: var(--tertiary-bg); - - /* Gable colors */ - --gab-blue: #4d9fff; - --gab-green: #5cb85c; - --gab-red: #ff6b6b; - --gab-orange: #ff9f5a; - --gab-gray1: #868e96; - --gab-gray2: #adb5bd; - --gab-gray3: #ced4da; +/* ===== GABLE ===== */ +--gab-blue: #4d9fff; +--gab-green: #5cb85c; +--gab-red: #ff6b6b; +--gab-orange: #ff9f5a; +--gab-gray1: #868e96; +--gab-gray2: #adb5bd; +--gab-gray3: #ced4da; } .btn { - --btn-padding-x: 1rem; - --btn-padding-y: 0.6rem; - --btn-font-family: ; - --btn-font-size: 1rem; - --btn-font-weight: 400; - --btn-line-height: 1.5; - --btn-color: var(--white); - --btn-bg: transparent; - --btn-border-width: 1px; - --btn-border-color: transparent; - --btn-border-radius: 0.25rem; - --btn-active-border-color: transparent; - --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); - --btn-disabled-opacity: 0.65; - --btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); - display: inline-block; - padding: var(--btn-padding-y) var(--btn-padding-x); - font-family: var(--btn-font-family); - font-size: var(--btn-font-size); - font-weight: var(--btn-font-weight); - line-height: var(--btn-line-height); - color: var(--btn-color); - text-align: center; - text-decoration: none; - vertical-align: middle; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border: var(--btn-border-width) solid var(--btn-border-color); - border-radius: var(--btn-border-radius); - background-color: var(--btn-bg); - -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - -o-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; - 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; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; +--btn-padding-x: 1rem; +--btn-padding-y: 0.6rem; +--btn-font-family: ; +--btn-font-size: 1rem; +--btn-font-weight: 400; +--btn-line-height: 1.5; +--btn-color: var(--white); +--btn-bg: transparent; +--btn-border-width: 1px; +--btn-border-color: transparent; +--btn-border-radius: 0.25rem; +--btn-active-border-color: transparent; +--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); +--btn-disabled-opacity: 0.65; +--btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); +display: inline-block; +padding: var(--btn-padding-y) var(--btn-padding-x); +font-family: var(--btn-font-family); +font-size: var(--btn-font-size); +font-weight: var(--btn-font-weight); +line-height: var(--btn-line-height); +color: var(--btn-color); +text-align: center; +text-decoration: none; +vertical-align: middle; +cursor: pointer; +-webkit-user-select: none; +-moz-user-select: none; +-ms-user-select: none; +user-select: none; +border: var(--btn-border-width) solid var(--btn-border-color); +border-radius: var(--btn-border-radius); +background-color: var(--btn-bg); +-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; +transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; +-o-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; +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; +transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; } -/* Buttons — inherit brand hues; ensure strong contrast on dark bg */ .btn-primary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(240, 98%, 17%); - --btn-border-color: hsl(240, 98%, 17%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #010149; - --btn-hover-border-color: #010145; - --btn-focus-shadow-rgb: 84, 114, 255; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #010145; - --btn-active-border-color: #010141; +--btn-color: hsl(0, 0%, 100%); +--btn-bg: hsl(240, 98%, 17%); +--btn-border-color: hsl(240, 98%, 17%); +--btn-hover-color: hsl(0, 0%, 100%); +--btn-hover-bg: #010149; +--btn-hover-border-color: #010145; +--btn-focus-shadow-rgb: 84, 114, 255; +--btn-active-color: hsl(0, 0%, 100%); +--btn-active-bg: #010145; +--btn-active-border-color: #010141; } .btn-secondary { - --btn-color: var(--nav-text-color); - --btn-bg: var(--nav-bg-color); - --btn-border-color: #3a4250; - --btn-hover-color: #fff; - --btn-hover-bg: #1b2a55; - --btn-hover-border-color: #162448; - --btn-focus-shadow-rgb: 84, 114, 255; - --btn-active-color: #fff; - --btn-active-bg: #162448; - --btn-active-border-color: #12203f; +--btn-color: var(--nav-text-color); +--btn-bg: var(--nav-bg-color); +--btn-border-color: #3a4250; +--btn-hover-color: #fff; +--btn-hover-bg: #1b2a55; +--btn-hover-border-color: #162448; +--btn-focus-shadow-rgb: 84, 114, 255; +--btn-active-color: #fff; +--btn-active-bg: #162448; +--btn-active-border-color: #12203f; } -/* Outline buttons on dark: keep readable borders */ .btn-outline-light { - --btn-color: #e6ebf1; - --btn-border-color: #e6ebf1; - --btn-hover-color: #111; - --btn-hover-bg: #e6ebf1; - --btn-hover-border-color: #e6ebf1; - --btn-active-color: #111; - --btn-active-bg: #d7dce2; - --btn-active-border-color: #d7dce2; - --gradient: none; +--btn-color: #e6ebf1; +--btn-border-color: #e6ebf1; +--btn-hover-color: #111; +--btn-hover-bg: #e6ebf1; +--btn-hover-border-color: #e6ebf1; +--btn-active-color: #111; +--btn-active-bg: #d7dce2; +--btn-active-border-color: #d7dce2; +--gradient: none; } -/* Links as buttons */ .btn-link { - --btn-font-weight: 400; - --btn-color: var(--link-color); - --btn-bg: transparent; - --btn-border-color: transparent; - --btn-hover-color: var(--link-hover-color); - --btn-hover-border-color: transparent; - --btn-active-color: var(--link-hover-color); - --btn-active-border-color: transparent; - --btn-disabled-color: #6d7781; - --btn-disabled-border-color: transparent; - --btn-box-shadow: none; - --btn-focus-shadow-rgb: 84, 114, 255; - text-decoration: underline; +--btn-font-weight: 400; +--btn-color: var(--link-color); +--btn-bg: transparent; +--btn-border-color: transparent; +--btn-hover-color: var(--link-hover-color); +--btn-hover-border-color: transparent; +--btn-active-color: var(--link-hover-color); +--btn-active-border-color: transparent; +--btn-disabled-color: #6d7781; +--btn-disabled-border-color: transparent; +--btn-box-shadow: none; +--btn-focus-shadow-rgb: 84, 114, 255; +text-decoration: underline; } .btn-secondary { - --btn-color: var(--nav-text-color); - --btn-bg: var(--nav-bg-color); +--btn-color: var(--nav-text-color); +--btn-bg: var(--nav-bg-color); } diff --git a/src/media/css/colors/dark/colors_standard.css b/src/media/css/colors/dark/colors_standard.css index daf4c3a..4b34ea1 100644 --- a/src/media/css/colors/dark/colors_standard.css +++ b/src/media/css/colors/dark/colors_standard.css @@ -20,402 +20,397 @@ * --------------------------------------------- */ :root[data-bs-theme='dark']{ - /* System hint for native widgets */ - color-scheme: dark; +color-scheme: dark; - /* Brand & links */ - --color-primary: #112855; - --accent-color-primary: #3f8ff0; - --accent-color-secondary: #6fb3ff; +/* ===== BRAND & THEME COLORS ===== */ +--color-primary: #112855; +--accent-color-primary: #3f8ff0; +--accent-color-secondary: #6fb3ff; - --mainmenu-nav-link-color: #fff; +/* ===== NAVIGATION ===== */ +--mainmenu-nav-link-color: #fff; +--nav-text-color: gray; +--nav-bg-color: var(--color-primary); - --color-link: white; - --color-hover: gray; - --color-active: var(--mainmenu-nav-link-color); +/* ===== 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); - /* Header background (kept same image; works over dark bg) */ - --header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); --header-background-attachment: fixed; - --header-background-repeat: repeat; - --header-background-size: auto; +/* ===== OFFCANVAS ===== */ +--offcanvas-color: var(--body-color); +--offcanvas-padding-x: 1rem; +--offcanvas-padding-y: 1rem; - /* Section containers */ - --container-below-topbar-bg-image: ; - --container-below-topbar-bg-color: ; - --container-below-topbar-bg-position: center; - --container-below-topbar-bg-attachment: fixed; - --container-below-topbar-bg-repeat: no-repeat; - --container-below-topbar-bg-size: cover; - --container-below-topbar-border: ; - --container-below-topbar-border-radius: ; +/* ===== NAVBAR ===== */ +--navbar-padding-x: 1rem; +--navbar-padding-y: 0.5rem; +--navbar-color: var(--nav-text-color); +--navbar-active-color: var(--mainmenu-nav-link-color); +--navbar-disabled-color: #6c757d; +--navbar-brand-padding-y: 0.3125rem; +--navbar-brand-margin-end: 1rem; +--navbar-brand-font-size: 1.25rem; +--navbar-brand-color: var(--nav-text-color); +--navbar-brand-active-color: var(--mainmenu-nav-link-color); +--navbar-nav-link-padding-x: 0.5rem; +--navbar-toggler-padding-y: 0.25rem; +--navbar-toggler-padding-x: 0.75rem; +--navbar-toggler-font-size: 1.25rem; +--navbar-toggler-border-color: rgba(255, 255, 255, 0.1); +--navbar-toggler-border-radius: 0.25rem; +--navbar-toggler-focus-width: 0.25rem; +--navbar-toggler-transition: box-shadow 0.15s ease-in-out; +--nav-link-padding-x: 1rem; +--nav-link-padding-y: 0.5rem; +--nav-link-font-weight: 400; +--nav-link-color: var(--nav-text-color); +--nav-link-active-color: var(--mainmenu-nav-link-color); +--nav-link-disabled-color: #6c757d; - --container-top-a-bg-image: ; - --container-top-a-bg-color: ; - --container-top-a-bg-position: center; - --container-top-a-bg-attachment: fixed; - --container-top-a-bg-repeat: no-repeat; - --container-top-a-bg-size: cover; - --container-top-a-border: ; - --container-top-a-border-radius: ; +/* ===== TYPOGRAPHY & BODY ===== */ +--font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; +--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; +--body-font-size: 1rem; +--body-font-weight: 400; +--body-line-height: 1.5; +--body-color: #e6ebf1; +--body-color-rgb: 230, 235, 241; +--body-bg: #0e1318; +--body-bg-rgb: 14, 19, 24; +--heading-color: #f1f5f9; +--emphasis-color: #fff; +--emphasis-color-rgb: 255, 255, 255; +--secondary-color: #e6ebf1bf; +--secondary-color-rgb: 230, 235, 241; +--tertiary-color: #e6ebf180; +--tertiary-color-rgb: 230, 235, 241; +--muted-color: #6d757e; +--code-color: #ff7abd; +--code-color-ink: var(--code-color, #e93f8e); +--highlight-color: #111; +--highlight-bg: #ffe28a1a; - --container-top-b-bg-image: ; - --container-top-b-bg-color: ; - --container-top-b-bg-position: center; - --container-top-b-bg-attachment: fixed; - --container-top-b-bg-repeat: no-repeat; - --container-top-b-bg-size: cover; - --container-top-b-border: ; - --container-top-b-border-radius: ; +/* ===== LAYOUT & SPACING ===== */ +--padding-x: 1rem; +--padding-y: 1rem; +--bg-opacity: 1; +--nav-toggle-size: 3rem; +--gradient: linear-gradient(180deg, #ffffff26, #fff0); +--secondary-bg: #151b22; +--secondary-bg-rgb: 21, 27, 34; +--tertiary-bg: #10151b; +--tertiary-bg-rgb: 16, 21, 27; +--hr-color: var(--border-color, #dfe3e7); +--border-color-soft: var(--border-color, #dfe3e7); +--kbd-bg: var(--secondary-bg, #eaedf0); +--kbd-ink: var(--body-bg, #fff); +--toc-bg: var(--secondary-bg, #eaedf0); +--toc-ink: var(--color-primary, #112855); +--selection-bg: var(--highlight-bg, #fbeea8); +--selection-ink: var(--body-color, #22262a); +--border: 5px; - --container-toc-bg: ; - --container-toc-color: #dbe3ff; +/* ===== BREAKPOINTS ===== */ +--bp-xs: 0; +--bp-sm: 576px; +--bp-md: 768px; +--bp-lg: 992px; +--bp-xl: 1200px; - --container-sidebar-bg-image: ; - --container-sidebar-bg-color: ; - --container-sidebar-bg-position: center; - --container-sidebar-bg-attachment: scroll; - --container-sidebar-bg-repeat: repeat; - --container-sidebar-bg-size: auto; - --container-sidebar-border: ; - --container-sidebar-border-radius: ; +/* ===== 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; - --container-bottom-a-bg-image: ; - --container-bottom-a-bg-color: ; - --container-bottom-a-bg-position: center; - --container-bottom-a-bg-attachment: fixed; - --container-bottom-a-bg-repeat: no-repeat; - --container-bottom-a-bg-size: cover; - --container-bottom-a-border: ; - --container-bottom-a-border-radius: 5px; +/* ===== 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; - --container-bottom-b-bg-image: ; - --container-bottom-b-bg-color: ; - --container-bottom-b-bg-position: center; - --container-bottom-b-bg-attachment: fixed; - --container-bottom-b-bg-repeat: no-repeat; - --container-bottom-b-bg-size: cover; - --container-bottom-b-border: ; - --container-bottom-b-border-radius: ; +/* ===== 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; - /* Nav & accents */ - --nav-text-color: gray; - --nav-bg-color: var(--color-primary); - --border: 5px; +/* ===== HEADER BACKGROUND ===== */ +--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); +--header-background-attachment: fixed; +--header-background-repeat: repeat; +--header-background-size: auto; - --muted-color: #6d757e; - --hr-color: var(--border-color, #dfe3e7); - --link-active-color: var(--link-color); - --code-color-ink: var(--code-color, #e93f8e); - --border-color-soft: var(--border-color, #dfe3e7); - --kbd-bg: var(--secondary-bg, #eaedf0); - --kbd-ink: var(--body-bg, #fff); - --toc-bg: var(--secondary-bg, #eaedf0); - --toc-ink: var(--color-primary, #112855); - --selection-bg: var(--highlight-bg, #fbeea8); - --selection-ink: var(--body-color, #22262a); +/* ===== CONTAINER BACKGROUNDS ===== */ +/* Below Topbar Container */ +--container-below-topbar-bg-image: ; +--container-below-topbar-bg-color: ; +--container-below-topbar-bg-position: center; +--container-below-topbar-bg-attachment: fixed; +--container-below-topbar-bg-repeat: no-repeat; +--container-below-topbar-bg-size: cover; +--container-below-topbar-border: ; +--container-below-topbar-border-radius: ; - /* Palette */ - --blue: #91a4ff; - --black: #000; - --indigo: #b19cff; - --purple: #c0a5ff; - --pink: #ff8fc0; - --red: #ff7a73; - --orange: #ff9c4d; - --yellow: #ffd166; - --green: #78d694; - --teal: #76e3ff; - --cyan: #6fb7ff; - --white: #fff; +/* Top A Container */ +--container-top-a-bg-image: ; +--container-top-a-bg-color: ; +--container-top-a-bg-position: center; +--container-top-a-bg-attachment: fixed; +--container-top-a-bg-repeat: no-repeat; +--container-top-a-bg-size: cover; +--container-top-a-border: ; +--container-top-a-border-radius: ; - /* Grays tuned for dark */ - --gray-100: #161a20; - --gray-200: #1b2027; - --gray-300: #222831; - --gray-400: #2b323b; - --gray-500: #36404a; - --gray-600: #48525d; - --gray-700: #5b6672; - --gray-800: #cfd6de; - --gray-900: #e6ebf1; +/* Top B Container */ +--container-top-b-bg-image: ; +--container-top-b-bg-color: ; +--container-top-b-bg-position: center; +--container-top-b-bg-attachment: fixed; +--container-top-b-bg-repeat: no-repeat; +--container-top-b-bg-size: cover; +--container-top-b-border: ; +--container-top-b-border-radius: ; - /* Contextuals (keep brand hues) */ - --primary: #010156; - --secondary: #48525d; - --success: #4aa664; - --info: #4f7aa0; - --warning: #c77a00; - --danger: #c23a31; - --light: #1b2027; - --dark: #0f1318; +/* TOC Container */ +--container-toc-bg: ; +--container-toc-color: #dbe3ff; - /* RGB helpers */ - --primary-rgb: 1,1,86; - --secondary-rgb: 72,82,93; - --success-rgb: 74,166,100; - --info-rgb: 79,122,160; - --warning-rgb: 199,122,0; - --danger-rgb: 194,58,49; - --light-rgb: 27,32,39; - --dark-rgb: 15,19,24; +/* Sidebar Container */ +--container-sidebar-bg-image: ; +--container-sidebar-bg-color: ; +--container-sidebar-bg-position: center; +--container-sidebar-bg-attachment: scroll; +--container-sidebar-bg-repeat: repeat; +--container-sidebar-bg-size: auto; +--container-sidebar-border: ; +--container-sidebar-border-radius: ; - /* Emphasis & subtle variants */ - --primary-text-emphasis: #c7ccff; - --secondary-text-emphasis: #cfd6de; - --success-text-emphasis: #bde8c9; - --info-text-emphasis: #bcd6ee; - --warning-text-emphasis: #ffd9a6; - --danger-text-emphasis: #ffb7b2; - --light-text-emphasis: #d2d8df; - --dark-text-emphasis: #d2d8df; +/* Bottom A Container */ +--container-bottom-a-bg-image: ; +--container-bottom-a-bg-color: ; +--container-bottom-a-bg-position: center; +--container-bottom-a-bg-attachment: fixed; +--container-bottom-a-bg-repeat: no-repeat; +--container-bottom-a-bg-size: cover; +--container-bottom-a-border: ; +--container-bottom-a-border-radius: 5px; - --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; +/* Bottom B Container */ +--container-bottom-b-bg-image: ; +--container-bottom-b-bg-color: ; +--container-bottom-b-bg-position: center; +--container-bottom-b-bg-attachment: fixed; +--container-bottom-b-bg-repeat: no-repeat; +--container-bottom-b-bg-size: cover; +--container-bottom-b-border: ; +--container-bottom-b-border-radius: ; - --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; +/* ===== 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; - /* Typography & layout */ - --body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - --body-font-size: 1rem; - --body-font-weight: 400; - --body-line-height: 1.5; +/* ===== 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; - --body-color: #e6ebf1; - --body-color-rgb: 230, 235, 241; - --body-bg: #0e1318; - --body-bg-rgb: 14, 19, 24; +/* ===== FOCUS & FORMS ===== */ +--focus-ring-width: .25rem; +--focus-ring-opacity: .6; +--focus-ring-color: #5472ff66; +--input-color: #e6ebf1; +--input-bg: #1a2332; +--input-border-color: #3a4250; +--input-focus-border-color: #5472ff; +--input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); +--input-placeholder-color: #8894aa; +--input-disabled-bg: #0f1318; +--input-disabled-border-color: #2b323b; +--form-valid-color: #78d694; +--form-valid-border-color: #78d694; +--form-invalid-color: #ff8e86; +--form-invalid-border-color: #ff8e86; - --emphasis-color: #fff; - --emphasis-color-rgb: 255, 255, 255; +/* ===== 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); - --secondary-color: #e6ebf1bf; - --secondary-color-rgb: 230, 235, 241; +/* ===== CARDS ===== */ +--card-spacer-y: 1rem; +--card-spacer-x: 1rem; +--card-title-spacer-y: 0.5rem; +--card-border-width: 1px; +--card-border-color: var(--border-color); +--card-border-radius: var(--border-radius); +--card-box-shadow: none; +--card-inner-border-radius: calc(var(--border-radius) - 1px); +--card-cap-padding-y: 0.5rem; +--card-cap-padding-x: 1rem; +--card-cap-bg: rgba(255, 255, 255, 0.03); +--card-cap-color: var(--body-color); +--card-height: auto; +--card-color: var(--body-color); +--card-bg: var(--secondary-bg); +--card-img-overlay-padding: 1rem; +--card-group-margin: 0.75rem; - --secondary-bg: #151b22; - --secondary-bg-rgb: 21, 27, 34; +/* ===== VIRTUEMART (VM) ===== */ +/* VM Surfaces */ +--vm-surface: var(--secondary-bg); +--vm-surface-2: var(--tertiary-bg); +--vm-text: var(--body-color); +--vm-text-strong: #ffffff; +--vm-text-muted: var(--gray-700); +--vm-border: var(--border-color); +--vm-price-color: var(--success); - --tertiary-color: #e6ebf180; - --tertiary-color-rgb: 230, 235, 241; - --tertiary-bg: #10151b; - --tertiary-bg-rgb: 16, 21, 27; +/* VM Layout and Density */ +--vm-container-max-width: 1200px; +--vm-section-gap: 2rem; +--vm-block-radius: var(--border-radius); +--vm-block-shadow: var(--box-shadow-sm); - --heading-color: #f1f5f9; +/* VM Typography */ +--vm-category-title-size: 2rem; +--vm-subcategory-title-size: 1.5rem; +--vm-page-title-size: 1.75rem; +--vm-products-type-title-size: 1.25rem; +--vm-product-title-size: 1.125rem; +--vm-product-title-weight: 500; +--vm-products-type-title-weight: 600; +--vm-price-size: 1.5rem; +--vm-price-detail-size: 1.125rem; +--vm-price-desc-size: 0.875rem; - --link-color: #8ab4f8; - --link-color-rgb: 138, 180, 248; - --link-decoration: underline; - --link-hover-color: #c3d6ff; - --link-hover-color-rgb: 195, 214, 255; +/* VM Controls */ +--vm-input-radius: var(--border-radius); +--vm-input-shadow: var(--box-shadow-sm); +--vm-qty-width: 80px; +--vm-cart-dropdown-min-width: 300px; - --code-color: #ff7abd; - --highlight-color: #111; - --highlight-bg: #ffe28a1a; +/* VM Alerts */ +--vm-alert-radius: var(--border-radius); +--vm-alert-shadow: var(--box-shadow-sm); +--vm-availability-bg: var(--success-bg-subtle); +--vm-availability-text: var(--success); - --border-width: 1px; - --border-style: solid; - --border-color: #2b323b; - --border-color-translucent: #ffffff26; +/* VM Buttons */ +--vm-btn-padding-x: 1rem; +--vm-btn-padding-y: 0.5rem; +--vm-btn-radius: var(--border-radius); +--vm-btn-shadow: var(--box-shadow-sm); +--vm-btn-primary-bg: var(--primary); +--vm-btn-primary-text: #ffffff; +--vm-btn-primary-border: var(--primary); +--vm-btn-secondary-bg: var(--secondary); +--vm-btn-secondary-text: #ffffff; +--vm-btn-secondary-border: var(--secondary); - --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; +/* VM Image Overlay Controls */ +--vm-image-overlay-gap-x: 0.5rem; +--vm-image-overlay-gap-y: 0.5rem; +--vm-image-overlay-raise: 0.25rem; +--vm-image-overlay-btn-size: 2.5rem; +--vm-image-overlay-btn-radius: 50%; +--vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7); +--vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85); +--vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2); +--vm-image-overlay-btn-border-width: 1px; +--vm-image-overlay-btn-color: var(--body-color); +--vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - --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; +/* VM Vendor Menu */ +--vm-vendor-menu-bg: var(--secondary-bg); +--vm-vendor-menu-border: var(--border-color); +--vm-vendor-menu-radius: var(--border-radius); +--vm-vendor-menu-shadow: var(--box-shadow-sm); +--vm-vendor-menu-item-gap: 0.25rem; +--vm-vendor-menu-item-padding-x: 1rem; +--vm-vendor-menu-item-padding-y: 0.5rem; +--vm-vendor-menu-pill-radius: 50rem; +--vm-vendor-menu-link: var(--link-color); +--vm-vendor-menu-link-hover: var(--link-hover-color); +--vm-vendor-menu-link-active: var(--primary); +--vm-vendor-menu-hover-bg: var(--tertiary-bg); - --focus-ring-width: .25rem; - --focus-ring-opacity: .6; - --focus-ring-color: #5472ff66; - - /* Forms and inputs - adapted for dark mode */ - --input-color: #e6ebf1; - --input-bg: #1a2332; - --input-border-color: #3a4250; - --input-focus-border-color: #5472ff; - --input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); - --input-placeholder-color: #8894aa; - --input-disabled-bg: #0f1318; - --input-disabled-border-color: #2b323b; - - --form-valid-color: #78d694; - --form-valid-border-color: #78d694; - --form-invalid-color: #ff8e86; - --form-invalid-border-color: #ff8e86; - - /* Offcanvas (moved from template.css) */ - --offcanvas-color: var(--body-color); - --offcanvas-padding-x: 1rem; - --offcanvas-padding-y: 1rem; - - /* Navbar */ - --navbar-padding-x: 1rem; - --navbar-padding-y: 0.5rem; - --navbar-color: var(--nav-text-color); - --navbar-active-color: var(--mainmenu-nav-link-color); - --navbar-disabled-color: #6c757d; - --navbar-brand-padding-y: 0.3125rem; - --navbar-brand-margin-end: 1rem; - --navbar-brand-font-size: 1.25rem; - --navbar-brand-color: var(--nav-text-color); - --navbar-brand-active-color: var(--mainmenu-nav-link-color); - --navbar-nav-link-padding-x: 0.5rem; - --navbar-toggler-padding-y: 0.25rem; - --navbar-toggler-padding-x: 0.75rem; - --navbar-toggler-font-size: 1.25rem; - --navbar-toggler-border-color: rgba(255, 255, 255, 0.1); - --navbar-toggler-border-radius: 0.25rem; - --navbar-toggler-focus-width: 0.25rem; - --navbar-toggler-transition: box-shadow 0.15s ease-in-out; - --nav-link-padding-x: 1rem; - --nav-link-padding-y: 0.5rem; - --nav-link-font-weight: 400; - --nav-link-color: var(--nav-text-color); - --nav-link-active-color: var(--mainmenu-nav-link-color); - --nav-link-disabled-color: #6c757d; - - /* Responsive tokens */ - --nav-toggle-size: 3rem; - --bp-xs: 0; - --bp-sm: 576px; - --bp-md: 768px; - --bp-lg: 992px; - --bp-xl: 1200px; - - /* Utility opacity defaults */ - --bg-opacity: 1; - - /* Layout padding */ - --padding-x: 1rem; - --padding-y: 1rem; - - /* Button utilities */ - --btn-border-radius: var(--border-radius); - --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3); - - /* Card variables */ - --card-spacer-y: 1rem; - --card-spacer-x: 1rem; - --card-title-spacer-y: 0.5rem; - --card-border-width: 1px; - --card-border-color: var(--border-color); - --card-border-radius: var(--border-radius); - --card-box-shadow: none; - --card-inner-border-radius: calc(var(--border-radius) - 1px); - --card-cap-padding-y: 0.5rem; - --card-cap-padding-x: 1rem; - --card-cap-bg: rgba(255, 255, 255, 0.03); - --card-cap-color: var(--body-color); - --card-height: auto; - --card-color: var(--body-color); - --card-bg: var(--secondary-bg); - --card-img-overlay-padding: 1rem; - --card-group-margin: 0.75rem; - - /* VirtueMart surfaces */ - --vm-surface: var(--secondary-bg); - --vm-surface-2: var(--tertiary-bg); - --vm-text: var(--body-color); - --vm-text-strong: #ffffff; - --vm-text-muted: var(--gray-700); - --vm-border: var(--border-color); - --vm-price-color: var(--success); - - /* VM layout and density */ - --vm-container-max-width: 1200px; - --vm-section-gap: 2rem; - --vm-block-radius: var(--border-radius); - --vm-block-shadow: var(--box-shadow-sm); - - /* VM typography */ - --vm-category-title-size: 2rem; - --vm-subcategory-title-size: 1.5rem; - --vm-page-title-size: 1.75rem; - --vm-products-type-title-size: 1.25rem; - --vm-product-title-size: 1.125rem; - --vm-product-title-weight: 500; - --vm-products-type-title-weight: 600; - --vm-price-size: 1.5rem; - --vm-price-detail-size: 1.125rem; - --vm-price-desc-size: 0.875rem; - - /* VM controls */ - --vm-input-radius: var(--border-radius); - --vm-input-shadow: var(--box-shadow-sm); - --vm-qty-width: 80px; - --vm-cart-dropdown-min-width: 300px; - - /* VM alerts */ - --vm-alert-radius: var(--border-radius); - --vm-alert-shadow: var(--box-shadow-sm); - --vm-availability-bg: var(--success-bg-subtle); - --vm-availability-text: var(--success); - - /* VM buttons */ - --vm-btn-padding-x: 1rem; - --vm-btn-padding-y: 0.5rem; - --vm-btn-radius: var(--border-radius); - --vm-btn-shadow: var(--box-shadow-sm); - --vm-btn-primary-bg: var(--primary); - --vm-btn-primary-text: #ffffff; - --vm-btn-primary-border: var(--primary); - --vm-btn-secondary-bg: var(--secondary); - --vm-btn-secondary-text: #ffffff; - --vm-btn-secondary-border: var(--secondary); - - /* VM image overlay controls */ - --vm-image-overlay-gap-x: 0.5rem; - --vm-image-overlay-gap-y: 0.5rem; - --vm-image-overlay-raise: 0.25rem; - --vm-image-overlay-btn-size: 2.5rem; - --vm-image-overlay-btn-radius: 50%; - --vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7); - --vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85); - --vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2); - --vm-image-overlay-btn-border-width: 1px; - --vm-image-overlay-btn-color: var(--body-color); - --vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - - /* VM vendor menu tokens */ - --vm-vendor-menu-bg: var(--secondary-bg); - --vm-vendor-menu-border: var(--border-color); - --vm-vendor-menu-radius: var(--border-radius); - --vm-vendor-menu-shadow: var(--box-shadow-sm); - --vm-vendor-menu-item-gap: 0.25rem; - --vm-vendor-menu-item-padding-x: 1rem; - --vm-vendor-menu-item-padding-y: 0.5rem; - --vm-vendor-menu-pill-radius: 50rem; - --vm-vendor-menu-link: var(--link-color); - --vm-vendor-menu-link-hover: var(--link-hover-color); - --vm-vendor-menu-link-active: var(--primary); - --vm-vendor-menu-hover-bg: var(--tertiary-bg); - - /* Gable colors */ - --gab-blue: #4d9fff; - --gab-green: #5cb85c; - --gab-red: #ff6b6b; - --gab-orange: #ff9f5a; - --gab-gray1: #868e96; - --gab-gray2: #adb5bd; - --gab-gray3: #ced4da; +/* ===== GABLE ===== */ +--gab-blue: #4d9fff; +--gab-green: #5cb85c; +--gab-red: #ff6b6b; +--gab-orange: #ff9f5a; +--gab-gray1: #868e96; +--gab-gray2: #adb5bd; +--gab-gray3: #ced4da; } .btn { diff --git a/src/media/css/colors/light/colors_alternative.css b/src/media/css/colors/light/colors_alternative.css index f6c5f9a..93e923e 100644 --- a/src/media/css/colors/light/colors_alternative.css +++ b/src/media/css/colors/light/colors_alternative.css @@ -20,365 +20,396 @@ * --------------------------------------------- */ :root[data-bs-theme="light"] { - color-scheme: light; - --color-primary: #112855; - --accent-color-primary: #3f8ff0; - --accent-color-secondary: #3f8ff0; +color-scheme: light; - --mainmenu-nav-link-color: white; +/* ===== BRAND & THEME COLORS ===== */ +--color-primary: #112855; +--accent-color-primary: #3f8ff0; +--accent-color-secondary: #3f8ff0; - --color-link: #224FAA; - --color-hover: var(--accent-color-primary); +/* ===== NAVIGATION ===== */ +--mainmenu-nav-link-color: white; +--nav-text-color: var(--mainmenu-nav-link-color); +--nav-bg-color: var(--color-link); - --header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); - --header-background-attachment: fixed; - --header-background-repeat: repeat; - --header-background-size: auto; +/* ===== 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); - --container-below-topbar-bg-image: ; - --container-below-topbar-bg-color ; - --container-below-topbar-bg-position: auto; - --container-below-topbar-bg-attachment: fixed; - --container-below-topbar-bg-repeat: repeat; - --container-below-topbar-bg-size: auto; - --container-below-topbar-border: ; - --container-below-topbar-border-radius: ; +/* ===== OFFCANVAS ===== */ +--offcanvas-color: var(--body-color); +--offcanvas-padding-x: 1rem; +--offcanvas-padding-y: 1rem; - --container-top-a-bg-image: ; - --container-top-a-bg-color: ; - --container-top-a-bg-position: auto; - --container-top-a-bg-attachment: fixed; - --container-top-a-bg-repeat: repeat; - --container-top-a-bg-size: auto; - --container-top-a-border: ; - --container-top-a-border-radius: ; +/* ===== NAVBAR ===== */ +--navbar-padding-x: 1rem; +--navbar-padding-y: 0.5rem; +--navbar-color: var(--nav-text-color); +--navbar-active-color: var(--mainmenu-nav-link-color); +--navbar-disabled-color: #6c757d; +--navbar-brand-padding-y: 0.3125rem; +--navbar-brand-margin-end: 1rem; +--navbar-brand-font-size: 1.25rem; +--navbar-brand-color: var(--nav-text-color); +--navbar-brand-active-color: var(--mainmenu-nav-link-color); +--navbar-nav-link-padding-x: 0.5rem; +--navbar-toggler-padding-y: 0.25rem; +--navbar-toggler-padding-x: 0.75rem; +--navbar-toggler-font-size: 1.25rem; +--navbar-toggler-border-color: rgba(0, 0, 0, 0.1); +--navbar-toggler-border-radius: 0.25rem; +--navbar-toggler-focus-width: 0.25rem; +--navbar-toggler-transition: box-shadow 0.15s ease-in-out; +--nav-link-padding-x: 1rem; +--nav-link-padding-y: 0.5rem; +--nav-link-font-weight: 400; +--nav-link-color: var(--nav-text-color); +--nav-link-active-color: var(--mainmenu-nav-link-color); +--nav-link-disabled-color: #6c757d; - --container-top-b-bg-image: ; - --container-top-b-bg-color: ; - --container-top-b-bg-position: auto; - --container-top-b-bg-attachment: fixed; - --container-top-b-bg-repeat: repeat; - --container-top-b-bg-size: auto; - --container-top-b-border: ; - --container-top-b-border-radius: ; +/* ===== TYPOGRAPHY & BODY ===== */ +--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +--body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); +--body-font-size: 1rem; +--body-font-weight: 400; +--body-line-height: 1.5; +--body-color: #22262a; +--body-color-rgb: 34, 38, 42; +--body-bg: #fff; +--body-bg-rgb: 255, 255, 255; +--heading-color: inherit; +--emphasis-color: #000; +--emphasis-color-rgb: 0, 0, 0; +--secondary-color: #22262abf; +--secondary-color-rgb: 34, 38, 42; +--tertiary-color: #22262a80; +--tertiary-color-rgb: 34, 38, 42; +--muted-color: #6d757e; +--code-color: #e93f8e; +--code-color-ink: var(--code-color, #e93f8e); +--highlight-color: #22262a; +--highlight-bg: #fbeea8; - --container-toc-bg: var(--mainmenu-nav-link-color); - --container-toc-color: var(--color-primary); +/* ===== LAYOUT & SPACING ===== */ +--padding-x: 1rem; +--padding-y: 1rem; +--bg-opacity: 1; +--nav-toggle-size: 3rem; +--gradient: linear-gradient(180deg, #ffffff26, #fff0); +--secondary-bg: #eaedf0; +--secondary-bg-rgb: 234, 237, 240; +--tertiary-bg: #f9fafb; +--tertiary-bg-rgb: 249, 250, 251; +--hr-color: var(--border-color, #dfe3e7); +--border-color-soft: var(--border-color, #dfe3e7); +--kbd-bg: var(--secondary-bg, #eaedf0); +--kbd-ink: var(--body-bg, #fff); +--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; - --container-sidebar-bg-image: ; - --container-sidebar-bg-color: ; - --container-sidebar-bg-position: auto; - --container-sidebar-bg-attachment: scroll; - --container-sidebar-bg-repeat: repeat; - --container-sidebar-bg-size: auto; - --container-sidebar-border: ; - --container-sidebar-border-radius: ; +/* ===== BREAKPOINTS ===== */ +--bp-xs: 0; +--bp-sm: 576px; +--bp-md: 768px; +--bp-lg: 992px; +--bp-xl: 1200px; - --container-bottom-a-bg-image: ; - --container-bottom-a-bg-color: ; - --container-bottom-a-bg-position: auto; - --container-bottom-a-bg-attachment: fixed; - --container-bottom-a-bg-repeat: repeat; - --container-bottom-a-bg-size: auto; - --container-bottom-a-border: ; - --container-bottom-a-border-radius: ; +/* ===== 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; - --container-bottom-b-bg-image: ; - --container-bottom-b-bg-color: ; - --container-bottom-b-bg-position: auto; - --container-bottom-b-bg-attachment: fixed; - --container-bottom-b-bg-repeat: repeat; - --container-bottom-b-bg-size: auto; - --container-bottom-b-border: ; - --container-bottom-b-border-radius: ; +/* ===== 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; - --nav-text-color: var(--mainmenu-nav-link-color); - --nav-bg-color: var(--color-link); - --border: 5px; +/* ===== 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; - --muted-color: #6d757e; - --hr-color: var(--border-color, #dfe3e7); - --link-active-color: var(--link-color); - --code-color-ink: var(--code-color, #e93f8e); - --border-color-soft: var(--border-color, #dfe3e7); - --kbd-bg: var(--secondary-bg, #eaedf0); - --kbd-ink: var(--body-bg, #fff); - --toc-bg: var(--secondary-bg, #eaedf0); - --toc-ink: var(--color-primary, #112855); - --selection-bg: var(--highlight-bg, #fbeea8); - --selection-ink: var(--body-color, #22262a); +/* ===== HEADER BACKGROUND ===== */ +--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); +--header-background-attachment: fixed; +--header-background-repeat: repeat; +--header-background-size: auto; - --blue: #010156; - --black: #000; - --indigo: #6812f3; - --purple: #6f42c2; - --pink: #e93f8e; - --red: #a51f18; - --orange: #fd7e17; - --yellow: #ad6200; - --green: #448344; - --teal: #5abfdd; - --cyan: #30638d; - --white: #fff; - --gray-100: #f9fafb; - --gray-200: #eaedf0; - --gray-300: #dfe3e7; - --gray-400: #ced4da; - --gray-500: #adb5bd; - --gray-600: #6d757e; - --gray-700: #484f56; - --gray-800: #353b41; - --gray-900: #22262a; - --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; - --white-rgb: 255, 255, 255; - --black-rgb: 0, 0, 0; - --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --gradient: linear-gradient(180deg, #ffffff26, #fff0); - --body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); - --body-font-size: 1rem; - --body-font-weight: 400; - --body-line-height: 1.5; - --body-color: #22262a; - --body-color-rgb: 34, 38, 42; - --body-bg: #fff; - --body-bg-rgb: 255, 255, 255; - --emphasis-color: #000; - --emphasis-color-rgb: 0, 0, 0; - --secondary-color: #22262abf; - --secondary-color-rgb: 34, 38, 42; - --secondary-bg: #eaedf0; - --secondary-bg-rgb: 234, 237, 240; - --tertiary-color: #22262a80; - --tertiary-color-rgb: 34, 38, 42; - --tertiary-bg: #f9fafb; - --tertiary-bg-rgb: 249, 250, 251; - --heading-color: inherit; - --link-color: #224faa; - --link-color-rgb: 34, 79, 170; - --link-decoration: underline; - --link-hover-color: #424077; - --link-hover-color-rgb: 66, 64, 119; - --code-color: #e93f8e; - --highlight-color: #22262a; - --highlight-bg: #fbeea8; - --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; - --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-ring-width: .25rem; - --focus-ring-opacity: .25; - --focus-ring-color: #01015640; - --form-valid-color: #448344; - --form-valid-border-color: #448344; - --form-invalid-color: #a51f18; - --form-invalid-border-color: #a51f18; +/* ===== CONTAINER BACKGROUNDS ===== */ +/* Below Topbar Container */ +--container-below-topbar-bg-image: ; +--container-below-topbar-bg-color ; +--container-below-topbar-bg-position: auto; +--container-below-topbar-bg-attachment: fixed; +--container-below-topbar-bg-repeat: repeat; +--container-below-topbar-bg-size: auto; +--container-below-topbar-border: ; +--container-below-topbar-border-radius: ; - /* Offcanvas (moved from template.css) */ - --offcanvas-color: var(--body-color); - --offcanvas-padding-x: 1rem; - --offcanvas-padding-y: 1rem; +/* Top A Container */ +--container-top-a-bg-image: ; +--container-top-a-bg-color: ; +--container-top-a-bg-position: auto; +--container-top-a-bg-attachment: fixed; +--container-top-a-bg-repeat: repeat; +--container-top-a-bg-size: auto; +--container-top-a-border: ; +--container-top-a-border-radius: ; - /* Navbar */ - --navbar-padding-x: 1rem; - --navbar-padding-y: 0.5rem; - --navbar-color: var(--nav-text-color); - --navbar-active-color: var(--mainmenu-nav-link-color); - --navbar-disabled-color: #6c757d; - --navbar-brand-padding-y: 0.3125rem; - --navbar-brand-margin-end: 1rem; - --navbar-brand-font-size: 1.25rem; - --navbar-brand-color: var(--nav-text-color); - --navbar-brand-active-color: var(--mainmenu-nav-link-color); - --navbar-nav-link-padding-x: 0.5rem; - --navbar-toggler-padding-y: 0.25rem; - --navbar-toggler-padding-x: 0.75rem; - --navbar-toggler-font-size: 1.25rem; - --navbar-toggler-border-color: rgba(0, 0, 0, 0.1); - --navbar-toggler-border-radius: 0.25rem; - --navbar-toggler-focus-width: 0.25rem; - --navbar-toggler-transition: box-shadow 0.15s ease-in-out; - --nav-link-padding-x: 1rem; - --nav-link-padding-y: 0.5rem; - --nav-link-font-weight: 400; - --nav-link-color: var(--nav-text-color); - --nav-link-active-color: var(--mainmenu-nav-link-color); - --nav-link-disabled-color: #6c757d; +/* Top B Container */ +--container-top-b-bg-image: ; +--container-top-b-bg-color: ; +--container-top-b-bg-position: auto; +--container-top-b-bg-attachment: fixed; +--container-top-b-bg-repeat: repeat; +--container-top-b-bg-size: auto; +--container-top-b-border: ; +--container-top-b-border-radius: ; - /* Responsive tokens */ - --nav-toggle-size: 3rem; - --bp-xs: 0; - --bp-sm: 576px; - --bp-md: 768px; - --bp-lg: 992px; - --bp-xl: 1200px; +/* TOC Container */ +--container-toc-bg: var(--mainmenu-nav-link-color); +--container-toc-color: var(--color-primary); - /* Utility opacity defaults */ - --bg-opacity: 1; +/* Sidebar Container */ +--container-sidebar-bg-image: ; +--container-sidebar-bg-color: ; +--container-sidebar-bg-position: auto; +--container-sidebar-bg-attachment: scroll; +--container-sidebar-bg-repeat: repeat; +--container-sidebar-bg-size: auto; +--container-sidebar-border: ; +--container-sidebar-border-radius: ; - /* Layout padding */ - --padding-x: 1rem; - --padding-y: 1rem; +/* Bottom A Container */ +--container-bottom-a-bg-image: ; +--container-bottom-a-bg-color: ; +--container-bottom-a-bg-position: auto; +--container-bottom-a-bg-attachment: fixed; +--container-bottom-a-bg-repeat: repeat; +--container-bottom-a-bg-size: auto; +--container-bottom-a-border: ; +--container-bottom-a-border-radius: ; - /* Button utilities */ - --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); +/* Bottom B Container */ +--container-bottom-b-bg-image: ; +--container-bottom-b-bg-color: ; +--container-bottom-b-bg-position: auto; +--container-bottom-b-bg-attachment: fixed; +--container-bottom-b-bg-repeat: repeat; +--container-bottom-b-bg-size: auto; +--container-bottom-b-border: ; +--container-bottom-b-border-radius: ; - /* Card variables */ - --card-spacer-y: 1rem; - --card-spacer-x: 1rem; - --card-title-spacer-y: 0.5rem; - --card-border-width: 1px; - --card-border-color: var(--border-color); - --card-border-radius: var(--border-radius); - --card-box-shadow: none; - --card-inner-border-radius: calc(var(--border-radius) - 1px); - --card-cap-padding-y: 0.5rem; - --card-cap-padding-x: 1rem; - --card-cap-bg: rgba(0, 0, 0, 0.03); - --card-cap-color: var(--body-color); - --card-height: auto; - --card-color: var(--body-color); - --card-bg: var(--body-bg); - --card-img-overlay-padding: 1rem; - --card-group-margin: 0.75rem; +/* ===== 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; - /* VirtueMart surfaces */ - --vm-surface: #ffffff; - --vm-surface-2: #f8f9fa; - --vm-text: var(--body-color); - --vm-text-strong: #000000; - --vm-text-muted: #6c757d; - --vm-border: var(--border-color); - --vm-price-color: var(--success); +/* ===== 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; - /* VM layout and density */ - --vm-container-max-width: 1200px; - --vm-section-gap: 2rem; - --vm-block-radius: var(--border-radius); - --vm-block-shadow: var(--box-shadow-sm); +/* ===== FOCUS & FORMS ===== */ +--focus-ring-width: .25rem; +--focus-ring-opacity: .25; +--focus-ring-color: #01015640; +--input-color: hsl(210, 11%, 15%); +--input-bg: hsl(210, 20%, 98%); +--input-border-color: hsl(210, 14%, 83%); +--input-focus-border-color: #8894aa; +--input-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); +--input-placeholder-color: hsl(210, 7%, 46%); +--input-disabled-bg: hsl(210, 16%, 93%); +--input-disabled-border-color: hsl(210, 14%, 83%); +--form-valid-color: #448344; +--form-valid-border-color: #448344; +--form-invalid-color: #a51f18; +--form-invalid-border-color: #a51f18; - /* VM typography */ - --vm-category-title-size: 2rem; - --vm-subcategory-title-size: 1.5rem; - --vm-page-title-size: 1.75rem; - --vm-products-type-title-size: 1.25rem; - --vm-product-title-size: 1.125rem; - --vm-product-title-weight: 500; - --vm-products-type-title-weight: 600; - --vm-price-size: 1.5rem; - --vm-price-detail-size: 1.125rem; - --vm-price-desc-size: 0.875rem; +/* ===== 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); - /* VM controls */ - --vm-input-radius: var(--border-radius); - --vm-input-shadow: var(--box-shadow-sm); - --vm-qty-width: 80px; - --vm-cart-dropdown-min-width: 300px; +/* ===== CARDS ===== */ +--card-spacer-y: 1rem; +--card-spacer-x: 1rem; +--card-title-spacer-y: 0.5rem; +--card-border-width: 1px; +--card-border-color: var(--border-color); +--card-border-radius: var(--border-radius); +--card-box-shadow: none; +--card-inner-border-radius: calc(var(--border-radius) - 1px); +--card-cap-padding-y: 0.5rem; +--card-cap-padding-x: 1rem; +--card-cap-bg: rgba(0, 0, 0, 0.03); +--card-cap-color: var(--body-color); +--card-height: auto; +--card-color: var(--body-color); +--card-bg: var(--body-bg); +--card-img-overlay-padding: 1rem; +--card-group-margin: 0.75rem; - /* VM alerts */ - --vm-alert-radius: var(--border-radius); - --vm-alert-shadow: var(--box-shadow-sm); - --vm-availability-bg: var(--success-bg-subtle); - --vm-availability-text: var(--success); +/* ===== VIRTUEMART (VM) ===== */ +/* VM Surfaces */ +--vm-surface: #ffffff; +--vm-surface-2: #f8f9fa; +--vm-text: var(--body-color); +--vm-text-strong: #000000; +--vm-text-muted: #6c757d; +--vm-border: var(--border-color); +--vm-price-color: var(--success); - /* VM buttons */ - --vm-btn-padding-x: 1rem; - --vm-btn-padding-y: 0.5rem; - --vm-btn-radius: var(--border-radius); - --vm-btn-shadow: var(--box-shadow-sm); - --vm-btn-primary-bg: var(--primary); - --vm-btn-primary-text: #ffffff; - --vm-btn-primary-border: var(--primary); - --vm-btn-secondary-bg: var(--secondary); - --vm-btn-secondary-text: #ffffff; - --vm-btn-secondary-border: var(--secondary); +/* VM Layout and Density */ +--vm-container-max-width: 1200px; +--vm-section-gap: 2rem; +--vm-block-radius: var(--border-radius); +--vm-block-shadow: var(--box-shadow-sm); - /* VM image overlay controls */ - --vm-image-overlay-gap-x: 0.5rem; - --vm-image-overlay-gap-y: 0.5rem; - --vm-image-overlay-raise: 0.25rem; - --vm-image-overlay-btn-size: 2.5rem; - --vm-image-overlay-btn-radius: 50%; - --vm-image-overlay-btn-bg: rgba(255, 255, 255, 0.9); - --vm-image-overlay-btn-bg-hover: rgba(255, 255, 255, 1); - --vm-image-overlay-btn-border-color: rgba(0, 0, 0, 0.1); - --vm-image-overlay-btn-border-width: 1px; - --vm-image-overlay-btn-color: var(--body-color); - --vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +/* VM Typography */ +--vm-category-title-size: 2rem; +--vm-subcategory-title-size: 1.5rem; +--vm-page-title-size: 1.75rem; +--vm-products-type-title-size: 1.25rem; +--vm-product-title-size: 1.125rem; +--vm-product-title-weight: 500; +--vm-products-type-title-weight: 600; +--vm-price-size: 1.5rem; +--vm-price-detail-size: 1.125rem; +--vm-price-desc-size: 0.875rem; - /* VM vendor menu tokens */ - --vm-vendor-menu-bg: var(--body-bg); - --vm-vendor-menu-border: var(--border-color); - --vm-vendor-menu-radius: var(--border-radius); - --vm-vendor-menu-shadow: var(--box-shadow-sm); - --vm-vendor-menu-item-gap: 0.25rem; - --vm-vendor-menu-item-padding-x: 1rem; - --vm-vendor-menu-item-padding-y: 0.5rem; - --vm-vendor-menu-pill-radius: 50rem; - --vm-vendor-menu-link: var(--link-color); - --vm-vendor-menu-link-hover: var(--link-hover-color); - --vm-vendor-menu-link-active: var(--primary); - --vm-vendor-menu-hover-bg: var(--secondary-bg); +/* VM Controls */ +--vm-input-radius: var(--border-radius); +--vm-input-shadow: var(--box-shadow-sm); +--vm-qty-width: 80px; +--vm-cart-dropdown-min-width: 300px; - /* Gable colors */ - --gab-blue: #0066cc; - --gab-green: #28a745; - --gab-red: #dc3545; - --gab-orange: #fd7e14; - --gab-gray1: #495057; - --gab-gray2: #6c757d; - --gab-gray3: #adb5bd; +/* VM Alerts */ +--vm-alert-radius: var(--border-radius); +--vm-alert-shadow: var(--box-shadow-sm); +--vm-availability-bg: var(--success-bg-subtle); +--vm-availability-text: var(--success); + +/* VM Buttons */ +--vm-btn-padding-x: 1rem; +--vm-btn-padding-y: 0.5rem; +--vm-btn-radius: var(--border-radius); +--vm-btn-shadow: var(--box-shadow-sm); +--vm-btn-primary-bg: var(--primary); +--vm-btn-primary-text: #ffffff; +--vm-btn-primary-border: var(--primary); +--vm-btn-secondary-bg: var(--secondary); +--vm-btn-secondary-text: #ffffff; +--vm-btn-secondary-border: var(--secondary); + +/* VM Image Overlay Controls */ +--vm-image-overlay-gap-x: 0.5rem; +--vm-image-overlay-gap-y: 0.5rem; +--vm-image-overlay-raise: 0.25rem; +--vm-image-overlay-btn-size: 2.5rem; +--vm-image-overlay-btn-radius: 50%; +--vm-image-overlay-btn-bg: rgba(255, 255, 255, 0.9); +--vm-image-overlay-btn-bg-hover: rgba(255, 255, 255, 1); +--vm-image-overlay-btn-border-color: rgba(0, 0, 0, 0.1); +--vm-image-overlay-btn-border-width: 1px; +--vm-image-overlay-btn-color: var(--body-color); +--vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + +/* VM Vendor Menu */ +--vm-vendor-menu-bg: var(--body-bg); +--vm-vendor-menu-border: var(--border-color); +--vm-vendor-menu-radius: var(--border-radius); +--vm-vendor-menu-shadow: var(--box-shadow-sm); +--vm-vendor-menu-item-gap: 0.25rem; +--vm-vendor-menu-item-padding-x: 1rem; +--vm-vendor-menu-item-padding-y: 0.5rem; +--vm-vendor-menu-pill-radius: 50rem; +--vm-vendor-menu-link: var(--link-color); +--vm-vendor-menu-link-hover: var(--link-hover-color); +--vm-vendor-menu-link-active: var(--primary); +--vm-vendor-menu-hover-bg: var(--secondary-bg); + +/* ===== GABLE ===== */ +--gab-blue: #0066cc; +--gab-green: #28a745; +--gab-red: #dc3545; +--gab-orange: #fd7e14; +--gab-gray1: #495057; +--gab-gray2: #6c757d; +--gab-gray3: #adb5bd; } .btn { diff --git a/src/media/css/colors/light/colors_standard.css b/src/media/css/colors/light/colors_standard.css index 1c4404a..a0c410e 100644 --- a/src/media/css/colors/light/colors_standard.css +++ b/src/media/css/colors/light/colors_standard.css @@ -20,702 +20,723 @@ * --------------------------------------------- */ :root[data-bs-theme="light"] { - color-scheme: light; - --color-primary: #112855; - --accent-color-primary: #3f8ff0; - --accent-color-secondary: #3f8ff0; +color-scheme: light; - --mainmenu-nav-link-color: white; +/* ===== BRAND & THEME COLORS ===== */ +--color-primary: #112855; +--accent-color-primary: #3f8ff0; +--accent-color-secondary: #3f8ff0; - --color-link: #224FAA; - --color-hover: var(--accent-color-primary); +/* ===== NAVIGATION ===== */ +--mainmenu-nav-link-color: white; +--nav-text-color: white; +--nav-bg-color: var(--color-link); - --header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); - --header-background-attachment: fixed; - --header-background-repeat: repeat; - --header-background-size: auto; +/* ===== 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); - --container-below-topbar-bg-image: ; - --container-below-topbar-bg-color ; - --container-below-topbar-bg-position: auto; - --container-below-topbar-bg-attachment: fixed; - --container-below-topbar-bg-repeat: repeat; - --container-below-topbar-bg-size: auto; - --container-below-topbar-border: ; - --container-below-topbar-border-radius: ; +/* ===== OFFCANVAS ===== */ +--offcanvas-color: var(--body-color); +--offcanvas-padding-x: 1rem; +--offcanvas-padding-y: 1rem; - --container-top-a-bg-image: ; - --container-top-a-bg-color: ; - --container-top-a-bg-position: auto; - --container-top-a-bg-attachment: fixed; - --container-top-a-bg-repeat: repeat; - --container-top-a-bg-size: auto; - --container-top-a-border: ; - --container-top-a-border-radius: ; +/* ===== NAVBAR ===== */ +--navbar-padding-x: 1rem; +--navbar-padding-y: 0.5rem; +--navbar-color: var(--nav-text-color); +--navbar-active-color: var(--mainmenu-nav-link-color); +--navbar-disabled-color: #6c757d; +--navbar-brand-padding-y: 0.3125rem; +--navbar-brand-margin-end: 1rem; +--navbar-brand-font-size: 1.25rem; +--navbar-brand-color: var(--nav-text-color); +--navbar-brand-active-color: var(--mainmenu-nav-link-color); +--navbar-nav-link-padding-x: 0.5rem; +--navbar-toggler-padding-y: 0.25rem; +--navbar-toggler-padding-x: 0.75rem; +--navbar-toggler-font-size: 1.25rem; +--navbar-toggler-border-color: rgba(0, 0, 0, 0.1); +--navbar-toggler-border-radius: 0.25rem; +--navbar-toggler-focus-width: 0.25rem; +--navbar-toggler-transition: box-shadow 0.15s ease-in-out; +--nav-link-padding-x: 1rem; +--nav-link-padding-y: 0.5rem; +--nav-link-font-weight: 400; +--nav-link-color: var(--nav-text-color); +--nav-link-active-color: var(--mainmenu-nav-link-color); +--nav-link-disabled-color: #6c757d; - --container-top-b-bg-image: ; - --container-top-b-bg-color: ; - --container-top-b-bg-position: auto; - --container-top-b-bg-attachment: fixed; - --container-top-b-bg-repeat: repeat; - --container-top-b-bg-size: auto; - --container-top-b-border: ; - --container-top-b-border-radius: ; +/* ===== TYPOGRAPHY & BODY ===== */ +--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +--body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); +--body-font-size: 1rem; +--body-font-weight: 400; +--body-line-height: 1.5; +--body-color: #22262a; +--body-color-rgb: 34, 38, 42; +--body-bg: #fff; +--body-bg-rgb: 255, 255, 255; +--heading-color: inherit; +--emphasis-color: #000; +--emphasis-color-rgb: 0, 0, 0; +--secondary-color: #22262abf; +--secondary-color-rgb: 34, 38, 42; +--tertiary-color: #22262a80; +--tertiary-color-rgb: 34, 38, 42; +--muted-color: #6d757e; +--code-color: #e93f8e; +--code-color-ink: var(--code-color, #e93f8e); +--highlight-color: #22262a; +--highlight-bg: #fbeea8; - --container-toc-bg: var(--mainmenu-nav-link-color); - --container-toc-color: var(--color-primary); +/* ===== LAYOUT & SPACING ===== */ +--padding-x: 1rem; +--padding-y: 1rem; +--bg-opacity: 1; +--nav-toggle-size: 3rem; +--gradient: linear-gradient(180deg, #ffffff26, #fff0); +--secondary-bg: #eaedf0; +--secondary-bg-rgb: 234, 237, 240; +--tertiary-bg: #f9fafb; +--tertiary-bg-rgb: 249, 250, 251; +--hr-color: var(--border-color, #dfe3e7); +--border-color-soft: var(--border-color, #dfe3e7); +--kbd-bg: var(--secondary-bg, #eaedf0); +--kbd-ink: var(--body-bg, #fff); +--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; - --container-sidebar-bg-image: ; - --container-sidebar-bg-color: ; - --container-sidebar-bg-position: auto; - --container-sidebar-bg-attachment: scroll; - --container-sidebar-bg-repeat: repeat; - --container-sidebar-bg-size: auto; - --container-sidebar-border: ; - --container-sidebar-border-radius: ; +/* ===== BREAKPOINTS ===== */ +--bp-xs: 0; +--bp-sm: 576px; +--bp-md: 768px; +--bp-lg: 992px; +--bp-xl: 1200px; - --container-bottom-a-bg-image: ; - --container-bottom-a-bg-color: ; - --container-bottom-a-bg-position: auto; - --container-bottom-a-bg-attachment: fixed; - --container-bottom-a-bg-repeat: repeat; - --container-bottom-a-bg-size: auto; - --container-bottom-a-border: ; - --container-bottom-a-border-radius: ; +/* ===== 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; - --container-bottom-b-bg-image: ; - --container-bottom-b-bg-color: ; - --container-bottom-b-bg-position: auto; - --container-bottom-b-bg-attachment: fixed; - --container-bottom-b-bg-repeat: repeat; - --container-bottom-b-bg-size: auto; - --container-bottom-b-border: ; - --container-bottom-b-border-radius: ; +/* ===== 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; - --nav-text-color: white; - --nav-bg-color: var(--color-link); - --border: 5px; +/* ===== 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; - --muted-color: #6d757e; - --hr-color: var(--border-color, #dfe3e7); - --link-active-color: var(--link-color); - --code-color-ink: var(--code-color, #e93f8e); - --border-color-soft: var(--border-color, #dfe3e7); - --kbd-bg: var(--secondary-bg, #eaedf0); - --kbd-ink: var(--body-bg, #fff); - --toc-bg: var(--secondary-bg, #eaedf0); - --toc-ink: var(--color-primary, #112855); - --selection-bg: var(--highlight-bg, #fbeea8); - --selection-ink: var(--body-color, #22262a); +/* ===== HEADER BACKGROUND ===== */ +--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); +--header-background-attachment: fixed; +--header-background-repeat: repeat; +--header-background-size: auto; - --blue: #010156; - --black: #000; - --indigo: #6812f3; - --purple: #6f42c2; - --pink: #e93f8e; - --red: #a51f18; - --orange: #fd7e17; - --yellow: #ad6200; - --green: #448344; - --teal: #5abfdd; - --cyan: #30638d; - --white: #fff; - --gray-100: #f9fafb; - --gray-200: #eaedf0; - --gray-300: #dfe3e7; - --gray-400: #ced4da; - --gray-500: #adb5bd; - --gray-600: #6d757e; - --gray-700: #484f56; - --gray-800: #353b41; - --gray-900: #22262a; - --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; - --white-rgb: 255, 255, 255; - --black-rgb: 0, 0, 0; - --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --gradient: linear-gradient(180deg, #ffffff26, #fff0); - --body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); - --body-font-size: 1rem; - --body-font-weight: 400; - --body-line-height: 1.5; - --body-color: #22262a; - --body-color-rgb: 34, 38, 42; - --body-bg: #fff; - --body-bg-rgb: 255, 255, 255; - --emphasis-color: #000; - --emphasis-color-rgb: 0, 0, 0; - --secondary-color: #22262abf; - --secondary-color-rgb: 34, 38, 42; - --secondary-bg: #eaedf0; - --secondary-bg-rgb: 234, 237, 240; - --tertiary-color: #22262a80; - --tertiary-color-rgb: 34, 38, 42; - --tertiary-bg: #f9fafb; - --tertiary-bg-rgb: 249, 250, 251; - --heading-color: inherit; - --link-color: #224faa; - --link-color-rgb: 34, 79, 170; - --link-decoration: underline; - --link-hover-color: #424077; - --link-hover-color-rgb: 66, 64, 119; - --code-color: #e93f8e; - --highlight-color: #22262a; - --highlight-bg: #fbeea8; - --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; - --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-ring-width: .25rem; - --focus-ring-opacity: .25; - --focus-ring-color: #01015640; - /* Forms and inputs */ - --input-color: hsl(210, 11%, 15%); - --input-bg: hsl(210, 20%, 98%); - --input-border-color: hsl(210, 14%, 83%); - --input-focus-border-color: #8894aa; - --input-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); - --input-placeholder-color: hsl(210, 7%, 46%); - --input-disabled-bg: hsl(210, 16%, 93%); - --input-disabled-border-color: hsl(210, 14%, 83%); - - --form-valid-color: #448344; - --form-valid-border-color: #448344; - --form-invalid-color: #a51f18; - --form-invalid-border-color: #a51f18; +/* ===== CONTAINER BACKGROUNDS ===== */ +/* Below Topbar Container */ +--container-below-topbar-bg-image: ; +--container-below-topbar-bg-color ; +--container-below-topbar-bg-position: auto; +--container-below-topbar-bg-attachment: fixed; +--container-below-topbar-bg-repeat: repeat; +--container-below-topbar-bg-size: auto; +--container-below-topbar-border: ; +--container-below-topbar-border-radius: ; - /* Offcanvas (moved from template.css) */ - --offcanvas-color: var(--body-color); - --offcanvas-padding-x: 1rem; - --offcanvas-padding-y: 1rem; +/* Top A Container */ +--container-top-a-bg-image: ; +--container-top-a-bg-color: ; +--container-top-a-bg-position: auto; +--container-top-a-bg-attachment: fixed; +--container-top-a-bg-repeat: repeat; +--container-top-a-bg-size: auto; +--container-top-a-border: ; +--container-top-a-border-radius: ; - /* Navbar */ - --navbar-padding-x: 1rem; - --navbar-padding-y: 0.5rem; - --navbar-color: var(--nav-text-color); - --navbar-active-color: var(--mainmenu-nav-link-color); - --navbar-disabled-color: #6c757d; - --navbar-brand-padding-y: 0.3125rem; - --navbar-brand-margin-end: 1rem; - --navbar-brand-font-size: 1.25rem; - --navbar-brand-color: var(--nav-text-color); - --navbar-brand-active-color: var(--mainmenu-nav-link-color); - --navbar-nav-link-padding-x: 0.5rem; - --navbar-toggler-padding-y: 0.25rem; - --navbar-toggler-padding-x: 0.75rem; - --navbar-toggler-font-size: 1.25rem; - --navbar-toggler-border-color: rgba(0, 0, 0, 0.1); - --navbar-toggler-border-radius: 0.25rem; - --navbar-toggler-focus-width: 0.25rem; - --navbar-toggler-transition: box-shadow 0.15s ease-in-out; - --nav-link-padding-x: 1rem; - --nav-link-padding-y: 0.5rem; - --nav-link-font-weight: 400; - --nav-link-color: var(--nav-text-color); - --nav-link-active-color: var(--mainmenu-nav-link-color); - --nav-link-disabled-color: #6c757d; +/* Top B Container */ +--container-top-b-bg-image: ; +--container-top-b-bg-color: ; +--container-top-b-bg-position: auto; +--container-top-b-bg-attachment: fixed; +--container-top-b-bg-repeat: repeat; +--container-top-b-bg-size: auto; +--container-top-b-border: ; +--container-top-b-border-radius: ; - /* Responsive tokens */ - --nav-toggle-size: 3rem; - --bp-xs: 0; - --bp-sm: 576px; - --bp-md: 768px; - --bp-lg: 992px; - --bp-xl: 1200px; +/* TOC Container */ +--container-toc-bg: var(--mainmenu-nav-link-color); +--container-toc-color: var(--color-primary); - /* Utility opacity defaults */ - --bg-opacity: 1; +/* Sidebar Container */ +--container-sidebar-bg-image: ; +--container-sidebar-bg-color: ; +--container-sidebar-bg-position: auto; +--container-sidebar-bg-attachment: scroll; +--container-sidebar-bg-repeat: repeat; +--container-sidebar-bg-size: auto; +--container-sidebar-border: ; +--container-sidebar-border-radius: ; - /* Layout padding */ - --padding-x: 1rem; - --padding-y: 1rem; +/* Bottom A Container */ +--container-bottom-a-bg-image: ; +--container-bottom-a-bg-color: ; +--container-bottom-a-bg-position: auto; +--container-bottom-a-bg-attachment: fixed; +--container-bottom-a-bg-repeat: repeat; +--container-bottom-a-bg-size: auto; +--container-bottom-a-border: ; +--container-bottom-a-border-radius: ; - /* Button utilities */ - --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); +/* Bottom B Container */ +--container-bottom-b-bg-image: ; +--container-bottom-b-bg-color: ; +--container-bottom-b-bg-position: auto; +--container-bottom-b-bg-attachment: fixed; +--container-bottom-b-bg-repeat: repeat; +--container-bottom-b-bg-size: auto; +--container-bottom-b-border: ; +--container-bottom-b-border-radius: ; - /* Card variables */ - --card-spacer-y: 1rem; - --card-spacer-x: 1rem; - --card-title-spacer-y: 0.5rem; - --card-border-width: 1px; - --card-border-color: var(--border-color); - --card-border-radius: var(--border-radius); - --card-box-shadow: none; - --card-inner-border-radius: calc(var(--border-radius) - 1px); - --card-cap-padding-y: 0.5rem; - --card-cap-padding-x: 1rem; - --card-cap-bg: rgba(0, 0, 0, 0.03); - --card-cap-color: var(--body-color); - --card-height: auto; - --card-color: var(--body-color); - --card-bg: var(--body-bg); - --card-img-overlay-padding: 1rem; - --card-group-margin: 0.75rem; +/* ===== 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; - /* VirtueMart surfaces */ - --vm-surface: #ffffff; - --vm-surface-2: #f8f9fa; - --vm-text: var(--body-color); - --vm-text-strong: #000000; - --vm-text-muted: #6c757d; - --vm-border: var(--border-color); - --vm-price-color: var(--success); +/* ===== 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; - /* VM layout and density */ - --vm-container-max-width: 1200px; - --vm-section-gap: 2rem; - --vm-block-radius: var(--border-radius); - --vm-block-shadow: var(--box-shadow-sm); +/* ===== FOCUS & FORMS ===== */ +--focus-ring-width: .25rem; +--focus-ring-opacity: .25; +--focus-ring-color: #01015640; +--input-color: hsl(210, 11%, 15%); +--input-bg: hsl(210, 20%, 98%); +--input-border-color: hsl(210, 14%, 83%); +--input-focus-border-color: #8894aa; +--input-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); +--input-placeholder-color: hsl(210, 7%, 46%); +--input-disabled-bg: hsl(210, 16%, 93%); +--input-disabled-border-color: hsl(210, 14%, 83%); +--form-valid-color: #448344; +--form-valid-border-color: #448344; +--form-invalid-color: #a51f18; +--form-invalid-border-color: #a51f18; - /* VM typography */ - --vm-category-title-size: 2rem; - --vm-subcategory-title-size: 1.5rem; - --vm-page-title-size: 1.75rem; - --vm-products-type-title-size: 1.25rem; - --vm-product-title-size: 1.125rem; - --vm-product-title-weight: 500; - --vm-products-type-title-weight: 600; - --vm-price-size: 1.5rem; - --vm-price-detail-size: 1.125rem; - --vm-price-desc-size: 0.875rem; +/* ===== 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); - /* VM controls */ - --vm-input-radius: var(--border-radius); - --vm-input-shadow: var(--box-shadow-sm); - --vm-qty-width: 80px; - --vm-cart-dropdown-min-width: 300px; +/* ===== CARDS ===== */ +--card-spacer-y: 1rem; +--card-spacer-x: 1rem; +--card-title-spacer-y: 0.5rem; +--card-border-width: 1px; +--card-border-color: var(--border-color); +--card-border-radius: var(--border-radius); +--card-box-shadow: none; +--card-inner-border-radius: calc(var(--border-radius) - 1px); +--card-cap-padding-y: 0.5rem; +--card-cap-padding-x: 1rem; +--card-cap-bg: rgba(0, 0, 0, 0.03); +--card-cap-color: var(--body-color); +--card-height: auto; +--card-color: var(--body-color); +--card-bg: var(--body-bg); +--card-img-overlay-padding: 1rem; +--card-group-margin: 0.75rem; - /* VM alerts */ - --vm-alert-radius: var(--border-radius); - --vm-alert-shadow: var(--box-shadow-sm); - --vm-availability-bg: var(--success-bg-subtle); - --vm-availability-text: var(--success); +/* ===== VIRTUEMART (VM) ===== */ +/* VM Surfaces */ +--vm-surface: #ffffff; +--vm-surface-2: #f8f9fa; +--vm-text: var(--body-color); +--vm-text-strong: #000000; +--vm-text-muted: #6c757d; +--vm-border: var(--border-color); +--vm-price-color: var(--success); - /* VM buttons */ - --vm-btn-padding-x: 1rem; - --vm-btn-padding-y: 0.5rem; - --vm-btn-radius: var(--border-radius); - --vm-btn-shadow: var(--box-shadow-sm); - --vm-btn-primary-bg: var(--primary); - --vm-btn-primary-text: #ffffff; - --vm-btn-primary-border: var(--primary); - --vm-btn-secondary-bg: var(--secondary); - --vm-btn-secondary-text: #ffffff; - --vm-btn-secondary-border: var(--secondary); +/* VM Layout and Density */ +--vm-container-max-width: 1200px; +--vm-section-gap: 2rem; +--vm-block-radius: var(--border-radius); +--vm-block-shadow: var(--box-shadow-sm); - /* VM image overlay controls */ - --vm-image-overlay-gap-x: 0.5rem; - --vm-image-overlay-gap-y: 0.5rem; - --vm-image-overlay-raise: 0.25rem; - --vm-image-overlay-btn-size: 2.5rem; - --vm-image-overlay-btn-radius: 50%; - --vm-image-overlay-btn-bg: rgba(255, 255, 255, 0.9); - --vm-image-overlay-btn-bg-hover: rgba(255, 255, 255, 1); - --vm-image-overlay-btn-border-color: rgba(0, 0, 0, 0.1); - --vm-image-overlay-btn-border-width: 1px; - --vm-image-overlay-btn-color: var(--body-color); - --vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +/* VM Typography */ +--vm-category-title-size: 2rem; +--vm-subcategory-title-size: 1.5rem; +--vm-page-title-size: 1.75rem; +--vm-products-type-title-size: 1.25rem; +--vm-product-title-size: 1.125rem; +--vm-product-title-weight: 500; +--vm-products-type-title-weight: 600; +--vm-price-size: 1.5rem; +--vm-price-detail-size: 1.125rem; +--vm-price-desc-size: 0.875rem; - /* VM vendor menu tokens */ - --vm-vendor-menu-bg: var(--body-bg); - --vm-vendor-menu-border: var(--border-color); - --vm-vendor-menu-radius: var(--border-radius); - --vm-vendor-menu-shadow: var(--box-shadow-sm); - --vm-vendor-menu-item-gap: 0.25rem; - --vm-vendor-menu-item-padding-x: 1rem; - --vm-vendor-menu-item-padding-y: 0.5rem; - --vm-vendor-menu-pill-radius: 50rem; - --vm-vendor-menu-link: var(--link-color); - --vm-vendor-menu-link-hover: var(--link-hover-color); - --vm-vendor-menu-link-active: var(--primary); - --vm-vendor-menu-hover-bg: var(--secondary-bg); +/* VM Controls */ +--vm-input-radius: var(--border-radius); +--vm-input-shadow: var(--box-shadow-sm); +--vm-qty-width: 80px; +--vm-cart-dropdown-min-width: 300px; - /* Gable colors */ - --gab-blue: #0066cc; - --gab-green: #28a745; - --gab-red: #dc3545; - --gab-orange: #fd7e14; - --gab-gray1: #495057; - --gab-gray2: #6c757d; - --gab-gray3: #adb5bd; +/* VM Alerts */ +--vm-alert-radius: var(--border-radius); +--vm-alert-shadow: var(--box-shadow-sm); +--vm-availability-bg: var(--success-bg-subtle); +--vm-availability-text: var(--success); + +/* VM Buttons */ +--vm-btn-padding-x: 1rem; +--vm-btn-padding-y: 0.5rem; +--vm-btn-radius: var(--border-radius); +--vm-btn-shadow: var(--box-shadow-sm); +--vm-btn-primary-bg: var(--primary); +--vm-btn-primary-text: #ffffff; +--vm-btn-primary-border: var(--primary); +--vm-btn-secondary-bg: var(--secondary); +--vm-btn-secondary-text: #ffffff; +--vm-btn-secondary-border: var(--secondary); + +/* VM Image Overlay Controls */ +--vm-image-overlay-gap-x: 0.5rem; +--vm-image-overlay-gap-y: 0.5rem; +--vm-image-overlay-raise: 0.25rem; +--vm-image-overlay-btn-size: 2.5rem; +--vm-image-overlay-btn-radius: 50%; +--vm-image-overlay-btn-bg: rgba(255, 255, 255, 0.9); +--vm-image-overlay-btn-bg-hover: rgba(255, 255, 255, 1); +--vm-image-overlay-btn-border-color: rgba(0, 0, 0, 0.1); +--vm-image-overlay-btn-border-width: 1px; +--vm-image-overlay-btn-color: var(--body-color); +--vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + +/* VM Vendor Menu */ +--vm-vendor-menu-bg: var(--body-bg); +--vm-vendor-menu-border: var(--border-color); +--vm-vendor-menu-radius: var(--border-radius); +--vm-vendor-menu-shadow: var(--box-shadow-sm); +--vm-vendor-menu-item-gap: 0.25rem; +--vm-vendor-menu-item-padding-x: 1rem; +--vm-vendor-menu-item-padding-y: 0.5rem; +--vm-vendor-menu-pill-radius: 50rem; +--vm-vendor-menu-link: var(--link-color); +--vm-vendor-menu-link-hover: var(--link-hover-color); +--vm-vendor-menu-link-active: var(--primary); +--vm-vendor-menu-hover-bg: var(--secondary-bg); + +/* ===== GABLE ===== */ +--gab-blue: #0066cc; +--gab-green: #28a745; +--gab-red: #dc3545; +--gab-orange: #fd7e14; +--gab-gray1: #495057; +--gab-gray2: #6c757d; +--gab-gray3: #adb5bd; } .btn { - --btn-padding-x: 1rem; - --btn-padding-y: 0.6rem; - --btn-font-family: ; - --btn-font-size: 1rem; - --btn-font-weight: 400; - --btn-line-height: 1.5; - --btn-color: hsl(210, 11%, 15%); - --btn-bg: transparent; - --btn-border-width: 1px; - --btn-border-color: transparent; - --btn-border-radius: 0.25rem; - --btn-active-border-color: transparent; - --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); - --btn-disabled-opacity: 0.65; - --btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); - display: inline-block; - padding: var(--btn-padding-y) var(--btn-padding-x); - font-family: var(--btn-font-family); - font-size: var(--btn-font-size); - font-weight: var(--btn-font-weight); - line-height: var(--btn-line-height); - color: var(--btn-color); - text-align: center; - text-decoration: none; - vertical-align: middle; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border: var(--btn-border-width) solid var(--btn-border-color); - border-radius: var(--btn-border-radius); - background-color: var(--btn-bg); - -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - -o-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; - 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; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; +--btn-padding-x: 1rem; +--btn-padding-y: 0.6rem; +--btn-font-family: ; +--btn-font-size: 1rem; +--btn-font-weight: 400; +--btn-line-height: 1.5; +--btn-color: hsl(210, 11%, 15%); +--btn-bg: transparent; +--btn-border-width: 1px; +--btn-border-color: transparent; +--btn-border-radius: 0.25rem; +--btn-active-border-color: transparent; +--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); +--btn-disabled-opacity: 0.65; +--btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); +display: inline-block; +padding: var(--btn-padding-y) var(--btn-padding-x); +font-family: var(--btn-font-family); +font-size: var(--btn-font-size); +font-weight: var(--btn-font-weight); +line-height: var(--btn-line-height); +color: var(--btn-color); +text-align: center; +text-decoration: none; +vertical-align: middle; +cursor: pointer; +-webkit-user-select: none; +-moz-user-select: none; +-ms-user-select: none; +user-select: none; +border: var(--btn-border-width) solid var(--btn-border-color); +border-radius: var(--btn-border-radius); +background-color: var(--btn-bg); +-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; +transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; +-o-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; +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; +transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; } .btn-primary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(240, 98%, 17%); - --btn-border-color: hsl(240, 98%, 17%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #010149; - --btn-hover-border-color: #010145; - --btn-focus-shadow-rgb: 39, 39, 111; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #010145; - --btn-active-border-color: #010141; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(240, 98%, 17%); - --btn-disabled-border-color: hsl(240, 98%, 17%); +--btn-color: hsl(0, 0%, 100%); +--btn-bg: hsl(240, 98%, 17%); +--btn-border-color: hsl(240, 98%, 17%); +--btn-hover-color: hsl(0, 0%, 100%); +--btn-hover-bg: #010149; +--btn-hover-border-color: #010145; +--btn-focus-shadow-rgb: 39, 39, 111; +--btn-active-color: hsl(0, 0%, 100%); +--btn-active-bg: #010145; +--btn-active-border-color: #010141; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: hsl(0, 0%, 100%); +--btn-disabled-bg: hsl(240, 98%, 17%); +--btn-disabled-border-color: hsl(240, 98%, 17%); } .btn-secondary { - --btn-color: var(--body-bg); - --btn-bg: var(--nav-bg-color); - --btn-border-color: hsl(210, 7%, 46%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #5d636b; - --btn-hover-border-color: #575e65; - --btn-focus-shadow-rgb: gray; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #575e65; - --btn-active-border-color: #52585f; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(210, 7%, 46%); - --btn-disabled-border-color: hsl(210, 7%, 46%); +--btn-color: var(--body-bg); +--btn-bg: var(--nav-bg-color); +--btn-border-color: hsl(210, 7%, 46%); +--btn-hover-color: hsl(0, 0%, 100%); +--btn-hover-bg: #5d636b; +--btn-hover-border-color: #575e65; +--btn-focus-shadow-rgb: gray; +--btn-active-color: hsl(0, 0%, 100%); +--btn-active-bg: #575e65; +--btn-active-border-color: #52585f; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: hsl(0, 0%, 100%); +--btn-disabled-bg: hsl(210, 7%, 46%); +--btn-disabled-border-color: hsl(210, 7%, 46%); } .btn-success { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(120, 32%, 39%); - --btn-border-color: hsl(120, 32%, 39%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #3a6f3a; - --btn-hover-border-color: #366936; - --btn-focus-shadow-rgb: 96, 150, 96; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #366936; - --btn-active-border-color: #336233; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(120, 32%, 39%); - --btn-disabled-border-color: hsl(120, 32%, 39%); +--btn-color: hsl(0, 0%, 100%); +--btn-bg: hsl(120, 32%, 39%); +--btn-border-color: hsl(120, 32%, 39%); +--btn-hover-color: hsl(0, 0%, 100%); +--btn-hover-bg: #3a6f3a; +--btn-hover-border-color: #366936; +--btn-focus-shadow-rgb: 96, 150, 96; +--btn-active-color: hsl(0, 0%, 100%); +--btn-active-bg: #366936; +--btn-active-border-color: #336233; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: hsl(0, 0%, 100%); +--btn-disabled-bg: hsl(120, 32%, 39%); +--btn-disabled-border-color: hsl(120, 32%, 39%); } .btn-info { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(207, 49%, 37%); - --btn-border-color: hsl(207, 49%, 37%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #295478; - --btn-hover-border-color: #264f71; - --btn-focus-shadow-rgb: 79, 122, 158; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #264f71; - --btn-active-border-color: #244a6a; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(207, 49%, 37%); - --btn-disabled-border-color: hsl(207, 49%, 37%); +--btn-color: hsl(0, 0%, 100%); +--btn-bg: hsl(207, 49%, 37%); +--btn-border-color: hsl(207, 49%, 37%); +--btn-hover-color: hsl(0, 0%, 100%); +--btn-hover-bg: #295478; +--btn-hover-border-color: #264f71; +--btn-focus-shadow-rgb: 79, 122, 158; +--btn-active-color: hsl(0, 0%, 100%); +--btn-active-bg: #264f71; +--btn-active-border-color: #244a6a; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: hsl(0, 0%, 100%); +--btn-disabled-bg: hsl(207, 49%, 37%); +--btn-disabled-border-color: hsl(207, 49%, 37%); } .btn-warning { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(34, 100%, 34%); - --btn-border-color: hsl(34, 100%, 34%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #935300; - --btn-hover-border-color: #8a4e00; - --btn-focus-shadow-rgb: 185, 122, 38; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #8a4e00; - --btn-active-border-color: #824a00; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(34, 100%, 34%); - --btn-disabled-border-color: hsl(34, 100%, 34%); +--btn-color: hsl(0, 0%, 100%); +--btn-bg: hsl(34, 100%, 34%); +--btn-border-color: hsl(34, 100%, 34%); +--btn-hover-color: hsl(0, 0%, 100%); +--btn-hover-bg: #935300; +--btn-hover-border-color: #8a4e00; +--btn-focus-shadow-rgb: 185, 122, 38; +--btn-active-color: hsl(0, 0%, 100%); +--btn-active-bg: #8a4e00; +--btn-active-border-color: #824a00; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: hsl(0, 0%, 100%); +--btn-disabled-bg: hsl(34, 100%, 34%); +--btn-disabled-border-color: hsl(34, 100%, 34%); } .btn-danger { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(3, 75%, 37%); - --btn-border-color: hsl(3, 75%, 37%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #8c1a14; - --btn-hover-border-color: #841913; - --btn-focus-shadow-rgb: 179, 65, 59; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #841913; - --btn-active-border-color: #7c1712; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(3, 75%, 37%); - --btn-disabled-border-color: hsl(3, 75%, 37%); +--btn-color: hsl(0, 0%, 100%); +--btn-bg: hsl(3, 75%, 37%); +--btn-border-color: hsl(3, 75%, 37%); +--btn-hover-color: hsl(0, 0%, 100%); +--btn-hover-bg: #8c1a14; +--btn-hover-border-color: #841913; +--btn-focus-shadow-rgb: 179, 65, 59; +--btn-active-color: hsl(0, 0%, 100%); +--btn-active-bg: #841913; +--btn-active-border-color: #7c1712; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: hsl(0, 0%, 100%); +--btn-disabled-bg: hsl(3, 75%, 37%); +--btn-disabled-border-color: hsl(3, 75%, 37%); } .btn-light { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: hsl(210, 17%, 98%); - --btn-border-color: hsl(210, 17%, 98%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: #d4d5d5; - --btn-hover-border-color: #c7c8c9; - --btn-focus-shadow-rgb: 212, 213, 213; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: #c7c8c9; - --btn-active-border-color: #bbbcbc; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: hsl(210, 17%, 98%); - --btn-disabled-border-color: hsl(210, 17%, 98%); +--btn-color: hsl(0, 0%, 0%); +--btn-bg: hsl(210, 17%, 98%); +--btn-border-color: hsl(210, 17%, 98%); +--btn-hover-color: hsl(0, 0%, 0%); +--btn-hover-bg: #d4d5d5; +--btn-hover-border-color: #c7c8c9; +--btn-focus-shadow-rgb: 212, 213, 213; +--btn-active-color: hsl(0, 0%, 0%); +--btn-active-bg: #c7c8c9; +--btn-active-border-color: #bbbcbc; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: hsl(0, 0%, 0%); +--btn-disabled-bg: hsl(210, 17%, 98%); +--btn-disabled-border-color: hsl(210, 17%, 98%); } .btn-dark { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(210, 10%, 23%); - --btn-border-color: hsl(210, 10%, 23%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #53585e; - --btn-hover-border-color: #494f54; - --btn-focus-shadow-rgb: 83, 88, 94; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #5d6267; - --btn-active-border-color: #494f54; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(210, 10%, 23%); - --btn-disabled-border-color: hsl(210, 10%, 23%); +--btn-color: hsl(0, 0%, 100%); +--btn-bg: hsl(210, 10%, 23%); +--btn-border-color: hsl(210, 10%, 23%); +--btn-hover-color: hsl(0, 0%, 100%); +--btn-hover-bg: #53585e; +--btn-hover-border-color: #494f54; +--btn-focus-shadow-rgb: 83, 88, 94; +--btn-active-color: hsl(0, 0%, 100%); +--btn-active-bg: #5d6267; +--btn-active-border-color: #494f54; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: hsl(0, 0%, 100%); +--btn-disabled-bg: hsl(210, 10%, 23%); +--btn-disabled-border-color: hsl(210, 10%, 23%); } .btn-outline-primary { - --btn-color: hsl(240, 98%, 17%); - --btn-border-color: hsl(240, 98%, 17%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(240, 98%, 17%); - --btn-hover-border-color: hsl(240, 98%, 17%); - --btn-focus-shadow-rgb: 1, 1, 86; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(240, 98%, 17%); - --btn-active-border-color: hsl(240, 98%, 17%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(240, 98%, 17%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(240, 98%, 17%); - --gradient: none; +--btn-color: hsl(240, 98%, 17%); +--btn-border-color: hsl(240, 98%, 17%); +--btn-hover-color: hsl(0, 0%, 100%); +--btn-hover-bg: hsl(240, 98%, 17%); +--btn-hover-border-color: hsl(240, 98%, 17%); +--btn-focus-shadow-rgb: 1, 1, 86; +--btn-active-color: hsl(0, 0%, 100%); +--btn-active-bg: hsl(240, 98%, 17%); +--btn-active-border-color: hsl(240, 98%, 17%); +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: hsl(240, 98%, 17%); +--btn-disabled-bg: transparent; +--btn-disabled-border-color: hsl(240, 98%, 17%); +--gradient: none; } .btn-outline-secondary { - --btn-color: hsl(210, 7%, 46%); - --btn-border-color: hsl(210, 7%, 46%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(210, 7%, 46%); - --btn-hover-border-color: hsl(210, 7%, 46%); - --btn-focus-shadow-rgb: 109, 117, 126; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 7%, 46%); - --btn-active-border-color: hsl(210, 7%, 46%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 7%, 46%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 7%, 46%); - --gradient: none; +--btn-color: hsl(210, 7%, 46%); +--btn-border-color: hsl(210, 7%, 46%); +--btn-hover-color: hsl(0, 0%, 100%); +--btn-hover-bg: hsl(210, 7%, 46%); +--btn-hover-border-color: hsl(210, 7%, 46%); +--btn-focus-shadow-rgb: 109, 117, 126; +--btn-active-color: hsl(0, 0%, 100%); +--btn-active-bg: hsl(210, 7%, 46%); +--btn-active-border-color: hsl(210, 7%, 46%); +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: hsl(210, 7%, 46%); +--btn-disabled-bg: transparent; +--btn-disabled-border-color: hsl(210, 7%, 46%); +--gradient: none; } .btn-outline-success { - --btn-color: hsl(120, 32%, 39%); - --btn-border-color: hsl(120, 32%, 39%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(120, 32%, 39%); - --btn-hover-border-color: hsl(120, 32%, 39%); - --btn-focus-shadow-rgb: 68, 131, 68; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(120, 32%, 39%); - --btn-active-border-color: hsl(120, 32%, 39%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(120, 32%, 39%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(120, 32%, 39%); - --gradient: none; +--btn-color: hsl(120, 32%, 39%); +--btn-border-color: hsl(120, 32%, 39%); +--btn-hover-color: hsl(0, 0%, 100%); +--btn-hover-bg: hsl(120, 32%, 39%); +--btn-hover-border-color: hsl(120, 32%, 39%); +--btn-focus-shadow-rgb: 68, 131, 68; +--btn-active-color: hsl(0, 0%, 100%); +--btn-active-bg: hsl(120, 32%, 39%); +--btn-active-border-color: hsl(120, 32%, 39%); +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: hsl(120, 32%, 39%); +--btn-disabled-bg: transparent; +--btn-disabled-border-color: hsl(120, 32%, 39%); +--gradient: none; } .btn-outline-info { - --btn-color: hsl(207, 49%, 37%); - --btn-border-color: hsl(207, 49%, 37%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(207, 49%, 37%); - --btn-hover-border-color: hsl(207, 49%, 37%); - --btn-focus-shadow-rgb: 48, 99, 141; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(207, 49%, 37%); - --btn-active-border-color: hsl(207, 49%, 37%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(207, 49%, 37%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(207, 49%, 37%); - --gradient: none; +--btn-color: hsl(207, 49%, 37%); +--btn-border-color: hsl(207, 49%, 37%); +--btn-hover-color: hsl(0, 0%, 100%); +--btn-hover-bg: hsl(207, 49%, 37%); +--btn-hover-border-color: hsl(207, 49%, 37%); +--btn-focus-shadow-rgb: 48, 99, 141; +--btn-active-color: hsl(0, 0%, 100%); +--btn-active-bg: hsl(207, 49%, 37%); +--btn-active-border-color: hsl(207, 49%, 37%); +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: hsl(207, 49%, 37%); +--btn-disabled-bg: transparent; +--btn-disabled-border-color: hsl(207, 49%, 37%); +--gradient: none; } .btn-outline-warning { - --btn-color: hsl(34, 100%, 34%); - --btn-border-color: hsl(34, 100%, 34%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(34, 100%, 34%); - --btn-hover-border-color: hsl(34, 100%, 34%); - --btn-focus-shadow-rgb: 173, 98, 0; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(34, 100%, 34%); - --btn-active-border-color: hsl(34, 100%, 34%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(34, 100%, 34%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(34, 100%, 34%); - --gradient: none; +--btn-color: hsl(34, 100%, 34%); +--btn-border-color: hsl(34, 100%, 34%); +--btn-hover-color: hsl(0, 0%, 100%); +--btn-hover-bg: hsl(34, 100%, 34%); +--btn-hover-border-color: hsl(34, 100%, 34%); +--btn-focus-shadow-rgb: 173, 98, 0; +--btn-active-color: hsl(0, 0%, 100%); +--btn-active-bg: hsl(34, 100%, 34%); +--btn-active-border-color: hsl(34, 100%, 34%); +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: hsl(34, 100%, 34%); +--btn-disabled-bg: transparent; +--btn-disabled-border-color: hsl(34, 100%, 34%); +--gradient: none; } .btn-outline-danger { - --btn-color: hsl(3, 75%, 37%); - --btn-border-color: hsl(3, 75%, 37%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(3, 75%, 37%); - --btn-hover-border-color: hsl(3, 75%, 37%); - --btn-focus-shadow-rgb: 165, 31, 24; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(3, 75%, 37%); - --btn-active-border-color: hsl(3, 75%, 37%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(3, 75%, 37%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(3, 75%, 37%); - --gradient: none; +--btn-color: hsl(3, 75%, 37%); +--btn-border-color: hsl(3, 75%, 37%); +--btn-hover-color: hsl(0, 0%, 100%); +--btn-hover-bg: hsl(3, 75%, 37%); +--btn-hover-border-color: hsl(3, 75%, 37%); +--btn-focus-shadow-rgb: 165, 31, 24; +--btn-active-color: hsl(0, 0%, 100%); +--btn-active-bg: hsl(3, 75%, 37%); +--btn-active-border-color: hsl(3, 75%, 37%); +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: hsl(3, 75%, 37%); +--btn-disabled-bg: transparent; +--btn-disabled-border-color: hsl(3, 75%, 37%); +--gradient: none; } .btn-outline-light { - --btn-color: hsl(210, 17%, 98%); - --btn-border-color: hsl(210, 17%, 98%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(210, 17%, 98%); - --btn-hover-border-color: hsl(210, 17%, 98%); - --btn-focus-shadow-rgb: 249, 250, 251; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(210, 17%, 98%); - --btn-active-border-color: hsl(210, 17%, 98%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 17%, 98%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 17%, 98%); - --gradient: none; +--btn-color: hsl(210, 17%, 98%); +--btn-border-color: hsl(210, 17%, 98%); +--btn-hover-color: hsl(0, 0%, 0%); +--btn-hover-bg: hsl(210, 17%, 98%); +--btn-hover-border-color: hsl(210, 17%, 98%); +--btn-focus-shadow-rgb: 249, 250, 251; +--btn-active-color: hsl(0, 0%, 0%); +--btn-active-bg: hsl(210, 17%, 98%); +--btn-active-border-color: hsl(210, 17%, 98%); +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: hsl(210, 17%, 98%); +--btn-disabled-bg: transparent; +--btn-disabled-border-color: hsl(210, 17%, 98%); +--gradient: none; } .btn-outline-dark { - --btn-color: hsl(210, 10%, 23%); - --btn-border-color: hsl(210, 10%, 23%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(210, 10%, 23%); - --btn-hover-border-color: hsl(210, 10%, 23%); - --btn-focus-shadow-rgb: 53, 59, 65; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 10%, 23%); - --btn-active-border-color: hsl(210, 10%, 23%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 10%, 23%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 10%, 23%); - --gradient: none; +--btn-color: hsl(210, 10%, 23%); +--btn-border-color: hsl(210, 10%, 23%); +--btn-hover-color: hsl(0, 0%, 100%); +--btn-hover-bg: hsl(210, 10%, 23%); +--btn-hover-border-color: hsl(210, 10%, 23%); +--btn-focus-shadow-rgb: 53, 59, 65; +--btn-active-color: hsl(0, 0%, 100%); +--btn-active-bg: hsl(210, 10%, 23%); +--btn-active-border-color: hsl(210, 10%, 23%); +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: hsl(210, 10%, 23%); +--btn-disabled-bg: transparent; +--btn-disabled-border-color: hsl(210, 10%, 23%); +--gradient: none; } .btn-link { - --btn-font-weight: 400; - --btn-color: var(--link-color); - --btn-bg: transparent; - --btn-border-color: transparent; - --btn-hover-color: var(--link-hover-color); - --btn-hover-border-color: transparent; - --btn-active-color: var(--link-hover-color); - --btn-active-border-color: transparent; - --btn-disabled-color: hsl(210, 7%, 46%); - --btn-disabled-border-color: transparent; - --btn-box-shadow: none; - --btn-focus-shadow-rgb: 39, 39, 111; - text-decoration: underline; +--btn-font-weight: 400; +--btn-color: var(--link-color); +--btn-bg: transparent; +--btn-border-color: transparent; +--btn-hover-color: var(--link-hover-color); +--btn-hover-border-color: transparent; +--btn-active-color: var(--link-hover-color); +--btn-active-border-color: transparent; +--btn-disabled-color: hsl(210, 7%, 46%); +--btn-disabled-border-color: transparent; +--btn-box-shadow: none; +--btn-focus-shadow-rgb: 39, 39, 111; +text-decoration: underline; } diff --git a/templates/colors_custom.css b/templates/colors_custom.css index 658ead6..d2af209 100644 --- a/templates/colors_custom.css +++ b/templates/colors_custom.css @@ -31,374 +31,394 @@ * --------------------------------------------- */ :root[data-bs-theme='dark']{ - /* System hint for native widgets */ - color-scheme: dark; +color-scheme: dark; - /* ===== PRIMARY BRAND COLORS ===== */ - /* Main brand color used throughout the template */ - --color-primary: #112855; - - /* Accent colors for interactive elements */ - --accent-color-primary: #3f8ff0; - --accent-color-secondary: #6fb3ff; +/* ===== BRAND & THEME COLORS ===== */ +--color-primary: #112855; +--accent-color-primary: #3f8ff0; +--accent-color-secondary: #6fb3ff; - /* ===== LINK COLORS ===== */ - /* Color for hyperlinks in dark mode */ - --color-link: white; - - /* Color when hovering over links */ - --color-hover: gray; - - /* Active link color */ - --color-active: var(--mainmenu-nav-link-color); +/* ===== NAVIGATION ===== */ +--mainmenu-nav-link-color: #fff; +--nav-text-color: gray; +--nav-bg-color: var(--color-primary); - /* ===== NAVIGATION ===== */ - /* Text color in main menu */ - --mainmenu-nav-link-color: #fff; - - /* Background color for navigation */ - --nav-text-color: gray; - --nav-bg-color: var(--color-primary); +/* ===== LINKS ===== */ +--color-link: white; +--color-hover: gray; +--color-active: var(--mainmenu-nav-link-color); +--link-color: #8ab4f8; +--link-color-rgb: 138, 180, 248; +--link-decoration: underline; +--link-hover-color: #c3d6ff; +--link-hover-color-rgb: 195, 214, 255; +--link-active-color: var(--link-color); - /* ===== HEADER BACKGROUND ===== */ - /* Background image for header section (same as light mode) */ - --header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); - --header-background-attachment: fixed; - --header-background-repeat: repeat; - --header-background-size: auto; +/* ===== OFFCANVAS ===== */ +--offcanvas-color: var(--body-color); +--offcanvas-padding-x: 1rem; +--offcanvas-padding-y: 1rem; - /* ===== CONTAINER BACKGROUNDS ===== */ - /* Below Topbar Container */ - --container-below-topbar-bg-image: ; - --container-below-topbar-bg-color: ; - --container-below-topbar-bg-position: center; - --container-below-topbar-bg-attachment: fixed; - --container-below-topbar-bg-repeat: no-repeat; - --container-below-topbar-bg-size: cover; - --container-below-topbar-border: ; - --container-below-topbar-border-radius: ; +/* ===== NAVBAR ===== */ +--navbar-padding-x: 1rem; +--navbar-padding-y: 0.5rem; +--navbar-color: var(--nav-text-color); +--navbar-active-color: var(--mainmenu-nav-link-color); +--navbar-disabled-color: #6c757d; +--navbar-brand-padding-y: 0.3125rem; +--navbar-brand-margin-end: 1rem; +--navbar-brand-font-size: 1.25rem; +--navbar-brand-color: var(--nav-text-color); +--navbar-brand-active-color: var(--mainmenu-nav-link-color); +--navbar-nav-link-padding-x: 0.5rem; +--navbar-toggler-padding-y: 0.25rem; +--navbar-toggler-padding-x: 0.75rem; +--navbar-toggler-font-size: 1.25rem; +--navbar-toggler-border-color: rgba(255, 255, 255, 0.1); +--navbar-toggler-border-radius: 0.25rem; +--navbar-toggler-focus-width: 0.25rem; +--navbar-toggler-transition: box-shadow 0.15s ease-in-out; +--nav-link-padding-x: 1rem; +--nav-link-padding-y: 0.5rem; +--nav-link-font-weight: 400; +--nav-link-color: var(--nav-text-color); +--nav-link-active-color: var(--mainmenu-nav-link-color); +--nav-link-disabled-color: #6c757d; - /* Top A Container */ - --container-top-a-bg-image: ; - --container-top-a-bg-color: ; - --container-top-a-bg-position: center; - --container-top-a-bg-attachment: fixed; - --container-top-a-bg-repeat: no-repeat; - --container-top-a-bg-size: cover; - --container-top-a-border: ; - --container-top-a-border-radius: ; +/* ===== TYPOGRAPHY & BODY ===== */ +--font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; +--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; +--body-font-size: 1rem; +--body-font-weight: 400; +--body-line-height: 1.5; +--body-color: #e6ebf1; +--body-color-rgb: 230, 235, 241; +--body-bg: #0e1318; +--body-bg-rgb: 14, 19, 24; +--heading-color: #f1f5f9; +--emphasis-color: #fff; +--emphasis-color-rgb: 255, 255, 255; +--secondary-color: #e6ebf1bf; +--secondary-color-rgb: 230, 235, 241; +--tertiary-color: #e6ebf180; +--tertiary-color-rgb: 230, 235, 241; +--muted-color: #6d757e; +--code-color: #ff7abd; +--code-color-ink: var(--code-color, #e93f8e); +--highlight-color: #111; +--highlight-bg: #ffe28a1a; - /* Top B Container */ - --container-top-b-bg-image: ; - --container-top-b-bg-color: ; - --container-top-b-bg-position: center; - --container-top-b-bg-attachment: fixed; - --container-top-b-bg-repeat: no-repeat; - --container-top-b-bg-size: cover; - --container-top-b-border: ; - --container-top-b-border-radius: ; +/* ===== LAYOUT & SPACING ===== */ +--padding-x: 1rem; +--padding-y: 1rem; +--bg-opacity: 1; +--nav-toggle-size: 3rem; +--gradient: linear-gradient(180deg, #ffffff26, #fff0); +--secondary-bg: #151b22; +--secondary-bg-rgb: 21, 27, 34; +--tertiary-bg: #10151b; +--tertiary-bg-rgb: 16, 21, 27; +--hr-color: var(--border-color, #dfe3e7); +--border-color-soft: var(--border-color, #dfe3e7); +--kbd-bg: var(--secondary-bg, #eaedf0); +--kbd-ink: var(--body-bg, #fff); +--toc-bg: var(--secondary-bg, #eaedf0); +--toc-ink: var(--color-primary, #112855); +--selection-bg: var(--highlight-bg, #fbeea8); +--selection-ink: var(--body-color, #22262a); +--border: 5px; - /* Table of Contents Container */ - --container-toc-bg: ; - --container-toc-color: #dbe3ff; +/* ===== BREAKPOINTS ===== */ +--bp-xs: 0; +--bp-sm: 576px; +--bp-md: 768px; +--bp-lg: 992px; +--bp-xl: 1200px; - /* Sidebar Container */ - --container-sidebar-bg-image: ; - --container-sidebar-bg-color: ; - --container-sidebar-bg-position: center; - --container-sidebar-bg-attachment: scroll; - --container-sidebar-bg-repeat: repeat; - --container-sidebar-bg-size: auto; - --container-sidebar-border: ; - --container-sidebar-border-radius: ; +/* ===== 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; - /* Bottom A Container */ - --container-bottom-a-bg-image: ; - --container-bottom-a-bg-color: ; - --container-bottom-a-bg-position: center; - --container-bottom-a-bg-attachment: fixed; - --container-bottom-a-bg-repeat: no-repeat; - --container-bottom-a-bg-size: cover; - --container-bottom-a-border: ; - --container-bottom-a-border-radius: ; +/* ===== 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; - /* Bottom B Container */ - --container-bottom-b-bg-image: ; - --container-bottom-b-bg-color: ; - --container-bottom-b-bg-position: center; - --container-bottom-b-bg-attachment: fixed; - --container-bottom-b-bg-repeat: no-repeat; - --container-bottom-b-bg-size: cover; - --container-bottom-b-border: ; - --container-bottom-b-border-radius: ; +/* ===== 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; - /* ===== BOOTSTRAP 5 COLOR PALETTE (Dark Mode) ===== */ - /* Lightened colors for dark mode visibility */ - --blue: #91a4ff; - --black: #000; - --indigo: #b19cff; - --purple: #c0a5ff; - --pink: #ff8fc0; - --red: #ff7a73; - --orange: #ff9c4d; - --yellow: #ffd166; - --green: #78d694; - --teal: #76e3ff; - --cyan: #6fb7ff; - --white: #fff; +/* ===== HEADER BACKGROUND ===== */ +--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); +--header-background-attachment: fixed; +--header-background-repeat: repeat; +--header-background-size: auto; - /* Gray scale tuned for dark mode */ - --gray-100: #161a20; - --gray-200: #1b2027; - --gray-300: #222831; - --gray-400: #2b323b; - --gray-500: #36404a; - --gray-600: #48525d; - --gray-700: #5b6672; - --gray-800: #cfd6de; - --gray-900: #e6ebf1; +/* ===== CONTAINER BACKGROUNDS ===== */ +/* Below Topbar Container */ +--container-below-topbar-bg-image: ; +--container-below-topbar-bg-color: ; +--container-below-topbar-bg-position: center; +--container-below-topbar-bg-attachment: fixed; +--container-below-topbar-bg-repeat: no-repeat; +--container-below-topbar-bg-size: cover; +--container-below-topbar-border: ; +--container-below-topbar-border-radius: ; - /* Contextual colors (adjusted for dark backgrounds) */ - --primary: #010156; - --secondary: #48525d; - --success: #4aa664; - --info: #4f7aa0; - --warning: #c77a00; - --danger: #c23a31; - --light: #1b2027; - --dark: #0f1318; +/* Top A Container */ +--container-top-a-bg-image: ; +--container-top-a-bg-color: ; +--container-top-a-bg-position: center; +--container-top-a-bg-attachment: fixed; +--container-top-a-bg-repeat: no-repeat; +--container-top-a-bg-size: cover; +--container-top-a-border: ; +--container-top-a-border-radius: ; - /* ===== BODY & TYPOGRAPHY ===== */ - --body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; - --body-font-size: 1rem; - --body-font-weight: 400; - --body-line-height: 1.5; +/* Top B Container */ +--container-top-b-bg-image: ; +--container-top-b-bg-color: ; +--container-top-b-bg-position: center; +--container-top-b-bg-attachment: fixed; +--container-top-b-bg-repeat: no-repeat; +--container-top-b-bg-size: cover; +--container-top-b-border: ; +--container-top-b-border-radius: ; - --body-color: #e6ebf1; - --body-color-rgb: 230, 235, 241; - --body-bg: #0e1318; - --body-bg-rgb: 14, 19, 24; +/* TOC Container */ +--container-toc-bg: ; +--container-toc-color: #dbe3ff; - /* ===== ADDITIONAL THEME COLORS ===== */ - --muted-color: #6d757e; - --hr-color: var(--border-color, #dfe3e7); - --link-active-color: var(--link-color); - --code-color: #ff7abd; - --code-color-ink: var(--code-color, #e93f8e); - --border-color-soft: var(--border-color, #dfe3e7); - --kbd-bg: var(--secondary-bg, #eaedf0); - --kbd-ink: var(--body-bg, #fff); - --toc-bg: var(--secondary-bg, #eaedf0); - --toc-ink: var(--color-primary, #112855); - --selection-bg: var(--highlight-bg, #fbeea8); - --selection-ink: var(--body-color, #22262a); - - --emphasis-color: #fff; - --emphasis-color-rgb: 255, 255, 255; +/* Sidebar Container */ +--container-sidebar-bg-image: ; +--container-sidebar-bg-color: ; +--container-sidebar-bg-position: center; +--container-sidebar-bg-attachment: scroll; +--container-sidebar-bg-repeat: repeat; +--container-sidebar-bg-size: auto; +--container-sidebar-border: ; +--container-sidebar-border-radius: ; - --secondary-color: #e6ebf1bf; - --secondary-color-rgb: 230, 235, 241; - --secondary-bg: #151b22; - --secondary-bg-rgb: 21, 27, 34; +/* Bottom A Container */ +--container-bottom-a-bg-image: ; +--container-bottom-a-bg-color: ; +--container-bottom-a-bg-position: center; +--container-bottom-a-bg-attachment: fixed; +--container-bottom-a-bg-repeat: no-repeat; +--container-bottom-a-bg-size: cover; +--container-bottom-a-border: ; +--container-bottom-a-border-radius: ; - --tertiary-color: #e6ebf180; - --tertiary-color-rgb: 230, 235, 241; - --tertiary-bg: #10151b; - --tertiary-bg-rgb: 16, 21, 27; +/* Bottom B Container */ +--container-bottom-b-bg-image: ; +--container-bottom-b-bg-color: ; +--container-bottom-b-bg-position: center; +--container-bottom-b-bg-attachment: fixed; +--container-bottom-b-bg-repeat: no-repeat; +--container-bottom-b-bg-size: cover; +--container-bottom-b-border: ; +--container-bottom-b-border-radius: ; - --heading-color: #f1f5f9; +/* ===== 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-pill: 50rem; - --link-color: #8ab4f8; - --link-color-rgb: 138, 180, 248; - --link-decoration: underline; - --link-hover-color: #c3d6ff; - --link-hover-color-rgb: 195, 214, 255; +/* ===== 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; - --highlight-color: #111; - --highlight-bg: #ffe28a1a; +/* ===== FOCUS & FORMS ===== */ +--focus-ring-width: .25rem; +--focus-ring-opacity: .6; +--focus-ring-color: #5472ff66; +--input-color: #e6ebf1; +--input-bg: #1a2332; +--input-border-color: #3a4250; +--input-focus-border-color: #5472ff; +--input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); +--input-placeholder-color: #8894aa; +--input-disabled-bg: #0f1318; +--input-disabled-border-color: #2b323b; +--form-valid-color: #78d694; +--form-valid-border-color: #78d694; +--form-invalid-color: #ff8e86; +--form-invalid-border-color: #ff8e86; - /* ===== BORDERS & SHADOWS ===== */ - --border: 5px; - --border-width: 1px; - --border-style: solid; - --border-color: #2b323b; - --border-color-translucent: #ffffff26; +/* ===== 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); - --border-radius: .25rem; - --border-radius-sm: .2rem; - --border-radius-lg: .3rem; - --border-radius-xl: .3rem; - --border-radius-xxl: 2rem; - --border-radius-pill: 50rem; +/* ===== CARDS ===== */ +--card-spacer-y: 1rem; +--card-spacer-x: 1rem; +--card-title-spacer-y: 0.5rem; +--card-border-width: 1px; +--card-border-color: var(--border-color); +--card-border-radius: var(--border-radius); +--card-box-shadow: none; +--card-inner-border-radius: calc(var(--border-radius) - 1px); +--card-cap-padding-y: 0.5rem; +--card-cap-padding-x: 1rem; +--card-cap-bg: rgba(255, 255, 255, 0.03); +--card-cap-color: var(--body-color); +--card-height: auto; +--card-color: var(--body-color); +--card-bg: var(--secondary-bg); +--card-img-overlay-padding: 1rem; +--card-group-margin: 0.75rem; - --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; +/* ===== VIRTUEMART (VM) ===== */ +/* VM Surfaces */ +--vm-surface: var(--secondary-bg); +--vm-surface-2: var(--tertiary-bg); +--vm-text: var(--body-color); +--vm-text-strong: #ffffff; +--vm-text-muted: var(--gray-700); +--vm-border: var(--border-color); +--vm-price-color: var(--success); - /* ===== FORM COLORS ===== */ - --focus-ring-width: .25rem; - --focus-ring-opacity: .6; - --focus-ring-color: #5472ff66; +/* VM Layout and Density */ +--vm-container-max-width: 1200px; +--vm-section-gap: 2rem; +--vm-block-radius: var(--border-radius); +--vm-block-shadow: var(--box-shadow-sm); - --form-valid-color: #78d694; - --form-valid-border-color: #78d694; - --form-invalid-color: #ff8e86; - --form-invalid-border-color: #ff8e86; +/* VM Typography */ +--vm-category-title-size: 2rem; +--vm-subcategory-title-size: 1.5rem; +--vm-page-title-size: 1.75rem; +--vm-products-type-title-size: 1.25rem; +--vm-product-title-size: 1.125rem; +--vm-product-title-weight: 500; +--vm-products-type-title-weight: 600; +--vm-price-size: 1.5rem; +--vm-price-detail-size: 1.125rem; +--vm-price-desc-size: 0.875rem; - /* Offcanvas (moved from template.css) */ - --offcanvas-color: var(--body-color); - --offcanvas-padding-x: 1rem; - --offcanvas-padding-y: 1rem; +/* VM Controls */ +--vm-input-radius: var(--border-radius); +--vm-input-shadow: var(--box-shadow-sm); +--vm-qty-width: 80px; +--vm-cart-dropdown-min-width: 300px; - /* Navbar */ - --navbar-padding-x: 1rem; - --navbar-padding-y: 0.5rem; - --navbar-color: var(--nav-text-color); - --navbar-active-color: var(--mainmenu-nav-link-color); - --navbar-disabled-color: #6c757d; - --navbar-brand-padding-y: 0.3125rem; - --navbar-brand-margin-end: 1rem; - --navbar-brand-font-size: 1.25rem; - --navbar-brand-color: var(--nav-text-color); - --navbar-brand-active-color: var(--mainmenu-nav-link-color); - --navbar-nav-link-padding-x: 0.5rem; - --navbar-toggler-padding-y: 0.25rem; - --navbar-toggler-padding-x: 0.75rem; - --navbar-toggler-font-size: 1.25rem; - --navbar-toggler-border-color: rgba(255, 255, 255, 0.1); - --navbar-toggler-border-radius: 0.25rem; - --navbar-toggler-focus-width: 0.25rem; - --navbar-toggler-transition: box-shadow 0.15s ease-in-out; - --nav-link-padding-x: 1rem; - --nav-link-padding-y: 0.5rem; - --nav-link-font-weight: 400; - --nav-link-color: var(--nav-text-color); - --nav-link-active-color: var(--mainmenu-nav-link-color); - --nav-link-disabled-color: #6c757d; +/* VM Alerts */ +--vm-alert-radius: var(--border-radius); +--vm-alert-shadow: var(--box-shadow-sm); +--vm-availability-bg: var(--success-bg-subtle); +--vm-availability-text: var(--success); - /* Responsive tokens */ - --nav-toggle-size: 3rem; - --bp-xs: 0; - --bp-sm: 576px; - --bp-md: 768px; - --bp-lg: 992px; - --bp-xl: 1200px; +/* VM Buttons */ +--vm-btn-padding-x: 1rem; +--vm-btn-padding-y: 0.5rem; +--vm-btn-radius: var(--border-radius); +--vm-btn-shadow: var(--box-shadow-sm); +--vm-btn-primary-bg: var(--primary); +--vm-btn-primary-text: #ffffff; +--vm-btn-primary-border: var(--primary); +--vm-btn-secondary-bg: var(--secondary); +--vm-btn-secondary-text: #ffffff; +--vm-btn-secondary-border: var(--secondary); - /* Utility opacity defaults */ - --bg-opacity: 1; +/* VM Image Overlay Controls */ +--vm-image-overlay-gap-x: 0.5rem; +--vm-image-overlay-gap-y: 0.5rem; +--vm-image-overlay-raise: 0.25rem; +--vm-image-overlay-btn-size: 2.5rem; +--vm-image-overlay-btn-radius: 50%; +--vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7); +--vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85); +--vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2); +--vm-image-overlay-btn-border-width: 1px; +--vm-image-overlay-btn-color: var(--body-color); +--vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - /* Layout padding */ - --padding-x: 1rem; - --padding-y: 1rem; +/* VM Vendor Menu */ +--vm-vendor-menu-bg: var(--secondary-bg); +--vm-vendor-menu-border: var(--border-color); +--vm-vendor-menu-radius: var(--border-radius); +--vm-vendor-menu-shadow: var(--box-shadow-sm); +--vm-vendor-menu-item-gap: 0.25rem; +--vm-vendor-menu-item-padding-x: 1rem; +--vm-vendor-menu-item-padding-y: 0.5rem; +--vm-vendor-menu-pill-radius: 50rem; +--vm-vendor-menu-link: var(--link-color); +--vm-vendor-menu-link-hover: var(--link-hover-color); +--vm-vendor-menu-link-active: var(--primary); +--vm-vendor-menu-hover-bg: var(--tertiary-bg); - /* Button utilities */ - --btn-border-radius: var(--border-radius); - --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3); - - /* Card variables */ - --card-spacer-y: 1rem; - --card-spacer-x: 1rem; - --card-title-spacer-y: 0.5rem; - --card-border-width: 1px; - --card-border-color: var(--border-color); - --card-border-radius: var(--border-radius); - --card-box-shadow: none; - --card-inner-border-radius: calc(var(--border-radius) - 1px); - --card-cap-padding-y: 0.5rem; - --card-cap-padding-x: 1rem; - --card-cap-bg: rgba(255, 255, 255, 0.03); - --card-cap-color: var(--body-color); - --card-height: auto; - --card-color: var(--body-color); - --card-bg: var(--secondary-bg); - --card-img-overlay-padding: 1rem; - --card-group-margin: 0.75rem; - - /* VirtueMart surfaces */ - --vm-surface: var(--secondary-bg); - --vm-surface-2: var(--tertiary-bg); - --vm-text: var(--body-color); - --vm-text-strong: #ffffff; - --vm-text-muted: var(--gray-700); - --vm-border: var(--border-color); - --vm-price-color: var(--success); - - /* VM layout and density */ - --vm-container-max-width: 1200px; - --vm-section-gap: 2rem; - --vm-block-radius: var(--border-radius); - --vm-block-shadow: var(--box-shadow-sm); - - /* VM typography */ - --vm-category-title-size: 2rem; - --vm-subcategory-title-size: 1.5rem; - --vm-page-title-size: 1.75rem; - --vm-products-type-title-size: 1.25rem; - --vm-product-title-size: 1.125rem; - --vm-product-title-weight: 500; - --vm-products-type-title-weight: 600; - --vm-price-size: 1.5rem; - --vm-price-detail-size: 1.125rem; - --vm-price-desc-size: 0.875rem; - - /* VM controls */ - --vm-input-radius: var(--border-radius); - --vm-input-shadow: var(--box-shadow-sm); - --vm-qty-width: 80px; - --vm-cart-dropdown-min-width: 300px; - - /* VM alerts */ - --vm-alert-radius: var(--border-radius); - --vm-alert-shadow: var(--box-shadow-sm); - --vm-availability-bg: var(--success-bg-subtle); - --vm-availability-text: var(--success); - - /* VM buttons */ - --vm-btn-padding-x: 1rem; - --vm-btn-padding-y: 0.5rem; - --vm-btn-radius: var(--border-radius); - --vm-btn-shadow: var(--box-shadow-sm); - --vm-btn-primary-bg: var(--primary); - --vm-btn-primary-text: #ffffff; - --vm-btn-primary-border: var(--primary); - --vm-btn-secondary-bg: var(--secondary); - --vm-btn-secondary-text: #ffffff; - --vm-btn-secondary-border: var(--secondary); - - /* VM image overlay controls */ - --vm-image-overlay-gap-x: 0.5rem; - --vm-image-overlay-gap-y: 0.5rem; - --vm-image-overlay-raise: 0.25rem; - --vm-image-overlay-btn-size: 2.5rem; - --vm-image-overlay-btn-radius: 50%; - --vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7); - --vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85); - --vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2); - --vm-image-overlay-btn-border-width: 1px; - --vm-image-overlay-btn-color: var(--body-color); - --vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - - /* VM vendor menu tokens */ - --vm-vendor-menu-bg: var(--secondary-bg); - --vm-vendor-menu-border: var(--border-color); - --vm-vendor-menu-radius: var(--border-radius); - --vm-vendor-menu-shadow: var(--box-shadow-sm); - --vm-vendor-menu-item-gap: 0.25rem; - --vm-vendor-menu-item-padding-x: 1rem; - --vm-vendor-menu-item-padding-y: 0.5rem; - --vm-vendor-menu-pill-radius: 50rem; - --vm-vendor-menu-link: var(--link-color); - --vm-vendor-menu-link-hover: var(--link-hover-color); - --vm-vendor-menu-link-active: var(--primary); - --vm-vendor-menu-hover-bg: var(--tertiary-bg); - - /* Gable colors */ - --gab-blue: #4d9fff; - --gab-green: #5cb85c; - --gab-red: #ff6b6b; - --gab-orange: #ff9f5a; - --gab-gray1: #868e96; - --gab-gray2: #adb5bd; - --gab-gray3: #ced4da; +/* ===== GABLE ===== */ +--gab-blue: #4d9fff; +--gab-green: #5cb85c; +--gab-red: #ff6b6b; +--gab-orange: #ff9f5a; +--gab-gray1: #868e96; +--gab-gray2: #adb5bd; +--gab-gray3: #ced4da; } From 9e2c2cee0d9fbe5264bf07293ba55a28a5e12510 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 17:12:31 +0000 Subject: [PATCH 38/45] docs: Add missing CSS variable documentation sections - Add Navbar Variables (17 vars) - Add Offcanvas Variables (3 vars) - Add Button Utilities (2 vars) - Add Card Variables (17 vars) - Add Responsive Tokens & Breakpoints (9 vars) - Add VirtueMart Variables (61 vars) - Add Gable Variables (7 vars) - Update Table of Contents - Add usage examples - Update revision history Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- docs/CSS_VARIABLES.md | 748 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 747 insertions(+), 1 deletion(-) diff --git a/docs/CSS_VARIABLES.md b/docs/CSS_VARIABLES.md index 0cce5ae..053741f 100644 --- a/docs/CSS_VARIABLES.md +++ b/docs/CSS_VARIABLES.md @@ -24,13 +24,20 @@ This document provides a complete reference of all CSS variables available in th - [Primary Brand Colors](#primary-brand-colors) - [Link Colors](#link-colors) - [Navigation Colors](#navigation-colors) +- [Navbar Variables](#navbar-variables) +- [Offcanvas Variables](#offcanvas-variables) - [Header Background](#header-background) - [Container Backgrounds](#container-backgrounds) - [Bootstrap Color Palette](#bootstrap-color-palette) - [Body & Typography](#body--typography) - [Additional Theme Colors](#additional-theme-colors) - [Borders & Shadows](#borders--shadows) +- [Button Utilities](#button-utilities) +- [Card Variables](#card-variables) - [Form Colors](#form-colors) +- [Responsive Tokens & Breakpoints](#responsive-tokens--breakpoints) +- [VirtueMart Variables](#virtuemart-variables) +- [Gable Variables](#gable-variables) --- @@ -131,6 +138,149 @@ To create custom color schemes: --- +## Navbar Variables + +### `--navbar-padding-x` +- **Description**: Horizontal padding for navbar +- **Default**: `1rem` +- **Usage**: Navbar horizontal spacing + +### `--navbar-padding-y` +- **Description**: Vertical padding for navbar +- **Default**: `0.5rem` +- **Usage**: Navbar vertical spacing + +### `--navbar-color` +- **Description**: Default text color for navbar items +- **Light Mode Default**: `rgba(0, 0, 0, 0.55)` +- **Dark Mode Default**: `rgba(255, 255, 255, 0.55)` +- **Usage**: Navbar text color + +### `--navbar-active-color` +- **Description**: Text color for active navbar items +- **Light Mode Default**: `rgba(0, 0, 0, 0.9)` +- **Dark Mode Default**: `rgba(255, 255, 255, 0.9)` +- **Usage**: Active navbar item color + +### `--navbar-disabled-color` +- **Description**: Text color for disabled navbar items +- **Light Mode Default**: `rgba(0, 0, 0, 0.3)` +- **Dark Mode Default**: `rgba(255, 255, 255, 0.3)` +- **Usage**: Disabled navbar item color + +### `--navbar-brand-padding-y` +- **Description**: Vertical padding for navbar brand +- **Default**: `0.3125rem` +- **Usage**: Navbar brand vertical spacing + +### `--navbar-brand-margin-end` +- **Description**: Right margin for navbar brand +- **Default**: `1rem` +- **Usage**: Space after navbar brand + +### `--navbar-brand-font-size` +- **Description**: Font size for navbar brand +- **Default**: `1.25rem` +- **Usage**: Navbar brand text size + +### `--navbar-brand-color` +- **Description**: Color for navbar brand +- **Default**: Inherits from `--navbar-color` +- **Usage**: Navbar brand text color + +### `--navbar-brand-active-color` +- **Description**: Color for navbar brand when active +- **Default**: Inherits from `--navbar-active-color` +- **Usage**: Active navbar brand color + +### `--navbar-toggler-padding-x` +- **Description**: Horizontal padding for navbar toggler button +- **Default**: `0.75rem` +- **Usage**: Toggler button horizontal spacing + +### `--navbar-toggler-padding-y` +- **Description**: Vertical padding for navbar toggler button +- **Default**: `0.25rem` +- **Usage**: Toggler button vertical spacing + +### `--navbar-toggler-font-size` +- **Description**: Font size for navbar toggler icon +- **Default**: `1.25rem` +- **Usage**: Toggler icon size + +### `--navbar-toggler-border-color` +- **Description**: Border color for navbar toggler +- **Light Mode Default**: `rgba(0, 0, 0, 0.1)` +- **Dark Mode Default**: `rgba(255, 255, 255, 0.1)` +- **Usage**: Toggler button border + +### `--navbar-toggler-border-radius` +- **Description**: Border radius for navbar toggler +- **Default**: `0.25rem` +- **Usage**: Toggler button corner rounding + +### `--navbar-toggler-focus-width` +- **Description**: Width of focus outline on toggler +- **Default**: `0.25rem` +- **Usage**: Focus indicator width + +### `--navbar-toggler-transition` +- **Description**: CSS transition for toggler state changes +- **Default**: `box-shadow 0.15s ease-in-out` +- **Usage**: Toggler animation + +### `--nav-link-padding-x` +- **Description**: Horizontal padding for nav links +- **Default**: `0.5rem` +- **Usage**: Nav link horizontal spacing + +### `--nav-link-padding-y` +- **Description**: Vertical padding for nav links +- **Default**: `0.5rem` +- **Usage**: Nav link vertical spacing + +### `--nav-link-font-weight` +- **Description**: Font weight for nav links +- **Default**: `400` +- **Usage**: Nav link text weight + +### `--nav-link-color` +- **Description**: Color for nav links +- **Default**: Inherits from `--navbar-color` +- **Usage**: Nav link text color + +### `--nav-link-active-color` +- **Description**: Color for active nav links +- **Default**: Inherits from `--navbar-active-color` +- **Usage**: Active nav link color + +### `--nav-link-disabled-color` +- **Description**: Color for disabled nav links +- **Default**: Inherits from `--navbar-disabled-color` +- **Usage**: Disabled nav link color + +--- + +## Offcanvas Variables + +### `--offcanvas-color` +- **Description**: Text color for offcanvas content +- **Light Mode Default**: `var(--body-color)` +- **Dark Mode Default**: `var(--body-color)` +- **Usage**: Offcanvas text color + +### `--offcanvas-padding-x` +- **Description**: Horizontal padding for offcanvas content +- **Default**: `1.5rem` +- **Usage**: Offcanvas horizontal spacing + +### `--offcanvas-padding-y` +- **Description**: Vertical padding for offcanvas content +- **Default**: `1.5rem` +- **Usage**: Offcanvas vertical spacing + +--- + ## Header Background ### `--header-background-image` @@ -385,6 +535,112 @@ Dark mode ranges are inverted for better contrast on dark backgrounds. --- +## Button Utilities + +### `--btn-border-radius` +- **Description**: Border radius for buttons +- **Default**: `0.25rem` +- **Usage**: Button corner rounding + +### `--btn-box-shadow` +- **Description**: Box shadow for buttons +- **Default**: `inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075)` +- **Usage**: Button shadow styling + +--- + +## Card Variables + +### `--card-spacer-x` +- **Description**: Horizontal spacing for card padding +- **Default**: `1rem` +- **Usage**: Card horizontal padding + +### `--card-spacer-y` +- **Description**: Vertical spacing for card padding +- **Default**: `1rem` +- **Usage**: Card vertical padding + +### `--card-title-spacer-y` +- **Description**: Spacing below card title +- **Default**: `0.5rem` +- **Usage**: Card title bottom margin + +### `--card-border-width` +- **Description**: Width of card border +- **Default**: `1px` +- **Usage**: Card border thickness + +### `--card-border-color` +- **Description**: Color of card border +- **Light Mode Default**: `rgba(0, 0, 0, 0.125)` +- **Dark Mode Default**: `rgba(255, 255, 255, 0.125)` +- **Usage**: Card border color + +### `--card-border-radius` +- **Description**: Border radius for cards +- **Default**: `0.25rem` +- **Usage**: Card corner rounding + +### `--card-box-shadow` +- **Description**: Box shadow for cards +- **Default**: `none` +- **Usage**: Card shadow effect + +### `--card-inner-border-radius` +- **Description**: Inner border radius for nested card elements +- **Default**: `calc(0.25rem - 1px)` +- **Usage**: Inner card element corners + +### `--card-cap-padding-x` +- **Description**: Horizontal padding for card header/footer +- **Default**: `1rem` +- **Usage**: Card cap horizontal spacing + +### `--card-cap-padding-y` +- **Description**: Vertical padding for card header/footer +- **Default**: `0.5rem` +- **Usage**: Card cap vertical spacing + +### `--card-cap-bg` +- **Description**: Background color for card header/footer +- **Light Mode Default**: `rgba(0, 0, 0, 0.03)` +- **Dark Mode Default**: `rgba(255, 255, 255, 0.03)` +- **Usage**: Card cap background + +### `--card-cap-color` +- **Description**: Text color for card header/footer +- **Default**: Inherits from body color +- **Usage**: Card cap text color + +### `--card-height` +- **Description**: Height constraint for cards +- **Default**: `auto` +- **Usage**: Card height control + +### `--card-color` +- **Description**: Text color for card content +- **Default**: Inherits from body color +- **Usage**: Card text color + +### `--card-bg` +- **Description**: Background color for cards +- **Light Mode Default**: `#fff` +- **Dark Mode Default**: `#212529` +- **Usage**: Card background + +### `--card-img-overlay-padding` +- **Description**: Padding for card image overlays +- **Default**: `1rem` +- **Usage**: Card image overlay spacing + +### `--card-group-margin` +- **Description**: Margin between cards in card groups +- **Default**: `0.75rem` +- **Usage**: Card group spacing + +--- + ## Form Colors ### Focus Ring @@ -419,6 +675,462 @@ Dark mode ranges are inverted for better contrast on dark backgrounds. --- +## Responsive Tokens & Breakpoints + +### Breakpoint Variables + +#### `--bp-xs` +- **Description**: Extra small breakpoint +- **Default**: `0px` +- **Usage**: Mobile devices + +#### `--bp-sm` +- **Description**: Small breakpoint +- **Default**: `576px` +- **Usage**: Small tablets, large phones + +#### `--bp-md` +- **Description**: Medium breakpoint +- **Default**: `768px` +- **Usage**: Tablets + +#### `--bp-lg` +- **Description**: Large breakpoint +- **Default**: `992px` +- **Usage**: Desktops + +#### `--bp-xl` +- **Description**: Extra large breakpoint +- **Default**: `1200px` +- **Usage**: Large desktops + +### Responsive Utilities + +#### `--nav-toggle-size` +- **Description**: Size of navigation toggle button +- **Default**: `40px` +- **Usage**: Mobile menu toggle button dimensions + +#### `--bg-opacity` +- **Description**: Background opacity for overlay elements +- **Default**: `0.5` +- **Usage**: Overlay transparency + +#### `--padding-x` +- **Description**: General horizontal padding utility +- **Default**: `1rem` +- **Usage**: Horizontal spacing utility + +#### `--padding-y` +- **Description**: General vertical padding utility +- **Default**: `1rem` +- **Usage**: Vertical spacing utility + +--- + +## VirtueMart Variables + +### VM Surfaces + +#### `--vm-surface` +- **Description**: Primary VirtueMart surface background +- **Light Mode Default**: `#ffffff` +- **Dark Mode Default**: `#1e1e1e` +- **Usage**: Main VM component backgrounds + +#### `--vm-surface-2` +- **Description**: Secondary VirtueMart surface background +- **Light Mode Default**: `#f8f9fa` +- **Dark Mode Default**: `#2d2d2d` +- **Usage**: Alternate VM backgrounds + +#### `--vm-text` +- **Description**: Default VirtueMart text color +- **Light Mode Default**: `#212529` +- **Dark Mode Default**: `#e9ecef` +- **Usage**: VM body text + +#### `--vm-text-strong` +- **Description**: Strong/emphasized VirtueMart text +- **Light Mode Default**: `#000000` +- **Dark Mode Default**: `#ffffff` +- **Usage**: VM headings, emphasized text + +#### `--vm-text-muted` +- **Description**: Muted VirtueMart text +- **Light Mode Default**: `#6c757d` +- **Dark Mode Default**: `#adb5bd` +- **Usage**: VM secondary text, captions + +#### `--vm-border` +- **Description**: Border color for VirtueMart components +- **Light Mode Default**: `#dee2e6` +- **Dark Mode Default**: `#495057` +- **Usage**: VM borders, dividers + +#### `--vm-price-color` +- **Description**: Color for product prices +- **Light Mode Default**: `#198754` +- **Dark Mode Default**: `#20c997` +- **Usage**: Product price display + +### VM Layout + +#### `--vm-container-max-width` +- **Description**: Maximum width for VM containers +- **Default**: `1200px` +- **Usage**: VM content width constraint + +#### `--vm-section-gap` +- **Description**: Gap between VM sections +- **Default**: `2rem` +- **Usage**: VM section spacing + +#### `--vm-block-radius` +- **Description**: Border radius for VM blocks +- **Default**: `0.375rem` +- **Usage**: VM component corner rounding + +#### `--vm-block-shadow` +- **Description**: Shadow for VM blocks +- **Default**: `0 2px 4px rgba(0, 0, 0, 0.1)` +- **Usage**: VM component shadows + +### VM Typography + +#### `--vm-title-1-size` +- **Description**: Size for h1 titles in VM +- **Default**: `2.5rem` +- **Usage**: VM main headings + +#### `--vm-title-1-weight` +- **Description**: Font weight for h1 titles +- **Default**: `700` +- **Usage**: VM main heading weight + +#### `--vm-title-2-size` +- **Description**: Size for h2 titles in VM +- **Default**: `2rem` +- **Usage**: VM section headings + +#### `--vm-title-2-weight` +- **Description**: Font weight for h2 titles +- **Default**: `600` +- **Usage**: VM section heading weight + +#### `--vm-title-3-size` +- **Description**: Size for h3 titles in VM +- **Default**: `1.75rem` +- **Usage**: VM subsection headings + +#### `--vm-title-3-weight` +- **Description**: Font weight for h3 titles +- **Default**: `600` +- **Usage**: VM subsection heading weight + +#### `--vm-title-4-size` +- **Description**: Size for h4 titles in VM +- **Default**: `1.5rem` +- **Usage**: VM component headings + +#### `--vm-title-4-weight` +- **Description**: Font weight for h4 titles +- **Default**: `500` +- **Usage**: VM component heading weight + +#### `--vm-title-5-size` +- **Description**: Size for h5 titles in VM +- **Default**: `1.25rem` +- **Usage**: VM small headings + +#### `--vm-title-5-weight` +- **Description**: Font weight for h5 titles +- **Default**: `500` +- **Usage**: VM small heading weight + +### VM Controls + +#### `--vm-input-border` +- **Description**: Border style for VM inputs +- **Light Mode Default**: `1px solid #ced4da` +- **Dark Mode Default**: `1px solid #495057` +- **Usage**: VM form input borders + +#### `--vm-input-bg` +- **Description**: Background color for VM inputs +- **Light Mode Default**: `#ffffff` +- **Dark Mode Default**: `#212529` +- **Usage**: VM form input backgrounds + +#### `--vm-input-text` +- **Description**: Text color for VM inputs +- **Light Mode Default**: `#212529` +- **Dark Mode Default**: `#e9ecef` +- **Usage**: VM form input text + +#### `--vm-qty-width` +- **Description**: Width for quantity input fields +- **Default**: `80px` +- **Usage**: Product quantity selectors + +#### `--vm-cart-dropdown-min-width` +- **Description**: Minimum width for cart dropdown +- **Default**: `300px` +- **Usage**: Shopping cart dropdown sizing + +### VM Alerts + +#### `--vm-alert-success-bg` +- **Description**: Background for success alerts +- **Light Mode Default**: `#d1e7dd` +- **Dark Mode Default**: `#0f5132` +- **Usage**: VM success messages + +#### `--vm-alert-error-bg` +- **Description**: Background for error alerts +- **Light Mode Default**: `#f8d7da` +- **Dark Mode Default**: `#842029` +- **Usage**: VM error messages + +#### `--vm-availability-in-stock` +- **Description**: Color for in-stock indicator +- **Light Mode Default**: `#198754` +- **Dark Mode Default**: `#20c997` +- **Usage**: Product availability display + +#### `--vm-availability-out-of-stock` +- **Description**: Color for out-of-stock indicator +- **Light Mode Default**: `#dc3545` +- **Dark Mode Default**: `#ea868f` +- **Usage**: Product unavailability display + +### VM Buttons + +#### `--vm-btn-padding-x` +- **Description**: Horizontal padding for VM buttons +- **Default**: `1rem` +- **Usage**: VM button horizontal spacing + +#### `--vm-btn-padding-y` +- **Description**: Vertical padding for VM buttons +- **Default**: `0.5rem` +- **Usage**: VM button vertical spacing + +#### `--vm-btn-radius` +- **Description**: Border radius for VM buttons +- **Default**: `0.25rem` +- **Usage**: VM button corner rounding + +#### `--vm-btn-shadow` +- **Description**: Shadow for VM buttons +- **Default**: `0 2px 4px rgba(0, 0, 0, 0.1)` +- **Usage**: VM button shadows + +#### `--vm-btn-primary-bg` +- **Description**: Background for primary VM buttons +- **Light Mode Default**: `#0d6efd` +- **Dark Mode Default**: `#0a58ca` +- **Usage**: Primary VM action buttons + +#### `--vm-btn-primary-text` +- **Description**: Text color for primary VM buttons +- **Default**: `#ffffff` +- **Usage**: Primary VM button text + +#### `--vm-btn-secondary-bg` +- **Description**: Background for secondary VM buttons +- **Light Mode Default**: `#6c757d` +- **Dark Mode Default**: `#565e64` +- **Usage**: Secondary VM action buttons + +#### `--vm-btn-secondary-text` +- **Description**: Text color for secondary VM buttons +- **Default**: `#ffffff` +- **Usage**: Secondary VM button text + +#### `--vm-btn-add-to-cart-bg` +- **Description**: Background for add-to-cart button +- **Light Mode Default**: `#198754` +- **Dark Mode Default**: `#146c43` +- **Usage**: Add to cart button styling + +### VM Image Overlays + +#### `--vm-overlay-gap` +- **Description**: Gap in image overlay elements +- **Default**: `0.5rem` +- **Usage**: Spacing in product image overlays + +#### `--vm-overlay-top` +- **Description**: Top position for overlay elements +- **Default**: `1rem` +- **Usage**: Overlay vertical positioning + +#### `--vm-overlay-right` +- **Description**: Right position for overlay elements +- **Default**: `1rem` +- **Usage**: Overlay horizontal positioning + +#### `--vm-overlay-btn-size` +- **Description**: Size for overlay buttons +- **Default**: `40px` +- **Usage**: Quick view, wishlist button dimensions + +#### `--vm-overlay-btn-bg` +- **Description**: Background for overlay buttons +- **Light Mode Default**: `rgba(255, 255, 255, 0.9)` +- **Dark Mode Default**: `rgba(0, 0, 0, 0.9)` +- **Usage**: Overlay button background + +#### `--vm-overlay-btn-text` +- **Description**: Text color for overlay buttons +- **Light Mode Default**: `#212529` +- **Dark Mode Default**: `#e9ecef` +- **Usage**: Overlay button text + +#### `--vm-overlay-btn-hover-bg` +- **Description**: Background for overlay buttons on hover +- **Light Mode Default**: `#ffffff` +- **Dark Mode Default**: `#000000` +- **Usage**: Overlay button hover state + +#### `--vm-overlay-btn-radius` +- **Description**: Border radius for overlay buttons +- **Default**: `50%` +- **Usage**: Circular overlay buttons + +#### `--vm-overlay-btn-shadow` +- **Description**: Shadow for overlay buttons +- **Default**: `0 2px 8px rgba(0, 0, 0, 0.15)` +- **Usage**: Overlay button shadows + +### VM Vendor Menu + +#### `--vm-vendor-menu-bg` +- **Description**: Background for vendor menu +- **Light Mode Default**: `#ffffff` +- **Dark Mode Default**: `#212529` +- **Usage**: Vendor menu background + +#### `--vm-vendor-menu-text` +- **Description**: Text color for vendor menu +- **Light Mode Default**: `#212529` +- **Dark Mode Default**: `#e9ecef` +- **Usage**: Vendor menu text + +#### `--vm-vendor-menu-border` +- **Description**: Border for vendor menu +- **Light Mode Default**: `1px solid #dee2e6` +- **Dark Mode Default**: `1px solid #495057` +- **Usage**: Vendor menu borders + +#### `--vm-vendor-menu-hover-bg` +- **Description**: Background on hover for vendor menu items +- **Light Mode Default**: `#f8f9fa` +- **Dark Mode Default**: `#2d2d2d` +- **Usage**: Vendor menu hover state + +#### `--vm-vendor-menu-active-bg` +- **Description**: Background for active vendor menu items +- **Light Mode Default**: `#e9ecef` +- **Dark Mode Default**: `#343a40` +- **Usage**: Active vendor menu item + +#### `--vm-vendor-menu-active-text` +- **Description**: Text color for active vendor menu items +- **Light Mode Default**: `#0d6efd` +- **Dark Mode Default**: `#6ea8fe` +- **Usage**: Active vendor menu text + +#### `--vm-vendor-menu-padding-x` +- **Description**: Horizontal padding for vendor menu items +- **Default**: `1rem` +- **Usage**: Vendor menu item horizontal spacing + +#### `--vm-vendor-menu-padding-y` +- **Description**: Vertical padding for vendor menu items +- **Default**: `0.75rem` +- **Usage**: Vendor menu item vertical spacing + +#### `--vm-vendor-menu-font-size` +- **Description**: Font size for vendor menu +- **Default**: `0.875rem` +- **Usage**: Vendor menu text size + +#### `--vm-vendor-menu-font-weight` +- **Description**: Font weight for vendor menu +- **Default**: `400` +- **Usage**: Vendor menu text weight + +#### `--vm-vendor-menu-radius` +- **Description**: Border radius for vendor menu +- **Default**: `0.25rem` +- **Usage**: Vendor menu corner rounding + +#### `--vm-vendor-menu-shadow` +- **Description**: Shadow for vendor menu +- **Default**: `0 2px 4px rgba(0, 0, 0, 0.1)` +- **Usage**: Vendor menu drop shadow + +#### `--vm-vendor-menu-width` +- **Description**: Width for vendor menu +- **Default**: `250px` +- **Usage**: Vendor menu sizing + +#### `--vm-vendor-menu-item-gap` +- **Description**: Gap between vendor menu items +- **Default**: `0.25rem` +- **Usage**: Vendor menu item spacing + +#### `--vm-vendor-menu-icon-size` +- **Description**: Size for vendor menu icons +- **Default**: `1.25rem` +- **Usage**: Vendor menu icon dimensions + +--- + +## Gable Variables + +### `--gab-blue` +- **Description**: Gable primary blue color +- **Default**: `#1e88e5` +- **Usage**: Gable brand blue accent + +### `--gab-green` +- **Description**: Gable green color +- **Default**: `#43a047` +- **Usage**: Gable success/positive indicators + +### `--gab-red` +- **Description**: Gable red color +- **Default**: `#e53935` +- **Usage**: Gable error/alert indicators + +### `--gab-orange` +- **Description**: Gable orange color +- **Default**: `#fb8c00` +- **Usage**: Gable warning indicators + +### `--gab-gray1` +- **Description**: Gable light gray +- **Light Mode Default**: `#f5f5f5` +- **Dark Mode Default**: `#424242` +- **Usage**: Gable light backgrounds + +### `--gab-gray2` +- **Description**: Gable medium gray +- **Light Mode Default**: `#e0e0e0` +- **Dark Mode Default**: `#616161` +- **Usage**: Gable medium backgrounds, borders + +### `--gab-gray3` +- **Description**: Gable dark gray +- **Light Mode Default**: `#9e9e9e` +- **Dark Mode Default**: `#9e9e9e` +- **Usage**: Gable text, icons + +--- + ## Usage Examples ### Example 1: Custom Brand Colors @@ -453,6 +1165,39 @@ Dark mode ranges are inverted for better contrast on dark backgrounds. } ``` +### Example 4: Custom Card Styling + +```css +:root[data-bs-theme="light"] { + --card-border-radius: 0.5rem; + --card-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + --card-spacer-x: 1.5rem; + --card-spacer-y: 1.5rem; +} +``` + +### Example 5: VirtueMart Custom Colors + +```css +:root[data-bs-theme="light"] { + --vm-btn-primary-bg: #0d6efd; + --vm-btn-add-to-cart-bg: #198754; + --vm-price-color: #dc3545; + --vm-surface: #ffffff; +} +``` + +### Example 6: Responsive Navbar + +```css +:root[data-bs-theme="light"] { + --navbar-padding-x: 1.5rem; + --navbar-padding-y: 0.75rem; + --nav-toggle-size: 48px; + --navbar-toggler-border-radius: 0.5rem; +} +``` + --- ## Tips for Customization @@ -491,4 +1236,5 @@ Dark mode ranges are inverted for better contrast on dark backgrounds. | Date | Change Summary | Author | | ---------- | ----------------------------------------------------- | --------------- | -| 2026-01-30 | Initial CSS variables reference documentation created | GitHub Copilot | +| 2026-02-07 | Added missing CSS variable documentation | GitHub Copilot | +| 2026-01-30 | Initial CSS variables reference documentation created | GitHub Copilot | From 910d1dcb3ee6fd95872825d78ddcd6e6f9847c2d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 17:17:49 +0000 Subject: [PATCH 39/45] Complete CSS variable system: Add missing values, regenerate alternative colors, add Bootstrap/Joomla styles Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- .../css/colors/dark/colors_alternative.css | 351 ++++---- src/media/css/colors/dark/colors_standard.css | 50 +- .../css/colors/light/colors_alternative.css | 848 +++++++++--------- .../css/colors/light/colors_standard.css | 50 +- src/media/css/template.css | 198 ++++ 5 files changed, 848 insertions(+), 649 deletions(-) diff --git a/src/media/css/colors/dark/colors_alternative.css b/src/media/css/colors/dark/colors_alternative.css index 1f7a298..87e7352 100644 --- a/src/media/css/colors/dark/colors_alternative.css +++ b/src/media/css/colors/dark/colors_alternative.css @@ -12,34 +12,35 @@ INGROUP: MokoCassiopeia PATH: ./media/templates/site/mokocassiopeia/css/global/dark/colors_alternative.css VERSION: 03.05.00 - BRIEF: Alternative dark mode color definitions for MokoCassiopeia template + BRIEF: Alternative dark mode color definitions (Teal & Purple) for MokoCassiopeia template */ /* ----------------------------------------------- - * DARK THEME + * ALTERNATIVE DARK THEME - TEAL & PURPLE * --------------------------------------------- */ :root[data-bs-theme='dark']{ color-scheme: dark; /* ===== BRAND & THEME COLORS ===== */ ---color-primary: #112855; ---accent-color-primary: #3f8ff0; ---accent-color-secondary: #6fb3ff; +--color-primary: #14b8a6; +--accent-color-primary: #c084fc; +--accent-color-secondary: #d8b4fe; /* ===== NAVIGATION ===== */ --mainmenu-nav-link-color: #fff; ---nav-text-color: var(--mainmenu-nav-link-color); ---nav-bg-color: var(--color-link); +--nav-text-color: #e2e8f0; +--nav-bg-color: #0f766e; /* ===== LINKS ===== */ ---color-link: #224FAA; ---color-hover: #224FAA; ---link-color: #8ab4f8; ---link-color-rgb: 138, 180, 248; +--color-link: #e9d5ff; +--color-hover: #c084fc; +--color-active: var(--mainmenu-nav-link-color); +--link-color: #c084fc; +--link-color-rgb: 192, 132, 252; --link-decoration: underline; ---link-hover-color: #c3d6ff; ---link-hover-color-rgb: 195, 214, 255; +--link-hover-color: #d8b4fe; +--link-hover-color-rgb: 216, 180, 254; --link-active-color: var(--link-color); /* ===== OFFCANVAS ===== */ @@ -52,7 +53,7 @@ color-scheme: dark; --navbar-padding-y: 0.5rem; --navbar-color: var(--nav-text-color); --navbar-active-color: var(--mainmenu-nav-link-color); ---navbar-disabled-color: #6c757d; +--navbar-disabled-color: #475569; --navbar-brand-padding-y: 0.3125rem; --navbar-brand-margin-end: 1rem; --navbar-brand-font-size: 1.25rem; @@ -71,7 +72,7 @@ color-scheme: dark; --nav-link-font-weight: 400; --nav-link-color: var(--nav-text-color); --nav-link-active-color: var(--mainmenu-nav-link-color); ---nav-link-disabled-color: #6c757d; +--nav-link-disabled-color: #475569; /* ===== TYPOGRAPHY & BODY ===== */ --font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; @@ -80,22 +81,22 @@ color-scheme: dark; --body-font-size: 1rem; --body-font-weight: 400; --body-line-height: 1.5; ---body-color: #e6ebf1; ---body-color-rgb: 230, 235, 241; ---body-bg: #0e1318; ---body-bg-rgb: 14, 19, 24; +--body-color: #e2e8f0; +--body-color-rgb: 226, 232, 240; +--body-bg: #0f172a; +--body-bg-rgb: 15, 23, 42; --heading-color: #f1f5f9; --emphasis-color: #fff; --emphasis-color-rgb: 255, 255, 255; ---secondary-color: #e6ebf1bf; ---secondary-color-rgb: 230, 235, 241; ---tertiary-color: #e6ebf180; ---tertiary-color-rgb: 230, 235, 241; ---muted-color: #6d757e; ---code-color: #ff7abd; ---code-color-ink: var(--code-color, #e93f8e); ---highlight-color: #111; ---highlight-bg: #ffe28a1a; +--secondary-color: #cbd5e1; +--secondary-color-rgb: 203, 213, 225; +--tertiary-color: #94a3b8; +--tertiary-color-rgb: 148, 163, 184; +--muted-color: #64748b; +--code-color: #e879f9; +--code-color-ink: var(--code-color, #e879f9); +--highlight-color: #0f172a; +--highlight-bg: #fef08a1a; /* ===== LAYOUT & SPACING ===== */ --padding-x: 1rem; @@ -103,18 +104,18 @@ color-scheme: dark; --bg-opacity: 1; --nav-toggle-size: 3rem; --gradient: linear-gradient(180deg, #ffffff26, #fff0); ---secondary-bg: #151b22; ---secondary-bg-rgb: 21, 27, 34; ---tertiary-bg: #10151b; ---tertiary-bg-rgb: 16, 21, 27; ---hr-color: var(--border-color, #dfe3e7); ---border-color-soft: var(--border-color, #dfe3e7); ---kbd-bg: var(--secondary-bg, #eaedf0); ---kbd-ink: var(--body-bg, #fff); ---toc-bg: var(--secondary-bg, #eaedf0); ---toc-ink: var(--color-primary, #112855); ---selection-bg: var(--highlight-bg, #fbeea8); ---selection-ink: var(--body-color, #22262a); +--secondary-bg: #1e293b; +--secondary-bg-rgb: 30, 41, 59; +--tertiary-bg: #334155; +--tertiary-bg-rgb: 51, 65, 85; +--hr-color: var(--border-color, #334155); +--border-color-soft: var(--border-color, #334155); +--kbd-bg: var(--secondary-bg, #1e293b); +--kbd-ink: var(--body-bg, #0f172a); +--toc-bg: var(--secondary-bg, #1e293b); +--toc-ink: var(--color-primary, #14b8a6); +--selection-bg: var(--highlight-bg, #fef08a1a); +--selection-ink: var(--body-color, #e2e8f0); --border: 5px; /* ===== BREAKPOINTS ===== */ @@ -125,71 +126,71 @@ color-scheme: dark; --bp-xl: 1200px; /* ===== BOOTSTRAP PALETTE ===== */ ---primary: #010156; ---secondary: #48525d; ---success: #4aa664; ---info: #4f7aa0; ---warning: #c77a00; ---danger: #c23a31; ---light: #1b2027; ---dark: #0f1318; ---primary-rgb: 1,1,86; ---secondary-rgb: 72,82,93; ---success-rgb: 74,166,100; ---info-rgb: 79,122,160; ---warning-rgb: 199,122,0; ---danger-rgb: 194,58,49; ---light-rgb: 27,32,39; ---dark-rgb: 15,19,24; ---primary-text-emphasis: #c7ccff; ---secondary-text-emphasis: #cfd6de; ---success-text-emphasis: #bde8c9; ---info-text-emphasis: #bcd6ee; ---warning-text-emphasis: #ffd9a6; ---danger-text-emphasis: #ffb7b2; ---light-text-emphasis: #d2d8df; ---dark-text-emphasis: #d2d8df; ---primary-bg-subtle: #0b1030; ---secondary-bg-subtle: #1e2430; ---success-bg-subtle: #0f2a1b; ---info-bg-subtle: #0d2232; ---warning-bg-subtle: #2a1e06; ---danger-bg-subtle: #2d1110; ---light-bg-subtle: #12161d; ---dark-bg-subtle: #1e2430; ---primary-border-subtle: #2b3a7a; ---secondary-border-subtle: #2b323b; ---success-border-subtle: #2b5b40; ---info-border-subtle: #254861; ---warning-border-subtle: #5a3c0e; ---danger-border-subtle: #5c2723; ---light-border-subtle: #222831; ---dark-border-subtle: #2b323b; +--primary: #14b8a6; +--secondary: #64748b; +--success: #34d399; +--info: #38bdf8; +--warning: #fbbf24; +--danger: #fb7185; +--light: #334155; +--dark: #0f172a; +--primary-rgb: 20, 184, 166; +--secondary-rgb: 100, 116, 139; +--success-rgb: 52, 211, 153; +--info-rgb: 56, 189, 248; +--warning-rgb: 251, 191, 36; +--danger-rgb: 251, 113, 133; +--light-rgb: 51, 65, 85; +--dark-rgb: 15, 23, 42; +--primary-text-emphasis: #99f6e4; +--secondary-text-emphasis: #cbd5e1; +--success-text-emphasis: #a7f3d0; +--info-text-emphasis: #bae6fd; +--warning-text-emphasis: #fde68a; +--danger-text-emphasis: #fecdd3; +--light-text-emphasis: #cbd5e1; +--dark-text-emphasis: #cbd5e1; +--primary-bg-subtle: #134e4a; +--secondary-bg-subtle: #1e293b; +--success-bg-subtle: #064e3b; +--info-bg-subtle: #0c4a6e; +--warning-bg-subtle: #78350f; +--danger-bg-subtle: #881337; +--light-bg-subtle: #1e293b; +--dark-bg-subtle: #0f172a; +--primary-border-subtle: #115e59; +--secondary-border-subtle: #334155; +--success-border-subtle: #065f46; +--info-border-subtle: #075985; +--warning-border-subtle: #92400e; +--danger-border-subtle: #9f1239; +--light-border-subtle: #334155; +--dark-border-subtle: #1e293b; /* ===== STANDARD COLORS ===== */ ---blue: #91a4ff; ---indigo: #b19cff; ---purple: #c0a5ff; ---pink: #ff8fc0; ---red: #ff7a73; ---orange: #ff9c4d; ---yellow: #ffd166; ---green: #78d694; ---teal: #76e3ff; ---cyan: #6fb7ff; +--blue: #60a5fa; +--indigo: #818cf8; +--purple: #c084fc; +--pink: #f472b6; +--red: #f87171; +--orange: #fb923c; +--yellow: #fbbf24; +--green: #34d399; +--teal: #2dd4bf; +--cyan: #22d3ee; --black: #000; --white: #fff; /* ===== GRAY SCALE ===== */ ---gray-100: #161a20; ---gray-200: #1b2027; ---gray-300: #222831; ---gray-400: #2b323b; ---gray-500: #36404a; ---gray-600: #48525d; ---gray-700: #5b6672; ---gray-800: #cfd6de; ---gray-900: #e6ebf1; +--gray-100: #1e293b; +--gray-200: #334155; +--gray-300: #475569; +--gray-400: #64748b; +--gray-500: #94a3b8; +--gray-600: #cbd5e1; +--gray-700: #e2e8f0; +--gray-800: #f1f5f9; +--gray-900: #f8fafc; --white-rgb: 255, 255, 255; --black-rgb: 0, 0, 0; @@ -201,73 +202,73 @@ color-scheme: dark; /* ===== CONTAINER BACKGROUNDS ===== */ /* Below Topbar Container */ ---container-below-topbar-bg-image: ; ---container-below-topbar-bg-color: ; +--container-below-topbar-bg-image: none; +--container-below-topbar-bg-color: transparent; --container-below-topbar-bg-position: center; --container-below-topbar-bg-attachment: fixed; --container-below-topbar-bg-repeat: no-repeat; --container-below-topbar-bg-size: cover; ---container-below-topbar-border: ; ---container-below-topbar-border-radius: ; +--container-below-topbar-border: none; +--container-below-topbar-border-radius: 0; /* Top A Container */ ---container-top-a-bg-image: ; ---container-top-a-bg-color: ; +--container-top-a-bg-image: none; +--container-top-a-bg-color: transparent; --container-top-a-bg-position: center; --container-top-a-bg-attachment: fixed; --container-top-a-bg-repeat: no-repeat; --container-top-a-bg-size: cover; ---container-top-a-border: ; ---container-top-a-border-radius: ; +--container-top-a-border: none; +--container-top-a-border-radius: 0; /* Top B Container */ ---container-top-b-bg-image: ; ---container-top-b-bg-color: ; +--container-top-b-bg-image: none; +--container-top-b-bg-color: transparent; --container-top-b-bg-position: center; --container-top-b-bg-attachment: fixed; --container-top-b-bg-repeat: no-repeat; --container-top-b-bg-size: cover; ---container-top-b-border: ; ---container-top-b-border-radius: ; +--container-top-b-border: none; +--container-top-b-border-radius: 0; /* TOC Container */ ---container-toc-bg: ; ---container-toc-color: #dbe3ff; +--container-toc-bg: var(--secondary-bg); +--container-toc-color: #99f6e4; /* Sidebar Container */ ---container-sidebar-bg-image: ; ---container-sidebar-bg-color: ; +--container-sidebar-bg-image: none; +--container-sidebar-bg-color: transparent; --container-sidebar-bg-position: center; --container-sidebar-bg-attachment: scroll; --container-sidebar-bg-repeat: repeat; --container-sidebar-bg-size: auto; ---container-sidebar-border: ; ---container-sidebar-border-radius: ; +--container-sidebar-border: none; +--container-sidebar-border-radius: 0; /* Bottom A Container */ ---container-bottom-a-bg-image: ; ---container-bottom-a-bg-color: ; +--container-bottom-a-bg-image: none; +--container-bottom-a-bg-color: transparent; --container-bottom-a-bg-position: center; --container-bottom-a-bg-attachment: fixed; --container-bottom-a-bg-repeat: no-repeat; --container-bottom-a-bg-size: cover; ---container-bottom-a-border: ; +--container-bottom-a-border: none; --container-bottom-a-border-radius: 5px; /* Bottom B Container */ ---container-bottom-b-bg-image: ; ---container-bottom-b-bg-color: ; +--container-bottom-b-bg-image: none; +--container-bottom-b-bg-color: transparent; --container-bottom-b-bg-position: center; --container-bottom-b-bg-attachment: fixed; --container-bottom-b-bg-repeat: no-repeat; --container-bottom-b-bg-size: cover; ---container-bottom-b-border: ; ---container-bottom-b-border-radius: ; +--container-bottom-b-border: none; +--container-bottom-b-border-radius: 0; /* ===== BORDERS ===== */ --border-width: 1px; --border-style: solid; ---border-color: #2b323b; +--border-color: #334155; --border-color-translucent: #ffffff26; --border-radius: .25rem; --border-radius-sm: .2rem; @@ -286,19 +287,19 @@ color-scheme: dark; /* ===== FOCUS & FORMS ===== */ --focus-ring-width: .25rem; --focus-ring-opacity: .6; ---focus-ring-color: #5472ff66; ---input-color: #e6ebf1; ---input-bg: #1a2332; ---input-border-color: #3a4250; ---input-focus-border-color: #5472ff; ---input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); ---input-placeholder-color: #8894aa; ---input-disabled-bg: #0f1318; ---input-disabled-border-color: #2b323b; ---form-valid-color: #78d694; ---form-valid-border-color: #78d694; ---form-invalid-color: #ff8e86; ---form-invalid-border-color: #ff8e86; +--focus-ring-color: #14b8a666; +--input-color: #e2e8f0; +--input-bg: #1e293b; +--input-border-color: #475569; +--input-focus-border-color: #14b8a6; +--input-focus-box-shadow: 0 0 0 0.25rem rgba(20, 184, 166, 0.25); +--input-placeholder-color: #94a3b8; +--input-disabled-bg: #0f172a; +--input-disabled-border-color: #334155; +--form-valid-color: #34d399; +--form-valid-border-color: #34d399; +--form-invalid-color: #fb7185; +--form-invalid-border-color: #fb7185; /* ===== BUTTONS ===== */ --btn-border-radius: var(--border-radius); @@ -329,7 +330,7 @@ color-scheme: dark; --vm-surface-2: var(--tertiary-bg); --vm-text: var(--body-color); --vm-text-strong: #ffffff; ---vm-text-muted: var(--gray-700); +--vm-text-muted: var(--gray-600); --vm-border: var(--border-color); --vm-price-color: var(--success); @@ -403,19 +404,19 @@ color-scheme: dark; --vm-vendor-menu-hover-bg: var(--tertiary-bg); /* ===== GABLE ===== */ ---gab-blue: #4d9fff; ---gab-green: #5cb85c; ---gab-red: #ff6b6b; ---gab-orange: #ff9f5a; ---gab-gray1: #868e96; ---gab-gray2: #adb5bd; ---gab-gray3: #ced4da; +--gab-blue: #60a5fa; +--gab-green: #34d399; +--gab-red: #f87171; +--gab-orange: #fb923c; +--gab-gray1: #94a3b8; +--gab-gray2: #cbd5e1; +--gab-gray3: #e2e8f0; } .btn { --btn-padding-x: 1rem; --btn-padding-y: 0.6rem; ---btn-font-family: ; +--btn-font-family: inherit; --btn-font-size: 1rem; --btn-font-weight: 400; --btn-line-height: 1.5; @@ -454,60 +455,60 @@ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border- } .btn-primary { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(240, 98%, 17%); ---btn-border-color: hsl(240, 98%, 17%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #010149; ---btn-hover-border-color: #010145; ---btn-focus-shadow-rgb: 84, 114, 255; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #010145; ---btn-active-border-color: #010141; +--btn-color: #ffffff; +--btn-bg: #14b8a6; +--btn-border-color: #14b8a6; +--btn-hover-color: #ffffff; +--btn-hover-bg: #0d9488; +--btn-hover-border-color: #0d9488; +--btn-focus-shadow-rgb: 20, 184, 166; +--btn-active-color: #ffffff; +--btn-active-bg: #0d9488; +--btn-active-border-color: #0f766e; } .btn-secondary { --btn-color: var(--nav-text-color); --btn-bg: var(--nav-bg-color); ---btn-border-color: #3a4250; +--btn-border-color: #475569; --btn-hover-color: #fff; ---btn-hover-bg: #1b2a55; ---btn-hover-border-color: #162448; ---btn-focus-shadow-rgb: 84, 114, 255; +--btn-hover-bg: #115e59; +--btn-hover-border-color: #134e4a; +--btn-focus-shadow-rgb: 20, 184, 166; --btn-active-color: #fff; ---btn-active-bg: #162448; ---btn-active-border-color: #12203f; +--btn-active-bg: #134e4a; +--btn-active-border-color: #134e4a; } .btn-outline-light { ---btn-color: #e6ebf1; ---btn-border-color: #e6ebf1; ---btn-hover-color: #111; ---btn-hover-bg: #e6ebf1; ---btn-hover-border-color: #e6ebf1; ---btn-active-color: #111; ---btn-active-bg: #d7dce2; ---btn-active-border-color: #d7dce2; +--btn-color: #e2e8f0; +--btn-border-color: #e2e8f0; +--btn-hover-color: #0f172a; +--btn-hover-bg: #e2e8f0; +--btn-hover-border-color: #e2e8f0; +--btn-active-color: #0f172a; +--btn-active-bg: #cbd5e1; +--btn-active-border-color: #cbd5e1; --gradient: none; } .btn-link { --btn-font-weight: 400; ---btn-color: var(--link-color); +--btn-color: var(--color-link); --btn-bg: transparent; --btn-border-color: transparent; --btn-hover-color: var(--link-hover-color); --btn-hover-border-color: transparent; --btn-active-color: var(--link-hover-color); --btn-active-border-color: transparent; ---btn-disabled-color: #6d7781; +--btn-disabled-color: #64748b; --btn-disabled-border-color: transparent; --btn-box-shadow: none; ---btn-focus-shadow-rgb: 84, 114, 255; +--btn-focus-shadow-rgb: 20, 184, 166; text-decoration: underline; } .btn-secondary { ---btn-color: var(--nav-text-color); +--btn-color: var(--color-hover); --btn-bg: var(--nav-bg-color); } diff --git a/src/media/css/colors/dark/colors_standard.css b/src/media/css/colors/dark/colors_standard.css index 4b34ea1..bb4d44d 100644 --- a/src/media/css/colors/dark/colors_standard.css +++ b/src/media/css/colors/dark/colors_standard.css @@ -202,68 +202,68 @@ color-scheme: dark; /* ===== CONTAINER BACKGROUNDS ===== */ /* Below Topbar Container */ ---container-below-topbar-bg-image: ; ---container-below-topbar-bg-color: ; +--container-below-topbar-bg-image: none; +--container-below-topbar-bg-color: transparent; --container-below-topbar-bg-position: center; --container-below-topbar-bg-attachment: fixed; --container-below-topbar-bg-repeat: no-repeat; --container-below-topbar-bg-size: cover; ---container-below-topbar-border: ; ---container-below-topbar-border-radius: ; +--container-below-topbar-border: none; +--container-below-topbar-border-radius: 0; /* Top A Container */ ---container-top-a-bg-image: ; ---container-top-a-bg-color: ; +--container-top-a-bg-image: none; +--container-top-a-bg-color: transparent; --container-top-a-bg-position: center; --container-top-a-bg-attachment: fixed; --container-top-a-bg-repeat: no-repeat; --container-top-a-bg-size: cover; ---container-top-a-border: ; ---container-top-a-border-radius: ; +--container-top-a-border: none; +--container-top-a-border-radius: 0; /* Top B Container */ ---container-top-b-bg-image: ; ---container-top-b-bg-color: ; +--container-top-b-bg-image: none; +--container-top-b-bg-color: transparent; --container-top-b-bg-position: center; --container-top-b-bg-attachment: fixed; --container-top-b-bg-repeat: no-repeat; --container-top-b-bg-size: cover; ---container-top-b-border: ; ---container-top-b-border-radius: ; +--container-top-b-border: none; +--container-top-b-border-radius: 0; /* TOC Container */ ---container-toc-bg: ; +--container-toc-bg: var(--secondary-bg); --container-toc-color: #dbe3ff; /* Sidebar Container */ ---container-sidebar-bg-image: ; ---container-sidebar-bg-color: ; +--container-sidebar-bg-image: none; +--container-sidebar-bg-color: transparent; --container-sidebar-bg-position: center; --container-sidebar-bg-attachment: scroll; --container-sidebar-bg-repeat: repeat; --container-sidebar-bg-size: auto; ---container-sidebar-border: ; ---container-sidebar-border-radius: ; +--container-sidebar-border: none; +--container-sidebar-border-radius: 0; /* Bottom A Container */ ---container-bottom-a-bg-image: ; ---container-bottom-a-bg-color: ; +--container-bottom-a-bg-image: none; +--container-bottom-a-bg-color: transparent; --container-bottom-a-bg-position: center; --container-bottom-a-bg-attachment: fixed; --container-bottom-a-bg-repeat: no-repeat; --container-bottom-a-bg-size: cover; ---container-bottom-a-border: ; +--container-bottom-a-border: none; --container-bottom-a-border-radius: 5px; /* Bottom B Container */ ---container-bottom-b-bg-image: ; ---container-bottom-b-bg-color: ; +--container-bottom-b-bg-image: none; +--container-bottom-b-bg-color: transparent; --container-bottom-b-bg-position: center; --container-bottom-b-bg-attachment: fixed; --container-bottom-b-bg-repeat: no-repeat; --container-bottom-b-bg-size: cover; ---container-bottom-b-border: ; ---container-bottom-b-border-radius: ; +--container-bottom-b-border: none; +--container-bottom-b-border-radius: 0; /* ===== BORDERS ===== */ --border-width: 1px; @@ -416,7 +416,7 @@ color-scheme: dark; .btn { --btn-padding-x: 1rem; --btn-padding-y: 0.6rem; - --btn-font-family: ; + --btn-font-family: inherit; --btn-font-size: 1rem; --btn-font-weight: 400; --btn-line-height: 1.5; diff --git a/src/media/css/colors/light/colors_alternative.css b/src/media/css/colors/light/colors_alternative.css index 93e923e..98b92b7 100644 --- a/src/media/css/colors/light/colors_alternative.css +++ b/src/media/css/colors/light/colors_alternative.css @@ -12,34 +12,34 @@ INGROUP: MokoCassiopeia PATH: ./media/templates/site/mokocassiopeia/css/global/light/colors_alternative.css VERSION: 03.05.00 - BRIEF: Alternative light mode color definitions for MokoCassiopeia template + BRIEF: Alternative light mode color definitions (Teal & Purple) for MokoCassiopeia template */ /* ----------------------------------------------- - * LIGHT THEME + * ALTERNATIVE LIGHT THEME - TEAL & PURPLE * --------------------------------------------- */ :root[data-bs-theme="light"] { color-scheme: light; /* ===== BRAND & THEME COLORS ===== */ ---color-primary: #112855; ---accent-color-primary: #3f8ff0; ---accent-color-secondary: #3f8ff0; +--color-primary: #0d9488; +--accent-color-primary: #a855f7; +--accent-color-secondary: #c084fc; /* ===== NAVIGATION ===== */ --mainmenu-nav-link-color: white; ---nav-text-color: var(--mainmenu-nav-link-color); ---nav-bg-color: var(--color-link); +--nav-text-color: white; +--nav-bg-color: #0d9488; /* ===== LINKS ===== */ ---color-link: #224FAA; ---color-hover: var(--accent-color-primary); ---link-color: #224faa; ---link-color-rgb: 34, 79, 170; +--color-link: #7c3aed; +--color-hover: #a855f7; +--link-color: #7c3aed; +--link-color-rgb: 124, 58, 237; --link-decoration: underline; ---link-hover-color: #424077; ---link-hover-color-rgb: 66, 64, 119; +--link-hover-color: #a855f7; +--link-hover-color-rgb: 168, 85, 247; --link-active-color: var(--link-color); /* ===== OFFCANVAS ===== */ @@ -52,7 +52,7 @@ color-scheme: light; --navbar-padding-y: 0.5rem; --navbar-color: var(--nav-text-color); --navbar-active-color: var(--mainmenu-nav-link-color); ---navbar-disabled-color: #6c757d; +--navbar-disabled-color: #94a3b8; --navbar-brand-padding-y: 0.3125rem; --navbar-brand-margin-end: 1rem; --navbar-brand-font-size: 1.25rem; @@ -71,7 +71,7 @@ color-scheme: light; --nav-link-font-weight: 400; --nav-link-color: var(--nav-text-color); --nav-link-active-color: var(--mainmenu-nav-link-color); ---nav-link-disabled-color: #6c757d; +--nav-link-disabled-color: #94a3b8; /* ===== TYPOGRAPHY & BODY ===== */ --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; @@ -80,22 +80,22 @@ color-scheme: light; --body-font-size: 1rem; --body-font-weight: 400; --body-line-height: 1.5; ---body-color: #22262a; ---body-color-rgb: 34, 38, 42; +--body-color: #1e293b; +--body-color-rgb: 30, 41, 59; --body-bg: #fff; --body-bg-rgb: 255, 255, 255; --heading-color: inherit; ---emphasis-color: #000; ---emphasis-color-rgb: 0, 0, 0; ---secondary-color: #22262abf; ---secondary-color-rgb: 34, 38, 42; ---tertiary-color: #22262a80; ---tertiary-color-rgb: 34, 38, 42; ---muted-color: #6d757e; ---code-color: #e93f8e; ---code-color-ink: var(--code-color, #e93f8e); ---highlight-color: #22262a; ---highlight-bg: #fbeea8; +--emphasis-color: #0f172a; +--emphasis-color-rgb: 15, 23, 42; +--secondary-color: #475569; +--secondary-color-rgb: 71, 85, 105; +--tertiary-color: #64748b; +--tertiary-color-rgb: 100, 116, 139; +--muted-color: #64748b; +--code-color: #c026d3; +--code-color-ink: var(--code-color, #c026d3); +--highlight-color: #1e293b; +--highlight-bg: #fde68a; /* ===== LAYOUT & SPACING ===== */ --padding-x: 1rem; @@ -103,18 +103,18 @@ color-scheme: light; --bg-opacity: 1; --nav-toggle-size: 3rem; --gradient: linear-gradient(180deg, #ffffff26, #fff0); ---secondary-bg: #eaedf0; ---secondary-bg-rgb: 234, 237, 240; ---tertiary-bg: #f9fafb; ---tertiary-bg-rgb: 249, 250, 251; ---hr-color: var(--border-color, #dfe3e7); ---border-color-soft: var(--border-color, #dfe3e7); ---kbd-bg: var(--secondary-bg, #eaedf0); +--secondary-bg: #f1f5f9; +--secondary-bg-rgb: 241, 245, 249; +--tertiary-bg: #f8fafc; +--tertiary-bg-rgb: 248, 250, 252; +--hr-color: var(--border-color, #e2e8f0); +--border-color-soft: var(--border-color, #e2e8f0); +--kbd-bg: var(--secondary-bg, #f1f5f9); --kbd-ink: var(--body-bg, #fff); ---toc-bg: var(--secondary-bg, #eaedf0); ---toc-ink: var(--color-primary, #112855); ---selection-bg: var(--highlight-bg, #fbeea8); ---selection-ink: var(--body-color, #22262a); +--toc-bg: var(--secondary-bg, #f1f5f9); +--toc-ink: var(--color-primary, #0d9488); +--selection-bg: var(--highlight-bg, #fde68a); +--selection-ink: var(--body-color, #1e293b); --border: 5px; /* ===== BREAKPOINTS ===== */ @@ -125,71 +125,71 @@ color-scheme: light; --bp-xl: 1200px; /* ===== BOOTSTRAP PALETTE ===== */ ---primary: #010156; ---secondary: #6d757e; ---success: #448344; ---info: #30638d; ---warning: #ad6200; ---danger: #a51f18; ---light: #f9fafb; ---dark: #353b41; ---primary-rgb: 1, 1, 86; ---secondary-rgb: 109, 117, 126; ---success-rgb: 68, 131, 68; ---info-rgb: 48, 99, 141; ---warning-rgb: 173, 98, 0; ---danger-rgb: 165, 31, 24; ---light-rgb: 249, 250, 251; ---dark-rgb: 53, 59, 65; ---primary-text-emphasis: #002; ---secondary-text-emphasis: #2c2f32; ---success-text-emphasis: #1b351b; ---info-text-emphasis: #132838; ---warning-text-emphasis: #452700; ---danger-text-emphasis: #420c09; ---light-text-emphasis: #484f56; ---dark-text-emphasis: #484f56; ---primary-bg-subtle: #ccd; ---secondary-bg-subtle: #e2e3e5; ---success-bg-subtle: #dae6da; ---info-bg-subtle: #d6e0e8; ---warning-bg-subtle: #efe0cc; ---danger-bg-subtle: #edd2d1; +--primary: #0d9488; +--secondary: #64748b; +--success: #10b981; +--info: #0ea5e9; +--warning: #f59e0b; +--danger: #f43f5e; +--light: #f8fafc; +--dark: #334155; +--primary-rgb: 13, 148, 136; +--secondary-rgb: 100, 116, 139; +--success-rgb: 16, 185, 129; +--info-rgb: 14, 165, 233; +--warning-rgb: 245, 158, 11; +--danger-rgb: 244, 63, 94; +--light-rgb: 248, 250, 252; +--dark-rgb: 51, 65, 85; +--primary-text-emphasis: #0f766e; +--secondary-text-emphasis: #334155; +--success-text-emphasis: #047857; +--info-text-emphasis: #0369a1; +--warning-text-emphasis: #c2410c; +--danger-text-emphasis: #be123c; +--light-text-emphasis: #475569; +--dark-text-emphasis: #475569; +--primary-bg-subtle: #ccfbf1; +--secondary-bg-subtle: #e2e8f0; +--success-bg-subtle: #d1fae5; +--info-bg-subtle: #e0f2fe; +--warning-bg-subtle: #fef3c7; +--danger-bg-subtle: #ffe4e6; --light-bg-subtle: #fcfcfd; ---dark-bg-subtle: #ced4da; ---primary-border-subtle: #99b; ---secondary-border-subtle: #c5c8cb; ---success-border-subtle: #b4ceb4; ---info-border-subtle: #acc1d1; ---warning-border-subtle: #dec099; ---danger-border-subtle: #dba5a2; ---light-border-subtle: #eaedf0; ---dark-border-subtle: #adb5bd; +--dark-bg-subtle: #cbd5e1; +--primary-border-subtle: #99f6e4; +--secondary-border-subtle: #cbd5e1; +--success-border-subtle: #a7f3d0; +--info-border-subtle: #bae6fd; +--warning-border-subtle: #fde68a; +--danger-border-subtle: #fecdd3; +--light-border-subtle: #f1f5f9; +--dark-border-subtle: #94a3b8; /* ===== STANDARD COLORS ===== */ ---blue: #010156; ---indigo: #6812f3; ---purple: #6f42c2; ---pink: #e93f8e; ---red: #a51f18; ---orange: #fd7e17; ---yellow: #ad6200; ---green: #448344; ---teal: #5abfdd; ---cyan: #30638d; +--blue: #3b82f6; +--indigo: #6366f1; +--purple: #a855f7; +--pink: #ec4899; +--red: #ef4444; +--orange: #f97316; +--yellow: #f59e0b; +--green: #10b981; +--teal: #14b8a6; +--cyan: #06b6d4; --black: #000; --white: #fff; /* ===== GRAY SCALE ===== */ ---gray-100: #f9fafb; ---gray-200: #eaedf0; ---gray-300: #dfe3e7; ---gray-400: #ced4da; ---gray-500: #adb5bd; ---gray-600: #6d757e; ---gray-700: #484f56; ---gray-800: #353b41; ---gray-900: #22262a; +--gray-100: #f8fafc; +--gray-200: #f1f5f9; +--gray-300: #e2e8f0; +--gray-400: #cbd5e1; +--gray-500: #94a3b8; +--gray-600: #64748b; +--gray-700: #475569; +--gray-800: #334155; +--gray-900: #1e293b; --white-rgb: 255, 255, 255; --black-rgb: 0, 0, 0; @@ -201,73 +201,73 @@ color-scheme: light; /* ===== CONTAINER BACKGROUNDS ===== */ /* Below Topbar Container */ ---container-below-topbar-bg-image: ; ---container-below-topbar-bg-color ; +--container-below-topbar-bg-image: none; +--container-below-topbar-bg-color: transparent; --container-below-topbar-bg-position: auto; --container-below-topbar-bg-attachment: fixed; --container-below-topbar-bg-repeat: repeat; --container-below-topbar-bg-size: auto; ---container-below-topbar-border: ; ---container-below-topbar-border-radius: ; +--container-below-topbar-border: none; +--container-below-topbar-border-radius: 0; /* Top A Container */ ---container-top-a-bg-image: ; ---container-top-a-bg-color: ; +--container-top-a-bg-image: none; +--container-top-a-bg-color: transparent; --container-top-a-bg-position: auto; --container-top-a-bg-attachment: fixed; --container-top-a-bg-repeat: repeat; --container-top-a-bg-size: auto; ---container-top-a-border: ; ---container-top-a-border-radius: ; +--container-top-a-border: none; +--container-top-a-border-radius: 0; /* Top B Container */ ---container-top-b-bg-image: ; ---container-top-b-bg-color: ; +--container-top-b-bg-image: none; +--container-top-b-bg-color: transparent; --container-top-b-bg-position: auto; --container-top-b-bg-attachment: fixed; --container-top-b-bg-repeat: repeat; --container-top-b-bg-size: auto; ---container-top-b-border: ; ---container-top-b-border-radius: ; +--container-top-b-border: none; +--container-top-b-border-radius: 0; /* TOC Container */ --container-toc-bg: var(--mainmenu-nav-link-color); --container-toc-color: var(--color-primary); /* Sidebar Container */ ---container-sidebar-bg-image: ; ---container-sidebar-bg-color: ; +--container-sidebar-bg-image: none; +--container-sidebar-bg-color: transparent; --container-sidebar-bg-position: auto; --container-sidebar-bg-attachment: scroll; --container-sidebar-bg-repeat: repeat; --container-sidebar-bg-size: auto; ---container-sidebar-border: ; ---container-sidebar-border-radius: ; +--container-sidebar-border: none; +--container-sidebar-border-radius: 0; /* Bottom A Container */ ---container-bottom-a-bg-image: ; ---container-bottom-a-bg-color: ; +--container-bottom-a-bg-image: none; +--container-bottom-a-bg-color: transparent; --container-bottom-a-bg-position: auto; --container-bottom-a-bg-attachment: fixed; --container-bottom-a-bg-repeat: repeat; --container-bottom-a-bg-size: auto; ---container-bottom-a-border: ; ---container-bottom-a-border-radius: ; +--container-bottom-a-border: none; +--container-bottom-a-border-radius: 0; /* Bottom B Container */ ---container-bottom-b-bg-image: ; ---container-bottom-b-bg-color: ; +--container-bottom-b-bg-image: none; +--container-bottom-b-bg-color: transparent; --container-bottom-b-bg-position: auto; --container-bottom-b-bg-attachment: fixed; --container-bottom-b-bg-repeat: repeat; --container-bottom-b-bg-size: auto; ---container-bottom-b-border: ; ---container-bottom-b-border-radius: ; +--container-bottom-b-border: none; +--container-bottom-b-border-radius: 0; /* ===== BORDERS ===== */ --border-width: 1px; --border-style: solid; ---border-color: #dfe3e7; +--border-color: #e2e8f0; --border-color-translucent: #0000002d; --border-radius: .25rem; --border-radius-sm: .2rem; @@ -278,27 +278,27 @@ color-scheme: light; --border-radius-pill: 50rem; /* ===== SHADOWS ===== */ ---box-shadow: 0 .5rem 1rem #00000026; ---box-shadow-sm: 0 .125rem .25rem #00000013; ---box-shadow-lg: 0 1rem 3rem #0000002d; ---box-shadow-inset: inset 0 1px 2px #00000013; +--box-shadow: 0 .5rem 1rem #0000001a; +--box-shadow-sm: 0 .125rem .25rem #0000000d; +--box-shadow-lg: 0 1rem 3rem #00000026; +--box-shadow-inset: inset 0 1px 2px #0000000d; /* ===== FOCUS & FORMS ===== */ --focus-ring-width: .25rem; --focus-ring-opacity: .25; ---focus-ring-color: #01015640; ---input-color: hsl(210, 11%, 15%); ---input-bg: hsl(210, 20%, 98%); ---input-border-color: hsl(210, 14%, 83%); ---input-focus-border-color: #8894aa; ---input-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); ---input-placeholder-color: hsl(210, 7%, 46%); ---input-disabled-bg: hsl(210, 16%, 93%); ---input-disabled-border-color: hsl(210, 14%, 83%); ---form-valid-color: #448344; ---form-valid-border-color: #448344; ---form-invalid-color: #a51f18; ---form-invalid-border-color: #a51f18; +--focus-ring-color: #0d948840; +--input-color: #1e293b; +--input-bg: #f8fafc; +--input-border-color: #cbd5e1; +--input-focus-border-color: #14b8a6; +--input-focus-box-shadow: 0 0 0 0.25rem rgba(13, 148, 136, 0.25); +--input-placeholder-color: #64748b; +--input-disabled-bg: #e2e8f0; +--input-disabled-border-color: #cbd5e1; +--form-valid-color: #10b981; +--form-valid-border-color: #10b981; +--form-invalid-color: #f43f5e; +--form-invalid-border-color: #f43f5e; /* ===== BUTTONS ===== */ --btn-border-radius: var(--border-radius); @@ -326,10 +326,10 @@ color-scheme: light; /* ===== VIRTUEMART (VM) ===== */ /* VM Surfaces */ --vm-surface: #ffffff; ---vm-surface-2: #f8f9fa; +--vm-surface-2: #f8fafc; --vm-text: var(--body-color); ---vm-text-strong: #000000; ---vm-text-muted: #6c757d; +--vm-text-strong: #0f172a; +--vm-text-muted: #64748b; --vm-border: var(--border-color); --vm-price-color: var(--success); @@ -403,340 +403,340 @@ color-scheme: light; --vm-vendor-menu-hover-bg: var(--secondary-bg); /* ===== GABLE ===== */ ---gab-blue: #0066cc; ---gab-green: #28a745; ---gab-red: #dc3545; ---gab-orange: #fd7e14; ---gab-gray1: #495057; ---gab-gray2: #6c757d; ---gab-gray3: #adb5bd; +--gab-blue: #3b82f6; +--gab-green: #10b981; +--gab-red: #ef4444; +--gab-orange: #f97316; +--gab-gray1: #475569; +--gab-gray2: #64748b; +--gab-gray3: #94a3b8; } .btn { - --btn-padding-x: 1rem; - --btn-padding-y: 0.6rem; - --btn-font-family: ; - --btn-font-size: 1rem; - --btn-font-weight: 400; - --btn-line-height: 1.5; - --btn-color: hsl(210, 11%, 15%); - --btn-bg: transparent; - --btn-border-width: 1px; - --btn-border-color: transparent; - --btn-border-radius: 0.25rem; - --btn-active-border-color: transparent; - --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); - --btn-disabled-opacity: 0.65; - --btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); - display: inline-block; - padding: var(--btn-padding-y) var(--btn-padding-x); - font-family: var(--btn-font-family); - font-size: var(--btn-font-size); - font-weight: var(--btn-font-weight); - line-height: var(--btn-line-height); - color: var(--btn-color); - text-align: center; - text-decoration: none; - vertical-align: middle; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border: var(--btn-border-width) solid var(--btn-border-color); - border-radius: var(--btn-border-radius); - background-color: var(--btn-bg); - -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - -o-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; - 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; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; +--btn-padding-x: 1rem; +--btn-padding-y: 0.6rem; +--btn-font-family: inherit; +--btn-font-size: 1rem; +--btn-font-weight: 400; +--btn-line-height: 1.5; +--btn-color: #1e293b; +--btn-bg: transparent; +--btn-border-width: 1px; +--btn-border-color: transparent; +--btn-border-radius: 0.25rem; +--btn-active-border-color: transparent; +--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); +--btn-disabled-opacity: 0.65; +--btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); +display: inline-block; +padding: var(--btn-padding-y) var(--btn-padding-x); +font-family: var(--btn-font-family); +font-size: var(--btn-font-size); +font-weight: var(--btn-font-weight); +line-height: var(--btn-line-height); +color: var(--btn-color); +text-align: center; +text-decoration: none; +vertical-align: middle; +cursor: pointer; +-webkit-user-select: none; +-moz-user-select: none; +-ms-user-select: none; +user-select: none; +border: var(--btn-border-width) solid var(--btn-border-color); +border-radius: var(--btn-border-radius); +background-color: var(--btn-bg); +-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; +transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; +-o-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; +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; +transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; } .btn-primary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(240, 98%, 17%); - --btn-border-color: hsl(240, 98%, 17%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #010149; - --btn-hover-border-color: #010145; - --btn-focus-shadow-rgb: 39, 39, 111; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #010145; - --btn-active-border-color: #010141; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(240, 98%, 17%); - --btn-disabled-border-color: hsl(240, 98%, 17%); +--btn-color: #ffffff; +--btn-bg: #0d9488; +--btn-border-color: #0d9488; +--btn-hover-color: #ffffff; +--btn-hover-bg: #0f766e; +--btn-hover-border-color: #0f766e; +--btn-focus-shadow-rgb: 13, 148, 136; +--btn-active-color: #ffffff; +--btn-active-bg: #0f766e; +--btn-active-border-color: #115e59; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #ffffff; +--btn-disabled-bg: #0d9488; +--btn-disabled-border-color: #0d9488; } .btn-secondary { - --btn-color: --nav-text-color; - --btn-bg: --nav-bg-color; - --btn-border-color: hsl(210, 7%, 46%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #5d636b; - --btn-hover-border-color: #575e65; - --btn-focus-shadow-rgb: gray; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #575e65; - --btn-active-border-color: #52585f; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(210, 7%, 46%); - --btn-disabled-border-color: hsl(210, 7%, 46%); +--btn-color: #ffffff; +--btn-bg: #64748b; +--btn-border-color: #64748b; +--btn-hover-color: #ffffff; +--btn-hover-bg: #475569; +--btn-hover-border-color: #475569; +--btn-focus-shadow-rgb: 100, 116, 139; +--btn-active-color: #ffffff; +--btn-active-bg: #475569; +--btn-active-border-color: #334155; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #ffffff; +--btn-disabled-bg: #64748b; +--btn-disabled-border-color: #64748b; } .btn-success { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(120, 32%, 39%); - --btn-border-color: hsl(120, 32%, 39%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #3a6f3a; - --btn-hover-border-color: #366936; - --btn-focus-shadow-rgb: 96, 150, 96; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #366936; - --btn-active-border-color: #336233; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(120, 32%, 39%); - --btn-disabled-border-color: hsl(120, 32%, 39%); +--btn-color: #ffffff; +--btn-bg: #10b981; +--btn-border-color: #10b981; +--btn-hover-color: #ffffff; +--btn-hover-bg: #059669; +--btn-hover-border-color: #059669; +--btn-focus-shadow-rgb: 16, 185, 129; +--btn-active-color: #ffffff; +--btn-active-bg: #059669; +--btn-active-border-color: #047857; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #ffffff; +--btn-disabled-bg: #10b981; +--btn-disabled-border-color: #10b981; } .btn-info { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(207, 49%, 37%); - --btn-border-color: hsl(207, 49%, 37%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #295478; - --btn-hover-border-color: #264f71; - --btn-focus-shadow-rgb: 79, 122, 158; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #264f71; - --btn-active-border-color: #244a6a; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(207, 49%, 37%); - --btn-disabled-border-color: hsl(207, 49%, 37%); +--btn-color: #ffffff; +--btn-bg: #0ea5e9; +--btn-border-color: #0ea5e9; +--btn-hover-color: #ffffff; +--btn-hover-bg: #0284c7; +--btn-hover-border-color: #0284c7; +--btn-focus-shadow-rgb: 14, 165, 233; +--btn-active-color: #ffffff; +--btn-active-bg: #0284c7; +--btn-active-border-color: #0369a1; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #ffffff; +--btn-disabled-bg: #0ea5e9; +--btn-disabled-border-color: #0ea5e9; } .btn-warning { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(34, 100%, 34%); - --btn-border-color: hsl(34, 100%, 34%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #935300; - --btn-hover-border-color: #8a4e00; - --btn-focus-shadow-rgb: 185, 122, 38; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #8a4e00; - --btn-active-border-color: #824a00; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(34, 100%, 34%); - --btn-disabled-border-color: hsl(34, 100%, 34%); +--btn-color: #ffffff; +--btn-bg: #f59e0b; +--btn-border-color: #f59e0b; +--btn-hover-color: #ffffff; +--btn-hover-bg: #d97706; +--btn-hover-border-color: #d97706; +--btn-focus-shadow-rgb: 245, 158, 11; +--btn-active-color: #ffffff; +--btn-active-bg: #d97706; +--btn-active-border-color: #b45309; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #ffffff; +--btn-disabled-bg: #f59e0b; +--btn-disabled-border-color: #f59e0b; } .btn-danger { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(3, 75%, 37%); - --btn-border-color: hsl(3, 75%, 37%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #8c1a14; - --btn-hover-border-color: #841913; - --btn-focus-shadow-rgb: 179, 65, 59; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #841913; - --btn-active-border-color: #7c1712; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(3, 75%, 37%); - --btn-disabled-border-color: hsl(3, 75%, 37%); +--btn-color: #ffffff; +--btn-bg: #f43f5e; +--btn-border-color: #f43f5e; +--btn-hover-color: #ffffff; +--btn-hover-bg: #e11d48; +--btn-hover-border-color: #e11d48; +--btn-focus-shadow-rgb: 244, 63, 94; +--btn-active-color: #ffffff; +--btn-active-bg: #e11d48; +--btn-active-border-color: #be123c; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #ffffff; +--btn-disabled-bg: #f43f5e; +--btn-disabled-border-color: #f43f5e; } .btn-light { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: hsl(210, 17%, 98%); - --btn-border-color: hsl(210, 17%, 98%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: #d4d5d5; - --btn-hover-border-color: #c7c8c9; - --btn-focus-shadow-rgb: 212, 213, 213; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: #c7c8c9; - --btn-active-border-color: #bbbcbc; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: hsl(210, 17%, 98%); - --btn-disabled-border-color: hsl(210, 17%, 98%); +--btn-color: #1e293b; +--btn-bg: #f8fafc; +--btn-border-color: #f8fafc; +--btn-hover-color: #1e293b; +--btn-hover-bg: #e2e8f0; +--btn-hover-border-color: #e2e8f0; +--btn-focus-shadow-rgb: 248, 250, 252; +--btn-active-color: #1e293b; +--btn-active-bg: #e2e8f0; +--btn-active-border-color: #cbd5e1; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #1e293b; +--btn-disabled-bg: #f8fafc; +--btn-disabled-border-color: #f8fafc; } .btn-dark { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(210, 10%, 23%); - --btn-border-color: hsl(210, 10%, 23%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #53585e; - --btn-hover-border-color: #494f54; - --btn-focus-shadow-rgb: 83, 88, 94; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #5d6267; - --btn-active-border-color: #494f54; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(210, 10%, 23%); - --btn-disabled-border-color: hsl(210, 10%, 23%); +--btn-color: #ffffff; +--btn-bg: #334155; +--btn-border-color: #334155; +--btn-hover-color: #ffffff; +--btn-hover-bg: #1e293b; +--btn-hover-border-color: #1e293b; +--btn-focus-shadow-rgb: 51, 65, 85; +--btn-active-color: #ffffff; +--btn-active-bg: #1e293b; +--btn-active-border-color: #0f172a; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #ffffff; +--btn-disabled-bg: #334155; +--btn-disabled-border-color: #334155; } .btn-outline-primary { - --btn-color: hsl(240, 98%, 17%); - --btn-border-color: hsl(240, 98%, 17%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(240, 98%, 17%); - --btn-hover-border-color: hsl(240, 98%, 17%); - --btn-focus-shadow-rgb: 1, 1, 86; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(240, 98%, 17%); - --btn-active-border-color: hsl(240, 98%, 17%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(240, 98%, 17%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(240, 98%, 17%); - --gradient: none; +--btn-color: #0d9488; +--btn-border-color: #0d9488; +--btn-hover-color: #ffffff; +--btn-hover-bg: #0d9488; +--btn-hover-border-color: #0d9488; +--btn-focus-shadow-rgb: 13, 148, 136; +--btn-active-color: #ffffff; +--btn-active-bg: #0d9488; +--btn-active-border-color: #0d9488; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #0d9488; +--btn-disabled-bg: transparent; +--btn-disabled-border-color: #0d9488; +--gradient: none; } .btn-outline-secondary { - --btn-color: hsl(210, 7%, 46%); - --btn-border-color: hsl(210, 7%, 46%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(210, 7%, 46%); - --btn-hover-border-color: hsl(210, 7%, 46%); - --btn-focus-shadow-rgb: 109, 117, 126; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 7%, 46%); - --btn-active-border-color: hsl(210, 7%, 46%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 7%, 46%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 7%, 46%); - --gradient: none; +--btn-color: #64748b; +--btn-border-color: #64748b; +--btn-hover-color: #ffffff; +--btn-hover-bg: #64748b; +--btn-hover-border-color: #64748b; +--btn-focus-shadow-rgb: 100, 116, 139; +--btn-active-color: #ffffff; +--btn-active-bg: #64748b; +--btn-active-border-color: #64748b; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #64748b; +--btn-disabled-bg: transparent; +--btn-disabled-border-color: #64748b; +--gradient: none; } .btn-outline-success { - --btn-color: hsl(120, 32%, 39%); - --btn-border-color: hsl(120, 32%, 39%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(120, 32%, 39%); - --btn-hover-border-color: hsl(120, 32%, 39%); - --btn-focus-shadow-rgb: 68, 131, 68; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(120, 32%, 39%); - --btn-active-border-color: hsl(120, 32%, 39%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(120, 32%, 39%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(120, 32%, 39%); - --gradient: none; +--btn-color: #10b981; +--btn-border-color: #10b981; +--btn-hover-color: #ffffff; +--btn-hover-bg: #10b981; +--btn-hover-border-color: #10b981; +--btn-focus-shadow-rgb: 16, 185, 129; +--btn-active-color: #ffffff; +--btn-active-bg: #10b981; +--btn-active-border-color: #10b981; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #10b981; +--btn-disabled-bg: transparent; +--btn-disabled-border-color: #10b981; +--gradient: none; } .btn-outline-info { - --btn-color: hsl(207, 49%, 37%); - --btn-border-color: hsl(207, 49%, 37%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(207, 49%, 37%); - --btn-hover-border-color: hsl(207, 49%, 37%); - --btn-focus-shadow-rgb: 48, 99, 141; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(207, 49%, 37%); - --btn-active-border-color: hsl(207, 49%, 37%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(207, 49%, 37%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(207, 49%, 37%); - --gradient: none; +--btn-color: #0ea5e9; +--btn-border-color: #0ea5e9; +--btn-hover-color: #ffffff; +--btn-hover-bg: #0ea5e9; +--btn-hover-border-color: #0ea5e9; +--btn-focus-shadow-rgb: 14, 165, 233; +--btn-active-color: #ffffff; +--btn-active-bg: #0ea5e9; +--btn-active-border-color: #0ea5e9; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #0ea5e9; +--btn-disabled-bg: transparent; +--btn-disabled-border-color: #0ea5e9; +--gradient: none; } .btn-outline-warning { - --btn-color: hsl(34, 100%, 34%); - --btn-border-color: hsl(34, 100%, 34%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(34, 100%, 34%); - --btn-hover-border-color: hsl(34, 100%, 34%); - --btn-focus-shadow-rgb: 173, 98, 0; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(34, 100%, 34%); - --btn-active-border-color: hsl(34, 100%, 34%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(34, 100%, 34%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(34, 100%, 34%); - --gradient: none; +--btn-color: #f59e0b; +--btn-border-color: #f59e0b; +--btn-hover-color: #ffffff; +--btn-hover-bg: #f59e0b; +--btn-hover-border-color: #f59e0b; +--btn-focus-shadow-rgb: 245, 158, 11; +--btn-active-color: #ffffff; +--btn-active-bg: #f59e0b; +--btn-active-border-color: #f59e0b; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #f59e0b; +--btn-disabled-bg: transparent; +--btn-disabled-border-color: #f59e0b; +--gradient: none; } .btn-outline-danger { - --btn-color: hsl(3, 75%, 37%); - --btn-border-color: hsl(3, 75%, 37%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(3, 75%, 37%); - --btn-hover-border-color: hsl(3, 75%, 37%); - --btn-focus-shadow-rgb: 165, 31, 24; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(3, 75%, 37%); - --btn-active-border-color: hsl(3, 75%, 37%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(3, 75%, 37%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(3, 75%, 37%); - --gradient: none; +--btn-color: #f43f5e; +--btn-border-color: #f43f5e; +--btn-hover-color: #ffffff; +--btn-hover-bg: #f43f5e; +--btn-hover-border-color: #f43f5e; +--btn-focus-shadow-rgb: 244, 63, 94; +--btn-active-color: #ffffff; +--btn-active-bg: #f43f5e; +--btn-active-border-color: #f43f5e; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #f43f5e; +--btn-disabled-bg: transparent; +--btn-disabled-border-color: #f43f5e; +--gradient: none; } .btn-outline-light { - --btn-color: hsl(210, 17%, 98%); - --btn-border-color: hsl(210, 17%, 98%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(210, 17%, 98%); - --btn-hover-border-color: hsl(210, 17%, 98%); - --btn-focus-shadow-rgb: 249, 250, 251; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(210, 17%, 98%); - --btn-active-border-color: hsl(210, 17%, 98%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 17%, 98%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 17%, 98%); - --gradient: none; +--btn-color: #f8fafc; +--btn-border-color: #f8fafc; +--btn-hover-color: #1e293b; +--btn-hover-bg: #f8fafc; +--btn-hover-border-color: #f8fafc; +--btn-focus-shadow-rgb: 248, 250, 252; +--btn-active-color: #1e293b; +--btn-active-bg: #f8fafc; +--btn-active-border-color: #f8fafc; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #f8fafc; +--btn-disabled-bg: transparent; +--btn-disabled-border-color: #f8fafc; +--gradient: none; } .btn-outline-dark { - --btn-color: hsl(210, 10%, 23%); - --btn-border-color: hsl(210, 10%, 23%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(210, 10%, 23%); - --btn-hover-border-color: hsl(210, 10%, 23%); - --btn-focus-shadow-rgb: 53, 59, 65; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 10%, 23%); - --btn-active-border-color: hsl(210, 10%, 23%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 10%, 23%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 10%, 23%); - --gradient: none; +--btn-color: #334155; +--btn-border-color: #334155; +--btn-hover-color: #ffffff; +--btn-hover-bg: #334155; +--btn-hover-border-color: #334155; +--btn-focus-shadow-rgb: 51, 65, 85; +--btn-active-color: #ffffff; +--btn-active-bg: #334155; +--btn-active-border-color: #334155; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #334155; +--btn-disabled-bg: transparent; +--btn-disabled-border-color: #334155; +--gradient: none; } .btn-link { - --btn-font-weight: 400; - --btn-color: var(--link-color); - --btn-bg: transparent; - --btn-border-color: transparent; - --btn-hover-color: var(--link-hover-color); - --btn-hover-border-color: transparent; - --btn-active-color: var(--link-hover-color); - --btn-active-border-color: transparent; - --btn-disabled-color: hsl(210, 7%, 46%); - --btn-disabled-border-color: transparent; - --btn-box-shadow: none; - --btn-focus-shadow-rgb: 39, 39, 111; - text-decoration: underline; +--btn-font-weight: 400; +--btn-color: var(--link-color); +--btn-bg: transparent; +--btn-border-color: transparent; +--btn-hover-color: var(--link-hover-color); +--btn-hover-border-color: transparent; +--btn-active-color: var(--link-hover-color); +--btn-active-border-color: transparent; +--btn-disabled-color: #64748b; +--btn-disabled-border-color: transparent; +--btn-box-shadow: none; +--btn-focus-shadow-rgb: 13, 148, 136; +text-decoration: underline; } diff --git a/src/media/css/colors/light/colors_standard.css b/src/media/css/colors/light/colors_standard.css index a0c410e..f890562 100644 --- a/src/media/css/colors/light/colors_standard.css +++ b/src/media/css/colors/light/colors_standard.css @@ -201,68 +201,68 @@ color-scheme: light; /* ===== CONTAINER BACKGROUNDS ===== */ /* Below Topbar Container */ ---container-below-topbar-bg-image: ; ---container-below-topbar-bg-color ; +--container-below-topbar-bg-image: none; +--container-below-topbar-bg-color: transparent; --container-below-topbar-bg-position: auto; --container-below-topbar-bg-attachment: fixed; --container-below-topbar-bg-repeat: repeat; --container-below-topbar-bg-size: auto; ---container-below-topbar-border: ; ---container-below-topbar-border-radius: ; +--container-below-topbar-border: none; +--container-below-topbar-border-radius: 0; /* Top A Container */ ---container-top-a-bg-image: ; ---container-top-a-bg-color: ; +--container-top-a-bg-image: none; +--container-top-a-bg-color: transparent; --container-top-a-bg-position: auto; --container-top-a-bg-attachment: fixed; --container-top-a-bg-repeat: repeat; --container-top-a-bg-size: auto; ---container-top-a-border: ; ---container-top-a-border-radius: ; +--container-top-a-border: none; +--container-top-a-border-radius: 0; /* Top B Container */ ---container-top-b-bg-image: ; ---container-top-b-bg-color: ; +--container-top-b-bg-image: none; +--container-top-b-bg-color: transparent; --container-top-b-bg-position: auto; --container-top-b-bg-attachment: fixed; --container-top-b-bg-repeat: repeat; --container-top-b-bg-size: auto; ---container-top-b-border: ; ---container-top-b-border-radius: ; +--container-top-b-border: none; +--container-top-b-border-radius: 0; /* TOC Container */ --container-toc-bg: var(--mainmenu-nav-link-color); --container-toc-color: var(--color-primary); /* Sidebar Container */ ---container-sidebar-bg-image: ; ---container-sidebar-bg-color: ; +--container-sidebar-bg-image: none; +--container-sidebar-bg-color: transparent; --container-sidebar-bg-position: auto; --container-sidebar-bg-attachment: scroll; --container-sidebar-bg-repeat: repeat; --container-sidebar-bg-size: auto; ---container-sidebar-border: ; ---container-sidebar-border-radius: ; +--container-sidebar-border: none; +--container-sidebar-border-radius: 0; /* Bottom A Container */ ---container-bottom-a-bg-image: ; ---container-bottom-a-bg-color: ; +--container-bottom-a-bg-image: none; +--container-bottom-a-bg-color: transparent; --container-bottom-a-bg-position: auto; --container-bottom-a-bg-attachment: fixed; --container-bottom-a-bg-repeat: repeat; --container-bottom-a-bg-size: auto; ---container-bottom-a-border: ; ---container-bottom-a-border-radius: ; +--container-bottom-a-border: none; +--container-bottom-a-border-radius: 0; /* Bottom B Container */ ---container-bottom-b-bg-image: ; ---container-bottom-b-bg-color: ; +--container-bottom-b-bg-image: none; +--container-bottom-b-bg-color: transparent; --container-bottom-b-bg-position: auto; --container-bottom-b-bg-attachment: fixed; --container-bottom-b-bg-repeat: repeat; --container-bottom-b-bg-size: auto; ---container-bottom-b-border: ; ---container-bottom-b-border-radius: ; +--container-bottom-b-border: none; +--container-bottom-b-border-radius: 0; /* ===== BORDERS ===== */ --border-width: 1px; @@ -415,7 +415,7 @@ color-scheme: light; .btn { --btn-padding-x: 1rem; --btn-padding-y: 0.6rem; ---btn-font-family: ; +--btn-font-family: inherit; --btn-font-size: 1rem; --btn-font-weight: 400; --btn-line-height: 1.5; diff --git a/src/media/css/template.css b/src/media/css/template.css index be9834a..058ef79 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -18357,3 +18357,201 @@ nav[data-toggle=toc] .nav-link.active+ul{ .icon-check::before { content: "\f00c"; } .icon-plus::before { content: "\f067"; } .icon-minus::before { content: "\f068"; } + +/* ===== BOOTSTRAP & JOOMLA BUTTONS ===== */ +.btn-primary { + --btn-color: white; + --btn-bg: var(--color-primary); + --btn-border-color: var(--color-primary); + --btn-hover-bg: color-mix(in srgb, var(--color-primary) 85%, black); + --btn-hover-border-color: color-mix(in srgb, var(--color-primary) 85%, black); +} + +.btn-secondary { + --btn-color: var(--body-bg); + --btn-bg: var(--secondary); + --btn-border-color: var(--secondary); + --btn-hover-bg: color-mix(in srgb, var(--secondary) 85%, black); + --btn-hover-border-color: color-mix(in srgb, var(--secondary) 85%, black); +} + +.btn-success { + --btn-color: white; + --btn-bg: var(--success); + --btn-border-color: var(--success); + --btn-hover-bg: color-mix(in srgb, var(--success) 85%, black); + --btn-hover-border-color: color-mix(in srgb, var(--success) 85%, black); +} + +.btn-info { + --btn-color: white; + --btn-bg: var(--info); + --btn-border-color: var(--info); + --btn-hover-bg: color-mix(in srgb, var(--info) 85%, black); + --btn-hover-border-color: color-mix(in srgb, var(--info) 85%, black); +} + +.btn-warning { + --btn-color: white; + --btn-bg: var(--warning); + --btn-border-color: var(--warning); + --btn-hover-bg: color-mix(in srgb, var(--warning) 85%, black); + --btn-hover-border-color: color-mix(in srgb, var(--warning) 85%, black); +} + +.btn-danger { + --btn-color: white; + --btn-bg: var(--danger); + --btn-border-color: var(--danger); + --btn-hover-bg: color-mix(in srgb, var(--danger) 85%, black); + --btn-hover-border-color: color-mix(in srgb, var(--danger) 85%, black); +} + +.btn-light { + --btn-color: var(--body-color); + --btn-bg: var(--light); + --btn-border-color: var(--light); + --btn-hover-bg: color-mix(in srgb, var(--light) 90%, black); + --btn-hover-border-color: color-mix(in srgb, var(--light) 90%, black); +} + +.btn-dark { + --btn-color: white; + --btn-bg: var(--dark); + --btn-border-color: var(--dark); + --btn-hover-bg: color-mix(in srgb, var(--dark) 85%, black); + --btn-hover-border-color: color-mix(in srgb, var(--dark) 85%, black); +} + +/* Outline button variants */ +.btn-outline-primary { + --btn-color: var(--color-primary); + --btn-border-color: var(--color-primary); + --btn-hover-color: white; + --btn-hover-bg: var(--color-primary); + --btn-hover-border-color: var(--color-primary); +} + +.btn-outline-secondary { + --btn-color: var(--secondary); + --btn-border-color: var(--secondary); + --btn-hover-color: white; + --btn-hover-bg: var(--secondary); + --btn-hover-border-color: var(--secondary); +} + +.btn-outline-success { + --btn-color: var(--success); + --btn-border-color: var(--success); + --btn-hover-color: white; + --btn-hover-bg: var(--success); + --btn-hover-border-color: var(--success); +} + +.btn-outline-info { + --btn-color: var(--info); + --btn-border-color: var(--info); + --btn-hover-color: white; + --btn-hover-bg: var(--info); + --btn-hover-border-color: var(--info); +} + +.btn-outline-warning { + --btn-color: var(--warning); + --btn-border-color: var(--warning); + --btn-hover-color: white; + --btn-hover-bg: var(--warning); + --btn-hover-border-color: var(--warning); +} + +.btn-outline-danger { + --btn-color: var(--danger); + --btn-border-color: var(--danger); + --btn-hover-color: white; + --btn-hover-bg: var(--danger); + --btn-hover-border-color: var(--danger); +} + +.btn-outline-light { + --btn-color: var(--light); + --btn-border-color: var(--light); + --btn-hover-color: var(--body-color); + --btn-hover-bg: var(--light); + --btn-hover-border-color: var(--light); +} + +.btn-outline-dark { + --btn-color: var(--dark); + --btn-border-color: var(--dark); + --btn-hover-color: white; + --btn-hover-bg: var(--dark); + --btn-hover-border-color: var(--dark); +} + +/* ===== BOOTSTRAP & JOOMLA ALERTS ===== */ +.alert-primary { + --alert-bg: color-mix(in srgb, var(--primary) 10%, var(--body-bg)); + --alert-color: color-mix(in srgb, var(--primary) 90%, black); + --alert-border-color: color-mix(in srgb, var(--primary) 20%, var(--body-bg)); +} + +.alert-secondary { + --alert-bg: color-mix(in srgb, var(--secondary) 10%, var(--body-bg)); + --alert-color: color-mix(in srgb, var(--secondary) 90%, black); + --alert-border-color: color-mix(in srgb, var(--secondary) 20%, var(--body-bg)); +} + +.alert-success { + --alert-bg: color-mix(in srgb, var(--success) 10%, var(--body-bg)); + --alert-color: color-mix(in srgb, var(--success) 90%, black); + --alert-border-color: color-mix(in srgb, var(--success) 20%, var(--body-bg)); +} + +.alert-info { + --alert-bg: color-mix(in srgb, var(--info) 10%, var(--body-bg)); + --alert-color: color-mix(in srgb, var(--info) 90%, black); + --alert-border-color: color-mix(in srgb, var(--info) 20%, var(--body-bg)); +} + +.alert-warning { + --alert-bg: color-mix(in srgb, var(--warning) 10%, var(--body-bg)); + --alert-color: color-mix(in srgb, var(--warning) 90%, black); + --alert-border-color: color-mix(in srgb, var(--warning) 20%, var(--body-bg)); +} + +.alert-danger { + --alert-bg: color-mix(in srgb, var(--danger) 10%, var(--body-bg)); + --alert-color: color-mix(in srgb, var(--danger) 90%, black); + --alert-border-color: color-mix(in srgb, var(--danger) 20%, var(--body-bg)); +} + +.alert-light { + --alert-bg: var(--light); + --alert-color: var(--body-color); + --alert-border-color: color-mix(in srgb, var(--light) 85%, black); +} + +.alert-dark { + --alert-bg: var(--dark); + --alert-color: white; + --alert-border-color: var(--dark); +} + +/* Joomla-specific alert mappings */ +.alert-message { + --alert-bg: var(--alert-info, color-mix(in srgb, var(--info) 10%, var(--body-bg))); + --alert-color: color-mix(in srgb, var(--info) 90%, black); + --alert-border-color: color-mix(in srgb, var(--info) 20%, var(--body-bg)); +} + +.alert-error { + --alert-bg: var(--alert-danger, color-mix(in srgb, var(--danger) 10%, var(--body-bg))); + --alert-color: color-mix(in srgb, var(--danger) 90%, black); + --alert-border-color: color-mix(in srgb, var(--danger) 20%, var(--body-bg)); +} + +.alert-notice { + --alert-bg: var(--alert-warning, color-mix(in srgb, var(--warning) 10%, var(--body-bg))); + --alert-color: color-mix(in srgb, var(--warning) 90%, black); + --alert-border-color: color-mix(in srgb, var(--warning) 20%, var(--body-bg)); +} From f1316ccb58d619d96968e299c50f296324950053 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 17:28:22 +0000 Subject: [PATCH 40/45] Update global padding variables from 1rem to 0.15rem across all color schemes Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/media/css/colors/dark/colors_alternative.css | 4 ++-- src/media/css/colors/dark/colors_standard.css | 4 ++-- src/media/css/colors/light/colors_alternative.css | 4 ++-- src/media/css/colors/light/colors_standard.css | 4 ++-- templates/colors_custom.css | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/media/css/colors/dark/colors_alternative.css b/src/media/css/colors/dark/colors_alternative.css index 87e7352..711f9c7 100644 --- a/src/media/css/colors/dark/colors_alternative.css +++ b/src/media/css/colors/dark/colors_alternative.css @@ -99,8 +99,8 @@ color-scheme: dark; --highlight-bg: #fef08a1a; /* ===== LAYOUT & SPACING ===== */ ---padding-x: 1rem; ---padding-y: 1rem; +--padding-x: 0.15rem; +--padding-y: 0.15rem; --bg-opacity: 1; --nav-toggle-size: 3rem; --gradient: linear-gradient(180deg, #ffffff26, #fff0); diff --git a/src/media/css/colors/dark/colors_standard.css b/src/media/css/colors/dark/colors_standard.css index bb4d44d..0ce1e0f 100644 --- a/src/media/css/colors/dark/colors_standard.css +++ b/src/media/css/colors/dark/colors_standard.css @@ -99,8 +99,8 @@ color-scheme: dark; --highlight-bg: #ffe28a1a; /* ===== LAYOUT & SPACING ===== */ ---padding-x: 1rem; ---padding-y: 1rem; +--padding-x: 0.15rem; +--padding-y: 0.15rem; --bg-opacity: 1; --nav-toggle-size: 3rem; --gradient: linear-gradient(180deg, #ffffff26, #fff0); diff --git a/src/media/css/colors/light/colors_alternative.css b/src/media/css/colors/light/colors_alternative.css index 98b92b7..a770317 100644 --- a/src/media/css/colors/light/colors_alternative.css +++ b/src/media/css/colors/light/colors_alternative.css @@ -98,8 +98,8 @@ color-scheme: light; --highlight-bg: #fde68a; /* ===== LAYOUT & SPACING ===== */ ---padding-x: 1rem; ---padding-y: 1rem; +--padding-x: 0.15rem; +--padding-y: 0.15rem; --bg-opacity: 1; --nav-toggle-size: 3rem; --gradient: linear-gradient(180deg, #ffffff26, #fff0); diff --git a/src/media/css/colors/light/colors_standard.css b/src/media/css/colors/light/colors_standard.css index f890562..87e4472 100644 --- a/src/media/css/colors/light/colors_standard.css +++ b/src/media/css/colors/light/colors_standard.css @@ -98,8 +98,8 @@ color-scheme: light; --highlight-bg: #fbeea8; /* ===== LAYOUT & SPACING ===== */ ---padding-x: 1rem; ---padding-y: 1rem; +--padding-x: 0.15rem; +--padding-y: 0.15rem; --bg-opacity: 1; --nav-toggle-size: 3rem; --gradient: linear-gradient(180deg, #ffffff26, #fff0); diff --git a/templates/colors_custom.css b/templates/colors_custom.css index d2af209..1ebc90a 100644 --- a/templates/colors_custom.css +++ b/templates/colors_custom.css @@ -110,8 +110,8 @@ color-scheme: dark; --highlight-bg: #ffe28a1a; /* ===== LAYOUT & SPACING ===== */ ---padding-x: 1rem; ---padding-y: 1rem; +--padding-x: 0.15rem; +--padding-y: 0.15rem; --bg-opacity: 1; --nav-toggle-size: 3rem; --gradient: linear-gradient(180deg, #ffffff26, #fff0); From 7a91855a2ac9343609d558af0c06d05d67dd5305 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 17:36:37 +0000 Subject: [PATCH 41/45] Expand template description with custom color theme implementation instructions Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/administrator/language/en-GB/tpl_mokocassiopeia.sys.ini | 2 +- src/administrator/language/en-US/tpl_mokocassiopeia.sys.ini | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/administrator/language/en-GB/tpl_mokocassiopeia.sys.ini b/src/administrator/language/en-GB/tpl_mokocassiopeia.sys.ini index eda3eff..069405c 100644 --- a/src/administrator/language/en-GB/tpl_mokocassiopeia.sys.ini +++ b/src/administrator/language/en-GB/tpl_mokocassiopeia.sys.ini @@ -34,4 +34,4 @@ TPL_MOKOCASSIOPEIA_POSITION_TOP_B="Top-b" TPL_MOKOCASSIOPEIA_POSITION_TOPBAR="Top Bar" TPL_MOKOCASSIOPEIA_POSITION_DRAWER_LEFT="Drawer-Left" TPL_MOKOCASSIOPEIA_POSITION_DRAWER_RIGHT="Drawer-Right" -TPL_MOKOCASSIOPEIA_XML_DESCRIPTION="

    MokoCassiopeia Template Description

    MokoCassiopeia 3.0 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.

    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.

    " +TPL_MOKOCASSIOPEIA_XML_DESCRIPTION="

    MokoCassiopeia Template Description

    MokoCassiopeia 3.0 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

    To create a custom colour scheme, copy the template file templates/colors_custom.css to either media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css or media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css. Customise the CSS variables to match your brand, then activate it in System → Site Templates → MokoCassiopeia → Theme tab by selecting "Custom" for the Light or Dark Mode Palette. For comprehensive documentation on all available CSS variables, see docs/CSS_VARIABLES.md.

    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.

    " diff --git a/src/administrator/language/en-US/tpl_mokocassiopeia.sys.ini b/src/administrator/language/en-US/tpl_mokocassiopeia.sys.ini index db2034a..2942d9b 100644 --- a/src/administrator/language/en-US/tpl_mokocassiopeia.sys.ini +++ b/src/administrator/language/en-US/tpl_mokocassiopeia.sys.ini @@ -34,4 +34,4 @@ TPL_MOKOCASSIOPEIA_POSITION_TOP_B="Top-b" TPL_MOKOCASSIOPEIA_POSITION_TOPBAR="Top Bar" TPL_MOKOCASSIOPEIA_POSITION_DRAWER_LEFT="Drawer-Left" TPL_MOKOCASSIOPEIA_POSITION_DRAWER_RIGHT="Drawer-Right" -TPL_MOKOCASSIOPEIA_XML_DESCRIPTION="

    MokoCassiopeia Template Description

    MokoCassiopeia 3.0 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.

    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.

    " +TPL_MOKOCASSIOPEIA_XML_DESCRIPTION="

    MokoCassiopeia Template Description

    MokoCassiopeia 3.0 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 Color Themes

    To create a custom color scheme, copy the template file templates/colors_custom.css to either media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css or media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css. Customize the CSS variables to match your brand, then activate it in System → Site Templates → MokoCassiopeia → Theme tab by selecting "Custom" for the Light or Dark Mode Palette. For comprehensive documentation on all available CSS variables, see docs/CSS_VARIABLES.md.

    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.

    " From 19d83e4d920794c73a881ed1500e6f8a4f09ffc2 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 17:40:04 +0000 Subject: [PATCH 42/45] Add description instructions to font scheme selection field Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/language/en-GB/tpl_mokocassiopeia.ini | 1 + src/language/en-US/tpl_mokocassiopeia.ini | 1 + src/templates/templateDetails.xml | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/language/en-GB/tpl_mokocassiopeia.ini b/src/language/en-GB/tpl_mokocassiopeia.ini index 76f4a66..709fa2f 100644 --- a/src/language/en-GB/tpl_mokocassiopeia.ini +++ b/src/language/en-GB/tpl_mokocassiopeia.ini @@ -61,6 +61,7 @@ TPL_MOKOCASSIOPEIA_FA7KITCODE_DESC="If left blank, Font Awesome 7 Free will b ; ===== Typography (Theme tab) ===== TPL_MOKOCASSIOPEIA_FONT_LABEL="Fonts Scheme" +TPL_MOKOCASSIOPEIA_FONT_LABEL_DESC="Select a font scheme for your site. Local fonts are loaded from the template folder, while web fonts are loaded from external sources (Google Fonts). The default is Roboto (local). See the note below for important privacy and performance considerations." TPL_MOKOCASSIOPEIA_FONT_GROUP_LOCAL="Fonts from Folder" TPL_MOKOCASSIOPEIA_FONT_GROUP_WEB="Fonts from Web" TPL_MOKOCASSIOPEIA_FONT_NOTE_TEXT="Loading fonts from external sources might be against privacy regulations in some countries.
    Loading fonts from a local folder might have a performance impact on your site." diff --git a/src/language/en-US/tpl_mokocassiopeia.ini b/src/language/en-US/tpl_mokocassiopeia.ini index 5b97e57..0dc0794 100644 --- a/src/language/en-US/tpl_mokocassiopeia.ini +++ b/src/language/en-US/tpl_mokocassiopeia.ini @@ -61,6 +61,7 @@ TPL_MOKOCASSIOPEIA_FA7KITCODE_DESC="If left blank, Font Awesome 7 Free will b ; ===== Typography (Theme tab) ===== TPL_MOKOCASSIOPEIA_FONT_LABEL="Fonts Scheme" +TPL_MOKOCASSIOPEIA_FONT_LABEL_DESC="Select a font scheme for your site. Local fonts are loaded from the template folder, while web fonts are loaded from external sources (Google Fonts). The default is Roboto (local). See the note below for important privacy and performance considerations." TPL_MOKOCASSIOPEIA_FONT_GROUP_LOCAL="Fonts from Folder" TPL_MOKOCASSIOPEIA_FONT_GROUP_WEB="Fonts from Web" TPL_MOKOCASSIOPEIA_FONT_NOTE_TEXT="Loading fonts from external sources might be against privacy regulations in some countries.
    Loading fonts from a local folder might have a performance impact on your site." diff --git a/src/templates/templateDetails.xml b/src/templates/templateDetails.xml index 6b32030..5aa2d9b 100644 --- a/src/templates/templateDetails.xml +++ b/src/templates/templateDetails.xml @@ -202,7 +202,7 @@ - + From fd998b6f49c51737c25fdb533b6bd03eb0301872 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 17:43:36 +0000 Subject: [PATCH 43/45] Remove Alternative color scheme option and enhance theme selection instructions Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/language/en-GB/tpl_mokocassiopeia.ini | 8 ++++---- src/language/en-US/tpl_mokocassiopeia.ini | 4 ++-- src/templates/templateDetails.xml | 2 -- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/language/en-GB/tpl_mokocassiopeia.ini b/src/language/en-GB/tpl_mokocassiopeia.ini index 709fa2f..b6f5a5e 100644 --- a/src/language/en-GB/tpl_mokocassiopeia.ini +++ b/src/language/en-GB/tpl_mokocassiopeia.ini @@ -77,10 +77,10 @@ TPL_MOKOCASSIOPEIA_COLOR_NAME_STANDARD="Standard" TPL_MOKOCASSIOPEIA_COLOR_NAME_ALTERNATIVE="Alternative" TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom" ; New labels for Theme tab dropdowns -TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL="Light color palette" -TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_DESC="Select a color palette for light mode. To use Custom, copy the template file from templates/colors_custom.css to media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css and customize the CSS variables to match your brand." -TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_LABEL="Dark color palette" -TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_DESC="Select a color palette for dark mode. To use Custom, copy the template file from templates/colors_custom.css to media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css and customize the CSS variables to match your brand." +TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL="Light colour palette" +TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_DESC="Select a colour palette for light mode. Standard uses the default blue theme with comprehensive styling for all components. Custom allows you to create your own colour scheme - copy the template file from templates/colors_custom.css to media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css and customise the CSS variables to match your brand." +TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_LABEL="Dark colour palette" +TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_DESC="Select a colour palette for dark mode. Standard uses the default blue theme optimised for dark backgrounds with proper contrast. Custom allows you to create your own colour scheme - copy the template file from templates/colors_custom.css to media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css and customise the CSS variables to match your brand." ; ===== Theme tab (core feature strings) ===== TPL_MOKO_THEME_FIELDSET="Theme" diff --git a/src/language/en-US/tpl_mokocassiopeia.ini b/src/language/en-US/tpl_mokocassiopeia.ini index 0dc0794..291ef85 100644 --- a/src/language/en-US/tpl_mokocassiopeia.ini +++ b/src/language/en-US/tpl_mokocassiopeia.ini @@ -78,9 +78,9 @@ TPL_MOKOCASSIOPEIA_COLOR_NAME_ALTERNATIVE="Alternative" TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom" ; New labels for Theme tab dropdowns TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL="Light color palette" -TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_DESC="Select a color palette for light mode. To use Custom, copy the template file from templates/colors_custom.css to media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css and customize the CSS variables to match your brand." +TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_DESC="Select a color palette for light mode. Standard uses the default blue theme with comprehensive styling for all components. Custom allows you to create your own color scheme - copy the template file from templates/colors_custom.css to media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css and customize the CSS variables to match your brand." TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_LABEL="Dark color palette" -TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_DESC="Select a color palette for dark mode. To use Custom, copy the template file from templates/colors_custom.css to media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css and customize the CSS variables to match your brand." +TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_DESC="Select a color palette for dark mode. Standard uses the default blue theme optimized for dark backgrounds with proper contrast. Custom allows you to create your own color scheme - copy the template file from templates/colors_custom.css to media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css and customize the CSS variables to match your brand." ; ===== Theme tab (core feature strings) ===== TPL_MOKO_THEME_FIELDSET="Theme" diff --git a/src/templates/templateDetails.xml b/src/templates/templateDetails.xml index 5aa2d9b..e69e64a 100644 --- a/src/templates/templateDetails.xml +++ b/src/templates/templateDetails.xml @@ -191,12 +191,10 @@ - - From db16db87a47a0a62d468546a3bb3153c5948e368 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 17:44:32 +0000 Subject: [PATCH 44/45] Convert theme style descriptions to tooltips using hint attribute Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/templates/templateDetails.xml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/templates/templateDetails.xml b/src/templates/templateDetails.xml index e69e64a..646857b 100644 --- a/src/templates/templateDetails.xml +++ b/src/templates/templateDetails.xml @@ -189,11 +189,11 @@ - + - + From d5f3dfb5ac117a2bfb34365f2bfeb0076e3bb84b Mon Sep 17 00:00:00 2001 From: Jonathan Miller <230051081+jmiller-moko@users.noreply.github.com> Date: Sat, 7 Feb 2026 11:48:53 -0600 Subject: [PATCH 45/45] remfoe `Alternative` option --- src/language/en-GB/tpl_mokocassiopeia.ini | 1 - src/language/en-US/tpl_mokocassiopeia.ini | 1 - .../css/colors/dark/colors_alternative.css | 514 ------------ .../css/colors/light/colors_alternative.css | 742 ------------------ src/templates/joomla.asset.json | 12 - 5 files changed, 1270 deletions(-) delete mode 100644 src/media/css/colors/dark/colors_alternative.css delete mode 100644 src/media/css/colors/light/colors_alternative.css diff --git a/src/language/en-GB/tpl_mokocassiopeia.ini b/src/language/en-GB/tpl_mokocassiopeia.ini index b6f5a5e..0eb9c00 100644 --- a/src/language/en-GB/tpl_mokocassiopeia.ini +++ b/src/language/en-GB/tpl_mokocassiopeia.ini @@ -74,7 +74,6 @@ TPL_MOKOCASSIOPEIA_TOC="Table of Contents" ; ===== Color palette choices (shared) ===== TPL_MOKOCASSIOPEIA_COLOR_NAME_STANDARD="Standard" -TPL_MOKOCASSIOPEIA_COLOR_NAME_ALTERNATIVE="Alternative" TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom" ; New labels for Theme tab dropdowns TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL="Light colour palette" diff --git a/src/language/en-US/tpl_mokocassiopeia.ini b/src/language/en-US/tpl_mokocassiopeia.ini index 291ef85..4c12993 100644 --- a/src/language/en-US/tpl_mokocassiopeia.ini +++ b/src/language/en-US/tpl_mokocassiopeia.ini @@ -74,7 +74,6 @@ TPL_MOKOCASSIOPEIA_TOC="Table of Contents" ; ===== Color palette choices (shared) ===== TPL_MOKOCASSIOPEIA_COLOR_NAME_STANDARD="Standard" -TPL_MOKOCASSIOPEIA_COLOR_NAME_ALTERNATIVE="Alternative" TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom" ; New labels for Theme tab dropdowns TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL="Light color palette" diff --git a/src/media/css/colors/dark/colors_alternative.css b/src/media/css/colors/dark/colors_alternative.css deleted file mode 100644 index 711f9c7..0000000 --- a/src/media/css/colors/dark/colors_alternative.css +++ /dev/null @@ -1,514 +0,0 @@ -@charset "UTF-8"; -/* Copyright (C) 2025 Moko Consulting - - This file is part of a Moko Consulting project. - - SPDX-License-Identifier: GPL-3.0-or-later - - - - # FILE INFORMATION - DEFGROUP: Joomla.Template.Site - INGROUP: MokoCassiopeia - PATH: ./media/templates/site/mokocassiopeia/css/global/dark/colors_alternative.css - VERSION: 03.05.00 - BRIEF: Alternative dark mode color definitions (Teal & Purple) for MokoCassiopeia template - */ - -/* ----------------------------------------------- - * ALTERNATIVE DARK THEME - TEAL & PURPLE - * --------------------------------------------- */ - -:root[data-bs-theme='dark']{ -color-scheme: dark; - -/* ===== BRAND & THEME COLORS ===== */ ---color-primary: #14b8a6; ---accent-color-primary: #c084fc; ---accent-color-secondary: #d8b4fe; - -/* ===== NAVIGATION ===== */ ---mainmenu-nav-link-color: #fff; ---nav-text-color: #e2e8f0; ---nav-bg-color: #0f766e; - -/* ===== LINKS ===== */ ---color-link: #e9d5ff; ---color-hover: #c084fc; ---color-active: var(--mainmenu-nav-link-color); ---link-color: #c084fc; ---link-color-rgb: 192, 132, 252; ---link-decoration: underline; ---link-hover-color: #d8b4fe; ---link-hover-color-rgb: 216, 180, 254; ---link-active-color: var(--link-color); - -/* ===== OFFCANVAS ===== */ ---offcanvas-color: var(--body-color); ---offcanvas-padding-x: 1rem; ---offcanvas-padding-y: 1rem; - -/* ===== NAVBAR ===== */ ---navbar-padding-x: 1rem; ---navbar-padding-y: 0.5rem; ---navbar-color: var(--nav-text-color); ---navbar-active-color: var(--mainmenu-nav-link-color); ---navbar-disabled-color: #475569; ---navbar-brand-padding-y: 0.3125rem; ---navbar-brand-margin-end: 1rem; ---navbar-brand-font-size: 1.25rem; ---navbar-brand-color: var(--nav-text-color); ---navbar-brand-active-color: var(--mainmenu-nav-link-color); ---navbar-nav-link-padding-x: 0.5rem; ---navbar-toggler-padding-y: 0.25rem; ---navbar-toggler-padding-x: 0.75rem; ---navbar-toggler-font-size: 1.25rem; ---navbar-toggler-border-color: rgba(255, 255, 255, 0.1); ---navbar-toggler-border-radius: 0.25rem; ---navbar-toggler-focus-width: 0.25rem; ---navbar-toggler-transition: box-shadow 0.15s ease-in-out; ---nav-link-padding-x: 1rem; ---nav-link-padding-y: 0.5rem; ---nav-link-font-weight: 400; ---nav-link-color: var(--nav-text-color); ---nav-link-active-color: var(--mainmenu-nav-link-color); ---nav-link-disabled-color: #475569; - -/* ===== TYPOGRAPHY & BODY ===== */ ---font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; ---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: #e2e8f0; ---body-color-rgb: 226, 232, 240; ---body-bg: #0f172a; ---body-bg-rgb: 15, 23, 42; ---heading-color: #f1f5f9; ---emphasis-color: #fff; ---emphasis-color-rgb: 255, 255, 255; ---secondary-color: #cbd5e1; ---secondary-color-rgb: 203, 213, 225; ---tertiary-color: #94a3b8; ---tertiary-color-rgb: 148, 163, 184; ---muted-color: #64748b; ---code-color: #e879f9; ---code-color-ink: var(--code-color, #e879f9); ---highlight-color: #0f172a; ---highlight-bg: #fef08a1a; - -/* ===== LAYOUT & SPACING ===== */ ---padding-x: 0.15rem; ---padding-y: 0.15rem; ---bg-opacity: 1; ---nav-toggle-size: 3rem; ---gradient: linear-gradient(180deg, #ffffff26, #fff0); ---secondary-bg: #1e293b; ---secondary-bg-rgb: 30, 41, 59; ---tertiary-bg: #334155; ---tertiary-bg-rgb: 51, 65, 85; ---hr-color: var(--border-color, #334155); ---border-color-soft: var(--border-color, #334155); ---kbd-bg: var(--secondary-bg, #1e293b); ---kbd-ink: var(--body-bg, #0f172a); ---toc-bg: var(--secondary-bg, #1e293b); ---toc-ink: var(--color-primary, #14b8a6); ---selection-bg: var(--highlight-bg, #fef08a1a); ---selection-ink: var(--body-color, #e2e8f0); ---border: 5px; - -/* ===== BREAKPOINTS ===== */ ---bp-xs: 0; ---bp-sm: 576px; ---bp-md: 768px; ---bp-lg: 992px; ---bp-xl: 1200px; - -/* ===== BOOTSTRAP PALETTE ===== */ ---primary: #14b8a6; ---secondary: #64748b; ---success: #34d399; ---info: #38bdf8; ---warning: #fbbf24; ---danger: #fb7185; ---light: #334155; ---dark: #0f172a; ---primary-rgb: 20, 184, 166; ---secondary-rgb: 100, 116, 139; ---success-rgb: 52, 211, 153; ---info-rgb: 56, 189, 248; ---warning-rgb: 251, 191, 36; ---danger-rgb: 251, 113, 133; ---light-rgb: 51, 65, 85; ---dark-rgb: 15, 23, 42; ---primary-text-emphasis: #99f6e4; ---secondary-text-emphasis: #cbd5e1; ---success-text-emphasis: #a7f3d0; ---info-text-emphasis: #bae6fd; ---warning-text-emphasis: #fde68a; ---danger-text-emphasis: #fecdd3; ---light-text-emphasis: #cbd5e1; ---dark-text-emphasis: #cbd5e1; ---primary-bg-subtle: #134e4a; ---secondary-bg-subtle: #1e293b; ---success-bg-subtle: #064e3b; ---info-bg-subtle: #0c4a6e; ---warning-bg-subtle: #78350f; ---danger-bg-subtle: #881337; ---light-bg-subtle: #1e293b; ---dark-bg-subtle: #0f172a; ---primary-border-subtle: #115e59; ---secondary-border-subtle: #334155; ---success-border-subtle: #065f46; ---info-border-subtle: #075985; ---warning-border-subtle: #92400e; ---danger-border-subtle: #9f1239; ---light-border-subtle: #334155; ---dark-border-subtle: #1e293b; - -/* ===== STANDARD COLORS ===== */ ---blue: #60a5fa; ---indigo: #818cf8; ---purple: #c084fc; ---pink: #f472b6; ---red: #f87171; ---orange: #fb923c; ---yellow: #fbbf24; ---green: #34d399; ---teal: #2dd4bf; ---cyan: #22d3ee; ---black: #000; ---white: #fff; - -/* ===== GRAY SCALE ===== */ ---gray-100: #1e293b; ---gray-200: #334155; ---gray-300: #475569; ---gray-400: #64748b; ---gray-500: #94a3b8; ---gray-600: #cbd5e1; ---gray-700: #e2e8f0; ---gray-800: #f1f5f9; ---gray-900: #f8fafc; ---white-rgb: 255, 255, 255; ---black-rgb: 0, 0, 0; - -/* ===== HEADER BACKGROUND ===== */ ---header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); ---header-background-attachment: fixed; ---header-background-repeat: repeat; ---header-background-size: auto; - -/* ===== CONTAINER BACKGROUNDS ===== */ -/* Below Topbar Container */ ---container-below-topbar-bg-image: none; ---container-below-topbar-bg-color: transparent; ---container-below-topbar-bg-position: center; ---container-below-topbar-bg-attachment: fixed; ---container-below-topbar-bg-repeat: no-repeat; ---container-below-topbar-bg-size: cover; ---container-below-topbar-border: none; ---container-below-topbar-border-radius: 0; - -/* Top A Container */ ---container-top-a-bg-image: none; ---container-top-a-bg-color: transparent; ---container-top-a-bg-position: center; ---container-top-a-bg-attachment: fixed; ---container-top-a-bg-repeat: no-repeat; ---container-top-a-bg-size: cover; ---container-top-a-border: none; ---container-top-a-border-radius: 0; - -/* Top B Container */ ---container-top-b-bg-image: none; ---container-top-b-bg-color: transparent; ---container-top-b-bg-position: center; ---container-top-b-bg-attachment: fixed; ---container-top-b-bg-repeat: no-repeat; ---container-top-b-bg-size: cover; ---container-top-b-border: none; ---container-top-b-border-radius: 0; - -/* TOC Container */ ---container-toc-bg: var(--secondary-bg); ---container-toc-color: #99f6e4; - -/* Sidebar Container */ ---container-sidebar-bg-image: none; ---container-sidebar-bg-color: transparent; ---container-sidebar-bg-position: center; ---container-sidebar-bg-attachment: scroll; ---container-sidebar-bg-repeat: repeat; ---container-sidebar-bg-size: auto; ---container-sidebar-border: none; ---container-sidebar-border-radius: 0; - -/* Bottom A Container */ ---container-bottom-a-bg-image: none; ---container-bottom-a-bg-color: transparent; ---container-bottom-a-bg-position: center; ---container-bottom-a-bg-attachment: fixed; ---container-bottom-a-bg-repeat: no-repeat; ---container-bottom-a-bg-size: cover; ---container-bottom-a-border: none; ---container-bottom-a-border-radius: 5px; - -/* Bottom B Container */ ---container-bottom-b-bg-image: none; ---container-bottom-b-bg-color: transparent; ---container-bottom-b-bg-position: center; ---container-bottom-b-bg-attachment: fixed; ---container-bottom-b-bg-repeat: no-repeat; ---container-bottom-b-bg-size: cover; ---container-bottom-b-border: none; ---container-bottom-b-border-radius: 0; - -/* ===== BORDERS ===== */ ---border-width: 1px; ---border-style: solid; ---border-color: #334155; ---border-color-translucent: #ffffff26; ---border-radius: .25rem; ---border-radius-sm: .2rem; ---border-radius-lg: .3rem; ---border-radius-xl: .3rem; ---border-radius-xxl: 2rem; ---border-radius-2xl: var(--border-radius-xxl); ---border-radius-pill: 50rem; - -/* ===== SHADOWS ===== */ ---box-shadow: 0 .5rem 1rem #00000066; ---box-shadow-sm: 0 .125rem .25rem #00000040; ---box-shadow-lg: 0 1rem 3rem #00000080; ---box-shadow-inset: inset 0 1px 2px #00000040; - -/* ===== FOCUS & FORMS ===== */ ---focus-ring-width: .25rem; ---focus-ring-opacity: .6; ---focus-ring-color: #14b8a666; ---input-color: #e2e8f0; ---input-bg: #1e293b; ---input-border-color: #475569; ---input-focus-border-color: #14b8a6; ---input-focus-box-shadow: 0 0 0 0.25rem rgba(20, 184, 166, 0.25); ---input-placeholder-color: #94a3b8; ---input-disabled-bg: #0f172a; ---input-disabled-border-color: #334155; ---form-valid-color: #34d399; ---form-valid-border-color: #34d399; ---form-invalid-color: #fb7185; ---form-invalid-border-color: #fb7185; - -/* ===== BUTTONS ===== */ ---btn-border-radius: var(--border-radius); ---btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3); - -/* ===== CARDS ===== */ ---card-spacer-y: 1rem; ---card-spacer-x: 1rem; ---card-title-spacer-y: 0.5rem; ---card-border-width: 1px; ---card-border-color: var(--border-color); ---card-border-radius: var(--border-radius); ---card-box-shadow: none; ---card-inner-border-radius: calc(var(--border-radius) - 1px); ---card-cap-padding-y: 0.5rem; ---card-cap-padding-x: 1rem; ---card-cap-bg: rgba(255, 255, 255, 0.03); ---card-cap-color: var(--body-color); ---card-height: auto; ---card-color: var(--body-color); ---card-bg: var(--secondary-bg); ---card-img-overlay-padding: 1rem; ---card-group-margin: 0.75rem; - -/* ===== VIRTUEMART (VM) ===== */ -/* VM Surfaces */ ---vm-surface: var(--secondary-bg); ---vm-surface-2: var(--tertiary-bg); ---vm-text: var(--body-color); ---vm-text-strong: #ffffff; ---vm-text-muted: var(--gray-600); ---vm-border: var(--border-color); ---vm-price-color: var(--success); - -/* VM Layout and Density */ ---vm-container-max-width: 1200px; ---vm-section-gap: 2rem; ---vm-block-radius: var(--border-radius); ---vm-block-shadow: var(--box-shadow-sm); - -/* VM Typography */ ---vm-category-title-size: 2rem; ---vm-subcategory-title-size: 1.5rem; ---vm-page-title-size: 1.75rem; ---vm-products-type-title-size: 1.25rem; ---vm-product-title-size: 1.125rem; ---vm-product-title-weight: 500; ---vm-products-type-title-weight: 600; ---vm-price-size: 1.5rem; ---vm-price-detail-size: 1.125rem; ---vm-price-desc-size: 0.875rem; - -/* VM Controls */ ---vm-input-radius: var(--border-radius); ---vm-input-shadow: var(--box-shadow-sm); ---vm-qty-width: 80px; ---vm-cart-dropdown-min-width: 300px; - -/* VM Alerts */ ---vm-alert-radius: var(--border-radius); ---vm-alert-shadow: var(--box-shadow-sm); ---vm-availability-bg: var(--success-bg-subtle); ---vm-availability-text: var(--success); - -/* VM Buttons */ ---vm-btn-padding-x: 1rem; ---vm-btn-padding-y: 0.5rem; ---vm-btn-radius: var(--border-radius); ---vm-btn-shadow: var(--box-shadow-sm); ---vm-btn-primary-bg: var(--primary); ---vm-btn-primary-text: #ffffff; ---vm-btn-primary-border: var(--primary); ---vm-btn-secondary-bg: var(--secondary); ---vm-btn-secondary-text: #ffffff; ---vm-btn-secondary-border: var(--secondary); - -/* VM Image Overlay Controls */ ---vm-image-overlay-gap-x: 0.5rem; ---vm-image-overlay-gap-y: 0.5rem; ---vm-image-overlay-raise: 0.25rem; ---vm-image-overlay-btn-size: 2.5rem; ---vm-image-overlay-btn-radius: 50%; ---vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7); ---vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85); ---vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2); ---vm-image-overlay-btn-border-width: 1px; ---vm-image-overlay-btn-color: var(--body-color); ---vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - -/* VM Vendor Menu */ ---vm-vendor-menu-bg: var(--secondary-bg); ---vm-vendor-menu-border: var(--border-color); ---vm-vendor-menu-radius: var(--border-radius); ---vm-vendor-menu-shadow: var(--box-shadow-sm); ---vm-vendor-menu-item-gap: 0.25rem; ---vm-vendor-menu-item-padding-x: 1rem; ---vm-vendor-menu-item-padding-y: 0.5rem; ---vm-vendor-menu-pill-radius: 50rem; ---vm-vendor-menu-link: var(--link-color); ---vm-vendor-menu-link-hover: var(--link-hover-color); ---vm-vendor-menu-link-active: var(--primary); ---vm-vendor-menu-hover-bg: var(--tertiary-bg); - -/* ===== GABLE ===== */ ---gab-blue: #60a5fa; ---gab-green: #34d399; ---gab-red: #f87171; ---gab-orange: #fb923c; ---gab-gray1: #94a3b8; ---gab-gray2: #cbd5e1; ---gab-gray3: #e2e8f0; -} - -.btn { ---btn-padding-x: 1rem; ---btn-padding-y: 0.6rem; ---btn-font-family: inherit; ---btn-font-size: 1rem; ---btn-font-weight: 400; ---btn-line-height: 1.5; ---btn-color: var(--white); ---btn-bg: transparent; ---btn-border-width: 1px; ---btn-border-color: transparent; ---btn-border-radius: 0.25rem; ---btn-active-border-color: transparent; ---btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); ---btn-disabled-opacity: 0.65; ---btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); -display: inline-block; -padding: var(--btn-padding-y) var(--btn-padding-x); -font-family: var(--btn-font-family); -font-size: var(--btn-font-size); -font-weight: var(--btn-font-weight); -line-height: var(--btn-line-height); -color: var(--btn-color); -text-align: center; -text-decoration: none; -vertical-align: middle; -cursor: pointer; --webkit-user-select: none; --moz-user-select: none; --ms-user-select: none; -user-select: none; -border: var(--btn-border-width) solid var(--btn-border-color); -border-radius: var(--btn-border-radius); -background-color: var(--btn-bg); --webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; --o-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; -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; -transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -} - -.btn-primary { ---btn-color: #ffffff; ---btn-bg: #14b8a6; ---btn-border-color: #14b8a6; ---btn-hover-color: #ffffff; ---btn-hover-bg: #0d9488; ---btn-hover-border-color: #0d9488; ---btn-focus-shadow-rgb: 20, 184, 166; ---btn-active-color: #ffffff; ---btn-active-bg: #0d9488; ---btn-active-border-color: #0f766e; -} - -.btn-secondary { ---btn-color: var(--nav-text-color); ---btn-bg: var(--nav-bg-color); ---btn-border-color: #475569; ---btn-hover-color: #fff; ---btn-hover-bg: #115e59; ---btn-hover-border-color: #134e4a; ---btn-focus-shadow-rgb: 20, 184, 166; ---btn-active-color: #fff; ---btn-active-bg: #134e4a; ---btn-active-border-color: #134e4a; -} - -.btn-outline-light { ---btn-color: #e2e8f0; ---btn-border-color: #e2e8f0; ---btn-hover-color: #0f172a; ---btn-hover-bg: #e2e8f0; ---btn-hover-border-color: #e2e8f0; ---btn-active-color: #0f172a; ---btn-active-bg: #cbd5e1; ---btn-active-border-color: #cbd5e1; ---gradient: none; -} - -.btn-link { ---btn-font-weight: 400; ---btn-color: var(--color-link); ---btn-bg: transparent; ---btn-border-color: transparent; ---btn-hover-color: var(--link-hover-color); ---btn-hover-border-color: transparent; ---btn-active-color: var(--link-hover-color); ---btn-active-border-color: transparent; ---btn-disabled-color: #64748b; ---btn-disabled-border-color: transparent; ---btn-box-shadow: none; ---btn-focus-shadow-rgb: 20, 184, 166; -text-decoration: underline; -} - -.btn-secondary { ---btn-color: var(--color-hover); ---btn-bg: var(--nav-bg-color); -} diff --git a/src/media/css/colors/light/colors_alternative.css b/src/media/css/colors/light/colors_alternative.css deleted file mode 100644 index a770317..0000000 --- a/src/media/css/colors/light/colors_alternative.css +++ /dev/null @@ -1,742 +0,0 @@ -@charset "UTF-8"; -/* Copyright (C) 2025 Moko Consulting - - This file is part of a Moko Consulting project. - - SPDX-License-Identifier: GPL-3.0-or-later - - - - # FILE INFORMATION - DEFGROUP: Joomla.Template.Site - INGROUP: MokoCassiopeia - PATH: ./media/templates/site/mokocassiopeia/css/global/light/colors_alternative.css - VERSION: 03.05.00 - BRIEF: Alternative light mode color definitions (Teal & Purple) for MokoCassiopeia template - */ - -/* ----------------------------------------------- - * ALTERNATIVE LIGHT THEME - TEAL & PURPLE - * --------------------------------------------- */ - -:root[data-bs-theme="light"] { -color-scheme: light; - -/* ===== BRAND & THEME COLORS ===== */ ---color-primary: #0d9488; ---accent-color-primary: #a855f7; ---accent-color-secondary: #c084fc; - -/* ===== NAVIGATION ===== */ ---mainmenu-nav-link-color: white; ---nav-text-color: white; ---nav-bg-color: #0d9488; - -/* ===== LINKS ===== */ ---color-link: #7c3aed; ---color-hover: #a855f7; ---link-color: #7c3aed; ---link-color-rgb: 124, 58, 237; ---link-decoration: underline; ---link-hover-color: #a855f7; ---link-hover-color-rgb: 168, 85, 247; ---link-active-color: var(--link-color); - -/* ===== OFFCANVAS ===== */ ---offcanvas-color: var(--body-color); ---offcanvas-padding-x: 1rem; ---offcanvas-padding-y: 1rem; - -/* ===== NAVBAR ===== */ ---navbar-padding-x: 1rem; ---navbar-padding-y: 0.5rem; ---navbar-color: var(--nav-text-color); ---navbar-active-color: var(--mainmenu-nav-link-color); ---navbar-disabled-color: #94a3b8; ---navbar-brand-padding-y: 0.3125rem; ---navbar-brand-margin-end: 1rem; ---navbar-brand-font-size: 1.25rem; ---navbar-brand-color: var(--nav-text-color); ---navbar-brand-active-color: var(--mainmenu-nav-link-color); ---navbar-nav-link-padding-x: 0.5rem; ---navbar-toggler-padding-y: 0.25rem; ---navbar-toggler-padding-x: 0.75rem; ---navbar-toggler-font-size: 1.25rem; ---navbar-toggler-border-color: rgba(0, 0, 0, 0.1); ---navbar-toggler-border-radius: 0.25rem; ---navbar-toggler-focus-width: 0.25rem; ---navbar-toggler-transition: box-shadow 0.15s ease-in-out; ---nav-link-padding-x: 1rem; ---nav-link-padding-y: 0.5rem; ---nav-link-font-weight: 400; ---nav-link-color: var(--nav-text-color); ---nav-link-active-color: var(--mainmenu-nav-link-color); ---nav-link-disabled-color: #94a3b8; - -/* ===== TYPOGRAPHY & BODY ===== */ ---font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; ---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: #1e293b; ---body-color-rgb: 30, 41, 59; ---body-bg: #fff; ---body-bg-rgb: 255, 255, 255; ---heading-color: inherit; ---emphasis-color: #0f172a; ---emphasis-color-rgb: 15, 23, 42; ---secondary-color: #475569; ---secondary-color-rgb: 71, 85, 105; ---tertiary-color: #64748b; ---tertiary-color-rgb: 100, 116, 139; ---muted-color: #64748b; ---code-color: #c026d3; ---code-color-ink: var(--code-color, #c026d3); ---highlight-color: #1e293b; ---highlight-bg: #fde68a; - -/* ===== LAYOUT & SPACING ===== */ ---padding-x: 0.15rem; ---padding-y: 0.15rem; ---bg-opacity: 1; ---nav-toggle-size: 3rem; ---gradient: linear-gradient(180deg, #ffffff26, #fff0); ---secondary-bg: #f1f5f9; ---secondary-bg-rgb: 241, 245, 249; ---tertiary-bg: #f8fafc; ---tertiary-bg-rgb: 248, 250, 252; ---hr-color: var(--border-color, #e2e8f0); ---border-color-soft: var(--border-color, #e2e8f0); ---kbd-bg: var(--secondary-bg, #f1f5f9); ---kbd-ink: var(--body-bg, #fff); ---toc-bg: var(--secondary-bg, #f1f5f9); ---toc-ink: var(--color-primary, #0d9488); ---selection-bg: var(--highlight-bg, #fde68a); ---selection-ink: var(--body-color, #1e293b); ---border: 5px; - -/* ===== BREAKPOINTS ===== */ ---bp-xs: 0; ---bp-sm: 576px; ---bp-md: 768px; ---bp-lg: 992px; ---bp-xl: 1200px; - -/* ===== BOOTSTRAP PALETTE ===== */ ---primary: #0d9488; ---secondary: #64748b; ---success: #10b981; ---info: #0ea5e9; ---warning: #f59e0b; ---danger: #f43f5e; ---light: #f8fafc; ---dark: #334155; ---primary-rgb: 13, 148, 136; ---secondary-rgb: 100, 116, 139; ---success-rgb: 16, 185, 129; ---info-rgb: 14, 165, 233; ---warning-rgb: 245, 158, 11; ---danger-rgb: 244, 63, 94; ---light-rgb: 248, 250, 252; ---dark-rgb: 51, 65, 85; ---primary-text-emphasis: #0f766e; ---secondary-text-emphasis: #334155; ---success-text-emphasis: #047857; ---info-text-emphasis: #0369a1; ---warning-text-emphasis: #c2410c; ---danger-text-emphasis: #be123c; ---light-text-emphasis: #475569; ---dark-text-emphasis: #475569; ---primary-bg-subtle: #ccfbf1; ---secondary-bg-subtle: #e2e8f0; ---success-bg-subtle: #d1fae5; ---info-bg-subtle: #e0f2fe; ---warning-bg-subtle: #fef3c7; ---danger-bg-subtle: #ffe4e6; ---light-bg-subtle: #fcfcfd; ---dark-bg-subtle: #cbd5e1; ---primary-border-subtle: #99f6e4; ---secondary-border-subtle: #cbd5e1; ---success-border-subtle: #a7f3d0; ---info-border-subtle: #bae6fd; ---warning-border-subtle: #fde68a; ---danger-border-subtle: #fecdd3; ---light-border-subtle: #f1f5f9; ---dark-border-subtle: #94a3b8; - -/* ===== STANDARD COLORS ===== */ ---blue: #3b82f6; ---indigo: #6366f1; ---purple: #a855f7; ---pink: #ec4899; ---red: #ef4444; ---orange: #f97316; ---yellow: #f59e0b; ---green: #10b981; ---teal: #14b8a6; ---cyan: #06b6d4; ---black: #000; ---white: #fff; - -/* ===== GRAY SCALE ===== */ ---gray-100: #f8fafc; ---gray-200: #f1f5f9; ---gray-300: #e2e8f0; ---gray-400: #cbd5e1; ---gray-500: #94a3b8; ---gray-600: #64748b; ---gray-700: #475569; ---gray-800: #334155; ---gray-900: #1e293b; ---white-rgb: 255, 255, 255; ---black-rgb: 0, 0, 0; - -/* ===== HEADER BACKGROUND ===== */ ---header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); ---header-background-attachment: fixed; ---header-background-repeat: repeat; ---header-background-size: auto; - -/* ===== CONTAINER BACKGROUNDS ===== */ -/* Below Topbar Container */ ---container-below-topbar-bg-image: none; ---container-below-topbar-bg-color: transparent; ---container-below-topbar-bg-position: auto; ---container-below-topbar-bg-attachment: fixed; ---container-below-topbar-bg-repeat: repeat; ---container-below-topbar-bg-size: auto; ---container-below-topbar-border: none; ---container-below-topbar-border-radius: 0; - -/* Top A Container */ ---container-top-a-bg-image: none; ---container-top-a-bg-color: transparent; ---container-top-a-bg-position: auto; ---container-top-a-bg-attachment: fixed; ---container-top-a-bg-repeat: repeat; ---container-top-a-bg-size: auto; ---container-top-a-border: none; ---container-top-a-border-radius: 0; - -/* Top B Container */ ---container-top-b-bg-image: none; ---container-top-b-bg-color: transparent; ---container-top-b-bg-position: auto; ---container-top-b-bg-attachment: fixed; ---container-top-b-bg-repeat: repeat; ---container-top-b-bg-size: auto; ---container-top-b-border: none; ---container-top-b-border-radius: 0; - -/* TOC Container */ ---container-toc-bg: var(--mainmenu-nav-link-color); ---container-toc-color: var(--color-primary); - -/* Sidebar Container */ ---container-sidebar-bg-image: none; ---container-sidebar-bg-color: transparent; ---container-sidebar-bg-position: auto; ---container-sidebar-bg-attachment: scroll; ---container-sidebar-bg-repeat: repeat; ---container-sidebar-bg-size: auto; ---container-sidebar-border: none; ---container-sidebar-border-radius: 0; - -/* Bottom A Container */ ---container-bottom-a-bg-image: none; ---container-bottom-a-bg-color: transparent; ---container-bottom-a-bg-position: auto; ---container-bottom-a-bg-attachment: fixed; ---container-bottom-a-bg-repeat: repeat; ---container-bottom-a-bg-size: auto; ---container-bottom-a-border: none; ---container-bottom-a-border-radius: 0; - -/* Bottom B Container */ ---container-bottom-b-bg-image: none; ---container-bottom-b-bg-color: transparent; ---container-bottom-b-bg-position: auto; ---container-bottom-b-bg-attachment: fixed; ---container-bottom-b-bg-repeat: repeat; ---container-bottom-b-bg-size: auto; ---container-bottom-b-border: none; ---container-bottom-b-border-radius: 0; - -/* ===== BORDERS ===== */ ---border-width: 1px; ---border-style: solid; ---border-color: #e2e8f0; ---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 #0000001a; ---box-shadow-sm: 0 .125rem .25rem #0000000d; ---box-shadow-lg: 0 1rem 3rem #00000026; ---box-shadow-inset: inset 0 1px 2px #0000000d; - -/* ===== FOCUS & FORMS ===== */ ---focus-ring-width: .25rem; ---focus-ring-opacity: .25; ---focus-ring-color: #0d948840; ---input-color: #1e293b; ---input-bg: #f8fafc; ---input-border-color: #cbd5e1; ---input-focus-border-color: #14b8a6; ---input-focus-box-shadow: 0 0 0 0.25rem rgba(13, 148, 136, 0.25); ---input-placeholder-color: #64748b; ---input-disabled-bg: #e2e8f0; ---input-disabled-border-color: #cbd5e1; ---form-valid-color: #10b981; ---form-valid-border-color: #10b981; ---form-invalid-color: #f43f5e; ---form-invalid-border-color: #f43f5e; - -/* ===== BUTTONS ===== */ ---btn-border-radius: var(--border-radius); ---btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); - -/* ===== CARDS ===== */ ---card-spacer-y: 1rem; ---card-spacer-x: 1rem; ---card-title-spacer-y: 0.5rem; ---card-border-width: 1px; ---card-border-color: var(--border-color); ---card-border-radius: var(--border-radius); ---card-box-shadow: none; ---card-inner-border-radius: calc(var(--border-radius) - 1px); ---card-cap-padding-y: 0.5rem; ---card-cap-padding-x: 1rem; ---card-cap-bg: rgba(0, 0, 0, 0.03); ---card-cap-color: var(--body-color); ---card-height: auto; ---card-color: var(--body-color); ---card-bg: var(--body-bg); ---card-img-overlay-padding: 1rem; ---card-group-margin: 0.75rem; - -/* ===== VIRTUEMART (VM) ===== */ -/* VM Surfaces */ ---vm-surface: #ffffff; ---vm-surface-2: #f8fafc; ---vm-text: var(--body-color); ---vm-text-strong: #0f172a; ---vm-text-muted: #64748b; ---vm-border: var(--border-color); ---vm-price-color: var(--success); - -/* VM Layout and Density */ ---vm-container-max-width: 1200px; ---vm-section-gap: 2rem; ---vm-block-radius: var(--border-radius); ---vm-block-shadow: var(--box-shadow-sm); - -/* VM Typography */ ---vm-category-title-size: 2rem; ---vm-subcategory-title-size: 1.5rem; ---vm-page-title-size: 1.75rem; ---vm-products-type-title-size: 1.25rem; ---vm-product-title-size: 1.125rem; ---vm-product-title-weight: 500; ---vm-products-type-title-weight: 600; ---vm-price-size: 1.5rem; ---vm-price-detail-size: 1.125rem; ---vm-price-desc-size: 0.875rem; - -/* VM Controls */ ---vm-input-radius: var(--border-radius); ---vm-input-shadow: var(--box-shadow-sm); ---vm-qty-width: 80px; ---vm-cart-dropdown-min-width: 300px; - -/* VM Alerts */ ---vm-alert-radius: var(--border-radius); ---vm-alert-shadow: var(--box-shadow-sm); ---vm-availability-bg: var(--success-bg-subtle); ---vm-availability-text: var(--success); - -/* VM Buttons */ ---vm-btn-padding-x: 1rem; ---vm-btn-padding-y: 0.5rem; ---vm-btn-radius: var(--border-radius); ---vm-btn-shadow: var(--box-shadow-sm); ---vm-btn-primary-bg: var(--primary); ---vm-btn-primary-text: #ffffff; ---vm-btn-primary-border: var(--primary); ---vm-btn-secondary-bg: var(--secondary); ---vm-btn-secondary-text: #ffffff; ---vm-btn-secondary-border: var(--secondary); - -/* VM Image Overlay Controls */ ---vm-image-overlay-gap-x: 0.5rem; ---vm-image-overlay-gap-y: 0.5rem; ---vm-image-overlay-raise: 0.25rem; ---vm-image-overlay-btn-size: 2.5rem; ---vm-image-overlay-btn-radius: 50%; ---vm-image-overlay-btn-bg: rgba(255, 255, 255, 0.9); ---vm-image-overlay-btn-bg-hover: rgba(255, 255, 255, 1); ---vm-image-overlay-btn-border-color: rgba(0, 0, 0, 0.1); ---vm-image-overlay-btn-border-width: 1px; ---vm-image-overlay-btn-color: var(--body-color); ---vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - -/* VM Vendor Menu */ ---vm-vendor-menu-bg: var(--body-bg); ---vm-vendor-menu-border: var(--border-color); ---vm-vendor-menu-radius: var(--border-radius); ---vm-vendor-menu-shadow: var(--box-shadow-sm); ---vm-vendor-menu-item-gap: 0.25rem; ---vm-vendor-menu-item-padding-x: 1rem; ---vm-vendor-menu-item-padding-y: 0.5rem; ---vm-vendor-menu-pill-radius: 50rem; ---vm-vendor-menu-link: var(--link-color); ---vm-vendor-menu-link-hover: var(--link-hover-color); ---vm-vendor-menu-link-active: var(--primary); ---vm-vendor-menu-hover-bg: var(--secondary-bg); - -/* ===== GABLE ===== */ ---gab-blue: #3b82f6; ---gab-green: #10b981; ---gab-red: #ef4444; ---gab-orange: #f97316; ---gab-gray1: #475569; ---gab-gray2: #64748b; ---gab-gray3: #94a3b8; -} - -.btn { ---btn-padding-x: 1rem; ---btn-padding-y: 0.6rem; ---btn-font-family: inherit; ---btn-font-size: 1rem; ---btn-font-weight: 400; ---btn-line-height: 1.5; ---btn-color: #1e293b; ---btn-bg: transparent; ---btn-border-width: 1px; ---btn-border-color: transparent; ---btn-border-radius: 0.25rem; ---btn-active-border-color: transparent; ---btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); ---btn-disabled-opacity: 0.65; ---btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); -display: inline-block; -padding: var(--btn-padding-y) var(--btn-padding-x); -font-family: var(--btn-font-family); -font-size: var(--btn-font-size); -font-weight: var(--btn-font-weight); -line-height: var(--btn-line-height); -color: var(--btn-color); -text-align: center; -text-decoration: none; -vertical-align: middle; -cursor: pointer; --webkit-user-select: none; --moz-user-select: none; --ms-user-select: none; -user-select: none; -border: var(--btn-border-width) solid var(--btn-border-color); -border-radius: var(--btn-border-radius); -background-color: var(--btn-bg); --webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; --o-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; -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; -transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -} - -.btn-primary { ---btn-color: #ffffff; ---btn-bg: #0d9488; ---btn-border-color: #0d9488; ---btn-hover-color: #ffffff; ---btn-hover-bg: #0f766e; ---btn-hover-border-color: #0f766e; ---btn-focus-shadow-rgb: 13, 148, 136; ---btn-active-color: #ffffff; ---btn-active-bg: #0f766e; ---btn-active-border-color: #115e59; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #ffffff; ---btn-disabled-bg: #0d9488; ---btn-disabled-border-color: #0d9488; -} - -.btn-secondary { ---btn-color: #ffffff; ---btn-bg: #64748b; ---btn-border-color: #64748b; ---btn-hover-color: #ffffff; ---btn-hover-bg: #475569; ---btn-hover-border-color: #475569; ---btn-focus-shadow-rgb: 100, 116, 139; ---btn-active-color: #ffffff; ---btn-active-bg: #475569; ---btn-active-border-color: #334155; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #ffffff; ---btn-disabled-bg: #64748b; ---btn-disabled-border-color: #64748b; -} - -.btn-success { ---btn-color: #ffffff; ---btn-bg: #10b981; ---btn-border-color: #10b981; ---btn-hover-color: #ffffff; ---btn-hover-bg: #059669; ---btn-hover-border-color: #059669; ---btn-focus-shadow-rgb: 16, 185, 129; ---btn-active-color: #ffffff; ---btn-active-bg: #059669; ---btn-active-border-color: #047857; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #ffffff; ---btn-disabled-bg: #10b981; ---btn-disabled-border-color: #10b981; -} - -.btn-info { ---btn-color: #ffffff; ---btn-bg: #0ea5e9; ---btn-border-color: #0ea5e9; ---btn-hover-color: #ffffff; ---btn-hover-bg: #0284c7; ---btn-hover-border-color: #0284c7; ---btn-focus-shadow-rgb: 14, 165, 233; ---btn-active-color: #ffffff; ---btn-active-bg: #0284c7; ---btn-active-border-color: #0369a1; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #ffffff; ---btn-disabled-bg: #0ea5e9; ---btn-disabled-border-color: #0ea5e9; -} - -.btn-warning { ---btn-color: #ffffff; ---btn-bg: #f59e0b; ---btn-border-color: #f59e0b; ---btn-hover-color: #ffffff; ---btn-hover-bg: #d97706; ---btn-hover-border-color: #d97706; ---btn-focus-shadow-rgb: 245, 158, 11; ---btn-active-color: #ffffff; ---btn-active-bg: #d97706; ---btn-active-border-color: #b45309; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #ffffff; ---btn-disabled-bg: #f59e0b; ---btn-disabled-border-color: #f59e0b; -} - -.btn-danger { ---btn-color: #ffffff; ---btn-bg: #f43f5e; ---btn-border-color: #f43f5e; ---btn-hover-color: #ffffff; ---btn-hover-bg: #e11d48; ---btn-hover-border-color: #e11d48; ---btn-focus-shadow-rgb: 244, 63, 94; ---btn-active-color: #ffffff; ---btn-active-bg: #e11d48; ---btn-active-border-color: #be123c; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #ffffff; ---btn-disabled-bg: #f43f5e; ---btn-disabled-border-color: #f43f5e; -} - -.btn-light { ---btn-color: #1e293b; ---btn-bg: #f8fafc; ---btn-border-color: #f8fafc; ---btn-hover-color: #1e293b; ---btn-hover-bg: #e2e8f0; ---btn-hover-border-color: #e2e8f0; ---btn-focus-shadow-rgb: 248, 250, 252; ---btn-active-color: #1e293b; ---btn-active-bg: #e2e8f0; ---btn-active-border-color: #cbd5e1; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #1e293b; ---btn-disabled-bg: #f8fafc; ---btn-disabled-border-color: #f8fafc; -} - -.btn-dark { ---btn-color: #ffffff; ---btn-bg: #334155; ---btn-border-color: #334155; ---btn-hover-color: #ffffff; ---btn-hover-bg: #1e293b; ---btn-hover-border-color: #1e293b; ---btn-focus-shadow-rgb: 51, 65, 85; ---btn-active-color: #ffffff; ---btn-active-bg: #1e293b; ---btn-active-border-color: #0f172a; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #ffffff; ---btn-disabled-bg: #334155; ---btn-disabled-border-color: #334155; -} - -.btn-outline-primary { ---btn-color: #0d9488; ---btn-border-color: #0d9488; ---btn-hover-color: #ffffff; ---btn-hover-bg: #0d9488; ---btn-hover-border-color: #0d9488; ---btn-focus-shadow-rgb: 13, 148, 136; ---btn-active-color: #ffffff; ---btn-active-bg: #0d9488; ---btn-active-border-color: #0d9488; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #0d9488; ---btn-disabled-bg: transparent; ---btn-disabled-border-color: #0d9488; ---gradient: none; -} - -.btn-outline-secondary { ---btn-color: #64748b; ---btn-border-color: #64748b; ---btn-hover-color: #ffffff; ---btn-hover-bg: #64748b; ---btn-hover-border-color: #64748b; ---btn-focus-shadow-rgb: 100, 116, 139; ---btn-active-color: #ffffff; ---btn-active-bg: #64748b; ---btn-active-border-color: #64748b; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #64748b; ---btn-disabled-bg: transparent; ---btn-disabled-border-color: #64748b; ---gradient: none; -} - -.btn-outline-success { ---btn-color: #10b981; ---btn-border-color: #10b981; ---btn-hover-color: #ffffff; ---btn-hover-bg: #10b981; ---btn-hover-border-color: #10b981; ---btn-focus-shadow-rgb: 16, 185, 129; ---btn-active-color: #ffffff; ---btn-active-bg: #10b981; ---btn-active-border-color: #10b981; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #10b981; ---btn-disabled-bg: transparent; ---btn-disabled-border-color: #10b981; ---gradient: none; -} - -.btn-outline-info { ---btn-color: #0ea5e9; ---btn-border-color: #0ea5e9; ---btn-hover-color: #ffffff; ---btn-hover-bg: #0ea5e9; ---btn-hover-border-color: #0ea5e9; ---btn-focus-shadow-rgb: 14, 165, 233; ---btn-active-color: #ffffff; ---btn-active-bg: #0ea5e9; ---btn-active-border-color: #0ea5e9; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #0ea5e9; ---btn-disabled-bg: transparent; ---btn-disabled-border-color: #0ea5e9; ---gradient: none; -} - -.btn-outline-warning { ---btn-color: #f59e0b; ---btn-border-color: #f59e0b; ---btn-hover-color: #ffffff; ---btn-hover-bg: #f59e0b; ---btn-hover-border-color: #f59e0b; ---btn-focus-shadow-rgb: 245, 158, 11; ---btn-active-color: #ffffff; ---btn-active-bg: #f59e0b; ---btn-active-border-color: #f59e0b; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #f59e0b; ---btn-disabled-bg: transparent; ---btn-disabled-border-color: #f59e0b; ---gradient: none; -} - -.btn-outline-danger { ---btn-color: #f43f5e; ---btn-border-color: #f43f5e; ---btn-hover-color: #ffffff; ---btn-hover-bg: #f43f5e; ---btn-hover-border-color: #f43f5e; ---btn-focus-shadow-rgb: 244, 63, 94; ---btn-active-color: #ffffff; ---btn-active-bg: #f43f5e; ---btn-active-border-color: #f43f5e; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #f43f5e; ---btn-disabled-bg: transparent; ---btn-disabled-border-color: #f43f5e; ---gradient: none; -} - -.btn-outline-light { ---btn-color: #f8fafc; ---btn-border-color: #f8fafc; ---btn-hover-color: #1e293b; ---btn-hover-bg: #f8fafc; ---btn-hover-border-color: #f8fafc; ---btn-focus-shadow-rgb: 248, 250, 252; ---btn-active-color: #1e293b; ---btn-active-bg: #f8fafc; ---btn-active-border-color: #f8fafc; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #f8fafc; ---btn-disabled-bg: transparent; ---btn-disabled-border-color: #f8fafc; ---gradient: none; -} - -.btn-outline-dark { ---btn-color: #334155; ---btn-border-color: #334155; ---btn-hover-color: #ffffff; ---btn-hover-bg: #334155; ---btn-hover-border-color: #334155; ---btn-focus-shadow-rgb: 51, 65, 85; ---btn-active-color: #ffffff; ---btn-active-bg: #334155; ---btn-active-border-color: #334155; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #334155; ---btn-disabled-bg: transparent; ---btn-disabled-border-color: #334155; ---gradient: none; -} - -.btn-link { ---btn-font-weight: 400; ---btn-color: var(--link-color); ---btn-bg: transparent; ---btn-border-color: transparent; ---btn-hover-color: var(--link-hover-color); ---btn-hover-border-color: transparent; ---btn-active-color: var(--link-hover-color); ---btn-active-border-color: transparent; ---btn-disabled-color: #64748b; ---btn-disabled-border-color: transparent; ---btn-box-shadow: none; ---btn-focus-shadow-rgb: 13, 148, 136; -text-decoration: underline; -} diff --git a/src/templates/joomla.asset.json b/src/templates/joomla.asset.json index 371e05a..a63c0a5 100644 --- a/src/templates/joomla.asset.json +++ b/src/templates/joomla.asset.json @@ -76,18 +76,6 @@ "uri": "media/templates/site/mokocassiopeia/css/colors/light/colors_standard.min.css", "attributes": {"media": "all"} }, - { - "name": "template.light.colors_alternative", - "type": "style", - "uri": "media/templates/site/mokocassiopeia/css/colors/light/colors_alternative.css", - "attributes": {"media": "all"} - }, - { - "name": "template.light.colors_alternative.min", - "type": "style", - "uri": "media/templates/site/mokocassiopeia/css/colors/light/colors_alternative.min.css", - "attributes": {"media": "all"} - }, { "name": "template.light.colors_custom", "type": "style",