diff --git a/.gitignore b/.gitignore index 8e190a4..d5011f1 100644 --- a/.gitignore +++ b/.gitignore @@ -208,9 +208,9 @@ htdocs/logs/ # ============================================================ # Template Customizations # ============================================================ -# Ignore custom color scheme files to prevent fork-specific customizations -src/media/css/colors/light/colors_custom.css -src/media/css/colors/dark/colors_custom.css +# Ignore custom theme files to prevent fork-specific customizations +src/media/css/theme/light.custom.css +src/media/css/theme/dark.custom.css # Ignore user customization files to prevent local development overrides src/media/css/user.css diff --git a/README.md b/README.md index 64bc9f3..ba1a93e 100644 --- a/README.md +++ b/README.md @@ -203,13 +203,13 @@ Access template configuration via **System → Site Templates → MokoCassiopeia - **Left Drawer Icon**: Font Awesome icon class (e.g., `fa-solid fa-chevron-right`) - **Right Drawer Icon**: Font Awesome icon class (e.g., `fa-solid fa-chevron-left`) -### Custom Color Palettes +### Custom Theme Palettes -MokoCassiopeia supports custom color schemes: +MokoCassiopeia supports custom theme schemes: 1. **Copy template files** from `/templates/` directory: - - `colors_custom_light.css` → `media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css` - - `colors_custom_dark.css` → `media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css` + - `theme_custom_light.css` → `media/templates/site/mokocassiopeia/css/theme/light.custom.css` + - `theme_custom_dark.css` → `media/templates/site/mokocassiopeia/css/theme/dark.custom.css` 2. **Customize** the CSS variables to match your brand colors 3. **Enable in Joomla**: System → Site Templates → MokoCassiopeia → Theme tab → Set palette to "Custom" 4. **Save** and view your site with custom colors diff --git a/docs/CSS_VARIABLES.md b/docs/CSS_VARIABLES.md index ad65e28..5a07b80 100644 --- a/docs/CSS_VARIABLES.md +++ b/docs/CSS_VARIABLES.md @@ -46,8 +46,8 @@ This document provides a complete reference of all CSS variables available in th To create custom color schemes: 1. **Copy template files** from `./templates/` directory: - - `colors_custom_light.css` → `media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css` - - `colors_custom_dark.css` → `media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css` + - `theme_custom_light.css` → `media/templates/site/mokocassiopeia/css/theme/light.custom.css` + - `theme_custom_dark.css` → `media/templates/site/mokocassiopeia/css/theme/dark.custom.css` 2. **Edit the variables** in the copied files to match your brand diff --git a/docs/MODULE_OVERRIDES.md b/docs/MODULE_OVERRIDES.md index d2c9f5b..100ba07 100644 --- a/docs/MODULE_OVERRIDES.md +++ b/docs/MODULE_OVERRIDES.md @@ -587,7 +587,7 @@ cp -r src/html/mod_virtuemart_cart src/html/mod_virtuemart_cart_original Override CSS variables in your custom color scheme: ```css -/* src/media/css/colors/light/colors_custom.css */ +/* src/media/css/theme/light.custom.css */ :root { --vm-price-color: #28a745; --vm-cart-bg: #f8f9fa; diff --git a/src/error.php b/src/error.php index 2003598..60b674f 100644 --- a/src/error.php +++ b/src/error.php @@ -68,22 +68,22 @@ $darkKey = 'template.dark.' . $colorDarkKey; try { $wa->useStyle('template.light.colors_standard'); } catch (\Throwable $e) { - $wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/colors/light/colors_standard.css'); + $wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/theme/light.standard.css'); } try { $wa->useStyle('template.dark.colors_standard'); } catch (\Throwable $e) { - $wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/colors/dark/colors_standard.css'); + $wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/theme/dark.standard.css'); } try { $wa->useStyle($lightKey); } catch (\Throwable $e) { - $wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/colors/light/' . $colorLightKey . '.css'); + $wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/theme/' . $colorLightKey . '.css'); } try { $wa->useStyle($darkKey); } catch (\Throwable $e) { - $wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/colors/dark/' . $colorDarkKey . '.css'); + $wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/theme/' . $colorDarkKey . '.css'); } // Scripts diff --git a/src/joomla.asset.json b/src/joomla.asset.json index 9516721..a084ce0 100644 --- a/src/joomla.asset.json +++ b/src/joomla.asset.json @@ -77,15 +77,15 @@ "attributes": {"media": "all"} }, { - "name": "template.light.colors_custom", + "name": "template.light.custom", "type": "style", - "uri": "media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css", + "uri": "media/templates/site/mokocassiopeia/css/theme/light.custom.css", "attributes": {"media": "all"} }, { - "name": "template.light.colors_custom.min", + "name": "template.light.custom.min", "type": "style", - "uri": "media/templates/site/mokocassiopeia/css/colors/light/colors_custom.min.css", + "uri": "media/templates/site/mokocassiopeia/css/theme/light.custom.min.css", "attributes": {"media": "all"} }, { @@ -101,26 +101,26 @@ "attributes": {"media": "all"} }, { - "name": "template.dark.colors_alternative", + "name": "template.dark.alternative", "type": "style", - "uri": "media/templates/site/mokocassiopeia/css/colors/dark/colors_alternative.css", + "uri": "media/templates/site/mokocassiopeia/css/theme/dark.alternative.css", "attributes": {"media": "all"} }, { - "name": "template.dark.colors_alternative.min", + "name": "template.dark.alternative.min", "type": "style", - "uri": "media/templates/site/mokocassiopeia/css/colors/dark/colors_alternative.min.css" + "uri": "media/templates/site/mokocassiopeia/css/theme/dark.alternative.min.css" }, { - "name": "template.dark.colors_custom", + "name": "template.dark.custom", "type": "style", - "uri": "media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css", + "uri": "media/templates/site/mokocassiopeia/css/theme/dark.custom.css", "attributes": {"media": "all"} }, { - "name": "template.dark.colors_custom.min", + "name": "template.dark.custom.min", "type": "style", - "uri": "media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.min.css", + "uri": "media/templates/site/mokocassiopeia/css/theme/dark.custom.min.css", "attributes": {"media": "all"} }, { diff --git a/src/language/en-GB/tpl_mokocassiopeia.ini b/src/language/en-GB/tpl_mokocassiopeia.ini index 81e3b70..d3ae6ce 100644 --- a/src/language/en-GB/tpl_mokocassiopeia.ini +++ b/src/language/en-GB/tpl_mokocassiopeia.ini @@ -75,9 +75,9 @@ TPL_MOKOCASSIOPEIA_COLOR_NAME_STANDARD="Standard" TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom" ; New labels for Theme tab dropdowns 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_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/theme_custom_light.css to media/templates/site/mokocassiopeia/css/theme/light.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." +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/theme_custom_dark.css to media/templates/site/mokocassiopeia/css/theme/dark.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-GB/tpl_mokocassiopeia.sys.ini b/src/language/en-GB/tpl_mokocassiopeia.sys.ini index 069405c..17019a0 100644 --- a/src/language/en-GB/tpl_mokocassiopeia.sys.ini +++ b/src/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.

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.

