MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 4 Pull Requests Actions Packages Releases 1 Activity

03.09.01 — mod_custom hero override, palette starter files, updated descriptions #84

Merged
jmiller-moko merged 17 commits from dev/03.09.01 into main 2026-03-24 21:48:07 +00:00
Conversation 0 Commits 17 Files Changed 23 +2859 -262
23 changed files with 2859 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
.gitignore vendored
View File

@@ -28,6 +28,17 @@ secrets/
*.sqlite *.sqlite
*.sqlite3 *.sqlite3
# ============================================================
# Node / build tooling
# ============================================================
node_modules/
npm-debug.log*
# ============================================================
# Claude Code local settings
# ============================================================
.claude/settings.local.json
# ============================================================ # ============================================================
# OS / Editor / IDE cruft # OS / Editor / IDE cruft
# ============================================================ # ============================================================

12
package.json Normal file
View File

@@ -0,0 +1,12 @@
{
"name": "mokocassiopeia-build",
"private": true,
"description": "Build tooling for MokoCassiopeia Joomla template",
"scripts": {
"minify": "node scripts/minify.js"
},
"devDependencies": {
"clean-css": "^5.3.3",
"terser": "^5.39.0"
}
}

188
scripts/minify.js Normal file
View File

@@ -0,0 +1,188 @@
#!/usr/bin/env node
/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
*
* 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
* REPO: https://github.com/mokoconsulting-tech/MokoCassiopeia
* PATH: ./scripts/minify.js
* VERSION: 03.09.01
* BRIEF: Generates .min.css and .min.js files from the Joomla asset manifest
*/
'use strict';
const fs = require('fs');
const path = require('path');
const CleanCSS = require('clean-css');
const { minify: terserMinify } = require('terser');
// ---------------------------------------------------------------------------
// Config
// ---------------------------------------------------------------------------
const ROOT = path.resolve(__dirname, '..');
const SRC_MEDIA = path.join(ROOT, 'src', 'media');
const ASSET_JSON = path.join(ROOT, 'src', 'joomla.asset.json');
// URI prefix used in the manifest — maps to SRC_MEDIA on disk.
// e.g. "media/templates/site/mokocassiopeia/css/template.css"
const URI_PREFIX = 'media/templates/site/mokocassiopeia/';
// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------
/**
* Resolve a manifest URI to an absolute disk path under src/media/.
*
* @param {string} uri e.g. "media/templates/site/mokocassiopeia/css/foo.css"
* @returns {string|null}
*/
function uriToPath(uri) {
if (!uri.startsWith(URI_PREFIX)) return null;
return path.join(SRC_MEDIA, uri.slice(URI_PREFIX.length));
}
/**
* Return true if the filename looks like an already-minified file or belongs
* to a vendor bundle we don't own.
*/
function isVendorOrUserFile(filePath) {
const rel = filePath.replace(SRC_MEDIA + path.sep, '');
return rel.startsWith('vendor' + path.sep)
|| path.basename(filePath).startsWith('user.');
}
// ---------------------------------------------------------------------------
// Pair detection
// ---------------------------------------------------------------------------
/**
* Read the asset manifest and return an array of { src, dest, type } pairs
* where dest is a minified version of src that doesn't already exist or is
* older than src.
*
* Pairing logic: for every non-.min asset, check whether the manifest also
* contains a corresponding .min asset. If so, that's our pair.
*/
function detectPairs(assets) {
// Build a lookup of all URIs in the manifest.
const uriSet = new Set(assets.map(a => a.uri));
const pairs = [];
for (const asset of assets) {
const { uri, type } = asset;
if (type !== 'style' && type !== 'script') continue;
// Skip already-minified entries.
if (/\.min\.(css|js)$/.test(uri)) continue;
// Derive the expected .min URI.
const minUri = uri.replace(/\.(css|js)$/, '.min.$1');
if (!uriSet.has(minUri)) continue;
const srcPath = uriToPath(uri);
const destPath = uriToPath(minUri);
if (!srcPath || !destPath) continue;
if (isVendorOrUserFile(srcPath)) continue;
if (!fs.existsSync(srcPath)) {
console.warn(` [skip] source missing: ${srcPath}`);
continue;
}
pairs.push({ src: srcPath, dest: destPath, type });
}
return pairs;
}
// ---------------------------------------------------------------------------
// Minifiers
// ---------------------------------------------------------------------------
async function minifyCSS(srcPath, destPath) {
const source = fs.readFileSync(srcPath, 'utf8');
const result = new CleanCSS({ level: 2, returnPromise: true });
const output = await result.minify(source);
if (output.errors && output.errors.length) {
throw new Error(output.errors.join('\n'));
}
fs.mkdirSync(path.dirname(destPath), { recursive: true });
fs.writeFileSync(destPath, output.styles, 'utf8');
const srcSize = Buffer.byteLength(source, 'utf8');
const destSize = Buffer.byteLength(output.styles, 'utf8');
const saving = (100 - (destSize / srcSize * 100)).toFixed(1);
return { srcSize, destSize, saving };
}
async function minifyJS(srcPath, destPath) {
const source = fs.readFileSync(srcPath, 'utf8');
const result = await terserMinify(source, {
compress: { drop_console: false },
mangle: true,
format: { comments: false }
});
if (!result.code) throw new Error('terser returned no output');
fs.mkdirSync(path.dirname(destPath), { recursive: true });
fs.writeFileSync(destPath, result.code, 'utf8');
const srcSize = Buffer.byteLength(source, 'utf8');
const destSize = Buffer.byteLength(result.code, 'utf8');
const saving = (100 - (destSize / srcSize * 100)).toFixed(1);
return { srcSize, destSize, saving };
}
// ---------------------------------------------------------------------------
// Main
// ---------------------------------------------------------------------------
(async () => {
const manifest = JSON.parse(fs.readFileSync(ASSET_JSON, 'utf8'));
const pairs = detectPairs(manifest.assets);
if (pairs.length === 0) {
console.log('No pairs found — nothing to minify.');
return;
}
console.log(`\nMinifying ${pairs.length} file(s)...\n`);
let ok = 0, fail = 0;
for (const { src, dest, type } of pairs) {
const label = path.relative(ROOT, src);
process.stdout.write(` ${label} ... `);
try {
const stats = type === 'style'
? await minifyCSS(src, dest)
: await minifyJS(src, dest);
const kb = n => (n / 1024).toFixed(1) + ' kB';
console.log(`${kb(stats.srcSize)} → ${kb(stats.destSize)} (${stats.saving}% saved)`);
ok++;
} catch (err) {
console.error(`FAILED\n ${err.message}`);
fail++;
}
}
console.log(`\nDone. ${ok} succeeded, ${fail} failed.\n`);
if (fail > 0) process.exit(1);
})();

5
src/component.php
View File

@@ -37,6 +37,11 @@ $params_googletagmanager = $this->params->get('googletagmanager', false);
$params_googletagmanagerid = $this->params->get('googletagmanagerid', null); $params_googletagmanagerid = $this->params->get('googletagmanagerid', null);
$params_googleanalytics = $this->params->get('googleanalytics', false); $params_googleanalytics = $this->params->get('googleanalytics', false);
$params_googleanalyticsid = $this->params->get('googleanalyticsid', null); $params_googleanalyticsid = $this->params->get('googleanalyticsid', null);
$params_googlesitekey = $this->params->get('googlesitekey', null);
if (!empty($params_googlesitekey)) {
$this->setMetaData('google-site-verification', htmlspecialchars($params_googlesitekey, ENT_QUOTES, 'UTF-8'));
}
// Detecting Active Variables // Detecting Active Variables
$option = $input->getCmd('option', ''); $option = $input->getCmd('option', '');

36
src/html/mod_custom/hero.php Normal file
View File

@@ -0,0 +1,36 @@
<?php
/**
* @package Joomla.Site
* @subpackage mod_custom
*
* @copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
* @license GNU General Public License version 2 or later; see LICENSE.txt
*
* Template override for mod_custom adding banner-overlay wrapper pattern.
* Based on Cassiopeia's banner layout approach.
*/
defined('_JEXEC') or die;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Uri\Uri;
$modId = 'mod-custom' . $module->id;
$moduleclass = htmlspecialchars($params->get('moduleclass_sfx', ''), ENT_COMPAT, 'UTF-8');
if ($params->get('backgroundimage')) {
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $app->getDocument()->getWebAssetManager();
$wa->addInlineStyle(
'#' . $modId . '{background-image: url("' . Uri::root(true) . '/' . HTMLHelper::_('cleanImageURL', $params->get('backgroundimage'))->url . '");}',
['name' => $modId]
);
}
?>
<div class="mod-custom custom banner-overlay custom-hero<?php echo $moduleclass ? ' ' . $moduleclass : ''; ?>" id="<?php echo $modId; ?>">
<div class="overlay">
<?php echo $module->content; ?>
</div>
</div>

11
src/index.php
View File

