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

v2.01 #2

Merged
mokoconsulting-tech merged 2 commits from dev-2.1 into main 2025-08-31 01:58:04 +00:00
Conversation 0 Commits 2 Files Changed 7 +1823 -2314
23 changed files with 1823 additions and 2314 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 64fe072f47 - Show all commits

109
.gitignore vendored
View File

@@ -1,65 +1,70 @@
@ -0,0 +1,47 @@
# Logs and databases
/logs/
/tmp/
/documents/
/administrator/logs/
/packages/*
#Dev related
build/
dev/
scripts/
#Configuration files
/configuration.php
/htdocs/conf/*
# Joomla-generated files
installation/
/cache/
/media/com_joomlaupdate/
# Backup files
*.bak
*.backup
/backups/
/htdocs/solo/
# Environment-specific files
# ============================================================
.env
.env.local
.env.*.local
*.local.php
*.secret.php
# Node.js dependencies (if using npm for template development)
node_modules/
npm-debug.log*
# ============================================================
# Logs, dumps & databases
# ============================================================
*.log
*.pid
*.seed
*.sql
*.sql.gz
*.sqlite
*.sqlite3
*.db
*.db-journal
# Build files
/dist/
/build/
# ============================================================
# OS / Editor / IDE cruft
# ============================================================
.DS_Store
Thumbs.db
desktop.ini
# Windows artifacts
Thumbs.db:encryptable
ehthumbs.db
ehthumbs_vista.db
$RECYCLE.BIN/
System Volume Information/
*.lnk
Icon?
.idea/
.vscode/
*.code-workspace
*.sublime*
.project
.settings/
.buildpath
# Compiled assets
# ============================================================
# Dev scripts & scratch
# ============================================================
$1TODO
todo
# ============================================================
# Maps & compiled asset helpers
# ============================================================
*.css.map
*.js.map
# System files
desktop.ini
.DS_Store
Thumbs.db
.idea/
*.sublime*
# ============================================================
# SFTP / sync tools
# ============================================================
sftp-config*.json
*.ffs*
# Editor and IDE files
.vscode/
*.swp
# ============================================================
# Replit / cloud IDE
# ============================================================
.replit
replit.md
# Other
*.lock
upgrade.unlock
*conf*.php
*.back*
*.bak*
*.old
# ============================================================
# Keep-empty folders helper
# ============================================================
!.gitkeep

85
CHANGELOG.md Normal file
View 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)

21
CODE_OF_CONDUCT.md
View File

@@ -1,22 +1,31 @@
<!--
=========================================================================
Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
This file is part of a Moko Consulting project.
This documentation is free software: you can redistribute it and/or modify
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
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.
This documentation is distributed in the hope that it will be useful,
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 documentation. If not, see <https://www.gnu.org/licenses/>.
SPDX-License-Identifier: GPL-3.0-or-later
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

30
CONTRIBUTING.md
View File

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

304
README.md Normal file
View File

@@ -0,0 +1,304 @@
<!--
=========================================================================
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: 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+)
---
## Overview
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
* **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+** / **5.x**
* PHP **8.1+**
* Modern evergreen browsers (graceful fallback if `prefers-color-scheme` isn’t available)
---
## Installation
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.
---
## Template Options (high-level)
**Theme**
* **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`
**GTM / Analytics**
* **GTM Container ID** (e.g., `GTM-XXXXXXX`)
* **Analytics Tag ID** (optional GA4 if not using GTM)
**Performance**
* **Development Mode**
* `Off` → `.min.css` / `.min.js` bundles
* `On` → unminified sources for debugging
---
## Dark Mode — Tokens & Toggle
**Color tokens**
```css
:root {
--color-bg: #ffffff;
--color-surface: #f8f9fa;
--color-text: #1d2125;
--color-text-muted: #6c757d;
--color-border: #dee2e6;
--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);
}
```
**Programmatic switch (optional)**
```js
// Apply and persist a choice
document.documentElement.dataset.theme = 'dark'; // or 'light'
localStorage.setItem('moko.theme', 'dark'); // namespaced key
```
---
## 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"] }
]
}
```
In `index.php`:
```php
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $this->getWebAssetManager();
$wa->usePreset('template.moko-cassiopeia');
```
---
## Upgrade Notes
**1.0 → 2.0**
* 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**).
---
## Accessibility
* Improved contrast targets across light/dark.
* Visible, consistent focus indicators.
* Toggle is keyboard-navigable and labeled for assistive tech.
---
## Troubleshooting
* **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`.
---
## 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.

551
media/templates/site/moko-cassiopeia/css/global/colors/colors_alternative.css
View File

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

551
media/templates/site/moko-cassiopeia/css/global/colors/colors_standard.css
View File

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

30
media/templates/site/moko-cassiopeia/css/global/fonts-local_roboto.css
View File

@@ -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/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");

37
media/templates/site/moko-cassiopeia/css/global/social-media-demo.css
View File

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

30
media/templates/site/moko-cassiopeia/css/system/searchtools/searchtools.css
View File

@@ -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/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;
}

29
media/templates/site/moko-cassiopeia/css/vendor/choicesjs/choices.css vendored
View File

@@ -1,4 +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/choicesjs/choices.css
* VERSION: 02.00
* BRIEF: Vendor stylesheet for Choices.js select and input enhancements in Moko-Cassiopeia
* =========================================================================
*/
/* ===============================
= Choices =
=============================== */

