From bee7796645a25b6e126ac7f2a8c3b12c67141d34 Mon Sep 17 00:00:00 2001
From: Jonathan Miller
Date: Sat, 30 Aug 2025 18:41:15 -0500
Subject: [PATCH] 02.00
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
**Major Release** — introduces the long-awaited **Dark Mode Toggle**, streamlining accessibility and usability enhancements.
##Added
* **Dark Mode Toggle**
* Frontend toggle switch included in template.
* JavaScript handles switching between light/dark modes.
* Dark mode CSS rules applied across template styles.
* Automatic persistence of user choice (via localStorage).
* **Header Parameters Update**
* Added **logo parameter support** in template settings.
* Updated metadata & copyright header.
* **Expanded TOC (Table of Contents)**
* Automatic TOC injection when enabled.
* User selects placement via article > options > layout (`toc-left` or `toc-right`).
##Improved
* Cleaned up `index.php` by removing **skip-to-content** duplicate calls.
* Consolidated JavaScript asset loading (ensuring dark-mode script is loaded correctly from external JS file).
* Streamlined CSS for **toggle switch**, ensuring it inherits Bootstrap/Cassiopeia defaults.
* General accessibility refinements in typography and color contrast.
##Fixed
* Fixed missing **logo param** in header output.
* Corrected stylesheet inconsistencies between Bootstrap 5 helpers and template overrides.
* Patched redundant calls in script includes.
---
CHANGELOG.md | 85 ++
CODE_OF_CONDUCT.md | 35 +-
CONTRIBUTING.md | 48 +-
language/en-GB/tpl_moko-cassiopeia.ini | 37 +-
language/en-GB/tpl_moko-cassiopeia.sys.ini | 73 +-
language/en-US/tpl_moko-cassiopeia.ini | 37 +-
language/en-US/tpl_moko-cassiopeia.sys.ini | 72 +-
.../site/moko-cassiopeia/css/editor.css | 30 +
.../site/moko-cassiopeia/css/gable.css | 30 +
.../css/global/colors/colors_alternative.css | 551 -------------
.../css/global/colors/colors_standard.css | 551 -------------
.../css/global/colors/light/index.html | 118 ---
.../{colors => }/dark/colors_alternative.css | 35 +-
.../{colors => }/dark/colors_standard.css | 35 +-
.../css/global/{colors => }/dark/index.html | 0
.../css/global/fonts-local_roboto.css | 184 +++--
.../{colors => }/light/colors_alternative.css | 35 +-
.../{colors => }/light/colors_standard.css | 35 +-
.../css/global/{colors => light}/index.html | 0
.../css/global/social-media-demo.css | 125 +--
.../css/system/searchtools/searchtools.css | 84 +-
.../site/moko-cassiopeia/css/template-rtl.css | 35 +-
.../site/moko-cassiopeia/css/template.css | 70 +-
.../css/vendor/choicesjs/choices.css | 625 ++++++++-------
.../joomla-custom-elements/joomla-alert.css | 222 +++---
.../moko-cassiopeia/css/vendor/vmbasic.css | 30 +
.../moko-cassiopeia/js/darkmode-toggle.js | 269 ++++---
.../templates/site/moko-cassiopeia/js/gtm.js | 347 ++++++++
.../js/mod_gabble/gabble_com.js | 11 -
.../moko-cassiopeia/js/mod_gabble/index.html | 118 ---
.../js/mod_menu/menu-metismenu-es5.js | 37 +-
.../js/mod_menu/menu-metismenu.js | 37 +-
.../site/moko-cassiopeia/js/template.js | 37 +-
.../site/moko-cassiopeia/js/theme-init.js | 37 +-
.../templates/site/moko-cassiopeia/js/user.js | 37 +-
moko-cassiopeia-main.zip | Bin 390654 -> 0 bytes
readme.md | 444 ++++++-----
templates/moko-cassiopeia/component.php | 76 +-
templates/moko-cassiopeia/custom.php | 42 +-
templates/moko-cassiopeia/darkmode-toggle.js | 0
templates/moko-cassiopeia/error.php | 42 +-
.../html/com_content/article/toc-left.php | 233 +++---
.../html/com_content/article/toc-right.php | 233 +++---
templates/moko-cassiopeia/index.php | 747 +++++++++---------
templates/moko-cassiopeia/joomla.asset.json | 41 +-
templates/moko-cassiopeia/offline.php | 32 +-
templates/moko-cassiopeia/templateDetails.xml | 37 +-
47 files changed, 2915 insertions(+), 3124 deletions(-)
create mode 100644 CHANGELOG.md
delete mode 100644 media/templates/site/moko-cassiopeia/css/global/colors/colors_alternative.css
delete mode 100644 media/templates/site/moko-cassiopeia/css/global/colors/colors_standard.css
delete mode 100644 media/templates/site/moko-cassiopeia/css/global/colors/light/index.html
rename media/templates/site/moko-cassiopeia/css/global/{colors => }/dark/colors_alternative.css (88%)
rename media/templates/site/moko-cassiopeia/css/global/{colors => }/dark/colors_standard.css (88%)
rename media/templates/site/moko-cassiopeia/css/global/{colors => }/dark/index.html (100%)
rename media/templates/site/moko-cassiopeia/css/global/{colors => }/light/colors_alternative.css (93%)
rename media/templates/site/moko-cassiopeia/css/global/{colors => }/light/colors_standard.css (93%)
rename media/templates/site/moko-cassiopeia/css/global/{colors => light}/index.html (100%)
delete mode 100644 media/templates/site/moko-cassiopeia/js/mod_gabble/gabble_com.js
delete mode 100644 media/templates/site/moko-cassiopeia/js/mod_gabble/index.html
delete mode 100644 moko-cassiopeia-main.zip
delete mode 100644 templates/moko-cassiopeia/darkmode-toggle.js
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..447e007
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,85 @@
+
+
+Changelog — Moko-Cassiopeia
+
+#Version 2.0 (2025-08-30)
+
+**Major Release** — introduces the long-awaited **Dark Mode Toggle**, streamlining accessibility and usability enhancements.
+
+##Added
+
+* **Dark Mode Toggle**
+
+ * Frontend toggle switch included in template.
+ * JavaScript handles switching between light/dark modes.
+ * Dark mode CSS rules applied across template styles.
+ * Automatic persistence of user choice (via localStorage).
+
+* **Header Parameters Update**
+
+ * Added **logo parameter support** in template settings.
+ * Updated metadata & copyright header.
+
+* **Expanded TOC (Table of Contents)**
+
+ * Automatic TOC injection when enabled.
+ * User selects placement via article > options > layout (`toc-left` or `toc-right`).
+
+##Improved
+
+* Cleaned up `index.php` by removing **skip-to-content** duplicate calls.
+* Consolidated JavaScript asset loading (ensuring dark-mode script is loaded correctly from external JS file).
+* Streamlined CSS for **toggle switch**, ensuring it inherits Bootstrap/Cassiopeia defaults.
+* General accessibility refinements in typography and color contrast.
+
+##Fixed
+
+* Fixed missing **logo param** in header output.
+* Corrected stylesheet inconsistencies between Bootstrap 5 helpers and template overrides.
+* Patched redundant calls in script includes.
+
+---
+
+#Previous Versions
+
+##1.0
+
+* **Initial Public Release** with:
+
+ * Font Awesome 6
+ * Bootstrap 5 helpers
+ * Automatic Table of Contents (TOC) utility
+ * Moko Expansions: Google Tag Manager / GA4 hooks
+
+---
+
+For the full development roadmap, visit:
+[Moko-Cassiopeia Roadmap](https://mokoconsulting.tech/support/joomla-cms/moko-cassiopeia-roadmap)
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index b1f5a16..07caafc 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -1,22 +1,31 @@
# Code of Conduct
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 2f560f1..93f134d 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,3 +1,33 @@
+
+
# Contributing Guidelines
Thank you for considering contributing to this project! We welcome contributions from the community and are grateful for your support.
@@ -6,27 +36,27 @@ Thank you for considering contributing to this project! We welcome contributions
1. **Fork the repository**
- - Click the "Fork" button at the top of the repository page.
+ - Click the "Fork" button at the top of the repository page.
2. **Create a branch**
- ```bash
- git checkout -b feature/your-feature-name
- ```
+ ```bash
+ git checkout -b feature/your-feature-name
+ ```
3. **Make your changes**
- - Follow the existing code style.
- - Write clear commit messages.
+ - Follow the existing code style.
+ - Write clear commit messages.
4. **Test your changes**
- - Ensure all tests pass and new code is covered.
+ - Ensure all tests pass and new code is covered.
5. **Submit a pull request (PR)**
- - Push your branch to your fork.
- - Open a PR against the `main` branch.
+ - Push your branch to your fork.
+ - Open a PR against the `main` branch.
---
diff --git a/language/en-GB/tpl_moko-cassiopeia.ini b/language/en-GB/tpl_moko-cassiopeia.ini
index a9662f2..183d520 100644
--- a/language/en-GB/tpl_moko-cassiopeia.ini
+++ b/language/en-GB/tpl_moko-cassiopeia.ini
@@ -1,13 +1,30 @@
-;---------------------------------------------------
-; Template: moko-cassiopeia
-; File: en-GB.tpl_moko-cassiopeia.ini
-; Version: 02.00
-; Author: Jonathan Miller
-; Copyright: (C) 2025 Moko Consulting. All rights reserved.
-; License: GNU General Public License v3 or later; see LICENSE.txt
-; Description: Language strings for the frontend template.
-; Note: All ini files must be saved as UTF-8 without BOM.
-;---------------------------------------------------
+# =========================================================================
+# Copyright (C) 2025 Moko Consulting
+#
+# This file is part of a Moko Consulting project.
+#
+# SPDX-License-Identifier: GPL-3.0-or-later
+#
+# This program is free software; you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation; either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program. If not, see https://www.gnu.org/licenses/ .
+# =========================================================================
+# FILE INFORMATION
+# DEFGROUP: Joomla
+# INGROUP: Moko-Cassiopeia
+# PATH: language/en-GB/tpl_moko-cassiopeia.ini
+# VERSION: 02.00
+# BRIEF: English (GB) language strings for the Moko-Cassiopeia Joomla template
+# =========================================================================
; ===== Template meta =====
MOKO-CASSIOPEIA="MOKO-CASSIOPEIA Site template"
diff --git a/language/en-GB/tpl_moko-cassiopeia.sys.ini b/language/en-GB/tpl_moko-cassiopeia.sys.ini
index ea2a9df..809fb14 100644
--- a/language/en-GB/tpl_moko-cassiopeia.sys.ini
+++ b/language/en-GB/tpl_moko-cassiopeia.sys.ini
@@ -1,13 +1,30 @@
-;---------------------------------------------------
-; Template: moko-cassiopeia
-; File: en-GB.tpl_moko-cassiopeia.sys.ini
-; Version: 02.00
-; Author: Jonathan Miller
-; Copyright: (C) 2025 Moko Consulting. All rights reserved.
-; License: GNU General Public License v3 or later; see LICENSE.txt
-; Description: Language strings for the frontend template.
-; Note: All ini files must be saved as UTF-8 without BOM.
-;---------------------------------------------------
+# =========================================================================
+# Copyright (C) 2025 Moko Consulting
+#
+# This file is part of a Moko Consulting project.
+#
+# SPDX-License-Identifier: GPL-3.0-or-later
+#
+# This program is free software; you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation; either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program. If not, see https://www.gnu.org/licenses/ .
+# =========================================================================
+# FILE INFORMATION
+# DEFGROUP: Joomla
+# INGROUP: Moko-Cassiopeia
+# PATH: language/en-GB/tpl_moko-cassiopeia.sys.ini
+# VERSION: 02.00
+# BRIEF: English (GB) system language strings for template metadata and installer
+# =========================================================================
TPL_MOKO-CASSIOPEIA="Moko-Cassiopeia Site template"
TPL_MOKO-CASSIOPEIA_MOD_MENU_LAYOUT_COLLAPSE-METISMENU="Collapsible Dropdown"
@@ -30,11 +47,12 @@ TPL_MOKO-CASSIOPEIA_POSITION_TOP-B="Top-b"
TPL_MOKO-CASSIOPEIA_POSITION_TOPBAR="Top Bar"
TPL_MOKO-CASSIOPEIA_POSITION_DRAWER-LEFT="Drawer-Left"
TPL_MOKO-CASSIOPEIA_POSITION_DRAWER-RIGHT="Drawer-Right"
-TPL_MOKO-CASSIOPEIA_XML_DESCRIPTION="
- MOKO-CASSIOPEIA continues Joomla’s tradition of space-themed default templates—
- building on the legacy of Solarflare from Joomla 1.0, Milkyway from Joomla 1.5,
- and Protostar from Joomla 3.0.
+ MOKO-CASSIOPEIA 2.0 continues Joomla’s tradition of space-themed default templates—
+ building on the legacy of Solarflare (Joomla 1.0), Milkyway (Joomla 1.5),
+ and Protostar (Joomla 3.0).
This template is a customized fork of the Cassiopeia template introduced in Joomla 4,
@@ -42,41 +60,40 @@ TPL_MOKO-CASSIOPEIA_XML_DESCRIPTION="
MOKO-CASSIOPEIA Template Description
- MOKO-CASSIOPEIA is designed to serve as a versatile, production-ready base for
- contemporary Joomla websites, emphasizing speed, clarity, and open-source philosophy.
+ Version 2.0 introduces significant new functionality including a Dark Mode toggle,
+ Google Tag Manager (GTM) and Google Analytics 4 (GA4) hooks, and expanded template configuration
+ options — all while keeping overrides minimal and upgrade-friendly.
Features
Fully responsive and mobile-first layout
Based on Joomla 4+ template architecture
-
Enhanced SCSS and CSS overrides for custom styling
-
Built-in support for Bootstrap 5
-
- Integrated dynamic Table of Contents via
- Bootstrap TOC
-
+
Enhanced SCSS and CSS overrides for streamlined custom styling
+
Built-in support for Bootstrap 5
+
Font Awesome 6 integration for modern iconography
+
Automatic Table of Contents (TOC) — selectable per article via toc-left or toc-right layouts
+
Dark Mode toggle (new in v2.0) with user switch and admin override
+
Optional GTM + GA4 hooks (new in v2.0) for analytics and marketing integration
Optimized template structure for performance and maintainability
Custom module positions and layout presets
-
Accessible, lightweight, and extensible
+
Accessible, lightweight, and extensible for long-term use
Ideal for professional services, portfolios, and informational websites
Code Attribution
This template is based on the original Cassiopeia template developed by the
- Joomla! Project and released under the GNU General Public License.
+ Joomla! Project and released under the GNU General Public License.
Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards.
-
a
+
It includes integration with
- Bootstrap TOC,
+ Bootstrap TOC,
an open-source table of contents generator by A. Feld, licensed under the MIT License.
All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable.
"
-
-JGLOBAL_OFFLINE="Offline"
diff --git a/language/en-US/tpl_moko-cassiopeia.ini b/language/en-US/tpl_moko-cassiopeia.ini
index a9662f2..f183188 100644
--- a/language/en-US/tpl_moko-cassiopeia.ini
+++ b/language/en-US/tpl_moko-cassiopeia.ini
@@ -1,13 +1,30 @@
-;---------------------------------------------------
-; Template: moko-cassiopeia
-; File: en-GB.tpl_moko-cassiopeia.ini
-; Version: 02.00
-; Author: Jonathan Miller
-; Copyright: (C) 2025 Moko Consulting. All rights reserved.
-; License: GNU General Public License v3 or later; see LICENSE.txt
-; Description: Language strings for the frontend template.
-; Note: All ini files must be saved as UTF-8 without BOM.
-;---------------------------------------------------
+# =========================================================================
+# Copyright (C) 2025 Moko Consulting
+#
+# This file is part of a Moko Consulting project.
+#
+# SPDX-License-Identifier: GPL-3.0-or-later
+#
+# This program is free software; you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation; either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program. If not, see https://www.gnu.org/licenses/ .
+# =========================================================================
+# FILE INFORMATION
+# DEFGROUP: Joomla
+# INGROUP: Moko-Cassiopeia
+# PATH: language/en-US/tpl_moko-cassiopeia.ini
+# VERSION: 02.00
+# BRIEF: English (US) language strings for the Moko-Cassiopeia Joomla template
+# =========================================================================
; ===== Template meta =====
MOKO-CASSIOPEIA="MOKO-CASSIOPEIA Site template"
diff --git a/language/en-US/tpl_moko-cassiopeia.sys.ini b/language/en-US/tpl_moko-cassiopeia.sys.ini
index 3c3a2e5..774ca82 100644
--- a/language/en-US/tpl_moko-cassiopeia.sys.ini
+++ b/language/en-US/tpl_moko-cassiopeia.sys.ini
@@ -1,13 +1,30 @@
-;---------------------------------------------------
-; Template: moko-cassiopeia
-; File: en-US.tpl_moko-cassiopeia.sys.ini
-; Version: 02.00
-; Author: Jonathan Miller
-; Copyright: (C) 2025 Moko Consulting. All rights reserved.
-; License: GNU General Public License v3 or later; see LICENSE.txt
-; Description: Language strings for the frontend template.
-; Note: All ini files must be saved as UTF-8 without BOM.
-;---------------------------------------------------
+# =========================================================================
+# Copyright (C) 2025 Moko Consulting
+#
+# This file is part of a Moko Consulting project.
+#
+# SPDX-License-Identifier: GPL-3.0-or-later
+#
+# This program is free software; you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation; either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program. If not, see https://www.gnu.org/licenses/ .
+# =========================================================================
+# FILE INFORMATION
+# DEFGROUP: Joomla
+# INGROUP: Moko-Cassiopeia
+# PATH: language/en-US/tpl_moko-cassiopeia.sys.ini
+# VERSION: 02.00
+# BRIEF: English (US) system language strings for template metadata and installer
+# =========================================================================
TPL_MOKO-CASSIOPEIA="Moko-Cassiopeia Site template"
TPL_MOKO-CASSIOPEIA_MOD_MENU_LAYOUT_COLLAPSE-METISMENU="Collapsible Dropdown"
@@ -31,11 +48,11 @@ TPL_MOKO-CASSIOPEIA_POSITION_TOPBAR="Top Bar"
TPL_MOKO-CASSIOPEIA_POSITION_DRAWER-LEFT="Drawer-Left"
TPL_MOKO-CASSIOPEIA_POSITION_DRAWER-RIGHT="Drawer-Right"
TPL_MOKO-CASSIOPEIA_XML_DESCRIPTION=
-TPL_MOKO-CASSIOPEIA_XML_DESCRIPTION="
MOKO-CASSIOPEIA Template Description
+TPL_MOKO-CASSIOPEIA_XML_DESCRIPTION="
MOKO-CASSIOPEIA Template Description (v2.0)
- MOKO-CASSIOPEIA continues Joomla’s tradition of space-themed default templates—
- building on the legacy of Solarflare from Joomla 1.0, Milkyway from Joomla 1.5,
- and Protostar from Joomla 3.0.
+ MOKO-CASSIOPEIA 2.0 continues Joomla’s tradition of space-themed default templates—
+ building on the legacy of Solarflare (Joomla 1.0), Milkyway (Joomla 1.5),
+ and Protostar (Joomla 3.0).
This template is a customized fork of the Cassiopeia template introduced in Joomla 4,
@@ -43,41 +60,40 @@ TPL_MOKO-CASSIOPEIA_XML_DESCRIPTION="
MOKO-CASSIOPEIA Template Description
- MOKO-CASSIOPEIA is designed to serve as a versatile, production-ready base for
- contemporary Joomla websites, emphasizing speed, clarity, and open-source philosophy.
+ Version 2.0 introduces significant new functionality including a Dark Mode toggle,
+ Google Tag Manager (GTM) and Google Analytics 4 (GA4) hooks, and expanded template configuration
+ options — all while keeping overrides minimal and upgrade-friendly.
Features
Fully responsive and mobile-first layout
Based on Joomla 4+ template architecture
-
Enhanced SCSS and CSS overrides for custom styling
-
Built-in support for Bootstrap 5
-
- Integrated dynamic Table of Contents via
- Bootstrap TOC
-
+
Enhanced SCSS and CSS overrides for streamlined custom styling
+
Built-in support for Bootstrap 5
+
Font Awesome 6 integration for modern iconography
+
Automatic Table of Contents (TOC) — selectable per article via toc-left or toc-right layouts
+
Dark Mode toggle (new in v2.0) with user switch and admin override
+
Optional GTM + GA4 hooks (new in v2.0) for analytics and marketing integration
Optimized template structure for performance and maintainability
Custom module positions and layout presets
-
Accessible, lightweight, and extensible
+
Accessible, lightweight, and extensible for long-term use
Ideal for professional services, portfolios, and informational websites
Code Attribution
This template is based on the original Cassiopeia template developed by the
- Joomla! Project and released under the GNU General Public License.
+ Joomla! Project and released under the GNU General Public License.
Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards.
-
a
+
It includes integration with
- Bootstrap TOC,
+ Bootstrap TOC,
an open-source table of contents generator by A. Feld, licensed under the MIT License.
All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable.
Redirecting to the site root… If you are not redirected, click here.
-
-
diff --git a/media/templates/site/moko-cassiopeia/css/global/colors/dark/colors_alternative.css b/media/templates/site/moko-cassiopeia/css/global/dark/colors_alternative.css
similarity index 88%
rename from media/templates/site/moko-cassiopeia/css/global/colors/dark/colors_alternative.css
rename to media/templates/site/moko-cassiopeia/css/global/dark/colors_alternative.css
index c7d0121..5130cea 100644
--- a/media/templates/site/moko-cassiopeia/css/global/colors/dark/colors_alternative.css
+++ b/media/templates/site/moko-cassiopeia/css/global/dark/colors_alternative.css
@@ -1,14 +1,31 @@
-/*!
- * @package Joomla.Site
- * @subpackage Templates.moko-cassiopeia
- * @file /media/templates/sote/moko-cassiopeia/css/global/dark/colors_alternative.css
+@charset "UTF-8";
+/* =========================================================================
+ * Copyright (C) 2025 Moko Consulting
*
- * @copyright 2025 Moko Consulting
- * @license GNU General Public License version 2 or later; see LICENSE.txt
+ * This file is part of a Moko Consulting project.
*
- * Website: https://mokoconsulting.tech
- * Email: hello@mokoconsulting.tech
- * Phone: +1 (931) 279-6313
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/ .
+ * =========================================================================
+ * FILE INFORMATION
+ * DEFGROUP: Joomla
+ * INGROUP: Moko-Cassiopeia
+ * PATH: media/templates/site/moko-cassiopeia/css/global/dark/colors_alternative.css
+ * VERSION: 02.00
+ * BRIEF: Alternative dark mode color definitions for Moko-Cassiopeia template
+ * =========================================================================
*/
/* -----------------------------------------------
diff --git a/media/templates/site/moko-cassiopeia/css/global/colors/dark/colors_standard.css b/media/templates/site/moko-cassiopeia/css/global/dark/colors_standard.css
similarity index 88%
rename from media/templates/site/moko-cassiopeia/css/global/colors/dark/colors_standard.css
rename to media/templates/site/moko-cassiopeia/css/global/dark/colors_standard.css
index 8a2ebd9..9da4f20 100644
--- a/media/templates/site/moko-cassiopeia/css/global/colors/dark/colors_standard.css
+++ b/media/templates/site/moko-cassiopeia/css/global/dark/colors_standard.css
@@ -1,14 +1,31 @@
-/*!
- * @package Joomla.Site
- * @subpackage Templates.moko-cassiopeia
- * @file /media/templates/sote/moko-cassiopeia/css/global/dark/colors_standard.css
+@charset "UTF-8";
+/* =========================================================================
+ * Copyright (C) 2025 Moko Consulting
*
- * @copyright 2025 Moko Consulting
- * @license GNU General Public License version 2 or later; see LICENSE.txt
+ * This file is part of a Moko Consulting project.
*
- * Website: https://mokoconsulting.tech
- * Email: hello@mokoconsulting.tech
- * Phone: +1 (931) 279-6313
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/ .
+ * =========================================================================
+ * FILE INFORMATION
+ * DEFGROUP: Joomla
+ * INGROUP: Moko-Cassiopeia
+ * PATH: media/templates/site/moko-cassiopeia/css/global/dark/colors_standard.css
+ * VERSION: 02.00
+ * BRIEF: Standard dark mode color definitions for Moko-Cassiopeia template
+ * =========================================================================
*/
/* -----------------------------------------------
diff --git a/media/templates/site/moko-cassiopeia/css/global/colors/dark/index.html b/media/templates/site/moko-cassiopeia/css/global/dark/index.html
similarity index 100%
rename from media/templates/site/moko-cassiopeia/css/global/colors/dark/index.html
rename to media/templates/site/moko-cassiopeia/css/global/dark/index.html
diff --git a/media/templates/site/moko-cassiopeia/css/global/fonts-local_roboto.css b/media/templates/site/moko-cassiopeia/css/global/fonts-local_roboto.css
index 795e022..d38af2d 100644
--- a/media/templates/site/moko-cassiopeia/css/global/fonts-local_roboto.css
+++ b/media/templates/site/moko-cassiopeia/css/global/fonts-local_roboto.css
@@ -1,126 +1,156 @@
+@charset "UTF-8";
+/* =========================================================================
+ * Copyright (C) 2025 Moko Consulting
+ *
+ * This file is part of a Moko Consulting project.
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/ .
+ * =========================================================================
+ * FILE INFORMATION
+ * DEFGROUP: Joomla
+ * INGROUP: Moko-Cassiopeia
+ * PATH: media/templates/site/moko-cassiopeia/css/global/fonts-local_roboto.css
+ * VERSION: 02.00
+ * BRIEF: Local Roboto font-face definitions for the Moko-Cassiopeia template
+ * =========================================================================
+ */
+
@font-face {
- font-family: "Roboto";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff") format("woff");
- font-weight: 400;
- font-style: normal;
+ font-family: "Roboto";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff") format("woff");
+ font-weight: 400;
+ font-style: normal;
}
@font-face {
- font-family: "Roboto-Regular";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff") format("woff");
+ font-family: "Roboto-Regular";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff") format("woff");
}
@font-face {
- font-family: "Roboto";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff") format("woff");
- font-weight: 400;
- font-style: italic;
+ font-family: "Roboto";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff") format("woff");
+ font-weight: 400;
+ font-style: italic;
}
@font-face {
- font-family: "Roboto-RegularItalic";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff") format("woff");
+ font-family: "Roboto-RegularItalic";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff") format("woff");
}
@font-face {
- font-family: "Roboto";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff") format("woff");
- font-weight: 300;
- font-style: normal;
+ font-family: "Roboto";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff") format("woff");
+ font-weight: 300;
+ font-style: normal;
}
@font-face {
- font-family: "Roboto-Light";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff") format("woff");
+ font-family: "Roboto-Light";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff") format("woff");
}
@font-face {
- font-family: "Roboto";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff") format("woff");
- font-weight: 300;
- font-style: italic;
+ font-family: "Roboto";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff") format("woff");
+ font-weight: 300;
+ font-style: italic;
}
@font-face {
- font-family: "Roboto-LightItalic";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff") format("woff");
+ font-family: "Roboto-LightItalic";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff") format("woff");
}
@font-face {
- font-family: "Roboto";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff") format("woff");
- font-weight: 100;
- font-style: normal;
+ font-family: "Roboto";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff") format("woff");
+ font-weight: 100;
+ font-style: normal;
}
@font-face {
- font-family: "Roboto-Thin";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff") format("woff");
+ font-family: "Roboto-Thin";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff") format("woff");
}
@font-face {
- font-family: "Roboto";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff") format("woff");
- font-weight: 100;
- font-style: italic;
+ font-family: "Roboto";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff") format("woff");
+ font-weight: 100;
+ font-style: italic;
}
@font-face {
- font-family: "Roboto-ThinItalic";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff") format("woff");
+ font-family: "Roboto-ThinItalic";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff") format("woff");
}
@font-face {
- font-family: "Roboto";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff") format("woff");
- font-weight: 500;
- font-style: normal;
+ font-family: "Roboto";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff") format("woff");
+ font-weight: 500;
+ font-style: normal;
}
@font-face {
- font-family: "Roboto-Medium";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff") format("woff");
+ font-family: "Roboto-Medium";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff") format("woff");
}
@font-face {
- font-family: "Roboto";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff") format("woff");
- font-weight: 500;
- font-style: italic;
+ font-family: "Roboto";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff") format("woff");
+ font-weight: 500;
+ font-style: italic;
}
@font-face {
- font-family: "Roboto-MediumItalic";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff") format("woff");
+ font-family: "Roboto-MediumItalic";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff") format("woff");
}
@font-face {
- font-family: "Roboto";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff") format("woff");
- font-weight: 700;
- font-style: normal;
+ font-family: "Roboto";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff") format("woff");
+ font-weight: 700;
+ font-style: normal;
}
@font-face {
- font-family: "Roboto-Bold";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff") format("woff");
+ font-family: "Roboto-Bold";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff") format("woff");
}
@font-face {
- font-family: "Roboto";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff") format("woff");
- font-weight: 700;
- font-style: italic;
+ font-family: "Roboto";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff") format("woff");
+ font-weight: 700;
+ font-style: italic;
}
@font-face {
- font-family: "Roboto-BoldItalic";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff") format("woff");
+ font-family: "Roboto-BoldItalic";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff") format("woff");
}
@font-face {
- font-family: "Roboto";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff") format("woff");
- font-weight: 900;
- font-style: normal;
+ font-family: "Roboto";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff") format("woff");
+ font-weight: 900;
+ font-style: normal;
}
@font-face {
- font-family: "Roboto-Black";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff") format("woff");
+ font-family: "Roboto-Black";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff") format("woff");
}
@font-face {
- font-family: "Roboto";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff") format("woff");
- font-weight: 900;
- font-style: italic;
+ font-family: "Roboto";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff") format("woff");
+ font-weight: 900;
+ font-style: italic;
}
@font-face {
- font-family: "Roboto-BlackItalic";
- src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff") format("woff");
+ font-family: "Roboto-BlackItalic";
+ src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff") format("woff");
}
:root {
- --font-family-body: "Roboto", sans-serif;
- --font-family-headings: "Roboto", sans-serif;
- --font-weight-headings: 700;
- --font-weight-normal: 400;
-}
\ No newline at end of file
+ --font-family-body: "Roboto", sans-serif;
+ --font-family-headings: "Roboto", sans-serif;
+ --font-weight-headings: 700;
+ --font-weight-normal: 400;
+}
diff --git a/media/templates/site/moko-cassiopeia/css/global/colors/light/colors_alternative.css b/media/templates/site/moko-cassiopeia/css/global/light/colors_alternative.css
similarity index 93%
rename from media/templates/site/moko-cassiopeia/css/global/colors/light/colors_alternative.css
rename to media/templates/site/moko-cassiopeia/css/global/light/colors_alternative.css
index 79f199a..1668018 100644
--- a/media/templates/site/moko-cassiopeia/css/global/colors/light/colors_alternative.css
+++ b/media/templates/site/moko-cassiopeia/css/global/light/colors_alternative.css
@@ -1,14 +1,31 @@
-/*!
- * @package Joomla.Site
- * @subpackage Templates.moko-cassiopeia
- * @file /media/templates/sote/moko-cassiopeia/css/global/light/colors_alternative.css
+@charset "UTF-8";
+/* =========================================================================
+ * Copyright (C) 2025 Moko Consulting
*
- * @copyright 2025 Moko Consulting
- * @license GNU General Public License version 2 or later; see LICENSE.txt
+ * This file is part of a Moko Consulting project.
*
- * Website: https://mokoconsulting.tech
- * Email: hello@mokoconsulting.tech
- * Phone: +1 (931) 279-6313
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/ .
+ * =========================================================================
+ * FILE INFORMATION
+ * DEFGROUP: Joomla
+ * INGROUP: Moko-Cassiopeia
+ * PATH: media/templates/site/moko-cassiopeia/css/global/light/colors_alternative.css
+ * VERSION: 02.00
+ * BRIEF: Alternative light mode color definitions for Moko-Cassiopeia template
+ * =========================================================================
*/
/* -----------------------------------------------
diff --git a/media/templates/site/moko-cassiopeia/css/global/colors/light/colors_standard.css b/media/templates/site/moko-cassiopeia/css/global/light/colors_standard.css
similarity index 93%
rename from media/templates/site/moko-cassiopeia/css/global/colors/light/colors_standard.css
rename to media/templates/site/moko-cassiopeia/css/global/light/colors_standard.css
index f6a3065..a2de92d 100644
--- a/media/templates/site/moko-cassiopeia/css/global/colors/light/colors_standard.css
+++ b/media/templates/site/moko-cassiopeia/css/global/light/colors_standard.css
@@ -1,14 +1,31 @@
-/*!
- * @package Joomla.Site
- * @subpackage Templates.moko-cassiopeia
- * @file /media/templates/sote/moko-cassiopeia/css/global/light/colors_standard.css
+@charset "UTF-8";
+/* =========================================================================
+ * Copyright (C) 2025 Moko Consulting
*
- * @copyright 2025 Moko Consulting
- * @license GNU General Public License version 2 or later; see LICENSE.txt
+ * This file is part of a Moko Consulting project.
*
- * Website: https://mokoconsulting.tech
- * Email: hello@mokoconsulting.tech
- * Phone: +1 (931) 279-6313
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/ .
+ * =========================================================================
+ * FILE INFORMATION
+ * DEFGROUP: Joomla
+ * INGROUP: Moko-Cassiopeia
+ * PATH: media/templates/site/moko-cassiopeia/css/global/light/colors_standard.css
+ * VERSION: 02.00
+ * BRIEF: Standard light mode color definitions for Moko-Cassiopeia template
+ * =========================================================================
*/
/* -----------------------------------------------
diff --git a/media/templates/site/moko-cassiopeia/css/global/colors/index.html b/media/templates/site/moko-cassiopeia/css/global/light/index.html
similarity index 100%
rename from media/templates/site/moko-cassiopeia/css/global/colors/index.html
rename to media/templates/site/moko-cassiopeia/css/global/light/index.html
diff --git a/media/templates/site/moko-cassiopeia/css/global/social-media-demo.css b/media/templates/site/moko-cassiopeia/css/global/social-media-demo.css
index e42553c..4afedf8 100644
--- a/media/templates/site/moko-cassiopeia/css/global/social-media-demo.css
+++ b/media/templates/site/moko-cassiopeia/css/global/social-media-demo.css
@@ -1,16 +1,33 @@
-/*!
- * @package Joomla.Site
- * @subpackage Templates.moko-cassiopeia
- * @file /media/templates/sote/moko-cassiopeia/css/global/csocial-media-demos.css
+@charset "UTF-8";
+/* =========================================================================
+ * Copyright (C) 2025 Moko Consulting
*
- * @copyright 2025 Moko Consulting
- * @license GNU General Public License version 2 or later; see LICENSE.txt
+ * This file is part of a Moko Consulting project.
*
- * Website: https://mokoconsulting.tech
- * Email: hello@mokoconsulting.tech
- * Phone: +1 (931) 279-6313
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/ .
+ * =========================================================================
+ * FILE INFORMATION
+ * DEFGROUP: Joomla
+ * INGROUP: Moko-Cassiopeia
+ * PATH: media/templates/site/moko-cassiopeia/css/global/social-media-demo.css
+ * VERSION: 02.00
+ * BRIEF: Demo styles for showcasing social media elements in Moko-Cassiopeia template
+ * =========================================================================
*/
- *
+
/*
======================================================================
Social Media Demo — FULL CSS (Joomla-safe, fully scoped)
@@ -19,10 +36,10 @@ Usage: Wrap your article markup in
...
Version: 2.0 (2025-08-23)
How it’s organized:
- 1) Container-level CSS variables (IMAGES ONLY). Colors are hard-coded per brand below.
- 2) Base/layout styles (sections, header shell, placeholders, buttons).
- 3) Platform brand colors (hard-coded) and cover height tweaks.
- 4) Image assignments (map classes like .fb-cover → variable --fb-cover-img).
+ 1) Container-level CSS variables (IMAGES ONLY). Colors are hard-coded per brand below.
+ 2) Base/layout styles (sections, header shell, placeholders, buttons).
+ 3) Platform brand colors (hard-coded) and cover height tweaks.
+ 4) Image assignments (map classes like .fb-cover → variable --fb-cover-img).
INSTRUCTIONS:
- Save the images in their requried sizes into the [SITEROOT]/images/social/ folder with the exact names.
@@ -32,77 +49,77 @@ INSTRUCTIONS:
REQUIRED IMAGE SIZES — Social Media Demo Wireframes
Facebook
- --fb-cover-img → Cover: 820×312 (desktop), 640×360 (mobile safe)
- --fb-avatar-img → Profile: 176×176 (shown as circle, but use square image)
+ --fb-cover-img → Cover: 820×312 (desktop), 640×360 (mobile safe)
+ --fb-avatar-img → Profile: 176×176 (shown as circle, but use square image)
Twitter / X
- --x-cover-img → Header: 1500×500
- --x-avatar-img → Profile: up to 400×400 (shown as circle, but use square image)
+ --x-cover-img → Header: 1500×500
+ --x-avatar-img → Profile: up to 400×400 (shown as circle, but use square image)
LinkedIn Company
- --li-cover-img → Banner: ~1128×191
- --li-logo-img → Logo: up to 300×300 (rounded square)
+ --li-cover-img → Banner: ~1128×191
+ --li-logo-img → Logo: up to 300×300 (rounded square)
Google Business Profile
- --gmb-cover-img → Banner: ~960×200 (mobile ~960×140)
- --gmb-logo-img → Logo: up to 300×300 (shown as circle, but use square image)
+ --gmb-cover-img → Banner: ~960×200 (mobile ~960×140)
+ --gmb-logo-img → Logo: up to 300×300 (shown as circle, but use square image)
Instagram Business
- --ig-cover-img → Not always visible, safe 1080×608 for highlight background
- --ig-avatar-img → Profile: 320×320 (shown as circle, but use square image)
+ --ig-cover-img → Not always visible, safe 1080×608 for highlight background
+ --ig-avatar-img → Profile: 320×320 (shown as circle, but use square image)
YouTube Channel
- --yt-cover-img → Channel art: 2560×1440 (safe area ~1546×423 center)
- --yt-avatar-img → Channel icon: 800×800 (shown as circle, but use square image)
+ --yt-cover-img → Channel art: 2560×1440 (safe area ~1546×423 center)
+ --yt-avatar-img → Channel icon: 800×800 (shown as circle, but use square image)
TikTok Business
- --tt-cover-img → Profile header: ~900×500 (safe area ~720×405)
- --tt-avatar-img → Profile: 200×200 (shown as circle, but use square image)
+ --tt-cover-img → Profile header: ~900×500 (safe area ~720×405)
+ --tt-avatar-img → Profile: 200×200 (shown as circle, but use square image)
Pinterest Business
- --pin-cover-img → Board/brand banner: ~800×450
- --pin-avatar-img → Profile: 165×165 (shown as circle, but use square image)
+ --pin-cover-img → Board/brand banner: ~800×450
+ --pin-avatar-img → Profile: 165×165 (shown as circle, but use square image)
Snapchat Public Profile
- --sc-cover-img → Banner: ~1080×1920 (stories/poster)
- --sc-avatar-img → Bitmoji/Profile: 320×320 (shown as circle, but use square image)
+ --sc-cover-img → Banner: ~1080×1920 (stories/poster)
+ --sc-avatar-img → Bitmoji/Profile: 320×320 (shown as circle, but use square image)
Reddit Community
- --rd-cover-img → Banner: 1920×384
- --rd-avatar-img → Community icon: 256×256 (shown as circle, but use square image)
+ --rd-cover-img → Banner: 1920×384
+ --rd-avatar-img → Community icon: 256×256 (shown as circle, but use square image)
====================================================================== */
/* Container variables — IMAGES ONLY (safe-scoped) */
.social-media-demo {
- --fb-cover-img: url('../../../../../image/social/fb-cover.jpg');
- --fb-avatar-img: url('../../../../../image/social/fb-avatar.jpg');
+ --fb-cover-img: url('../../../../../image/social/fb-cover.jpg');
+ --fb-avatar-img: url('../../../../../image/social/fb-avatar.jpg');
- --x-cover-img: url('../../../../../image/social/x-cover.jpg');
- --x-avatar-img: url('../../../../../image/social/x-avatar.jpg');
+ --x-cover-img: url('../../../../../image/social/x-cover.jpg');
+ --x-avatar-img: url('../../../../../image/social/x-avatar.jpg');
- --li-cover-img: url('../../../../../image/social/li-cover.jpg');
- --li-logo-img: url('../../../../../image/social/li-logo.jpg');
+ --li-cover-img: url('../../../../../image/social/li-cover.jpg');
+ --li-logo-img: url('../../../../../image/social/li-logo.jpg');
- --gmb-cover-img: url('../../../../../image/social/gmb-cover.jpg');
- --gmb-logo-img: url('../../../../../image/social/gmb-logo.jpg');
+ --gmb-cover-img: url('../../../../../image/social/gmb-cover.jpg');
+ --gmb-logo-img: url('../../../../../image/social/gmb-logo.jpg');
- --ig-cover-img: url('../../../../../image/social/ig-cover.jpg');
- --ig-avatar-img: url('../../../../../image/social/ig-avatar.jpg');
+ --ig-cover-img: url('../../../../../image/social/ig-cover.jpg');
+ --ig-avatar-img: url('../../../../../image/social/ig-avatar.jpg');
- --yt-cover-img: url('../../../../../image/social/yt-cover.jpg');
- --yt-avatar-img: url('../../../../../image/social/yt-avatar.jpg');
+ --yt-cover-img: url('../../../../../image/social/yt-cover.jpg');
+ --yt-avatar-img: url('../../../../../image/social/yt-avatar.jpg');
- --tt-cover-img: url('../../../../../image/social/tt-cover.jpg');
- --tt-avatar-img: url('../../../../../image/social/tt-avatar.jpg');
+ --tt-cover-img: url('../../../../../image/social/tt-cover.jpg');
+ --tt-avatar-img: url('../../../../../image/social/tt-avatar.jpg');
- --pin-cover-img: url('../../../../../image/social/pin-cover.jpg');
- --pin-avatar-img: url('../../../../../image/social/pin-avatar.jpg');
+ --pin-cover-img: url('../../../../../image/social/pin-cover.jpg');
+ --pin-avatar-img: url('../../../../../image/social/pin-avatar.jpg');
- --sc-cover-img: url('../../../../../image/social/sc-cover.jpg');
- --sc-avatar-img: url('../../../../../image/social/sc-avatar.jpg');
+ --sc-cover-img: url('../../../../../image/social/sc-cover.jpg');
+ --sc-avatar-img: url('../../../../../image/social/sc-avatar.jpg');
- --rd-cover-img: url('../../../../../image/social/rd-cover.jpg');
- --rd-avatar-img: url('../../../../../image/social/rd-avatar.jpg');
+ --rd-cover-img: url('../../../../../image/social/rd-cover.jpg');
+ --rd-avatar-img: url('../../../../../image/social/rd-avatar.jpg');
}
/* DO NOT TOUCH */
diff --git a/media/templates/site/moko-cassiopeia/css/system/searchtools/searchtools.css b/media/templates/site/moko-cassiopeia/css/system/searchtools/searchtools.css
index e203db0..b494b00 100644
--- a/media/templates/site/moko-cassiopeia/css/system/searchtools/searchtools.css
+++ b/media/templates/site/moko-cassiopeia/css/system/searchtools/searchtools.css
@@ -1,49 +1,79 @@
+@charset "UTF-8";
+/* =========================================================================
+ * Copyright (C) 2025 Moko Consulting
+ *
+ * This file is part of a Moko Consulting project.
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/ .
+ * =========================================================================
+ * FILE INFORMATION
+ * DEFGROUP: Joomla
+ * INGROUP: Moko-Cassiopeia
+ * PATH: media/templates/site/moko-cassiopeia/css/system/searchtools/searchtools.css
+ * VERSION: 02.00
+ * BRIEF: Stylesheet for Joomla search tools integration in Moko-Cassiopeia template
+ * =========================================================================
+ */
+
.js-stools-container-bar {
- padding: 10px 20px;
+ padding: 10px 20px;
}
.js-stools-container-bar .btn-toolbar {
- -webkit-box-pack: end;
- -ms-flex-pack: end;
- justify-content: flex-end;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
}
.js-stools-container-bar .btn-toolbar > * {
- margin: 4px 0;
- -webkit-margin-end: 8px;
- margin-inline-end: 8px;
+ margin: 4px 0;
+ -webkit-margin-end: 8px;
+ margin-inline-end: 8px;
}
.js-stools-container-bar .btn-toolbar .js-stools-btn-clear {
- background-color: hsl(207, 49%, 37%);
- border: 0;
+ background-color: hsl(207, 49%, 37%);
+ border: 0;
}
.js-stools-container-bar .ordering-select {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
}
.js-stools-container-filters {
- display: none;
- padding: 0 20px;
- margin-bottom: 20px;
+ display: none;
+ padding: 0 20px;
+ margin-bottom: 20px;
}
.js-stools-container-filters-visible {
- display: grid;
- grid-gap: 8px;
- grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
- padding: 10px;
- background-color: hsl(0, 0%, 100%);
+ display: grid;
+ grid-gap: 8px;
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+ padding: 10px;
+ background-color: hsl(0, 0%, 100%);
}
.js-stools-container-filters > * {
- margin: 4px 0;
- -webkit-margin-end: 8px;
- margin-inline-end: 8px;
+ margin: 4px 0;
+ -webkit-margin-end: 8px;
+ margin-inline-end: 8px;
}
.js-stools-field-list + .js-stools-field-list {
- -webkit-margin-start: 8px;
- margin-inline-start: 8px;
+ -webkit-margin-start: 8px;
+ margin-inline-start: 8px;
}
.js-stools-field-selector .form-select {
- width: auto;
-}
\ No newline at end of file
+ width: auto;
+}
diff --git a/media/templates/site/moko-cassiopeia/css/template-rtl.css b/media/templates/site/moko-cassiopeia/css/template-rtl.css
index f9a3955..bee0293 100644
--- a/media/templates/site/moko-cassiopeia/css/template-rtl.css
+++ b/media/templates/site/moko-cassiopeia/css/template-rtl.css
@@ -1,15 +1,31 @@
@charset "UTF-8";
-/*!
- * @package Joomla.Site
- * @subpackage Templates.moko-cassiopeia
- * @file /media/templates/sote/moko-cassiopeia/css/template-rtl.css
+/* =========================================================================
+ * Copyright (C) 2025 Moko Consulting
*
- * @copyright 2025 Moko Consulting
- * @license GNU General Public License version 2 or later; see LICENSE.txt
+ * This file is part of a Moko Consulting project.
*
- * Website: https://mokoconsulting.tech
- * Email: hello@mokoconsulting.tech
- * Phone: +1 (931) 279-6313
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/ .
+ * =========================================================================
+ * FILE INFORMATION
+ * DEFGROUP: Joomla
+ * INGROUP: Moko-Cassiopeia
+ * PATH: media/templates/site/moko-cassiopeia/css/template-rtl.css
+ * VERSION: 02.00
+ * BRIEF: Right-to-left (RTL) layout stylesheet for Moko-Cassiopeia template
+ * =========================================================================
*/
/*!
@@ -20,7 +36,6 @@
* sensitive rules are mirrored here to keep file size reasonable.
*/
-
[dir="rtl"] .table-of-contents-ck-wrap {
width: 30%;
diff --git a/media/templates/site/moko-cassiopeia/css/template.css b/media/templates/site/moko-cassiopeia/css/template.css
index 530d204..1ffa263 100644
--- a/media/templates/site/moko-cassiopeia/css/template.css
+++ b/media/templates/site/moko-cassiopeia/css/template.css
@@ -1,15 +1,31 @@
@charset "UTF-8";
-/*!
- * @package Joomla.Site
- * @subpackage Templates.moko-cassiopeia
- * @file /media/templates/sote/moko-cassiopeia/css/template.css
+/* =========================================================================
+ * Copyright (C) 2025 Moko Consulting
*
- * @copyright 2025 Moko Consulting
- * @license GNU General Public License version 2 or later; see LICENSE.txt
+ * This file is part of a Moko Consulting project.
*
- * Website: https://mokoconsulting.tech
- * Email: hello@mokoconsulting.tech
- * Phone: +1 (931) 279-6313
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/ .
+ * =========================================================================
+ * FILE INFORMATION
+ * DEFGROUP: Joomla
+ * INGROUP: Moko-Cassiopeia
+ * PATH: media/templates/site/moko-cassiopeia/css/template.css
+ * VERSION: 02.00
+ * BRIEF: Main stylesheet providing layout, typography, and component styles for Moko-Cassiopeia
+ * =========================================================================
*/
*,
@@ -17206,5 +17222,41 @@ body.site.error-page {
text-decoration: none;
}
+ #mokoThemeFab .knob {
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ width: 20px;
+ height: 20px;
+ border-radius: var(--border-radius-xxl);
+ background: var(--bs-body-bg, #fff);
+ box-shadow: var(--box-shadow);
+ transition: transform .2s ease;
+}
+
+#mokoThemeFab [role="switch"][aria-checked="true"] .knob {
+ transform: translateX(20px);
+}
+
+#mokoThemeFab [role="switch"][aria-checked="true"] .switch {
+ background: rgba(var(--secondary-color), .15);
+}
+
+button#mokoThemeSwitch {
+ border: unset;
+ background-color: unset;
+}
+
+#mokoThemeFab .label {
+ user-select: none;
+ font-size: .875rem;
+}
+
+#mokoThemeFab.debug-outline {
+ outline: 2px dashed var(--pink);
+ outline-offset: 2px;
+}
+
+
/* SOCIAL MEDIA DEMOS */
@import url("global/social-media-demos.css");
diff --git a/media/templates/site/moko-cassiopeia/css/vendor/choicesjs/choices.css b/media/templates/site/moko-cassiopeia/css/vendor/choicesjs/choices.css
index 586806f..0fce1e4 100644
--- a/media/templates/site/moko-cassiopeia/css/vendor/choicesjs/choices.css
+++ b/media/templates/site/moko-cassiopeia/css/vendor/choicesjs/choices.css
@@ -1,499 +1,528 @@
@charset "UTF-8";
+/* =========================================================================
+ * Copyright (C) 2025 Moko Consulting
+ *
+ * This file is part of a Moko Consulting project.
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/ .
+ * =========================================================================
+ * FILE INFORMATION
+ * DEFGROUP: Joomla
+ * INGROUP: Moko-Cassiopeia
+ * PATH: media/templates/site/moko-cassiopeia/css/vendor/choicesjs/choices.css
+ * VERSION: 02.00
+ * BRIEF: Vendor stylesheet for Choices.js select and input enhancements in Moko-Cassiopeia
+ * =========================================================================
+ */
+
/* ===============================
= Choices =
=============================== */
.choices {
- position: relative;
- overflow: hidden;
- margin-bottom: 24px;
- font-size: 16px;
+ position: relative;
+ overflow: hidden;
+ margin-bottom: 24px;
+ font-size: 16px;
}
.choices:focus {
- outline: none;
+ outline: none;
}
.choices:last-child {
- margin-bottom: 0;
+ margin-bottom: 0;
}
.choices.is-open {
- overflow: initial;
+ overflow: initial;
}
.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
- background-color: #eaeaea;
- cursor: not-allowed;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ background-color: #eaeaea;
+ cursor: not-allowed;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
.choices.is-disabled .choices__item {
- cursor: not-allowed;
+ cursor: not-allowed;
}
.choices [hidden] {
- display: none !important;
+ display: none !important;
}
.choices[data-type*=select-one] {
- cursor: pointer;
+ cursor: pointer;
}
.choices[data-type*=select-one] .choices__inner {
- padding-bottom: 7.5px;
+ padding-bottom: 7.5px;
}
.choices[data-type*=select-one] .choices__input {
- display: block;
- width: 100%;
- padding: 10px;
- border-bottom: 1px solid #ddd;
- background-color: #fff;
- margin: 0;
+ display: block;
+ width: 100%;
+ padding: 10px;
+ border-bottom: 1px solid #ddd;
+ background-color: #fff;
+ margin: 0;
}
.choices[data-type*=select-one] .choices__button {
- background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
- padding: 0;
- background-size: 8px;
- position: absolute;
- top: 50%;
- right: 0;
- margin-top: -10px;
- margin-right: 25px;
- height: 20px;
- width: 20px;
- border-radius: 10em;
- opacity: 0.25;
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
+ padding: 0;
+ background-size: 8px;
+ position: absolute;
+ top: 50%;
+ right: 0;
+ margin-top: -10px;
+ margin-right: 25px;
+ height: 20px;
+ width: 20px;
+ border-radius: 10em;
+ opacity: 0.25;
}
.choices[data-type*=select-one] .choices__button:hover, .choices[data-type*=select-one] .choices__button:focus {
- opacity: 1;
+ opacity: 1;
}
.choices[data-type*=select-one] .choices__button:focus {
- -webkit-box-shadow: 0 0 0 2px #00bcd4;
- box-shadow: 0 0 0 2px #00bcd4;
+ -webkit-box-shadow: 0 0 0 2px #00bcd4;
+ box-shadow: 0 0 0 2px #00bcd4;
}
.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button {
- display: none;
+ display: none;
}
.choices[data-type*=select-one]::after {
- content: "";
- height: 0;
- width: 0;
- border-style: solid;
- border-color: #333 transparent transparent transparent;
- border-width: 5px;
- position: absolute;
- right: 11.5px;
- top: 50%;
- margin-top: -2.5px;
- pointer-events: none;
+ content: "";
+ height: 0;
+ width: 0;
+ border-style: solid;
+ border-color: #333 transparent transparent transparent;
+ border-width: 5px;
+ position: absolute;
+ right: 11.5px;
+ top: 50%;
+ margin-top: -2.5px;
+ pointer-events: none;
}
.choices[data-type*=select-one].is-open::after {
- border-color: transparent transparent #333 transparent;
- margin-top: -7.5px;
+ border-color: transparent transparent #333 transparent;
+ margin-top: -7.5px;
}
.choices[data-type*=select-one][dir=rtl]::after {
- left: 11.5px;
- right: auto;
+ left: 11.5px;
+ right: auto;
}
.choices[data-type*=select-one][dir=rtl] .choices__button {
- right: auto;
- left: 0;
- margin-left: 25px;
- margin-right: 0;
+ right: auto;
+ left: 0;
+ margin-left: 25px;
+ margin-right: 0;
}
.choices[data-type*=select-multiple] .choices__inner,
.choices[data-type*=text] .choices__inner {
- cursor: text;
+ cursor: text;
}
.choices[data-type*=select-multiple] .choices__button,
.choices[data-type*=text] .choices__button {
- position: relative;
- display: inline-block;
- margin-top: 0;
- margin-right: -4px;
- margin-bottom: 0;
- margin-left: 8px;
- padding-left: 16px;
- border-left: 1px solid #008fa1;
- background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
- background-size: 8px;
- width: 8px;
- line-height: 1;
- opacity: 0.75;
- border-radius: 0;
+ position: relative;
+ display: inline-block;
+ margin-top: 0;
+ margin-right: -4px;
+ margin-bottom: 0;
+ margin-left: 8px;
+ padding-left: 16px;
+ border-left: 1px solid #008fa1;
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
+ background-size: 8px;
+ width: 8px;
+ line-height: 1;
+ opacity: 0.75;
+ border-radius: 0;
}
.choices[data-type*=select-multiple] .choices__button:hover, .choices[data-type*=select-multiple] .choices__button:focus,
.choices[data-type*=text] .choices__button:hover,
.choices[data-type*=text] .choices__button:focus {
- opacity: 1;
+ opacity: 1;
}
.choices__inner {
- display: inline-block;
- vertical-align: top;
- width: 100%;
- background-color: #f9f9f9;
- padding: 7.5px 7.5px 3.75px;
- border: 1px solid #ddd;
- border-radius: 2.5px;
- font-size: 14px;
- min-height: 44px;
- overflow: hidden;
+ display: inline-block;
+ vertical-align: top;
+ width: 100%;
+ background-color: #f9f9f9;
+ padding: 7.5px 7.5px 3.75px;
+ border: 1px solid #ddd;
+ border-radius: 2.5px;
+ font-size: 14px;
+ min-height: 44px;
+ overflow: hidden;
}
.is-focused .choices__inner, .is-open .choices__inner {
- border-color: #b7b7b7;
+ border-color: #b7b7b7;
}
.is-open .choices__inner {
- border-radius: 2.5px 2.5px 0 0;
+ border-radius: 2.5px 2.5px 0 0;
}
.is-flipped.is-open .choices__inner {
- border-radius: 0 0 2.5px 2.5px;
+ border-radius: 0 0 2.5px 2.5px;
}
.choices__list {
- margin: 0;
- padding-left: 0;
- list-style: none;
+ margin: 0;
+ padding-left: 0;
+ list-style: none;
}
.choices__list--single {
- display: inline-block;
- padding: 4px 16px 4px 4px;
- width: 100%;
+ display: inline-block;
+ padding: 4px 16px 4px 4px;
+ width: 100%;
}
[dir=rtl] .choices__list--single {
- padding-right: 4px;
- padding-left: 16px;
+ padding-right: 4px;
+ padding-left: 16px;
}
.choices__list--single .choices__item {
- width: 100%;
+ width: 100%;
}
.choices__list--multiple {
- display: inline;
+ display: inline;
}
.choices__list--multiple .choices__item {
- display: inline-block;
- vertical-align: middle;
- border-radius: 20px;
- padding: 4px 10px;
- font-size: 12px;
- font-weight: 500;
- margin-right: 3.75px;
- margin-bottom: 3.75px;
- background-color: #00bcd4;
- border: 1px solid #00a5bb;
- color: #fff;
- word-break: break-all;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
+ display: inline-block;
+ vertical-align: middle;
+ border-radius: 20px;
+ padding: 4px 10px;
+ font-size: 12px;
+ font-weight: 500;
+ margin-right: 3.75px;
+ margin-bottom: 3.75px;
+ background-color: #00bcd4;
+ border: 1px solid #00a5bb;
+ color: #fff;
+ word-break: break-all;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
}
.choices__list--multiple .choices__item[data-deletable] {
- padding-right: 5px;
+ padding-right: 5px;
}
[dir=rtl] .choices__list--multiple .choices__item {
- margin-right: 0;
- margin-left: 3.75px;
+ margin-right: 0;
+ margin-left: 3.75px;
}
.choices__list--multiple .choices__item.is-highlighted {
- background-color: #00a5bb;
- border: 1px solid #008fa1;
+ background-color: #00a5bb;
+ border: 1px solid #008fa1;
}
.is-disabled .choices__list--multiple .choices__item {
- background-color: #aaaaaa;
- border: 1px solid #919191;
+ background-color: #aaaaaa;
+ border: 1px solid #919191;
}
.choices__list--dropdown {
- visibility: hidden;
- z-index: 1;
- position: absolute;
- width: 100%;
- background-color: #fff;
- border: 1px solid #ddd;
- top: 100%;
- margin-top: -1px;
- border-bottom-left-radius: 2.5px;
- border-bottom-right-radius: 2.5px;
- overflow: hidden;
- word-break: break-all;
- will-change: visibility;
+ visibility: hidden;
+ z-index: 1;
+ position: absolute;
+ width: 100%;
+ background-color: #fff;
+ border: 1px solid #ddd;
+ top: 100%;
+ margin-top: -1px;
+ border-bottom-left-radius: 2.5px;
+ border-bottom-right-radius: 2.5px;
+ overflow: hidden;
+ word-break: break-all;
+ will-change: visibility;
}
.choices__list--dropdown.is-active {
- visibility: visible;
+ visibility: visible;
}
.is-open .choices__list--dropdown {
- border-color: #b7b7b7;
+ border-color: #b7b7b7;
}
.is-flipped .choices__list--dropdown {
- top: auto;
- bottom: 100%;
- margin-top: 0;
- margin-bottom: -1px;
- border-radius: 0.25rem 0.25rem 0 0;
+ top: auto;
+ bottom: 100%;
+ margin-top: 0;
+ margin-bottom: -1px;
+ border-radius: 0.25rem 0.25rem 0 0;
}
.choices__list--dropdown .choices__list {
- position: relative;
- max-height: 300px;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
- will-change: scroll-position;
+ position: relative;
+ max-height: 300px;
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+ will-change: scroll-position;
}
.choices__list--dropdown .choices__item {
- position: relative;
- padding: 10px;
- font-size: 14px;
+ position: relative;
+ padding: 10px;
+ font-size: 14px;
}
[dir=rtl] .choices__list--dropdown .choices__item {
- text-align: right;
+ text-align: right;
}
@media (min-width: 640px) {
- .choices__list--dropdown .choices__item--selectable {
- padding-right: 100px;
- }
- .choices__list--dropdown .choices__item--selectable::after {
- content: attr(data-select-text);
- font-size: 12px;
- opacity: 0;
- position: absolute;
- right: 10px;
- top: 50%;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- }
- [dir=rtl] .choices__list--dropdown .choices__item--selectable {
- text-align: right;
- padding-left: 100px;
- padding-right: 10px;
- }
- [dir=rtl] .choices__list--dropdown .choices__item--selectable::after {
- right: auto;
- left: 10px;
- }
+ .choices__list--dropdown .choices__item--selectable {
+ padding-right: 100px;
+ }
+ .choices__list--dropdown .choices__item--selectable::after {
+ content: attr(data-select-text);
+ font-size: 12px;
+ opacity: 0;
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ transform: translateY(-50%);
+ }
+ [dir=rtl] .choices__list--dropdown .choices__item--selectable {
+ text-align: right;
+ padding-left: 100px;
+ padding-right: 10px;
+ }
+ [dir=rtl] .choices__list--dropdown .choices__item--selectable::after {
+ right: auto;
+ left: 10px;
+ }
}
.choices__list--dropdown .choices__item--selectable.is-highlighted {
- background-color: #f2f2f2;
+ background-color: #f2f2f2;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted::after {
- opacity: 0.5;
+ opacity: 0.5;
}
.choices__item {
- cursor: default;
+ cursor: default;
}
.choices__item--selectable {
- cursor: pointer;
+ cursor: pointer;
}
.choices__item--disabled {
- cursor: not-allowed;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- opacity: 0.5;
+ cursor: not-allowed;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ opacity: 0.5;
}
.choices__heading {
- font-weight: 600;
- font-size: 12px;
- padding: 10px;
- border-bottom: 1px solid #f7f7f7;
- color: gray;
+ font-weight: 600;
+ font-size: 12px;
+ padding: 10px;
+ border-bottom: 1px solid #f7f7f7;
+ color: gray;
}
.choices__button {
- text-indent: -9999px;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: 0;
- background-color: transparent;
- background-repeat: no-repeat;
- background-position: center;
- cursor: pointer;
+ text-indent: -9999px;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ border: 0;
+ background-color: transparent;
+ background-repeat: no-repeat;
+ background-position: center;
+ cursor: pointer;
}
.choices__button:focus {
- outline: none;
+ outline: none;
}
.choices__input {
- display: inline-block;
- vertical-align: baseline;
- background-color: #f9f9f9;
- font-size: 14px;
- margin-bottom: 5px;
- border: 0;
- border-radius: 0;
- max-width: 100%;
- padding: 4px 0 4px 2px;
+ display: inline-block;
+ vertical-align: baseline;
+ background-color: #f9f9f9;
+ font-size: 14px;
+ margin-bottom: 5px;
+ border: 0;
+ border-radius: 0;
+ max-width: 100%;
+ padding: 4px 0 4px 2px;
}
.choices__input:focus {
- outline: 0;
+ outline: 0;
}
[dir=rtl] .choices__input {
- padding-right: 2px;
- padding-left: 0;
+ padding-right: 2px;
+ padding-left: 0;
}
.choices__placeholder {
- opacity: 0.5;
+ opacity: 0.5;
}
/* ===== End of Choices ====== */
.choices {
- border: 1px solid hsl(210, 14%, 83%);
- border-radius: 0.25rem;
+ border: 1px solid hsl(210, 14%, 83%);
+ border-radius: 0.25rem;
}
.choices.is-focused {
- border-color: #8894aa;
- -webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
- box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
+ border-color: #8894aa;
+ -webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
+ box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
}
.choices__inner {
- padding: 0.4rem 1rem;
- margin-bottom: 0;
- font-size: 1rem;
- border: none;
- border-radius: 0;
+ padding: 0.4rem 1rem;
+ margin-bottom: 0;
+ font-size: 1rem;
+ border: none;
+ border-radius: 0;
}
.choices__input {
- padding: 0;
- margin-bottom: 0;
- font-size: 1rem;
- background-color: transparent;
+ padding: 0;
+ margin-bottom: 0;
+ font-size: 1rem;
+ background-color: transparent;
}
.choices__input::-webkit-input-placeholder {
- color: hsl(210, 9%, 31%);
- opacity: 1;
+ color: hsl(210, 9%, 31%);
+ opacity: 1;
}
.choices__input::-moz-placeholder {
- color: hsl(210, 9%, 31%);
- opacity: 1;
+ color: hsl(210, 9%, 31%);
+ opacity: 1;
}
.choices__input:-ms-input-placeholder {
- color: hsl(210, 9%, 31%);
- opacity: 1;
+ color: hsl(210, 9%, 31%);
+ opacity: 1;
}
.choices__input::-ms-input-placeholder {
- color: hsl(210, 9%, 31%);
- opacity: 1;
+ color: hsl(210, 9%, 31%);
+ opacity: 1;
}
.choices__input::placeholder {
- color: hsl(210, 9%, 31%);
- opacity: 1;
+ color: hsl(210, 9%, 31%);
+ opacity: 1;
}
.choices__list--dropdown {
- z-index: 1060;
+ z-index: 1060;
}
.choices__list--multiple .choices__item {
- position: relative;
- margin: 2px;
- background-color: var(--color-primary);
- -webkit-margin-end: 2px;
- margin-inline-end: 2px;
- border: 0;
- border-radius: 0.25rem;
+ position: relative;
+ margin: 2px;
+ background-color: var(--color-primary);
+ -webkit-margin-end: 2px;
+ margin-inline-end: 2px;
+ border: 0;
+ border-radius: 0.25rem;
}
.choices__list--multiple .choices__item.is-highlighted {
- background-color: var(--color-primary);
- opacity: 0.9;
+ background-color: var(--color-primary);
+ opacity: 0.9;
}
.choices .choices__list--dropdown .choices__item {
- -webkit-padding-end: 10px;
- padding-inline-end: 10px;
+ -webkit-padding-end: 10px;
+ padding-inline-end: 10px;
}
.choices .choices__list--dropdown .choices__item--selectable::after {
- display: none;
+ display: none;
}
.choices__button_joomla {
- position: relative;
- padding: 0 10px;
- color: inherit;
- text-indent: -9999px;
- cursor: pointer;
- background: none;
- border: 0;
- opacity: 0.5;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
+ position: relative;
+ padding: 0 10px;
+ color: inherit;
+ text-indent: -9999px;
+ cursor: pointer;
+ background: none;
+ border: 0;
+ opacity: 0.5;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
}
.choices__button_joomla::before {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- display: block;
- text-align: center;
- text-indent: 0;
- content: "×";
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: block;
+ text-align: center;
+ text-indent: 0;
+ content: "×";
}
.choices__button_joomla:hover, .choices__button_joomla:focus {
- opacity: 1;
+ opacity: 1;
}
.choices__button_joomla:focus {
- outline: none;
+ outline: none;
}
.choices[data-type*=select-one] .choices__inner,
.choices[data-type*=select-multiple] .choices__inner {
- -webkit-padding-end: 3rem;
- padding-inline-end: 3rem;
- cursor: pointer;
- background: url("../../../images/select-bg.svg") no-repeat 100%/116rem;
- background-color: hsl(210, 16%, 93%);
+ -webkit-padding-end: 3rem;
+ padding-inline-end: 3rem;
+ cursor: pointer;
+ background: url("../../../images/select-bg.svg") no-repeat 100%/116rem;
+ background-color: hsl(210, 16%, 93%);
}
[dir=rtl] .choices[data-type*=select-one] .choices__inner,
[dir=rtl] .choices[data-type*=select-multiple] .choices__inner {
- background: url("../../../images/select-bg-rtl.svg") no-repeat 0/116rem;
- background-color: hsl(210, 16%, 93%);
+ background: url("../../../images/select-bg-rtl.svg") no-repeat 0/116rem;
+ background-color: hsl(210, 16%, 93%);
}
.choices[data-type*=select-one] .choices__item {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
}
.choices[data-type*=select-one] .choices__button_joomla {
- position: absolute;
- top: 50%;
- inset-inline-end: 0;
- width: 20px;
- height: 20px;
- padding: 0;
- -webkit-margin-before: -10px;
- margin-block-start: -10px;
- -webkit-margin-end: 50px;
- margin-inline-end: 50px;
- border-radius: 10em;
- opacity: 0.5;
+ position: absolute;
+ top: 50%;
+ inset-inline-end: 0;
+ width: 20px;
+ height: 20px;
+ padding: 0;
+ -webkit-margin-before: -10px;
+ margin-block-start: -10px;
+ -webkit-margin-end: 50px;
+ margin-inline-end: 50px;
+ border-radius: 10em;
+ opacity: 0.5;
}
.choices[data-type*=select-one] .choices__button_joomla:hover, .choices[data-type*=select-one] .choices__button_joomla:focus {
- opacity: 1;
+ opacity: 1;
}
.choices[data-type*=select-one] .choices__button_joomla:focus {
- -webkit-box-shadow: 0 0 0 2px #00bcd4;
- box-shadow: 0 0 0 2px #00bcd4;
+ -webkit-box-shadow: 0 0 0 2px #00bcd4;
+ box-shadow: 0 0 0 2px #00bcd4;
}
.choices[data-type*=select-one]::after {
- display: none;
+ display: none;
}
.choices[data-type*=select-multiple] .choices__input,
.choices[data-type*=text] .choices__input {
- padding: 0.2rem 0;
+ padding: 0.2rem 0;
}
.choices__heading {
- font-size: 1.2rem;
-}
\ No newline at end of file
+ font-size: 1.2rem;
+}
diff --git a/media/templates/site/moko-cassiopeia/css/vendor/joomla-custom-elements/joomla-alert.css b/media/templates/site/moko-cassiopeia/css/vendor/joomla-custom-elements/joomla-alert.css
index 6acec10..7859987 100644
--- a/media/templates/site/moko-cassiopeia/css/vendor/joomla-custom-elements/joomla-alert.css
+++ b/media/templates/site/moko-cassiopeia/css/vendor/joomla-custom-elements/joomla-alert.css
@@ -1,146 +1,176 @@
+@charset "UTF-8";
+/* =========================================================================
+ * Copyright (C) 2025 Moko Consulting
+ *
+ * This file is part of a Moko Consulting project.
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/ .
+ * =========================================================================
+ * FILE INFORMATION
+ * DEFGROUP: Joomla
+ * INGROUP: Moko-Cassiopeia
+ * PATH: media/templates/site/moko-cassiopeia/css/vendor/choicesjs/choices.css
+ * VERSION: 02.00
+ * BRIEF: Vendor stylesheet for Choices.js select and input enhancements in Moko-Cassiopeia
+ * =========================================================================
+ */
+
@import "../../../../../../vendor/joomla-custom-elements/css/joomla-alert.css";
#system-message-container:empty {
- display: none;
- margin-top: 0;
+ display: none;
+ margin-top: 0;
}
#system-message-container joomla-alert {
- position: relative;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- width: 100%;
- min-width: 16rem;
- padding: 0;
- margin-bottom: 0;
- color: var(--gray-dark);
- background-color: hsl(0, 0%, 100%);
- border: 1px solid var(--alert-accent-color, transparent);
- border-radius: 0.25rem;
- -webkit-transition: opacity 0.15s linear;
- -o-transition: opacity 0.15s linear;
- transition: opacity 0.15s linear;
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ width: 100%;
+ min-width: 16rem;
+ padding: 0;
+ margin-bottom: 0;
+ color: var(--gray-dark);
+ background-color: hsl(0, 0%, 100%);
+ border: 1px solid var(--alert-accent-color, transparent);
+ border-radius: 0.25rem;
+ -webkit-transition: opacity 0.15s linear;
+ -o-transition: opacity 0.15s linear;
+ transition: opacity 0.15s linear;
}
#system-message-container joomla-alert + * {
- margin-top: 1rem;
+ margin-top: 1rem;
}
#system-message-container joomla-alert .alert-heading {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -ms-flex-line-pack: center;
- align-content: center;
- padding: 0.8rem;
- color: var(--alert-heading-text);
- background: var(--alert-accent-color, transparent);
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -ms-flex-line-pack: center;
+ align-content: center;
+ padding: 0.8rem;
+ color: var(--alert-heading-text);
+ background: var(--alert-accent-color, transparent);
}
#system-message-container joomla-alert .alert-heading .message::before,
#system-message-container joomla-alert .alert-heading .success::before {
- display: inline-block;
- width: 1em;
- height: 1em;
- content: "";
- background-image: url('data:image/svg+xml;utf8,');
- background-size: 100%;
+ display: inline-block;
+ width: 1em;
+ height: 1em;
+ content: "";
+ background-image: url('data:image/svg+xml;utf8,');
+ background-size: 100%;
}
#system-message-container joomla-alert .alert-heading .notice::before,
#system-message-container joomla-alert .alert-heading .info::before {
- display: inline-block;
- width: 1em;
- height: 1em;
- content: "";
- background-image: url('data:image/svg+xml;utf8,');
- background-size: 100%;
+ display: inline-block;
+ width: 1em;
+ height: 1em;
+ content: "";
+ background-image: url('data:image/svg+xml;utf8,');
+ background-size: 100%;
}
#system-message-container joomla-alert .alert-heading .warning::before {
- display: inline-block;
- width: 1em;
- height: 1em;
- content: "";
- background-image: url('data:image/svg+xml;utf8,');
- background-size: 100%;
+ display: inline-block;
+ width: 1em;
+ height: 1em;
+ content: "";
+ background-image: url('data:image/svg+xml;utf8,');
+ background-size: 100%;
}
#system-message-container joomla-alert .alert-heading .error::before,
#system-message-container joomla-alert .alert-heading .danger::before {
- display: inline-block;
- width: 1em;
- height: 1em;
- content: "";
- background-image: url('data:image/svg+xml;utf8,');
- background-size: 100%;
+ display: inline-block;
+ width: 1em;
+ height: 1em;
+ content: "";
+ background-image: url('data:image/svg+xml;utf8,');
+ background-size: 100%;
}
#system-message-container joomla-alert .alert-wrapper {
- width: 100%;
+ width: 100%;
}
#system-message-container joomla-alert .alert-link {
- color: var(--success, inherit);
+ color: var(--success, inherit);
}
#system-message-container joomla-alert[type=success], #system-message-container joomla-alert[type=message] {
- --alert-accent-color: var(--success);
- --alert-heading-text: hsla(0, 0%, 100%, .95);
- --alert-close-button: var(--success);
- background-color: hsl(0, 0%, 100%);
+ --alert-accent-color: var(--success);
+ --alert-heading-text: hsla(0, 0%, 100%, .95);
+ --alert-close-button: var(--success);
+ background-color: hsl(0, 0%, 100%);
}
#system-message-container joomla-alert[type=info], #system-message-container joomla-alert[type=notice] {
- --alert-accent-color: var(--info);
- --alert-heading-text: hsla(0, 0%, 100%, .95);
- --alert-close-button: var(--info);
- background-color: hsl(0, 0%, 100%);
+ --alert-accent-color: var(--info);
+ --alert-heading-text: hsla(0, 0%, 100%, .95);
+ --alert-close-button: var(--info);
+ background-color: hsl(0, 0%, 100%);
}
#system-message-container joomla-alert[type=warning] {
- --alert-accent-color: var(--warning);
- --alert-heading-text: hsla(0, 0%, 100%, .95);
- --alert-close-button: var(--warning);
- background-color: hsl(0, 0%, 100%);
+ --alert-accent-color: var(--warning);
+ --alert-heading-text: hsla(0, 0%, 100%, .95);
+ --alert-close-button: var(--warning);
+ background-color: hsl(0, 0%, 100%);
}
#system-message-container joomla-alert[type=error], #system-message-container joomla-alert[type=danger] {
- --alert-accent-color: var(--danger);
- --alert-heading-text: hsla(0, 0%, 100%, .95);
- --alert-close-button: var(--danger);
- background-color: hsl(0, 0%, 100%);
+ --alert-accent-color: var(--danger);
+ --alert-heading-text: hsla(0, 0%, 100%, .95);
+ --alert-close-button: var(--danger);
+ background-color: hsl(0, 0%, 100%);
}
#system-message-container joomla-alert .joomla-alert--close,
#system-message-container joomla-alert .joomla-alert-button--close {
- position: absolute;
- top: 0;
- right: 0;
- padding: 0.2rem 0.8rem;
- font-size: 2rem;
- color: var(--alert-close-button);
- background: none;
- border: 0;
- opacity: 1;
+ position: absolute;
+ top: 0;
+ right: 0;
+ padding: 0.2rem 0.8rem;
+ font-size: 2rem;
+ color: var(--alert-close-button);
+ background: none;
+ border: 0;
+ opacity: 1;
}
#system-message-container joomla-alert .joomla-alert--close:hover, #system-message-container joomla-alert .joomla-alert--close:focus,
#system-message-container joomla-alert .joomla-alert-button--close:hover,
#system-message-container joomla-alert .joomla-alert-button--close:focus {
- text-decoration: none;
- cursor: pointer;
- opacity: 0.75;
+ text-decoration: none;
+ cursor: pointer;
+ opacity: 0.75;
}
[dir=rtl] #system-message-container joomla-alert .joomla-alert--close,
[dir=rtl] #system-message-container joomla-alert .joomla-alert-button--close {
- right: auto;
- left: 0;
- padding: 0.2rem 0.6rem;
+ right: auto;
+ left: 0;
+ padding: 0.2rem 0.6rem;
}
#system-message-container joomla-alert div {
- font-size: 1rem;
+ font-size: 1rem;
}
#system-message-container joomla-alert div .alert-message {
- padding: 0.3rem 2rem 0.3rem 0.3rem;
- margin: 0.5rem;
+ padding: 0.3rem 2rem 0.3rem 0.3rem;
+ margin: 0.5rem;
}
[dir=rtl] #system-message-container joomla-alert div .alert-message {
- padding: 0.3rem 0.3rem 0.3rem 2rem;
+ padding: 0.3rem 0.3rem 0.3rem 2rem;
}
#system-message-container joomla-alert div .alert-message:not(:first-of-type) {
- border-top: 1px solid var(--alert-accent-color);
-}
\ No newline at end of file
+ border-top: 1px solid var(--alert-accent-color);
+}
diff --git a/media/templates/site/moko-cassiopeia/css/vendor/vmbasic.css b/media/templates/site/moko-cassiopeia/css/vendor/vmbasic.css
index bedf29f..e3722a3 100644
--- a/media/templates/site/moko-cassiopeia/css/vendor/vmbasic.css
+++ b/media/templates/site/moko-cassiopeia/css/vendor/vmbasic.css
@@ -1,3 +1,33 @@
+@charset "UTF-8";
+/* =========================================================================
+ * Copyright (C) 2025 Moko Consulting
+ *
+ * This file is part of a Moko Consulting project.
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/ .
+ * =========================================================================
+ * FILE INFORMATION
+ * DEFGROUP: Joomla
+ * INGROUP: Moko-Cassiopeia
+ * PATH: media/templates/site/moko-cassiopeia/css/vendor/vmbasic.css
+ * VERSION: 02.00
+ * BRIEF: Vendor stylesheet providing base styles for VM Basic in Moko-Cassiopeia
+ * =========================================================================
+ */
+
/* Bootstrap */
.dropdown-menu {
border-radius: 0;
diff --git a/media/templates/site/moko-cassiopeia/js/darkmode-toggle.js b/media/templates/site/moko-cassiopeia/js/darkmode-toggle.js
index cd2485d..921a18e 100644
--- a/media/templates/site/moko-cassiopeia/js/darkmode-toggle.js
+++ b/media/templates/site/moko-cassiopeia/js/darkmode-toggle.js
@@ -1,147 +1,170 @@
-/**
- * darkmode-toggle.js — Floating theme switch (class-based, CSP-proof)
- * @version 2.2.1
- * Storage key: "theme" -> "light" | "dark"
- * Corner from (default br)
+/* =========================================================================
+ * Copyright (C) 2025 Moko Consulting
+ *
+ * This file is part of a Moko Consulting project.
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/ .
+ * =========================================================================
+ * FILE INFORMATION
+ * DEFGROUP: Joomla
+ * INGROUP: Moko-Cassiopeia
+ * PATH: media/templates/site/moko-cassiopeia/js/darkmode-toggle.js
+ * VERSION: 02.00
+ * BRIEF: JavaScript logic for dark mode toggle functionality in Moko-Cassiopeia
+ * =========================================================================
*/
+
(function () {
- 'use strict';
+ 'use strict';
- var STORAGE_KEY = 'theme';
- var docEl = document.documentElement;
- var mql = window.matchMedia('(prefers-color-scheme: dark)');
+ var STORAGE_KEY = 'theme';
+ var docEl = document.documentElement;
+ var mql = window.matchMedia('(prefers-color-scheme: dark)');
- function getStored() { try { return localStorage.getItem(STORAGE_KEY); } catch (e) { return null; } }
- function setStored(v) { try { localStorage.setItem(STORAGE_KEY, v); } catch (e) {} }
- function clearStored() { try { localStorage.removeItem(STORAGE_KEY); } catch (e) {} }
- function systemTheme() { return mql.matches ? 'dark' : 'light'; }
+ function getStored() { try { return localStorage.getItem(STORAGE_KEY); } catch (e) { return null; } }
+ function setStored(v) { try { localStorage.setItem(STORAGE_KEY, v); } catch (e) {} }
+ function clearStored() { try { localStorage.removeItem(STORAGE_KEY); } catch (e) {} }
+ function systemTheme() { return mql.matches ? 'dark' : 'light'; }
- function applyTheme(theme) {
- docEl.setAttribute('data-bs-theme', theme);
- docEl.setAttribute('data-aria-theme', theme);
- var meta = document.querySelector('meta[name="theme-color"]');
- if (meta) {
- meta.setAttribute('content', theme === 'dark' ? '#0f1115' : '#ffffff');
- }
- var sw = document.getElementById('mokoThemeSwitch');
- if (sw) {
- sw.setAttribute('aria-checked', theme === 'dark' ? 'true' : 'false');
- }
- }
+ function applyTheme(theme) {
+ docEl.setAttribute('data-bs-theme', theme);
+ docEl.setAttribute('data-aria-theme', theme);
+ var meta = document.querySelector('meta[name="theme-color"]');
+ if (meta) {
+ meta.setAttribute('content', theme === 'dark' ? '#0f1115' : '#ffffff');
+ }
+ var sw = document.getElementById('mokoThemeSwitch');
+ if (sw) {
+ sw.setAttribute('aria-checked', theme === 'dark' ? 'true' : 'false');
+ }
+ }
- function initTheme() {
- var stored = getStored();
- applyTheme(stored ? stored : systemTheme());
- }
+ function initTheme() {
+ var stored = getStored();
+ applyTheme(stored ? stored : systemTheme());
+ }
- function posClassFromBody() {
- var pos = (document.body.getAttribute('data-theme-fab-pos') || 'br').toLowerCase();
- if (!/^(br|bl|tr|tl)$/.test(pos)) pos = 'br';
- return 'pos-' + pos;
- }
+ function posClassFromBody() {
+ var pos = (document.body.getAttribute('data-theme-fab-pos') || 'br').toLowerCase();
+ if (!/^(br|bl|tr|tl)$/.test(pos)) pos = 'br';
+ return 'pos-' + pos;
+ }
- function buildToggle() {
- if (document.getElementById('mokoThemeFab')) return;
+ function buildToggle() {
+ if (document.getElementById('mokoThemeFab')) return;
- var wrap = document.createElement('div');
- wrap.id = 'mokoThemeFab';
- wrap.className = posClassFromBody();
+ var wrap = document.createElement('div');
+ wrap.id = 'mokoThemeFab';
+ wrap.className = posClassFromBody();
- // Light label
- var lblL = document.createElement('span');
- lblL.className = 'label';
- lblL.textContent = 'Light';
+ // Light label
+ var lblL = document.createElement('span');
+ lblL.className = 'label';
+ lblL.textContent = 'Light';
- // Switch
- var switchWrap = document.createElement('button');
- switchWrap.id = 'mokoThemeSwitch';
- switchWrap.type = 'button';
- switchWrap.setAttribute('role', 'switch');
- switchWrap.setAttribute('aria-label', 'Toggle dark mode');
- switchWrap.setAttribute('aria-checked', 'false'); // updated after init
+ // Switch
+ var switchWrap = document.createElement('button');
+ switchWrap.id = 'mokoThemeSwitch';
+ switchWrap.type = 'button';
+ switchWrap.setAttribute('role', 'switch');
+ switchWrap.setAttribute('aria-label', 'Toggle dark mode');
+ switchWrap.setAttribute('aria-checked', 'false'); // updated after init
- var track = document.createElement('span');
- track.className = 'switch';
- var knob = document.createElement('span');
- knob.className = 'knob';
- track.appendChild(knob);
- switchWrap.appendChild(track);
+ var track = document.createElement('span');
+ track.className = 'switch';
+ var knob = document.createElement('span');
+ knob.className = 'knob';
+ track.appendChild(knob);
+ switchWrap.appendChild(track);
- // Dark label
- var lblD = document.createElement('span');
- lblD.className = 'label';
- lblD.textContent = 'Dark';
+ // Dark label
+ var lblD = document.createElement('span');
+ lblD.className = 'label';
+ lblD.textContent = 'Dark';
- // Auto button
- var auto = document.createElement('button');
- auto.id = 'mokoThemeAuto';
- auto.type = 'button';
- auto.className = 'btn btn-sm btn-link text-decoration-none px-2';
- auto.setAttribute('aria-label', 'Follow system theme');
- auto.textContent = 'Auto';
+ // Auto button
+ var auto = document.createElement('button');
+ auto.id = 'mokoThemeAuto';
+ auto.type = 'button';
+ auto.className = 'btn btn-sm btn-link text-decoration-none px-2';
+ auto.setAttribute('aria-label', 'Follow system theme');
+ auto.textContent = 'Auto';
- // Behavior
- switchWrap.addEventListener('click', function () {
- var current = (docEl.getAttribute('data-bs-theme') || 'light').toLowerCase();
- var next = current === 'dark' ? 'light' : 'dark';
- applyTheme(next);
- setStored(next);
- });
+ // Behavior
+ switchWrap.addEventListener('click', function () {
+ var current = (docEl.getAttribute('data-bs-theme') || 'light').toLowerCase();
+ var next = current === 'dark' ? 'light' : 'dark';
+ applyTheme(next);
+ setStored(next);
+ });
- auto.addEventListener('click', function () {
- clearStored();
- applyTheme(systemTheme());
- });
+ auto.addEventListener('click', function () {
+ clearStored();
+ applyTheme(systemTheme());
+ });
- // Respond to OS changes only when not user-forced
- var onMql = function () {
- if (!getStored()) applyTheme(systemTheme());
- };
- if (typeof mql.addEventListener === 'function') mql.addEventListener('change', onMql);
- else if (typeof mql.addListener === 'function') mql.addListener(onMql);
+ // Respond to OS changes only when not user-forced
+ var onMql = function () {
+ if (!getStored()) applyTheme(systemTheme());
+ };
+ if (typeof mql.addEventListener === 'function') mql.addEventListener('change', onMql);
+ else if (typeof mql.addListener === 'function') mql.addListener(onMql);
- // Initial state
- var initial = getStored() || systemTheme();
- switchWrap.setAttribute('aria-checked', initial === 'dark' ? 'true' : 'false');
+ // Initial state
+ var initial = getStored() || systemTheme();
+ switchWrap.setAttribute('aria-checked', initial === 'dark' ? 'true' : 'false');
- // Mount
- wrap.appendChild(lblL);
- wrap.appendChild(switchWrap);
- wrap.appendChild(lblD);
- wrap.appendChild(auto);
- document.body.appendChild(wrap);
+ // Mount
+ wrap.appendChild(lblL);
+ wrap.appendChild(switchWrap);
+ wrap.appendChild(lblD);
+ wrap.appendChild(auto);
+ document.body.appendChild(wrap);
- // Debug helper
- window.mokoThemeFabStatus = function () {
- var el = document.getElementById('mokoThemeFab');
- if (!el) return { mounted: false };
- var r = el.getBoundingClientRect();
- return {
- mounted: true,
- rect: { top: r.top, left: r.left, width: r.width, height: r.height },
- zIndex: window.getComputedStyle(el).zIndex,
- posClass: el.className
- };
- };
+ // Debug helper
+ window.mokoThemeFabStatus = function () {
+ var el = document.getElementById('mokoThemeFab');
+ if (!el) return { mounted: false };
+ var r = el.getBoundingClientRect();
+ return {
+ mounted: true,
+ rect: { top: r.top, left: r.left, width: r.width, height: r.height },
+ zIndex: window.getComputedStyle(el).zIndex,
+ posClass: el.className
+ };
+ };
- // Outline if invisible
- setTimeout(function () {
- var r = wrap.getBoundingClientRect();
- if (r.width < 10 || r.height < 10) {
- wrap.classList.add('debug-outline');
- console.warn('[moko] Theme FAB mounted but appears too small — check CSS collisions.');
- }
- }, 50);
- }
+ // Outline if invisible
+ setTimeout(function () {
+ var r = wrap.getBoundingClientRect();
+ if (r.width < 10 || r.height < 10) {
+ wrap.classList.add('debug-outline');
+ console.warn('[moko] Theme FAB mounted but appears too small — check CSS collisions.');
+ }
+ }, 50);
+ }
- function init() {
- initTheme();
- buildToggle();
- }
+ function init() {
+ initTheme();
+ buildToggle();
+ }
- if (document.readyState === 'loading') {
- document.addEventListener('DOMContentLoaded', init);
- } else {
- init();
- }
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', init);
+ } else {
+ init();
+ }
})();
diff --git a/media/templates/site/moko-cassiopeia/js/gtm.js b/media/templates/site/moko-cassiopeia/js/gtm.js
index e69de29..05c2482 100644
--- a/media/templates/site/moko-cassiopeia/js/gtm.js
+++ b/media/templates/site/moko-cassiopeia/js/gtm.js
@@ -0,0 +1,347 @@
+/*
+ =========================================================================
+ Copyright (C) 2025 Moko Consulting
+ This file is part of a Moko Consulting project.
+ SPDX-License-Identifier: GPL-3.0-or-later
+
+ This program is free software; you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation; either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program. If not, see https://www.gnu.org/licenses/ .
+ =========================================================================
+ FILE INFORMATION
+ DEFGROUP: Joomla Template
+ FILE: media/templates/site/moko-cassiopeia/js/gtm.js
+ HEADER VERSION: 1.0
+ VERSION: 2.0
+ BRIEF: Safe, configurable Google Tag Manager loader for Moko-Cassiopeia.
+ PATH: media/templates/site/moko-cassiopeia/js/gtm.js
+ NOTE: Place the