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

Promote offcanvas variables to :root theme files and document in CSS Variables tab

Browse Source 
- 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>
This commit is contained in:
Jonathan Miller
2026-03-17 22:54:55 -05:00
parent 63c88ede64
commit b043ccc099
9 changed files with 35 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -172,6 +172,9 @@ TPL_MOKOCASSIOPEIA_CSS_VARS_CARDS_DESC="<code>--card-spacer-y</code> / <code>--c
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"

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

@@ -172,6 +172,9 @@ TPL_MOKOCASSIOPEIA_CSS_VARS_CARDS_DESC="<code>--card-spacer-y</code> / <code>--c
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"

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

@@ -7424,16 +7424,7 @@ fieldset:disabled .btn {
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm {
--offcanvas-zindex: 1045;
--offcanvas-width: 400px;
--offcanvas-height: 30vh;
--offcanvas-padding-x: 1rem;
--offcanvas-padding-y: 1rem;
--offcanvas-color: color: var(--body-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);
/* Values defined in light.standard.css / dark.standard.css under :root */
}
@media (max-width: 575.98px) {

2
src/media/css/template.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

@@ -533,6 +533,18 @@ color-scheme: dark;
--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);
}
.btn {

2
src/media/css/theme/dark.standard.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

@@ -532,6 +532,18 @@ color-scheme: light;
--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);
}
.btn {

2
src/media/css/theme/light.standard.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
src/templateDetails.xml
View File

@@ -272,6 +272,7 @@
<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_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>