03.09.01 — mod_custom hero override, palette starter files, updated descriptions (#84)
* Add mod_custom hero layout override and bump version to 03.09.01 Adds src/html/mod_custom/hero.php — a banner-overlay style template override for mod_custom, mirroring Cassiopeia's banner layout pattern. Includes background image support via WebAssetManager and respects the Module Manager's moduleclass_sfx field. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Ignore and untrack .claude/settings.local.json Adds .claude/settings.local.json to .gitignore and removes it from version control to keep local Claude Code permissions out of the repo. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Ship custom palette starters and update template description - Add src/templates/light.custom.css and dark.custom.css as starter palette files that ship with the template, giving users a full variable reference to copy and customise - Register src/templates/ folder in templateDetails.xml <files> - Update <description> in templateDetails.xml: correct palette source paths, add Custom CSS & JavaScript section (user.css / user.js), link docs to GitHub repo docs/ directory - Sync en-GB and en-US tpl_mokocassiopeia.sys.ini with same changes, preserving British/American spelling variants; bump version to 03.09.01 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Add CSS Variables reference tab to template options Adds a new 'CSS Variables' tab to the template configuration with eight documented sections (brand, typography, navigation, header background, container backgrounds, borders/shadows, forms/focus) so site builders can reference all available custom properties without leaving Joomla admin. Also removes external docs links from descriptions in templateDetails.xml and both language files, replacing them with a pointer to the new tab. Fixes stale custom palette source paths in en-GB and en-US ini files. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Expand CSS Variables tab to full variable reference and add custom-hero class - Replace 8-field CSS Variables tab with 21 comprehensive sections covering all variables from light.standard.css and dark.standard.css - New sections: Links, Layout & Spacing, Breakpoints, Bootstrap Semantic Palette, Bootstrap State Colors, Alert & List Group Colors, Standard Colors/Grays/Opacity, Shadows & Shadow Tokens, Buttons, Cards, Component & Plugin Colors, VirtueMart, Gable - Add custom-hero class to hero.php outer div (always present) - Both en-GB and en-US language files updated Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Add Google Search Console verification and ensure all Google services coexist - Add googlesitekey param to Google fieldset in templateDetails.xml - Inject <meta name="google-site-verification"> via setMetaData() in index.php, component.php, and offline.php - GTM, GA, and Search Console verification can now all be active simultaneously - Add language strings for new field in en-US and en-GB Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Add header-aside module position to the right of the logo - New position renders inside .header-brand-wrap, right-aligned via margin-inline-start: auto on .container-header-aside - CSS: .header-brand-wrap uses flexbox so logo stays left, aside floats right - Registered in templateDetails.xml positions list - Language strings added to both en-US and en-GB sys.ini files Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Add minify build script and generate .min CSS/JS; rename position to brand-aside Build tooling: - Add package.json with clean-css and terser dev dependencies - Add scripts/minify.js: reads joomla.asset.json, auto-detects source/.min pairs, and minifies all template-owned CSS and JS files - Add node_modules/ to .gitignore Generated .min files (all 6 manifest pairs): - css/template.min.css (17.8% saved) - css/editor.min.css (49.4% saved) - css/theme/light.standard.min.css (13.1% saved) - css/theme/dark.standard.min.css (14.4% saved) - js/template.min.js (58.2% saved) - js/gtm.min.js (62.3% saved) Rename: header-aside → brand-aside (position, CSS class, language keys) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Add hero/banner-overlay CSS variables and wire template.css - Add HERO / BANNER OVERLAY section to light.standard.css and dark.standard.css: --hero-height, --hero-color, --hero-bg-repeat, --hero-bg-attachment, --hero-bg-position, --hero-bg-size, --hero-border-bottom, --hero-overlay-bg (light: 0.1 alpha / dark: 0.3 alpha), --hero-overlay-padding, --hero-overlay-text-align, --hero-overlay-text-color - Replace all hardcoded values in .container-banner .banner-overlay and .overlay with var() references (with fallbacks) - Fix background-position: comma syntax → correct space-separated single-bg value - Add css_vars_hero note field to CSS Variables tab in templateDetails.xml - Add TPL_MOKOCASSIOPEIA_CSS_VARS_HERO_LABEL/DESC to en-US and en-GB - Regenerate .min files Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Add smooth theme-switch transitions and restore hero .overlay wrapper - Add prefers-reduced-motion-scoped CSS transitions (bg, color, border) on :root, body, and key layout containers so light/dark theme switches animate smoothly instead of snapping - Restore <div class="overlay"> child in hero.php; slim .custom-hero rule to a customisation hook only — visual overlay styles are handled by .overlay child - Regenerate template.min.css Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Update template.css * Merge duplicate prefers-reduced-motion media queries Consolidate the two @media (prefers-reduced-motion: no-preference) blocks into one — scroll-behavior and theme-switch colour transitions share the same query and are cleaner in a single block. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Promote offcanvas variables to :root theme files and document in CSS Variables tab - Move --offcanvas-* definitions from component-scoped .offcanvas selector in template.css into :root[data-bs-theme] blocks in light.standard.css and dark.standard.css so they are overridable via user.css at root level - Fix two bugs in the old definitions: --offcanvas-bg was incorrectly set to var(--body-color) (text colour); corrected to var(--body-bg); and --offcanvas-color had a spurious 'color:' prefix - Dark theme uses a heavier box-shadow (0.3 alpha) for better depth perception - Add css_vars_offcanvas field to templateDetails.xml CSS Variables tab - Add en-US and en-GB language strings for the new Offcanvas Panel section - Rebuild all .min CSS files Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Promote Bootstrap component variables from template.css to :root theme files Move 16 component variable groups from component-scoped selectors in template.css into :root[data-bs-theme] blocks in light.standard.css and dark.standard.css: accordion, breadcrumb, pagination, badge, alert, progress, list-group, dropdown, toast, modal, tooltip, popover, spinner, nav, nav-tabs, nav-pills Dark theme values adapted for dark surfaces: semantic var() references, lighter SVG icon fill colours, heavier shadows, secondary-bg backgrounds. Component selectors in template.css retain only non-variable rules. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Promote table and backdrop variables to :root theme files Move --table-* and --backdrop-* base definitions from component selectors in template.css into :root[data-bs-theme] blocks in light/dark theme files. Dark table uses white-rgb-based striped/active overlays for proper contrast on dark surfaces. Deduplicate the double --table-active-* declarations that existed in template.css. Backdrop values are identical in both themes. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Add CSS Variables tab documentation for all promoted Bootstrap components Add LABEL/DESC language strings (en-US + en-GB) for all 17 Bootstrap component variable groups now living in the :root theme files: accordion, alert, badge, backdrop, breadcrumb, dropdown, list-group, modal, nav-tabs, nav-pills, pagination, popover, progress, spinner, table, toast, tooltip Each section documents variables with HTML subheadings (Dimensions, Colours, Typography, Stacking, Animation) and <code> tags for every variable name. British English spellings used throughout en-GB. Adds 34 new lines per language file (17 LABEL + 17 DESC pairs, 80 CSS_VARS_* keys total). XML fields were already present from the prior migration commit. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit was merged in pull request #84.
This commit is contained in:
GitHub
@@ -8,7 +8,7 @@
|
||||
; DEFGROUP: Joomla.Template.Site
|
||||
; INGROUP: MokoCassiopeia
|
||||
; 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
|
||||
;
|
||||
; 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_GOOGLEANALYTICSID_LABEL="Google Analytics ID"
|
||||
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 <meta name="google-site-verification"> tag. Find this in Google Search Console under Ownership Verification → HTML tag method."
|
||||
|
||||
; ===== Branding & icons (Theme tab) =====
|
||||
TPL_MOKOCASSIOPEIA_BRAND_LABEL="Brand"
|
||||
@@ -75,9 +77,9 @@ TPL_MOKOCASSIOPEIA_COLOR_NAME_STANDARD="Standard"
|
||||
TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom"
|
||||
; New labels for Theme tab dropdowns
|
||||
TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL="Light color palette"
|
||||
TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_DESC="Select a color palette for light mode. <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_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) =====
|
||||
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_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="light"]</code> or <code>:root[data-bs-theme="dark"]</code> so light and dark values are independent.</p>"
|
||||
|
||||
TPL_MOKOCASSIOPEIA_CSS_VARS_BRAND_LABEL="Brand & 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 & 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 & 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><mark></code> colors<br><code>--font-sans-serif</code> / <code>--font-monospace</code> — Font stacks"
|
||||
|
||||
TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_LABEL="Navigation, Navbar & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 =====
|
||||
MOD_BREADCRUMBS_HERE="YOU ARE HERE:"
|
||||
|
||||
|
||||
Reference in New Issue
Block a user