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

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

Browse Source 
* 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:
Jonathan Miller
2026-03-24 16:48:07 -05:00
committed by GitHub
parent 1dcbfe1219
commit 97d3133843
23 changed files with 2859 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/templateDetails.xml
View File

@@ -25,7 +25,7 @@
DEFGROUP: Joomla
INGROUP: MokoCassiopeia
PATH: templates/mokocassiopeia/templateDetails.xml
VERSION: 03.08.04
VERSION: 03.09.01
BRIEF: Template manifest XML file for MokoCassiopeia
=========================================================================
-->
@@ -36,12 +36,12 @@
</server>
</updateservers>
<name>MokoCassiopeia</name>
<version>03.09.00</version>
<version>03.09.01</version>
<creationDate>2026-03-08</creationDate>
<author>Jonathan Miller || Moko Consulting</author>
<authorEmail>hello@mokoconsulting.tech</authorEmail>
<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>
<files>
<filename>component.php</filename>
@@ -52,6 +52,7 @@
<filename>templateDetails.xml</filename>
<folder>html</folder>
<folder>language</folder>
<folder>templates</folder>
</files>
<stylesheets>
<stylesheet>media/templates/site/mokocassiopeia/css/editor.css</stylesheet>
@@ -66,6 +67,7 @@
<position>topbar</position>
<position>below-topbar</position>
<position>below-logo</position>
<position>brand-aside</position>
<position>menu</position>
<position>search</position>
<position>banner</position>
@@ -123,6 +125,7 @@
<option value="1">JYES</option>
</field>
<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>
<!-- Custom Code tab -->
@@ -246,6 +249,50 @@
<option value="tl">Top-left</option>
</field>
</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>
</config>
</extension>