@@ -53,6 +53,7 @@ $params_googletagmanager = $this->params->get('googletagmanager', false);
$params_googletagmanagerid = $this->params->get('googletagmanagerid', null); $params_googletagmanagerid = $this->params->get('googletagmanagerid', null);
$params_googleanalytics = $this->params->get('googleanalytics', false); $params_googleanalytics = $this->params->get('googleanalytics', false);
$params_googleanalyticsid = $this->params->get('googleanalyticsid', null); $params_googleanalyticsid = $this->params->get('googleanalyticsid', null);
$params_googlesitekey = $this->params->get('googlesitekey', null);
$params_custom_head_start = $this->params->get('custom_head_start', null); $params_custom_head_start = $this->params->get('custom_head_start', null);
$params_custom_head_end = $this->params->get('custom_head_end', null); $params_custom_head_end = $this->params->get('custom_head_end', null);
$params_developmentmode = $this->params->get('developmentmode', false); $params_developmentmode = $this->params->get('developmentmode', false);
@@ -188,6 +189,9 @@ $stickyHeader = $this->params->get('stickyHeader') ? 'position-sticky sticky-top
// Meta // Meta
$this->setMetaData('viewport', 'width=device-width, initial-scale=1'); $this->setMetaData('viewport', 'width=device-width, initial-scale=1');
if (!empty($params_googlesitekey)) {
$this->setMetaData('google-site-verification', htmlspecialchars($params_googlesitekey, ENT_QUOTES, 'UTF-8'));
}
if ($this->params->get('fA6KitCode')) { if ($this->params->get('fA6KitCode')) {
$faKit = "https://kit.fontawesome.com/" . $this->params->get('fA6KitCode') . ".js"; $faKit = "https://kit.fontawesome.com/" . $this->params->get('fA6KitCode') . ".js";
@@ -375,7 +379,7 @@ $wa->useScript('user.js'); // js/user.js
<?php endif; ?> <?php endif; ?>
<?php if ($this->params->get('brand', 1)) : ?> <?php if ($this->params->get('brand', 1)) : ?>
<div class="grid-child"> <div class="grid-child header-brand-wrap">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="brand-logo" href="<?php echo $this->baseurl; ?>/"> <a class="brand-logo" href="<?php echo $this->baseurl; ?>/">
<?php echo $brandHtml; ?> <?php echo $brandHtml; ?>
@@ -386,6 +390,11 @@ $wa->useScript('user.js'); // js/user.js
</div> </div>
<?php endif; ?> <?php endif; ?>
</div> </div>
<?php if ($this->countModules('brand-aside', true)) : ?>
<div class="container-brand-aside">
<jdoc:include type="modules" name="brand-aside" style="none" />
</div>
<?php endif; ?>
</div> </div>
<?php endif; ?> <?php endif; ?>

129
src/language/en-GB/tpl_mokocassiopeia.ini
View File

@@ -8,7 +8,7 @@
; DEFGROUP: Joomla.Template.Site ; DEFGROUP: Joomla.Template.Site
; INGROUP: MokoCassiopeia ; INGROUP: MokoCassiopeia
; PATH: ./language/en-GB/tpl_mokocassiopeia.ini ; PATH: ./language/en-GB/tpl_mokocassiopeia.ini
; VERSION: 03.06.02 ; VERSION: 03.09.01
; BRIEF: English (GB) language strings for the MokoCassiopeia Joomla template ; BRIEF: English (GB) language strings for the MokoCassiopeia Joomla template
; ;
; Note: Template metadata strings (name, description) are in tpl_mokocassiopeia.sys.ini ; Note: Template metadata strings (name, description) are in tpl_mokocassiopeia.sys.ini
@@ -47,6 +47,8 @@ TPL_MOKOCASSIOPEIA_GOOGLEANALYTICS_LABEL="Use Google Analytics?"
TPL_MOKOCASSIOPEIA_GOOGLEANALYTICS_DESC="Do you want to use Google Analytics?<br>More information on Google Analytics can be found <a target='_blank' href='https://developers.google.com/analytics'>here.</a>" TPL_MOKOCASSIOPEIA_GOOGLEANALYTICS_DESC="Do you want to use Google Analytics?<br>More information on Google Analytics can be found <a target='_blank' href='https://developers.google.com/analytics'>here.</a>"
TPL_MOKOCASSIOPEIA_GOOGLEANALYTICSID_LABEL="Google Analytics ID" TPL_MOKOCASSIOPEIA_GOOGLEANALYTICSID_LABEL="Google Analytics ID"
TPL_MOKOCASSIOPEIA_GOOGLEANALYTICSID_DESC="Begins with 'G-'" TPL_MOKOCASSIOPEIA_GOOGLEANALYTICSID_DESC="Begins with 'G-'"
TPL_MOKOCASSIOPEIA_GOOGLESITEKEY_LABEL="Google Search Console Verification"
TPL_MOKOCASSIOPEIA_GOOGLESITEKEY_DESC="Paste the content value from the &lt;meta name=&quot;google-site-verification&quot;&gt; tag. Find this in Google Search Console under Ownership Verification &rarr; HTML tag method."
; ===== Branding & icons (Theme tab) ===== ; ===== Branding & icons (Theme tab) =====
TPL_MOKOCASSIOPEIA_BRAND_LABEL="Brand" TPL_MOKOCASSIOPEIA_BRAND_LABEL="Brand"
@@ -75,9 +77,9 @@ TPL_MOKOCASSIOPEIA_COLOR_NAME_STANDARD="Standard"
TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom" TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom"
; New labels for Theme tab dropdowns ; New labels for Theme tab dropdowns
TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL="Light colour palette" TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL="Light colour palette"
TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_DESC="Select a colour palette for light mode. <strong>Standard</strong> uses the default blue theme with comprehensive styling for all components. <strong>Custom</strong> allows you to create your own colour scheme - copy the template file from <code>templates/theme_custom_light.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code> and customise the CSS variables to match your brand." TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_DESC="Select a colour palette for light mode. <strong>Standard</strong> uses the default blue theme with comprehensive styling for all components. <strong>Custom</strong> loads <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code> — copy the starter file from <code>templates/mokocassiopeia/templates/light.custom.css</code> and customise the CSS variables to match your brand."
TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_LABEL="Dark colour palette" TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_LABEL="Dark colour palette"
TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_DESC="Select a colour palette for dark mode. <strong>Standard</strong> uses the default blue theme optimised for dark backgrounds with proper contrast. <strong>Custom</strong> allows you to create your own colour scheme - copy the template file from <code>templates/theme_custom_dark.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code> and customise the CSS variables to match your brand." TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_DESC="Select a colour palette for dark mode. <strong>Standard</strong> uses the default blue theme optimised for dark backgrounds with proper contrast. <strong>Custom</strong> loads <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code> — copy the starter file from <code>templates/mokocassiopeia/templates/dark.custom.css</code> and customise the CSS variables to match your brand."
; ===== Theme tab (core feature strings) ===== ; ===== Theme tab (core feature strings) =====
TPL_MOKO_THEME_FIELDSET="Theme" TPL_MOKO_THEME_FIELDSET="Theme"
@@ -109,6 +111,127 @@ TPL_MOKO_THEME_FAB_ENABLED_DESC="Display a persistent, accessible theme toggle."
TPL_MOKO_THEME_FAB_POS="Floating switch position" TPL_MOKO_THEME_FAB_POS="Floating switch position"
TPL_MOKO_THEME_FAB_POS_DESC="Screen corner for the toggle." TPL_MOKO_THEME_FAB_POS_DESC="Screen corner for the toggle."
; ===== CSS Variables tab =====
TPL_MOKOCASSIOPEIA_CSS_VARS_FIELDSET_LABEL="CSS Variables"
TPL_MOKOCASSIOPEIA_CSS_VARS_INTRO="<p>All colours, spacing and layout values are driven by CSS custom properties. To override any variable without editing the template, add your overrides to <code>media/templates/site/mokocassiopeia/css/user.css</code>, or create a custom palette file (see the Theme tab). Variables are scoped to <code>:root[data-bs-theme=&quot;light&quot;]</code> or <code>:root[data-bs-theme=&quot;dark&quot;]</code> so light and dark values are independent.</p>"
TPL_MOKOCASSIOPEIA_CSS_VARS_BRAND_LABEL="Brand &amp; Theme Colours"
TPL_MOKOCASSIOPEIA_CSS_VARS_BRAND_DESC="<code>--color-primary</code> — Primary brand colour (default: <code>#112855</code>)<br><code>--accent-color-primary</code> — Primary accent (default: <code>#3f8ff0</code>)<br><code>--accent-color-secondary</code> — Secondary accent"
TPL_MOKOCASSIOPEIA_CSS_VARS_LINKS_LABEL="Links &amp; Link Utilities"
TPL_MOKOCASSIOPEIA_CSS_VARS_LINKS_DESC="<strong>Core link tokens</strong><br><code>--color-link</code> — Base link colour<br><code>--color-hover</code> — Base hover colour<br><code>--link-color</code> / <code>--link-hover-color</code> — Bootstrap link colours<br><code>--link-decoration</code> — Default text-decoration<br><code>--link-active-color</code> — Active state<br><br><strong>Semantic link utilities</strong> (replace <code>{colour}</code> with <code>primary</code>, <code>secondary</code>, <code>success</code>, <code>info</code>, <code>warning</code>, <code>danger</code>, <code>light</code>, <code>dark</code>)<br><code>--link-{colour}-color</code> — Colour for <code>.link-{colour}</code><br><code>--link-{colour}-hover-color</code> — Hover colour"
TPL_MOKOCASSIOPEIA_CSS_VARS_TYPO_LABEL="Typography &amp; Body"
TPL_MOKOCASSIOPEIA_CSS_VARS_TYPO_DESC="<code>--body-color</code> — Default text colour (default: <code>#22262a</code>)<br><code>--body-bg</code> — Page background (default: <code>#fff</code>)<br><code>--body-font-family</code> — Font stack<br><code>--body-font-size</code> — Base size (default: <code>1rem</code>)<br><code>--body-font-weight</code> — Base weight (default: <code>400</code>)<br><code>--body-line-height</code> — Line height (default: <code>1.5</code>)<br><code>--heading-color</code> — Heading colour (default: <code>inherit</code>)<br><code>--muted-color</code> — Muted/secondary text (default: <code>#6d757e</code>)<br><code>--code-color</code> — Inline code colour<br><code>--emphasis-color</code> — Strong emphasis colour<br><code>--secondary-color</code> / <code>--tertiary-color</code> — Stepped text opacities<br><code>--highlight-color</code> / <code>--highlight-bg</code> — <code>&lt;mark&gt;</code> colours<br><code>--font-sans-serif</code> / <code>--font-monospace</code> — Font stacks"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_LABEL="Navigation, Navbar &amp; Offcanvas"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_DESC="<strong>Theme nav</strong><br><code>--nav-bg-color</code> — Navbar background<br><code>--nav-text-color</code> — Navbar text<br><code>--mainmenu-nav-link-color</code> — Active nav link<br><br><strong>Navbar tokens</strong><br><code>--navbar-padding-x</code> / <code>--navbar-padding-y</code> — Navbar padding<br><code>--navbar-brand-font-size</code> — Brand font size<br><code>--navbar-toggler-border-color</code> — Mobile toggler border<br><code>--nav-link-padding-x</code> / <code>--nav-link-padding-y</code> — Link padding<br><code>--nav-link-font-weight</code> — Link weight<br><code>--nav-link-disabled-color</code> — Disabled link colour<br><br><strong>Offcanvas</strong><br><code>--offcanvas-color</code> — Offcanvas text colour<br><code>--offcanvas-padding-x</code> / <code>--offcanvas-padding-y</code> — Offcanvas padding"
TPL_MOKOCASSIOPEIA_CSS_VARS_LAYOUT_LABEL="Layout &amp; Spacing"
TPL_MOKOCASSIOPEIA_CSS_VARS_LAYOUT_DESC="<code>--padding-x</code> / <code>--padding-y</code> — Default component padding<br><code>--nav-toggle-size</code> — Mobile nav toggle button size (default: <code>3rem</code>)<br><code>--secondary-bg</code> — Secondary surface background (default: <code>#eaedf0</code>)<br><code>--tertiary-bg</code> — Tertiary surface background (default: <code>#f9fafb</code>)<br><code>--hr-color</code> — Horizontal rule colour<br><code>--border-color-soft</code> — Soft border variant<br><code>--kbd-bg</code> / <code>--kbd-ink</code> — Keyboard element colours<br><code>--toc-bg</code> / <code>--toc-ink</code> — Table of contents colours<br><code>--selection-bg</code> / <code>--selection-ink</code> — Text selection colours<br><code>--gradient</code> — Bootstrap gradient overlay value<br><code>--bg-opacity</code> — Background opacity utility base"
TPL_MOKOCASSIOPEIA_CSS_VARS_BP_LABEL="Breakpoints"
TPL_MOKOCASSIOPEIA_CSS_VARS_BP_DESC="Read-only reference values matching Bootstrap breakpoints.<br><code>--bp-xs</code> — <code>0</code><br><code>--bp-sm</code> — <code>576px</code><br><code>--bp-md</code> — <code>768px</code><br><code>--bp-lg</code> — <code>992px</code><br><code>--bp-xl</code> — <code>1200px</code>"
TPL_MOKOCASSIOPEIA_CSS_VARS_BS_LABEL="Bootstrap Semantic Palette"
TPL_MOKOCASSIOPEIA_CSS_VARS_BS_DESC="These map to Bootstrap components (buttons, alerts, badges). Override to retheme all components at once.<br><code>--primary</code> — <code>#010156</code><br><code>--secondary</code> — <code>#6d757e</code><br><code>--success</code> — <code>#448344</code><br><code>--info</code> — <code>#30638d</code><br><code>--warning</code> — <code>#ad6200</code><br><code>--danger</code> — <code>#a51f18</code><br><code>--light</code> — <code>#f9fafb</code><br><code>--dark</code> — <code>#353b41</code><br>Each colour also has an <code>--{color}-rgb</code> variant for use in <code>rgba()</code> expressions."
TPL_MOKOCASSIOPEIA_CSS_VARS_BS_STATES_LABEL="Bootstrap State Colours"
TPL_MOKOCASSIOPEIA_CSS_VARS_BS_STATES_DESC="Contextual state tokens used by alerts, badges and list groups. Replace <code>{color}</code> with <code>primary</code>, <code>secondary</code>, <code>success</code>, <code>info</code>, <code>warning</code>, <code>danger</code>, <code>light</code>, or <code>dark</code>.<br><code>--{color}-text-emphasis</code> — High-contrast text on subtle backgrounds<br><code>--{color}-bg-subtle</code> — Tinted component background<br><code>--{color}-border-subtle</code> — Tinted component border"
TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_LIST_LABEL="Alert &amp; List Group Colours"
TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_LIST_DESC="<strong>Alert link colours</strong> — override to adjust link contrast inside <code>.alert-{color}</code> components.<br><code>--alert-{color}-link-color</code> — e.g. <code>--alert-primary-link-color</code><br><br><strong>List group item colours</strong> — contextual surfaces for <code>.list-group-item-{color}</code>.<br><code>--list-group-item-{color}-color</code> — Text colour<br><code>--list-group-item-{color}-bg</code> — Background<br><code>--list-group-item-{color}-active-bg</code> — Active state background"
TPL_MOKOCASSIOPEIA_CSS_VARS_COLORS_LABEL="Standard Colours, Grays &amp; Opacity"
TPL_MOKOCASSIOPEIA_CSS_VARS_COLORS_DESC="<strong>Named colours</strong><br><code>--blue</code>, <code>--indigo</code>, <code>--purple</code>, <code>--pink</code>, <code>--red</code>, <code>--orange</code>, <code>--yellow</code>, <code>--green</code>, <code>--teal</code>, <code>--cyan</code>, <code>--black</code>, <code>--white</code><br><br><strong>Gray scale</strong><br><code>--gray-100</code> through <code>--gray-900</code> plus <code>--white-rgb</code> and <code>--black-rgb</code><br><br><strong>Opacity utilities</strong><br><code>--opacity-0</code>, <code>--opacity-5</code>, <code>--opacity-10</code>, <code>--opacity-15</code>, <code>--opacity-20</code>, <code>--opacity-25</code>, <code>--opacity-30</code>, <code>--opacity-50</code>, <code>--opacity-75</code>, <code>--opacity-100</code>"
TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_LABEL="Hero / Banner Overlay"
TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_DESC="Applied to the <code>.custom-hero</code> / <code>.banner-overlay</code> layout. Set on <code>:root[data-bs-theme]</code> so light and dark values are independent.<br><code>--hero-height</code> — Banner height (default: <code>70vh</code>)<br><code>--hero-color</code> — Base text colour<br><code>--hero-bg-repeat</code> — Background repeat (default: <code>no-repeat</code>)<br><code>--hero-bg-attachment</code> — Background attachment (default: <code>fixed</code>)<br><code>--hero-bg-position</code> — Background position (default: <code>top center</code>)<br><code>--hero-bg-size</code> — Background size (default: <code>cover</code>)<br><code>--hero-border-bottom</code> — Bottom border (default: <code>solid var(--accent-color-secondary)</code>)<br><code>--hero-overlay-bg</code> — Overlay tint colour (light default: <code>hsla(0,0%,0%,0.1)</code> / dark default: <code>hsla(0,0%,0%,0.3)</code>)<br><code>--hero-overlay-padding</code> — Overlay inner padding (default: <code>1em</code>)<br><code>--hero-overlay-text-align</code> — Overlay text alignment (default: <code>center</code>)<br><code>--hero-overlay-text-color</code> — Overlay text colour"
TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_LABEL="Header Background"
TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_DESC="Controls the background of the topbar/header area.<br><code>--header-background-image</code> — CSS <code>background-image</code> value (default: built-in SVG pattern)<br><code>--header-background-attachment</code> — <code>fixed</code> or <code>scroll</code><br><code>--header-background-repeat</code> — e.g. <code>repeat</code>, <code>no-repeat</code><br><code>--header-background-size</code> — e.g. <code>auto</code>, <code>cover</code>, <code>contain</code>"
TPL_MOKOCASSIOPEIA_CSS_VARS_CONTAINERS_LABEL="Container Backgrounds"
TPL_MOKOCASSIOPEIA_CSS_VARS_CONTAINERS_DESC="Each layout container has its own background variables. Replace <code>{pos}</code> with: <code>below-topbar</code>, <code>top-a</code>, <code>top-b</code>, <code>sidebar</code>, <code>bottom-a</code>, or <code>bottom-b</code>.<br><br><code>--container-{pos}-bg-image</code> — Background image (default: <code>none</code>)<br><code>--container-{pos}-bg-color</code> — Background colour (default: <code>transparent</code>)<br><code>--container-{pos}-bg-position</code> — Background position<br><code>--container-{pos}-bg-attachment</code> — <code>fixed</code> or <code>scroll</code><br><code>--container-{pos}-bg-repeat</code> — Repeat behaviour<br><code>--container-{pos}-bg-size</code> — e.g. <code>cover</code>, <code>auto</code><br><code>--container-{pos}-border</code> — Border shorthand<br><code>--container-{pos}-border-radius</code> — Border radius<br><br>Also: <code>--container-toc-bg</code> / <code>--container-toc-color</code> for the TOC sidebar."
TPL_MOKOCASSIOPEIA_CSS_VARS_BORDERS_LABEL="Borders"
TPL_MOKOCASSIOPEIA_CSS_VARS_BORDERS_DESC="<code>--border-width</code> — Default width (default: <code>1px</code>)<br><code>--border-style</code> — Default style (default: <code>solid</code>)<br><code>--border-color</code> — Default border colour (default: <code>#dfe3e7</code>)<br><code>--border-color-translucent</code> — Semi-transparent border<br><code>--border-radius</code> — Default radius (default: <code>.25rem</code>)<br><code>--border-radius-sm</code> — Small radius<br><code>--border-radius-lg</code> — Large radius<br><code>--border-radius-xl</code> — Extra large radius<br><code>--border-radius-xxl</code> — 2XL radius (default: <code>2rem</code>)<br><code>--border-radius-pill</code> — Pill radius (default: <code>50rem</code>)"
TPL_MOKOCASSIOPEIA_CSS_VARS_SHADOWS_LABEL="Shadows &amp; Shadow Tokens"
TPL_MOKOCASSIOPEIA_CSS_VARS_SHADOWS_DESC="<strong>Box shadows</strong><br><code>--box-shadow</code> — Standard shadow<br><code>--box-shadow-sm</code> — Subtle shadow<br><code>--box-shadow-lg</code> — Prominent shadow<br><code>--box-shadow-inset</code> — Inset shadow<br><br><strong>Shadow colour tokens</strong> — used as building blocks by component shadows<br><code>--shadow-color-light</code> — <code>rgba(black, 0.15)</code><br><code>--shadow-color-medium</code> — <code>rgba(black, 0.25)</code><br><code>--shadow-color-dark</code> — <code>rgba(black, 0.30)</code><br><code>--highlight-translucent</code> — <code>rgba(white, 0.15)</code>"
TPL_MOKOCASSIOPEIA_CSS_VARS_FORMS_LABEL="Focus &amp; Forms"
TPL_MOKOCASSIOPEIA_CSS_VARS_FORMS_DESC="<code>--focus-ring-width</code> — Keyboard focus ring width (default: <code>.25rem</code>)<br><code>--focus-ring-opacity</code> — Focus ring opacity<br><code>--focus-ring-color</code> — Focus ring colour<br><code>--input-color</code> — Input text colour<br><code>--input-bg</code> — Input background<br><code>--input-border-color</code> — Input border colour<br><code>--input-focus-border-color</code> — Focused border colour<br><code>--input-focus-box-shadow</code> — Focused input shadow<br><code>--input-placeholder-color</code> — Placeholder text colour<br><code>--input-disabled-bg</code> — Disabled input background<br><code>--input-disabled-border-color</code> — Disabled input border<br><code>--form-valid-color</code> / <code>--form-valid-border-color</code> — Valid state<br><code>--form-invalid-color</code> / <code>--form-invalid-border-color</code> — Invalid state"
TPL_MOKOCASSIOPEIA_CSS_VARS_BUTTONS_LABEL="Buttons"
TPL_MOKOCASSIOPEIA_CSS_VARS_BUTTONS_DESC="Applied on <code>:root</code> for global button defaults:<br><code>--btn-border-radius</code> — Button border radius<br><code>--btn-box-shadow</code> — Button box shadow<br><br>Applied on <code>.btn</code> for base button tokens (overridable per variant):<br><code>--btn-padding-x</code> / <code>--btn-padding-y</code> — Padding<br><code>--btn-font-size</code> / <code>--btn-font-weight</code> / <code>--btn-line-height</code> — Typography<br><code>--btn-color</code> / <code>--btn-bg</code> / <code>--btn-border-color</code> — Default state<br><code>--btn-hover-color</code> / <code>--btn-hover-bg</code> / <code>--btn-hover-border-color</code> — Hover state<br><code>--btn-active-color</code> / <code>--btn-active-bg</code> / <code>--btn-active-shadow</code> — Active state<br><code>--btn-disabled-opacity</code> — Disabled opacity<br><br>Each <code>.btn-{color}</code> and <code>.btn-outline-{color}</code> class inherits these tokens and sets its own values."
TPL_MOKOCASSIOPEIA_CSS_VARS_CARDS_LABEL="Cards"
TPL_MOKOCASSIOPEIA_CSS_VARS_CARDS_DESC="<code>--card-spacer-y</code> / <code>--card-spacer-x</code> — Body padding (default: <code>1rem</code>)<br><code>--card-title-spacer-y</code> — Title bottom margin (default: <code>0.5rem</code>)<br><code>--card-border-width</code> — Border width (default: <code>1px</code>)<br><code>--card-border-color</code> — Border colour<br><code>--card-border-radius</code> — Border radius<br><code>--card-box-shadow</code> — Card shadow (default: <code>none</code>)<br><code>--card-cap-padding-y</code> / <code>--card-cap-padding-x</code> — Header/footer padding<br><code>--card-cap-bg</code> — Header/footer background<br><code>--card-cap-color</code> — Header/footer text colour<br><code>--card-color</code> — Body text colour<br><code>--card-bg</code> — Card background"
TPL_MOKOCASSIOPEIA_CSS_VARS_ACCORDION_LABEL="Accordion"
TPL_MOKOCASSIOPEIA_CSS_VARS_ACCORDION_DESC="<strong>Colours</strong><br><code>--accordion-color</code> — Panel text colour<br><code>--accordion-bg</code> — Panel background<br><code>--accordion-border-color</code> — Border colour<br><code>--accordion-btn-color</code> — Button text colour<br><code>--accordion-btn-bg</code> — Button background<br><code>--accordion-btn-focus-border-color</code> — Button focus border colour<br><code>--accordion-btn-focus-box-shadow</code> — Button focus ring<br><code>--accordion-active-color</code> — Active item text colour<br><code>--accordion-active-bg</code> — Active item background<br><br><strong>Dimensions</strong><br><code>--accordion-border-width</code> — Border width<br><code>--accordion-border-radius</code> — Outer border radius<br><code>--accordion-inner-border-radius</code> — Inner border radius<br><code>--accordion-btn-padding-x</code> / <code>--accordion-btn-padding-y</code> — Button padding<br><code>--accordion-body-padding-x</code> / <code>--accordion-body-padding-y</code> — Body padding<br><br><strong>Icon &amp; Animation</strong><br><code>--accordion-btn-icon</code> — Collapse icon (collapsed state)<br><code>--accordion-btn-icon-width</code> — Icon size<br><code>--accordion-btn-icon-transform</code> — Icon rotation when expanded<br><code>--accordion-btn-icon-transition</code> — Icon rotation transition<br><code>--accordion-btn-active-icon</code> — Icon (expanded state)<br><code>--accordion-transition</code> — Panel open/close transition<br><br><strong>Stacking</strong><br><code>--accordion-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_BASE_LABEL="Alert (Base)"
TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_BASE_DESC="<strong>Colours</strong><br><code>--alert-color</code> — Alert text colour<br><code>--alert-bg</code> — Alert background<br><code>--alert-border-color</code> — Border colour<br><code>--alert-border</code> — Full border shorthand<br><br><strong>Dimensions</strong><br><code>--alert-padding-x</code> / <code>--alert-padding-y</code> — Inner padding<br><code>--alert-margin-bottom</code> — Bottom margin<br><code>--alert-border-radius</code> — Border radius<br><br><em>Note: per-variant contextual tokens (colours, backgrounds, borders) are covered in the Bootstrap State Colours section above.</em>"
TPL_MOKOCASSIOPEIA_CSS_VARS_BADGE_LABEL="Badge"
TPL_MOKOCASSIOPEIA_CSS_VARS_BADGE_DESC="<strong>Colours</strong><br><code>--badge-color</code> — Badge text colour<br><br><strong>Typography</strong><br><code>--badge-font-size</code> — Font size<br><code>--badge-font-weight</code> — Font weight<br><br><strong>Dimensions</strong><br><code>--badge-padding-x</code> / <code>--badge-padding-y</code> — Padding<br><code>--badge-border-radius</code> — Border radius"
TPL_MOKOCASSIOPEIA_CSS_VARS_BACKDROP_LABEL="Backdrop"
TPL_MOKOCASSIOPEIA_CSS_VARS_BACKDROP_DESC="<strong>Colours</strong><br><code>--backdrop-bg</code> — Backdrop colour (default: <code>#000</code>)<br><code>--backdrop-opacity</code> — Backdrop opacity (default: <code>0.5</code>)<br><br><strong>Stacking</strong><br><code>--backdrop-zindex</code> — z-index (default: <code>1040</code>)"
TPL_MOKOCASSIOPEIA_CSS_VARS_BREADCRUMB_LABEL="Breadcrumb"
TPL_MOKOCASSIOPEIA_CSS_VARS_BREADCRUMB_DESC="<strong>Colours</strong><br><code>--breadcrumb-bg</code> — Background colour<br><code>--breadcrumb-divider-color</code> — Divider colour<br><code>--breadcrumb-item-active-color</code> — Active item colour<br><br><strong>Dimensions</strong><br><code>--breadcrumb-padding-x</code> / <code>--breadcrumb-padding-y</code> — Container padding<br><code>--breadcrumb-margin-bottom</code> — Bottom margin<br><code>--breadcrumb-item-padding-x</code> — Spacing between items<br><code>--breadcrumb-border-radius</code> — Container border radius"
TPL_MOKOCASSIOPEIA_CSS_VARS_DROPDOWN_MENU_LABEL="Dropdown Menu"
TPL_MOKOCASSIOPEIA_CSS_VARS_DROPDOWN_MENU_DESC="<strong>Colours</strong><br><code>--dropdown-color</code> — Default text colour<br><code>--dropdown-bg</code> — Menu background<br><code>--dropdown-border-color</code> — Border colour<br><code>--dropdown-divider-bg</code> — Divider colour<br><code>--dropdown-box-shadow</code> — Menu shadow<br><code>--dropdown-link-color</code> — Link text colour<br><code>--dropdown-link-active-color</code> — Active link text colour<br><code>--dropdown-link-active-bg</code> — Active link background<br><code>--dropdown-link-disabled-color</code> — Disabled link colour<br><code>--dropdown-header-color</code> — Header text colour<br><br><strong>Dimensions</strong><br><code>--dropdown-min-width</code> — Minimum width<br><code>--dropdown-padding-x</code> / <code>--dropdown-padding-y</code> — Menu padding<br><code>--dropdown-spacer</code> — Gap from toggle<br><code>--dropdown-border-width</code> — Border width<br><code>--dropdown-border-radius</code> — Outer border radius<br><code>--dropdown-inner-border-radius</code> — Inner border radius<br><code>--dropdown-divider-margin-y</code> — Divider vertical margin<br><code>--dropdown-item-padding-x</code> / <code>--dropdown-item-padding-y</code> — Item padding<br><code>--dropdown-header-padding-x</code> / <code>--dropdown-header-padding-y</code> — Header padding<br><br><strong>Typography</strong><br><code>--dropdown-font-size</code> — Menu font size<br><br><strong>Stacking</strong><br><code>--dropdown-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_LIST_GROUP_LABEL="List Group"
TPL_MOKOCASSIOPEIA_CSS_VARS_LIST_GROUP_DESC="<strong>Colours</strong><br><code>--list-group-color</code> — Default text colour<br><code>--list-group-bg</code> — Default background<br><code>--list-group-border-color</code> — Border colour<br><code>--list-group-action-color</code> — Clickable item text colour<br><code>--list-group-action-active-color</code> — Clickable item active text colour<br><code>--list-group-action-active-bg</code> — Clickable item active background<br><code>--list-group-disabled-color</code> — Disabled item text colour<br><code>--list-group-disabled-bg</code> — Disabled item background<br><code>--list-group-active-color</code> — Active item text colour<br><code>--list-group-active-bg</code> — Active item background<br><code>--list-group-active-border-color</code> — Active item border colour<br><br><strong>Dimensions</strong><br><code>--list-group-border-width</code> — Border width<br><code>--list-group-border-radius</code> — Border radius<br><code>--list-group-item-padding-x</code> / <code>--list-group-item-padding-y</code> — Item padding"
TPL_MOKOCASSIOPEIA_CSS_VARS_MODAL_LABEL="Modal"
TPL_MOKOCASSIOPEIA_CSS_VARS_MODAL_DESC="<strong>Colours</strong><br><code>--modal-color</code> — Modal text colour<br><code>--modal-bg</code> — Modal background<br><code>--modal-border-color</code> — Outer border colour<br><code>--modal-box-shadow</code> — Modal shadow<br><code>--modal-header-border-color</code> — Header border colour<br><code>--modal-footer-bg</code> — Footer background<br><code>--modal-footer-border-color</code> — Footer border colour<br><br><strong>Dimensions</strong><br><code>--modal-width</code> — Default modal width<br><code>--modal-padding</code> — Body padding<br><code>--modal-margin</code> — Outer margin<br><code>--modal-border-width</code> — Outer border width<br><code>--modal-border-radius</code> — Outer border radius<br><code>--modal-inner-border-radius</code> — Inner border radius<br><code>--modal-header-padding-x</code> / <code>--modal-header-padding-y</code> — Header padding<br><code>--modal-header-padding</code> — Header padding shorthand<br><code>--modal-header-border-width</code> — Header border width<br><code>--modal-title-line-height</code> — Title line height<br><code>--modal-footer-gap</code> — Footer button gap<br><code>--modal-footer-border-width</code> — Footer border width<br><br><strong>Stacking</strong><br><code>--modal-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_TABS_LABEL="Nav Tabs"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_TABS_DESC="<strong>Colours</strong><br><code>--nav-tabs-border-color</code> — Tab bar border colour<br><code>--nav-tabs-link-active-color</code> — Active tab text colour<br><code>--nav-tabs-link-active-bg</code> — Active tab background<br><code>--nav-tabs-link-active-border-color</code> — Active tab border colour<br><br><strong>Dimensions</strong><br><code>--nav-tabs-border-width</code> — Border width<br><code>--nav-tabs-border-radius</code> — Tab border radius"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_PILLS_LABEL="Nav Pills"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_PILLS_DESC="<strong>Colours</strong><br><code>--nav-pills-link-active-color</code> — Active pill text colour<br><code>--nav-pills-link-active-bg</code> — Active pill background<br><br><strong>Dimensions</strong><br><code>--nav-pills-border-radius</code> — Pill border radius"
TPL_MOKOCASSIOPEIA_CSS_VARS_PAGINATION_LABEL="Pagination"
TPL_MOKOCASSIOPEIA_CSS_VARS_PAGINATION_DESC="<strong>Colours</strong><br><code>--pagination-color</code> — Default link colour<br><code>--pagination-bg</code> — Default background<br><code>--pagination-border-color</code> — Default border colour<br><code>--pagination-focus-color</code> — Focused link colour<br><code>--pagination-focus-bg</code> — Focused background<br><code>--pagination-focus-box-shadow</code> — Focus ring<br><code>--pagination-active-color</code> — Active page text colour<br><code>--pagination-active-bg</code> — Active page background<br><code>--pagination-active-border-color</code> — Active page border colour<br><code>--pagination-disabled-color</code> — Disabled link colour<br><code>--pagination-disabled-bg</code> — Disabled background<br><code>--pagination-disabled-border-color</code> — Disabled border colour<br><br><strong>Dimensions</strong><br><code>--pagination-padding-x</code> / <code>--pagination-padding-y</code> — Item padding<br><code>--pagination-border-width</code> — Border width<br><code>--pagination-border-radius</code> — Border radius<br><br><strong>Typography</strong><br><code>--pagination-font-size</code> — Font size"
TPL_MOKOCASSIOPEIA_CSS_VARS_POPOVER_LABEL="Popover"
TPL_MOKOCASSIOPEIA_CSS_VARS_POPOVER_DESC="<strong>Colours</strong><br><code>--popover-bg</code> — Popover background<br><code>--popover-border-color</code> — Border colour<br><code>--popover-box-shadow</code> — Popover shadow<br><code>--popover-header-color</code> — Header text colour<br><code>--popover-header-bg</code> — Header background<br><code>--popover-body-color</code> — Body text colour<br><code>--popover-arrow-border</code> — Arrow border colour<br><br><strong>Dimensions</strong><br><code>--popover-max-width</code> — Maximum width<br><code>--popover-border-width</code> — Border width<br><code>--popover-border-radius</code> — Outer border radius<br><code>--popover-inner-border-radius</code> — Inner border radius<br><code>--popover-header-padding-x</code> / <code>--popover-header-padding-y</code> — Header padding<br><code>--popover-body-padding-x</code> / <code>--popover-body-padding-y</code> — Body padding<br><code>--popover-arrow-width</code> / <code>--popover-arrow-height</code> — Arrow dimensions<br><br><strong>Typography</strong><br><code>--popover-font-size</code> — Font size<br><code>--popover-header-font-size</code> — Header font size<br><br><strong>Stacking</strong><br><code>--popover-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_PROGRESS_LABEL="Progress Bar"
TPL_MOKOCASSIOPEIA_CSS_VARS_PROGRESS_DESC="<strong>Colours</strong><br><code>--progress-bg</code> — Track background<br><code>--progress-bar-color</code> — Bar text colour<br><code>--progress-bar-bg</code> — Bar fill colour<br><code>--progress-box-shadow</code> — Track shadow<br><br><strong>Dimensions</strong><br><code>--progress-height</code> — Track height<br><code>--progress-border-radius</code> — Track border radius<br><br><strong>Typography</strong><br><code>--progress-font-size</code> — Label font size<br><br><strong>Animation</strong><br><code>--progress-bar-transition</code> — Bar width transition"
TPL_MOKOCASSIOPEIA_CSS_VARS_SPINNER_LABEL="Spinner"
TPL_MOKOCASSIOPEIA_CSS_VARS_SPINNER_DESC="<strong>Dimensions</strong><br><code>--spinner-width</code> — Spinner width<br><code>--spinner-height</code> — Spinner height<br><code>--spinner-vertical-align</code> — Inline vertical alignment<br><code>--spinner-border-width</code> — Border-style spinner track width<br><br><strong>Animation</strong><br><code>--spinner-animation-speed</code> — Rotation duration"
TPL_MOKOCASSIOPEIA_CSS_VARS_TABLE_LABEL="Table"
TPL_MOKOCASSIOPEIA_CSS_VARS_TABLE_DESC="<strong>Colours</strong><br><code>--table-color</code> — Default cell text colour<br><code>--table-bg</code> — Default cell background<br><code>--table-border-color</code> — Border colour<br><code>--table-accent-bg</code> — Accent row background (used by variants)<br><code>--table-striped-color</code> — Striped row text colour<br><code>--table-striped-bg</code> — Striped row background<br><code>--table-active-color</code> — Hovered/active row text colour<br><code>--table-active-bg</code> — Hovered/active row background"
TPL_MOKOCASSIOPEIA_CSS_VARS_TOAST_LABEL="Toast"
TPL_MOKOCASSIOPEIA_CSS_VARS_TOAST_DESC="<strong>Colours</strong><br><code>--toast-color</code> — Body text colour<br><code>--toast-bg</code> — Body background<br><code>--toast-border-color</code> — Border colour<br><code>--toast-box-shadow</code> — Toast shadow<br><code>--toast-header-color</code> — Header text colour<br><code>--toast-header-bg</code> — Header background<br><code>--toast-header-border-color</code> — Header border colour<br><br><strong>Dimensions</strong><br><code>--toast-max-width</code> — Maximum width<br><code>--toast-padding-x</code> / <code>--toast-padding-y</code> — Body padding<br><code>--toast-spacing</code> — Gap between stacked toasts<br><code>--toast-border-width</code> — Border width<br><code>--toast-border-radius</code> — Border radius<br><br><strong>Typography</strong><br><code>--toast-font-size</code> — Font size<br><br><strong>Stacking</strong><br><code>--toast-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_TOOLTIP_LABEL="Tooltip"
TPL_MOKOCASSIOPEIA_CSS_VARS_TOOLTIP_DESC="<strong>Colours</strong><br><code>--tooltip-color</code> — Text colour<br><code>--tooltip-bg</code> — Background<br><code>--tooltip-opacity</code> — Overall opacity<br><br><strong>Dimensions</strong><br><code>--tooltip-max-width</code> — Maximum width<br><code>--tooltip-padding-x</code> / <code>--tooltip-padding-y</code> — Inner padding<br><code>--tooltip-margin</code> — Offset from target<br><code>--tooltip-border-radius</code> — Border radius<br><code>--tooltip-arrow-width</code> / <code>--tooltip-arrow-height</code> — Arrow dimensions<br><br><strong>Typography</strong><br><code>--tooltip-font-size</code> — Font size<br><br><strong>Stacking</strong><br><code>--tooltip-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_COMPONENTS_LABEL="Component &amp; Plugin Colours"
TPL_MOKOCASSIOPEIA_CSS_VARS_COMPONENTS_DESC="<strong>Misc components</strong><br><code>--mod-finder-link-hover</code> — Smart Search hover background<br><code>--form-legend-color</code> — Form legend text colour<br><code>--border-gray</code> — General gray border<br><code>--subhead-color</code> — Subheading colour<br><code>--item-list-color</code> — Item list background<br><code>--notification-badge-bg</code> — Notification badge<br><br><strong>Table of Contents (TOC)</strong><br><code>--toc-link-color</code> — TOC link colour<br><code>--toc-link-active-color</code> — Active TOC link<br><br><strong>Choices.js select</strong><br><code>--choices-inner-bg</code> — Inner background<br><code>--choices-dropdown-bg</code> — Dropdown background<br><code>--choices-item-bg</code> — Tag item background<br><code>--choices-item-hover-bg</code> — Tag hover<br><code>--choices-disabled-bg</code> — Disabled state<br><code>--choices-focused-border</code> — Focused border<br><br><strong>Tab buttons (taba)</strong><br><code>--taba-btn-green</code>, <code>--taba-btn-blue</code>, <code>--taba-btn-red</code>, <code>--taba-btn-gray</code>"
TPL_MOKOCASSIOPEIA_CSS_VARS_OFFCANVAS_LABEL="Offcanvas Panel"
TPL_MOKOCASSIOPEIA_CSS_VARS_OFFCANVAS_DESC="<strong>Dimensions</strong><br><code>--offcanvas-width</code> — Panel width (default: <code>400px</code>)<br><code>--offcanvas-height</code> — Panel height for top/bottom variants (default: <code>30vh</code>)<br><code>--offcanvas-padding-x</code> / <code>--offcanvas-padding-y</code> — Inner padding<br><br><strong>Colours</strong><br><code>--offcanvas-bg</code> — Panel background (default: <code>var(--body-bg)</code>)<br><code>--offcanvas-color</code> — Panel text colour (default: <code>var(--body-color)</code>)<br><code>--offcanvas-border-width</code> / <code>--offcanvas-border-color</code> — Panel border<br><code>--offcanvas-box-shadow</code> — Drop shadow<br><br><strong>Stacking</strong><br><code>--offcanvas-zindex</code> — z-index (default: <code>1045</code>)"
TPL_MOKOCASSIOPEIA_CSS_VARS_VM_LABEL="VirtueMart"
TPL_MOKOCASSIOPEIA_CSS_VARS_VM_DESC="<strong>Surfaces &amp; text</strong><br><code>--vm-surface</code> / <code>--vm-surface-2</code> — Card/panel backgrounds<br><code>--vm-text</code> / <code>--vm-text-strong</code> / <code>--vm-text-muted</code> — Text variants<br><code>--vm-border</code> — Border colour<br><code>--vm-price-color</code> — Price text colour<br><br><strong>Layout &amp; density</strong><br><code>--vm-container-max-width</code> — Max content width (default: <code>1200px</code>)<br><code>--vm-section-gap</code> — Section spacing (default: <code>2rem</code>)<br><code>--vm-block-radius</code> / <code>--vm-block-shadow</code> — Block appearance<br><br><strong>Typography</strong><br><code>--vm-category-title-size</code> — Category heading size<br><code>--vm-product-title-size</code> — Product title size<br><code>--vm-price-size</code> — Price size<br><br><strong>Buttons</strong><br><code>--vm-btn-primary-bg</code> / <code>--vm-btn-primary-text</code> — Primary button<br><code>--vm-btn-secondary-bg</code> / <code>--vm-btn-secondary-text</code> — Secondary button<br><br><strong>Image overlay controls</strong><br><code>--vm-image-overlay-btn-bg</code> / <code>--vm-image-overlay-btn-color</code> — Overlay button appearance"
TPL_MOKOCASSIOPEIA_CSS_VARS_GABLE_LABEL="Gable"
TPL_MOKOCASSIOPEIA_CSS_VARS_GABLE_DESC="Colour tokens used by the Gable extension.<br><code>--gab-blue</code> — <code>#0066cc</code><br><code>--gab-green</code> — <code>#28a745</code><br><code>--gab-red</code> — <code>#dc3545</code><br><code>--gab-orange</code> — <code>#fd7e14</code><br><code>--gab-gray1</code> — <code>#495057</code><br><code>--gab-gray2</code> — <code>#6c757d</code><br><code>--gab-gray3</code> — <code>#adb5bd</code>"
; ===== Misc ===== ; ===== Misc =====
MOD_BREADCRUMBS_HERE="YOU ARE HERE:" MOD_BREADCRUMBS_HERE="YOU ARE HERE:"

5
src/language/en-GB/tpl_mokocassiopeia.sys.ini
View File

@@ -8,7 +8,7 @@
; DEFGROUP: Joomla.Template.Site ; DEFGROUP: Joomla.Template.Site
; INGROUP: MokoCassiopeia ; INGROUP: MokoCassiopeia
; PATH: ./language/en-GB/tpl_mokocassiopeia.sys.ini ; PATH: ./language/en-GB/tpl_mokocassiopeia.sys.ini
; VERSION: 03.06.02 ; VERSION: 03.09.01
; BRIEF: English (GB) system language strings for template metadata and installer ; BRIEF: English (GB) system language strings for template metadata and installer
; ;
TPL_MOKOCASSIOPEIA="MokoCassiopeia Site template" TPL_MOKOCASSIOPEIA="MokoCassiopeia Site template"
@@ -18,6 +18,7 @@ TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_COLLAPSE_METISMENU="Collapsible Dropdown"
TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_DROPDOWN_METISMENU="Dropdown" TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_DROPDOWN_METISMENU="Dropdown"
TPL_MOKOCASSIOPEIA_POSITION_BANNER="Banner" TPL_MOKOCASSIOPEIA_POSITION_BANNER="Banner"
TPL_MOKOCASSIOPEIA_POSITION_BELOW_TOP="Below Top" TPL_MOKOCASSIOPEIA_POSITION_BELOW_TOP="Below Top"
TPL_MOKOCASSIOPEIA_POSITION_BRAND_ASIDE="Brand Aside"
TPL_MOKOCASSIOPEIA_POSITION_BOTTOM_A="Bottom-A" TPL_MOKOCASSIOPEIA_POSITION_BOTTOM_A="Bottom-A"
TPL_MOKOCASSIOPEIA_POSITION_BOTTOM_B="Bottom-B" TPL_MOKOCASSIOPEIA_POSITION_BOTTOM_B="Bottom-B"
TPL_MOKOCASSIOPEIA_POSITION_BREADCRUMBS="Breadcrumbs" TPL_MOKOCASSIOPEIA_POSITION_BREADCRUMBS="Breadcrumbs"
@@ -34,4 +35,4 @@ TPL_MOKOCASSIOPEIA_POSITION_TOP_B="Top-b"
TPL_MOKOCASSIOPEIA_POSITION_TOPBAR="Top Bar" TPL_MOKOCASSIOPEIA_POSITION_TOPBAR="Top Bar"
TPL_MOKOCASSIOPEIA_POSITION_DRAWER_LEFT="Drawer-Left" TPL_MOKOCASSIOPEIA_POSITION_DRAWER_LEFT="Drawer-Left"
TPL_MOKOCASSIOPEIA_POSITION_DRAWER_RIGHT="Drawer-Right" TPL_MOKOCASSIOPEIA_POSITION_DRAWER_RIGHT="Drawer-Right"
TPL_MOKOCASSIOPEIA_XML_DESCRIPTION="<h3>MokoCassiopeia Template Description</h3> <p> <strong>MokoCassiopeia 3.0</strong> continues Joomla’s tradition of space-themed default templates— building on the legacy of <em>Solarflare</em> (Joomla 1.0), <em>Milkyway</em> (Joomla 1.5), and <em>Protostar</em> (Joomla 3.0). </p> <p> This template is a customized fork of the <strong>Cassiopeia</strong> 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. </p> <h4>Custom Colour Themes</h4> <p> To create a custom colour scheme, copy the template file <code>templates/theme_custom_light.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code> or <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code>. Customise the CSS variables to match your brand, then activate it in <em>System → Site Templates → MokoCassiopeia → Theme tab</em> by selecting "Custom" for the Light or Dark Mode Palette. For comprehensive documentation on all available CSS variables, see <code>docs/CSS_VARIABLES.md</code>. </p> <h4>Code Attribution</h4> <p> This template is based on the original <strong>Cassiopeia</strong> template developed by the <a href=\"https://www.joomla.org\" target=\"_blank\" rel=\"noopener\">Joomla! Project</a> and released under the GNU General Public License. </p> <p> Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards. </p> <p> It includes integration with <a href=\"https://afeld.github.io/bootstrap-toc/\" target=\"_blank\" rel=\"noopener\">Bootstrap TOC</a>, an open-source table of contents generator by A. Feld, licensed under the MIT License. </p> <p> All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable. </p>" TPL_MOKOCASSIOPEIA_XML_DESCRIPTION="<h3>MokoCassiopeia Template Description</h3> <p> <strong>MokoCassiopeia</strong> continues Joomla’s tradition of space-themed default templates— building on the legacy of <em>Solarflare</em> (Joomla 1.0), <em>Milkyway</em> (Joomla 1.5), and <em>Protostar</em> (Joomla 3.0). </p> <p> This template is a customized fork of the <strong>Cassiopeia</strong> 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. </p> <h4>Custom Colour Themes</h4> <p> Starter palette files are included with the template. To create a custom colour scheme, copy <code>templates/mokocassiopeia/templates/light.custom.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code>, or <code>templates/mokocassiopeia/templates/dark.custom.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code>. Customise the CSS variables to match your brand, then activate your palette in <em>System → Site Templates → MokoCassiopeia → Theme tab</em> by selecting "Custom" for the Light or Dark Mode Palette. A full variable reference is available in the <em>CSS Variables</em> tab in template options. </p> <h4>Custom CSS &amp; JavaScript</h4> <p> For site-specific styles and scripts that should survive template updates, create the following files: </p> <ul> <li><code>media/templates/site/mokocassiopeia/css/user.css</code> — loaded on every page for custom CSS overrides.</li> <li><code>media/templates/site/mokocassiopeia/js/user.js</code> — loaded on every page for custom JavaScript.</li> </ul> <p> These files are gitignored and will not be overwritten by template updates. </p> <h4>Code Attribution</h4> <p> This template is based on the original <strong>Cassiopeia</strong> template developed by the <a href=\"https://www.joomla.org\" target=\"_blank\" rel=\"noopener\">Joomla! Project</a> and released under the GNU General Public License. </p> <p> Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards. </p> <p> It includes integration with <a href=\"https://afeld.github.io/bootstrap-toc/\" target=\"_blank\" rel=\"noopener\">Bootstrap TOC</a>, an open-source table of contents generator by A. Feld, licensed under the MIT License. </p> <p> All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable. </p>"

129
src/language/en-US/tpl_mokocassiopeia.ini
View File

@@ -8,7 +8,7 @@
; DEFGROUP: Joomla.Template.Site ; DEFGROUP: Joomla.Template.Site
; INGROUP: MokoCassiopeia ; INGROUP: MokoCassiopeia
; PATH: ./language/en-US/tpl_mokocassiopeia.ini ; PATH: ./language/en-US/tpl_mokocassiopeia.ini
; VERSION: 03.06.02 ; VERSION: 03.09.01
; BRIEF: English (US) language strings for the MokoCassiopeia Joomla template ; BRIEF: English (US) language strings for the MokoCassiopeia Joomla template
; ;
; Note: Template metadata strings (name, description) are in tpl_mokocassiopeia.sys.ini ; Note: Template metadata strings (name, description) are in tpl_mokocassiopeia.sys.ini
@@ -47,6 +47,8 @@ TPL_MOKOCASSIOPEIA_GOOGLEANALYTICS_LABEL="Use Google Analytics?"
TPL_MOKOCASSIOPEIA_GOOGLEANALYTICS_DESC="Do you want to use Google Analytics?<br>More information on Google Analytics can be found <a target='_blank' href='https://developers.google.com/analytics'>here.</a>" TPL_MOKOCASSIOPEIA_GOOGLEANALYTICS_DESC="Do you want to use Google Analytics?<br>More information on Google Analytics can be found <a target='_blank' href='https://developers.google.com/analytics'>here.</a>"
TPL_MOKOCASSIOPEIA_GOOGLEANALYTICSID_LABEL="Google Analytics ID" TPL_MOKOCASSIOPEIA_GOOGLEANALYTICSID_LABEL="Google Analytics ID"
TPL_MOKOCASSIOPEIA_GOOGLEANALYTICSID_DESC="Begins with 'G-'" TPL_MOKOCASSIOPEIA_GOOGLEANALYTICSID_DESC="Begins with 'G-'"
TPL_MOKOCASSIOPEIA_GOOGLESITEKEY_LABEL="Google Search Console Verification"
TPL_MOKOCASSIOPEIA_GOOGLESITEKEY_DESC="Paste the content value from the &lt;meta name=&quot;google-site-verification&quot;&gt; tag. Find this in Google Search Console under Ownership Verification &rarr; HTML tag method."
; ===== Branding & icons (Theme tab) ===== ; ===== Branding & icons (Theme tab) =====
TPL_MOKOCASSIOPEIA_BRAND_LABEL="Brand" TPL_MOKOCASSIOPEIA_BRAND_LABEL="Brand"
@@ -75,9 +77,9 @@ TPL_MOKOCASSIOPEIA_COLOR_NAME_STANDARD="Standard"
TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom" TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom"
; New labels for Theme tab dropdowns ; New labels for Theme tab dropdowns
TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL="Light color palette" TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL="Light color palette"
TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_DESC="Select a color palette for light mode. <strong>Standard</strong> uses the default blue theme with comprehensive styling for all components. <strong>Custom</strong> allows you to create your own color scheme - copy the template file from <code>templates/theme_custom_light.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code> and customize the CSS variables to match your brand." TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_DESC="Select a color palette for light mode. <strong>Standard</strong> uses the default blue theme with comprehensive styling for all components. <strong>Custom</strong> loads <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code> — copy the starter file from <code>templates/mokocassiopeia/templates/light.custom.css</code> and customize the CSS variables to match your brand."
TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_LABEL="Dark color palette" TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_LABEL="Dark color palette"
TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_DESC="Select a color palette for dark mode. <strong>Standard</strong> uses the default blue theme optimized for dark backgrounds with proper contrast. <strong>Custom</strong> allows you to create your own color scheme - copy the template file from <code>templates/theme_custom_dark.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code> and customize the CSS variables to match your brand." TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_DESC="Select a color palette for dark mode. <strong>Standard</strong> uses the default blue theme optimized for dark backgrounds with proper contrast. <strong>Custom</strong> loads <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code> — copy the starter file from <code>templates/mokocassiopeia/templates/dark.custom.css</code> and customize the CSS variables to match your brand."
; ===== Theme tab (core feature strings) ===== ; ===== Theme tab (core feature strings) =====
TPL_MOKO_THEME_FIELDSET="Theme" TPL_MOKO_THEME_FIELDSET="Theme"
@@ -109,6 +111,127 @@ TPL_MOKO_THEME_FAB_ENABLED_DESC="Display a persistent, accessible theme toggle."
TPL_MOKO_THEME_FAB_POS="Floating switch position" TPL_MOKO_THEME_FAB_POS="Floating switch position"
TPL_MOKO_THEME_FAB_POS_DESC="Screen corner for the toggle." TPL_MOKO_THEME_FAB_POS_DESC="Screen corner for the toggle."
; ===== CSS Variables tab =====
TPL_MOKOCASSIOPEIA_CSS_VARS_FIELDSET_LABEL="CSS Variables"
TPL_MOKOCASSIOPEIA_CSS_VARS_INTRO="<p>All colors, spacing and layout values are driven by CSS custom properties. To override any variable without editing the template, add your overrides to <code>media/templates/site/mokocassiopeia/css/user.css</code>, or create a custom palette file (see the Theme tab). Variables are scoped to <code>:root[data-bs-theme=&quot;light&quot;]</code> or <code>:root[data-bs-theme=&quot;dark&quot;]</code> so light and dark values are independent.</p>"
TPL_MOKOCASSIOPEIA_CSS_VARS_BRAND_LABEL="Brand &amp; Theme Colors"
TPL_MOKOCASSIOPEIA_CSS_VARS_BRAND_DESC="<code>--color-primary</code> — Primary brand color (default: <code>#112855</code>)<br><code>--accent-color-primary</code> — Primary accent (default: <code>#3f8ff0</code>)<br><code>--accent-color-secondary</code> — Secondary accent"
TPL_MOKOCASSIOPEIA_CSS_VARS_LINKS_LABEL="Links &amp; Link Utilities"
TPL_MOKOCASSIOPEIA_CSS_VARS_LINKS_DESC="<strong>Core link tokens</strong><br><code>--color-link</code> — Base link color<br><code>--color-hover</code> — Base hover color<br><code>--link-color</code> / <code>--link-hover-color</code> — Bootstrap link colors<br><code>--link-decoration</code> — Default text-decoration<br><code>--link-active-color</code> — Active state<br><br><strong>Semantic link utilities</strong> (replace <code>{color}</code> with <code>primary</code>, <code>secondary</code>, <code>success</code>, <code>info</code>, <code>warning</code>, <code>danger</code>, <code>light</code>, <code>dark</code>)<br><code>--link-{color}-color</code> — Color for <code>.link-{color}</code><br><code>--link-{color}-hover-color</code> — Hover color"
TPL_MOKOCASSIOPEIA_CSS_VARS_TYPO_LABEL="Typography &amp; Body"
TPL_MOKOCASSIOPEIA_CSS_VARS_TYPO_DESC="<code>--body-color</code> — Default text color (default: <code>#22262a</code>)<br><code>--body-bg</code> — Page background (default: <code>#fff</code>)<br><code>--body-font-family</code> — Font stack<br><code>--body-font-size</code> — Base size (default: <code>1rem</code>)<br><code>--body-font-weight</code> — Base weight (default: <code>400</code>)<br><code>--body-line-height</code> — Line height (default: <code>1.5</code>)<br><code>--heading-color</code> — Heading color (default: <code>inherit</code>)<br><code>--muted-color</code> — Muted/secondary text (default: <code>#6d757e</code>)<br><code>--code-color</code> — Inline code color<br><code>--emphasis-color</code> — Strong emphasis color<br><code>--secondary-color</code> / <code>--tertiary-color</code> — Stepped text opacities<br><code>--highlight-color</code> / <code>--highlight-bg</code> — <code>&lt;mark&gt;</code> colors<br><code>--font-sans-serif</code> / <code>--font-monospace</code> — Font stacks"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_LABEL="Navigation, Navbar &amp; Offcanvas"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_DESC="<strong>Theme nav</strong><br><code>--nav-bg-color</code> — Navbar background<br><code>--nav-text-color</code> — Navbar text<br><code>--mainmenu-nav-link-color</code> — Active nav link<br><br><strong>Navbar tokens</strong><br><code>--navbar-padding-x</code> / <code>--navbar-padding-y</code> — Navbar padding<br><code>--navbar-brand-font-size</code> — Brand font size<br><code>--navbar-toggler-border-color</code> — Mobile toggler border<br><code>--nav-link-padding-x</code> / <code>--nav-link-padding-y</code> — Link padding<br><code>--nav-link-font-weight</code> — Link weight<br><code>--nav-link-disabled-color</code> — Disabled link color<br><br><strong>Offcanvas</strong><br><code>--offcanvas-color</code> — Offcanvas text color<br><code>--offcanvas-padding-x</code> / <code>--offcanvas-padding-y</code> — Offcanvas padding"
TPL_MOKOCASSIOPEIA_CSS_VARS_LAYOUT_LABEL="Layout &amp; Spacing"
TPL_MOKOCASSIOPEIA_CSS_VARS_LAYOUT_DESC="<code>--padding-x</code> / <code>--padding-y</code> — Default component padding<br><code>--nav-toggle-size</code> — Mobile nav toggle button size (default: <code>3rem</code>)<br><code>--secondary-bg</code> — Secondary surface background (default: <code>#eaedf0</code>)<br><code>--tertiary-bg</code> — Tertiary surface background (default: <code>#f9fafb</code>)<br><code>--hr-color</code> — Horizontal rule color<br><code>--border-color-soft</code> — Soft border variant<br><code>--kbd-bg</code> / <code>--kbd-ink</code> — Keyboard element colors<br><code>--toc-bg</code> / <code>--toc-ink</code> — Table of contents colors<br><code>--selection-bg</code> / <code>--selection-ink</code> — Text selection colors<br><code>--gradient</code> — Bootstrap gradient overlay value<br><code>--bg-opacity</code> — Background opacity utility base"
TPL_MOKOCASSIOPEIA_CSS_VARS_BP_LABEL="Breakpoints"
TPL_MOKOCASSIOPEIA_CSS_VARS_BP_DESC="Read-only reference values matching Bootstrap breakpoints.<br><code>--bp-xs</code> — <code>0</code><br><code>--bp-sm</code> — <code>576px</code><br><code>--bp-md</code> — <code>768px</code><br><code>--bp-lg</code> — <code>992px</code><br><code>--bp-xl</code> — <code>1200px</code>"
TPL_MOKOCASSIOPEIA_CSS_VARS_BS_LABEL="Bootstrap Semantic Palette"
TPL_MOKOCASSIOPEIA_CSS_VARS_BS_DESC="These map to Bootstrap components (buttons, alerts, badges). Override to retheme all components at once.<br><code>--primary</code> — <code>#010156</code><br><code>--secondary</code> — <code>#6d757e</code><br><code>--success</code> — <code>#448344</code><br><code>--info</code> — <code>#30638d</code><br><code>--warning</code> — <code>#ad6200</code><br><code>--danger</code> — <code>#a51f18</code><br><code>--light</code> — <code>#f9fafb</code><br><code>--dark</code> — <code>#353b41</code><br>Each color also has an <code>--{color}-rgb</code> variant for use in <code>rgba()</code> expressions."
TPL_MOKOCASSIOPEIA_CSS_VARS_BS_STATES_LABEL="Bootstrap State Colors"
TPL_MOKOCASSIOPEIA_CSS_VARS_BS_STATES_DESC="Contextual state tokens used by alerts, badges and list groups. Replace <code>{color}</code> with <code>primary</code>, <code>secondary</code>, <code>success</code>, <code>info</code>, <code>warning</code>, <code>danger</code>, <code>light</code>, or <code>dark</code>.<br><code>--{color}-text-emphasis</code> — High-contrast text on subtle backgrounds<br><code>--{color}-bg-subtle</code> — Tinted component background<br><code>--{color}-border-subtle</code> — Tinted component border"
TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_LIST_LABEL="Alert &amp; List Group Colors"
TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_LIST_DESC="<strong>Alert link colors</strong> — override to adjust link contrast inside <code>.alert-{color}</code> components.<br><code>--alert-{color}-link-color</code> — e.g. <code>--alert-primary-link-color</code><br><br><strong>List group item colors</strong> — contextual surfaces for <code>.list-group-item-{color}</code>.<br><code>--list-group-item-{color}-color</code> — Text color<br><code>--list-group-item-{color}-bg</code> — Background<br><code>--list-group-item-{color}-active-bg</code> — Active state background"
TPL_MOKOCASSIOPEIA_CSS_VARS_COLORS_LABEL="Standard Colors, Grays &amp; Opacity"
TPL_MOKOCASSIOPEIA_CSS_VARS_COLORS_DESC="<strong>Named colors</strong><br><code>--blue</code>, <code>--indigo</code>, <code>--purple</code>, <code>--pink</code>, <code>--red</code>, <code>--orange</code>, <code>--yellow</code>, <code>--green</code>, <code>--teal</code>, <code>--cyan</code>, <code>--black</code>, <code>--white</code><br><br><strong>Gray scale</strong><br><code>--gray-100</code> through <code>--gray-900</code> plus <code>--white-rgb</code> and <code>--black-rgb</code><br><br><strong>Opacity utilities</strong><br><code>--opacity-0</code>, <code>--opacity-5</code>, <code>--opacity-10</code>, <code>--opacity-15</code>, <code>--opacity-20</code>, <code>--opacity-25</code>, <code>--opacity-30</code>, <code>--opacity-50</code>, <code>--opacity-75</code>, <code>--opacity-100</code>"
TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_LABEL="Hero / Banner Overlay"
TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_DESC="Applied to the <code>.custom-hero</code> / <code>.banner-overlay</code> layout. Set on <code>:root[data-bs-theme]</code> so light and dark values are independent.<br><code>--hero-height</code> — Banner height (default: <code>70vh</code>)<br><code>--hero-color</code> — Base text color<br><code>--hero-bg-repeat</code> — Background repeat (default: <code>no-repeat</code>)<br><code>--hero-bg-attachment</code> — Background attachment (default: <code>fixed</code>)<br><code>--hero-bg-position</code> — Background position (default: <code>top center</code>)<br><code>--hero-bg-size</code> — Background size (default: <code>cover</code>)<br><code>--hero-border-bottom</code> — Bottom border (default: <code>solid var(--accent-color-secondary)</code>)<br><code>--hero-overlay-bg</code> — Overlay tint color (light default: <code>hsla(0,0%,0%,0.1)</code> / dark default: <code>hsla(0,0%,0%,0.3)</code>)<br><code>--hero-overlay-padding</code> — Overlay inner padding (default: <code>1em</code>)<br><code>--hero-overlay-text-align</code> — Overlay text alignment (default: <code>center</code>)<br><code>--hero-overlay-text-color</code> — Overlay text color"
TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_LABEL="Header Background"
TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_DESC="Controls the background of the topbar/header area.<br><code>--header-background-image</code> — CSS <code>background-image</code> value (default: built-in SVG pattern)<br><code>--header-background-attachment</code> — <code>fixed</code> or <code>scroll</code><br><code>--header-background-repeat</code> — e.g. <code>repeat</code>, <code>no-repeat</code><br><code>--header-background-size</code> — e.g. <code>auto</code>, <code>cover</code>, <code>contain</code>"
TPL_MOKOCASSIOPEIA_CSS_VARS_CONTAINERS_LABEL="Container Backgrounds"
TPL_MOKOCASSIOPEIA_CSS_VARS_CONTAINERS_DESC="Each layout container has its own background variables. Replace <code>{pos}</code> with: <code>below-topbar</code>, <code>top-a</code>, <code>top-b</code>, <code>sidebar</code>, <code>bottom-a</code>, or <code>bottom-b</code>.<br><br><code>--container-{pos}-bg-image</code> — Background image (default: <code>none</code>)<br><code>--container-{pos}-bg-color</code> — Background color (default: <code>transparent</code>)<br><code>--container-{pos}-bg-position</code> — Background position<br><code>--container-{pos}-bg-attachment</code> — <code>fixed</code> or <code>scroll</code><br><code>--container-{pos}-bg-repeat</code> — Repeat behavior<br><code>--container-{pos}-bg-size</code> — e.g. <code>cover</code>, <code>auto</code><br><code>--container-{pos}-border</code> — Border shorthand<br><code>--container-{pos}-border-radius</code> — Border radius<br><br>Also: <code>--container-toc-bg</code> / <code>--container-toc-color</code> for the TOC sidebar."
TPL_MOKOCASSIOPEIA_CSS_VARS_BORDERS_LABEL="Borders"
TPL_MOKOCASSIOPEIA_CSS_VARS_BORDERS_DESC="<code>--border-width</code> — Default width (default: <code>1px</code>)<br><code>--border-style</code> — Default style (default: <code>solid</code>)<br><code>--border-color</code> — Default border color (default: <code>#dfe3e7</code>)<br><code>--border-color-translucent</code> — Semi-transparent border<br><code>--border-radius</code> — Default radius (default: <code>.25rem</code>)<br><code>--border-radius-sm</code> — Small radius<br><code>--border-radius-lg</code> — Large radius<br><code>--border-radius-xl</code> — Extra large radius<br><code>--border-radius-xxl</code> — 2XL radius (default: <code>2rem</code>)<br><code>--border-radius-pill</code> — Pill radius (default: <code>50rem</code>)"
TPL_MOKOCASSIOPEIA_CSS_VARS_SHADOWS_LABEL="Shadows &amp; Shadow Tokens"
TPL_MOKOCASSIOPEIA_CSS_VARS_SHADOWS_DESC="<strong>Box shadows</strong><br><code>--box-shadow</code> — Standard shadow<br><code>--box-shadow-sm</code> — Subtle shadow<br><code>--box-shadow-lg</code> — Prominent shadow<br><code>--box-shadow-inset</code> — Inset shadow<br><br><strong>Shadow color tokens</strong> — used as building blocks by component shadows<br><code>--shadow-color-light</code> — <code>rgba(black, 0.15)</code><br><code>--shadow-color-medium</code> — <code>rgba(black, 0.25)</code><br><code>--shadow-color-dark</code> — <code>rgba(black, 0.30)</code><br><code>--highlight-translucent</code> — <code>rgba(white, 0.15)</code>"
TPL_MOKOCASSIOPEIA_CSS_VARS_FORMS_LABEL="Focus &amp; Forms"
TPL_MOKOCASSIOPEIA_CSS_VARS_FORMS_DESC="<code>--focus-ring-width</code> — Keyboard focus ring width (default: <code>.25rem</code>)<br><code>--focus-ring-opacity</code> — Focus ring opacity<br><code>--focus-ring-color</code> — Focus ring color<br><code>--input-color</code> — Input text color<br><code>--input-bg</code> — Input background<br><code>--input-border-color</code> — Input border color<br><code>--input-focus-border-color</code> — Focused border color<br><code>--input-focus-box-shadow</code> — Focused input shadow<br><code>--input-placeholder-color</code> — Placeholder text color<br><code>--input-disabled-bg</code> — Disabled input background<br><code>--input-disabled-border-color</code> — Disabled input border<br><code>--form-valid-color</code> / <code>--form-valid-border-color</code> — Valid state<br><code>--form-invalid-color</code> / <code>--form-invalid-border-color</code> — Invalid state"
TPL_MOKOCASSIOPEIA_CSS_VARS_BUTTONS_LABEL="Buttons"
TPL_MOKOCASSIOPEIA_CSS_VARS_BUTTONS_DESC="Applied on <code>:root</code> for global button defaults:<br><code>--btn-border-radius</code> — Button border radius<br><code>--btn-box-shadow</code> — Button box shadow<br><br>Applied on <code>.btn</code> for base button tokens (overridable per variant):<br><code>--btn-padding-x</code> / <code>--btn-padding-y</code> — Padding<br><code>--btn-font-size</code> / <code>--btn-font-weight</code> / <code>--btn-line-height</code> — Typography<br><code>--btn-color</code> / <code>--btn-bg</code> / <code>--btn-border-color</code> — Default state<br><code>--btn-hover-color</code> / <code>--btn-hover-bg</code> / <code>--btn-hover-border-color</code> — Hover state<br><code>--btn-active-color</code> / <code>--btn-active-bg</code> / <code>--btn-active-shadow</code> — Active state<br><code>--btn-disabled-opacity</code> — Disabled opacity<br><br>Each <code>.btn-{color}</code> and <code>.btn-outline-{color}</code> class inherits these tokens and sets its own values."
TPL_MOKOCASSIOPEIA_CSS_VARS_CARDS_LABEL="Cards"
TPL_MOKOCASSIOPEIA_CSS_VARS_CARDS_DESC="<code>--card-spacer-y</code> / <code>--card-spacer-x</code> — Body padding (default: <code>1rem</code>)<br><code>--card-title-spacer-y</code> — Title bottom margin (default: <code>0.5rem</code>)<br><code>--card-border-width</code> — Border width (default: <code>1px</code>)<br><code>--card-border-color</code> — Border color<br><code>--card-border-radius</code> — Border radius<br><code>--card-box-shadow</code> — Card shadow (default: <code>none</code>)<br><code>--card-cap-padding-y</code> / <code>--card-cap-padding-x</code> — Header/footer padding<br><code>--card-cap-bg</code> — Header/footer background<br><code>--card-cap-color</code> — Header/footer text color<br><code>--card-color</code> — Body text color<br><code>--card-bg</code> — Card background"
TPL_MOKOCASSIOPEIA_CSS_VARS_ACCORDION_LABEL="Accordion"
TPL_MOKOCASSIOPEIA_CSS_VARS_ACCORDION_DESC="<strong>Colors</strong><br><code>--accordion-color</code> — Panel text color<br><code>--accordion-bg</code> — Panel background<br><code>--accordion-border-color</code> — Border color<br><code>--accordion-btn-color</code> — Button text color<br><code>--accordion-btn-bg</code> — Button background<br><code>--accordion-btn-focus-border-color</code> — Button focus border color<br><code>--accordion-btn-focus-box-shadow</code> — Button focus ring<br><code>--accordion-active-color</code> — Active item text color<br><code>--accordion-active-bg</code> — Active item background<br><br><strong>Dimensions</strong><br><code>--accordion-border-width</code> — Border width<br><code>--accordion-border-radius</code> — Outer border radius<br><code>--accordion-inner-border-radius</code> — Inner border radius<br><code>--accordion-btn-padding-x</code> / <code>--accordion-btn-padding-y</code> — Button padding<br><code>--accordion-body-padding-x</code> / <code>--accordion-body-padding-y</code> — Body padding<br><br><strong>Icon &amp; Animation</strong><br><code>--accordion-btn-icon</code> — Collapse icon (collapsed state)<br><code>--accordion-btn-icon-width</code> — Icon size<br><code>--accordion-btn-icon-transform</code> — Icon rotation when expanded<br><code>--accordion-btn-icon-transition</code> — Icon rotation transition<br><code>--accordion-btn-active-icon</code> — Icon (expanded state)<br><code>--accordion-transition</code> — Panel open/close transition<br><br><strong>Stacking</strong><br><code>--accordion-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_BASE_LABEL="Alert (Base)"
TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_BASE_DESC="<strong>Colors</strong><br><code>--alert-color</code> — Alert text color<br><code>--alert-bg</code> — Alert background<br><code>--alert-border-color</code> — Border color<br><code>--alert-border</code> — Full border shorthand<br><br><strong>Dimensions</strong><br><code>--alert-padding-x</code> / <code>--alert-padding-y</code> — Inner padding<br><code>--alert-margin-bottom</code> — Bottom margin<br><code>--alert-border-radius</code> — Border radius<br><br><em>Note: per-variant contextual tokens (colors, backgrounds, borders) are covered in the Bootstrap State Colors section above.</em>"
TPL_MOKOCASSIOPEIA_CSS_VARS_BADGE_LABEL="Badge"
TPL_MOKOCASSIOPEIA_CSS_VARS_BADGE_DESC="<strong>Colors</strong><br><code>--badge-color</code> — Badge text color<br><br><strong>Typography</strong><br><code>--badge-font-size</code> — Font size<br><code>--badge-font-weight</code> — Font weight<br><br><strong>Dimensions</strong><br><code>--badge-padding-x</code> / <code>--badge-padding-y</code> — Padding<br><code>--badge-border-radius</code> — Border radius"
TPL_MOKOCASSIOPEIA_CSS_VARS_BACKDROP_LABEL="Backdrop"
TPL_MOKOCASSIOPEIA_CSS_VARS_BACKDROP_DESC="<strong>Colors</strong><br><code>--backdrop-bg</code> — Backdrop color (default: <code>#000</code>)<br><code>--backdrop-opacity</code> — Backdrop opacity (default: <code>0.5</code>)<br><br><strong>Stacking</strong><br><code>--backdrop-zindex</code> — z-index (default: <code>1040</code>)"
TPL_MOKOCASSIOPEIA_CSS_VARS_BREADCRUMB_LABEL="Breadcrumb"
TPL_MOKOCASSIOPEIA_CSS_VARS_BREADCRUMB_DESC="<strong>Colors</strong><br><code>--breadcrumb-bg</code> — Background color<br><code>--breadcrumb-divider-color</code> — Divider color<br><code>--breadcrumb-item-active-color</code> — Active item color<br><br><strong>Dimensions</strong><br><code>--breadcrumb-padding-x</code> / <code>--breadcrumb-padding-y</code> — Container padding<br><code>--breadcrumb-margin-bottom</code> — Bottom margin<br><code>--breadcrumb-item-padding-x</code> — Spacing between items<br><code>--breadcrumb-border-radius</code> — Container border radius"
TPL_MOKOCASSIOPEIA_CSS_VARS_DROPDOWN_MENU_LABEL="Dropdown Menu"
TPL_MOKOCASSIOPEIA_CSS_VARS_DROPDOWN_MENU_DESC="<strong>Colors</strong><br><code>--dropdown-color</code> — Default text color<br><code>--dropdown-bg</code> — Menu background<br><code>--dropdown-border-color</code> — Border color<br><code>--dropdown-divider-bg</code> — Divider color<br><code>--dropdown-box-shadow</code> — Menu shadow<br><code>--dropdown-link-color</code> — Link text color<br><code>--dropdown-link-active-color</code> — Active link text color<br><code>--dropdown-link-active-bg</code> — Active link background<br><code>--dropdown-link-disabled-color</code> — Disabled link color<br><code>--dropdown-header-color</code> — Header text color<br><br><strong>Dimensions</strong><br><code>--dropdown-min-width</code> — Minimum width<br><code>--dropdown-padding-x</code> / <code>--dropdown-padding-y</code> — Menu padding<br><code>--dropdown-spacer</code> — Gap from toggle<br><code>--dropdown-border-width</code> — Border width<br><code>--dropdown-border-radius</code> — Outer border radius<br><code>--dropdown-inner-border-radius</code> — Inner border radius<br><code>--dropdown-divider-margin-y</code> — Divider vertical margin<br><code>--dropdown-item-padding-x</code> / <code>--dropdown-item-padding-y</code> — Item padding<br><code>--dropdown-header-padding-x</code> / <code>--dropdown-header-padding-y</code> — Header padding<br><br><strong>Typography</strong><br><code>--dropdown-font-size</code> — Menu font size<br><br><strong>Stacking</strong><br><code>--dropdown-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_LIST_GROUP_LABEL="List Group"
TPL_MOKOCASSIOPEIA_CSS_VARS_LIST_GROUP_DESC="<strong>Colors</strong><br><code>--list-group-color</code> — Default text color<br><code>--list-group-bg</code> — Default background<br><code>--list-group-border-color</code> — Border color<br><code>--list-group-action-color</code> — Clickable item text color<br><code>--list-group-action-active-color</code> — Clickable item active text color<br><code>--list-group-action-active-bg</code> — Clickable item active background<br><code>--list-group-disabled-color</code> — Disabled item text color<br><code>--list-group-disabled-bg</code> — Disabled item background<br><code>--list-group-active-color</code> — Active item text color<br><code>--list-group-active-bg</code> — Active item background<br><code>--list-group-active-border-color</code> — Active item border color<br><br><strong>Dimensions</strong><br><code>--list-group-border-width</code> — Border width<br><code>--list-group-border-radius</code> — Border radius<br><code>--list-group-item-padding-x</code> / <code>--list-group-item-padding-y</code> — Item padding"
TPL_MOKOCASSIOPEIA_CSS_VARS_MODAL_LABEL="Modal"
TPL_MOKOCASSIOPEIA_CSS_VARS_MODAL_DESC="<strong>Colors</strong><br><code>--modal-color</code> — Modal text color<br><code>--modal-bg</code> — Modal background<br><code>--modal-border-color</code> — Outer border color<br><code>--modal-box-shadow</code> — Modal shadow<br><code>--modal-header-border-color</code> — Header border color<br><code>--modal-footer-bg</code> — Footer background<br><code>--modal-footer-border-color</code> — Footer border color<br><br><strong>Dimensions</strong><br><code>--modal-width</code> — Default modal width<br><code>--modal-padding</code> — Body padding<br><code>--modal-margin</code> — Outer margin<br><code>--modal-border-width</code> — Outer border width<br><code>--modal-border-radius</code> — Outer border radius<br><code>--modal-inner-border-radius</code> — Inner border radius<br><code>--modal-header-padding-x</code> / <code>--modal-header-padding-y</code> — Header padding<br><code>--modal-header-padding</code> — Header padding shorthand<br><code>--modal-header-border-width</code> — Header border width<br><code>--modal-title-line-height</code> — Title line height<br><code>--modal-footer-gap</code> — Footer button gap<br><code>--modal-footer-border-width</code> — Footer border width<br><br><strong>Stacking</strong><br><code>--modal-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_TABS_LABEL="Nav Tabs"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_TABS_DESC="<strong>Colors</strong><br><code>--nav-tabs-border-color</code> — Tab bar border color<br><code>--nav-tabs-link-active-color</code> — Active tab text color<br><code>--nav-tabs-link-active-bg</code> — Active tab background<br><code>--nav-tabs-link-active-border-color</code> — Active tab border color<br><br><strong>Dimensions</strong><br><code>--nav-tabs-border-width</code> — Border width<br><code>--nav-tabs-border-radius</code> — Tab border radius"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_PILLS_LABEL="Nav Pills"
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_PILLS_DESC="<strong>Colors</strong><br><code>--nav-pills-link-active-color</code> — Active pill text color<br><code>--nav-pills-link-active-bg</code> — Active pill background<br><br><strong>Dimensions</strong><br><code>--nav-pills-border-radius</code> — Pill border radius"
TPL_MOKOCASSIOPEIA_CSS_VARS_PAGINATION_LABEL="Pagination"
TPL_MOKOCASSIOPEIA_CSS_VARS_PAGINATION_DESC="<strong>Colors</strong><br><code>--pagination-color</code> — Default link color<br><code>--pagination-bg</code> — Default background<br><code>--pagination-border-color</code> — Default border color<br><code>--pagination-focus-color</code> — Focused link color<br><code>--pagination-focus-bg</code> — Focused background<br><code>--pagination-focus-box-shadow</code> — Focus ring<br><code>--pagination-active-color</code> — Active page text color<br><code>--pagination-active-bg</code> — Active page background<br><code>--pagination-active-border-color</code> — Active page border color<br><code>--pagination-disabled-color</code> — Disabled link color<br><code>--pagination-disabled-bg</code> — Disabled background<br><code>--pagination-disabled-border-color</code> — Disabled border color<br><br><strong>Dimensions</strong><br><code>--pagination-padding-x</code> / <code>--pagination-padding-y</code> — Item padding<br><code>--pagination-border-width</code> — Border width<br><code>--pagination-border-radius</code> — Border radius<br><br><strong>Typography</strong><br><code>--pagination-font-size</code> — Font size"
TPL_MOKOCASSIOPEIA_CSS_VARS_POPOVER_LABEL="Popover"
TPL_MOKOCASSIOPEIA_CSS_VARS_POPOVER_DESC="<strong>Colors</strong><br><code>--popover-bg</code> — Popover background<br><code>--popover-border-color</code> — Border color<br><code>--popover-box-shadow</code> — Popover shadow<br><code>--popover-header-color</code> — Header text color<br><code>--popover-header-bg</code> — Header background<br><code>--popover-body-color</code> — Body text color<br><code>--popover-arrow-border</code> — Arrow border color<br><br><strong>Dimensions</strong><br><code>--popover-max-width</code> — Maximum width<br><code>--popover-border-width</code> — Border width<br><code>--popover-border-radius</code> — Outer border radius<br><code>--popover-inner-border-radius</code> — Inner border radius<br><code>--popover-header-padding-x</code> / <code>--popover-header-padding-y</code> — Header padding<br><code>--popover-body-padding-x</code> / <code>--popover-body-padding-y</code> — Body padding<br><code>--popover-arrow-width</code> / <code>--popover-arrow-height</code> — Arrow dimensions<br><br><strong>Typography</strong><br><code>--popover-font-size</code> — Font size<br><code>--popover-header-font-size</code> — Header font size<br><br><strong>Stacking</strong><br><code>--popover-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_PROGRESS_LABEL="Progress Bar"
TPL_MOKOCASSIOPEIA_CSS_VARS_PROGRESS_DESC="<strong>Colors</strong><br><code>--progress-bg</code> — Track background<br><code>--progress-bar-color</code> — Bar text color<br><code>--progress-bar-bg</code> — Bar fill color<br><code>--progress-box-shadow</code> — Track shadow<br><br><strong>Dimensions</strong><br><code>--progress-height</code> — Track height<br><code>--progress-border-radius</code> — Track border radius<br><br><strong>Typography</strong><br><code>--progress-font-size</code> — Label font size<br><br><strong>Animation</strong><br><code>--progress-bar-transition</code> — Bar width transition"
TPL_MOKOCASSIOPEIA_CSS_VARS_SPINNER_LABEL="Spinner"
TPL_MOKOCASSIOPEIA_CSS_VARS_SPINNER_DESC="<strong>Dimensions</strong><br><code>--spinner-width</code> — Spinner width<br><code>--spinner-height</code> — Spinner height<br><code>--spinner-vertical-align</code> — Inline vertical alignment<br><code>--spinner-border-width</code> — Border-style spinner track width<br><br><strong>Animation</strong><br><code>--spinner-animation-speed</code> — Rotation duration"
TPL_MOKOCASSIOPEIA_CSS_VARS_TABLE_LABEL="Table"
TPL_MOKOCASSIOPEIA_CSS_VARS_TABLE_DESC="<strong>Colors</strong><br><code>--table-color</code> — Default cell text color<br><code>--table-bg</code> — Default cell background<br><code>--table-border-color</code> — Border color<br><code>--table-accent-bg</code> — Accent row background (used by variants)<br><code>--table-striped-color</code> — Striped row text color<br><code>--table-striped-bg</code> — Striped row background<br><code>--table-active-color</code> — Hovered/active row text color<br><code>--table-active-bg</code> — Hovered/active row background"
TPL_MOKOCASSIOPEIA_CSS_VARS_TOAST_LABEL="Toast"
TPL_MOKOCASSIOPEIA_CSS_VARS_TOAST_DESC="<strong>Colors</strong><br><code>--toast-color</code> — Body text color<br><code>--toast-bg</code> — Body background<br><code>--toast-border-color</code> — Border color<br><code>--toast-box-shadow</code> — Toast shadow<br><code>--toast-header-color</code> — Header text color<br><code>--toast-header-bg</code> — Header background<br><code>--toast-header-border-color</code> — Header border color<br><br><strong>Dimensions</strong><br><code>--toast-max-width</code> — Maximum width<br><code>--toast-padding-x</code> / <code>--toast-padding-y</code> — Body padding<br><code>--toast-spacing</code> — Gap between stacked toasts<br><code>--toast-border-width</code> — Border width<br><code>--toast-border-radius</code> — Border radius<br><br><strong>Typography</strong><br><code>--toast-font-size</code> — Font size<br><br><strong>Stacking</strong><br><code>--toast-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_TOOLTIP_LABEL="Tooltip"
TPL_MOKOCASSIOPEIA_CSS_VARS_TOOLTIP_DESC="<strong>Colors</strong><br><code>--tooltip-color</code> — Text color<br><code>--tooltip-bg</code> — Background<br><code>--tooltip-opacity</code> — Overall opacity<br><br><strong>Dimensions</strong><br><code>--tooltip-max-width</code> — Maximum width<br><code>--tooltip-padding-x</code> / <code>--tooltip-padding-y</code> — Inner padding<br><code>--tooltip-margin</code> — Offset from target<br><code>--tooltip-border-radius</code> — Border radius<br><code>--tooltip-arrow-width</code> / <code>--tooltip-arrow-height</code> — Arrow dimensions<br><br><strong>Typography</strong><br><code>--tooltip-font-size</code> — Font size<br><br><strong>Stacking</strong><br><code>--tooltip-zindex</code> — z-index"
TPL_MOKOCASSIOPEIA_CSS_VARS_COMPONENTS_LABEL="Component &amp; Plugin Colors"
TPL_MOKOCASSIOPEIA_CSS_VARS_COMPONENTS_DESC="<strong>Misc components</strong><br><code>--mod-finder-link-hover</code> — Smart Search hover background<br><code>--form-legend-color</code> — Form legend text color<br><code>--border-gray</code> — General gray border<br><code>--subhead-color</code> — Subheading color<br><code>--item-list-color</code> — Item list background<br><code>--notification-badge-bg</code> — Notification badge<br><br><strong>Table of Contents (TOC)</strong><br><code>--toc-link-color</code> — TOC link color<br><code>--toc-link-active-color</code> — Active TOC link<br><br><strong>Choices.js select</strong><br><code>--choices-inner-bg</code> — Inner background<br><code>--choices-dropdown-bg</code> — Dropdown background<br><code>--choices-item-bg</code> — Tag item background<br><code>--choices-item-hover-bg</code> — Tag hover<br><code>--choices-disabled-bg</code> — Disabled state<br><code>--choices-focused-border</code> — Focused border<br><br><strong>Tab buttons (taba)</strong><br><code>--taba-btn-green</code>, <code>--taba-btn-blue</code>, <code>--taba-btn-red</code>, <code>--taba-btn-gray</code>"
TPL_MOKOCASSIOPEIA_CSS_VARS_OFFCANVAS_LABEL="Offcanvas Panel"
TPL_MOKOCASSIOPEIA_CSS_VARS_OFFCANVAS_DESC="<strong>Dimensions</strong><br><code>--offcanvas-width</code> — Panel width (default: <code>400px</code>)<br><code>--offcanvas-height</code> — Panel height for top/bottom variants (default: <code>30vh</code>)<br><code>--offcanvas-padding-x</code> / <code>--offcanvas-padding-y</code> — Inner padding<br><br><strong>Colors</strong><br><code>--offcanvas-bg</code> — Panel background (default: <code>var(--body-bg)</code>)<br><code>--offcanvas-color</code> — Panel text color (default: <code>var(--body-color)</code>)<br><code>--offcanvas-border-width</code> / <code>--offcanvas-border-color</code> — Panel border<br><code>--offcanvas-box-shadow</code> — Drop shadow<br><br><strong>Stacking</strong><br><code>--offcanvas-zindex</code> — z-index (default: <code>1045</code>)"
TPL_MOKOCASSIOPEIA_CSS_VARS_VM_LABEL="VirtueMart"
TPL_MOKOCASSIOPEIA_CSS_VARS_VM_DESC="<strong>Surfaces &amp; text</strong><br><code>--vm-surface</code> / <code>--vm-surface-2</code> — Card/panel backgrounds<br><code>--vm-text</code> / <code>--vm-text-strong</code> / <code>--vm-text-muted</code> — Text variants<br><code>--vm-border</code> — Border color<br><code>--vm-price-color</code> — Price text color<br><br><strong>Layout &amp; density</strong><br><code>--vm-container-max-width</code> — Max content width (default: <code>1200px</code>)<br><code>--vm-section-gap</code> — Section spacing (default: <code>2rem</code>)<br><code>--vm-block-radius</code> / <code>--vm-block-shadow</code> — Block appearance<br><br><strong>Typography</strong><br><code>--vm-category-title-size</code> — Category heading size<br><code>--vm-product-title-size</code> — Product title size<br><code>--vm-price-size</code> — Price size<br><br><strong>Buttons</strong><br><code>--vm-btn-primary-bg</code> / <code>--vm-btn-primary-text</code> — Primary button<br><code>--vm-btn-secondary-bg</code> / <code>--vm-btn-secondary-text</code> — Secondary button<br><br><strong>Image overlay controls</strong><br><code>--vm-image-overlay-btn-bg</code> / <code>--vm-image-overlay-btn-color</code> — Overlay button appearance"
TPL_MOKOCASSIOPEIA_CSS_VARS_GABLE_LABEL="Gable"
TPL_MOKOCASSIOPEIA_CSS_VARS_GABLE_DESC="Color tokens used by the Gable extension.<br><code>--gab-blue</code> — <code>#0066cc</code><br><code>--gab-green</code> — <code>#28a745</code><br><code>--gab-red</code> — <code>#dc3545</code><br><code>--gab-orange</code> — <code>#fd7e14</code><br><code>--gab-gray1</code> — <code>#495057</code><br><code>--gab-gray2</code> — <code>#6c757d</code><br><code>--gab-gray3</code> — <code>#adb5bd</code>"
; ===== Misc ===== ; ===== Misc =====
MOD_BREADCRUMBS_HERE="YOU ARE HERE:" MOD_BREADCRUMBS_HERE="YOU ARE HERE:"

5
src/language/en-US/tpl_mokocassiopeia.sys.ini
View File

@@ -8,7 +8,7 @@
; DEFGROUP: Joomla.Template.Site ; DEFGROUP: Joomla.Template.Site
; INGROUP: MokoCassiopeia ; INGROUP: MokoCassiopeia
; PATH: ./language/en-US/tpl_mokocassiopeia.sys.ini ; PATH: ./language/en-US/tpl_mokocassiopeia.sys.ini
; VERSION: 03.06.02 ; VERSION: 03.09.01
; BRIEF: English (US) system language strings for template metadata and installer ; BRIEF: English (US) system language strings for template metadata and installer
; ;
TPL_MOKOCASSIOPEIA="MokoCassiopeia Site template" TPL_MOKOCASSIOPEIA="MokoCassiopeia Site template"
@@ -18,6 +18,7 @@ TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_COLLAPSE_METISMENU="Collapsible Dropdown"
TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_DROPDOWN_METISMENU="Dropdown" TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_DROPDOWN_METISMENU="Dropdown"
TPL_MOKOCASSIOPEIA_POSITION_BANNER="Banner" TPL_MOKOCASSIOPEIA_POSITION_BANNER="Banner"
TPL_MOKOCASSIOPEIA_POSITION_BELOW_TOP="Below Top" TPL_MOKOCASSIOPEIA_POSITION_BELOW_TOP="Below Top"
TPL_MOKOCASSIOPEIA_POSITION_BRAND_ASIDE="Brand Aside"
TPL_MOKOCASSIOPEIA_POSITION_BOTTOM_A="Bottom-A" TPL_MOKOCASSIOPEIA_POSITION_BOTTOM_A="Bottom-A"
TPL_MOKOCASSIOPEIA_POSITION_BOTTOM_B="Bottom-B" TPL_MOKOCASSIOPEIA_POSITION_BOTTOM_B="Bottom-B"
TPL_MOKOCASSIOPEIA_POSITION_BREADCRUMBS="Breadcrumbs" TPL_MOKOCASSIOPEIA_POSITION_BREADCRUMBS="Breadcrumbs"
@@ -34,4 +35,4 @@ TPL_MOKOCASSIOPEIA_POSITION_TOP_B="Top-b"
TPL_MOKOCASSIOPEIA_POSITION_TOPBAR="Top Bar" TPL_MOKOCASSIOPEIA_POSITION_TOPBAR="Top Bar"
TPL_MOKOCASSIOPEIA_POSITION_DRAWER_LEFT="Drawer-Left" TPL_MOKOCASSIOPEIA_POSITION_DRAWER_LEFT="Drawer-Left"
TPL_MOKOCASSIOPEIA_POSITION_DRAWER_RIGHT="Drawer-Right" TPL_MOKOCASSIOPEIA_POSITION_DRAWER_RIGHT="Drawer-Right"
TPL_MOKOCASSIOPEIA_XML_DESCRIPTION="<h3>MokoCassiopeia Template Description</h3> <p> <strong>MokoCassiopeia 3.0</strong> continues Joomla’s tradition of space-themed default templates— building on the legacy of <em>Solarflare</em> (Joomla 1.0), <em>Milkyway</em> (Joomla 1.5), and <em>Protostar</em> (Joomla 3.0). </p> <p> This template is a customized fork of the <strong>Cassiopeia</strong> 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. </p> <h4>Custom Color Themes</h4> <p> To create a custom color scheme, copy the template file <code>templates/theme_custom_light.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code> or <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code>. Customize the CSS variables to match your brand, then activate it in <em>System → Site Templates → MokoCassiopeia → Theme tab</em> by selecting "Custom" for the Light or Dark Mode Palette. For comprehensive documentation on all available CSS variables, see <code>docs/CSS_VARIABLES.md</code>. </p> <h4>Code Attribution</h4> <p> This template is based on the original <strong>Cassiopeia</strong> template developed by the <a href=\"https://www.joomla.org\" target=\"_blank\" rel=\"noopener\">Joomla! Project</a> and released under the GNU General Public License. </p> <p> Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards. </p> <p> It includes integration with <a href=\"https://afeld.github.io/bootstrap-toc/\" target=\"_blank\" rel=\"noopener\">Bootstrap TOC</a>, an open-source table of contents generator by A. Feld, licensed under the MIT License. </p> <p> All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable. </p>" TPL_MOKOCASSIOPEIA_XML_DESCRIPTION="<h3>MokoCassiopeia Template Description</h3> <p> <strong>MokoCassiopeia</strong> continues Joomla’s tradition of space-themed default templates— building on the legacy of <em>Solarflare</em> (Joomla 1.0), <em>Milkyway</em> (Joomla 1.5), and <em>Protostar</em> (Joomla 3.0). </p> <p> This template is a customized fork of the <strong>Cassiopeia</strong> 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. </p> <h4>Custom Color Themes</h4> <p> Starter palette files are included with the template. To create a custom color scheme, copy <code>templates/mokocassiopeia/templates/light.custom.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code>, or <code>templates/mokocassiopeia/templates/dark.custom.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code>. Customize the CSS variables to match your brand, then activate your palette in <em>System → Site Templates → MokoCassiopeia → Theme tab</em> by selecting "Custom" for the Light or Dark Mode Palette. A full variable reference is available in the <em>CSS Variables</em> tab in template options. </p> <h4>Custom CSS &amp; JavaScript</h4> <p> For site-specific styles and scripts that should survive template updates, create the following files: </p> <ul> <li><code>media/templates/site/mokocassiopeia/css/user.css</code> — loaded on every page for custom CSS overrides.</li> <li><code>media/templates/site/mokocassiopeia/js/user.js</code> — loaded on every page for custom JavaScript.</li> </ul> <p> These files are gitignored and will not be overwritten by template updates. </p> <h4>Code Attribution</h4> <p> This template is based on the original <strong>Cassiopeia</strong> template developed by the <a href=\"https://www.joomla.org\" target=\"_blank\" rel=\"noopener\">Joomla! Project</a> and released under the GNU General Public License. </p> <p> Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards. </p> <p> It includes integration with <a href=\"https://afeld.github.io/bootstrap-toc/\" target=\"_blank\" rel=\"noopener\">Bootstrap TOC</a>, an open-source table of contents generator by A. Feld, licensed under the MIT License. </p> <p> All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable. </p>"

1
src/media/css/editor.min.css vendored Normal file
View File

@@ -0,0 +1 @@
@charset "UTF-8";body{font-size:1rem;font-weight:400;line-height:1.5;color:#22262a;background-color:#fff}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:700;line-height:1.2}h1{font-size:calc(1.375rem + 1.5vw)}h2{font-size:calc(1.325rem + .9vw)}h3{font-size:calc(1.3rem + .6vw)}h4{font-size:calc(1.275rem + .3vw)}h5{font-size:1.25rem}h6{font-size:1rem}a{text-decoration:none}a:link{color:#224faa}a:hover{color:#424077}p{margin-top:0;margin-bottom:1rem}hr#system-readmore{color:red;border:1px dashed red}span[lang]{padding:2px;border:1px dashed #bbb}span[lang]:after{font-size:smaller;color:red;vertical-align:super;content:attr(lang)}

313
src/media/css/template.css
View File

@@ -22,10 +22,24 @@
box-sizing: border-box; box-sizing: border-box;
} }
/* Smooth scroll and colour transitions; gated so reduced-motion users are unaffected. */
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
:root { :root {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
:root,
body,
.container-wrapper,
.container-main,
nav,
header,
footer {
transition:
background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease;
}
} }
@media print { @media print {
@@ -118,11 +132,6 @@ form {
padding-right: .5rem !important; padding-right: .5rem !important;
} }
.offcanvas-body {
background-color: var(--offcanvas-color);
}
hr { hr {
margin: 1rem 0; margin: 1rem 0;
color: inherit; color: inherit;
@@ -2331,16 +2340,7 @@ progress {
} }
.table { .table {
--table-color: var(--body-color); /* Values defined in light.standard.css / dark.standard.css */
--table-bg: transparent;
--table-border-color: var(--border-color);
--table-accent-bg: transparent;
--table-striped-color: var(--body-color);
--table-striped-bg: rgba(var(--black-rgb), var(--opacity-5));
--table-active-color: var(--body-color);
--table-active-bg: rgba(var(--black-rgb), var(--opacity-10));
--table-active-color: var(--body-color);
--table-active-bg: rgba(var(--black-rgb), 0.075);
width: 100%; width: 100%;
margin-bottom: 1rem; margin-bottom: 1rem;
color: var(--table-color); color: var(--table-color);
@@ -3868,32 +3868,7 @@ fieldset:disabled .btn {
} }
.dropdown-menu { .dropdown-menu {
--dropdown-zindex: 1000; /* Values defined in light.standard.css / dark.standard.css */
--dropdown-min-width: 10rem;
--dropdown-padding-x: 0;
--dropdown-padding-y: 0.5rem;
--dropdown-spacer: 0.125rem;
--dropdown-font-size: 1rem;
--dropdown-color: hsl(210, 11%, 15%);
--dropdown-bg: var(--body-color);
--dropdown-border-color: var(--border-color-translucent);
--dropdown-border-radius: 0.25rem;
--dropdown-border-width: 1px;
--dropdown-inner-border-radius: calc(0.25rem - 1px);
--dropdown-divider-bg: var(--border-color-translucent);
--dropdown-divider-margin-y: 0.5rem;
--dropdown-box-shadow: 0 0.5rem 1rem var(--shadow-color-light);
--dropdown-link-color: hsl(210, 11%, 15%);
--dropdown-link-active-color: #1f2226;
--dropdown-link-active-bg: hsl(210, 16%, 93%);
--dropdown-link-active-color: var(--body-color);
--dropdown-link-active-bg: hsl(240, 98%, 17%);
--dropdown-link-disabled-color: hsl(210, 11%, 71%);
--dropdown-item-padding-x: 1rem;
--dropdown-item-padding-y: 0.25rem;
--dropdown-header-color: hsl(210, 7%, 46%);
--dropdown-header-padding-x: 1rem;
--dropdown-header-padding-y: 0.5rem;
position: absolute; position: absolute;
z-index: var(--dropdown-zindex); z-index: var(--dropdown-zindex);
display: none; display: none;
@@ -4329,12 +4304,7 @@ fieldset:disabled .btn {
} }
.nav { .nav {
--nav-link-padding-x: 1rem; /* Values defined in light.standard.css / dark.standard.css */
--nav-link-padding-y: 0.5rem;
--nav-link-font-weight: ;
--nav-link-color: var(--link-color);
--nav-link-active-color: var(--link-active-color);
--nav-link-disabled-color: hsl(210, 7%, 46%);
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@@ -4377,13 +4347,7 @@ fieldset:disabled .btn {
} }
.nav-tabs { .nav-tabs {
--nav-tabs-border-width: 1px; /* Values defined in light.standard.css / dark.standard.css */
--nav-tabs-border-color: hsl(210, 14%, 89%);
--nav-tabs-border-radius: 0.25rem;
--nav-tabs-link-active-border-color: hsl(210, 16%, 93%) hsl(210, 16%, 93%) hsl(210, 14%, 89%);
--nav-tabs-link-active-color: hsl(210, 9%, 31%);
--nav-tabs-link-active-bg: var(--body-color);
--nav-tabs-link-active-border-color: hsl(210, 14%, 89%) hsl(210, 14%, 89%) var(--body-color);
border-bottom: var(--nav-tabs-border-width) solid var(--nav-tabs-border-color); border-bottom: var(--nav-tabs-border-width) solid var(--nav-tabs-border-color);
} }
@@ -4422,9 +4386,7 @@ fieldset:disabled .btn {
} }
.nav-pills { .nav-pills {
--nav-pills-border-radius: 0.25rem; /* Values defined in light.standard.css / dark.standard.css */
--nav-pills-link-active-color: var(--body-color);
--nav-pills-link-active-bg: hsl(240, 98%, 17%);
} }
.nav-pills .nav-link { .nav-pills .nav-link {
@@ -5262,28 +5224,7 @@ fieldset:disabled .btn {
} }
.accordion { .accordion {
--accordion-color: hsl(210, 11%, 15%); /* Values defined in light.standard.css / dark.standard.css */
--accordion-bg: var(--body-color);
--accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
--accordion-border-color: var(--border-color);
--accordion-border-width: 1px;
--accordion-border-radius: 0.25rem;
--accordion-inner-border-radius: calc(0.25rem - 1px);
--accordion-btn-padding-x: 1.25rem;
--accordion-btn-padding-y: 1rem;
--accordion-btn-color: hsl(210, 11%, 15%);
--accordion-btn-bg: var(--accordion-bg);
--accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='hsl%28210, 11%, 15%%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
--accordion-btn-icon-width: 1.25rem;
--accordion-btn-icon-transform: rotate(-180deg);
--accordion-btn-icon-transition: transform 0.2s ease-in-out;
--accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f244d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
--accordion-btn-focus-border-color: var(--input-focus-border-color);
--accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
--accordion-body-padding-x: 1.25rem;
--accordion-body-padding-y: 1rem;
--accordion-active-color: #0f244d;
--accordion-active-bg: #e7eaee;
} }
.accordion-button { .accordion-button {
@@ -5431,14 +5372,7 @@ fieldset:disabled .btn {
} }
.breadcrumb { .breadcrumb {
--breadcrumb-padding-x: 0; /* Values defined in light.standard.css / dark.standard.css */
--breadcrumb-padding-y: 0;
--breadcrumb-margin-bottom: 1rem;
--breadcrumb-bg: ;
--breadcrumb-border-radius: ;
--breadcrumb-divider-color: hsl(210, 7%, 46%);
--breadcrumb-item-padding-x: 0.5rem;
--breadcrumb-item-active-color: var(--link-color);
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@@ -5470,26 +5404,7 @@ fieldset:disabled .btn {
} }
.pagination { .pagination {
--pagination-padding-x: 0.75rem; /* Values defined in light.standard.css / dark.standard.css */
--pagination-padding-y: 0.375rem;
--pagination-font-size: 1rem;
--pagination-color: var(--link-color);
--pagination-bg: var(--body-color);
--pagination-border-width: 1px;
--pagination-border-color: hsl(210, 14%, 89%);
--pagination-border-radius: 0.25rem;
--pagination-active-color: var(--link-active-color);
--pagination-active-bg: hsl(210, 16%, 93%);
--pagination-active-border-color: hsl(210, 14%, 89%);
--pagination-focus-color: var(--link-active-color);
--pagination-focus-bg: hsl(210, 16%, 93%);
--pagination-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
--pagination-active-color: var(--body-color);
--pagination-active-bg: hsl(240, 98%, 17%);
--pagination-active-border-color: hsl(240, 98%, 17%);
--pagination-disabled-color: hsl(210, 7%, 46%);
--pagination-disabled-bg: var(--body-color);
--pagination-disabled-border-color: hsl(210, 14%, 89%);
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@@ -5582,12 +5497,7 @@ fieldset:disabled .btn {
} }
.badge { .badge {
--badge-padding-x: 0.65em; /* Values defined in light.standard.css / dark.standard.css */
--badge-padding-y: 0.35em;
--badge-font-size: 0.75em;
--badge-font-weight: 700;
--badge-color: var(--body-color);
--badge-border-radius: 0.25rem;
display: inline-block; display: inline-block;
padding: var(--badge-padding-y) var(--badge-padding-x); padding: var(--badge-padding-y) var(--badge-padding-x);
font-size: var(--badge-font-size); font-size: var(--badge-font-size);
@@ -5610,14 +5520,7 @@ fieldset:disabled .btn {
} }
.alert { .alert {
--alert-bg: transparent; /* Values defined in light.standard.css / dark.standard.css */
--alert-padding-x: 1rem;
--alert-padding-y: 1rem;
--alert-margin-bottom: 1rem;
--alert-color: inherit;
--alert-border-color: transparent;
--alert-border: 1px solid var(--alert-border-color);
--alert-border-radius: 0.25rem;
position: relative; position: relative;
padding: var(--alert-padding-y) var(--alert-padding-x); padding: var(--alert-padding-y) var(--alert-padding-x);
margin-bottom: var(--alert-margin-bottom); margin-bottom: var(--alert-margin-bottom);
@@ -5740,14 +5643,7 @@ fieldset:disabled .btn {
} }
.progress { .progress {
--progress-height: 1rem; /* Values defined in light.standard.css / dark.standard.css */
--progress-font-size: 0.75rem;
--progress-bg: hsl(210, 16%, 93%);
--progress-border-radius: 0.25rem;
--progress-box-shadow: inset 0 1px 2px rgba(var(--black-rgb), 0.075);
--progress-bar-color: var(--body-color);
--progress-bar-bg: hsl(240, 98%, 17%);
--progress-bar-transition: width 0.6s ease;
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@@ -5806,23 +5702,7 @@ fieldset:disabled .btn {
} }
.list-group { .list-group {
--list-group-color: hsl(210, 11%, 15%); /* Values defined in light.standard.css / dark.standard.css */
--list-group-bg: var(--body-color);
--list-group-border-color: rgba(var(--black-rgb), 0.125);
--list-group-border-width: 1px;
--list-group-border-radius: 0.25rem;
--list-group-item-padding-x: 1rem;
--list-group-item-padding-y: 0.5rem;
--list-group-action-color: hsl(210, 9%, 31%);
--list-group-action-active-color: hsl(210, 9%, 31%);
--list-group-action-active-bg: hsl(210, 17%, 98%);
--list-group-action-active-color: hsl(210, 11%, 15%);
--list-group-action-active-bg: hsl(210, 16%, 93%);
--list-group-disabled-color: hsl(210, 7%, 46%);
--list-group-disabled-bg: var(--body-color);
--list-group-active-color: var(--body-color);
--list-group-active-bg: hsl(240, 98%, 17%);
--list-group-active-border-color: hsl(240, 98%, 17%);
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@@ -6293,21 +6173,7 @@ fieldset:disabled .btn {
} }
.toast { .toast {
--toast-zindex: 1090; /* Values defined in light.standard.css / dark.standard.css */
--toast-padding-x: 0.75rem;
--toast-padding-y: 0.5rem;
--toast-spacing: 1em;
--toast-max-width: 350px;
--toast-font-size: 0.875rem;
--toast-color: ;
--toast-bg: rgba(255, 255, 255, 0.85);
--toast-border-width: 1px;
--toast-border-color: var(--border-color-translucent);
--toast-border-radius: 0.25rem;
--toast-box-shadow: 0 0.5rem 1rem var(--shadow-color-light);
--toast-header-color: hsl(210, 7%, 46%);
--toast-header-bg: rgba(var(--white-rgb), 0.85);
--toast-header-border-color: rgba(var(--black-rgb), var(--opacity-5));
width: var(--toast-max-width); width: var(--toast-max-width);
max-width: 100%; max-width: 100%;
font-size: var(--toast-font-size); font-size: var(--toast-font-size);
@@ -6371,27 +6237,7 @@ fieldset:disabled .btn {
} }
.modal { .modal {
--modal-zindex: 1050; /* Values defined in light.standard.css / dark.standard.css */
--modal-width: 500px;
--modal-padding: 1rem;
--modal-margin: 0.5rem;
--modal-color: ;
--modal-bg: var(--body-color);
--modal-border-color: var(--border-color-translucent);
--modal-border-width: 1px;
--modal-border-radius: 0.3rem;
--modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--modal-inner-border-radius: calc(0.3rem - 1px);
--modal-header-padding-x: 1rem;
--modal-header-padding-y: 1rem;
--modal-header-padding: 1rem 1rem;
--modal-header-border-color: var(--border-color);
--modal-header-border-width: 1px;
--modal-title-line-height: 1.5;
--modal-footer-gap: 0.5rem;
--modal-footer-bg: ;
--modal-footer-border-color: var(--border-color);
--modal-footer-border-width: 1px;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@@ -6482,9 +6328,7 @@ fieldset:disabled .btn {
} }
.modal-backdrop { .modal-backdrop {
--backdrop-zindex: 1040; /* Values defined in light.standard.css / dark.standard.css */
--backdrop-bg: hsl(0, 0%, 0%);
--backdrop-opacity: 0.5;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@@ -6737,18 +6581,7 @@ fieldset:disabled .btn {
} }
.tooltip { .tooltip {
--tooltip-zindex: 1070; /* Values defined in light.standard.css / dark.standard.css */
--tooltip-max-width: 200px;
--tooltip-padding-x: 0.5rem;
--tooltip-padding-y: 0.25rem;
--tooltip-margin: ;
--tooltip-font-size: 0.875rem;
--tooltip-color: var(--body-color);
--tooltip-bg: hsl(0, 0%, 0%);
--tooltip-border-radius: 0.25rem;
--tooltip-opacity: 0.9;
--tooltip-arrow-width: 0.8rem;
--tooltip-arrow-height: 0.4rem;
z-index: var(--tooltip-zindex); z-index: var(--tooltip-zindex);
display: block; display: block;
padding: var(--tooltip-arrow-height); padding: var(--tooltip-arrow-height);
@@ -6855,26 +6688,7 @@ fieldset:disabled .btn {
} }
.popover { .popover {
--popover-zindex: 1060; /* Values defined in light.standard.css / dark.standard.css */
--popover-max-width: 276px;
--popover-font-size: 0.875rem;
--popover-bg: var(--body-color);
--popover-border-width: 1px;
--popover-border-color: var(--border-color-translucent);
--popover-border-radius: 0.3rem;
--popover-inner-border-radius: calc(0.3rem - 1px);
--popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--popover-header-padding-x: 1rem;
--popover-header-padding-y: 0.5rem;
--popover-header-font-size: 1rem;
--popover-header-color: ;
--popover-header-bg: #f0f0f0;
--popover-body-padding-x: 1rem;
--popover-body-padding-y: 1rem;
--popover-body-color: hsl(210, 11%, 15%);
--popover-arrow-width: 1rem;
--popover-arrow-height: 0.5rem;
--popover-arrow-border: var(--popover-border-color);
z-index: var(--popover-zindex); z-index: var(--popover-zindex);
display: block; display: block;
max-width: var(--popover-max-width); max-width: var(--popover-max-width);
@@ -7344,11 +7158,7 @@ fieldset:disabled .btn {
} }
.spinner-border { .spinner-border {
--spinner-width: 2rem; /* Values defined in light.standard.css / dark.standard.css */
--spinner-height: 2rem;
--spinner-vertical-align: -0.125em;
--spinner-border-width: 0.25em;
--spinner-animation-speed: 0.75s;
--spinner-animation-name: spinner-border; --spinner-animation-name: spinner-border;
border: var(--spinner-border-width) solid currentcolor; border: var(--spinner-border-width) solid currentcolor;
border-right-color: transparent; border-right-color: transparent;
@@ -7387,10 +7197,7 @@ fieldset:disabled .btn {
} }
.spinner-grow { .spinner-grow {
--spinner-width: 2rem; /* Values defined in light.standard.css / dark.standard.css */
--spinner-height: 2rem;
--spinner-vertical-align: -0.125em;
--spinner-animation-speed: 0.75s;
--spinner-animation-name: spinner-grow; --spinner-animation-name: spinner-grow;
background-color: currentcolor; background-color: currentcolor;
opacity: 0; opacity: 0;
@@ -7415,16 +7222,7 @@ fieldset:disabled .btn {
.offcanvas-lg, .offcanvas-lg,
.offcanvas-md, .offcanvas-md,
.offcanvas-sm { .offcanvas-sm {
--offcanvas-zindex: 1045; /* Values defined in light.standard.css / dark.standard.css under :root */
--offcanvas-width: 400px;
--offcanvas-height: 30vh;
--offcanvas-padding-x: 1rem;
--offcanvas-padding-y: 1rem;
--offcanvas-color: ;
--offcanvas-bg: var(--body-color);
--offcanvas-border-width: 1px;
--offcanvas-border-color: var(--border-color-translucent);
--offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
} }
@media (max-width: 575.98px) { @media (max-width: 575.98px) {
@@ -14085,14 +13883,16 @@ meter {
} }
.container-banner .banner-overlay { .container-banner .banner-overlay {
height: 70vh; height: var(--hero-height, 70vh);
color: var(--body-color); color: var(--hero-color, var(--body-color));
background-repeat: no-repeat; background-repeat: var(--hero-bg-repeat, no-repeat);
background-attachment: fixed; background-attachment: var(--hero-bg-attachment, fixed);
background-position: top, center; background-position: var(--hero-bg-position, top center);
background-size: cover; background-size: var(--hero-bg-size, cover);
border-bottom: var(--hero-border-bottom, solid var(--accent-color-secondary));
} }
/* Legacy: standard Cassiopeia banner with an explicit .overlay child */
.container-banner .banner-overlay .overlay { .container-banner .banner-overlay .overlay {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
@@ -14108,9 +13908,15 @@ meter {
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
padding: 1em; padding: var(--hero-overlay-padding, 1em);
text-align: center; text-align: var(--hero-overlay-text-align, center);
background-color: hsla(0, 0%, 0%, 0.5); color: var(--hero-overlay-text-color, var(--body-color));
background-color: var(--hero-overlay-bg, hsla(0, 0%, 0%, 0.5));
}
/* Hero layout (hero.php): outer wrapper — visual overlay is handled by the .overlay child */
.container-banner .banner-overlay.custom-hero {
/* Selector kept as a customisation hook; see .banner-overlay .overlay for overlay styles */
} }
.container-banner .banner-overlay .overlay .text-thin { .container-banner .banner-overlay .overlay .text-thin {
@@ -14376,6 +14182,19 @@ fieldset>* {
white-space: normal; white-space: normal;
} }
/* Header aside: module position to the right of the logo */
.header-brand-wrap {
display: flex;
align-items: center;
width: 100%;
}
.container-brand-aside {
margin-inline-start: auto;
display: flex;
align-items: center;
}
.container-header .navbar-brand { .container-header .navbar-brand {
position: relative; position: relative;
display: inline-block; display: inline-block;
@@ -14767,8 +14586,6 @@ iframe {
); );
} }
.container-topbar { .container-topbar {
color: var(--body-color); color: var(--body-color);
background-color: var(--color-primary); background-color: var(--color-primary);
@@ -14781,7 +14598,7 @@ iframe {
.container-banner { .container-banner {
display: block; display: block;
margin: 0 0 2rem; margin: 0;
} }
.container-top-a, .container-top-a,

1
src/media/css/template.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

260
src/media/css/theme/dark.standard.css
View File

@@ -520,6 +520,266 @@ color-scheme: dark;
--gab-gray1: #868e96; --gab-gray1: #868e96;
--gab-gray2: #adb5bd; --gab-gray2: #adb5bd;
--gab-gray3: #ced4da; --gab-gray3: #ced4da;
/* ===== HERO / BANNER OVERLAY ===== */
--hero-height: 70vh;
--hero-color: var(--body-color);
--hero-bg-repeat: no-repeat;
--hero-bg-attachment: fixed;
--hero-bg-position: top center;
--hero-bg-size: cover;
--hero-border-bottom: solid var(--accent-color-secondary);
--hero-overlay-bg: hsla(0, 0%, 0%, 0.3);
--hero-overlay-padding: 1em;
--hero-overlay-text-align: center;
--hero-overlay-text-color: var(--body-color);
/* ===== OFFCANVAS ===== */
--offcanvas-zindex: 1045;
--offcanvas-width: 400px;
--offcanvas-height: 30vh;
--offcanvas-padding-x: 1rem;
--offcanvas-padding-y: 1rem;
--offcanvas-color: var(--body-color);
--offcanvas-bg: var(--body-bg);
--offcanvas-border-width: 1px;
--offcanvas-border-color: var(--border-color-translucent);
--offcanvas-box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
/* ===== ACCORDION ===== */
--accordion-color: var(--body-color);
--accordion-bg: var(--body-bg);
--accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
--accordion-border-color: var(--border-color);
--accordion-border-width: 1px;
--accordion-border-radius: 0.25rem;
--accordion-inner-border-radius: calc(0.25rem - 1px);
--accordion-btn-padding-x: 1.25rem;
--accordion-btn-padding-y: 1rem;
--accordion-btn-color: var(--body-color);
--accordion-btn-bg: var(--accordion-bg);
--accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e6ebf1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
--accordion-btn-icon-width: 1.25rem;
--accordion-btn-icon-transform: rotate(-180deg);
--accordion-btn-icon-transition: transform 0.2s ease-in-out;
--accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ab4f8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
--accordion-btn-focus-border-color: var(--input-focus-border-color);
--accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25);
--accordion-body-padding-x: 1.25rem;
--accordion-body-padding-y: 1rem;
--accordion-active-color: var(--link-color);
--accordion-active-bg: var(--secondary-bg);
/* ===== BREADCRUMB ===== */
--breadcrumb-padding-x: 0;
--breadcrumb-padding-y: 0;
--breadcrumb-margin-bottom: 1rem;
--breadcrumb-bg: ;
--breadcrumb-border-radius: ;
--breadcrumb-divider-color: var(--gray-600);
--breadcrumb-item-padding-x: 0.5rem;
--breadcrumb-item-active-color: var(--link-color);
/* ===== PAGINATION ===== */
--pagination-padding-x: 0.75rem;
--pagination-padding-y: 0.375rem;
--pagination-font-size: 1rem;
--pagination-color: var(--link-color);
--pagination-bg: var(--secondary-bg);
--pagination-border-width: 1px;
--pagination-border-color: var(--border-color);
--pagination-border-radius: 0.25rem;
--pagination-focus-color: var(--link-active-color);
--pagination-focus-bg: var(--tertiary-bg);
--pagination-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25);
--pagination-active-color: var(--body-color);
--pagination-active-bg: hsl(240, 98%, 17%);
--pagination-active-border-color: hsl(240, 98%, 17%);
--pagination-disabled-color: var(--gray-600);
--pagination-disabled-bg: var(--secondary-bg);
--pagination-disabled-border-color: var(--border-color);
/* ===== BADGE ===== */
--badge-padding-x: 0.65em;
--badge-padding-y: 0.35em;
--badge-font-size: 0.75em;
--badge-font-weight: 700;
--badge-color: var(--body-color);
--badge-border-radius: 0.25rem;
/* ===== ALERT ===== */
--alert-bg: transparent;
--alert-padding-x: 1rem;
--alert-padding-y: 1rem;
--alert-margin-bottom: 1rem;
--alert-color: inherit;
--alert-border-color: transparent;
--alert-border: 1px solid var(--alert-border-color);
--alert-border-radius: 0.25rem;
/* ===== PROGRESS ===== */
--progress-height: 1rem;
--progress-font-size: 0.75rem;
--progress-bg: var(--secondary-bg);
--progress-border-radius: 0.25rem;
--progress-box-shadow: inset 0 1px 2px rgba(var(--black-rgb), 0.3);
--progress-bar-color: var(--body-color);
--progress-bar-bg: hsl(240, 98%, 40%);
--progress-bar-transition: width 0.6s ease;
/* ===== LIST GROUP ===== */
--list-group-color: var(--body-color);
--list-group-bg: var(--secondary-bg);
--list-group-border-color: rgba(var(--white-rgb), 0.125);
--list-group-border-width: 1px;
--list-group-border-radius: 0.25rem;
--list-group-item-padding-x: 1rem;
--list-group-item-padding-y: 0.5rem;
--list-group-action-color: var(--gray-800);
--list-group-action-active-color: var(--body-color);
--list-group-action-active-bg: var(--tertiary-bg);
--list-group-disabled-color: var(--gray-600);
--list-group-disabled-bg: var(--secondary-bg);
--list-group-active-color: var(--body-color);
--list-group-active-bg: hsl(240, 98%, 17%);
--list-group-active-border-color: hsl(240, 98%, 17%);
/* ===== DROPDOWN ===== */
--dropdown-zindex: 1000;
--dropdown-min-width: 10rem;
--dropdown-padding-x: 0;
--dropdown-padding-y: 0.5rem;
--dropdown-spacer: 0.125rem;
--dropdown-font-size: 1rem;
--dropdown-color: var(--body-color);
--dropdown-bg: var(--secondary-bg);
--dropdown-border-color: var(--border-color-translucent);
--dropdown-border-radius: 0.25rem;
--dropdown-border-width: 1px;
--dropdown-inner-border-radius: calc(0.25rem - 1px);
--dropdown-divider-bg: var(--border-color-translucent);
--dropdown-divider-margin-y: 0.5rem;
--dropdown-box-shadow: 0 0.5rem 1rem var(--shadow-color-medium);
--dropdown-link-color: var(--body-color);
--dropdown-link-active-color: var(--body-color);
--dropdown-link-active-bg: hsl(240, 98%, 17%);
--dropdown-link-disabled-color: var(--gray-600);
--dropdown-item-padding-x: 1rem;
--dropdown-item-padding-y: 0.25rem;
--dropdown-header-color: var(--gray-600);
--dropdown-header-padding-x: 1rem;
--dropdown-header-padding-y: 0.5rem;
/* ===== TOAST ===== */
--toast-zindex: 1090;
--toast-padding-x: 0.75rem;
--toast-padding-y: 0.5rem;
--toast-spacing: 1em;
--toast-max-width: 350px;
--toast-font-size: 0.875rem;
--toast-color: ;
--toast-bg: rgba(21, 27, 34, 0.9);
--toast-border-width: 1px;
--toast-border-color: var(--border-color-translucent);
--toast-border-radius: 0.25rem;
--toast-box-shadow: 0 0.5rem 1rem var(--shadow-color-medium);
--toast-header-color: var(--gray-600);
--toast-header-bg: rgba(21, 27, 34, 0.85);
--toast-header-border-color: rgba(var(--white-rgb), var(--opacity-10));
/* ===== MODAL ===== */
--modal-zindex: 1050;
--modal-width: 500px;
--modal-padding: 1rem;
--modal-margin: 0.5rem;
--modal-color: ;
--modal-bg: var(--secondary-bg);
--modal-border-color: var(--border-color-translucent);
--modal-border-width: 1px;
--modal-border-radius: 0.3rem;
--modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
--modal-inner-border-radius: calc(0.3rem - 1px);
--modal-header-padding-x: 1rem;
--modal-header-padding-y: 1rem;
--modal-header-padding: 1rem 1rem;
--modal-header-border-color: var(--border-color);
--modal-header-border-width: 1px;
--modal-title-line-height: 1.5;
--modal-footer-gap: 0.5rem;
--modal-footer-bg: ;
--modal-footer-border-color: var(--border-color);
--modal-footer-border-width: 1px;
/* ===== TOOLTIP ===== */
--tooltip-zindex: 1070;
--tooltip-max-width: 200px;
--tooltip-padding-x: 0.5rem;
--tooltip-padding-y: 0.25rem;
--tooltip-margin: ;
--tooltip-font-size: 0.875rem;
--tooltip-color: var(--body-color);
--tooltip-bg: hsl(0, 0%, 0%);
--tooltip-border-radius: 0.25rem;
--tooltip-opacity: 0.9;
--tooltip-arrow-width: 0.8rem;
--tooltip-arrow-height: 0.4rem;
/* ===== POPOVER ===== */
--popover-zindex: 1060;
--popover-max-width: 276px;
--popover-font-size: 0.875rem;
--popover-bg: var(--secondary-bg);
--popover-border-width: 1px;
--popover-border-color: var(--border-color-translucent);
--popover-border-radius: 0.3rem;
--popover-inner-border-radius: calc(0.3rem - 1px);
--popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
--popover-header-padding-x: 1rem;
--popover-header-padding-y: 0.5rem;
--popover-header-font-size: 1rem;
--popover-header-color: ;
--popover-header-bg: var(--tertiary-bg);
--popover-body-padding-x: 1rem;
--popover-body-padding-y: 1rem;
--popover-body-color: var(--body-color);
--popover-arrow-width: 1rem;
--popover-arrow-height: 0.5rem;
--popover-arrow-border: var(--popover-border-color);
/* ===== SPINNER ===== */
--spinner-width: 2rem;
--spinner-height: 2rem;
--spinner-vertical-align: -0.125em;
--spinner-border-width: 0.25em;
--spinner-animation-speed: 0.75s;
/* ===== NAV TABS ===== */
--nav-tabs-border-width: 1px;
--nav-tabs-border-color: var(--border-color);
--nav-tabs-border-radius: 0.25rem;
--nav-tabs-link-active-color: var(--body-color);
--nav-tabs-link-active-bg: var(--secondary-bg);
--nav-tabs-link-active-border-color: var(--border-color) var(--border-color) var(--secondary-bg);
/* ===== NAV PILLS ===== */
--nav-pills-border-radius: 0.25rem;
--nav-pills-link-active-color: var(--body-color);
--nav-pills-link-active-bg: hsl(240, 98%, 17%);
/* ===== TABLE ===== */
--table-color: var(--body-color);
--table-bg: transparent;
--table-border-color: var(--border-color);
--table-accent-bg: transparent;
--table-striped-color: var(--body-color);
--table-striped-bg: rgba(var(--white-rgb), var(--opacity-5));
--table-active-color: var(--body-color);
--table-active-bg: rgba(var(--white-rgb), 0.1);
/* ===== BACKDROP ===== */
--backdrop-zindex: 1040;
--backdrop-bg: hsl(0, 0%, 0%);
--backdrop-opacity: 0.5;
} }
.btn { .btn {

1
src/media/css/theme/dark.standard.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

260
src/media/css/theme/light.standard.css
View File

@@ -519,6 +519,266 @@ color-scheme: light;
--gab-gray1: #495057; --gab-gray1: #495057;
--gab-gray2: #6c757d; --gab-gray2: #6c757d;
--gab-gray3: #adb5bd; --gab-gray3: #adb5bd;
/* ===== HERO / BANNER OVERLAY ===== */
--hero-height: 70vh;
--hero-color: var(--body-color);
--hero-bg-repeat: no-repeat;
--hero-bg-attachment: fixed;
--hero-bg-position: top center;
--hero-bg-size: cover;
--hero-border-bottom: solid var(--accent-color-secondary);
--hero-overlay-bg: hsla(0, 0%, 0%, 0.1);
--hero-overlay-padding: 1em;
--hero-overlay-text-align: center;
--hero-overlay-text-color: var(--body-color);
/* ===== OFFCANVAS ===== */
--offcanvas-zindex: 1045;
--offcanvas-width: 400px;
--offcanvas-height: 30vh;
--offcanvas-padding-x: 1rem;
--offcanvas-padding-y: 1rem;
--offcanvas-color: var(--body-color);
--offcanvas-bg: var(--body-bg);
--offcanvas-border-width: 1px;
--offcanvas-border-color: var(--border-color-translucent);
--offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
/* ===== ACCORDION ===== */
--accordion-color: hsl(210, 11%, 15%);
--accordion-bg: var(--body-bg);
--accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
--accordion-border-color: var(--border-color);
--accordion-border-width: 1px;
--accordion-border-radius: 0.25rem;
--accordion-inner-border-radius: calc(0.25rem - 1px);
--accordion-btn-padding-x: 1.25rem;
--accordion-btn-padding-y: 1rem;
--accordion-btn-color: hsl(210, 11%, 15%);
--accordion-btn-bg: var(--accordion-bg);
--accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='hsl%28210, 11%25, 15%25%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
--accordion-btn-icon-width: 1.25rem;
--accordion-btn-icon-transform: rotate(-180deg);
--accordion-btn-icon-transition: transform 0.2s ease-in-out;
--accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f244d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
--accordion-btn-focus-border-color: var(--input-focus-border-color);
--accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
--accordion-body-padding-x: 1.25rem;
--accordion-body-padding-y: 1rem;
--accordion-active-color: #0f244d;
--accordion-active-bg: #e7eaee;
/* ===== BREADCRUMB ===== */
--breadcrumb-padding-x: 0;
--breadcrumb-padding-y: 0;
--breadcrumb-margin-bottom: 1rem;
--breadcrumb-bg: ;
--breadcrumb-border-radius: ;
--breadcrumb-divider-color: hsl(210, 7%, 46%);
--breadcrumb-item-padding-x: 0.5rem;
--breadcrumb-item-active-color: var(--link-color);
/* ===== PAGINATION ===== */
--pagination-padding-x: 0.75rem;
--pagination-padding-y: 0.375rem;
--pagination-font-size: 1rem;
--pagination-color: var(--link-color);
--pagination-bg: var(--body-bg);
--pagination-border-width: 1px;
--pagination-border-color: hsl(210, 14%, 89%);
--pagination-border-radius: 0.25rem;
--pagination-focus-color: var(--link-active-color);
--pagination-focus-bg: hsl(210, 16%, 93%);
--pagination-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
--pagination-active-color: var(--body-bg);
--pagination-active-bg: hsl(240, 98%, 17%);
--pagination-active-border-color: hsl(240, 98%, 17%);
--pagination-disabled-color: hsl(210, 7%, 46%);
--pagination-disabled-bg: var(--body-bg);
--pagination-disabled-border-color: hsl(210, 14%, 89%);
/* ===== BADGE ===== */
--badge-padding-x: 0.65em;
--badge-padding-y: 0.35em;
--badge-font-size: 0.75em;
--badge-font-weight: 700;
--badge-color: var(--body-bg);
--badge-border-radius: 0.25rem;
/* ===== ALERT ===== */
--alert-bg: transparent;
--alert-padding-x: 1rem;
--alert-padding-y: 1rem;
--alert-margin-bottom: 1rem;
--alert-color: inherit;
--alert-border-color: transparent;
--alert-border: 1px solid var(--alert-border-color);
--alert-border-radius: 0.25rem;
/* ===== PROGRESS ===== */
--progress-height: 1rem;
--progress-font-size: 0.75rem;
--progress-bg: hsl(210, 16%, 93%);
--progress-border-radius: 0.25rem;
--progress-box-shadow: inset 0 1px 2px rgba(var(--black-rgb), 0.075);
--progress-bar-color: var(--body-bg);
--progress-bar-bg: hsl(240, 98%, 17%);
--progress-bar-transition: width 0.6s ease;
/* ===== LIST GROUP ===== */
--list-group-color: hsl(210, 11%, 15%);
--list-group-bg: var(--body-bg);
--list-group-border-color: rgba(var(--black-rgb), 0.125);
--list-group-border-width: 1px;
--list-group-border-radius: 0.25rem;
--list-group-item-padding-x: 1rem;
--list-group-item-padding-y: 0.5rem;
--list-group-action-color: hsl(210, 9%, 31%);
--list-group-action-active-color: hsl(210, 11%, 15%);
--list-group-action-active-bg: hsl(210, 16%, 93%);
--list-group-disabled-color: hsl(210, 7%, 46%);
--list-group-disabled-bg: var(--body-bg);
--list-group-active-color: var(--body-bg);
--list-group-active-bg: hsl(240, 98%, 17%);
--list-group-active-border-color: hsl(240, 98%, 17%);
/* ===== DROPDOWN ===== */
--dropdown-zindex: 1000;
--dropdown-min-width: 10rem;
--dropdown-padding-x: 0;
--dropdown-padding-y: 0.5rem;
--dropdown-spacer: 0.125rem;
--dropdown-font-size: 1rem;
--dropdown-color: hsl(210, 11%, 15%);
--dropdown-bg: var(--body-bg);
--dropdown-border-color: var(--border-color-translucent);
--dropdown-border-radius: 0.25rem;
--dropdown-border-width: 1px;
--dropdown-inner-border-radius: calc(0.25rem - 1px);
--dropdown-divider-bg: var(--border-color-translucent);
--dropdown-divider-margin-y: 0.5rem;
--dropdown-box-shadow: 0 0.5rem 1rem var(--shadow-color-light);
--dropdown-link-color: hsl(210, 11%, 15%);
--dropdown-link-active-color: var(--body-bg);
--dropdown-link-active-bg: hsl(240, 98%, 17%);
--dropdown-link-disabled-color: hsl(210, 11%, 71%);
--dropdown-item-padding-x: 1rem;
--dropdown-item-padding-y: 0.25rem;
--dropdown-header-color: hsl(210, 7%, 46%);
--dropdown-header-padding-x: 1rem;
--dropdown-header-padding-y: 0.5rem;
/* ===== TOAST ===== */
--toast-zindex: 1090;
--toast-padding-x: 0.75rem;
--toast-padding-y: 0.5rem;
--toast-spacing: 1em;
--toast-max-width: 350px;
--toast-font-size: 0.875rem;
--toast-color: ;
--toast-bg: rgba(255, 255, 255, 0.85);
--toast-border-width: 1px;
--toast-border-color: var(--border-color-translucent);
--toast-border-radius: 0.25rem;
--toast-box-shadow: 0 0.5rem 1rem var(--shadow-color-light);
--toast-header-color: hsl(210, 7%, 46%);
--toast-header-bg: rgba(var(--white-rgb), 0.85);
--toast-header-border-color: rgba(var(--black-rgb), var(--opacity-5));
/* ===== MODAL ===== */
--modal-zindex: 1050;
--modal-width: 500px;
--modal-padding: 1rem;
--modal-margin: 0.5rem;
--modal-color: ;
--modal-bg: var(--body-bg);
--modal-border-color: var(--border-color-translucent);
--modal-border-width: 1px;
--modal-border-radius: 0.3rem;
--modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--modal-inner-border-radius: calc(0.3rem - 1px);
--modal-header-padding-x: 1rem;
--modal-header-padding-y: 1rem;
--modal-header-padding: 1rem 1rem;
--modal-header-border-color: var(--border-color);
--modal-header-border-width: 1px;
--modal-title-line-height: 1.5;
--modal-footer-gap: 0.5rem;
--modal-footer-bg: ;
--modal-footer-border-color: var(--border-color);
--modal-footer-border-width: 1px;
/* ===== TOOLTIP ===== */
--tooltip-zindex: 1070;
--tooltip-max-width: 200px;
--tooltip-padding-x: 0.5rem;
--tooltip-padding-y: 0.25rem;
--tooltip-margin: ;
--tooltip-font-size: 0.875rem;
--tooltip-color: var(--body-bg);
--tooltip-bg: hsl(0, 0%, 0%);
--tooltip-border-radius: 0.25rem;
--tooltip-opacity: 0.9;
--tooltip-arrow-width: 0.8rem;
--tooltip-arrow-height: 0.4rem;
/* ===== POPOVER ===== */
--popover-zindex: 1060;
--popover-max-width: 276px;
--popover-font-size: 0.875rem;
--popover-bg: var(--body-bg);
--popover-border-width: 1px;
--popover-border-color: var(--border-color-translucent);
--popover-border-radius: 0.3rem;
--popover-inner-border-radius: calc(0.3rem - 1px);
--popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--popover-header-padding-x: 1rem;
--popover-header-padding-y: 0.5rem;
--popover-header-font-size: 1rem;
--popover-header-color: ;
--popover-header-bg: #f0f0f0;
--popover-body-padding-x: 1rem;
--popover-body-padding-y: 1rem;
--popover-body-color: hsl(210, 11%, 15%);
--popover-arrow-width: 1rem;
--popover-arrow-height: 0.5rem;
--popover-arrow-border: var(--popover-border-color);
/* ===== SPINNER ===== */
--spinner-width: 2rem;
--spinner-height: 2rem;
--spinner-vertical-align: -0.125em;
--spinner-border-width: 0.25em;
--spinner-animation-speed: 0.75s;
/* ===== NAV TABS ===== */
--nav-tabs-border-width: 1px;
--nav-tabs-border-color: hsl(210, 14%, 89%);
--nav-tabs-border-radius: 0.25rem;
--nav-tabs-link-active-color: hsl(210, 9%, 31%);
--nav-tabs-link-active-bg: var(--body-bg);
--nav-tabs-link-active-border-color: hsl(210, 14%, 89%) hsl(210, 14%, 89%) var(--body-bg);
/* ===== NAV PILLS ===== */
--nav-pills-border-radius: 0.25rem;
--nav-pills-link-active-color: var(--body-bg);
--nav-pills-link-active-bg: hsl(240, 98%, 17%);
/* ===== TABLE ===== */
--table-color: var(--body-color);
--table-bg: transparent;
--table-border-color: var(--border-color);
--table-accent-bg: transparent;
--table-striped-color: var(--body-color);
--table-striped-bg: rgba(var(--black-rgb), var(--opacity-5));
--table-active-color: var(--body-color);
--table-active-bg: rgba(var(--black-rgb), 0.075);
/* ===== BACKDROP ===== */
--backdrop-zindex: 1040;
--backdrop-bg: hsl(0, 0%, 0%);
--backdrop-opacity: 0.5;
} }
.btn { .btn {

1
src/media/css/theme/light.standard.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
src/media/js/gtm.min.js vendored Normal file
View File

@@ -0,0 +1 @@
(()=>{"use strict";const e=window,t={},n=e=>{const t=(()=>{const e=document.currentScript;return e||(Array.from(document.getElementsByTagName("script")).reverse().find(e=>(e.getAttribute("src")||"").includes("/gtm.js"))||null)})(),n=document.documentElement,o=document.body,a=document.querySelector(`meta[name="moko:gtm-${e}"]`);return t&&t.dataset&&t.dataset[e]||n&&n.dataset&&n.dataset[e]||o&&o.dataset&&o.dataset[e]||a&&a.getAttribute("content")||null},o=(e,t=!1)=>{if(null==e)return t;const n=String(e).trim().toLowerCase();return!!["1","true","yes","y","on"].includes(n)||!["0","false","no","n","off"].includes(n)&&t},a=(...e)=>{if(r.debug)try{console.info("[moko-gtm]",...e)}catch(e){}},r={id:"",dataLayerName:"dataLayer",debug:!1,ignoreDNT:!1,blockOnDev:!0,envAuth:"",envPreview:"",consentDefault:{analytics_storage:"granted",functionality_storage:"granted",security_storage:"granted",ad_storage:"denied",ad_user_data:"denied",ad_personalization:"denied"},pageVars:()=>({})},d=(e,t={})=>{const n={...e};for(const e in t){if(!Object.prototype.hasOwnProperty.call(t,e))continue;const o=t[e];o&&"object"==typeof o&&!Array.isArray(o)?n[e]={...n[e]||{},...o}:void 0!==o&&(n[e]=o)}return n},i=()=>{const t=e.MOKO_GTM_OPTIONS&&"object"==typeof e.MOKO_GTM_OPTIONS?e.MOKO_GTM_OPTIONS:{},a=n("id")||e.MOKO_GTM_ID||"",r=n("dataLayer")||"",d=n("debug"),i=n("ignoreDnt"),c=n("blockOnDev"),s=n("envAuth")||"",u=n("envPreview")||"";return{id:a||t.id||"",dataLayerName:r||t.dataLayerName||void 0,debug:o(d,!!t.debug),ignoreDNT:o(i,!!t.ignoreDNT),blockOnDev:o(c,t.blockOnDev??!0),envAuth:s||t.envAuth||"",envPreview:u||t.envPreview||"",consentDefault:t.consentDefault||void 0,pageVars:"function"==typeof t.pageVars?t.pageVars:void 0}},c=()=>{const t=r.dataLayerName;return e[t]=e[t]||[],e[t]},s=(...e)=>{c().push(arguments.length>1?e:e[0]),a("gtag push:",e)};t.push=(...e)=>s(...e),t.setConsent=e=>{s("consent","update",e||{})},t.isLoaded=()=>!!document.querySelector('script[src*="googletagmanager.com/gtm.js"]'),t.config=()=>({...r});const u=()=>{if(!r.id)return void a("GTM ID missing; aborting load.");if(t.isLoaded())return void a("GTM already loaded; skipping duplicate injection.");c().push({"gtm.start":(new Date).getTime(),event:"gtm.js"});const e=document.getElementsByTagName("script")[0],n=document.createElement("script");n.async=!0,n.src=`https://www.googletagmanager.com/gtm.js?id=${encodeURIComponent(r.id)}${"dataLayer"!==r.dataLayerName?`&l=${encodeURIComponent(r.dataLayerName)}`:""}${(()=>{const e=[];return r.envAuth&&e.push(`gtm_auth=${encodeURIComponent(r.envAuth)}`),r.envPreview&&e.push(`gtm_preview=${encodeURIComponent(r.envPreview)}`,"gtm_cookies_win=x"),e.length?`&${e.join("&")}`:""})()}`,e&&e.parentNode?e.parentNode.insertBefore(n,e):(document.head||document.documentElement).appendChild(n),a("Injected GTM script:",n.src)},g=()=>!r.ignoreDNT&&(()=>{const e=navigator,t=(e.doNotTrack||e.msDoNotTrack||e.navigator&&e.navigator.doNotTrack||"").toString().toLowerCase();return"1"===t||"yes"===t})()?(a("DNT is enabled; blocking GTM load (set ignoreDNT=true to override)."),!1):!r.blockOnDev||!(()=>{const t=e.location&&e.location.hostname||"";return"localhost"===t||"127.0.0.1"===t||t.endsWith(".local")||t.endsWith(".test")})()||(a("Development host detected; blocking GTM load (set blockOnDev=false to override)."),!1);t.init=(e={})=>{const t=i(),n=d(r,d(t,e));Object.assign(r,n),a("Config:",r),c(),s("consent","default",r.consentDefault),a("Applied default consent:",r.consentDefault),(()=>{const e={event:"moko.page_init",page_title:document.title||"",page_language:document.documentElement&&document.documentElement.lang||"",..."function"==typeof r.pageVars&&r.pageVars()||{}};s(e)})(),g()?u():a("GTM load prevented by configuration or environment.")};const m=()=>{!(!i().id&&!e.MOKO_GTM_ID)?t.init():a("No GTM ID detected; awaiting manual init via window.mokoGTM.init({ id: 'GTM-XXXXXXX' }).")};"complete"===document.readyState||"interactive"===document.readyState?setTimeout(m,0):document.addEventListener("DOMContentLoaded",m,{once:!0}),e.mokoGTM=t;try{const e=i();o(e.debug,!1)&&(r.debug=!0,a("Ready. You can call window.mokoGTM.init({ id: 'GTM-XXXXXXX' })."))}catch(e){}})();

1
src/media/js/template.min.js vendored Normal file
View File

@@ -0,0 +1 @@
!function(e,t){"use strict";var a="theme",n=e.matchMedia("(prefers-color-scheme: dark)"),r=t.documentElement;function o(e){r.setAttribute("data-bs-theme",e),r.setAttribute("data-aria-theme",e);try{localStorage.setItem(a,e)}catch(e){}}function d(){try{localStorage.removeItem(a)}catch(e){}}function i(){return n.matches?"dark":"light"}function c(){try{return localStorage.getItem(a)}catch(e){return null}}function l(){if(!t.getElementById("mokoThemeFab")){var a,l=t.createElement("div");l.id="mokoThemeFab",l.className=(a=(t.body.getAttribute("data-theme-fab-pos")||"br").toLowerCase(),/^(br|bl|tr|tl)$/.test(a)||(a="br"),"pos-"+a);var s=t.createElement("span");s.className="label",s.textContent="Light";var u=t.createElement("button");u.id="mokoThemeSwitch",u.type="button",u.setAttribute("role","switch"),u.setAttribute("aria-label","Toggle dark mode"),u.setAttribute("aria-checked","false");var m=t.createElement("span");m.className="switch";var h=t.createElement("span");h.className="knob",m.appendChild(h),u.appendChild(m);var f=t.createElement("span");f.className="label",f.textContent="Dark";var b=t.createElement("button");b.id="mokoThemeAuto",b.type="button",b.className="btn btn-sm btn-link text-decoration-none px-2",b.setAttribute("aria-label","Follow system theme"),b.textContent="Auto",u.addEventListener("click",function(){var e="dark"===(r.getAttribute("data-bs-theme")||"light").toLowerCase()?"light":"dark";o(e),u.setAttribute("aria-checked","dark"===e?"true":"false");var a=t.querySelector('meta[name="theme-color"]');a&&a.setAttribute("content","dark"===e?"#0f1115":"#ffffff")}),b.addEventListener("click",function(){d();var e=i();o(e),u.setAttribute("aria-checked","dark"===e?"true":"false")});var g=function(){if(!c()){var e=i();o(e),u.setAttribute("aria-checked","dark"===e?"true":"false")}};"function"==typeof n.addEventListener?n.addEventListener("change",g):"function"==typeof n.addListener&&n.addListener(g);var p=c()||i();u.setAttribute("aria-checked","dark"===p?"true":"false"),l.appendChild(s),l.appendChild(u),l.appendChild(f),l.appendChild(b),t.body.appendChild(l),e.mokoThemeFabStatus=function(){var a=t.getElementById("mokoThemeFab");if(!a)return{mounted:!1};var n=a.getBoundingClientRect();return{mounted:!0,rect:{top:n.top,left:n.left,width:n.width,height:n.height},zIndex:e.getComputedStyle(a).zIndex,posClass:a.className}},setTimeout(function(){var e=l.getBoundingClientRect();(e.width<10||e.height<10)&&(l.classList.add("debug-outline"),console.warn("[moko] Theme FAB mounted but appears too small — check CSS collisions."))},50)}}function s(){e.scrollY>50?t.body.classList.add("scrolled"):t.body.classList.remove("scrolled")}function u(){var a=t.getElementById("back-top");a&&a.addEventListener("click",function(t){t.preventDefault(),e.scrollTo({top:0,behavior:"smooth"})})}function m(){!function(){var e=c()||i();o(e);var a=function(){c()||o(i())};"function"==typeof n.addEventListener?n.addEventListener("change",a):"function"==typeof n.addListener&&n.addListener(a);var r=t.getElementById("themeSwitch"),l=t.getElementById("themeAuto");r&&(r.checked="dark"===e,r.addEventListener("change",function(){o(r.checked?"dark":"light")})),l&&l.addEventListener("click",function(){d(),o(i())})}(),"1"===t.body.getAttribute("data-theme-fab-enabled")&&l(),s(),e.addEventListener("scroll",s),t.querySelector(".drawer-toggle-left")||t.querySelector(".drawer-toggle-right"),u()}"loading"===t.readyState?t.addEventListener("DOMContentLoaded",m):m()}(window,document);

5
src/offline.php
View File

@@ -134,6 +134,11 @@ $params_googletagmanager = $params->get('googletagmanager', false);
$params_googletagmanagerid = $params->get('googletagmanagerid', null); $params_googletagmanagerid = $params->get('googletagmanagerid', null);
$params_googleanalytics = $params->get('googleanalytics', false); $params_googleanalytics = $params->get('googleanalytics', false);
$params_googleanalyticsid = $params->get('googleanalyticsid', null); $params_googleanalyticsid = $params->get('googleanalyticsid', null);
$params_googlesitekey = $params->get('googlesitekey', null);
if (!empty($params_googlesitekey)) {
$doc->setMetaData('google-site-verification', htmlspecialchars($params_googlesitekey, ENT_QUOTES, 'UTF-8'));
}
/* ----------------------- /* -----------------------
Login routes & Users Login routes & Users

53
src/templateDetails.xml
View File

@@ -25,7 +25,7 @@
DEFGROUP: Joomla DEFGROUP: Joomla
INGROUP: MokoCassiopeia INGROUP: MokoCassiopeia
PATH: templates/mokocassiopeia/templateDetails.xml PATH: templates/mokocassiopeia/templateDetails.xml
VERSION: 03.08.04 VERSION: 03.09.01
BRIEF: Template manifest XML file for MokoCassiopeia BRIEF: Template manifest XML file for MokoCassiopeia
========================================================================= =========================================================================
--> -->
@@ -36,12 +36,12 @@
</server> </server>
</updateservers> </updateservers>
<name>MokoCassiopeia</name> <name>MokoCassiopeia</name>
<version>03.09.00</version> <version>03.09.01</version>
<creationDate>2026-03-08</creationDate> <creationDate>2026-03-08</creationDate>
<author>Jonathan Miller || Moko Consulting</author> <author>Jonathan Miller || Moko Consulting</author>
<authorEmail>hello@mokoconsulting.tech</authorEmail> <authorEmail>hello@mokoconsulting.tech</authorEmail>
<copyright>(C)GNU General Public License Version 3 - 2026 Moko Consulting</copyright> <copyright>(C)GNU General Public License Version 3 - 2026 Moko Consulting</copyright>
<description><![CDATA[<h3>MokoCassiopeia Template Description</h3> <p> <strong>MokoCassiopeia</strong> continues Joomla's tradition of space-themed default templates— building on the legacy of <em>Solarflare</em> (Joomla 1.0), <em>Milkyway</em> (Joomla 1.5), and <em>Protostar</em> (Joomla 3.0). </p> <p> This template is a customized fork of the <strong>Cassiopeia</strong> 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. </p> <h4>Custom Colour Themes</h4> <p> To create a custom colour scheme, copy the template file <code>templates/light.custom.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code> or <code>templates/dark.custom.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code>. Customise the CSS variables to match your brand, then activate it in <em>System → Site Templates → MokoCassiopeia → Theme tab</em> by selecting "Custom" for the Light or Dark Mode Palette. For comprehensive documentation on all available CSS variables, see <code>docs/CSS_VARIABLES.md</code>. </p> <h4>Code Attribution</h4> <p> This template is based on the original <strong>Cassiopeia</strong> template developed by the <a href="https://www.joomla.org" target="_blank" rel="noopener">Joomla! Project</a> and released under the GNU General Public License. </p> <p> Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards. </p> <p> It includes integration with <a href="https://afeld.github.io/bootstrap-toc/" target="_blank" rel="noopener">Bootstrap TOC</a>, an open-source table of contents generator by A. Feld, licensed under the MIT License. </p> <p> All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable. </p>]]></description> <description><![CDATA[<h3>MokoCassiopeia Template Description</h3> <p> <strong>MokoCassiopeia</strong> continues Joomla's tradition of space-themed default templates— building on the legacy of <em>Solarflare</em> (Joomla 1.0), <em>Milkyway</em> (Joomla 1.5), and <em>Protostar</em> (Joomla 3.0). </p> <p> This template is a customized fork of the <strong>Cassiopeia</strong> 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. </p> <h4>Custom Colour Themes</h4> <p> Starter palette files are included with the template. To create a custom colour scheme, copy <code>templates/mokocassiopeia/templates/light.custom.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code>, or <code>templates/mokocassiopeia/templates/dark.custom.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code>. Customise the CSS variables to match your brand, then activate your palette in <em>System → Site Templates → MokoCassiopeia → Theme tab</em> by selecting "Custom" for the Light or Dark Mode Palette. A full variable reference is available in the <em>CSS Variables</em> tab in template options. </p> <h4>Custom CSS &amp; JavaScript</h4> <p> For site-specific styles and scripts that should survive template updates, create the following files: </p> <ul> <li><code>media/templates/site/mokocassiopeia/css/user.css</code> — loaded on every page for custom CSS overrides.</li> <li><code>media/templates/site/mokocassiopeia/js/user.js</code> — loaded on every page for custom JavaScript.</li> </ul> <p> These files are gitignored and will not be overwritten by template updates. </p> <h4>Code Attribution</h4> <p> This template is based on the original <strong>Cassiopeia</strong> template developed by the <a href="https://www.joomla.org" target="_blank" rel="noopener">Joomla! Project</a> and released under the GNU General Public License. </p> <p> Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards. </p> <p> It includes integration with <a href="https://afeld.github.io/bootstrap-toc/" target="_blank" rel="noopener">Bootstrap TOC</a>, an open-source table of contents generator by A. Feld, licensed under the MIT License. </p> <p> All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable. </p>]]></description>
<inheritable>1</inheritable> <inheritable>1</inheritable>
<files> <files>
<filename>component.php</filename> <filename>component.php</filename>
@@ -52,6 +52,7 @@
<filename>templateDetails.xml</filename> <filename>templateDetails.xml</filename>
<folder>html</folder> <folder>html</folder>
<folder>language</folder> <folder>language</folder>
<folder>templates</folder>
</files> </files>
<stylesheets> <stylesheets>
<stylesheet>media/templates/site/mokocassiopeia/css/editor.css</stylesheet> <stylesheet>media/templates/site/mokocassiopeia/css/editor.css</stylesheet>
@@ -66,6 +67,7 @@
<position>topbar</position> <position>topbar</position>
<position>below-topbar</position> <position>below-topbar</position>
<position>below-logo</position> <position>below-logo</position>
<position>brand-aside</position>
<position>menu</position> <position>menu</position>
<position>search</position> <position>search</position>
<position>banner</position> <position>banner</position>
@@ -123,6 +125,7 @@
<option value="1">JYES</option> <option value="1">JYES</option>
</field> </field>
<field name="googleanalyticsid" type="text" default="" label="TPL_MOKOCASSIOPEIA_GOOGLEANALYTICSID_LABEL" description="TPL_MOKOCASSIOPEIA_GOOGLEANALYTICSID_DESC" filter="string" showon="googleanalytics:1" /> <field name="googleanalyticsid" type="text" default="" label="TPL_MOKOCASSIOPEIA_GOOGLEANALYTICSID_LABEL" description="TPL_MOKOCASSIOPEIA_GOOGLEANALYTICSID_DESC" filter="string" showon="googleanalytics:1" />
<field name="googlesitekey" type="text" default="" label="TPL_MOKOCASSIOPEIA_GOOGLESITEKEY_LABEL" description="TPL_MOKOCASSIOPEIA_GOOGLESITEKEY_DESC" filter="string" />
</fieldset> </fieldset>
<!-- Custom Code tab --> <!-- Custom Code tab -->
@@ -246,6 +249,50 @@
<option value="tl">Top-left</option> <option value="tl">Top-left</option>
</field> </field>
</fieldset> </fieldset>
<!-- CSS Variables reference tab -->
<fieldset name="css_variables" label="TPL_MOKOCASSIOPEIA_CSS_VARS_FIELDSET_LABEL">
<field name="css_vars_intro" type="note" description="TPL_MOKOCASSIOPEIA_CSS_VARS_INTRO" />
<field name="css_vars_brand" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_BRAND_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_BRAND_DESC" class="alert alert-light" />
<field name="css_vars_links" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_LINKS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_LINKS_DESC" class="alert alert-light" />
<field name="css_vars_typography" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_TYPO_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_TYPO_DESC" class="alert alert-light" />
<field name="css_vars_nav" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_DESC" class="alert alert-light" />
<field name="css_vars_layout" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_LAYOUT_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_LAYOUT_DESC" class="alert alert-light" />
<field name="css_vars_breakpoints" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_BP_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_BP_DESC" class="alert alert-light" />
<field name="css_vars_bootstrap" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_BS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_BS_DESC" class="alert alert-light" />
<field name="css_vars_bootstrap_states" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_BS_STATES_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_BS_STATES_DESC" class="alert alert-light" />
<field name="css_vars_alert_list" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_LIST_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_LIST_DESC" class="alert alert-light" />
<field name="css_vars_colors" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_COLORS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_COLORS_DESC" class="alert alert-light" />
<field name="css_vars_hero" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_DESC" class="alert alert-light" />
<field name="css_vars_header" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_DESC" class="alert alert-light" />
<field name="css_vars_containers" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_CONTAINERS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_CONTAINERS_DESC" class="alert alert-light" />
<field name="css_vars_borders" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_BORDERS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_BORDERS_DESC" class="alert alert-light" />
<field name="css_vars_shadows" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_SHADOWS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_SHADOWS_DESC" class="alert alert-light" />
<field name="css_vars_forms" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_FORMS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_FORMS_DESC" class="alert alert-light" />
<field name="css_vars_buttons" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_BUTTONS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_BUTTONS_DESC" class="alert alert-light" />
<field name="css_vars_cards" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_CARDS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_CARDS_DESC" class="alert alert-light" />
<field name="css_vars_accordion" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_ACCORDION_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_ACCORDION_DESC" class="alert alert-light" />
<field name="css_vars_alert_base" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_BASE_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_ALERT_BASE_DESC" class="alert alert-light" />
<field name="css_vars_badge" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_BADGE_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_BADGE_DESC" class="alert alert-light" />
<field name="css_vars_breadcrumb" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_BREADCRUMB_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_BREADCRUMB_DESC" class="alert alert-light" />
<field name="css_vars_dropdown_menu" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_DROPDOWN_MENU_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_DROPDOWN_MENU_DESC" class="alert alert-light" />
<field name="css_vars_list_group" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_LIST_GROUP_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_LIST_GROUP_DESC" class="alert alert-light" />
<field name="css_vars_modal" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_MODAL_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_MODAL_DESC" class="alert alert-light" />
<field name="css_vars_backdrop" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_BACKDROP_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_BACKDROP_DESC" class="alert alert-light" />
<field name="css_vars_nav_tabs" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_TABS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_TABS_DESC" class="alert alert-light" />
<field name="css_vars_nav_pills" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_PILLS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_PILLS_DESC" class="alert alert-light" />
<field name="css_vars_pagination" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_PAGINATION_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_PAGINATION_DESC" class="alert alert-light" />
<field name="css_vars_popover" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_POPOVER_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_POPOVER_DESC" class="alert alert-light" />
<field name="css_vars_progress" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_PROGRESS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_PROGRESS_DESC" class="alert alert-light" />
<field name="css_vars_spinner" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_SPINNER_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_SPINNER_DESC" class="alert alert-light" />
<field name="css_vars_table" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_TABLE_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_TABLE_DESC" class="alert alert-light" />
<field name="css_vars_toast" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_TOAST_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_TOAST_DESC" class="alert alert-light" />
<field name="css_vars_tooltip" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_TOOLTIP_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_TOOLTIP_DESC" class="alert alert-light" />
<field name="css_vars_components" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_COMPONENTS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_COMPONENTS_DESC" class="alert alert-light" />
<field name="css_vars_offcanvas" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_OFFCANVAS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_OFFCANVAS_DESC" class="alert alert-light" />
<field name="css_vars_virtuemart" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_VM_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_VM_DESC" class="alert alert-light" />
<field name="css_vars_gable" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_GABLE_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_GABLE_DESC" class="alert alert-light" />
</fieldset>
</fields> </fields>
</config> </config>
</extension> </extension>

842
src/templates/dark.custom.css Normal file
View File

@@ -0,0 +1,842 @@
@charset "UTF-8";
/* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
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: templates/mokocassiopeia/templates/dark.custom.css
VERSION: 03.09.01
BRIEF: Starter custom dark palette — copy to media/templates/site/mokocassiopeia/css/theme/dark.custom.css and customise
*/
/* -----------------------------------------------
* 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;
}

851
src/templates/light.custom.css Normal file
View File

@@ -0,0 +1,851 @@
@charset "UTF-8";
/* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
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: templates/mokocassiopeia/templates/light.custom.css
VERSION: 03.09.01
BRIEF: Starter custom light palette — copy to media/templates/site/mokocassiopeia/css/theme/light.custom.css and customise
*/
/* -----------------------------------------------
* 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;
}