src/language/en-GB/tpl_mokocassiopeia.ini

@@ -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"
 

src/language/en-US/tpl_mokocassiopeia.ini

@@ -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"
 

src/media/css/template.css

@@ -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) {

src/media/css/theme/dark.standard.css

@@ -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 {

src/media/css/theme/light.standard.css

@@ -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 {

src/templateDetails.xml

@@ -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>