" +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/theme_custom_light.css to media/templates/site/mokocassiopeia/css/theme/light.custom.css or media/templates/site/mokocassiopeia/css/theme/dark.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/language/en-US/tpl_mokocassiopeia.ini b/src/language/en-US/tpl_mokocassiopeia.ini index 935e232..82aa2bb 100644 --- a/src/language/en-US/tpl_mokocassiopeia.ini +++ b/src/language/en-US/tpl_mokocassiopeia.ini @@ -75,9 +75,9 @@ TPL_MOKOCASSIOPEIA_COLOR_NAME_STANDARD="Standard" 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. 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_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/theme_custom_light.css to media/templates/site/mokocassiopeia/css/theme/light.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. 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." +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/theme_custom_dark.css to media/templates/site/mokocassiopeia/css/theme/dark.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.sys.ini b/src/language/en-US/tpl_mokocassiopeia.sys.ini index 2942d9b..af98009 100644 --- a/src/language/en-US/tpl_mokocassiopeia.sys.ini +++ b/src/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.

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.

" +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/theme_custom_light.css to media/templates/site/mokocassiopeia/css/theme/light.custom.css or media/templates/site/mokocassiopeia/css/theme/dark.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.

" diff --git a/src/media/css/colors/dark/colors_standard.css b/src/media/css/colors/dark/colors_standard.css deleted file mode 100644 index f9e03e6..0000000 --- a/src/media/css/colors/dark/colors_standard.css +++ /dev/null @@ -1,842 +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_standard.css - VERSION: 03.05.00 - BRIEF: Standard dark mode color definitions for MokoCassiopeia template - */ - -/* ----------------------------------------------- - * DARK THEME - * --------------------------------------------- */ - -:root[data-bs-theme='dark']{ -color-scheme: dark; - -/* ===== BRAND & THEME COLORS ===== */ ---color-primary: #112855; ---accent-color-primary: #3f8ff0; ---accent-color-secondary: #6fb3ff; - -/* ===== NAVIGATION ===== */ ---mainmenu-nav-link-color: #fff; ---nav-text-color: gray; ---nav-bg-color: var(--color-primary); - -/* ===== LINKS ===== */ ---color-link: white; ---color-hover: gray; ---color-active: var(--mainmenu-nav-link-color); ---link-color: #8ab4f8; ---link-color-rgb: 138, 180, 248; ---link-decoration: underline; ---link-hover-color: #c3d6ff; ---link-hover-color-rgb: 195, 214, 255; ---link-active-color: var(--link-color); - -/* ===== OFFCANVAS ===== */ ---offcanvas-color: var(--body-color); ---offcanvas-padding-x: 1rem; ---offcanvas-padding-y: 1rem; - -/* ===== NAVBAR ===== */ ---navbar-padding-x: 1rem; ---navbar-padding-y: 0.5rem; ---navbar-color: var(--nav-text-color); ---navbar-active-color: var(--mainmenu-nav-link-color); ---navbar-disabled-color: #6c757d; ---navbar-brand-padding-y: 0.3125rem; ---navbar-brand-margin-end: 1rem; ---navbar-brand-font-size: 1.25rem; ---navbar-brand-color: var(--nav-text-color); ---navbar-brand-active-color: var(--mainmenu-nav-link-color); ---navbar-nav-link-padding-x: 0.5rem; ---navbar-toggler-padding-y: 0.25rem; ---navbar-toggler-padding-x: 0.75rem; ---navbar-toggler-font-size: 1.25rem; ---navbar-toggler-border-color: rgba(255, 255, 255, 0.1); ---navbar-toggler-border-radius: 0.25rem; ---navbar-toggler-focus-width: 0.25rem; ---navbar-toggler-transition: box-shadow 0.15s ease-in-out; ---nav-link-padding-x: 1rem; ---nav-link-padding-y: 0.5rem; ---nav-link-font-weight: 400; ---nav-link-color: var(--nav-text-color); ---nav-link-active-color: var(--mainmenu-nav-link-color); ---nav-link-disabled-color: #6c757d; - -/* ===== TYPOGRAPHY & BODY ===== */ ---font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; ---font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; ---body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; ---body-font-size: 1rem; ---body-font-weight: 400; ---body-line-height: 1.5; ---body-color: #e6ebf1; ---body-color-rgb: 230, 235, 241; ---body-bg: #0e1318; ---body-bg-rgb: 14, 19, 24; ---heading-color: #f1f5f9; ---emphasis-color: #fff; ---emphasis-color-rgb: 255, 255, 255; ---secondary-color: #e6ebf1bf; ---secondary-color-rgb: 230, 235, 241; ---tertiary-color: #e6ebf180; ---tertiary-color-rgb: 230, 235, 241; ---muted-color: #6d757e; ---code-color: #ff7abd; ---code-color-ink: var(--code-color, #e93f8e); ---highlight-color: #111; ---highlight-bg: #ffe28a1a; - -/* ===== LAYOUT & SPACING ===== */ ---padding-x: 0.15rem; ---padding-y: 0.15rem; ---bg-opacity: 1; ---nav-toggle-size: 3rem; ---gradient: linear-gradient(180deg, #ffffff26, #fff0); ---secondary-bg: #151b22; ---secondary-bg-rgb: 21, 27, 34; ---tertiary-bg: #10151b; ---tertiary-bg-rgb: 16, 21, 27; ---hr-color: var(--border-color, #dfe3e7); ---border-color-soft: var(--border-color, #dfe3e7); ---kbd-bg: var(--secondary-bg, #eaedf0); ---kbd-ink: var(--body-bg, #fff); ---toc-bg: var(--secondary-bg, #eaedf0); ---toc-ink: var(--color-primary, #112855); ---selection-bg: var(--highlight-bg, #fbeea8); ---selection-ink: var(--body-color, #22262a); ---border: 5px; - -/* ===== BREAKPOINTS ===== */ ---bp-xs: 0; ---bp-sm: 576px; ---bp-md: 768px; ---bp-lg: 992px; ---bp-xl: 1200px; - -/* ===== BOOTSTRAP PALETTE ===== */ ---primary: #010156; ---secondary: #48525d; ---success: #4aa664; ---info: #4f7aa0; ---warning: #c77a00; ---danger: #c23a31; ---light: #1b2027; ---dark: #0f1318; ---primary-rgb: 1,1,86; ---secondary-rgb: 72,82,93; ---success-rgb: 74,166,100; ---info-rgb: 79,122,160; ---warning-rgb: 199,122,0; ---danger-rgb: 194,58,49; ---light-rgb: 27,32,39; ---dark-rgb: 15,19,24; ---primary-text-emphasis: #c7ccff; ---secondary-text-emphasis: #cfd6de; ---success-text-emphasis: #bde8c9; ---info-text-emphasis: #bcd6ee; ---warning-text-emphasis: #ffd9a6; ---danger-text-emphasis: #ffb7b2; ---light-text-emphasis: #d2d8df; ---dark-text-emphasis: #d2d8df; ---primary-bg-subtle: #0b1030; ---secondary-bg-subtle: #1e2430; ---success-bg-subtle: #0f2a1b; ---info-bg-subtle: #0d2232; ---warning-bg-subtle: #2a1e06; ---danger-bg-subtle: #2d1110; ---light-bg-subtle: #12161d; ---dark-bg-subtle: #1e2430; ---primary-border-subtle: #2b3a7a; ---secondary-border-subtle: #2b323b; ---success-border-subtle: #2b5b40; ---info-border-subtle: #254861; ---warning-border-subtle: #5a3c0e; ---danger-border-subtle: #5c2723; ---light-border-subtle: #222831; ---dark-border-subtle: #2b323b; - -/* ===== ALERT LINK COLORS ===== */ ---alert-primary-link-color: #b3c1ff; ---alert-secondary-link-color: #9fa6ad; ---alert-success-link-color: #a0e5b3; ---alert-info-link-color: #8eccf2; ---alert-warning-link-color: #ffe4a0; ---alert-danger-link-color: #ffa8a3; ---alert-light-link-color: #f0f4f8; ---alert-dark-link-color: #9fa6ad; - -/* ===== LIST GROUP ITEM COLORS ===== */ ---list-group-item-primary-color: #8ca3ff; ---list-group-item-primary-bg: #1a2550; ---list-group-item-primary-active-bg: #223066; ---list-group-item-secondary-color: #9fa6ad; ---list-group-item-secondary-bg: #2b323b; ---list-group-item-secondary-active-bg: #363d47; ---list-group-item-success-color: #a0e5b3; ---list-group-item-success-bg: #1e3d2d; ---list-group-item-success-active-bg: #275538; ---list-group-item-info-color: #8eccf2; ---list-group-item-info-bg: #1a3448; ---list-group-item-info-active-bg: #234459; ---list-group-item-warning-color: #ffe4a0; ---list-group-item-warning-bg: #4a3410; ---list-group-item-warning-active-bg: #5c4216; ---list-group-item-danger-color: #ffa8a3; ---list-group-item-danger-bg: #4a1e1c; ---list-group-item-danger-active-bg: #5c2823; ---list-group-item-light-color: #e9ecef; ---list-group-item-light-bg: #1e2430; ---list-group-item-light-active-bg: #282f3d; ---list-group-item-dark-color: #48525d; ---list-group-item-dark-bg: #0e1318; ---list-group-item-dark-active-bg: #161b22; - -/* ===== LINK UTILITY COLORS ===== */ ---link-primary-color: hsl(240, 98%, 50%); ---link-primary-hover-color: hsl(240, 98%, 45%); ---link-secondary-color: hsl(210, 15%, 70%); ---link-secondary-hover-color: hsl(210, 15%, 65%); ---link-success-color: hsl(120, 40%, 60%); ---link-success-hover-color: hsl(120, 40%, 55%); ---link-info-color: hsl(207, 60%, 65%); ---link-info-hover-color: hsl(207, 60%, 60%); ---link-warning-color: hsl(38, 100%, 65%); ---link-warning-hover-color: hsl(38, 100%, 60%); ---link-danger-color: hsl(3, 85%, 65%); ---link-danger-hover-color: hsl(3, 85%, 60%); ---link-light-color: hsl(210, 20%, 90%); ---link-light-hover-color: hsl(210, 20%, 85%); ---link-dark-color: hsl(210, 10%, 35%); ---link-dark-hover-color: hsl(210, 10%, 30%); - -/* ===== COMPONENT-SPECIFIC COLORS ===== */ ---mod-finder-link-hover: #5a6470; ---form-legend-color: #9fa6ad; ---border-gray: #3a4250; ---subhead-color: #9fa6ad; ---box-shadow-gray: #1a2027; ---btn-active-text-gray: #7a8490; ---indicator-success-bg: var(--success); ---item-list-color: #2a2f34; ---notification-badge-bg: var(--danger); ---content-bg-gray: #2b323b; ---taba-btn-green: #5a9c2f; ---taba-btn-blue: #3d75a8; ---taba-btn-red: #c43620; ---taba-btn-gray: #6a7080; ---taba-msg-bg: #1e2430; ---toc-link-color: #9fa6ad; ---toc-link-active-color: #91a4ff; ---choices-disabled-bg: #2b323b; ---choices-input-bg: var(--body-bg); ---choices-border-light: #48525d; ---choices-arrow-color: #9fa6ad; ---choices-inner-bg: #1a2027; ---choices-focused-border: #5472ff; ---choices-dropdown-bg: var(--body-bg); ---choices-item-bg: #1a5f75; ---choices-item-border: #1a748f; ---choices-item-hover-bg: #1a748f; ---choices-item-hover-border: #1a8aa8; ---choices-item-disabled-bg: #48525d; ---choices-item-disabled-border: #36404a; ---choices-item-highlighted: #2b323b; ---choices-input-inner-bg: #1a2027; - -/* ===== STANDARD COLORS ===== */ ---blue: #91a4ff; ---indigo: #b19cff; ---purple: #c0a5ff; ---pink: #ff8fc0; ---red: #ff7a73; ---orange: #ff9c4d; ---yellow: #ffd166; ---green: #78d694; ---teal: #76e3ff; ---cyan: #6fb7ff; ---black: #000; ---white: #fff; - -/* ===== GRAY SCALE ===== */ ---gray-100: #161a20; ---gray-200: #1b2027; ---gray-300: #222831; ---gray-400: #2b323b; ---gray-500: #36404a; ---gray-600: #48525d; ---gray-700: #5b6672; ---gray-800: #cfd6de; ---gray-900: #e6ebf1; ---white-rgb: 255, 255, 255; ---black-rgb: 0, 0, 0; - -/* ===== OPACITY UTILITIES ===== */ ---opacity-0: 0; ---opacity-5: 0.05; ---opacity-10: 0.1; ---opacity-15: 0.15; ---opacity-20: 0.2; ---opacity-25: 0.25; ---opacity-30: 0.3; ---opacity-50: 0.5; ---opacity-75: 0.75; ---opacity-100: 1; - -/* ===== COMMON SHADOW COLORS ===== */ ---shadow-color-light: rgba(var(--black-rgb), var(--opacity-30)); ---shadow-color-medium: rgba(var(--black-rgb), var(--opacity-50)); ---shadow-color-dark: rgba(var(--black-rgb), var(--opacity-75)); ---border-color-translucent: rgba(var(--white-rgb), var(--opacity-10)); ---highlight-translucent: rgba(var(--white-rgb), var(--opacity-5)); - -/* ===== HEADER BACKGROUND ===== */ ---header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); ---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: #dbe3ff; - -/* 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: #2b323b; ---border-color-translucent: #ffffff26; ---border-radius: .25rem; ---border-radius-sm: .2rem; ---border-radius-lg: .3rem; ---border-radius-xl: .3rem; ---border-radius-xxl: 2rem; ---border-radius-2xl: var(--border-radius-xxl); ---border-radius-pill: 50rem; - -/* ===== SHADOWS ===== */ ---box-shadow: 0 .5rem 1rem #00000066; ---box-shadow-sm: 0 .125rem .25rem #00000040; ---box-shadow-lg: 0 1rem 3rem #00000080; ---box-shadow-inset: inset 0 1px 2px #00000040; - -/* ===== FOCUS & FORMS ===== */ ---focus-ring-width: .25rem; ---focus-ring-opacity: .6; ---focus-ring-color: #5472ff66; ---input-color: #e6ebf1; ---input-bg: #1a2332; ---input-border-color: #3a4250; ---input-focus-border-color: #5472ff; ---input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); ---input-placeholder-color: #8894aa; ---input-disabled-bg: #0f1318; ---input-disabled-border-color: #2b323b; ---input-file-button-active-bg: #2b3441; ---form-range-thumb-active-bg: #4a5766; ---form-valid-color: #78d694; ---form-valid-border-color: #78d694; ---form-invalid-color: #ff8e86; ---form-invalid-border-color: #ff8e86; - -/* ===== BUTTONS ===== */ ---btn-border-radius: var(--border-radius); ---btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3); - -/* ===== 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-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 */ ---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: #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: 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; -} - -/* 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-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-success { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(120, 35%, 45%); - --btn-border-color: hsl(120, 35%, 45%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(120, 35%, 40%); - --btn-hover-border-color: hsl(120, 35%, 38%); - --btn-focus-shadow-rgb: 96, 180, 96; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(120, 35%, 38%); - --btn-active-border-color: hsl(120, 35%, 36%); - --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, 35%, 45%); - --btn-disabled-border-color: hsl(120, 35%, 45%); -} - -.btn-info { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(207, 55%, 55%); - --btn-border-color: hsl(207, 55%, 55%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(207, 55%, 50%); - --btn-hover-border-color: hsl(207, 55%, 48%); - --btn-focus-shadow-rgb: 100, 160, 210); - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(207, 55%, 48%); - --btn-active-border-color: hsl(207, 55%, 46%); - --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, 55%, 55%); - --btn-disabled-border-color: hsl(207, 55%, 55%); -} - -.btn-warning { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: hsl(38, 100%, 50%); - --btn-border-color: hsl(38, 100%, 50%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(38, 100%, 45%); - --btn-hover-border-color: hsl(38, 100%, 43%); - --btn-focus-shadow-rgb: 220, 170, 40; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(38, 100%, 43%); - --btn-active-border-color: hsl(38, 100%, 41%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: hsl(38, 100%, 50%); - --btn-disabled-border-color: hsl(38, 100%, 50%); -} - -.btn-danger { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(3, 82%, 50%); - --btn-border-color: hsl(3, 82%, 50%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(3, 82%, 45%); - --btn-hover-border-color: hsl(3, 82%, 43%); - --btn-focus-shadow-rgb: 220, 80, 80; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(3, 82%, 43%); - --btn-active-border-color: hsl(3, 82%, 41%); - --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, 82%, 50%); - --btn-disabled-border-color: hsl(3, 82%, 50%); -} - -.btn-light { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: hsl(210, 17%, 85%); - --btn-border-color: hsl(210, 17%, 85%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(210, 17%, 80%); - --btn-hover-border-color: hsl(210, 17%, 78%); - --btn-focus-shadow-rgb: 200, 205, 210; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(210, 17%, 78%); - --btn-active-border-color: hsl(210, 17%, 76%); - --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%, 85%); - --btn-disabled-border-color: hsl(210, 17%, 85%); -} - -.btn-dark { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(210, 10%, 20%); - --btn-border-color: hsl(210, 10%, 20%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(210, 10%, 18%); - --btn-hover-border-color: hsl(210, 10%, 16%); - --btn-focus-shadow-rgb: 60, 65, 70; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 10%, 16%); - --btn-active-border-color: hsl(210, 10%, 14%); - --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%, 20%); - --btn-disabled-border-color: hsl(210, 10%, 20%); -} - -.btn-outline-primary { - --btn-color: hsl(240, 98%, 40%); - --btn-border-color: hsl(240, 98%, 40%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(240, 98%, 40%); - --btn-hover-border-color: hsl(240, 98%, 40%); - --btn-focus-shadow-rgb: 80, 80, 180; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(240, 98%, 40%); - --btn-active-border-color: hsl(240, 98%, 40%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(240, 98%, 40%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(240, 98%, 40%); - --gradient: none; -} - -.btn-outline-secondary { - --btn-color: hsl(210, 20%, 60%); - --btn-border-color: hsl(210, 20%, 60%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(210, 20%, 60%); - --btn-hover-border-color: hsl(210, 20%, 60%); - --btn-focus-shadow-rgb: 120, 140, 160; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(210, 20%, 60%); - --btn-active-border-color: hsl(210, 20%, 60%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 20%, 60%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 20%, 60%); - --gradient: none; -} - -.btn-outline-success { - --btn-color: hsl(120, 35%, 55%); - --btn-border-color: hsl(120, 35%, 55%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(120, 35%, 55%); - --btn-hover-border-color: hsl(120, 35%, 55%); - --btn-focus-shadow-rgb: 100, 190, 100; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(120, 35%, 55%); - --btn-active-border-color: hsl(120, 35%, 55%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(120, 35%, 55%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(120, 35%, 55%); - --gradient: none; -} - -.btn-outline-info { - --btn-color: hsl(207, 55%, 65%); - --btn-border-color: hsl(207, 55%, 65%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(207, 55%, 65%); - --btn-hover-border-color: hsl(207, 55%, 65%); - --btn-focus-shadow-rgb: 110, 170, 220; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(207, 55%, 65%); - --btn-active-border-color: hsl(207, 55%, 65%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(207, 55%, 65%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(207, 55%, 65%); - --gradient: none; -} - -.btn-outline-warning { - --btn-color: hsl(38, 100%, 60%); - --btn-border-color: hsl(38, 100%, 60%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(38, 100%, 60%); - --btn-hover-border-color: hsl(38, 100%, 60%); - --btn-focus-shadow-rgb: 240, 190, 70; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(38, 100%, 60%); - --btn-active-border-color: hsl(38, 100%, 60%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(38, 100%, 60%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(38, 100%, 60%); - --gradient: none; -} - -.btn-outline-danger { - --btn-color: hsl(3, 82%, 60%); - --btn-border-color: hsl(3, 82%, 60%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(3, 82%, 60%); - --btn-hover-border-color: hsl(3, 82%, 60%); - --btn-focus-shadow-rgb: 240, 100, 100; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(3, 82%, 60%); - --btn-active-border-color: hsl(3, 82%, 60%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(3, 82%, 60%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(3, 82%, 60%); - --gradient: none; -} - -/* 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-outline-dark { - --btn-color: hsl(210, 10%, 30%); - --btn-border-color: hsl(210, 10%, 30%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(210, 10%, 30%); - --btn-hover-border-color: hsl(210, 10%, 30%); - --btn-focus-shadow-rgb: 70, 75, 80; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 10%, 30%); - --btn-active-border-color: hsl(210, 10%, 30%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 10%, 30%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 10%, 30%); - --gradient: none; -} - -/* Links as buttons */ -.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: #6d7781; - --btn-disabled-border-color: transparent; - --btn-box-shadow: none; - --btn-focus-shadow-rgb: 84, 114, 255; - text-decoration: underline; -} diff --git a/src/media/css/colors/dark/index.html b/src/media/css/colors/dark/index.html deleted file mode 100644 index 480348d..0000000 --- a/src/media/css/colors/dark/index.html +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - - Redirecting… - - - - - - - - - - - - - - - - - - - -
Redirecting to the site root… If you are not redirected, click here.
- - diff --git a/src/media/css/colors/index.html b/src/media/css/colors/index.html deleted file mode 100644 index 480348d..0000000 --- a/src/media/css/colors/index.html +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - - Redirecting… - - - - - - - - - - - - - - - - - - - -
Redirecting to the site root… If you are not redirected, click here.
- - diff --git a/src/media/css/colors/light/colors_standard.css b/src/media/css/colors/light/colors_standard.css deleted file mode 100644 index 4c71b15..0000000 --- a/src/media/css/colors/light/colors_standard.css +++ /dev/null @@ -1,851 +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_standard.css - VERSION: 03.05.00 - BRIEF: Standard light mode color definitions for MokoCassiopeia template - */ - -/* ----------------------------------------------- - * LIGHT THEME - * --------------------------------------------- */ - -:root[data-bs-theme="light"] { -color-scheme: light; - -/* ===== BRAND & THEME COLORS ===== */ ---color-primary: #112855; ---accent-color-primary: #3f8ff0; ---accent-color-secondary: #3f8ff0; - -/* ===== NAVIGATION ===== */ ---mainmenu-nav-link-color: white; ---nav-text-color: white; ---nav-bg-color: var(--color-link); - -/* ===== LINKS ===== */ ---color-link: #224FAA; ---color-hover: var(--accent-color-primary); ---link-color: #224faa; ---link-color-rgb: 34, 79, 170; ---link-decoration: underline; ---link-hover-color: #424077; ---link-hover-color-rgb: 66, 64, 119; ---link-active-color: var(--link-color); - -/* ===== OFFCANVAS ===== */ ---offcanvas-color: var(--body-color); ---offcanvas-padding-x: 1rem; ---offcanvas-padding-y: 1rem; - -/* ===== NAVBAR ===== */ ---navbar-padding-x: 1rem; ---navbar-padding-y: 0.5rem; ---navbar-color: var(--nav-text-color); ---navbar-active-color: var(--mainmenu-nav-link-color); ---navbar-disabled-color: #6c757d; ---navbar-brand-padding-y: 0.3125rem; ---navbar-brand-margin-end: 1rem; ---navbar-brand-font-size: 1.25rem; ---navbar-brand-color: var(--nav-text-color); ---navbar-brand-active-color: var(--mainmenu-nav-link-color); ---navbar-nav-link-padding-x: 0.5rem; ---navbar-toggler-padding-y: 0.25rem; ---navbar-toggler-padding-x: 0.75rem; ---navbar-toggler-font-size: 1.25rem; ---navbar-toggler-border-color: rgba(0, 0, 0, 0.1); ---navbar-toggler-border-radius: 0.25rem; ---navbar-toggler-focus-width: 0.25rem; ---navbar-toggler-transition: box-shadow 0.15s ease-in-out; ---nav-link-padding-x: 1rem; ---nav-link-padding-y: 0.5rem; ---nav-link-font-weight: 400; ---nav-link-color: var(--nav-text-color); ---nav-link-active-color: var(--mainmenu-nav-link-color); ---nav-link-disabled-color: #6c757d; - -/* ===== TYPOGRAPHY & BODY ===== */ ---font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; ---font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; ---body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); ---body-font-size: 1rem; ---body-font-weight: 400; ---body-line-height: 1.5; ---body-color: #22262a; ---body-color-rgb: 34, 38, 42; ---body-bg: #fff; ---body-bg-rgb: 255, 255, 255; ---heading-color: inherit; ---emphasis-color: #000; ---emphasis-color-rgb: 0, 0, 0; ---secondary-color: #22262abf; ---secondary-color-rgb: 34, 38, 42; ---tertiary-color: #22262a80; ---tertiary-color-rgb: 34, 38, 42; ---muted-color: #6d757e; ---code-color: #e93f8e; ---code-color-ink: var(--code-color, #e93f8e); ---highlight-color: #22262a; ---highlight-bg: #fbeea8; - -/* ===== LAYOUT & SPACING ===== */ ---padding-x: 0.15rem; ---padding-y: 0.15rem; ---bg-opacity: 1; ---nav-toggle-size: 3rem; ---gradient: linear-gradient(180deg, #ffffff26, #fff0); ---secondary-bg: #eaedf0; ---secondary-bg-rgb: 234, 237, 240; ---tertiary-bg: #f9fafb; ---tertiary-bg-rgb: 249, 250, 251; ---hr-color: var(--border-color, #dfe3e7); ---border-color-soft: var(--border-color, #dfe3e7); ---kbd-bg: var(--secondary-bg, #eaedf0); ---kbd-ink: var(--body-bg, #fff); ---toc-bg: var(--secondary-bg, #eaedf0); ---toc-ink: var(--color-primary, #112855); ---selection-bg: var(--highlight-bg, #fbeea8); ---selection-ink: var(--body-color, #22262a); ---border: 5px; - -/* ===== BREAKPOINTS ===== */ ---bp-xs: 0; ---bp-sm: 576px; ---bp-md: 768px; ---bp-lg: 992px; ---bp-xl: 1200px; - -/* ===== BOOTSTRAP PALETTE ===== */ ---primary: #010156; ---secondary: #6d757e; ---success: #448344; ---info: #30638d; ---warning: #ad6200; ---danger: #a51f18; ---light: #f9fafb; ---dark: #353b41; ---primary-rgb: 1, 1, 86; ---secondary-rgb: 109, 117, 126; ---success-rgb: 68, 131, 68; ---info-rgb: 48, 99, 141; ---warning-rgb: 173, 98, 0; ---danger-rgb: 165, 31, 24; ---light-rgb: 249, 250, 251; ---dark-rgb: 53, 59, 65; ---primary-text-emphasis: #002; ---secondary-text-emphasis: #2c2f32; ---success-text-emphasis: #1b351b; ---info-text-emphasis: #132838; ---warning-text-emphasis: #452700; ---danger-text-emphasis: #420c09; ---light-text-emphasis: #484f56; ---dark-text-emphasis: #484f56; ---primary-bg-subtle: #ccd; ---secondary-bg-subtle: #e2e3e5; ---success-bg-subtle: #dae6da; ---info-bg-subtle: #d6e0e8; ---warning-bg-subtle: #efe0cc; ---danger-bg-subtle: #edd2d1; ---light-bg-subtle: #fcfcfd; ---dark-bg-subtle: #ced4da; ---primary-border-subtle: #99b; ---secondary-border-subtle: #c5c8cb; ---success-border-subtle: #b4ceb4; ---info-border-subtle: #acc1d1; ---warning-border-subtle: #dec099; ---danger-border-subtle: #dba5a2; ---light-border-subtle: #eaedf0; ---dark-border-subtle: #adb5bd; - -/* ===== ALERT LINK COLORS ===== */ ---alert-primary-link-color: #01012a; ---alert-secondary-link-color: #34383d; ---alert-success-link-color: #213f21; ---alert-info-link-color: #172f44; ---alert-warning-link-color: #532f00; ---alert-danger-link-color: #4f0f0b; ---alert-light-link-color: #505050; ---alert-dark-link-color: #1a1c1f; - -/* ===== LIST GROUP ITEM COLORS ===== */ ---list-group-item-primary-color: #010134; ---list-group-item-primary-bg: #ccccdd; ---list-group-item-primary-active-bg: #b8b8c7; ---list-group-item-secondary-color: #41464c; ---list-group-item-secondary-bg: #e2e3e5; ---list-group-item-secondary-active-bg: #cbccce; ---list-group-item-success-color: #294f29; ---list-group-item-success-bg: #dae6da; ---list-group-item-success-active-bg: #c4cfc4; ---list-group-item-info-color: #1d3b55; ---list-group-item-info-bg: #d6e0e8; ---list-group-item-info-active-bg: #c1cad1; ---list-group-item-warning-color: #683b00; ---list-group-item-warning-bg: #efe0cc; ---list-group-item-warning-active-bg: #d7cab8; ---list-group-item-danger-color: #63130e; ---list-group-item-danger-bg: #edd2d1; ---list-group-item-danger-active-bg: #d5bdbc; ---list-group-item-light-color: #646464; ---list-group-item-light-bg: #fefefe; ---list-group-item-light-active-bg: #e5e5e5; ---list-group-item-dark-color: #202327; ---list-group-item-dark-bg: #d7d8d9; ---list-group-item-dark-active-bg: #c2c2c3; - -/* ===== LINK UTILITY COLORS ===== */ ---link-primary-color: hsl(240, 98%, 17%); ---link-primary-hover-color: #010145; ---link-secondary-color: hsl(210, 7%, 46%); ---link-secondary-hover-color: #575e65; ---link-success-color: hsl(120, 32%, 39%); ---link-success-hover-color: #366936; ---link-info-color: hsl(207, 49%, 37%); ---link-info-hover-color: #264f71; ---link-warning-color: hsl(34, 100%, 34%); ---link-warning-hover-color: #8a4e00; ---link-danger-color: hsl(3, 75%, 37%); ---link-danger-hover-color: #841913; ---link-light-color: hsl(210, 17%, 98%); ---link-light-hover-color: #fafbfc; ---link-dark-color: hsl(210, 10%, 23%); ---link-dark-hover-color: #2a2f34; - -/* ===== COMPONENT-SPECIFIC COLORS ===== */ ---mod-finder-link-hover: #e6e6e6; ---form-legend-color: #495057; ---border-gray: #b2bfcd; ---subhead-color: #495057; ---box-shadow-gray: #ddd; ---btn-active-text-gray: #A0A0A0; ---indicator-success-bg: var(--success); ---item-list-color: #F5F5F5; ---notification-badge-bg: var(--danger); ---content-bg-gray: #DDD; ---taba-btn-green: #7ac143; ---taba-btn-blue: #5091cd; ---taba-btn-red: #f44321; ---taba-btn-gray: #AAA; ---taba-msg-bg: #f5f5f5; ---toc-link-color: #767676; ---toc-link-active-color: #563d7c; ---choices-disabled-bg: #eaeaea; ---choices-input-bg: var(--white); ---choices-border-light: #ddd; ---choices-arrow-color: #333; ---choices-inner-bg: #f9f9f9; ---choices-focused-border: #b7b7b7; ---choices-dropdown-bg: var(--white); ---choices-item-bg: #00bcd4; ---choices-item-border: #00a5bb; ---choices-item-hover-bg: #00a5bb; ---choices-item-hover-border: #008fa1; ---choices-item-disabled-bg: #aaaaaa; ---choices-item-disabled-border: #919191; ---choices-item-highlighted: #f2f2f2; ---choices-input-inner-bg: #f9f9f9; - -/* ===== STANDARD COLORS ===== */ ---blue: #010156; ---indigo: #6812f3; ---purple: #6f42c2; ---pink: #e93f8e; ---red: #a51f18; ---orange: #fd7e17; ---yellow: #ad6200; ---green: #448344; ---teal: #5abfdd; ---cyan: #30638d; ---black: #000; ---white: #fff; - -/* ===== GRAY SCALE ===== */ ---gray-100: #f9fafb; ---gray-200: #eaedf0; ---gray-300: #dfe3e7; ---gray-400: #ced4da; ---gray-500: #adb5bd; ---gray-600: #6d757e; ---gray-700: #484f56; ---gray-800: #353b41; ---gray-900: #22262a; ---white-rgb: 255, 255, 255; ---black-rgb: 0, 0, 0; - -/* ===== OPACITY UTILITIES ===== */ ---opacity-0: 0; ---opacity-5: 0.05; ---opacity-10: 0.1; ---opacity-15: 0.15; ---opacity-20: 0.2; ---opacity-25: 0.25; ---opacity-30: 0.3; ---opacity-50: 0.5; ---opacity-75: 0.75; ---opacity-100: 1; - -/* ===== COMMON SHADOW COLORS ===== */ ---shadow-color-light: rgba(var(--black-rgb), var(--opacity-15)); ---shadow-color-medium: rgba(var(--black-rgb), var(--opacity-25)); ---shadow-color-dark: rgba(var(--black-rgb), var(--opacity-30)); ---border-color-translucent: rgba(var(--black-rgb), var(--opacity-10)); ---highlight-translucent: rgba(var(--white-rgb), var(--opacity-15)); - -/* ===== HEADER BACKGROUND ===== */ ---header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); ---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: #dfe3e7; ---border-color-translucent: #0000002d; ---border-radius: .25rem; ---border-radius-sm: .2rem; ---border-radius-lg: .3rem; ---border-radius-xl: .3rem; ---border-radius-xxl: 2rem; ---border-radius-2xl: var(--border-radius-xxl)*2; ---border-radius-pill: 50rem; - -/* ===== SHADOWS ===== */ ---box-shadow: 0 .5rem 1rem #00000026; ---box-shadow-sm: 0 .125rem .25rem #00000013; ---box-shadow-lg: 0 1rem 3rem #0000002d; ---box-shadow-inset: inset 0 1px 2px #00000013; - -/* ===== FOCUS & FORMS ===== */ ---focus-ring-width: .25rem; ---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%); ---input-file-button-active-bg: #dee1e4; ---form-range-thumb-active-bg: #b8bfcc; ---form-valid-color: #448344; ---form-valid-border-color: #448344; ---form-invalid-color: #a51f18; ---form-invalid-border-color: #a51f18; - -/* ===== BUTTONS ===== */ ---btn-border-radius: var(--border-radius); ---btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); - -/* ===== 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: #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 */ ---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: inherit; ---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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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; -} diff --git a/src/media/css/colors/light/index.html b/src/media/css/colors/light/index.html deleted file mode 100644 index 480348d..0000000 --- a/src/media/css/colors/light/index.html +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - - Redirecting… - - - - - - - - - - - - - - - - - - - -
Redirecting to the site root… If you are not redirected, click here.
- - diff --git a/src/templateDetails.xml b/src/templateDetails.xml index a1b8f2b..f29f11c 100644 --- a/src/templateDetails.xml +++ b/src/templateDetails.xml @@ -41,7 +41,7 @@ Jonathan Miller || Moko Consulting hello@mokoconsulting.tech (C)GNU General Public License Version 3 - 2026 Moko Consulting - 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.

]]> + 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/theme_custom_light.css to media/templates/site/mokocassiopeia/css/theme/light.custom.css or templates/theme_custom_dark.css to media/templates/site/mokocassiopeia/css/theme/dark.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.

]]> 1 component.php diff --git a/templates/README.md b/templates/README.md index 714770f..caa7de1 100644 --- a/templates/README.md +++ b/templates/README.md @@ -9,7 +9,7 @@ This directory contains template files for custom color schemes that can be copied to your template installation. -## Custom Color Palette Templates +## Custom Theme Palette Templates Template files are provided for both light and dark themes with complete Bootstrap button definitions: @@ -17,18 +17,18 @@ Template files are provided for both light and dark themes with complete Bootstr | File | Theme | Description | |------|-------|-------------| -| `colors_custom_light.css` | Light | Custom light theme with all Bootstrap button variants | -| `colors_custom_dark.css` | Dark | Custom dark theme with all Bootstrap button variants | +| `theme_custom_light.css` | Light | Custom light theme with all Bootstrap button variants | +| `theme_custom_dark.css` | Dark | Custom dark theme with all Bootstrap button variants | -### Using Custom Color Templates +### Using Custom Theme Templates -1. **Copy** the template file to your template's CSS directory: +1. **Copy** the template file to your template's CSS theme directory: ```bash # For light theme - cp templates/colors_custom_light.css src/media/css/colors/light/colors_custom.css + cp templates/theme_custom_light.css src/media/css/theme/light.custom.css # For dark theme - cp templates/colors_custom_dark.css src/media/css/colors/dark/colors_custom.css + cp templates/theme_custom_dark.css src/media/css/theme/dark.custom.css ``` 2. **Customize** the CSS variables in your copied file: @@ -37,12 +37,12 @@ Template files are provided for both light and dark themes with complete Bootstr - Update button variants if needed 3. **Register** in `src/joomla.asset.json`: - - Ensure `template.light.colors_custom` and `template.dark.colors_custom` assets are defined + - Ensure `template.light.custom` and `template.dark.custom` assets are defined - Already configured by default in the asset manifest 4. **Activate** via Joomla admin: - Go to System → Site Templates → MokoCassiopeia - - Select "Custom" in the Color Palette dropdown + - Select "Custom" in the Theme Palette dropdown - Save and check your site ### Bootstrap Button Variants Included @@ -57,7 +57,7 @@ All template files include complete definitions for: Each button variant includes hover, active, focus, and disabled states using CSS variables. -## Color System Features +## Theme System Features ### CSS Variable Structure diff --git a/templates/colors_custom_dark.css b/templates/theme_custom_dark.css similarity index 98% rename from templates/colors_custom_dark.css rename to templates/theme_custom_dark.css index 724f16c..399c0c3 100644 --- a/templates/colors_custom_dark.css +++ b/templates/theme_custom_dark.css @@ -10,7 +10,7 @@ # FILE INFORMATION DEFGROUP: Joomla.Template.Site INGROUP: MokoCassiopeia.Templates - PATH: ./templates/colors_custom_dark.css + PATH: ./templates/theme_custom_dark.css VERSION: 03.08.04 BRIEF: Custom dark theme color template with Bootstrap button definitions */ @@ -19,10 +19,10 @@ * CUSTOM DARK THEME TEMPLATE * * Copy this file to: - * src/media/css/colors/dark/colors_custom.css + * src/media/css/theme/dark.custom.css * * Then register it in src/joomla.asset.json under - * template.dark.colors_custom asset. + * template.dark.custom asset. * --------------------------------------------- */ :root[data-bs-theme='dark'] { diff --git a/templates/colors_custom_light.css b/templates/theme_custom_light.css similarity index 98% rename from templates/colors_custom_light.css rename to templates/theme_custom_light.css index b2af9af..567c74b 100644 --- a/templates/colors_custom_light.css +++ b/templates/theme_custom_light.css @@ -10,7 +10,7 @@ # FILE INFORMATION DEFGROUP: Joomla.Template.Site INGROUP: MokoCassiopeia.Templates - PATH: ./templates/colors_custom_light.css + PATH: ./templates/theme_custom_light.css VERSION: 03.08.04 BRIEF: Custom light theme color template with Bootstrap button definitions */ @@ -19,10 +19,10 @@ * CUSTOM LIGHT THEME TEMPLATE * * Copy this file to: - * src/media/css/colors/light/colors_custom.css + * src/media/css/theme/light.custom.css * * Then register it in src/joomla.asset.json under - * template.light.colors_custom asset. + * template.light.custom asset. * --------------------------------------------- */ :root[data-bs-theme="light"] {