02.00
**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.
This commit is contained in:
85
CHANGELOG.md
Normal file
85
CHANGELOG.md
Normal file
@@ -0,0 +1,85 @@
|
||||
<!--
|
||||
=========================================================================
|
||||
Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
|
||||
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: CHANGELOG.md
|
||||
VERSION: 02.00
|
||||
BRIEF: Changelog file documenting version history of Moko-Cassiopeia
|
||||
=========================================================================
|
||||
-->
|
||||
|
||||
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)
|
||||
@@ -1,22 +1,31 @@
|
||||
<!--
|
||||
Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
=========================================================================
|
||||
Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
|
||||
This file is part of a Moko Consulting project.
|
||||
This file is part of a Moko Consulting project.
|
||||
|
||||
This documentation 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.
|
||||
SPDX-License-Identifier: GPL-3.0-or-later
|
||||
|
||||
This documentation 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.
|
||||
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.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this documentation. If not, see <https://www.gnu.org/licenses/>.
|
||||
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.
|
||||
|
||||
SPDX-License-Identifier: GPL-3.0-or-later
|
||||
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: CODE_OF_CONDUCT.md
|
||||
VERSION: 02.00
|
||||
BRIEF: Contributor Code of Conduct for Moko-Cassiopeia project
|
||||
=========================================================================
|
||||
-->
|
||||
|
||||
# Code of Conduct
|
||||
|
||||
@@ -1,3 +1,33 @@
|
||||
<!--
|
||||
=========================================================================
|
||||
Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
|
||||
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: CONTRIBUTING.md
|
||||
VERSION: 02.00
|
||||
BRIEF: Contribution guidelines for the Moko-Cassiopeia project
|
||||
=========================================================================
|
||||
-->
|
||||
|
||||
# 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.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -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 <hello@mokoconsulting.tech>
|
||||
#
|
||||
# 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"
|
||||
|
||||
@@ -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 <hello@mokoconsulting.tech>
|
||||
#
|
||||
# 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="<h3>MOKO-CASSIOPEIA Template Description</h3>
|
||||
TPL_MOKO-CASSIOPEIA_XML_DESCRIPTION=
|
||||
TPL_MOKO-CASSIOPEIA_XML_DESCRIPTION="<h3>MOKO-CASSIOPEIA Template Description (v2.0)</h3>
|
||||
<p>
|
||||
<strong>MOKO-CASSIOPEIA</strong> continues Joomla’s tradition of space-themed default templates—
|
||||
building on the legacy of <em>Solarflare</em> from Joomla 1.0, <em>Milkyway</em> from Joomla 1.5,
|
||||
and <em>Protostar</em> from Joomla 3.0.
|
||||
<strong>MOKO-CASSIOPEIA 2.0</strong> continues Joomla’s tradition of space-themed default templates—
|
||||
building on the legacy of <em>Solarflare</em> (Joomla 1.0), <em>Milkyway</em> (Joomla 1.5),
|
||||
and <em>Protostar</em> (Joomla 3.0).
|
||||
</p>
|
||||
<p>
|
||||
This template is a customized fork of the <strong>Cassiopeia</strong> template introduced in Joomla 4,
|
||||
@@ -42,41 +60,40 @@ TPL_MOKO-CASSIOPEIA_XML_DESCRIPTION="<h3>MOKO-CASSIOPEIA Template Description</h
|
||||
enhancements and structural refinements specifically tailored for use by Moko Consulting.
|
||||
</p>
|
||||
<p>
|
||||
<strong>MOKO-CASSIOPEIA</strong> is designed to serve as a versatile, production-ready base for
|
||||
contemporary Joomla websites, emphasizing speed, clarity, and open-source philosophy.
|
||||
<strong>Version 2.0</strong> 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.
|
||||
</p>
|
||||
|
||||
<h4>Features</h4>
|
||||
<ul>
|
||||
<li>Fully responsive and mobile-first layout</li>
|
||||
<li>Based on Joomla 4+ template architecture</li>
|
||||
<li>Enhanced SCSS and CSS overrides for custom styling</li>
|
||||
<li>Built-in support for Bootstrap 5</li>
|
||||
<li>
|
||||
Integrated dynamic Table of Contents via
|
||||
<a href="https://afeld.github.io/bootstrap-toc/" target="_blank" rel="noopener">Bootstrap TOC</a>
|
||||
</li>
|
||||
<li>Enhanced SCSS and CSS overrides for streamlined custom styling</li>
|
||||
<li>Built-in support for <strong>Bootstrap 5</strong></li>
|
||||
<li>Font Awesome 6 integration for modern iconography</li>
|
||||
<li>Automatic Table of Contents (TOC) — selectable per article via <code>toc-left</code> or <code>toc-right</code> layouts</li>
|
||||
<li><strong>Dark Mode toggle (new in v2.0)</strong> with user switch and admin override</li>
|
||||
<li><strong>Optional GTM + GA4 hooks (new in v2.0)</strong> for analytics and marketing integration</li>
|
||||
<li>Optimized template structure for performance and maintainability</li>
|
||||
<li>Custom module positions and layout presets</li>
|
||||
<li>Accessible, lightweight, and extensible</li>
|
||||
<li>Accessible, lightweight, and extensible for long-term use</li>
|
||||
<li>Ideal for professional services, portfolios, and informational websites</li>
|
||||
</ul>
|
||||
|
||||
<h4>Code Attribution</h4>
|
||||
<p>
|
||||
This template is based on the original <strong>Cassiopeia</strong> template developed by the
|
||||
<a href="https://www.joomla.org" target="_blank" rel="noopener">Joomla! Project</a> and released under the GNU General Public License.
|
||||
<a href=\"https://www.joomla.org\" target=\"_blank\" rel=\"noopener\">Joomla! Project</a> and released under the GNU General Public License.
|
||||
</p>
|
||||
<p>
|
||||
Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards.
|
||||
</p>a
|
||||
</p>
|
||||
<p>
|
||||
It includes integration with
|
||||
<a href="https://afeld.github.io/bootstrap-toc/" target="_blank" rel="noopener">Bootstrap TOC</a>,
|
||||
<a href=\"https://afeld.github.io/bootstrap-toc/\" target=\"_blank\" rel=\"noopener\">Bootstrap TOC</a>,
|
||||
an open-source table of contents generator by A. Feld, licensed under the MIT License.
|
||||
</p>
|
||||
<p>
|
||||
All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable.
|
||||
</p>"
|
||||
|
||||
JGLOBAL_OFFLINE="Offline"
|
||||
|
||||
@@ -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 <hello@mokoconsulting.tech>
|
||||
#
|
||||
# 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"
|
||||
|
||||
@@ -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 <hello@mokoconsulting.tech>
|
||||
#
|
||||
# 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="<h3>MOKO-CASSIOPEIA Template Description</h3>
|
||||
TPL_MOKO-CASSIOPEIA_XML_DESCRIPTION="<h3>MOKO-CASSIOPEIA Template Description (v2.0)</h3>
|
||||
<p>
|
||||
<strong>MOKO-CASSIOPEIA</strong> continues Joomla’s tradition of space-themed default templates—
|
||||
building on the legacy of <em>Solarflare</em> from Joomla 1.0, <em>Milkyway</em> from Joomla 1.5,
|
||||
and <em>Protostar</em> from Joomla 3.0.
|
||||
<strong>MOKO-CASSIOPEIA 2.0</strong> continues Joomla’s tradition of space-themed default templates—
|
||||
building on the legacy of <em>Solarflare</em> (Joomla 1.0), <em>Milkyway</em> (Joomla 1.5),
|
||||
and <em>Protostar</em> (Joomla 3.0).
|
||||
</p>
|
||||
<p>
|
||||
This template is a customized fork of the <strong>Cassiopeia</strong> template introduced in Joomla 4,
|
||||
@@ -43,41 +60,40 @@ TPL_MOKO-CASSIOPEIA_XML_DESCRIPTION="<h3>MOKO-CASSIOPEIA Template Description</h
|
||||
enhancements and structural refinements specifically tailored for use by Moko Consulting.
|
||||
</p>
|
||||
<p>
|
||||
<strong>MOKO-CASSIOPEIA</strong> is designed to serve as a versatile, production-ready base for
|
||||
contemporary Joomla websites, emphasizing speed, clarity, and open-source philosophy.
|
||||
<strong>Version 2.0</strong> 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.
|
||||
</p>
|
||||
|
||||
<h4>Features</h4>
|
||||
<ul>
|
||||
<li>Fully responsive and mobile-first layout</li>
|
||||
<li>Based on Joomla 4+ template architecture</li>
|
||||
<li>Enhanced SCSS and CSS overrides for custom styling</li>
|
||||
<li>Built-in support for Bootstrap 5</li>
|
||||
<li>
|
||||
Integrated dynamic Table of Contents via
|
||||
<a href="https://afeld.github.io/bootstrap-toc/" target="_blank" rel="noopener">Bootstrap TOC</a>
|
||||
</li>
|
||||
<li>Enhanced SCSS and CSS overrides for streamlined custom styling</li>
|
||||
<li>Built-in support for <strong>Bootstrap 5</strong></li>
|
||||
<li>Font Awesome 6 integration for modern iconography</li>
|
||||
<li>Automatic Table of Contents (TOC) — selectable per article via <code>toc-left</code> or <code>toc-right</code> layouts</li>
|
||||
<li><strong>Dark Mode toggle (new in v2.0)</strong> with user switch and admin override</li>
|
||||
<li><strong>Optional GTM + GA4 hooks (new in v2.0)</strong> for analytics and marketing integration</li>
|
||||
<li>Optimized template structure for performance and maintainability</li>
|
||||
<li>Custom module positions and layout presets</li>
|
||||
<li>Accessible, lightweight, and extensible</li>
|
||||
<li>Accessible, lightweight, and extensible for long-term use</li>
|
||||
<li>Ideal for professional services, portfolios, and informational websites</li>
|
||||
</ul>
|
||||
|
||||
<h4>Code Attribution</h4>
|
||||
<p>
|
||||
This template is based on the original <strong>Cassiopeia</strong> template developed by the
|
||||
<a href="https://www.joomla.org" target="_blank" rel="noopener">Joomla! Project</a> and released under the GNU General Public License.
|
||||
<a href=\"https://www.joomla.org\" target=\"_blank\" rel=\"noopener\">Joomla! Project</a> and released under the GNU General Public License.
|
||||
</p>
|
||||
<p>
|
||||
Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards.
|
||||
</p>a
|
||||
</p>
|
||||
<p>
|
||||
It includes integration with
|
||||
<a href="https://afeld.github.io/bootstrap-toc/" target="_blank" rel="noopener">Bootstrap TOC</a>,
|
||||
<a href=\"https://afeld.github.io/bootstrap-toc/\" target=\"_blank\" rel=\"noopener\">Bootstrap TOC</a>,
|
||||
an open-source table of contents generator by A. Feld, licensed under the MIT License.
|
||||
</p>
|
||||
<p>
|
||||
All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable.
|
||||
</p>"
|
||||
|
||||
JGLOBAL_OFFLINE="Offline"
|
||||
|
||||
@@ -1,3 +1,33 @@
|
||||
@charset "UTF-8";
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* 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/editor.css
|
||||
* VERSION: 02.00
|
||||
* BRIEF: Stylesheet for Joomla editor content within Moko-Cassiopeia template
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
/* STYLES FOR JOOMLA! EDITOR */
|
||||
body {
|
||||
font-size: 1rem;
|
||||
|
||||
@@ -1,3 +1,33 @@
|
||||
@charset "UTF-8";
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* 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/gable.css
|
||||
* VERSION: 02.00
|
||||
* BRIEF: Stylesheet providing gable-specific layout and design rules for Moko-Cassiopeia
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
:root {
|
||||
--gab-blue: transparent;
|
||||
--gab-green: #7ac143;
|
||||
|
||||
@@ -1,551 +0,0 @@
|
||||
/*!
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.moko-cassiopeia
|
||||
* @file /media/templates/sote/moko-cassiopeia/css/global/light/colors_alternative.css
|
||||
*
|
||||
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
*
|
||||
* Website: https://mokoconsulting.tech
|
||||
* Email: hello@mokoconsulting.tech
|
||||
* Phone: +1 (931) 279-6313
|
||||
*/
|
||||
|
||||
/* -----------------------------------------------
|
||||
* LIGHT THEME
|
||||
* --------------------------------------------- */
|
||||
|
||||
:root[data-bs-theme="light"] {
|
||||
color-scheme: light;
|
||||
--color-primary: #112855;
|
||||
--accent-color-primary: #3f8ff0;
|
||||
--accent-color-secondary: #3f8ff0;
|
||||
|
||||
--mainmenu-nav-link-color: white;
|
||||
|
||||
--color-link: #224FAA;
|
||||
--color-hover: var(--accent-color-primary);
|
||||
|
||||
--header-background-image: url('../../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg');
|
||||
--header-background-attachment: fixed;
|
||||
--header-background-repeat: repeat;
|
||||
--header-background-size: auto;
|
||||
|
||||
--container-below-topbar-bg-image: ;
|
||||
--container-below-topbar-bg-color ;
|
||||
--container-below-topbar-bg-position: auto;
|
||||
--container-below-topbar-bg-attachment: fixed;
|
||||
--container-below-topbar-bg-repeat: repeat;
|
||||
--container-below-topbar-bg-size: auto;
|
||||
--container-below-topbar-border: ;
|
||||
--container-below-topbar-border-radius: ;
|
||||
|
||||
--container-top-a-bg-image: ;
|
||||
--container-top-a-bg-color: ;
|
||||
--container-top-a-bg-position: auto;
|
||||
--container-top-a-bg-attachment: fixed;
|
||||
--container-top-a-bg-repeat: repeat;
|
||||
--container-top-a-bg-size: auto;
|
||||
--container-top-a-border: ;
|
||||
--container-top-a-border-radius: ;
|
||||
|
||||
--container-top-b-bg-image: ;
|
||||
--container-top-b-bg-color: ;
|
||||
--container-top-b-bg-position: auto;
|
||||
--container-top-b-bg-attachment: fixed;
|
||||
--container-top-b-bg-repeat: repeat;
|
||||
--container-top-b-bg-size: auto;
|
||||
--container-top-b-border: ;
|
||||
--container-top-b-border-radius: ;
|
||||
|
||||
--container-toc-bg: var(--mainmenu-nav-link-color);
|
||||
--container-toc-color: var(--color-primary);
|
||||
|
||||
--container-sidebar-bg-image: ;
|
||||
--container-sidebar-bg-color: ;
|
||||
--container-sidebar-bg-position: auto;
|
||||
--container-sidebar-bg-attachment: scroll;
|
||||
--container-sidebar-bg-repeat: repeat;
|
||||
--container-sidebar-bg-size: auto;
|
||||
--container-sidebar-border: ;
|
||||
--container-sidebar-border-radius: ;
|
||||
|
||||
--container-bottom-a-bg-image: ;
|
||||
--container-bottom-a-bg-color: ;
|
||||
--container-bottom-a-bg-position: auto;
|
||||
--container-bottom-a-bg-attachment: fixed;
|
||||
--container-bottom-a-bg-repeat: repeat;
|
||||
--container-bottom-a-bg-size: auto;
|
||||
--container-bottom-a-border: ;
|
||||
--container-bottom-a-border-radius: ;
|
||||
|
||||
--container-bottom-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: ;
|
||||
--container-bottom-b-bg-position: auto;
|
||||
--container-bottom-b-bg-attachment: fixed;
|
||||
--container-bottom-b-bg-repeat: repeat;
|
||||
--container-bottom-b-bg-size: auto;
|
||||
--container-bottom-b-border: ;
|
||||
--container-bottom-b-border-radius: ;
|
||||
|
||||
--nav-text-color: var(--mainmenu-nav-link-color);
|
||||
--nav-bg-color: var(--color-link);
|
||||
--border: 5px;
|
||||
|
||||
--muted-color: #6d757e;
|
||||
--hr-color: var(--border-color, #dfe3e7);
|
||||
--link-active-color: var(--link-color);
|
||||
--code-color-ink: var(--code-color, #e93f8e);
|
||||
--border-color-soft: var(--border-color, #dfe3e7);
|
||||
--kbd-bg: var(--secondary-bg, #eaedf0);
|
||||
--kbd-ink: var(--body-bg, #fff);
|
||||
--toc-bg: var(--secondary-bg, #eaedf0);
|
||||
--toc-ink: var(--color-primary, #112855);
|
||||
--selection-bg: var(--highlight-bg, #fbeea8);
|
||||
--selection-ink: var(--body-color, #22262a);
|
||||
|
||||
--blue: #010156;
|
||||
--black: #000;
|
||||
--indigo: #6812f3;
|
||||
--purple: #6f42c2;
|
||||
--pink: #e93f8e;
|
||||
--red: #a51f18;
|
||||
--orange: #fd7e17;
|
||||
--yellow: #ad6200;
|
||||
--green: #448344;
|
||||
--teal: #5abfdd;
|
||||
--cyan: #30638d;
|
||||
--white: #fff;
|
||||
--gray-100: #f9fafb;
|
||||
--gray-200: #eaedf0;
|
||||
--gray-300: #dfe3e7;
|
||||
--gray-400: #ced4da;
|
||||
--gray-500: #adb5bd;
|
||||
--gray-600: #6d757e;
|
||||
--gray-700: #484f56;
|
||||
--gray-800: #353b41;
|
||||
--gray-900: #22262a;
|
||||
--primary: #010156;
|
||||
--secondary: #6d757e;
|
||||
--success: #448344;
|
||||
--info: #30638d;
|
||||
--warning: #ad6200;
|
||||
--danger: #a51f18;
|
||||
--light: #f9fafb;
|
||||
--dark: #353b41;
|
||||
--primary-rgb: 1, 1, 86;
|
||||
--secondary-rgb: 109, 117, 126;
|
||||
--success-rgb: 68, 131, 68;
|
||||
--info-rgb: 48, 99, 141;
|
||||
--warning-rgb: 173, 98, 0;
|
||||
--danger-rgb: 165, 31, 24;
|
||||
--light-rgb: 249, 250, 251;
|
||||
--dark-rgb: 53, 59, 65;
|
||||
--primary-text-emphasis: #002;
|
||||
--secondary-text-emphasis: #2c2f32;
|
||||
--success-text-emphasis: #1b351b;
|
||||
--info-text-emphasis: #132838;
|
||||
--warning-text-emphasis: #452700;
|
||||
--danger-text-emphasis: #420c09;
|
||||
--light-text-emphasis: #484f56;
|
||||
--dark-text-emphasis: #484f56;
|
||||
--primary-bg-subtle: #ccd;
|
||||
--secondary-bg-subtle: #e2e3e5;
|
||||
--success-bg-subtle: #dae6da;
|
||||
--info-bg-subtle: #d6e0e8;
|
||||
--warning-bg-subtle: #efe0cc;
|
||||
--danger-bg-subtle: #edd2d1;
|
||||
--light-bg-subtle: #fcfcfd;
|
||||
--dark-bg-subtle: #ced4da;
|
||||
--primary-border-subtle: #99b;
|
||||
--secondary-border-subtle: #c5c8cb;
|
||||
--success-border-subtle: #b4ceb4;
|
||||
--info-border-subtle: #acc1d1;
|
||||
--warning-border-subtle: #dec099;
|
||||
--danger-border-subtle: #dba5a2;
|
||||
--light-border-subtle: #eaedf0;
|
||||
--dark-border-subtle: #adb5bd;
|
||||
--white-rgb: 255, 255, 255;
|
||||
--black-rgb: 0, 0, 0;
|
||||
--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--gradient: linear-gradient(180deg, #ffffff26, #fff0);
|
||||
--body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
||||
--body-font-size: 1rem;
|
||||
--body-font-weight: 400;
|
||||
--body-line-height: 1.5;
|
||||
--body-color: #22262a;
|
||||
--body-color-rgb: 34, 38, 42;
|
||||
--body-bg: #fff;
|
||||
--body-bg-rgb: 255, 255, 255;
|
||||
--emphasis-color: #000;
|
||||
--emphasis-color-rgb: 0, 0, 0;
|
||||
--secondary-color: #22262abf;
|
||||
--secondary-color-rgb: 34, 38, 42;
|
||||
--secondary-bg: #eaedf0;
|
||||
--secondary-bg-rgb: 234, 237, 240;
|
||||
--tertiary-color: #22262a80;
|
||||
--tertiary-color-rgb: 34, 38, 42;
|
||||
--tertiary-bg: #f9fafb;
|
||||
--tertiary-bg-rgb: 249, 250, 251;
|
||||
--heading-color: inherit;
|
||||
--link-color: #224faa;
|
||||
--link-color-rgb: 34, 79, 170;
|
||||
--link-decoration: underline;
|
||||
--link-hover-color: #424077;
|
||||
--link-hover-color-rgb: 66, 64, 119;
|
||||
--code-color: #e93f8e;
|
||||
--highlight-color: #22262a;
|
||||
--highlight-bg: #fbeea8;
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border-color: #dfe3e7;
|
||||
--border-color-translucent: #0000002d;
|
||||
--border-radius: .25rem;
|
||||
--border-radius-sm: .2rem;
|
||||
--border-radius-lg: .3rem;
|
||||
--border-radius-xl: .3rem;
|
||||
--border-radius-xxl: 2rem;
|
||||
--border-radius-2xl: var(--border-radius-xxl)*2;
|
||||
--border-radius-pill: 50rem;
|
||||
--box-shadow: 0 .5rem 1rem #00000026;
|
||||
--box-shadow-sm: 0 .125rem .25rem #00000013;
|
||||
--box-shadow-lg: 0 1rem 3rem #0000002d;
|
||||
--box-shadow-inset: inset 0 1px 2px #00000013;
|
||||
--focus-ring-width: .25rem;
|
||||
--focus-ring-opacity: .25;
|
||||
--focus-ring-color: #01015640;
|
||||
--form-valid-color: #448344;
|
||||
--form-valid-border-color: #448344;
|
||||
--form-invalid-color: #a51f18;
|
||||
--form-invalid-border-color: #a51f18;
|
||||
}
|
||||
|
||||
.btn {
|
||||
--btn-padding-x: 1rem;
|
||||
--btn-padding-y: 0.6rem;
|
||||
--btn-font-family: ;
|
||||
--btn-font-size: 1rem;
|
||||
--btn-font-weight: 400;
|
||||
--btn-line-height: 1.5;
|
||||
--btn-color: hsl(210, 11%, 15%);
|
||||
--btn-bg: transparent;
|
||||
--btn-border-width: 1px;
|
||||
--btn-border-color: transparent;
|
||||
--btn-border-radius: 0.25rem;
|
||||
--btn-active-border-color: transparent;
|
||||
--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
--btn-disabled-opacity: 0.65;
|
||||
--btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5);
|
||||
display: inline-block;
|
||||
padding: var(--btn-padding-y) var(--btn-padding-x);
|
||||
font-family: var(--btn-font-family);
|
||||
font-size: var(--btn-font-size);
|
||||
font-weight: var(--btn-font-weight);
|
||||
line-height: var(--btn-line-height);
|
||||
color: var(--btn-color);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
border: var(--btn-border-width) solid var(--btn-border-color);
|
||||
border-radius: var(--btn-border-radius);
|
||||
background-color: var(--btn-bg);
|
||||
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
|
||||
-o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(240, 98%, 17%);
|
||||
--btn-border-color: hsl(240, 98%, 17%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #010149;
|
||||
--btn-hover-border-color: #010145;
|
||||
--btn-focus-shadow-rgb: 39, 39, 111;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #010145;
|
||||
--btn-active-border-color: #010141;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(240, 98%, 17%);
|
||||
--btn-disabled-border-color: hsl(240, 98%, 17%);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
--btn-color: --nav-text-color;
|
||||
--btn-bg: --nav-bg-color;
|
||||
--btn-border-color: hsl(210, 7%, 46%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #5d636b;
|
||||
--btn-hover-border-color: #575e65;
|
||||
--btn-focus-shadow-rgb: gray;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #575e65;
|
||||
--btn-active-border-color: #52585f;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(210, 7%, 46%);
|
||||
--btn-disabled-border-color: hsl(210, 7%, 46%);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(120, 32%, 39%);
|
||||
--btn-border-color: hsl(120, 32%, 39%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #3a6f3a;
|
||||
--btn-hover-border-color: #366936;
|
||||
--btn-focus-shadow-rgb: 96, 150, 96;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #366936;
|
||||
--btn-active-border-color: #336233;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(120, 32%, 39%);
|
||||
--btn-disabled-border-color: hsl(120, 32%, 39%);
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(207, 49%, 37%);
|
||||
--btn-border-color: hsl(207, 49%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #295478;
|
||||
--btn-hover-border-color: #264f71;
|
||||
--btn-focus-shadow-rgb: 79, 122, 158;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #264f71;
|
||||
--btn-active-border-color: #244a6a;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(207, 49%, 37%);
|
||||
--btn-disabled-border-color: hsl(207, 49%, 37%);
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(34, 100%, 34%);
|
||||
--btn-border-color: hsl(34, 100%, 34%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #935300;
|
||||
--btn-hover-border-color: #8a4e00;
|
||||
--btn-focus-shadow-rgb: 185, 122, 38;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #8a4e00;
|
||||
--btn-active-border-color: #824a00;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(34, 100%, 34%);
|
||||
--btn-disabled-border-color: hsl(34, 100%, 34%);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(3, 75%, 37%);
|
||||
--btn-border-color: hsl(3, 75%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #8c1a14;
|
||||
--btn-hover-border-color: #841913;
|
||||
--btn-focus-shadow-rgb: 179, 65, 59;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #841913;
|
||||
--btn-active-border-color: #7c1712;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(3, 75%, 37%);
|
||||
--btn-disabled-border-color: hsl(3, 75%, 37%);
|
||||
}
|
||||
|
||||
.btn-light {
|
||||
--btn-color: hsl(0, 0%, 0%);
|
||||
--btn-bg: hsl(210, 17%, 98%);
|
||||
--btn-border-color: hsl(210, 17%, 98%);
|
||||
--btn-hover-color: hsl(0, 0%, 0%);
|
||||
--btn-hover-bg: #d4d5d5;
|
||||
--btn-hover-border-color: #c7c8c9;
|
||||
--btn-focus-shadow-rgb: 212, 213, 213;
|
||||
--btn-active-color: hsl(0, 0%, 0%);
|
||||
--btn-active-bg: #c7c8c9;
|
||||
--btn-active-border-color: #bbbcbc;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 0%);
|
||||
--btn-disabled-bg: hsl(210, 17%, 98%);
|
||||
--btn-disabled-border-color: hsl(210, 17%, 98%);
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(210, 10%, 23%);
|
||||
--btn-border-color: hsl(210, 10%, 23%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #53585e;
|
||||
--btn-hover-border-color: #494f54;
|
||||
--btn-focus-shadow-rgb: 83, 88, 94;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #5d6267;
|
||||
--btn-active-border-color: #494f54;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(210, 10%, 23%);
|
||||
--btn-disabled-border-color: hsl(210, 10%, 23%);
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
--btn-color: hsl(240, 98%, 17%);
|
||||
--btn-border-color: hsl(240, 98%, 17%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(240, 98%, 17%);
|
||||
--btn-hover-border-color: hsl(240, 98%, 17%);
|
||||
--btn-focus-shadow-rgb: 1, 1, 86;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(240, 98%, 17%);
|
||||
--btn-active-border-color: hsl(240, 98%, 17%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(240, 98%, 17%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(240, 98%, 17%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
--btn-color: hsl(210, 7%, 46%);
|
||||
--btn-border-color: hsl(210, 7%, 46%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(210, 7%, 46%);
|
||||
--btn-hover-border-color: hsl(210, 7%, 46%);
|
||||
--btn-focus-shadow-rgb: 109, 117, 126;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(210, 7%, 46%);
|
||||
--btn-active-border-color: hsl(210, 7%, 46%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 7%, 46%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 7%, 46%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-success {
|
||||
--btn-color: hsl(120, 32%, 39%);
|
||||
--btn-border-color: hsl(120, 32%, 39%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(120, 32%, 39%);
|
||||
--btn-hover-border-color: hsl(120, 32%, 39%);
|
||||
--btn-focus-shadow-rgb: 68, 131, 68;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(120, 32%, 39%);
|
||||
--btn-active-border-color: hsl(120, 32%, 39%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(120, 32%, 39%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(120, 32%, 39%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-info {
|
||||
--btn-color: hsl(207, 49%, 37%);
|
||||
--btn-border-color: hsl(207, 49%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(207, 49%, 37%);
|
||||
--btn-hover-border-color: hsl(207, 49%, 37%);
|
||||
--btn-focus-shadow-rgb: 48, 99, 141;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(207, 49%, 37%);
|
||||
--btn-active-border-color: hsl(207, 49%, 37%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(207, 49%, 37%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(207, 49%, 37%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-warning {
|
||||
--btn-color: hsl(34, 100%, 34%);
|
||||
--btn-border-color: hsl(34, 100%, 34%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(34, 100%, 34%);
|
||||
--btn-hover-border-color: hsl(34, 100%, 34%);
|
||||
--btn-focus-shadow-rgb: 173, 98, 0;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(34, 100%, 34%);
|
||||
--btn-active-border-color: hsl(34, 100%, 34%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(34, 100%, 34%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(34, 100%, 34%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-danger {
|
||||
--btn-color: hsl(3, 75%, 37%);
|
||||
--btn-border-color: hsl(3, 75%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(3, 75%, 37%);
|
||||
--btn-hover-border-color: hsl(3, 75%, 37%);
|
||||
--btn-focus-shadow-rgb: 165, 31, 24;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(3, 75%, 37%);
|
||||
--btn-active-border-color: hsl(3, 75%, 37%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(3, 75%, 37%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(3, 75%, 37%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
--btn-color: hsl(210, 17%, 98%);
|
||||
--btn-border-color: hsl(210, 17%, 98%);
|
||||
--btn-hover-color: hsl(0, 0%, 0%);
|
||||
--btn-hover-bg: hsl(210, 17%, 98%);
|
||||
--btn-hover-border-color: hsl(210, 17%, 98%);
|
||||
--btn-focus-shadow-rgb: 249, 250, 251;
|
||||
--btn-active-color: hsl(0, 0%, 0%);
|
||||
--btn-active-bg: hsl(210, 17%, 98%);
|
||||
--btn-active-border-color: hsl(210, 17%, 98%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 17%, 98%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 17%, 98%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
--btn-color: hsl(210, 10%, 23%);
|
||||
--btn-border-color: hsl(210, 10%, 23%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(210, 10%, 23%);
|
||||
--btn-hover-border-color: hsl(210, 10%, 23%);
|
||||
--btn-focus-shadow-rgb: 53, 59, 65;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(210, 10%, 23%);
|
||||
--btn-active-border-color: hsl(210, 10%, 23%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 10%, 23%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 10%, 23%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
--btn-font-weight: 400;
|
||||
--btn-color: var(--link-color);
|
||||
--btn-bg: transparent;
|
||||
--btn-border-color: transparent;
|
||||
--btn-hover-color: var(--link-hover-color);
|
||||
--btn-hover-border-color: transparent;
|
||||
--btn-active-color: var(--link-hover-color);
|
||||
--btn-active-border-color: transparent;
|
||||
--btn-disabled-color: hsl(210, 7%, 46%);
|
||||
--btn-disabled-border-color: transparent;
|
||||
--btn-box-shadow: none;
|
||||
--btn-focus-shadow-rgb: 39, 39, 111;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -1,551 +0,0 @@
|
||||
/*!
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.moko-cassiopeia
|
||||
* @file /media/templates/sote/moko-cassiopeia/css/global/light/colors_standard.css
|
||||
*
|
||||
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
*
|
||||
* Website: https://mokoconsulting.tech
|
||||
* Email: hello@mokoconsulting.tech
|
||||
* Phone: +1 (931) 279-6313
|
||||
*/
|
||||
|
||||
/* -----------------------------------------------
|
||||
* LIGHT THEME
|
||||
* --------------------------------------------- */
|
||||
|
||||
:root[data-bs-theme="light"] {
|
||||
color-scheme: light;
|
||||
--color-primary: #112855;
|
||||
--accent-color-primary: #3f8ff0;
|
||||
--accent-color-secondary: #3f8ff0;
|
||||
|
||||
--mainmenu-nav-link-color: white;
|
||||
|
||||
--color-link: #224FAA;
|
||||
--color-hover: var(--accent-color-primary);
|
||||
|
||||
--header-background-image: url('../../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg');
|
||||
--header-background-attachment: fixed;
|
||||
--header-background-repeat: repeat;
|
||||
--header-background-size: auto;
|
||||
|
||||
--container-below-topbar-bg-image: ;
|
||||
--container-below-topbar-bg-color ;
|
||||
--container-below-topbar-bg-position: auto;
|
||||
--container-below-topbar-bg-attachment: fixed;
|
||||
--container-below-topbar-bg-repeat: repeat;
|
||||
--container-below-topbar-bg-size: auto;
|
||||
--container-below-topbar-border: ;
|
||||
--container-below-topbar-border-radius: ;
|
||||
|
||||
--container-top-a-bg-image: ;
|
||||
--container-top-a-bg-color: ;
|
||||
--container-top-a-bg-position: auto;
|
||||
--container-top-a-bg-attachment: fixed;
|
||||
--container-top-a-bg-repeat: repeat;
|
||||
--container-top-a-bg-size: auto;
|
||||
--container-top-a-border: ;
|
||||
--container-top-a-border-radius: ;
|
||||
|
||||
--container-top-b-bg-image: ;
|
||||
--container-top-b-bg-color: ;
|
||||
--container-top-b-bg-position: auto;
|
||||
--container-top-b-bg-attachment: fixed;
|
||||
--container-top-b-bg-repeat: repeat;
|
||||
--container-top-b-bg-size: auto;
|
||||
--container-top-b-border: ;
|
||||
--container-top-b-border-radius: ;
|
||||
|
||||
--container-toc-bg: var(--mainmenu-nav-link-color);
|
||||
--container-toc-color: var(--color-primary);
|
||||
|
||||
--container-sidebar-bg-image: ;
|
||||
--container-sidebar-bg-color: ;
|
||||
--container-sidebar-bg-position: auto;
|
||||
--container-sidebar-bg-attachment: scroll;
|
||||
--container-sidebar-bg-repeat: repeat;
|
||||
--container-sidebar-bg-size: auto;
|
||||
--container-sidebar-border: ;
|
||||
--container-sidebar-border-radius: ;
|
||||
|
||||
--container-bottom-a-bg-image: ;
|
||||
--container-bottom-a-bg-color: ;
|
||||
--container-bottom-a-bg-position: auto;
|
||||
--container-bottom-a-bg-attachment: fixed;
|
||||
--container-bottom-a-bg-repeat: repeat;
|
||||
--container-bottom-a-bg-size: auto;
|
||||
--container-bottom-a-border: ;
|
||||
--container-bottom-a-border-radius: ;
|
||||
|
||||
--container-bottom-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: ;
|
||||
--container-bottom-b-bg-position: auto;
|
||||
--container-bottom-b-bg-attachment: fixed;
|
||||
--container-bottom-b-bg-repeat: repeat;
|
||||
--container-bottom-b-bg-size: auto;
|
||||
--container-bottom-b-border: ;
|
||||
--container-bottom-b-border-radius: ;
|
||||
|
||||
--nav-text-color: var(--mainmenu-nav-link-color);
|
||||
--nav-bg-color: var(--color-link);
|
||||
--border: 5px;
|
||||
|
||||
--muted-color: #6d757e;
|
||||
--hr-color: var(--border-color, #dfe3e7);
|
||||
--link-active-color: var(--link-color);
|
||||
--code-color-ink: var(--code-color, #e93f8e);
|
||||
--border-color-soft: var(--border-color, #dfe3e7);
|
||||
--kbd-bg: var(--secondary-bg, #eaedf0);
|
||||
--kbd-ink: var(--body-bg, #fff);
|
||||
--toc-bg: var(--secondary-bg, #eaedf0);
|
||||
--toc-ink: var(--color-primary, #112855);
|
||||
--selection-bg: var(--highlight-bg, #fbeea8);
|
||||
--selection-ink: var(--body-color, #22262a);
|
||||
|
||||
--blue: #010156;
|
||||
--black: #000;
|
||||
--indigo: #6812f3;
|
||||
--purple: #6f42c2;
|
||||
--pink: #e93f8e;
|
||||
--red: #a51f18;
|
||||
--orange: #fd7e17;
|
||||
--yellow: #ad6200;
|
||||
--green: #448344;
|
||||
--teal: #5abfdd;
|
||||
--cyan: #30638d;
|
||||
--white: #fff;
|
||||
--gray-100: #f9fafb;
|
||||
--gray-200: #eaedf0;
|
||||
--gray-300: #dfe3e7;
|
||||
--gray-400: #ced4da;
|
||||
--gray-500: #adb5bd;
|
||||
--gray-600: #6d757e;
|
||||
--gray-700: #484f56;
|
||||
--gray-800: #353b41;
|
||||
--gray-900: #22262a;
|
||||
--primary: #010156;
|
||||
--secondary: #6d757e;
|
||||
--success: #448344;
|
||||
--info: #30638d;
|
||||
--warning: #ad6200;
|
||||
--danger: #a51f18;
|
||||
--light: #f9fafb;
|
||||
--dark: #353b41;
|
||||
--primary-rgb: 1, 1, 86;
|
||||
--secondary-rgb: 109, 117, 126;
|
||||
--success-rgb: 68, 131, 68;
|
||||
--info-rgb: 48, 99, 141;
|
||||
--warning-rgb: 173, 98, 0;
|
||||
--danger-rgb: 165, 31, 24;
|
||||
--light-rgb: 249, 250, 251;
|
||||
--dark-rgb: 53, 59, 65;
|
||||
--primary-text-emphasis: #002;
|
||||
--secondary-text-emphasis: #2c2f32;
|
||||
--success-text-emphasis: #1b351b;
|
||||
--info-text-emphasis: #132838;
|
||||
--warning-text-emphasis: #452700;
|
||||
--danger-text-emphasis: #420c09;
|
||||
--light-text-emphasis: #484f56;
|
||||
--dark-text-emphasis: #484f56;
|
||||
--primary-bg-subtle: #ccd;
|
||||
--secondary-bg-subtle: #e2e3e5;
|
||||
--success-bg-subtle: #dae6da;
|
||||
--info-bg-subtle: #d6e0e8;
|
||||
--warning-bg-subtle: #efe0cc;
|
||||
--danger-bg-subtle: #edd2d1;
|
||||
--light-bg-subtle: #fcfcfd;
|
||||
--dark-bg-subtle: #ced4da;
|
||||
--primary-border-subtle: #99b;
|
||||
--secondary-border-subtle: #c5c8cb;
|
||||
--success-border-subtle: #b4ceb4;
|
||||
--info-border-subtle: #acc1d1;
|
||||
--warning-border-subtle: #dec099;
|
||||
--danger-border-subtle: #dba5a2;
|
||||
--light-border-subtle: #eaedf0;
|
||||
--dark-border-subtle: #adb5bd;
|
||||
--white-rgb: 255, 255, 255;
|
||||
--black-rgb: 0, 0, 0;
|
||||
--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--gradient: linear-gradient(180deg, #ffffff26, #fff0);
|
||||
--body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
||||
--body-font-size: 1rem;
|
||||
--body-font-weight: 400;
|
||||
--body-line-height: 1.5;
|
||||
--body-color: #22262a;
|
||||
--body-color-rgb: 34, 38, 42;
|
||||
--body-bg: #fff;
|
||||
--body-bg-rgb: 255, 255, 255;
|
||||
--emphasis-color: #000;
|
||||
--emphasis-color-rgb: 0, 0, 0;
|
||||
--secondary-color: #22262abf;
|
||||
--secondary-color-rgb: 34, 38, 42;
|
||||
--secondary-bg: #eaedf0;
|
||||
--secondary-bg-rgb: 234, 237, 240;
|
||||
--tertiary-color: #22262a80;
|
||||
--tertiary-color-rgb: 34, 38, 42;
|
||||
--tertiary-bg: #f9fafb;
|
||||
--tertiary-bg-rgb: 249, 250, 251;
|
||||
--heading-color: inherit;
|
||||
--link-color: #224faa;
|
||||
--link-color-rgb: 34, 79, 170;
|
||||
--link-decoration: underline;
|
||||
--link-hover-color: #424077;
|
||||
--link-hover-color-rgb: 66, 64, 119;
|
||||
--code-color: #e93f8e;
|
||||
--highlight-color: #22262a;
|
||||
--highlight-bg: #fbeea8;
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border-color: #dfe3e7;
|
||||
--border-color-translucent: #0000002d;
|
||||
--border-radius: .25rem;
|
||||
--border-radius-sm: .2rem;
|
||||
--border-radius-lg: .3rem;
|
||||
--border-radius-xl: .3rem;
|
||||
--border-radius-xxl: 2rem;
|
||||
--border-radius-2xl: var(--border-radius-xxl)*2;
|
||||
--border-radius-pill: 50rem;
|
||||
--box-shadow: 0 .5rem 1rem #00000026;
|
||||
--box-shadow-sm: 0 .125rem .25rem #00000013;
|
||||
--box-shadow-lg: 0 1rem 3rem #0000002d;
|
||||
--box-shadow-inset: inset 0 1px 2px #00000013;
|
||||
--focus-ring-width: .25rem;
|
||||
--focus-ring-opacity: .25;
|
||||
--focus-ring-color: #01015640;
|
||||
--form-valid-color: #448344;
|
||||
--form-valid-border-color: #448344;
|
||||
--form-invalid-color: #a51f18;
|
||||
--form-invalid-border-color: #a51f18;
|
||||
}
|
||||
|
||||
.btn {
|
||||
--btn-padding-x: 1rem;
|
||||
--btn-padding-y: 0.6rem;
|
||||
--btn-font-family: ;
|
||||
--btn-font-size: 1rem;
|
||||
--btn-font-weight: 400;
|
||||
--btn-line-height: 1.5;
|
||||
--btn-color: hsl(210, 11%, 15%);
|
||||
--btn-bg: transparent;
|
||||
--btn-border-width: 1px;
|
||||
--btn-border-color: transparent;
|
||||
--btn-border-radius: 0.25rem;
|
||||
--btn-active-border-color: transparent;
|
||||
--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
--btn-disabled-opacity: 0.65;
|
||||
--btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5);
|
||||
display: inline-block;
|
||||
padding: var(--btn-padding-y) var(--btn-padding-x);
|
||||
font-family: var(--btn-font-family);
|
||||
font-size: var(--btn-font-size);
|
||||
font-weight: var(--btn-font-weight);
|
||||
line-height: var(--btn-line-height);
|
||||
color: var(--btn-color);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
border: var(--btn-border-width) solid var(--btn-border-color);
|
||||
border-radius: var(--btn-border-radius);
|
||||
background-color: var(--btn-bg);
|
||||
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
|
||||
-o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(240, 98%, 17%);
|
||||
--btn-border-color: hsl(240, 98%, 17%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #010149;
|
||||
--btn-hover-border-color: #010145;
|
||||
--btn-focus-shadow-rgb: 39, 39, 111;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #010145;
|
||||
--btn-active-border-color: #010141;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(240, 98%, 17%);
|
||||
--btn-disabled-border-color: hsl(240, 98%, 17%);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
--btn-color: --nav-text-color;
|
||||
--btn-bg: --nav-bg-color;
|
||||
--btn-border-color: hsl(210, 7%, 46%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #5d636b;
|
||||
--btn-hover-border-color: #575e65;
|
||||
--btn-focus-shadow-rgb: gray;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #575e65;
|
||||
--btn-active-border-color: #52585f;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(210, 7%, 46%);
|
||||
--btn-disabled-border-color: hsl(210, 7%, 46%);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(120, 32%, 39%);
|
||||
--btn-border-color: hsl(120, 32%, 39%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #3a6f3a;
|
||||
--btn-hover-border-color: #366936;
|
||||
--btn-focus-shadow-rgb: 96, 150, 96;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #366936;
|
||||
--btn-active-border-color: #336233;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(120, 32%, 39%);
|
||||
--btn-disabled-border-color: hsl(120, 32%, 39%);
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(207, 49%, 37%);
|
||||
--btn-border-color: hsl(207, 49%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #295478;
|
||||
--btn-hover-border-color: #264f71;
|
||||
--btn-focus-shadow-rgb: 79, 122, 158;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #264f71;
|
||||
--btn-active-border-color: #244a6a;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(207, 49%, 37%);
|
||||
--btn-disabled-border-color: hsl(207, 49%, 37%);
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(34, 100%, 34%);
|
||||
--btn-border-color: hsl(34, 100%, 34%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #935300;
|
||||
--btn-hover-border-color: #8a4e00;
|
||||
--btn-focus-shadow-rgb: 185, 122, 38;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #8a4e00;
|
||||
--btn-active-border-color: #824a00;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(34, 100%, 34%);
|
||||
--btn-disabled-border-color: hsl(34, 100%, 34%);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(3, 75%, 37%);
|
||||
--btn-border-color: hsl(3, 75%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #8c1a14;
|
||||
--btn-hover-border-color: #841913;
|
||||
--btn-focus-shadow-rgb: 179, 65, 59;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #841913;
|
||||
--btn-active-border-color: #7c1712;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(3, 75%, 37%);
|
||||
--btn-disabled-border-color: hsl(3, 75%, 37%);
|
||||
}
|
||||
|
||||
.btn-light {
|
||||
--btn-color: hsl(0, 0%, 0%);
|
||||
--btn-bg: hsl(210, 17%, 98%);
|
||||
--btn-border-color: hsl(210, 17%, 98%);
|
||||
--btn-hover-color: hsl(0, 0%, 0%);
|
||||
--btn-hover-bg: #d4d5d5;
|
||||
--btn-hover-border-color: #c7c8c9;
|
||||
--btn-focus-shadow-rgb: 212, 213, 213;
|
||||
--btn-active-color: hsl(0, 0%, 0%);
|
||||
--btn-active-bg: #c7c8c9;
|
||||
--btn-active-border-color: #bbbcbc;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 0%);
|
||||
--btn-disabled-bg: hsl(210, 17%, 98%);
|
||||
--btn-disabled-border-color: hsl(210, 17%, 98%);
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(210, 10%, 23%);
|
||||
--btn-border-color: hsl(210, 10%, 23%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #53585e;
|
||||
--btn-hover-border-color: #494f54;
|
||||
--btn-focus-shadow-rgb: 83, 88, 94;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #5d6267;
|
||||
--btn-active-border-color: #494f54;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(210, 10%, 23%);
|
||||
--btn-disabled-border-color: hsl(210, 10%, 23%);
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
--btn-color: hsl(240, 98%, 17%);
|
||||
--btn-border-color: hsl(240, 98%, 17%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(240, 98%, 17%);
|
||||
--btn-hover-border-color: hsl(240, 98%, 17%);
|
||||
--btn-focus-shadow-rgb: 1, 1, 86;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(240, 98%, 17%);
|
||||
--btn-active-border-color: hsl(240, 98%, 17%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(240, 98%, 17%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(240, 98%, 17%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
--btn-color: hsl(210, 7%, 46%);
|
||||
--btn-border-color: hsl(210, 7%, 46%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(210, 7%, 46%);
|
||||
--btn-hover-border-color: hsl(210, 7%, 46%);
|
||||
--btn-focus-shadow-rgb: 109, 117, 126;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(210, 7%, 46%);
|
||||
--btn-active-border-color: hsl(210, 7%, 46%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 7%, 46%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 7%, 46%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-success {
|
||||
--btn-color: hsl(120, 32%, 39%);
|
||||
--btn-border-color: hsl(120, 32%, 39%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(120, 32%, 39%);
|
||||
--btn-hover-border-color: hsl(120, 32%, 39%);
|
||||
--btn-focus-shadow-rgb: 68, 131, 68;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(120, 32%, 39%);
|
||||
--btn-active-border-color: hsl(120, 32%, 39%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(120, 32%, 39%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(120, 32%, 39%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-info {
|
||||
--btn-color: hsl(207, 49%, 37%);
|
||||
--btn-border-color: hsl(207, 49%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(207, 49%, 37%);
|
||||
--btn-hover-border-color: hsl(207, 49%, 37%);
|
||||
--btn-focus-shadow-rgb: 48, 99, 141;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(207, 49%, 37%);
|
||||
--btn-active-border-color: hsl(207, 49%, 37%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(207, 49%, 37%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(207, 49%, 37%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-warning {
|
||||
--btn-color: hsl(34, 100%, 34%);
|
||||
--btn-border-color: hsl(34, 100%, 34%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(34, 100%, 34%);
|
||||
--btn-hover-border-color: hsl(34, 100%, 34%);
|
||||
--btn-focus-shadow-rgb: 173, 98, 0;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(34, 100%, 34%);
|
||||
--btn-active-border-color: hsl(34, 100%, 34%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(34, 100%, 34%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(34, 100%, 34%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-danger {
|
||||
--btn-color: hsl(3, 75%, 37%);
|
||||
--btn-border-color: hsl(3, 75%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(3, 75%, 37%);
|
||||
--btn-hover-border-color: hsl(3, 75%, 37%);
|
||||
--btn-focus-shadow-rgb: 165, 31, 24;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(3, 75%, 37%);
|
||||
--btn-active-border-color: hsl(3, 75%, 37%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(3, 75%, 37%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(3, 75%, 37%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
--btn-color: hsl(210, 17%, 98%);
|
||||
--btn-border-color: hsl(210, 17%, 98%);
|
||||
--btn-hover-color: hsl(0, 0%, 0%);
|
||||
--btn-hover-bg: hsl(210, 17%, 98%);
|
||||
--btn-hover-border-color: hsl(210, 17%, 98%);
|
||||
--btn-focus-shadow-rgb: 249, 250, 251;
|
||||
--btn-active-color: hsl(0, 0%, 0%);
|
||||
--btn-active-bg: hsl(210, 17%, 98%);
|
||||
--btn-active-border-color: hsl(210, 17%, 98%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 17%, 98%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 17%, 98%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
--btn-color: hsl(210, 10%, 23%);
|
||||
--btn-border-color: hsl(210, 10%, 23%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(210, 10%, 23%);
|
||||
--btn-hover-border-color: hsl(210, 10%, 23%);
|
||||
--btn-focus-shadow-rgb: 53, 59, 65;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(210, 10%, 23%);
|
||||
--btn-active-border-color: hsl(210, 10%, 23%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 10%, 23%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 10%, 23%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
--btn-font-weight: 400;
|
||||
--btn-color: var(--link-color);
|
||||
--btn-bg: transparent;
|
||||
--btn-border-color: transparent;
|
||||
--btn-hover-color: var(--link-hover-color);
|
||||
--btn-hover-border-color: transparent;
|
||||
--btn-active-color: var(--link-hover-color);
|
||||
--btn-active-border-color: transparent;
|
||||
--btn-disabled-color: hsl(210, 7%, 46%);
|
||||
--btn-disabled-border-color: transparent;
|
||||
--btn-box-shadow: none;
|
||||
--btn-focus-shadow-rgb: 39, 39, 111;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -1,118 +0,0 @@
|
||||
<!--
|
||||
* Copyright (C) 2025 Moko Consulting <jmiller@mokoconsulting.tech>
|
||||
*
|
||||
* 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.Site
|
||||
* INGROUP: Templates.Moko-Cassiopeia
|
||||
* FILE: index.html
|
||||
* BRIEF: Security redirect page to block folder access and forward to site root.
|
||||
-->
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Redirecting…</title>
|
||||
|
||||
<!-- Search engines: do not index this placeholder redirect page -->
|
||||
<meta name="robots" content="noindex, nofollow, noarchive" />
|
||||
|
||||
<!-- Instant redirect fallback even if JavaScript is disabled -->
|
||||
<meta http-equiv="refresh" content="0; url=/" />
|
||||
|
||||
<!-- Canonical root reference -->
|
||||
<link rel="canonical" href="/" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<script>
|
||||
/**
|
||||
* @defgroup Dolibarr
|
||||
* @file index.html (embedded script)
|
||||
* @version 1.0.0
|
||||
* @brief Security redirect logic. Replaces the current history entry with the site root.
|
||||
* @details This script computes the absolute root URL using `location.origin` and
|
||||
* forwards the user immediately. It prevents leaving the protected folder
|
||||
* in the browser history by default.
|
||||
*
|
||||
* @section VARIABLES
|
||||
* @var {Object} opts Configuration options for the redirect behavior.
|
||||
* @var {string} opts.fallbackPath Path used when `location.origin` cannot be determined.
|
||||
* @var {number} opts.delayMs Optional delay in milliseconds before redirecting.
|
||||
* @var {"replace"|"assign"} opts.behavior Navigation method used for the redirect.
|
||||
*
|
||||
* @section OPTIONS
|
||||
* - opts.fallbackPath: default "/" (root path)
|
||||
* - opts.delayMs: default 0 (immediate)
|
||||
* - opts.behavior: one of
|
||||
* * "replace" — calls `location.replace(url)`; does not keep the folder page in history.
|
||||
* * "assign" — calls `location.assign(url)`; keeps an extra history entry.
|
||||
*/
|
||||
(function redirectToRoot() {
|
||||
// Configuration object with safe defaults.
|
||||
var opts = {
|
||||
fallbackPath: "/", // string: fallback destination if origin is unavailable
|
||||
delayMs: 0, // number: delay before redirect in ms (0 = immediate)
|
||||
behavior: "replace" // enum: "replace" | "assign"
|
||||
};
|
||||
|
||||
// Determine absolute origin in all mainstream browsers.
|
||||
var origin = (typeof location.origin === "string" && location.origin)
|
||||
|| (location.protocol + "//" + location.host);
|
||||
|
||||
// Final destination: absolute root of the current site, or fallback path.
|
||||
var destination = origin ? origin + "/" : opts.fallbackPath;
|
||||
|
||||
function go() {
|
||||
if (opts.behavior === "assign") {
|
||||
location.assign(destination);
|
||||
} else {
|
||||
location.replace(destination);
|
||||
}
|
||||
}
|
||||
|
||||
// Execute redirect, optionally after a short delay.
|
||||
if (opts.delayMs > 0) {
|
||||
setTimeout(go, opts.delayMs);
|
||||
} else {
|
||||
go();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--
|
||||
Secondary meta-refresh for no-JS environments is already set above.
|
||||
Some very old crawlers may ignore JS; the meta refresh ensures coverage.
|
||||
-->
|
||||
|
||||
<noscript>
|
||||
<!-- Extra defense-in-depth: if JS is disabled, meta refresh (above) handles redirect. -->
|
||||
<style>
|
||||
html, body { height:100%; }
|
||||
body { display:flex; align-items:center; justify-content:center; margin:0; font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
|
||||
.msg { opacity: .75; text-align: center; }
|
||||
</style>
|
||||
</noscript>
|
||||
</head>
|
||||
<body>
|
||||
<div class="msg">Redirecting to the site root… If you are not redirected, <a href="/">click here</a>.</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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 <hello@mokoconsulting.tech>
|
||||
*
|
||||
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
|
||||
* @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
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
/* -----------------------------------------------
|
||||
@@ -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 <hello@mokoconsulting.tech>
|
||||
*
|
||||
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
|
||||
* @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
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
/* -----------------------------------------------
|
||||
@@ -1,126 +1,156 @@
|
||||
@charset "UTF-8";
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* 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;
|
||||
--font-family-body: "Roboto", sans-serif;
|
||||
--font-family-headings: "Roboto", sans-serif;
|
||||
--font-weight-headings: 700;
|
||||
--font-weight-normal: 400;
|
||||
}
|
||||
@@ -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 <hello@mokoconsulting.tech>
|
||||
*
|
||||
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
|
||||
* @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
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
/* -----------------------------------------------
|
||||
@@ -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 <hello@mokoconsulting.tech>
|
||||
*
|
||||
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
|
||||
* @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
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
/* -----------------------------------------------
|
||||
@@ -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 <hello@mokoconsulting.tech>
|
||||
*
|
||||
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
|
||||
* @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 <div class="social-media-demo"> ... </div>
|
||||
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 */
|
||||
|
||||
@@ -1,49 +1,79 @@
|
||||
@charset "UTF-8";
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* 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;
|
||||
width: auto;
|
||||
}
|
||||
@@ -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 <hello@mokoconsulting.tech>
|
||||
*
|
||||
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
|
||||
* @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%;
|
||||
|
||||
@@ -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 <hello@mokoconsulting.tech>
|
||||
*
|
||||
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
|
||||
* @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");
|
||||
|
||||
@@ -1,499 +1,528 @@
|
||||
@charset "UTF-8";
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* 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;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
@@ -1,146 +1,176 @@
|
||||
@charset "UTF-8";
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* 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,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg>');
|
||||
background-size: 100%;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg>');
|
||||
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,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"/></svg>');
|
||||
background-size: 100%;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"/></svg>');
|
||||
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,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z"/></svg>');
|
||||
background-size: 100%;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z"/></svg>');
|
||||
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,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"/></svg>');
|
||||
background-size: 100%;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"/></svg>');
|
||||
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);
|
||||
border-top: 1px solid var(--alert-accent-color);
|
||||
}
|
||||
@@ -1,3 +1,33 @@
|
||||
@charset "UTF-8";
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* 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;
|
||||
|
||||
@@ -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 <body data-theme-fab-pos="br|bl|tr|tl"> (default br)
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* 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();
|
||||
}
|
||||
})();
|
||||
|
||||
@@ -0,0 +1,347 @@
|
||||
/*
|
||||
=========================================================================
|
||||
Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
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 <noscript> fallback iframe in your HTML template (index.php). A JS file
|
||||
cannot provide a true no-JS fallback by definition.
|
||||
VARIABLES:
|
||||
- window.MOKO_GTM_ID (string) // Optional global GTM container ID (e.g., "GTM-XXXXXXX")
|
||||
- window.MOKO_GTM_OPTIONS (object) // Optional global options (see JSDoc below)
|
||||
- data- attributes on the script tag or <html>/<body>:
|
||||
data-gtm-id, data-data-layer, data-debug, data-ignore-dnt,
|
||||
data-env-auth, data-env-preview, data-block-on-dev
|
||||
=========================================================================
|
||||
*/
|
||||
|
||||
/* global window, document, navigator */
|
||||
(() => {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* @typedef {Object} MokoGtmOptions
|
||||
* @property {string} [id] GTM container ID (e.g., "GTM-XXXXXXX")
|
||||
* @property {string} [dataLayerName] Custom dataLayer name (default: "dataLayer")
|
||||
* @property {boolean} [debug] Log debug messages to console (default: false)
|
||||
* @property {boolean} [ignoreDNT] Ignore Do Not Track and always load (default: false)
|
||||
* @property {boolean} [blockOnDev] Block loading on localhost/*.test/127.0.0.1 (default: true)
|
||||
* @property {string} [envAuth] GTM Environment auth string (optional)
|
||||
* @property {string} [envPreview] GTM Environment preview name (optional)
|
||||
* @property {Record<string,'granted'|'denied'>} [consentDefault]
|
||||
* Default Consent Mode v2 map. Keys like:
|
||||
* analytics_storage, ad_storage, ad_user_data, ad_personalization, functionality_storage, security_storage
|
||||
* (default: {analytics_storage:'granted', functionality_storage:'granted', security_storage:'granted'})
|
||||
* @property {() => (Record<string, any>|void)} [pageVars]
|
||||
* Function returning extra page variables to push on init (optional)
|
||||
*/
|
||||
|
||||
const PKG = "moko-gtm";
|
||||
const PREFIX = `[${PKG}]`;
|
||||
const WIN = window;
|
||||
|
||||
// Public API placeholder (attached to window at the end)
|
||||
/** @type {{
|
||||
* init: (opts?: Partial<MokoGtmOptions>) => void,
|
||||
* setConsent: (updates: Record<string,'granted'|'denied'>) => void,
|
||||
* push: (...args:any[]) => void,
|
||||
* isLoaded: () => boolean,
|
||||
* config: () => Required<MokoGtmOptions>
|
||||
* }} */
|
||||
const API = {};
|
||||
|
||||
// ---- Utilities ---------------------------------------------------------
|
||||
|
||||
const isDevHost = () => {
|
||||
const h = WIN.location && WIN.location.hostname || "";
|
||||
return (
|
||||
h === "localhost" ||
|
||||
h === "127.0.0.1" ||
|
||||
h.endsWith(".local") ||
|
||||
h.endsWith(".test")
|
||||
);
|
||||
};
|
||||
|
||||
const dntEnabled = () => {
|
||||
// Different browsers expose DNT differently; treat "1" or "yes" as enabled.
|
||||
const n = navigator;
|
||||
const v = (n.doNotTrack || n.msDoNotTrack || (n.navigator && n.navigator.doNotTrack) || "").toString().toLowerCase();
|
||||
return v === "1" || v === "yes";
|
||||
};
|
||||
|
||||
const getCurrentScript = () => {
|
||||
// document.currentScript is best; fallback to last <script> whose src ends with /gtm.js
|
||||
const cs = document.currentScript;
|
||||
if (cs) return cs;
|
||||
const scripts = Array.from(document.getElementsByTagName("script"));
|
||||
return scripts.reverse().find(s => (s.getAttribute("src") || "").includes("/gtm.js")) || null;
|
||||
};
|
||||
|
||||
const getAttr = (el, name) => el ? el.getAttribute(name) : null;
|
||||
|
||||
const readDatasetCascade = (name) => {
|
||||
// Check <script>, <html>, <body>, then <meta name="moko:gtm-<name>">
|
||||
const script = getCurrentScript();
|
||||
const html = document.documentElement;
|
||||
const body = document.body;
|
||||
const meta = document.querySelector(`meta[name="moko:gtm-${name}"]`);
|
||||
return (
|
||||
(script && script.dataset && script.dataset[name]) ||
|
||||
(html && html.dataset && html.dataset[name]) ||
|
||||
(body && body.dataset && body.dataset[name]) ||
|
||||
(meta && meta.getAttribute("content")) ||
|
||||
null
|
||||
);
|
||||
};
|
||||
|
||||
const parseBool = (v, fallback = false) => {
|
||||
if (v == null) return fallback;
|
||||
const s = String(v).trim().toLowerCase();
|
||||
if (["1","true","yes","y","on"].includes(s)) return true;
|
||||
if (["0","false","no","n","off"].includes(s)) return false;
|
||||
return fallback;
|
||||
};
|
||||
|
||||
const debugLog = (...args) => {
|
||||
if (STATE.debug) {
|
||||
try { console.info(PREFIX, ...args); } catch (_) {}
|
||||
}
|
||||
};
|
||||
|
||||
// ---- Configuration & State --------------------------------------------
|
||||
|
||||
/** @type {Required<MokoGtmOptions>} */
|
||||
const STATE = {
|
||||
id: "",
|
||||
dataLayerName: "dataLayer",
|
||||
debug: false,
|
||||
ignoreDNT: false,
|
||||
blockOnDev: true,
|
||||
envAuth: "",
|
||||
envPreview: "",
|
||||
consentDefault: {
|
||||
analytics_storage: "granted",
|
||||
functionality_storage: "granted",
|
||||
security_storage: "granted",
|
||||
// The following default to "denied" unless the site explicitly opts-in:
|
||||
ad_storage: "denied",
|
||||
ad_user_data: "denied",
|
||||
ad_personalization: "denied",
|
||||
},
|
||||
pageVars: () => ({})
|
||||
};
|
||||
|
||||
const mergeOptions = (base, extra = {}) => {
|
||||
const out = {...base};
|
||||
for (const k in extra) {
|
||||
if (!Object.prototype.hasOwnProperty.call(extra, k)) continue;
|
||||
const v = extra[k];
|
||||
if (v && typeof v === "object" && !Array.isArray(v)) {
|
||||
out[k] = {...(out[k] || {}), ...v};
|
||||
} else if (v !== undefined) {
|
||||
out[k] = v;
|
||||
}
|
||||
}
|
||||
return out;
|
||||
};
|
||||
|
||||
const detectOptions = () => {
|
||||
// 1) Global window options
|
||||
/** @type {Partial<MokoGtmOptions>} */
|
||||
const globalOpts = (WIN.MOKO_GTM_OPTIONS && typeof WIN.MOKO_GTM_OPTIONS === "object") ? WIN.MOKO_GTM_OPTIONS : {};
|
||||
|
||||
// 2) Dataset / meta
|
||||
const idFromData = readDatasetCascade("id") || WIN.MOKO_GTM_ID || "";
|
||||
const dlFromData = readDatasetCascade("dataLayer") || "";
|
||||
const dbgFromData = readDatasetCascade("debug");
|
||||
const dntFromData = readDatasetCascade("ignoreDnt");
|
||||
const devFromData = readDatasetCascade("blockOnDev");
|
||||
const authFromData = readDatasetCascade("envAuth") || "";
|
||||
const prevFromData = readDatasetCascade("envPreview") || "";
|
||||
|
||||
// 3) Combine
|
||||
/** @type {Partial<MokoGtmOptions>} */
|
||||
const detected = {
|
||||
id: idFromData || globalOpts.id || "",
|
||||
dataLayerName: dlFromData || globalOpts.dataLayerName || undefined,
|
||||
debug: parseBool(dbgFromData, !!globalOpts.debug),
|
||||
ignoreDNT: parseBool(dntFromData, !!globalOpts.ignoreDNT),
|
||||
blockOnDev: parseBool(devFromData, (globalOpts.blockOnDev ?? true)),
|
||||
envAuth: authFromData || globalOpts.envAuth || "",
|
||||
envPreview: prevFromData || globalOpts.envPreview || "",
|
||||
consentDefault: globalOpts.consentDefault || undefined,
|
||||
pageVars: typeof globalOpts.pageVars === "function" ? globalOpts.pageVars : undefined
|
||||
};
|
||||
|
||||
return detected;
|
||||
};
|
||||
|
||||
// ---- dataLayer / gtag helpers -----------------------------------------
|
||||
|
||||
const ensureDataLayer = () => {
|
||||
const l = STATE.dataLayerName;
|
||||
WIN[l] = WIN[l] || [];
|
||||
return WIN[l];
|
||||
};
|
||||
|
||||
/** gtag wrapper backed by dataLayer. */
|
||||
const gtag = (...args) => {
|
||||
const dl = ensureDataLayer();
|
||||
dl.push(arguments.length > 1 ? args : args[0]);
|
||||
debugLog("gtag push:", args);
|
||||
};
|
||||
|
||||
API.push = (...args) => gtag(...args);
|
||||
|
||||
API.setConsent = (updates) => {
|
||||
gtag("consent", "update", updates || {});
|
||||
};
|
||||
|
||||
API.isLoaded = () => {
|
||||
const hasScript = !!document.querySelector('script[src*="googletagmanager.com/gtm.js"]');
|
||||
return hasScript;
|
||||
};
|
||||
|
||||
API.config = () => ({...STATE});
|
||||
|
||||
// ---- Loader ------------------------------------------------------------
|
||||
|
||||
const buildEnvQuery = () => {
|
||||
const qp = [];
|
||||
if (STATE.envAuth) qp.push(`gtm_auth=${encodeURIComponent(STATE.envAuth)}`);
|
||||
if (STATE.envPreview) qp.push(`gtm_preview=${encodeURIComponent(STATE.envPreview)}`, "gtm_cookies_win=x");
|
||||
return qp.length ? `&${qp.join("&")}` : "";
|
||||
};
|
||||
|
||||
const injectScript = () => {
|
||||
if (!STATE.id) {
|
||||
debugLog("GTM ID missing; aborting load.");
|
||||
return;
|
||||
}
|
||||
if (API.isLoaded()) {
|
||||
debugLog("GTM already loaded; skipping duplicate injection.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Standard GTM bootstrap timing event
|
||||
const dl = ensureDataLayer();
|
||||
dl.push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
|
||||
|
||||
const f = document.getElementsByTagName("script")[0];
|
||||
const j = document.createElement("script");
|
||||
j.async = true;
|
||||
j.src = `https://www.googletagmanager.com/gtm.js?id=${encodeURIComponent(STATE.id)}${STATE.dataLayerName !== "dataLayer" ? `&l=${encodeURIComponent(STATE.dataLayerName)}` : ""}${buildEnvQuery()}`;
|
||||
if (f && f.parentNode) {
|
||||
f.parentNode.insertBefore(j, f);
|
||||
} else {
|
||||
(document.head || document.documentElement).appendChild(j);
|
||||
}
|
||||
debugLog("Injected GTM script:", j.src);
|
||||
};
|
||||
|
||||
const applyDefaultConsent = () => {
|
||||
// Consent Mode v2 default
|
||||
gtag("consent", "default", STATE.consentDefault);
|
||||
debugLog("Applied default consent:", STATE.consentDefault);
|
||||
};
|
||||
|
||||
const pushInitialVars = () => {
|
||||
// Minimal page vars; allow site to add more via pageVars()
|
||||
const vars = {
|
||||
event: "moko.page_init",
|
||||
page_title: document.title || "",
|
||||
page_language: (document.documentElement && document.documentElement.lang) || "",
|
||||
...(typeof STATE.pageVars === "function" ? (STATE.pageVars() || {}) : {})
|
||||
};
|
||||
gtag(vars);
|
||||
};
|
||||
|
||||
const shouldLoad = () => {
|
||||
if (!STATE.ignoreDNT && dntEnabled()) {
|
||||
debugLog("DNT is enabled; blocking GTM load (set ignoreDNT=true to override).");
|
||||
return false;
|
||||
}
|
||||
if (STATE.blockOnDev && isDevHost()) {
|
||||
debugLog("Development host detected; blocking GTM load (set blockOnDev=false to override).");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
// ---- Public init -------------------------------------------------------
|
||||
|
||||
API.init = (opts = {}) => {
|
||||
// Merge: defaults <- detected <- passed opts
|
||||
const detected = detectOptions();
|
||||
const merged = mergeOptions(STATE, mergeOptions(detected, opts));
|
||||
|
||||
// Commit back to STATE
|
||||
Object.assign(STATE, merged);
|
||||
|
||||
debugLog("Config:", STATE);
|
||||
|
||||
// Prepare dataLayer/gtag and consent
|
||||
ensureDataLayer();
|
||||
applyDefaultConsent();
|
||||
pushInitialVars();
|
||||
|
||||
// Load GTM if allowed
|
||||
if (shouldLoad()) {
|
||||
injectScript();
|
||||
} else {
|
||||
debugLog("GTM load prevented by configuration or environment.");
|
||||
}
|
||||
};
|
||||
|
||||
// ---- Auto-init on DOMContentLoaded (safe even if deferred) -------------
|
||||
|
||||
const autoInit = () => {
|
||||
// Only auto-init if we have some ID from globals/datasets.
|
||||
const detected = detectOptions();
|
||||
const hasId = !!(detected.id || WIN.MOKO_GTM_ID);
|
||||
if (hasId) {
|
||||
API.init(); // use detected/global defaults
|
||||
} else {
|
||||
debugLog("No GTM ID detected; awaiting manual init via window.mokoGTM.init({ id: 'GTM-XXXXXXX' }).");
|
||||
}
|
||||
};
|
||||
|
||||
if (document.readyState === "complete" || document.readyState === "interactive") {
|
||||
// Defer to ensure <body> exists for any late consumers.
|
||||
setTimeout(autoInit, 0);
|
||||
} else {
|
||||
document.addEventListener("DOMContentLoaded", autoInit, { once: true });
|
||||
}
|
||||
|
||||
// Expose API
|
||||
WIN.mokoGTM = API;
|
||||
|
||||
// Helpful console hint (only if debug true after detection)
|
||||
try {
|
||||
const detected = detectOptions();
|
||||
if (parseBool(detected.debug, false)) {
|
||||
STATE.debug = true;
|
||||
debugLog("Ready. You can call window.mokoGTM.init({ id: 'GTM-XXXXXXX' }).");
|
||||
}
|
||||
} catch (_) {}
|
||||
})();
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
/**
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.Moko-Cassiopeia
|
||||
* @file /media/templates/site/moko-cassiopeia/js/mod_gabble.js
|
||||
* @copyright (C) 2025 Jonathan Miler || Moko Consulting <https://mokoconsulting.tech>
|
||||
* @website: https://mokoconsulting.tech
|
||||
* @email: hello@mokoconsulting.tech
|
||||
* @phone: +1 (931) 279-6313
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
* @note 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.
|
||||
*/
|
||||
@@ -1,118 +0,0 @@
|
||||
<!--
|
||||
* Copyright (C) 2025 Moko Consulting <jmiller@mokoconsulting.tech>
|
||||
*
|
||||
* 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.Site
|
||||
* INGROUP: Templates.Moko-Cassiopeia
|
||||
* FILE: index.html
|
||||
* BRIEF: Security redirect page to block folder access and forward to site root.
|
||||
-->
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Redirecting…</title>
|
||||
|
||||
<!-- Search engines: do not index this placeholder redirect page -->
|
||||
<meta name="robots" content="noindex, nofollow, noarchive" />
|
||||
|
||||
<!-- Instant redirect fallback even if JavaScript is disabled -->
|
||||
<meta http-equiv="refresh" content="0; url=/" />
|
||||
|
||||
<!-- Canonical root reference -->
|
||||
<link rel="canonical" href="/" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<script>
|
||||
/**
|
||||
* @defgroup Dolibarr
|
||||
* @file index.html (embedded script)
|
||||
* @version 1.0.0
|
||||
* @brief Security redirect logic. Replaces the current history entry with the site root.
|
||||
* @details This script computes the absolute root URL using `location.origin` and
|
||||
* forwards the user immediately. It prevents leaving the protected folder
|
||||
* in the browser history by default.
|
||||
*
|
||||
* @section VARIABLES
|
||||
* @var {Object} opts Configuration options for the redirect behavior.
|
||||
* @var {string} opts.fallbackPath Path used when `location.origin` cannot be determined.
|
||||
* @var {number} opts.delayMs Optional delay in milliseconds before redirecting.
|
||||
* @var {"replace"|"assign"} opts.behavior Navigation method used for the redirect.
|
||||
*
|
||||
* @section OPTIONS
|
||||
* - opts.fallbackPath: default "/" (root path)
|
||||
* - opts.delayMs: default 0 (immediate)
|
||||
* - opts.behavior: one of
|
||||
* * "replace" — calls `location.replace(url)`; does not keep the folder page in history.
|
||||
* * "assign" — calls `location.assign(url)`; keeps an extra history entry.
|
||||
*/
|
||||
(function redirectToRoot() {
|
||||
// Configuration object with safe defaults.
|
||||
var opts = {
|
||||
fallbackPath: "/", // string: fallback destination if origin is unavailable
|
||||
delayMs: 0, // number: delay before redirect in ms (0 = immediate)
|
||||
behavior: "replace" // enum: "replace" | "assign"
|
||||
};
|
||||
|
||||
// Determine absolute origin in all mainstream browsers.
|
||||
var origin = (typeof location.origin === "string" && location.origin)
|
||||
|| (location.protocol + "//" + location.host);
|
||||
|
||||
// Final destination: absolute root of the current site, or fallback path.
|
||||
var destination = origin ? origin + "/" : opts.fallbackPath;
|
||||
|
||||
function go() {
|
||||
if (opts.behavior === "assign") {
|
||||
location.assign(destination);
|
||||
} else {
|
||||
location.replace(destination);
|
||||
}
|
||||
}
|
||||
|
||||
// Execute redirect, optionally after a short delay.
|
||||
if (opts.delayMs > 0) {
|
||||
setTimeout(go, opts.delayMs);
|
||||
} else {
|
||||
go();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--
|
||||
Secondary meta-refresh for no-JS environments is already set above.
|
||||
Some very old crawlers may ignore JS; the meta refresh ensures coverage.
|
||||
-->
|
||||
|
||||
<noscript>
|
||||
<!-- Extra defense-in-depth: if JS is disabled, meta refresh (above) handles redirect. -->
|
||||
<style>
|
||||
html, body { height:100%; }
|
||||
body { display:flex; align-items:center; justify-content:center; margin:0; font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
|
||||
.msg { opacity: .75; text-align: center; }
|
||||
</style>
|
||||
</noscript>
|
||||
</head>
|
||||
<body>
|
||||
<div class="msg">Redirecting to the site root… If you are not redirected, <a href="/">click here</a>.</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,13 +1,30 @@
|
||||
/**
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.Moko-Cassiopeia
|
||||
* @file /media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu-es5.js
|
||||
* @copyright (C) 2025 Jonathan Miler || Moko Consulting <https://mokoconsulting.tech>
|
||||
* @website: https://mokoconsulting.tech
|
||||
* @email: hello@mokoconsulting.tech
|
||||
* @phone: +1 (931) 279-6313
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
* @note 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.
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* 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/mod_menu/menu-metismenu-es5.js
|
||||
* VERSION: 02.00
|
||||
* BRIEF: ES5-compatible MetisMenu script for Joomla mod_menu in Moko-Cassiopeia
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
(function () {
|
||||
|
||||
@@ -1,13 +1,30 @@
|
||||
/**
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.Moko-Cassiopeia
|
||||
* @file /media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu.js
|
||||
* @copyright (C) 2025 Jonathan Miler || Moko Consulting <https://mokoconsulting.tech>
|
||||
* @website: https://mokoconsulting.tech
|
||||
* @email: hello@mokoconsulting.tech
|
||||
* @phone: +1 (931) 279-6313
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
* @note 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.
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* 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/mod_menu/menu-metismenu.js
|
||||
* VERSION: 02.00
|
||||
* BRIEF: Modern MetisMenu script for Joomla mod_menu in Moko-Cassiopeia
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
@@ -1,25 +1,14 @@
|
||||
/**
|
||||
* template.js — Custom JavaScript for the Moko Cassiopeia Joomla template
|
||||
*
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.Moko-Cassiopeia
|
||||
* @file /media/templates/site/moko-cassiopeia/js/template.js
|
||||
* @version 2.0
|
||||
*
|
||||
* @copyright (C) 2025 Moko Consulting
|
||||
* @author Jonathan Miller
|
||||
* @website https://mokoconsulting.tech
|
||||
* @email hello@mokoconsulting.tech
|
||||
* @phone +1 (931) 279-6313
|
||||
*
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* This file is part of a Moko Consulting project.
|
||||
*
|
||||
* 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.
|
||||
* 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
|
||||
@@ -27,7 +16,15 @@
|
||||
* 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/>.
|
||||
* 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/template.js
|
||||
* VERSION: 02.00
|
||||
* BRIEF: Core JavaScript utilities and behaviors for Moko-Cassiopeia template
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
(function (win, doc) {
|
||||
|
||||
@@ -1,25 +1,14 @@
|
||||
/**
|
||||
* theme-init.js — Light/Dark mode initialization for Moko Cassiopeia
|
||||
*
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.Moko-Cassiopeia
|
||||
* @file /media/templates/site/moko-cassiopeia/js/theme-init.js
|
||||
* @version 2.0
|
||||
*
|
||||
* @copyright (C) 2025 Moko Consulting
|
||||
* @author Jonathan Miller
|
||||
* @website https://mokoconsulting.tech
|
||||
* @email hello@mokoconsulting.tech
|
||||
* @phone +1 (931) 279-6313
|
||||
*
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* This file is part of a Moko Consulting project.
|
||||
*
|
||||
* 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.
|
||||
* 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
|
||||
@@ -27,7 +16,15 @@
|
||||
* 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/>.
|
||||
* 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/theme-init.js
|
||||
* VERSION: 02.00
|
||||
* BRIEF: Initialization script for Moko-Cassiopeia theme features and behaviors
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
(function (win, doc) {
|
||||
|
||||
@@ -1,25 +1,14 @@
|
||||
/**
|
||||
* user.js — User Custom JS File for Moko Cassiopeia
|
||||
*
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.Moko-Cassiopeia
|
||||
* @file /media/templates/site/moko-cassiopeia/js/user.js
|
||||
* @version 2.0
|
||||
*
|
||||
* @copyright (C) 2025 Moko Consulting
|
||||
* @author Jonathan Miller
|
||||
* @website https://mokoconsulting.tech
|
||||
* @email hello@mokoconsulting.tech
|
||||
* @phone +1 (931) 279-6313
|
||||
*
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* This file is part of a Moko Consulting project.
|
||||
*
|
||||
* 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.
|
||||
* 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
|
||||
@@ -27,5 +16,13 @@
|
||||
* 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/>.
|
||||
* 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/user.js
|
||||
* VERSION: 02.00
|
||||
* BRIEF: JavaScript for handling user-specific interactions in Moko-Cassiopeia template
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
Binary file not shown.
444
readme.md
444
readme.md
@@ -1,254 +1,304 @@
|
||||
# Moko-Cassiopeia
|
||||
<!--
|
||||
=========================================================================
|
||||
Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
|
||||
A modern, lightweight enhancement layer for Joomla’s Cassiopeia template. Moko-Cassiopeia adds **Font Awesome 6**, **Bootstrap 5** helpers, an automatic **Table of Contents (TOC)** utility, and optional **Moko Expansions** including **Google Tag Manager** and **Google Analytics (GA4)** hooks—all while keeping core template overrides minimal and upgrade‑friendly.
|
||||
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: README.md
|
||||
VERSION: 02.00
|
||||
BRIEF: Project readme for Moko-Cassiopeia, including features, setup, and usage
|
||||
=========================================================================
|
||||
-->
|
||||
|
||||
|
||||
# Moko-Cassiopeia v02.00 — README
|
||||
|
||||
> Joomla! site template by **Moko Consulting**
|
||||
> License: **GPL-3.0-or-later**
|
||||
> Compatibility: **Joomla 4.4+ / 5.x** (PHP 8.1+)
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
## Overview
|
||||
|
||||
- [Features](#features)
|
||||
- [Requirements](#requirements)
|
||||
- [Quick Start](#quick-start)
|
||||
- [Installation](#installation)
|
||||
- [Configuration](#configuration)
|
||||
- [Global Params](#global-params)
|
||||
- [Font Awesome 6](#font-awesome-6)
|
||||
- [Bootstrap 5 Helpers](#bootstrap-5-helpers)
|
||||
- [TOC Function](#toc-function)
|
||||
- [Moko Expansions](#moko-expansions)
|
||||
- [Google Tag Manager](#google-tag-manager)
|
||||
- [Google Analytics (GA4)](#google-analytics-ga4)
|
||||
- [CSS Variables](#css-variables)
|
||||
- [Usage Examples](#usage-examples)
|
||||
- [Best Practices](#best-practices)
|
||||
- [Development](#development)
|
||||
- [Changelog](#changelog)
|
||||
- [License](#license)
|
||||
Moko-Cassiopeia is a streamlined, Bootstrap-friendly Joomla template with a tokenized color system, Google Tag Manager / Analytics hooks, and performance-minded assets.
|
||||
|
||||
* **v02.00 (2025-08-30)** introduces **Dark Mode** with OS auto-detection **and** an optional **Dark Mode Toggle** (ID **25**) so users can manually switch themes; their preference persists.
|
||||
* **v01.00** was the initial public release (FA6, BS5, TOC, GTM/GA hooks).
|
||||
|
||||
Public roadmap: **[https://mokoconsulting.tech/support/joomla-cms/moko-cassiopeia-roadmap](https://mokoconsulting.tech/support/joomla-cms/moko-cassiopeia-roadmap)**
|
||||
|
||||
---
|
||||
|
||||
## What’s New in v02.00
|
||||
|
||||
* **Dark Mode** with `prefers-color-scheme` auto-detect.
|
||||
* **Dark Mode Toggle** (Template param **ID 25**) with positions **Header / Navbar / Footer**.
|
||||
|
||||
* Persists choice to `localStorage` (key: `moko.theme`).
|
||||
* Keyboard- and screen-reader-friendly; focus ring uses theme tokens.
|
||||
* Admin option **“Show Theme Toggle”** (`On/Off`).
|
||||
* CSS refactor to **variables**: light tokens in `:root`, dark overrides in `[data-theme="dark"]`.
|
||||
* Lowered CSS specificity, `rem` units for scalable typography/spacing.
|
||||
* Stabilized WebAsset registrations (LTR/RTL presets).
|
||||
|
||||
---
|
||||
|
||||
## Features
|
||||
|
||||
- **Font Awesome 6**: Solid, Regular, Brands (locally enqueued or CDN with Subresource Integrity).
|
||||
- **Bootstrap 5**: Utility classes, grid, and components available to your layouts and modules.
|
||||
- **Auto TOC**: Generate an in‑page Table of Contents from headings with a single data attribute.
|
||||
- **Moko Expansions**:
|
||||
- **GTM**: Drop‑in dataLayer and container injection with a template param.
|
||||
- **GA4**: Native GA4 Measurement ID support (with or without GTM).
|
||||
- **Production‑safe**: Assets loaded conditionally; no duplicate library loads if another extension already enqueues them.
|
||||
- **Accessible by default**: TOC anchors and focus styles follow a11y guidelines.
|
||||
* **Dark Mode + Toggle**
|
||||
Auto-detect plus manual switch; persistent per user.
|
||||
|
||||
* **Bootstrap-friendly CSS**
|
||||
Low specificity, variable-driven utilities for buttons, alerts, typography, spacing.
|
||||
|
||||
* **GTM / GA Hooks**
|
||||
Clean injection points for Google Tag Manager and optional direct GA4 tag.
|
||||
|
||||
* **LTR / RTL Presets**
|
||||
Stable asset registration pattern for palette and template styles.
|
||||
|
||||
* **A11y & Performance**
|
||||
Clear focus styling and balanced contrast; minified bundles in production.
|
||||
|
||||
---
|
||||
|
||||
## Requirements
|
||||
|
||||
- Joomla 4.4+ or Joomla 5+
|
||||
- PHP 8.1+
|
||||
- Cassiopeia as the active base template (Moko-Cassiopeia may be installed as a child/override set)
|
||||
* Joomla **4.4+** / **5.x**
|
||||
* PHP **8.1+**
|
||||
* Modern evergreen browsers (graceful fallback if `prefers-color-scheme` isn’t available)
|
||||
|
||||
## Quick Start
|
||||
|
||||
1. Install the template package via Joomla Extension Manager.
|
||||
2. In the Template Style settings, enable the features you want (FA6, BS5, TOC, GTM/GA).
|
||||
3. (Optional) Add a TOC container to any article or module using the data attribute shown below.
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
1. Go to 'System' → 'Install' → 'Extensions'.
|
||||
2. Upload 'Moko-Cassiopeia.zip'.
|
||||
3. After installation, go to 'System' → 'Site Templates' → 'Styles' and open 'Moko-Cassiopeia'.
|
||||
4. Choose 'Default' to make it your active style (or assign per menu item).
|
||||
1. **Install** via *Extensions → Manage → Install* (upload the template `.zip`).
|
||||
2. **Set as default** in *System → Templates → Site Templates*.
|
||||
3. **Clear caches**: *System → Clear Cache* and hard-reload your browser.
|
||||
|
||||
## Configuration
|
||||
---
|
||||
|
||||
Configuration lives in the Template Style parameters. Common params are listed below. Names may vary slightly depending on release.
|
||||
## Template Options (high-level)
|
||||
|
||||
### Global Params
|
||||
**Theme**
|
||||
|
||||
- 'load\_bootstrap5' (bool): Enqueue Bootstrap 5 core CSS/JS if not provided by Joomla context.
|
||||
- 'load\_fontawesome6' (bool): Enqueue Font Awesome 6 (solid, regular, brands).
|
||||
- 'use\_cdn' (bool): Use CDN with SRI instead of local assets.
|
||||
- 'minified' (bool): Prefer '.min' assets.
|
||||
- 'defer\_js' (bool): Add 'defer' to template‑injected scripts where safe.
|
||||
* **Force Theme**: `Auto` (default) | `Light` | `Dark`
|
||||
* **Show Theme Toggle** (ID **25**): `On` | `Off`
|
||||
* **Toggle Position**: `Header` | `Navbar` | `Footer`
|
||||
* **Default Theme** (when not using Auto): `Light`
|
||||
|
||||
### Font Awesome 6
|
||||
**GTM / Analytics**
|
||||
|
||||
When enabled, the template registers FA6 and exposes the standard icon syntax:
|
||||
* **GTM Container ID** (e.g., `GTM-XXXXXXX`)
|
||||
* **Analytics Tag ID** (optional GA4 if not using GTM)
|
||||
|
||||
```html
|
||||
<i class='fa-solid fa-circle-check' aria-hidden='true'></i>
|
||||
<span class='visually-hidden'>Success</span>
|
||||
```
|
||||
**Performance**
|
||||
|
||||
**Notes**
|
||||
* **Development Mode**
|
||||
|
||||
- Icons are decorative unless paired with text or 'aria-label'.
|
||||
- Prefer the 'fa-solid', 'fa-regular', or 'fa-brands' families explicitly.
|
||||
* `Off` → `.min.css` / `.min.js` bundles
|
||||
* `On` → unminified sources for debugging
|
||||
|
||||
### Bootstrap 5 Helpers
|
||||
---
|
||||
|
||||
If 'load\_bootstrap5' is enabled, grid and utilities are available:
|
||||
## Dark Mode — Tokens & Toggle
|
||||
|
||||
```html
|
||||
<div class='container'>
|
||||
<div class='row g-3'>
|
||||
<div class='col-12 col-md-6'>Left</div>
|
||||
<div class='col-12 col-md-6'>Right</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
You can also use helpers like 'ratio', 'visually-hidden', 'd-flex', and spacing utilities (e.g., 'mt-3', 'px-4').
|
||||
|
||||
### TOC Function
|
||||
|
||||
Moko-Cassiopeia ships a tiny script that scans within a container for headings (h2–h6) and builds a nested TOC with anchor links.
|
||||
|
||||
**Enable**: Turn on 'auto\_toc' in Template Style.
|
||||
|
||||
**Place a TOC container**:
|
||||
|
||||
```html
|
||||
<nav class='toc' data-moko-toc='true' data-moko-toc-target='#article-body' aria-label='Table of contents'></nav>
|
||||
```
|
||||
|
||||
**Mark your content region**:
|
||||
|
||||
```html
|
||||
<article id='article-body'>
|
||||
<h2>Section A</h2>
|
||||
<p>...</p>
|
||||
<h3>Subsection A.1</h3>
|
||||
<p>...</p>
|
||||
</article>
|
||||
```
|
||||
|
||||
**Options via data attributes**
|
||||
|
||||
- 'data-moko-toc-target': CSS selector for the content area (default: 'main').
|
||||
- 'data-moko-toc-levels': CSV or range string like '2-4' (default: '2-4').
|
||||
- 'data-moko-toc-collapsible': 'true'|'false' to make nested lists collapsible.
|
||||
|
||||
**Styling**
|
||||
|
||||
A minimal stylesheet is included. Customize using the CSS variables below or add your own overrides.
|
||||
|
||||
### Moko Expansions
|
||||
|
||||
#### Google Tag Manager
|
||||
|
||||
Enable GTM by entering your container ID (e.g., 'GTM-XXXXXXX') in Template Style under 'Moko Expansions'. The template will inject the standard script and 'noscript' iframe per Google guidance.
|
||||
|
||||
**Data Layer**
|
||||
|
||||
You can push events from modules or overrides like so:
|
||||
|
||||
```html
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
window.dataLayer.push({
|
||||
'event': 'moko_event',
|
||||
'moko_category': 'ui',
|
||||
'moko_action': 'toc_opened',
|
||||
'moko_label': 'sidebar'
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
#### Google Analytics (GA4)
|
||||
|
||||
Two options:
|
||||
|
||||
1. **Direct GA4**: Provide 'G-' Measurement ID (e.g., 'G-ABC123XYZ'). The template injects the GA4 base script.
|
||||
|
||||
2. **Via GTM**: Leave GA4 field empty and configure GA4 inside your GTM container.
|
||||
|
||||
```html
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
window.dataLayer.push({ 'event': 'page_view' });
|
||||
</script>
|
||||
```
|
||||
|
||||
> Tip: When both GTM and direct GA4 are set, the template prefers GTM to avoid duplicate pageviews.
|
||||
|
||||
## CSS Variables
|
||||
|
||||
Moko-Cassiopeia exposes custom properties for theme tuning. Example set:
|
||||
**Color tokens**
|
||||
|
||||
```css
|
||||
:root {
|
||||
--moko-cassiopeia-color-primary: #0b4008;
|
||||
--moko-cassiopeia-color-link: #0b4008;
|
||||
--moko-cassiopeia-color-hover: #000000;
|
||||
--color-bg: #ffffff;
|
||||
--color-surface: #f8f9fa;
|
||||
--color-text: #1d2125;
|
||||
--color-text-muted: #6c757d;
|
||||
--color-border: #dee2e6;
|
||||
|
||||
--moko-cassiopeia-header-background-image: linear-gradient(30deg, #fefcf9, var(--accent-color-primary));
|
||||
--moko-cassiopeia-header-background-position: auto;
|
||||
--moko-cassiopeia-header-background-attachment: fixed;
|
||||
--moko-cassiopeia-header-background-repeat: repeat;
|
||||
--moko-cassiopeia-header-background-size: auto;
|
||||
--color-primary: #0d6efd;
|
||||
--color-primary-contrast: #ffffff;
|
||||
|
||||
--color-link: var(--color-primary);
|
||||
--color-link-hover: #0b5ed7;
|
||||
|
||||
--focus-ring: 0 0 0 .2rem rgba(13,110,253,.25);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--color-bg: #0e1116;
|
||||
--color-surface: #151922;
|
||||
--color-text: #e7eaf0;
|
||||
--color-text-muted: #a4acb9;
|
||||
--color-border: #2a3240;
|
||||
|
||||
--color-primary: #66b2ff;
|
||||
--color-primary-contrast: #0d1117;
|
||||
|
||||
--color-link: var(--color-primary);
|
||||
--color-link-hover: #99ccff;
|
||||
|
||||
--focus-ring: 0 0 0 .2rem rgba(102,178,255,.35);
|
||||
}
|
||||
```
|
||||
|
||||
> Apply these in a custom stylesheet or template options if provided. Use semantic variables where possible to maintain consistency.
|
||||
**Programmatic switch (optional)**
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### 1) FA6 Icon Buttons
|
||||
|
||||
```html
|
||||
<a class='btn btn-primary d-inline-flex align-items-center' href='#'>
|
||||
<i class='fa-solid fa-bolt me-2' aria-hidden='true'></i>
|
||||
<span>Action</span>
|
||||
</a>
|
||||
```js
|
||||
// Apply and persist a choice
|
||||
document.documentElement.dataset.theme = 'dark'; // or 'light'
|
||||
localStorage.setItem('moko.theme', 'dark'); // namespaced key
|
||||
```
|
||||
|
||||
### 2) Sticky Sidebar TOC
|
||||
---
|
||||
|
||||
```html
|
||||
<aside class='position-sticky top-0 pt-3'>
|
||||
<nav class='toc' data-moko-toc='true' data-moko-toc-target='#content'></nav>
|
||||
</aside>
|
||||
## CSS Architecture
|
||||
|
||||
* **`template.css`** = structure/layout and component scaffolding
|
||||
* **No hard-coded hex** in core selectors; all colors reference tokens
|
||||
* **Units**: `rem` (replacing `em`) for scalable typography/spacing
|
||||
* **Low specificity** to play nicely with Bootstrap and content plugins
|
||||
|
||||
---
|
||||
|
||||
## GTM / Analytics Integration
|
||||
|
||||
* Enter **GTM Container ID** in Template Options to inject the GTM snippet.
|
||||
* Optionally add a **GA4 Measurement ID** if not routing GA via GTM.
|
||||
* Output uses Joomla rendering events to avoid duplication.
|
||||
|
||||
> Verify tags with DevTools / Tag Assistant.
|
||||
|
||||
---
|
||||
|
||||
## RTL / LTR Assets (WebAsset JSON)
|
||||
|
||||
Minimal pattern:
|
||||
|
||||
```json
|
||||
{
|
||||
"$schema": "https://developer.joomla.org/schemas/json/schema_web_assets.json",
|
||||
"name": "template.moko-cassiopeia",
|
||||
"assets": [
|
||||
{ "name": "template.moko-cassiopeia.styles", "type": "style", "uri": "templates/moko-cassiopeia/css/template.min.css" },
|
||||
{ "name": "template.moko-cassiopeia.palette", "type": "style", "uri": "templates/moko-cassiopeia/css/colors_standard.min.css" },
|
||||
{ "name": "template.moko-cassiopeia", "type": "preset", "dependencies": ["template.moko-cassiopeia.styles","template.moko-cassiopeia.palette"] }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 3) Module‑driven GA Event
|
||||
In `index.php`:
|
||||
|
||||
```php
|
||||
<?php
|
||||
// In a custom module layout
|
||||
$label = 'cta_hero';
|
||||
?>
|
||||
<button class='btn btn-outline-primary' onclick='window.dataLayer && window.dataLayer.push({"event": "cta_click", "label": "<?php echo $label; ?>"})'>
|
||||
Click me
|
||||
</button>
|
||||
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
|
||||
$wa = $this->getWebAssetManager();
|
||||
$wa->usePreset('template.moko-cassiopeia');
|
||||
```
|
||||
|
||||
> Note: We use single quotes in HTML where possible to keep consistency with PHP string style preferences.
|
||||
---
|
||||
|
||||
## Best Practices
|
||||
## Upgrade Notes
|
||||
|
||||
- **One source of truth** for analytics injection (prefer GTM, or direct GA4—not both).
|
||||
- **Defer non‑critical JS** using the 'defer\_js' param when feasible.
|
||||
- **Avoid duplicate libraries** if another extension already loads FA6/BS5.
|
||||
- **Respect a11y**: Provide visible focus, 'visually-hidden' labels, and heading order for the TOC.
|
||||
- **Cache smartly**: After enabling new features, clear Joomla cache and any CDN cache to propagate assets.
|
||||
**1.0 → 2.0**
|
||||
|
||||
## Development
|
||||
* Clear Joomla + browser caches.
|
||||
* Convert any hard-coded colors in overrides to **tokens** (e.g., `var(--color-text-muted)`).
|
||||
* Review spacing/typography where `rem` replaces `em`.
|
||||
* Verify asset names if you referenced WebAsset handles directly.
|
||||
* If you previously added a custom dark-mode toggle, remove it and enable **Show Theme Toggle** (ID **25**).
|
||||
|
||||
- Source structure follows Joomla template conventions:
|
||||
- '/css', '/js', '/images', '/html' (overrides), 'templateDetails.xml'
|
||||
- Scripts are enqueued via the template's 'index.php' with conditional params.
|
||||
- Build/compile steps (if using bundlers) are noted in 'package.json' (when applicable).
|
||||
---
|
||||
|
||||
**Local overrides**
|
||||
## Accessibility
|
||||
|
||||
- Place site‑specific CSS in '/css/custom.css'.
|
||||
- Use '/html' for component/module layout overrides as needed.
|
||||
* Improved contrast targets across light/dark.
|
||||
* Visible, consistent focus indicators.
|
||||
* Toggle is keyboard-navigable and labeled for assistive tech.
|
||||
|
||||
## Changelog
|
||||
---
|
||||
|
||||
- 1.15: Added CSS theme seletor (dark/light)
|
||||
- 1.00: Initial public release with FA6, BS5, TOC, GTM/GA hooks.
|
||||
## Troubleshooting
|
||||
|
||||
## License
|
||||
* **Toggle not visible** → Ensure “Show Theme Toggle” is on and placed in a visible position.
|
||||
* **Preference not persisting** → Check `localStorage` availability and console for JS errors.
|
||||
* **Asset dependency warnings** → Confirm preset/asset names match your `joomla.asset.json`.
|
||||
|
||||
Distributed under the GNU General Public License v3. See 'LICENSE' for details.
|
||||
---
|
||||
|
||||
## Feature Rundown & Comparison
|
||||
|
||||
### Moko-Cassiopeia v01.00 — Initial public release
|
||||
|
||||
* **Font Awesome 6** integrated; **Bootstrap 5** helpers.
|
||||
* **TOC utility** hooks for article table of contents.
|
||||
* **GTM/GA hooks** with safe injection points.
|
||||
* Minimal, upgrade-friendly overrides; variable-ready CSS.
|
||||
|
||||
### Moko-Cassiopeia v02.00 — Dark Mode + Toggle (ID 25)
|
||||
|
||||
* **Dark Mode** with OS auto-detect.
|
||||
* **Optional Dark Mode Toggle** (ID 25) in Header / Navbar / Footer; persisted per user.
|
||||
* **Tokenized palette** (`:root` + `[data-theme="dark"]`).
|
||||
* **CSS refactor**: low specificity; `rem` units; Bootstrap-friendly utilities.
|
||||
* Stabilized **Web Asset** registrations (LTR/RTL presets).
|
||||
|
||||
### Baseline: Cassiopeia (Joomla 4.4 / 5.x)
|
||||
|
||||
* Responsive, accessible core site template with Bootstrap-friendly markup.
|
||||
* Template options for color preset, layout width, sticky header, and module menu layouts.
|
||||
* Web Asset Manager integration (`joomla.asset.json`, `$this->getWebAssetManager()`).
|
||||
|
||||
---
|
||||
|
||||
## Roadmap
|
||||
|
||||
Public roadmap: **[https://mokoconsulting.tech/support/joomla-cms/moko-cassiopeia-roadmap](https://mokoconsulting.tech/support/joomla-cms/moko-cassiopeia-roadmap)**
|
||||
|
||||
---
|
||||
|
||||
## Changelog (1.0 → 2.0)
|
||||
|
||||
### 02.00 — 2025-08-30 — “Dark Mode”
|
||||
|
||||
**Added**
|
||||
|
||||
* Dark Mode with OS auto-detection (`prefers-color-scheme`).
|
||||
* **Dark Mode Toggle** (param **ID 25**) with positions Header / Navbar / Footer; persists choice via `localStorage` (`moko.theme`); accessible markup and focus styling.
|
||||
* Tokenized CSS palette with `[data-theme="dark"]` overrides.
|
||||
* Admin override to force Light/Dark/Auto.
|
||||
* Bootstrap-friendly utility hooks mapped to tokens.
|
||||
|
||||
**Changed**
|
||||
|
||||
* `template.css` now structure/layout only; colors via tokens.
|
||||
* `em` → `rem`; reduced specificity; standardized focus indicators.
|
||||
|
||||
**Fixed**
|
||||
|
||||
* WebAsset registrations (LTR/RTL/preset deps) and dark-theme link/muted contrast.
|
||||
|
||||
**Removed / Deprecated**
|
||||
|
||||
* Hard-coded color declarations and legacy hex-based helper classes.
|
||||
|
||||
---
|
||||
|
||||
### 01.00 — Initial public release
|
||||
|
||||
* **FA6**, **BS5**, **TOC**, **GTM/GA** hooks.
|
||||
|
||||
@@ -1,11 +1,31 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.Moko-Cassiopeia
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* @copyright (C) 2017 Open Source Matters, Inc. <https://www.joomla.org>
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
* 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: templates/moko-cassiopeia/component.php
|
||||
* VERSION: 02.00
|
||||
* BRIEF: Minimal component-only template file for Moko-Cassiopeia
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
defined('_JEXEC') or die;
|
||||
@@ -28,30 +48,30 @@ $paramsFontScheme = $this->params->get('useFontScheme', false);
|
||||
$fontStyles = '';
|
||||
|
||||
if ($paramsFontScheme) {
|
||||
if (stripos($paramsFontScheme, 'https://') === 0) {
|
||||
$this->getPreloadManager()->preconnect('https://fonts.googleapis.com/', ['crossorigin' => 'anonymous']);
|
||||
$this->getPreloadManager()->preconnect('https://fonts.gstatic.com/', ['crossorigin' => 'anonymous']);
|
||||
$this->getPreloadManager()->preload($paramsFontScheme, ['as' => 'style', 'crossorigin' => 'anonymous']);
|
||||
$wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, [], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'', 'crossorigin' => 'anonymous']);
|
||||
if (stripos($paramsFontScheme, 'https://') === 0) {
|
||||
$this->getPreloadManager()->preconnect('https://fonts.googleapis.com/', ['crossorigin' => 'anonymous']);
|
||||
$this->getPreloadManager()->preconnect('https://fonts.gstatic.com/', ['crossorigin' => 'anonymous']);
|
||||
$this->getPreloadManager()->preload($paramsFontScheme, ['as' => 'style', 'crossorigin' => 'anonymous']);
|
||||
$wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, [], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'', 'crossorigin' => 'anonymous']);
|
||||
|
||||
if (preg_match_all('/family=([^?:]*):/i', $paramsFontScheme, $matches) > 0) {
|
||||
$fontStyles = '--font-family-body: "' . str_replace('+', ' ', $matches[1][0]) . '", sans-serif;
|
||||
if (preg_match_all('/family=([^?:]*):/i', $paramsFontScheme, $matches) > 0) {
|
||||
$fontStyles = '--font-family-body: "' . str_replace('+', ' ', $matches[1][0]) . '", sans-serif;
|
||||
--font-family-headings: "' . str_replace('+', ' ', isset($matches[1][1]) ? $matches[1][1] : $matches[1][0]) . '", sans-serif;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-headings: 700;';
|
||||
}
|
||||
} else {
|
||||
$wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, ['version' => 'auto'], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'']);
|
||||
$this->getPreloadManager()->preload($wa->getAsset('style', 'fontscheme.current')->getUri() . '?' . $this->getMediaVersion(), ['as' => 'style']);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
$wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, ['version' => 'auto'], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'']);
|
||||
$this->getPreloadManager()->preload($wa->getAsset('style', 'fontscheme.current')->getUri() . '?' . $this->getMediaVersion(), ['as' => 'style']);
|
||||
}
|
||||
}
|
||||
|
||||
// Enable assets
|
||||
$wa->usePreset('template.moko-cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
|
||||
->useStyle('template.active.language')
|
||||
->useStyle('template.user')
|
||||
->useScript('template.user')
|
||||
->addInlineStyle(":root {
|
||||
->useStyle('template.active.language')
|
||||
->useStyle('template.user')
|
||||
->useScript('template.user')
|
||||
->addInlineStyle(":root {
|
||||
--hue: 214;
|
||||
--template-bg-light: #f0f4fb;
|
||||
--template-text-dark: #495057;
|
||||
@@ -76,13 +96,13 @@ $wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet');
|
||||
<!DOCTYPE html>
|
||||
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
|
||||
<head>
|
||||
<jdoc:include type="metas" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<jdoc:include type="styles" />
|
||||
<jdoc:include type="scripts" />
|
||||
<jdoc:include type="metas" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<jdoc:include type="styles" />
|
||||
<jdoc:include type="scripts" />
|
||||
</head>
|
||||
<body class="<?php echo $this->direction === 'rtl' ? 'rtl' : ''; ?>">
|
||||
<jdoc:include type="message" />
|
||||
<jdoc:include type="component" />
|
||||
<jdoc:include type="message" />
|
||||
<jdoc:include type="component" />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,23 +1,33 @@
|
||||
<?php
|
||||
/**
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.Moko-Cassiopeia
|
||||
* @file /templates/moko-cassiopeia/custom.php
|
||||
* @version 02.00
|
||||
* @copyright © 2025 Moko Consulting
|
||||
* @author Jonathan Miller
|
||||
* @website https://mokoconsulting.tech
|
||||
* @email hello@mokoconsulting.tech
|
||||
* @phone +1 (931) 279-6313
|
||||
* This file is part of a Moko Consulting project.
|
||||
*
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*
|
||||
* This file is part of a Moko Consulting project released under the
|
||||
* GNU General Public License v3 or (at your option) any later version.
|
||||
* It 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.
|
||||
* 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: templates/moko-cassiopeia/custom.php
|
||||
* VERSION: 02.00
|
||||
* BRIEF: Custom entry template file for Moko-Cassiopeia with user-defined overrides
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
function console_log($output, $with_script_tags = true) {
|
||||
$js_code = 'console.log(' . json_encode($output, JSON_HEX_TAG) .
|
||||
');';
|
||||
@@ -27,4 +37,6 @@
|
||||
echo $js_code;
|
||||
}
|
||||
?>
|
||||
Custom code included here
|
||||
<!--
|
||||
Custom code included here
|
||||
-->
|
||||
|
||||
@@ -1,21 +1,31 @@
|
||||
<?php
|
||||
/**
|
||||
* error.php — Error page template for Moko Cassiopeia
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.Moko-Cassiopeia
|
||||
* @file /templates/moko-cassiopeia/error.php
|
||||
* @version 2.1
|
||||
* @copyright (C) 2025 Moko Consulting
|
||||
* @author Jonathan Miller
|
||||
* @website https://mokoconsulting.tech
|
||||
* @email hello@mokoconsulting.tech
|
||||
* @phone +1 (931) 279-6313
|
||||
* @license GNU General Public License version 3 or later; see LICENSE.txt
|
||||
* @disclaimer 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.
|
||||
* 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: templates/moko-cassiopeia/error.php
|
||||
* VERSION: 02.00
|
||||
* BRIEF: Error page template file for Moko-Cassiopeia
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
defined('_JEXEC') or die;
|
||||
|
||||
@@ -1,16 +1,31 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.moko-cassiopeia
|
||||
* @file \templates\moko-cassiopeia\html\com_content\article\toc-left.php
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* © 2025 Moko Consulting — All Rights Reserved
|
||||
* @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: templates/moko-cassiopeia/html/com_content/article/toc-left.php
|
||||
* VERSION: 02.00
|
||||
* BRIEF: Template override for Joomla articles with Table of Contents aligned left
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
defined('_JEXEC') or die;
|
||||
@@ -40,119 +55,119 @@ $isNotPublishedYet = $this->item->publish_up > $currentDate;
|
||||
$isExpired = !is_null($this->item->publish_down) && $this->item->publish_down < $currentDate;
|
||||
?>
|
||||
<div class="com-content-article item-page<?php echo $this->pageclass_sfx; ?>" itemscope itemtype="https://schema.org/Article">
|
||||
<meta itemprop="inLanguage" content="<?php echo ($this->item->language === '*') ? Factory::getApplication()->get('language') : $this->item->language; ?>">
|
||||
<?php if ($this->params->get('show_page_heading')) : ?>
|
||||
<div class="page-header">
|
||||
<h1> <?php echo $this->escape($this->params->get('page_heading')); ?> </h1>
|
||||
</div>
|
||||
<?php endif;
|
||||
if (!empty($this->item->pagination) && !$this->item->paginationposition && $this->item->paginationrelative) {
|
||||
echo $this->item->pagination;
|
||||
}
|
||||
?>
|
||||
<meta itemprop="inLanguage" content="<?php echo ($this->item->language === '*') ? Factory::getApplication()->get('language') : $this->item->language; ?>">
|
||||
<?php if ($this->params->get('show_page_heading')) : ?>
|
||||
<div class="page-header">
|
||||
<h1> <?php echo $this->escape($this->params->get('page_heading')); ?> </h1>
|
||||
</div>
|
||||
<?php endif;
|
||||
if (!empty($this->item->pagination) && !$this->item->paginationposition && $this->item->paginationrelative) {
|
||||
echo $this->item->pagination;
|
||||
}
|
||||
?>
|
||||
|
||||
<?php $useDefList = $params->get('show_modify_date') || $params->get('show_publish_date') || $params->get('show_create_date')
|
||||
|| $params->get('show_hits') || $params->get('show_category') || $params->get('show_parent_category') || $params->get('show_author') || $assocParam; ?>
|
||||
<?php $useDefList = $params->get('show_modify_date') || $params->get('show_publish_date') || $params->get('show_create_date')
|
||||
|| $params->get('show_hits') || $params->get('show_category') || $params->get('show_parent_category') || $params->get('show_author') || $assocParam; ?>
|
||||
|
||||
<?php if ($params->get('show_title')) : ?>
|
||||
<div class="page-header">
|
||||
<<?php echo $htag; ?> itemprop="headline">
|
||||
<?php echo $this->escape($this->item->title); ?>
|
||||
</<?php echo $htag; ?>>
|
||||
<?php if ($this->item->state == ContentComponent::CONDITION_UNPUBLISHED) : ?>
|
||||
<span class="badge bg-warning text-light"><?php echo Text::_('JUNPUBLISHED'); ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if ($isNotPublishedYet) : ?>
|
||||
<span class="badge bg-warning text-light"><?php echo Text::_('JNOTPUBLISHEDYET'); ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if ($isExpired) : ?>
|
||||
<span class="badge bg-warning text-light"><?php echo Text::_('JEXPIRED'); ?></span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ($canEdit) : ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.icons', ['params' => $params, 'item' => $this->item]); ?>
|
||||
<?php endif; ?>
|
||||
<?php if ($params->get('show_title')) : ?>
|
||||
<div class="page-header">
|
||||
<<?php echo $htag; ?> itemprop="headline">
|
||||
<?php echo $this->escape($this->item->title); ?>
|
||||
</<?php echo $htag; ?>>
|
||||
<?php if ($this->item->state == ContentComponent::CONDITION_UNPUBLISHED) : ?>
|
||||
<span class="badge bg-warning text-light"><?php echo Text::_('JUNPUBLISHED'); ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if ($isNotPublishedYet) : ?>
|
||||
<span class="badge bg-warning text-light"><?php echo Text::_('JNOTPUBLISHEDYET'); ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if ($isExpired) : ?>
|
||||
<span class="badge bg-warning text-light"><?php echo Text::_('JEXPIRED'); ?></span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ($canEdit) : ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.icons', ['params' => $params, 'item' => $this->item]); ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php // Content is generated by content plugin event "onContentAfterTitle" ?>
|
||||
<?php echo $this->item->event->afterDisplayTitle; ?>
|
||||
<?php // Content is generated by content plugin event "onContentAfterTitle" ?>
|
||||
<?php echo $this->item->event->afterDisplayTitle; ?>
|
||||
|
||||
<?php if ($useDefList && ($info == 0 || $info == 2)) : ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.info_block', ['item' => $this->item, 'params' => $params, 'position' => 'above']); ?>
|
||||
<?php endif; ?>
|
||||
<?php if ($useDefList && ($info == 0 || $info == 2)) : ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.info_block', ['item' => $this->item, 'params' => $params, 'position' => 'above']); ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($info == 0 && $params->get('show_tags', 1) && !empty($this->item->tags->itemTags)) : ?>
|
||||
<?php $this->item->tagLayout = new FileLayout('joomla.content.tags'); ?>
|
||||
<?php if ($info == 0 && $params->get('show_tags', 1) && !empty($this->item->tags->itemTags)) : ?>
|
||||
<?php $this->item->tagLayout = new FileLayout('joomla.content.tags'); ?>
|
||||
|
||||
<?php echo $this->item->tagLayout->render($this->item->tags->itemTags); ?>
|
||||
<?php endif; ?>
|
||||
<?php echo $this->item->tagLayout->render($this->item->tags->itemTags); ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php // Content is generated by content plugin event "onContentBeforeDisplay" ?>
|
||||
<?php echo $this->item->event->beforeDisplayContent; ?>
|
||||
<?php // Content is generated by content plugin event "onContentBeforeDisplay" ?>
|
||||
<?php echo $this->item->event->beforeDisplayContent; ?>
|
||||
|
||||
<?php if ((int) $params->get('urls_position', 0) === 0) : ?>
|
||||
<?php echo $this->loadTemplate('links'); ?>
|
||||
<?php endif; ?>
|
||||
<?php if ($params->get('access-view')) : ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.full_image', $this->item); ?>
|
||||
<?php
|
||||
if (!empty($this->item->pagination) && !$this->item->paginationposition && !$this->item->paginationrelative) :
|
||||
echo $this->item->pagination;
|
||||
endif;
|
||||
?>
|
||||
<?php if ((int) $params->get('urls_position', 0) === 0) : ?>
|
||||
<?php echo $this->loadTemplate('links'); ?>
|
||||
<?php endif; ?>
|
||||
<?php if ($params->get('access-view')) : ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.full_image', $this->item); ?>
|
||||
<?php
|
||||
if (!empty($this->item->pagination) && !$this->item->paginationposition && !$this->item->paginationrelative) :
|
||||
echo $this->item->pagination;
|
||||
endif;
|
||||
?>
|
||||
<div itemprop="articleBody" class="com-content-article__body">
|
||||
<div class="container-toc-left">
|
||||
<?php
|
||||
// Table of Contents header using template language string
|
||||
echo '<h2>' . Text::_('TPL_MOKO-CASSIOPEIA_TOC') . '</h2>';
|
||||
?>
|
||||
<nav id="toc" data-toggle="toc"></nav>
|
||||
<div class="container-toc-left">
|
||||
<?php
|
||||
// Table of Contents header using template language string
|
||||
echo '<h2>' . Text::_('TPL_MOKO-CASSIOPEIA_TOC') . '</h2>';
|
||||
?>
|
||||
<nav id="toc" data-toggle="toc"></nav>
|
||||
</div>
|
||||
<?php
|
||||
echo $this->item->text;
|
||||
?>
|
||||
<?php
|
||||
echo $this->item->text;
|
||||
?>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<?php if ($info == 1 || $info == 2) : ?>
|
||||
<?php if ($useDefList) : ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.info_block', ['item' => $this->item, 'params' => $params, 'position' => 'below']); ?>
|
||||
<?php endif; ?>
|
||||
<?php if ($params->get('show_tags', 1) && !empty($this->item->tags->itemTags)) : ?>
|
||||
<?php $this->item->tagLayout = new FileLayout('joomla.content.tags'); ?>
|
||||
<?php echo $this->item->tagLayout->render($this->item->tags->itemTags); ?>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
<?php if ($info == 1 || $info == 2) : ?>
|
||||
<?php if ($useDefList) : ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.info_block', ['item' => $this->item, 'params' => $params, 'position' => 'below']); ?>
|
||||
<?php endif; ?>
|
||||
<?php if ($params->get('show_tags', 1) && !empty($this->item->tags->itemTags)) : ?>
|
||||
<?php $this->item->tagLayout = new FileLayout('joomla.content.tags'); ?>
|
||||
<?php echo $this->item->tagLayout->render($this->item->tags->itemTags); ?>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php
|
||||
if (!empty($this->item->pagination) && $this->item->paginationposition && !$this->item->paginationrelative) :
|
||||
echo $this->item->pagination;
|
||||
?>
|
||||
<?php endif; ?>
|
||||
<?php if ((int) $params->get('urls_position', 0) === 1) : ?>
|
||||
<?php echo $this->loadTemplate('links'); ?>
|
||||
<?php endif; ?>
|
||||
<?php // Optional teaser intro text for guests ?>
|
||||
<?php elseif ($params->get('show_noauth') == true && $user->get('guest')) : ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.intro_image', $this->item); ?>
|
||||
<?php echo HTMLHelper::_('content.prepare', $this->item->introtext); ?>
|
||||
<?php // Optional link to let them register to see the whole article. ?>
|
||||
<?php if ($params->get('show_readmore') && $this->item->fulltext != null) : ?>
|
||||
<?php $menu = Factory::getApplication()->getMenu(); ?>
|
||||
<?php $active = $menu->getActive(); ?>
|
||||
<?php $itemId = $active->id; ?>
|
||||
<?php $link = new Uri(Route::_('index.php?option=com_users&view=login&Itemid=' . $itemId, false)); ?>
|
||||
<?php $link->setVar('return', base64_encode(RouteHelper::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language))); ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.readmore', ['item' => $this->item, 'params' => $params, 'link' => $link]); ?>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
<?php
|
||||
if (!empty($this->item->pagination) && $this->item->paginationposition && $this->item->paginationrelative) :
|
||||
echo $this->item->pagination;
|
||||
?>
|
||||
<?php endif; ?>
|
||||
<?php // Content is generated by content plugin event "onContentAfterDisplay" ?>
|
||||
<?php echo $this->item->event->afterDisplayContent; ?>
|
||||
<?php
|
||||
if (!empty($this->item->pagination) && $this->item->paginationposition && !$this->item->paginationrelative) :
|
||||
echo $this->item->pagination;
|
||||
?>
|
||||
<?php endif; ?>
|
||||
<?php if ((int) $params->get('urls_position', 0) === 1) : ?>
|
||||
<?php echo $this->loadTemplate('links'); ?>
|
||||
<?php endif; ?>
|
||||
<?php // Optional teaser intro text for guests ?>
|
||||
<?php elseif ($params->get('show_noauth') == true && $user->get('guest')) : ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.intro_image', $this->item); ?>
|
||||
<?php echo HTMLHelper::_('content.prepare', $this->item->introtext); ?>
|
||||
<?php // Optional link to let them register to see the whole article. ?>
|
||||
<?php if ($params->get('show_readmore') && $this->item->fulltext != null) : ?>
|
||||
<?php $menu = Factory::getApplication()->getMenu(); ?>
|
||||
<?php $active = $menu->getActive(); ?>
|
||||
<?php $itemId = $active->id; ?>
|
||||
<?php $link = new Uri(Route::_('index.php?option=com_users&view=login&Itemid=' . $itemId, false)); ?>
|
||||
<?php $link->setVar('return', base64_encode(RouteHelper::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language))); ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.readmore', ['item' => $this->item, 'params' => $params, 'link' => $link]); ?>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
<?php
|
||||
if (!empty($this->item->pagination) && $this->item->paginationposition && $this->item->paginationrelative) :
|
||||
echo $this->item->pagination;
|
||||
?>
|
||||
<?php endif; ?>
|
||||
<?php // Content is generated by content plugin event "onContentAfterDisplay" ?>
|
||||
<?php echo $this->item->event->afterDisplayContent; ?>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,16 +1,31 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.moko-cassiopeia
|
||||
* @file \templates\moko-cassiopeia\html\com_content\article\toc-right.php
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* © 2025 Moko Consulting — All Rights Reserved
|
||||
* @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: templates/moko-cassiopeia/html/com_content/article/toc-right.php
|
||||
* VERSION: 02.00
|
||||
* BRIEF: Template override for Joomla articles with Table of Contents aligned right
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
defined('_JEXEC') or die;
|
||||
@@ -40,121 +55,121 @@ $isNotPublishedYet = $this->item->publish_up > $currentDate;
|
||||
$isExpired = !is_null($this->item->publish_down) && $this->item->publish_down < $currentDate;
|
||||
?>
|
||||
<div class="com-content-article item-page<?php echo $this->pageclass_sfx; ?>" itemscope itemtype="https://schema.org/Article">
|
||||
<meta itemprop="inLanguage" content="<?php echo ($this->item->language === '*') ? Factory::getApplication()->get('language') : $this->item->language; ?>">
|
||||
<?php if ($this->params->get('show_page_heading')) : ?>
|
||||
<div class="page-header">
|
||||
<h1> <?php echo $this->escape($this->params->get('page_heading')); ?> </h1>
|
||||
</div>
|
||||
<?php endif;
|
||||
if (!empty($this->item->pagination) && !$this->item->paginationposition && $this->item->paginationrelative) {
|
||||
echo $this->item->pagination;
|
||||
}
|
||||
?>
|
||||
<meta itemprop="inLanguage" content="<?php echo ($this->item->language === '*') ? Factory::getApplication()->get('language') : $this->item->language; ?>">
|
||||
<?php if ($this->params->get('show_page_heading')) : ?>
|
||||
<div class="page-header">
|
||||
<h1> <?php echo $this->escape($this->params->get('page_heading')); ?> </h1>
|
||||
</div>
|
||||
<?php endif;
|
||||
if (!empty($this->item->pagination) && !$this->item->paginationposition && $this->item->paginationrelative) {
|
||||
echo $this->item->pagination;
|
||||
}
|
||||
?>
|
||||
|
||||
<?php $useDefList = $params->get('show_modify_date') || $params->get('show_publish_date') || $params->get('show_create_date')
|
||||
|| $params->get('show_hits') || $params->get('show_category') || $params->get('show_parent_category') || $params->get('show_author') || $assocParam; ?>
|
||||
<?php $useDefList = $params->get('show_modify_date') || $params->get('show_publish_date') || $params->get('show_create_date')
|
||||
|| $params->get('show_hits') || $params->get('show_category') || $params->get('show_parent_category') || $params->get('show_author') || $assocParam; ?>
|
||||
|
||||
<?php if ($params->get('show_title')) : ?>
|
||||
<div class="page-header">
|
||||
<<?php echo $htag; ?> itemprop="headline">
|
||||
<?php echo $this->escape($this->item->title); ?>
|
||||
</<?php echo $htag; ?>>
|
||||
<?php if ($this->item->state == ContentComponent::CONDITION_UNPUBLISHED) : ?>
|
||||
<span class="badge bg-warning text-light"><?php echo Text::_('JUNPUBLISHED'); ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if ($isNotPublishedYet) : ?>
|
||||
<span class="badge bg-warning text-light"><?php echo Text::_('JNOTPUBLISHEDYET'); ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if ($isExpired) : ?>
|
||||
<span class="badge bg-warning text-light"><?php echo Text::_('JEXPIRED'); ?></span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ($canEdit) : ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.icons', ['params' => $params, 'item' => $this->item]); ?>
|
||||
<?php endif; ?>
|
||||
<?php if ($params->get('show_title')) : ?>
|
||||
<div class="page-header">
|
||||
<<?php echo $htag; ?> itemprop="headline">
|
||||
<?php echo $this->escape($this->item->title); ?>
|
||||
</<?php echo $htag; ?>>
|
||||
<?php if ($this->item->state == ContentComponent::CONDITION_UNPUBLISHED) : ?>
|
||||
<span class="badge bg-warning text-light"><?php echo Text::_('JUNPUBLISHED'); ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if ($isNotPublishedYet) : ?>
|
||||
<span class="badge bg-warning text-light"><?php echo Text::_('JNOTPUBLISHEDYET'); ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if ($isExpired) : ?>
|
||||
<span class="badge bg-warning text-light"><?php echo Text::_('JEXPIRED'); ?></span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ($canEdit) : ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.icons', ['params' => $params, 'item' => $this->item]); ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php // Content is generated by content plugin event "onContentAfterTitle" ?>
|
||||
<?php echo $this->item->event->afterDisplayTitle; ?>
|
||||
<?php // Content is generated by content plugin event "onContentAfterTitle" ?>
|
||||
<?php echo $this->item->event->afterDisplayTitle; ?>
|
||||
|
||||
<?php if ($useDefList && ($info == 0 || $info == 2)) : ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.info_block', ['item' => $this->item, 'params' => $params, 'position' => 'above']); ?>
|
||||
<?php endif; ?>
|
||||
<?php if ($useDefList && ($info == 0 || $info == 2)) : ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.info_block', ['item' => $this->item, 'params' => $params, 'position' => 'above']); ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($info == 0 && $params->get('show_tags', 1) && !empty($this->item->tags->itemTags)) : ?>
|
||||
<?php $this->item->tagLayout = new FileLayout('joomla.content.tags'); ?>
|
||||
<?php if ($info == 0 && $params->get('show_tags', 1) && !empty($this->item->tags->itemTags)) : ?>
|
||||
<?php $this->item->tagLayout = new FileLayout('joomla.content.tags'); ?>
|
||||
|
||||
<?php echo $this->item->tagLayout->render($this->item->tags->itemTags); ?>
|
||||
<?php endif; ?>
|
||||
<?php echo $this->item->tagLayout->render($this->item->tags->itemTags); ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php // Content is generated by content plugin event "onContentBeforeDisplay" ?>
|
||||
<?php echo $this->item->event->beforeDisplayContent; ?>
|
||||
<?php // Content is generated by content plugin event "onContentBeforeDisplay" ?>
|
||||
<?php echo $this->item->event->beforeDisplayContent; ?>
|
||||
|
||||
<?php if ((int) $params->get('urls_position', 0) === 0) : ?>
|
||||
<?php echo $this->loadTemplate('links'); ?>
|
||||
<?php endif; ?>
|
||||
<?php if ($params->get('access-view')) : ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.full_image', $this->item); ?>
|
||||
<?php
|
||||
if (!empty($this->item->pagination) && !$this->item->paginationposition && !$this->item->paginationrelative) :
|
||||
echo $this->item->pagination;
|
||||
endif;
|
||||
?>
|
||||
<?php if ((int) $params->get('urls_position', 0) === 0) : ?>
|
||||
<?php echo $this->loadTemplate('links'); ?>
|
||||
<?php endif; ?>
|
||||
<?php if ($params->get('access-view')) : ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.full_image', $this->item); ?>
|
||||
<?php
|
||||
if (!empty($this->item->pagination) && !$this->item->paginationposition && !$this->item->paginationrelative) :
|
||||
echo $this->item->pagination;
|
||||
endif;
|
||||
?>
|
||||
<div itemprop="articleBody" class="com-content-article__body">
|
||||
<div class="container-toc-right">
|
||||
<?php
|
||||
// Table of Contents header using template language string
|
||||
<div class="container-toc-right">
|
||||
<?php
|
||||
// Table of Contents header using template language string
|
||||
|
||||
echo '<h2>' . Text::_('TPL_MOKO-CASSIOPEIA_TOC') . '</h2>';
|
||||
?>
|
||||
echo '<h2>' . Text::_('TPL_MOKO-CASSIOPEIA_TOC') . '</h2>';
|
||||
?>
|
||||
|
||||
<nav id="toc" data-toggle="toc"></nav>
|
||||
<nav id="toc" data-toggle="toc"></nav>
|
||||
</div>
|
||||
<?php
|
||||
echo $this->item->text;
|
||||
?>
|
||||
<?php
|
||||
echo $this->item->text;
|
||||
?>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<?php if ($info == 1 || $info == 2) : ?>
|
||||
<?php if ($useDefList) : ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.info_block', ['item' => $this->item, 'params' => $params, 'position' => 'below']); ?>
|
||||
<?php endif; ?>
|
||||
<?php if ($params->get('show_tags', 1) && !empty($this->item->tags->itemTags)) : ?>
|
||||
<?php $this->item->tagLayout = new FileLayout('joomla.content.tags'); ?>
|
||||
<?php echo $this->item->tagLayout->render($this->item->tags->itemTags); ?>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
<?php if ($info == 1 || $info == 2) : ?>
|
||||
<?php if ($useDefList) : ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.info_block', ['item' => $this->item, 'params' => $params, 'position' => 'below']); ?>
|
||||
<?php endif; ?>
|
||||
<?php if ($params->get('show_tags', 1) && !empty($this->item->tags->itemTags)) : ?>
|
||||
<?php $this->item->tagLayout = new FileLayout('joomla.content.tags'); ?>
|
||||
<?php echo $this->item->tagLayout->render($this->item->tags->itemTags); ?>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php
|
||||
if (!empty($this->item->pagination) && $this->item->paginationposition && !$this->item->paginationrelative) :
|
||||
echo $this->item->pagination;
|
||||
?>
|
||||
<?php endif; ?>
|
||||
<?php if ((int) $params->get('urls_position', 0) === 1) : ?>
|
||||
<?php echo $this->loadTemplate('links'); ?>
|
||||
<?php endif; ?>
|
||||
<?php // Optional teaser intro text for guests ?>
|
||||
<?php elseif ($params->get('show_noauth') == true && $user->get('guest')) : ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.intro_image', $this->item); ?>
|
||||
<?php echo HTMLHelper::_('content.prepare', $this->item->introtext); ?>
|
||||
<?php // Optional link to let them register to see the whole article. ?>
|
||||
<?php if ($params->get('show_readmore') && $this->item->fulltext != null) : ?>
|
||||
<?php $menu = Factory::getApplication()->getMenu(); ?>
|
||||
<?php $active = $menu->getActive(); ?>
|
||||
<?php $itemId = $active->id; ?>
|
||||
<?php $link = new Uri(Route::_('index.php?option=com_users&view=login&Itemid=' . $itemId, false)); ?>
|
||||
<?php $link->setVar('return', base64_encode(RouteHelper::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language))); ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.readmore', ['item' => $this->item, 'params' => $params, 'link' => $link]); ?>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
<?php
|
||||
if (!empty($this->item->pagination) && $this->item->paginationposition && $this->item->paginationrelative) :
|
||||
echo $this->item->pagination;
|
||||
?>
|
||||
<?php endif; ?>
|
||||
<?php // Content is generated by content plugin event "onContentAfterDisplay" ?>
|
||||
<?php echo $this->item->event->afterDisplayContent; ?>
|
||||
<?php
|
||||
if (!empty($this->item->pagination) && $this->item->paginationposition && !$this->item->paginationrelative) :
|
||||
echo $this->item->pagination;
|
||||
?>
|
||||
<?php endif; ?>
|
||||
<?php if ((int) $params->get('urls_position', 0) === 1) : ?>
|
||||
<?php echo $this->loadTemplate('links'); ?>
|
||||
<?php endif; ?>
|
||||
<?php // Optional teaser intro text for guests ?>
|
||||
<?php elseif ($params->get('show_noauth') == true && $user->get('guest')) : ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.intro_image', $this->item); ?>
|
||||
<?php echo HTMLHelper::_('content.prepare', $this->item->introtext); ?>
|
||||
<?php // Optional link to let them register to see the whole article. ?>
|
||||
<?php if ($params->get('show_readmore') && $this->item->fulltext != null) : ?>
|
||||
<?php $menu = Factory::getApplication()->getMenu(); ?>
|
||||
<?php $active = $menu->getActive(); ?>
|
||||
<?php $itemId = $active->id; ?>
|
||||
<?php $link = new Uri(Route::_('index.php?option=com_users&view=login&Itemid=' . $itemId, false)); ?>
|
||||
<?php $link->setVar('return', base64_encode(RouteHelper::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language))); ?>
|
||||
<?php echo LayoutHelper::render('joomla.content.readmore', ['item' => $this->item, 'params' => $params, 'link' => $link]); ?>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
<?php
|
||||
if (!empty($this->item->pagination) && $this->item->paginationposition && $this->item->paginationrelative) :
|
||||
echo $this->item->pagination;
|
||||
?>
|
||||
<?php endif; ?>
|
||||
<?php // Content is generated by content plugin event "onContentAfterDisplay" ?>
|
||||
<?php echo $this->item->event->afterDisplayContent; ?>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,13 +1,34 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.Moko-Cassiopeia
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* @copyright (C) 2017 Open Source Matters, Inc. <https://www.joomla.org>
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
* 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: templates/moko-cassiopeia/index.php
|
||||
* VERSION: 02.00
|
||||
* BRIEF: Main template index file for Moko-Cassiopeia rendering site layout
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
|
||||
defined('_JEXEC') or die;
|
||||
|
||||
use Joomla\CMS\Factory;
|
||||
@@ -20,23 +41,19 @@ use Joomla\CMS\Uri\Uri;
|
||||
$app = Factory::getApplication();
|
||||
$input = $app->getInput();
|
||||
$wa = $this->getWebAssetManager();
|
||||
$params_ColorName = $this->params->get('colorName', 'colors_standard');
|
||||
$params_googletagmanager = $this->params->get('googletagmanager', false);
|
||||
$params_googletagmanagerid = $this->params->get('googletagmanagerid', null);
|
||||
$params_googleanalytics = $this->params->get('googleanalytics', false);
|
||||
$params_googleanalyticsid = $this->params->get('googleanalyticsid', null);
|
||||
$params_custom_head_start = $this->params->get('custom_head_start', null);
|
||||
$params_custom_head_end = $this->params->get('custom_head_end', null);
|
||||
$params_leftIcon = htmlspecialchars(
|
||||
$this->params->get('drawerLeftIcon', 'fa-solid fa-chevron-left'),
|
||||
ENT_COMPAT, 'UTF-8'
|
||||
);
|
||||
$params_rightIcon = htmlspecialchars(
|
||||
$this->params->get('drawerRightIcon', 'fa-solid fa-chevron-right'),
|
||||
ENT_COMPAT, 'UTF-8'
|
||||
);
|
||||
|
||||
// Add Bootstrap 5 Support
|
||||
// Template params
|
||||
$params_ColorName = (string) $this->params->get('colorName', 'colors_standard'); // colors_standard|colors_alternative|colors_custom
|
||||
$params_googletagmanager = $this->params->get('googletagmanager', false);
|
||||
$params_googletagmanagerid = $this->params->get('googletagmanagerid', null);
|
||||
$params_googleanalytics = $this->params->get('googleanalytics', false);
|
||||
$params_googleanalyticsid = $this->params->get('googleanalyticsid', null);
|
||||
$params_custom_head_start = $this->params->get('custom_head_start', null);
|
||||
$params_custom_head_end = $this->params->get('custom_head_end', null);
|
||||
$params_leftIcon = htmlspecialchars($this->params->get('drawerLeftIcon', 'fa-solid fa-chevron-left'), ENT_COMPAT, 'UTF-8');
|
||||
$params_rightIcon = htmlspecialchars($this->params->get('drawerRightIcon', 'fa-solid fa-chevron-right'), ENT_COMPAT, 'UTF-8');
|
||||
|
||||
// Bootstrap behaviors (assets handled via WAM)
|
||||
HTMLHelper::_('bootstrap.framework');
|
||||
HTMLHelper::_('bootstrap.loadCss', true);
|
||||
HTMLHelper::_('bootstrap.alert');
|
||||
@@ -53,355 +70,409 @@ HTMLHelper::_('bootstrap.tooltip');
|
||||
HTMLHelper::_('bootstrap.toast');
|
||||
|
||||
// Detecting Active Variables
|
||||
$option = $input->getCmd('option', '');
|
||||
$view = $input->getCmd('view', '');
|
||||
$layout = $input->getCmd('layout', '');
|
||||
$task = $input->getCmd('task', '');
|
||||
$itemid = $input->getCmd('Itemid', '');
|
||||
$sitename = htmlspecialchars($app->get('sitename'), ENT_QUOTES, 'UTF-8');
|
||||
$menu = $app->getMenu()->getActive();
|
||||
$option = $input->getCmd('option', '');
|
||||
$view = $input->getCmd('view', '');
|
||||
$layout = $input->getCmd('layout', '');
|
||||
$task = $input->getCmd('task', '');
|
||||
$itemid = $input->getCmd('Itemid', '');
|
||||
$sitenameR = $app->get('sitename'); // raw for title composition
|
||||
$sitename = htmlspecialchars($sitenameR, ENT_QUOTES, 'UTF-8');
|
||||
$menu = $app->getMenu()->getActive();
|
||||
$pageclass = $menu !== null ? $menu->getParams()->get('pageclass_sfx', '') : '';
|
||||
|
||||
// Template path
|
||||
// Respect “Site Name in Page Titles” (0:none, 1:before, 2:after)
|
||||
$mode = (int) $app->get('sitename_pagetitles', 0);
|
||||
$pageTitle = trim($this->getTitle());
|
||||
$final = $pageTitle !== ''
|
||||
? ($mode === 1 ? $sitenameR . ' - ' . $pageTitle
|
||||
: ($mode === 2 ? $pageTitle . ' - ' . $sitenameR : $pageTitle))
|
||||
: $sitenameR;
|
||||
$this->setTitle($final);
|
||||
|
||||
// Template/Media path
|
||||
$templatePath = 'media/templates/site/moko-cassiopeia';
|
||||
|
||||
// Color Theme
|
||||
$assetColorName = 'theme.' . $params_ColorName;
|
||||
$wa->registerAndUseStyle($assetColorName, $templatePath . '/css/global/' . $params_ColorName . '.css');
|
||||
// ===========================
|
||||
// Web Asset Manager (WAM) — matches your joomla.asset.json
|
||||
// ===========================
|
||||
|
||||
// Use a font scheme if set in the template style options
|
||||
// Core template CSS
|
||||
$wa->useStyle('template.base'); // css/template.css
|
||||
$wa->useStyle('template.user'); // css/user.css
|
||||
|
||||
// Optional vendor CSS
|
||||
$wa->useStyle('vendor.vmbasic');
|
||||
$wa->useStyle('vendor.gable');
|
||||
$wa->useStyle('vendor.bootstrap-toc');
|
||||
|
||||
// Color theme (light + optional dark)
|
||||
$colorKey = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_ColorName));
|
||||
$lightKey = 'template.light.' . $colorKey;
|
||||
$darkKey = 'template.dark.' . $colorKey;
|
||||
|
||||
try {
|
||||
$wa->useStyle($lightKey);
|
||||
} catch (\Throwable $e) {
|
||||
$wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/global/colors/light/' . $params_ColorName . '.css');
|
||||
}
|
||||
try {
|
||||
$wa->useStyle($darkKey);
|
||||
} catch (\Throwable $e) {
|
||||
// optional; omit if not present
|
||||
}
|
||||
|
||||
// Scripts
|
||||
$wa->useScript('template.js');
|
||||
$wa->useScript('theme-init.js');
|
||||
$wa->useScript('darkmode-toggle.js');
|
||||
$wa->useScript('vendor.bootstrap-toc.js');
|
||||
|
||||
// Font scheme (external or local) + CSS custom properties
|
||||
$params_FontScheme = $this->params->get('useFontScheme', false);
|
||||
$fontStyles = '';
|
||||
$fontStyles = '';
|
||||
|
||||
if ($params_FontScheme) {
|
||||
if (stripos($params_FontScheme, 'https://') === 0) {
|
||||
$this->getPreloadManager()->preconnect('https://fonts.googleapis.com/', ['crossorigin' => 'anonymous']);
|
||||
$this->getPreloadManager()->preconnect('https://fonts.gstatic.com/', ['crossorigin' => 'anonymous']);
|
||||
$this->getPreloadManager()->preload($params_FontScheme, ['as' => 'style', 'crossorigin' => 'anonymous']);
|
||||
$wa->registerAndUseStyle('fontscheme.current', $params_FontScheme, [], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'', 'crossorigin' => 'anonymous']);
|
||||
if (stripos($params_FontScheme, 'https://') === 0) {
|
||||
$this->getPreloadManager()->preconnect('https://fonts.googleapis.com/', ['crossorigin' => 'anonymous']);
|
||||
$this->getPreloadManager()->preconnect('https://fonts.gstatic.com/', ['crossorigin' => 'anonymous']);
|
||||
$this->getPreloadManager()->preload($params_FontScheme, ['as' => 'style', 'crossorigin' => 'anonymous']);
|
||||
$wa->registerAndUseStyle('fontscheme.current', $params_FontScheme, [], [
|
||||
'media' => 'print',
|
||||
'rel' => 'lazy-stylesheet',
|
||||
'onload' => 'this.media=\'all\'',
|
||||
'crossorigin' => 'anonymous'
|
||||
]);
|
||||
|
||||
if (preg_match_all('/family=([^?:]*):/i', $params_FontScheme, $matches) > 0) {
|
||||
$fontStyles = '--font-family-body: "' . str_replace('+', ' ', $matches[1][0]) . '", sans-serif;\n';
|
||||
$fontStyles .= '--font-family-headings: "' . str_replace('+', ' ', isset($matches[1][1]) ? $matches[1][1] : $matches[1][0]) . '", sans-serif;\n';
|
||||
$fontStyles .= '--font-weight-normal: 400;\n';
|
||||
$fontStyles .= '--font-weight-headings: 700;';
|
||||
}
|
||||
} else {
|
||||
$wa->registerAndUseStyle('fontscheme.current', $params_FontScheme, ['version' => 'auto'], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'']);
|
||||
$this->getPreloadManager()->preload($wa->getAsset('style', 'fontscheme.current')->getUri() . '?' . $this->getMediaVersion(), ['as' => 'style']);
|
||||
}
|
||||
if (preg_match_all('/family=([^?:]*):/i', $params_FontScheme, $matches) > 0) {
|
||||
$fontStyles = '--font-family-body: "' . str_replace('+', ' ', $matches[1][0]) . '", sans-serif;' . "\n";
|
||||
$fontStyles .= '--font-family-headings: "' . str_replace('+', ' ', isset($matches[1][1]) ? $matches[1][1] : $matches[1][0]) . '", sans-serif;' . "\n";
|
||||
$fontStyles .= '--font-weight-normal: 400;' . "\n";
|
||||
$fontStyles .= '--font-weight-headings: 700;';
|
||||
}
|
||||
} else {
|
||||
$wa->registerAndUseStyle('fontscheme.current', $params_FontScheme, ['version' => 'auto'], [
|
||||
'media' => 'print',
|
||||
'rel' => 'lazy-stylesheet',
|
||||
'onload' => 'this.media=\'all\''
|
||||
]);
|
||||
$this->getPreloadManager()->preload(
|
||||
$wa->getAsset('style', 'fontscheme.current')->getUri() . '?' . $this->getMediaVersion(),
|
||||
['as' => 'style']
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Enable assets
|
||||
$wa->usePreset('template.MOKO-CASSIOPEIA.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
|
||||
->useStyle('template.active.language')
|
||||
->useStyle('template.user')
|
||||
->useScript('template.user')
|
||||
->addInlineStyle(":root {\n --hue: 214;\n --template-bg-light: #f0f4fb;\n --template-text-dark: #495057;\n --template-text-light: #ffffff;\n --template-link-color: #2a69b8;\n --template-special-color: #001B4C;\n $fontStyles\n }");
|
||||
// Expose CSS variables (and any computed font variables)
|
||||
$wa->addInlineStyle(":root {\n --hue: 214;\n --template-bg-light: #f0f4fb;\n --template-text-dark: #495057;\n --template-text-light: #ffffff;\n --template-link-color: #2a69b8;\n --template-special-color: #001B4C;\n $fontStyles\n}");
|
||||
|
||||
// Override 'template.active' asset for correct dependency
|
||||
$wa->registerStyle('template.active', '', [], [], ['template.MOKO-CASSIOPEIA.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')]);
|
||||
// -------------------------------------
|
||||
// Brand: logo from params OR siteTitle
|
||||
// -------------------------------------
|
||||
$brandHtml = '';
|
||||
$logoFile = (string) $this->params->get('logoFile');
|
||||
|
||||
// Logo file or site title
|
||||
if ($this->params->get('logoFile')) {
|
||||
$logo = HTMLHelper::_('image', Uri::root(false) . htmlspecialchars($this->params->get('logoFile'), ENT_QUOTES), $sitename, ['loading' => 'eager', 'decoding' => 'async'], false, 0);
|
||||
if ($logoFile !== '') {
|
||||
$brandHtml = HTMLHelper::_(
|
||||
'image',
|
||||
Uri::root(false) . htmlspecialchars($logoFile, ENT_QUOTES, 'UTF-8'),
|
||||
$sitename,
|
||||
['class' => 'logo d-inline-block', 'loading' => 'eager', 'decoding' => 'async'],
|
||||
false,
|
||||
0
|
||||
);
|
||||
} elseif ($this->params->get('siteTitle')) {
|
||||
$logo = '<span title="' . $sitename . '">' . htmlspecialchars($this->params->get('siteTitle'), ENT_COMPAT, 'UTF-8') . '</span>';
|
||||
$brandHtml = '<span class="site-title" title="' . $sitename . '">'
|
||||
. htmlspecialchars($this->params->get('siteTitle'), ENT_COMPAT, 'UTF-8')
|
||||
. '</span>';
|
||||
} else {
|
||||
$logo = HTMLHelper::_('image', 'full_logo.png', $sitename, ['class' => 'logo d-inline-block', 'loading' => 'eager', 'decoding' => 'async'], true, 0);
|
||||
// Fallback to a bundled image (relative to media paths)
|
||||
$brandHtml = HTMLHelper::_('image', 'full_logo.png', $sitename, ['class' => 'logo d-inline-block', 'loading' => 'eager', 'decoding' => 'async'], true, 0);
|
||||
}
|
||||
|
||||
// Layout flags
|
||||
$hasClass = '';
|
||||
if ($this->countModules('sidebar-left', true)) { $hasClass .= ' has-sidebar-left'; }
|
||||
if ($this->countModules('sidebar-right', true)) { $hasClass .= ' has-sidebar-right'; }
|
||||
if ($this->countModules('drawer-left', true)) { $hasClass .= ' has-drawer-left'; }
|
||||
if ($this->countModules('drawer-left', true)) { $hasClass .= ' has-drawer-left'; }
|
||||
if ($this->countModules('drawer-right', true)) { $hasClass .= ' has-drawer-right'; }
|
||||
|
||||
$params_DrawerIconLeft = $this->params->get('drawerIconLeft', 'fas fa-chevron-right');
|
||||
$params_DrawerIconRight = $this->params->get('drawerIconRight', 'fas fa-chevron-left');
|
||||
|
||||
// Container
|
||||
$wrapper = $this->params->get('fluidContainer') ? 'wrapper-fluid' : 'wrapper-static';
|
||||
|
||||
$this->setMetaData('viewport', 'width=device-width, initial-scale=1');
|
||||
$wrapper = $this->params->get('fluidContainer') ? 'wrapper-fluid' : 'wrapper-static';
|
||||
$stickyHeader = $this->params->get('stickyHeader') ? 'position-sticky sticky-top' : '';
|
||||
|
||||
if ($this->params->get('fA6KitCode')) {
|
||||
$fa6Kit = "https://kit.fontawesome.com/" . $this->params->get('fA6KitCode') . ".js";
|
||||
JHtml::_('script', $fa6Kit, ['crossorigin' => 'anonymous']);
|
||||
} else {
|
||||
$wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet');
|
||||
}
|
||||
// Add Bootstrap TOC CSS
|
||||
$this->addStyleSheet($templatePath . '/css/vendor/afeld/bootstrap-toc.min.css');
|
||||
// Meta
|
||||
$this->setMetaData('viewport', 'width=device-width, initial-scale=1');
|
||||
|
||||
// Add Bootstrap TOC JS (should be loaded after Bootstrap JS)
|
||||
$this->addScript($templatePath . '/js/vendor/afeld/bootstrap-toc.min.js');
|
||||
// Optional Font Awesome Kit (not defined in JSON)
|
||||
if ($this->params->get('fA6KitCode')) {
|
||||
$fa6Kit = "https://kit.fontawesome.com/" . $this->params->get('fA6KitCode') . ".js";
|
||||
HTMLHelper::_('script', $fa6Kit, ['crossorigin' => 'anonymous']);
|
||||
}
|
||||
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
|
||||
<head>
|
||||
<?php if (trim($params_custom_head_start)) : ?><?php echo $params_custom_head_start; ?><?php endif; ?>
|
||||
<jdoc:include type="head" />
|
||||
<script>
|
||||
window.addEventListener('DOMContentLoaded', function () {
|
||||
var ua = navigator.userAgent || navigator.vendor || window.opera;
|
||||
var isFacebookBrowser = ua.indexOf('FBAN') > -1 || ua.indexOf('FBAV') > -1;
|
||||
<?php if (trim($params_custom_head_start)) : ?><?php echo $params_custom_head_start; ?><?php endif; ?>
|
||||
<jdoc:include type="head" />
|
||||
|
||||
if (isFacebookBrowser) {
|
||||
var warning = document.createElement('div');
|
||||
warning.textContent = '⚠️ KNOWN ISSUE: Images do not load in Facebook Web browser. Please open in external browser for full experience.';
|
||||
warning.style.position = 'fixed';
|
||||
warning.style.top = '0';
|
||||
warning.style.left = '0';
|
||||
warning.style.right = '0';
|
||||
warning.style.zIndex = '10000';
|
||||
warning.style.backgroundColor = '#007bff'; // Blue background
|
||||
warning.style.color = '#fff';
|
||||
warning.style.padding = '15px';
|
||||
warning.style.textAlign = 'center';
|
||||
warning.style.fontWeight = 'bold';
|
||||
warning.style.fontSize = '16px';
|
||||
warning.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';
|
||||
<script>
|
||||
// Early theme application to avoid FOUC
|
||||
(function () {
|
||||
try {
|
||||
var stored = localStorage.getItem('theme');
|
||||
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
var theme = stored ? stored : (prefersDark ? 'dark' : 'light');
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
|
||||
document.body.appendChild(warning);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
var stored = localStorage.getItem('theme');
|
||||
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
var theme = stored ? stored : (prefersDark ? 'dark' : 'light');
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
// Facebook in-app browser warning banner
|
||||
window.addEventListener('DOMContentLoaded', function () {
|
||||
var ua = navigator.userAgent || navigator.vendor || window.opera;
|
||||
var isFacebookBrowser = ua.indexOf('FBAN') > -1 || ua.indexOf('FBAV') > -1;
|
||||
if (isFacebookBrowser) {
|
||||
var warning = document.createElement('div');
|
||||
warning.textContent = '⚠️ KNOWN ISSUE: Images do not load in Facebook Web browser. Please open in external browser for full experience.';
|
||||
warning.style.position = 'fixed';
|
||||
warning.style.top = '0';
|
||||
warning.style.left = '0';
|
||||
warning.style.right = '0';
|
||||
warning.style.zIndex = '10000';
|
||||
warning.style.backgroundColor = '#007bff';
|
||||
warning.style.color = '#fff';
|
||||
warning.style.padding = '15px';
|
||||
warning.style.textAlign = 'center';
|
||||
warning.style.fontWeight = 'bold';
|
||||
warning.style.fontSize = '16px';
|
||||
warning.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';
|
||||
document.body.appendChild(warning);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php if (trim($params_custom_head_end)) : ?><?php echo $params_custom_head_end; ?><?php endif; ?>
|
||||
<?php if (trim($params_custom_head_end)) : ?><?php echo $params_custom_head_end; ?><?php endif; ?>
|
||||
</head>
|
||||
<body data-bs-spy="scroll" data-bs-target="#toc" class="site <?php echo $option . ' ' . $wrapper . ' view-' . $view . ($layout ? ' layout-' . $layout : ' no-layout') . ($task ? ' task-' . $task : ' no-task') . ($itemid ? ' itemid-' . $itemid : '') . ($pageclass ? ' ' . $pageclass : '') . $hasClass . ($this->direction == 'rtl' ? ' rtl' : ''); ?>">
|
||||
<?php
|
||||
if (!empty($params_googletagmanager) && !empty($params_googletagmanagerid)) :
|
||||
$gtmID = htmlspecialchars($params_googletagmanagerid, ENT_QUOTES, 'UTF-8');
|
||||
?>
|
||||
<!-- Google Tag Manager -->
|
||||
<script>
|
||||
(function(w,d,s,l,i){
|
||||
w[l]=w[l]||[];
|
||||
w[l].push({'gtm.start': new Date().getTime(), event:'gtm.js'});
|
||||
var f=d.getElementsByTagName(s)[0],
|
||||
j=d.createElement(s),
|
||||
dl=l!='dataLayer'?'&l='+l:'';
|
||||
j.async=true;
|
||||
j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
|
||||
f.parentNode.insertBefore(j,f);
|
||||
})(window,document,'script','dataLayer','<?php echo $gtmID; ?>');
|
||||
</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
<body data-bs-spy="scroll" data-bs-target="#toc" class="site <?php
|
||||
echo $option . ' ' . $wrapper
|
||||
. ' view-' . $view
|
||||
. ($layout ? ' layout-' . $layout : ' no-layout')
|
||||
. ($task ? ' task-' . $task : ' no-task')
|
||||
. ($itemid ? ' itemid-' . $itemid : '')
|
||||
. ($pageclass ? ' ' . $pageclass : '')
|
||||
. $hasClass
|
||||
. ($this->direction == 'rtl' ? ' rtl' : '');
|
||||
?>">
|
||||
<?php if (!empty($params_googletagmanager) && !empty($params_googletagmanagerid)) :
|
||||
$gtmID = htmlspecialchars($params_googletagmanagerid, ENT_QUOTES, 'UTF-8'); ?>
|
||||
<!-- Google Tag Manager -->
|
||||
<script>
|
||||
(function(w,d,s,l,i){
|
||||
w[l]=w[l]||[];
|
||||
w[l].push({'gtm.start': new Date().getTime(), event:'gtm.js'});
|
||||
var f=d.getElementsByTagName(s)[0],
|
||||
j=d.createElement(s),
|
||||
dl=l!='dataLayer'?'&l='+l:'';
|
||||
j.async=true;
|
||||
j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
|
||||
f.parentNode.insertBefore(j,f);
|
||||
})(window,document,'script','dataLayer','<?php echo $gtmID; ?>');
|
||||
</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript>
|
||||
<iframe src="https://www.googletagmanager.com/ns.html?id=<?php echo $gtmID; ?>"
|
||||
height="0" width="0" style="display:none;visibility:hidden"></iframe>
|
||||
</noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
<?php
|
||||
endif;
|
||||
if (!empty($params_googleanalytics) && !empty($params_googleanalyticsid)) :
|
||||
$gaId = htmlspecialchars($params_googleanalyticsid, ENT_QUOTES, 'UTF-8');
|
||||
?>
|
||||
<!-- Google Analytics (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=<?php echo $gaId; ?>"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
|
||||
gtag('js', new Date());
|
||||
|
||||
// Optional: Consent Mode defaults (adjust to your needs or remove)
|
||||
gtag('consent', 'default', {
|
||||
'ad_storage': 'denied',
|
||||
'analytics_storage': 'granted',
|
||||
'ad_user_data': 'denied',
|
||||
'ad_personalization': 'denied'
|
||||
});
|
||||
|
||||
// GA4 vs UA fallback
|
||||
(function(id){
|
||||
if (/^G-/.test(id)) {
|
||||
// GA4
|
||||
gtag('config', id, {
|
||||
'anonymize_ip': true
|
||||
});
|
||||
} else if (/^UA-/.test(id)) {
|
||||
// Legacy Universal Analytics (sunset by Google, kept for backward compat)
|
||||
gtag('config', id, {
|
||||
'anonymize_ip': true
|
||||
});
|
||||
console.warn('Using a UA- ID. Universal Analytics is sunset; consider migrating to GA4.');
|
||||
} else {
|
||||
console.warn('Unrecognized Google Analytics ID format:', id);
|
||||
}
|
||||
})('<?php echo $gaId; ?>');
|
||||
</script>
|
||||
<!-- End Google Analytics -->
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript>
|
||||
<iframe src="https://www.googletagmanager.com/ns.html?id=<?php echo $gtmID; ?>"
|
||||
height="0" width="0" style="display:none;visibility:hidden"></iframe>
|
||||
</noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
<?php endif; ?>
|
||||
|
||||
<header class="header container-header full-width<?php echo $stickyHeader ? ' ' . $stickyHeader : ''; ?>">
|
||||
|
||||
<?php if ($this->countModules('topbar')) : ?>
|
||||
<div class="container-topbar">
|
||||
<jdoc:include type="modules" name="topbar" style="none" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="header-top">
|
||||
<?php if ($this->countModules('below-topbar')) : ?>
|
||||
<div class="grid-child container-below-topbar">
|
||||
<jdoc:include type="modules" name="below-topbar" style="none" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($this->params->get('brand', 1)) : ?>
|
||||
<div class="grid-child">
|
||||
<div class="navbar-brand">
|
||||
<a class="brand-logo" href="<?php echo $this->baseurl; ?>/">
|
||||
<?php echo $logo; ?>
|
||||
</a>
|
||||
<?php if ($this->params->get('siteDescription')) : ?>
|
||||
<div class="site-description"><?php echo htmlspecialchars($this->params->get('siteDescription')); ?></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($this->countModules('below-logo')) : ?>
|
||||
<div class="grid container-below-logo">
|
||||
<jdoc:include type="modules" name="below-logo" style="none" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Drawer Toggle Buttons -->
|
||||
<?php if ($this->countModules('drawer-left')) : ?>
|
||||
<button class="drawer-toggle-left btn btn-outline-secondary me-2"
|
||||
type="button"
|
||||
data-bs-toggle="offcanvas"
|
||||
data-bs-target="#drawer-left"
|
||||
aria-controls="drawer-left">
|
||||
<span class="<?php echo $params_leftIcon; ?>"></span>
|
||||
</button>
|
||||
<?php if (!empty($params_googleanalytics) && !empty($params_googleanalyticsid)) :
|
||||
$gaId = htmlspecialchars($params_googleanalyticsid, ENT_QUOTES, 'UTF-8'); ?>
|
||||
<!-- Google Analytics (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=<?php echo $gaId; ?>"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('consent', 'default', {
|
||||
'ad_storage': 'denied',
|
||||
'analytics_storage': 'granted',
|
||||
'ad_user_data': 'denied',
|
||||
'ad_personalization': 'denied'
|
||||
});
|
||||
(function(id){
|
||||
if (/^G-/.test(id)) {
|
||||
gtag('config', id, { 'anonymize_ip': true });
|
||||
} else if (/^UA-/.test(id)) {
|
||||
gtag('config', id, { 'anonymize_ip': true });
|
||||
console.warn('Using a UA- ID. Universal Analytics is sunset; consider migrating to GA4.');
|
||||
} else {
|
||||
console.warn('Unrecognized Google Analytics ID format:', id);
|
||||
}
|
||||
})('<?php echo $gaId; ?>');
|
||||
</script>
|
||||
<!-- End Google Analytics -->
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($this->countModules('drawer-right')) : ?>
|
||||
<button class="drawer-toggle-right btn btn-outline-secondary"
|
||||
type="button"
|
||||
data-bs-toggle="offcanvas"
|
||||
data-bs-target="#drawer-right"
|
||||
aria-controls="drawer-right">
|
||||
<span class="<?php echo $params_rightIcon; ?>"></span>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
<header class="header container-header full-width<?php echo $stickyHeader ? ' ' . $stickyHeader : ''; ?>" role="banner">
|
||||
|
||||
<?php if ($this->countModules('menu', true) || $this->countModules('search', true)) : ?>
|
||||
<div class="grid-child container-nav">
|
||||
<?php if ($this->countModules('menu', true)) : ?>
|
||||
<jdoc:include type="modules" name="menu" style="none" />
|
||||
<?php endif; ?>
|
||||
<?php if ($this->countModules('search', true)) : ?>
|
||||
<div class="container-search">
|
||||
<jdoc:include type="modules" name="search" style="none" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ($this->countModules('topbar')) : ?>
|
||||
<div class="container-topbar">
|
||||
<jdoc:include type="modules" name="topbar" style="none" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="header-top">
|
||||
<?php if ($this->countModules('below-topbar')) : ?>
|
||||
<div class="grid-child container-below-topbar">
|
||||
<jdoc:include type="modules" name="below-topbar" style="none" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($this->params->get('brand', 1)) : ?>
|
||||
<div class="grid-child">
|
||||
<div class="navbar-brand">
|
||||
<a class="brand-logo" href="<?php echo $this->baseurl; ?>/">
|
||||
<?php echo $brandHtml; ?>
|
||||
</a>
|
||||
<?php if ($this->params->get('siteDescription')) : ?>
|
||||
<div class="site-description">
|
||||
<?php echo htmlspecialchars($this->params->get('siteDescription'), ENT_QUOTES, 'UTF-8'); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($this->countModules('below-logo')) : ?>
|
||||
<div class="grid container-below-logo">
|
||||
<jdoc:include type="modules" name="below-logo" style="none" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Drawer Toggle Buttons -->
|
||||
<?php if ($this->countModules('drawer-left')) : ?>
|
||||
<button class="drawer-toggle-left btn btn-outline-secondary me-2"
|
||||
type="button"
|
||||
data-bs-toggle="offcanvas"
|
||||
data-bs-target="#drawer-left"
|
||||
aria-controls="drawer-left">
|
||||
<span class="<?php echo $params_leftIcon; ?>"></span>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($this->countModules('drawer-right')) : ?>
|
||||
<button class="drawer-toggle-right btn btn-outline-secondary"
|
||||
type="button"
|
||||
data-bs-toggle="offcanvas"
|
||||
data-bs-target="#drawer-right"
|
||||
aria-controls="drawer-right">
|
||||
<span class="<?php echo $params_rightIcon; ?>"></span>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($this->countModules('menu', true) || $this->countModules('search', true)) : ?>
|
||||
<div class="grid-child container-nav">
|
||||
<?php if ($this->countModules('menu', true)) : ?>
|
||||
<nav role="navigation" aria-label="Primary">
|
||||
<jdoc:include type="modules" name="menu" style="none" />
|
||||
</nav>
|
||||
<?php endif; ?>
|
||||
<?php if ($this->countModules('search', true)) : ?>
|
||||
<div class="container-search">
|
||||
<jdoc:include type="modules" name="search" style="none" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</header>
|
||||
|
||||
<div class="site-grid">
|
||||
<?php if ($this->countModules('banner', true)) : ?>
|
||||
<div class="container-banner full-width">
|
||||
<jdoc:include type="modules" name="banner" style="none" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ($this->countModules('banner', true)) : ?>
|
||||
<div class="container-banner full-width">
|
||||
<jdoc:include type="modules" name="banner" style="none" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($this->countModules('top-a', true)) : ?>
|
||||
<div class="grid-child container-top-a">
|
||||
<jdoc:include type="modules" name="top-a" style="card" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ($this->countModules('top-a', true)) : ?>
|
||||
<div class="grid-child container-top-a">
|
||||
<jdoc:include type="modules" name="top-a" style="card" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($this->countModules('top-b', true)) : ?>
|
||||
<div class="grid-child container-top-b">
|
||||
<jdoc:include type="modules" name="top-b" style="card" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ($this->countModules('top-b', true)) : ?>
|
||||
<div class="grid-child container-top-b">
|
||||
<jdoc:include type="modules" name="top-b" style="card" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($this->countModules('sidebar-left', true)) : ?>
|
||||
<div class="grid-child container-sidebar-left">
|
||||
<jdoc:include type="modules" name="sidebar-left" style="card" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ($this->countModules('sidebar-left', true)) : ?>
|
||||
<div class="grid-child container-sidebar-left">
|
||||
<jdoc:include type="modules" name="sidebar-left" style="card" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="grid-child container-component">
|
||||
<jdoc:include type="modules" name="breadcrumbs" style="none" />
|
||||
<jdoc:include type="modules" name="main-top" style="card" />
|
||||
<jdoc:include type="message" />
|
||||
<main>
|
||||
<jdoc:include type="component" />
|
||||
</main>
|
||||
<jdoc:include type="modules" name="main-bottom" style="card" />
|
||||
</div>
|
||||
<div class="grid-child container-component">
|
||||
<jdoc:include type="modules" name="breadcrumbs" style="none" />
|
||||
<jdoc:include type="modules" name="main-top" style="card" />
|
||||
<jdoc:include type="message" />
|
||||
<main id="maincontent" role="main">
|
||||
<jdoc:include type="component" />
|
||||
</main>
|
||||
<jdoc:include type="modules" name="main-bottom" style="card" />
|
||||
</div>
|
||||
|
||||
<?php if ($this->countModules('sidebar-right', true)) : ?>
|
||||
<div class="grid-child container-sidebar-right">
|
||||
<jdoc:include type="modules" name="sidebar-right" style="card" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ($this->countModules('sidebar-right', true)) : ?>
|
||||
<div class="grid-child container-sidebar-right">
|
||||
<jdoc:include type="modules" name="sidebar-right" style="card" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($this->countModules('bottom-a', true)) : ?>
|
||||
<div class="grid-child container-bottom-a">
|
||||
<jdoc:include type="modules" name="bottom-a" style="card" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ($this->countModules('bottom-a', true)) : ?>
|
||||
<div class="grid-child container-bottom-a">
|
||||
<jdoc:include type="modules" name="bottom-a" style="card" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($this->countModules('bottom-b', true)) : ?>
|
||||
<div class="grid-child container-bottom-b">
|
||||
<jdoc:include type="modules" name="bottom-b" style="card" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ($this->countModules('bottom-b', true)) : ?>
|
||||
<div class="grid-child container-bottom-b">
|
||||
<jdoc:include type="modules" name="bottom-b" style="card" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<footer class="container-footer footer full-width">
|
||||
<?php if ($this->countModules('footer-menu', true)) : ?>
|
||||
<div class="grid-child footer-menu">
|
||||
<jdoc:include type="modules" name="footer-menu" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ($this->countModules('footer', true)) : ?>
|
||||
<div class="grid-child">
|
||||
<jdoc:include type="modules" name="footer" style="none" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ($this->countModules('footer-menu', true)) : ?>
|
||||
<div class="grid-child footer-menu">
|
||||
<jdoc:include type="modules" name="footer-menu" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ($this->countModules('footer', true)) : ?>
|
||||
<div class="grid-child">
|
||||
<jdoc:include type="modules" name="footer" style="none" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</footer>
|
||||
|
||||
<?php if ($this->params->get('backTop') == 1) : ?>
|
||||
<a href="#top" id="back-top" class="back-to-top-link" aria-label="<?php echo Text::_('TPL_MOKO-CASSIOPEIA_BACKTOTOP'); ?>">
|
||||
<span class="icon-arrow-up icon-fw" aria-hidden="true"></span>
|
||||
</a>
|
||||
<a href="#top" id="back-top" class="back-to-top-link" aria-label="<?php echo Text::_('TPL_MOKO-CASSIOPEIA_BACKTOTOP'); ?>">
|
||||
<span class="icon-arrow-up icon-fw" aria-hidden="true"></span>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($this->countModules('drawer-left', true)) : ?>
|
||||
<!-- Left Offcanvas Drawer -->
|
||||
<aside class="offcanvas offcanvas-start" tabindex="-1" id="drawer-left">
|
||||
<div class="offcanvas-header">
|
||||
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="<?php echo Text::_('JLIB_HTML_BEHAVIOR_CLOSE'); ?>"></button>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="<?php echo Text::_('JLIB_HTML_BEHAVIOR_CLOSE'); ?>"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<jdoc:include type="modules" name="drawer-left" style="none" />
|
||||
<jdoc:include type="modules" name="drawer-left" style="none" />
|
||||
</div>
|
||||
</aside>
|
||||
<?php endif; ?>
|
||||
@@ -410,75 +481,15 @@ if (!empty($params_googleanalytics) && !empty($params_googleanalyticsid)) :
|
||||
<!-- Right Offcanvas Drawer -->
|
||||
<aside class="offcanvas offcanvas-end" tabindex="-1" id="drawer-right">
|
||||
<div class="offcanvas-header">
|
||||
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="<?php echo Text::_('JLIB_HTML_BEHAVIOR_CLOSE'); ?>"></button>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="<?php echo Text::_('JLIB_HTML_BEHAVIOR_CLOSE'); ?>"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<jdoc:include type="modules" name="drawer-right" style="none" />
|
||||
<jdoc:include type="modules" name="drawer-right" style="none" />
|
||||
</div>
|
||||
</aside>
|
||||
<?php endif; ?>
|
||||
|
||||
<jdoc:include type="modules" name="debug" style="none" />
|
||||
<div class='position-fixed bottom-0 end-0 p-3' style='z-index:1080;'>
|
||||
<div class='d-flex align-items-center gap-2 bg-body border rounded-pill shadow-sm px-3 py-2'>
|
||||
<span class='small text-body'>Light</span>
|
||||
<div class='form-check form-switch m-0'>
|
||||
<input class='form-check-input' type='checkbox' role='switch' id='themeSwitch' aria-label='Toggle dark mode'>
|
||||
</div>
|
||||
<span class='small text-body'>Dark</span>
|
||||
<button id='themeAuto' class='btn btn-sm btn-link text-decoration-none px-2' type='button' aria-label='Follow system theme'>Auto</button>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function () {
|
||||
var storageKey = 'theme';
|
||||
var doc = document.documentElement;
|
||||
var mql = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
var switchEl, autoBtn;
|
||||
|
||||
function getStored() { try { return localStorage.getItem(storageKey); } catch (e) { return null; } }
|
||||
function setStored(v) { try { localStorage.setItem(storageKey, v); } catch (e) {} }
|
||||
function clearStored() { try { localStorage.removeItem(storageKey); } catch (e) {} }
|
||||
function systemTheme() { return mql.matches ? 'dark' : 'light'; }
|
||||
function applyTheme(theme) {
|
||||
doc.setAttribute('data-bs-theme', theme);
|
||||
if (switchEl) switchEl.checked = (theme === 'dark');
|
||||
}
|
||||
|
||||
function init() {
|
||||
switchEl = document.getElementById('themeSwitch');
|
||||
autoBtn = document.getElementById('themeAuto');
|
||||
|
||||
var stored = getStored();
|
||||
applyTheme(stored ? stored : systemTheme());
|
||||
|
||||
if (switchEl) {
|
||||
switchEl.addEventListener('change', function () {
|
||||
var theme = switchEl.checked ? 'dark' : 'light';
|
||||
applyTheme(theme);
|
||||
setStored(theme);
|
||||
});
|
||||
}
|
||||
|
||||
if (autoBtn) {
|
||||
autoBtn.addEventListener('click', function () {
|
||||
clearStored();
|
||||
applyTheme(systemTheme());
|
||||
});
|
||||
}
|
||||
|
||||
var onMqlChange = function () {
|
||||
if (!getStored()) applyTheme(systemTheme());
|
||||
};
|
||||
if (typeof mql.addEventListener === 'function') mql.addEventListener('change', onMqlChange);
|
||||
else if (typeof mql.addListener === 'function') mql.addListener(onMqlChange);
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
|
||||
else init();
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,3 +1,32 @@
|
||||
/*
|
||||
=========================================================================
|
||||
Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
|
||||
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: templates/moko-cassiopeia/joomla.asset.json
|
||||
VERSION: 02.00
|
||||
BRIEF: Joomla asset manifest defining scripts and styles for Moko-Cassiopeia template
|
||||
=========================================================================
|
||||
*/
|
||||
{
|
||||
"$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
|
||||
"name": "tpl_moko-cassiopeia",
|
||||
@@ -73,33 +102,33 @@
|
||||
{
|
||||
"name": "template.light.colors_standard",
|
||||
"type": "style",
|
||||
"uri": "media/templates/site/moko-cassiopeia/css/global/colors/light/colors_standard.css"
|
||||
"uri": "media/templates/site/moko-cassiopeia/css/global/light/colors_standard.css"
|
||||
},
|
||||
{
|
||||
"name": "template.light.colors_alternative",
|
||||
"type": "style",
|
||||
"uri": "media/templates/site/moko-cassiopeia/css/global/colors/light/colors_alternative.css"
|
||||
"uri": "media/templates/site/moko-cassiopeia/css/global/light/colors_alternative.css"
|
||||
},
|
||||
{
|
||||
"name": "template.light.colors_custom",
|
||||
"type": "style",
|
||||
"uri": "media/templates/site/moko-cassiopeia/css/global/colors/light/colors_custom.css"
|
||||
"uri": "media/templates/site/moko-cassiopeia/css/global/light/colors_custom.css"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "template.dark.colors_standard",
|
||||
"type": "style",
|
||||
"uri": "media/templates/site/moko-cassiopeia/css/global/colors/dark/colors_standard.css"
|
||||
"uri": "media/templates/site/moko-cassiopeia/css/global/dark/colors_standard.css"
|
||||
},
|
||||
{
|
||||
"name": "template.dark.colors_alternative",
|
||||
"type": "style",
|
||||
"uri": "media/templates/site/moko-cassiopeia/css/global/colors/dark/colors_alternative.css"
|
||||
"uri": "media/templates/site/moko-cassiopeia/css/global/dark/colors_alternative.css"
|
||||
},
|
||||
{
|
||||
"name": "template.dark.colors_custom",
|
||||
"type": "style",
|
||||
"uri": "media/templates/site/moko-cassiopeia/css/global/colors/dark/colors_custom.css"
|
||||
"uri": "media/templates/site/moko-cassiopeia/css/global/dark/colors_custom.css"
|
||||
},
|
||||
|
||||
{
|
||||
|
||||
@@ -1,11 +1,31 @@
|
||||
<?php
|
||||
/**
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.Moko-Cassiopeia
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* Offline template that explicitly loads css/template.css and css/colors_*.css.
|
||||
* Includes: site-name-in-title rules, brand (logo OR title), theme switcher,
|
||||
* module positions (offline-header, offline), and login inside Bootstrap accordion.
|
||||
* 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: templates/moko-cassiopeia/offline.php
|
||||
* VERSION: 02.00
|
||||
* BRIEF: Offline page template file for Moko-Cassiopeia
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
@@ -1,20 +1,31 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
@copyright © 2025 Moko Consulting — All Rights Reserved
|
||||
@license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
<!-- =========================================================================
|
||||
Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
|
||||
Website: https://mokoconsulting.tech
|
||||
Email: hello@mokoconsulting.tech
|
||||
Phone: +1 (931) 279-6313
|
||||
This file is part of a Moko Consulting project.
|
||||
|
||||
@package Joomla.Site
|
||||
@subpackage Templates.moko-cassiopeia
|
||||
@file /templates/moko-cassiopeia/templateDetails.xml
|
||||
SPDX-License-Identifier: GPL-3.0-or-later
|
||||
|
||||
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.
|
||||
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: templates/moko-cassiopeia/templateDetails.xml
|
||||
VERSION: 02.00
|
||||
BRIEF: Template manifest XML file for Moko-Cassiopeia
|
||||
=========================================================================
|
||||
-->
|
||||
<extension type="template" client="site" method="upgrade">
|
||||
<updateservers>
|
||||
|
||||
Reference in New Issue
Block a user