30
media/templates/site/moko-cassiopeia/css/vendor/joomla-custom-elements/joomla-alert.css vendored
View File

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

30
media/templates/site/moko-cassiopeia/css/vendor/vmbasic.css vendored
View File

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

33
media/templates/site/moko-cassiopeia/js/darkmode-toggle.js
View File

@@ -1,9 +1,32 @@
/**
* 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';

347
media/templates/site/moko-cassiopeia/js/gtm.js
View File

@@ -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 (_) {}
})();

11
media/templates/site/moko-cassiopeia/js/mod_gabble/gabble_com.js
View File

@@ -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.
*/

118
media/templates/site/moko-cassiopeia/js/mod_gabble/index.html
View File

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

37
media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu-es5.js
View File

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

37
media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu.js
View File

@@ -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', () => {

37
media/templates/site/moko-cassiopeia/js/template.js
View File

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

37
media/templates/site/moko-cassiopeia/js/theme-init.js
View File

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

37
media/templates/site/moko-cassiopeia/js/user.js
View File

@@ -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
* =========================================================================
*/

254
readme.md
View File

@@ -1,254 +0,0 @@
# Moko-Cassiopeia
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.
---
## Table of Contents
- [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)
---
## 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.
## 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)
## 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).
## Configuration
Configuration lives in the Template Style parameters. Common params are listed below. Names may vary slightly depending on release.
### Global Params
- '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.
### Font Awesome 6
When enabled, the template registers FA6 and exposes the standard icon syntax:
```html
<i class='fa-solid fa-circle-check' aria-hidden='true'></i>
<span class='visually-hidden'>Success</span>
```
**Notes**
- Icons are decorative unless paired with text or 'aria-label'.
- Prefer the 'fa-solid', 'fa-regular', or 'fa-brands' families explicitly.
### Bootstrap 5 Helpers
If 'load\_bootstrap5' is enabled, grid and utilities are available:
```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:
```css
:root {
--moko-cassiopeia-color-primary: #0b4008;
--moko-cassiopeia-color-link: #0b4008;
--moko-cassiopeia-color-hover: #000000;
--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;
}
```
> Apply these in a custom stylesheet or template options if provided. Use semantic variables where possible to maintain consistency.
## 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>
```
### 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>
```
### 3) Module‑driven GA Event
```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>
```
> Note: We use single quotes in HTML where possible to keep consistency with PHP string style preferences.
## Best Practices
- **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.
## Development
- 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**
- Place site‑specific CSS in '/css/custom.css'.
- Use '/html' for component/module layout overrides as needed.
## Changelog
- 1.15: Added CSS theme seletor (dark/light)
- 1.00: Initial public release with FA6, BS5, TOC, GTM/GA hooks.
## License
Distributed under the GNU General Public License v3. See 'LICENSE' for details.