v2.01 #2
109
.gitignore
vendored
109
.gitignore
vendored
@@ -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
85
CHANGELOG.md
Normal file
@@ -0,0 +1,85 @@
|
||||
<!--
|
||||
=========================================================================
|
||||
Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
|
||||
This file is part of a Moko Consulting project.
|
||||
|
||||
SPDX-License-Identifier: GPL-3.0-or-later
|
||||
|
||||
This program is free software; you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation; either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see https://www.gnu.org/licenses/ .
|
||||
=========================================================================
|
||||
FILE INFORMATION
|
||||
DEFGROUP: Joomla
|
||||
INGROUP: Moko-Cassiopeia
|
||||
PATH: CHANGELOG.md
|
||||
VERSION: 02.00
|
||||
BRIEF: Changelog file documenting version history of Moko-Cassiopeia
|
||||
=========================================================================
|
||||
-->
|
||||
|
||||
Changelog — Moko-Cassiopeia
|
||||
|
||||
# Version 2.0 (2025-08-30)
|
||||
|
||||
**Major Release** — introduces the long-awaited **Dark Mode Toggle**, streamlining accessibility and usability enhancements.
|
||||
|
||||
## Added
|
||||
|
||||
* **Dark Mode Toggle**
|
||||
|
||||
* Frontend toggle switch included in template.
|
||||
* JavaScript handles switching between light/dark modes.
|
||||
* Dark mode CSS rules applied across template styles.
|
||||
* Automatic persistence of user choice (via localStorage).
|
||||
|
||||
* **Header Parameters Update**
|
||||
|
||||
* Added **logo parameter support** in template settings.
|
||||
* Updated metadata & copyright header.
|
||||
|
||||
* **Expanded TOC (Table of Contents)**
|
||||
|
||||
* Automatic TOC injection when enabled.
|
||||
* User selects placement via article > options > layout (`toc-left` or `toc-right`).
|
||||
|
||||
## Improved
|
||||
|
||||
* Cleaned up `index.php` by removing **skip-to-content** duplicate calls.
|
||||
* Consolidated JavaScript asset loading (ensuring dark-mode script is loaded correctly from external JS file).
|
||||
* Streamlined CSS for **toggle switch**, ensuring it inherits Bootstrap/Cassiopeia defaults.
|
||||
* General accessibility refinements in typography and color contrast.
|
||||
|
||||
## Fixed
|
||||
|
||||
* Fixed missing **logo param** in header output.
|
||||
* Corrected stylesheet inconsistencies between Bootstrap 5 helpers and template overrides.
|
||||
* Patched redundant calls in script includes.
|
||||
|
||||
---
|
||||
|
||||
#Previous Versions
|
||||
|
||||
## 1.0
|
||||
|
||||
* **Initial Public Release** with:
|
||||
|
||||
* Font Awesome 6
|
||||
* Bootstrap 5 helpers
|
||||
* Automatic Table of Contents (TOC) utility
|
||||
* Moko Expansions: Google Tag Manager / GA4 hooks
|
||||
|
||||
---
|
||||
|
||||
For the full development roadmap, visit:
|
||||
[Moko-Cassiopeia Roadmap](https://mokoconsulting.tech/support/joomla-cms/moko-cassiopeia-roadmap)
|
||||
@@ -1,22 +1,31 @@
|
||||
<!--
|
||||
Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
=========================================================================
|
||||
Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
|
||||
This file is part of a Moko Consulting project.
|
||||
This file is part of a Moko Consulting project.
|
||||
|
||||
This documentation is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
SPDX-License-Identifier: GPL-3.0-or-later
|
||||
|
||||
This documentation is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
This program is free software; you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation; either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this documentation. If not, see <https://www.gnu.org/licenses/>.
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
SPDX-License-Identifier: GPL-3.0-or-later
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see https://www.gnu.org/licenses/ .
|
||||
=========================================================================
|
||||
FILE INFORMATION
|
||||
DEFGROUP: Joomla
|
||||
INGROUP: Moko-Cassiopeia
|
||||
PATH: CODE_OF_CONDUCT.md
|
||||
VERSION: 02.00
|
||||
BRIEF: Contributor Code of Conduct for Moko-Cassiopeia project
|
||||
=========================================================================
|
||||
-->
|
||||
|
||||
# Code of Conduct
|
||||
|
||||
@@ -1,3 +1,33 @@
|
||||
<!--
|
||||
=========================================================================
|
||||
Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
|
||||
This file is part of a Moko Consulting project.
|
||||
|
||||
SPDX-License-Identifier: GPL-3.0-or-later
|
||||
|
||||
This program is free software; you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation; either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see https://www.gnu.org/licenses/ .
|
||||
=========================================================================
|
||||
FILE INFORMATION
|
||||
DEFGROUP: Joomla
|
||||
INGROUP: Moko-Cassiopeia
|
||||
PATH: CONTRIBUTING.md
|
||||
VERSION: 02.00
|
||||
BRIEF: Contribution guidelines for the Moko-Cassiopeia project
|
||||
=========================================================================
|
||||
-->
|
||||
|
||||
# Contributing Guidelines
|
||||
|
||||
Thank you for considering contributing to this project! We welcome contributions from the community and are grateful for your support.
|
||||
@@ -6,27 +36,27 @@ Thank you for considering contributing to this project! We welcome contributions
|
||||
|
||||
1. **Fork the repository**
|
||||
|
||||
- Click the "Fork" button at the top of the repository page.
|
||||
- Click the "Fork" button at the top of the repository page.
|
||||
|
||||
2. **Create a branch**
|
||||
|
||||
```bash
|
||||
git checkout -b feature/your-feature-name
|
||||
```
|
||||
```bash
|
||||
git checkout -b feature/your-feature-name
|
||||
```
|
||||
|
||||
3. **Make your changes**
|
||||
|
||||
- Follow the existing code style.
|
||||
- Write clear commit messages.
|
||||
- Follow the existing code style.
|
||||
- Write clear commit messages.
|
||||
|
||||
4. **Test your changes**
|
||||
|
||||
- Ensure all tests pass and new code is covered.
|
||||
- Ensure all tests pass and new code is covered.
|
||||
|
||||
5. **Submit a pull request (PR)**
|
||||
|
||||
- Push your branch to your fork.
|
||||
- Open a PR against the `main` branch.
|
||||
- Push your branch to your fork.
|
||||
- Open a PR against the `main` branch.
|
||||
|
||||
---
|
||||
|
||||
|
||||
304
README.md
Normal file
304
README.md
Normal 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.
|
||||
@@ -1,551 +0,0 @@
|
||||
/*!
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.moko-cassiopeia
|
||||
* @file /media/templates/sote/moko-cassiopeia/css/global/light/colors_alternative.css
|
||||
*
|
||||
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
*
|
||||
* Website: https://mokoconsulting.tech
|
||||
* Email: hello@mokoconsulting.tech
|
||||
* Phone: +1 (931) 279-6313
|
||||
*/
|
||||
|
||||
/* -----------------------------------------------
|
||||
* LIGHT THEME
|
||||
* --------------------------------------------- */
|
||||
|
||||
:root[data-bs-theme="light"] {
|
||||
color-scheme: light;
|
||||
--color-primary: #112855;
|
||||
--accent-color-primary: #3f8ff0;
|
||||
--accent-color-secondary: #3f8ff0;
|
||||
|
||||
--mainmenu-nav-link-color: white;
|
||||
|
||||
--color-link: #224FAA;
|
||||
--color-hover: var(--accent-color-primary);
|
||||
|
||||
--header-background-image: url('../../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg');
|
||||
--header-background-attachment: fixed;
|
||||
--header-background-repeat: repeat;
|
||||
--header-background-size: auto;
|
||||
|
||||
--container-below-topbar-bg-image: ;
|
||||
--container-below-topbar-bg-color ;
|
||||
--container-below-topbar-bg-position: auto;
|
||||
--container-below-topbar-bg-attachment: fixed;
|
||||
--container-below-topbar-bg-repeat: repeat;
|
||||
--container-below-topbar-bg-size: auto;
|
||||
--container-below-topbar-border: ;
|
||||
--container-below-topbar-border-radius: ;
|
||||
|
||||
--container-top-a-bg-image: ;
|
||||
--container-top-a-bg-color: ;
|
||||
--container-top-a-bg-position: auto;
|
||||
--container-top-a-bg-attachment: fixed;
|
||||
--container-top-a-bg-repeat: repeat;
|
||||
--container-top-a-bg-size: auto;
|
||||
--container-top-a-border: ;
|
||||
--container-top-a-border-radius: ;
|
||||
|
||||
--container-top-b-bg-image: ;
|
||||
--container-top-b-bg-color: ;
|
||||
--container-top-b-bg-position: auto;
|
||||
--container-top-b-bg-attachment: fixed;
|
||||
--container-top-b-bg-repeat: repeat;
|
||||
--container-top-b-bg-size: auto;
|
||||
--container-top-b-border: ;
|
||||
--container-top-b-border-radius: ;
|
||||
|
||||
--container-toc-bg: var(--mainmenu-nav-link-color);
|
||||
--container-toc-color: var(--color-primary);
|
||||
|
||||
--container-sidebar-bg-image: ;
|
||||
--container-sidebar-bg-color: ;
|
||||
--container-sidebar-bg-position: auto;
|
||||
--container-sidebar-bg-attachment: scroll;
|
||||
--container-sidebar-bg-repeat: repeat;
|
||||
--container-sidebar-bg-size: auto;
|
||||
--container-sidebar-border: ;
|
||||
--container-sidebar-border-radius: ;
|
||||
|
||||
--container-bottom-a-bg-image: ;
|
||||
--container-bottom-a-bg-color: ;
|
||||
--container-bottom-a-bg-position: auto;
|
||||
--container-bottom-a-bg-attachment: fixed;
|
||||
--container-bottom-a-bg-repeat: repeat;
|
||||
--container-bottom-a-bg-size: auto;
|
||||
--container-bottom-a-border: ;
|
||||
--container-bottom-a-border-radius: ;
|
||||
|
||||
--container-bottom-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: ;
|
||||
--container-bottom-b-bg-position: auto;
|
||||
--container-bottom-b-bg-attachment: fixed;
|
||||
--container-bottom-b-bg-repeat: repeat;
|
||||
--container-bottom-b-bg-size: auto;
|
||||
--container-bottom-b-border: ;
|
||||
--container-bottom-b-border-radius: ;
|
||||
|
||||
--nav-text-color: var(--mainmenu-nav-link-color);
|
||||
--nav-bg-color: var(--color-link);
|
||||
--border: 5px;
|
||||
|
||||
--muted-color: #6d757e;
|
||||
--hr-color: var(--border-color, #dfe3e7);
|
||||
--link-active-color: var(--link-color);
|
||||
--code-color-ink: var(--code-color, #e93f8e);
|
||||
--border-color-soft: var(--border-color, #dfe3e7);
|
||||
--kbd-bg: var(--secondary-bg, #eaedf0);
|
||||
--kbd-ink: var(--body-bg, #fff);
|
||||
--toc-bg: var(--secondary-bg, #eaedf0);
|
||||
--toc-ink: var(--color-primary, #112855);
|
||||
--selection-bg: var(--highlight-bg, #fbeea8);
|
||||
--selection-ink: var(--body-color, #22262a);
|
||||
|
||||
--blue: #010156;
|
||||
--black: #000;
|
||||
--indigo: #6812f3;
|
||||
--purple: #6f42c2;
|
||||
--pink: #e93f8e;
|
||||
--red: #a51f18;
|
||||
--orange: #fd7e17;
|
||||
--yellow: #ad6200;
|
||||
--green: #448344;
|
||||
--teal: #5abfdd;
|
||||
--cyan: #30638d;
|
||||
--white: #fff;
|
||||
--gray-100: #f9fafb;
|
||||
--gray-200: #eaedf0;
|
||||
--gray-300: #dfe3e7;
|
||||
--gray-400: #ced4da;
|
||||
--gray-500: #adb5bd;
|
||||
--gray-600: #6d757e;
|
||||
--gray-700: #484f56;
|
||||
--gray-800: #353b41;
|
||||
--gray-900: #22262a;
|
||||
--primary: #010156;
|
||||
--secondary: #6d757e;
|
||||
--success: #448344;
|
||||
--info: #30638d;
|
||||
--warning: #ad6200;
|
||||
--danger: #a51f18;
|
||||
--light: #f9fafb;
|
||||
--dark: #353b41;
|
||||
--primary-rgb: 1, 1, 86;
|
||||
--secondary-rgb: 109, 117, 126;
|
||||
--success-rgb: 68, 131, 68;
|
||||
--info-rgb: 48, 99, 141;
|
||||
--warning-rgb: 173, 98, 0;
|
||||
--danger-rgb: 165, 31, 24;
|
||||
--light-rgb: 249, 250, 251;
|
||||
--dark-rgb: 53, 59, 65;
|
||||
--primary-text-emphasis: #002;
|
||||
--secondary-text-emphasis: #2c2f32;
|
||||
--success-text-emphasis: #1b351b;
|
||||
--info-text-emphasis: #132838;
|
||||
--warning-text-emphasis: #452700;
|
||||
--danger-text-emphasis: #420c09;
|
||||
--light-text-emphasis: #484f56;
|
||||
--dark-text-emphasis: #484f56;
|
||||
--primary-bg-subtle: #ccd;
|
||||
--secondary-bg-subtle: #e2e3e5;
|
||||
--success-bg-subtle: #dae6da;
|
||||
--info-bg-subtle: #d6e0e8;
|
||||
--warning-bg-subtle: #efe0cc;
|
||||
--danger-bg-subtle: #edd2d1;
|
||||
--light-bg-subtle: #fcfcfd;
|
||||
--dark-bg-subtle: #ced4da;
|
||||
--primary-border-subtle: #99b;
|
||||
--secondary-border-subtle: #c5c8cb;
|
||||
--success-border-subtle: #b4ceb4;
|
||||
--info-border-subtle: #acc1d1;
|
||||
--warning-border-subtle: #dec099;
|
||||
--danger-border-subtle: #dba5a2;
|
||||
--light-border-subtle: #eaedf0;
|
||||
--dark-border-subtle: #adb5bd;
|
||||
--white-rgb: 255, 255, 255;
|
||||
--black-rgb: 0, 0, 0;
|
||||
--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--gradient: linear-gradient(180deg, #ffffff26, #fff0);
|
||||
--body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
||||
--body-font-size: 1rem;
|
||||
--body-font-weight: 400;
|
||||
--body-line-height: 1.5;
|
||||
--body-color: #22262a;
|
||||
--body-color-rgb: 34, 38, 42;
|
||||
--body-bg: #fff;
|
||||
--body-bg-rgb: 255, 255, 255;
|
||||
--emphasis-color: #000;
|
||||
--emphasis-color-rgb: 0, 0, 0;
|
||||
--secondary-color: #22262abf;
|
||||
--secondary-color-rgb: 34, 38, 42;
|
||||
--secondary-bg: #eaedf0;
|
||||
--secondary-bg-rgb: 234, 237, 240;
|
||||
--tertiary-color: #22262a80;
|
||||
--tertiary-color-rgb: 34, 38, 42;
|
||||
--tertiary-bg: #f9fafb;
|
||||
--tertiary-bg-rgb: 249, 250, 251;
|
||||
--heading-color: inherit;
|
||||
--link-color: #224faa;
|
||||
--link-color-rgb: 34, 79, 170;
|
||||
--link-decoration: underline;
|
||||
--link-hover-color: #424077;
|
||||
--link-hover-color-rgb: 66, 64, 119;
|
||||
--code-color: #e93f8e;
|
||||
--highlight-color: #22262a;
|
||||
--highlight-bg: #fbeea8;
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border-color: #dfe3e7;
|
||||
--border-color-translucent: #0000002d;
|
||||
--border-radius: .25rem;
|
||||
--border-radius-sm: .2rem;
|
||||
--border-radius-lg: .3rem;
|
||||
--border-radius-xl: .3rem;
|
||||
--border-radius-xxl: 2rem;
|
||||
--border-radius-2xl: var(--border-radius-xxl)*2;
|
||||
--border-radius-pill: 50rem;
|
||||
--box-shadow: 0 .5rem 1rem #00000026;
|
||||
--box-shadow-sm: 0 .125rem .25rem #00000013;
|
||||
--box-shadow-lg: 0 1rem 3rem #0000002d;
|
||||
--box-shadow-inset: inset 0 1px 2px #00000013;
|
||||
--focus-ring-width: .25rem;
|
||||
--focus-ring-opacity: .25;
|
||||
--focus-ring-color: #01015640;
|
||||
--form-valid-color: #448344;
|
||||
--form-valid-border-color: #448344;
|
||||
--form-invalid-color: #a51f18;
|
||||
--form-invalid-border-color: #a51f18;
|
||||
}
|
||||
|
||||
.btn {
|
||||
--btn-padding-x: 1rem;
|
||||
--btn-padding-y: 0.6rem;
|
||||
--btn-font-family: ;
|
||||
--btn-font-size: 1rem;
|
||||
--btn-font-weight: 400;
|
||||
--btn-line-height: 1.5;
|
||||
--btn-color: hsl(210, 11%, 15%);
|
||||
--btn-bg: transparent;
|
||||
--btn-border-width: 1px;
|
||||
--btn-border-color: transparent;
|
||||
--btn-border-radius: 0.25rem;
|
||||
--btn-active-border-color: transparent;
|
||||
--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
--btn-disabled-opacity: 0.65;
|
||||
--btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5);
|
||||
display: inline-block;
|
||||
padding: var(--btn-padding-y) var(--btn-padding-x);
|
||||
font-family: var(--btn-font-family);
|
||||
font-size: var(--btn-font-size);
|
||||
font-weight: var(--btn-font-weight);
|
||||
line-height: var(--btn-line-height);
|
||||
color: var(--btn-color);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
border: var(--btn-border-width) solid var(--btn-border-color);
|
||||
border-radius: var(--btn-border-radius);
|
||||
background-color: var(--btn-bg);
|
||||
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
|
||||
-o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(240, 98%, 17%);
|
||||
--btn-border-color: hsl(240, 98%, 17%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #010149;
|
||||
--btn-hover-border-color: #010145;
|
||||
--btn-focus-shadow-rgb: 39, 39, 111;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #010145;
|
||||
--btn-active-border-color: #010141;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(240, 98%, 17%);
|
||||
--btn-disabled-border-color: hsl(240, 98%, 17%);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
--btn-color: --nav-text-color;
|
||||
--btn-bg: --nav-bg-color;
|
||||
--btn-border-color: hsl(210, 7%, 46%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #5d636b;
|
||||
--btn-hover-border-color: #575e65;
|
||||
--btn-focus-shadow-rgb: gray;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #575e65;
|
||||
--btn-active-border-color: #52585f;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(210, 7%, 46%);
|
||||
--btn-disabled-border-color: hsl(210, 7%, 46%);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(120, 32%, 39%);
|
||||
--btn-border-color: hsl(120, 32%, 39%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #3a6f3a;
|
||||
--btn-hover-border-color: #366936;
|
||||
--btn-focus-shadow-rgb: 96, 150, 96;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #366936;
|
||||
--btn-active-border-color: #336233;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(120, 32%, 39%);
|
||||
--btn-disabled-border-color: hsl(120, 32%, 39%);
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(207, 49%, 37%);
|
||||
--btn-border-color: hsl(207, 49%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #295478;
|
||||
--btn-hover-border-color: #264f71;
|
||||
--btn-focus-shadow-rgb: 79, 122, 158;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #264f71;
|
||||
--btn-active-border-color: #244a6a;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(207, 49%, 37%);
|
||||
--btn-disabled-border-color: hsl(207, 49%, 37%);
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(34, 100%, 34%);
|
||||
--btn-border-color: hsl(34, 100%, 34%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #935300;
|
||||
--btn-hover-border-color: #8a4e00;
|
||||
--btn-focus-shadow-rgb: 185, 122, 38;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #8a4e00;
|
||||
--btn-active-border-color: #824a00;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(34, 100%, 34%);
|
||||
--btn-disabled-border-color: hsl(34, 100%, 34%);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(3, 75%, 37%);
|
||||
--btn-border-color: hsl(3, 75%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #8c1a14;
|
||||
--btn-hover-border-color: #841913;
|
||||
--btn-focus-shadow-rgb: 179, 65, 59;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #841913;
|
||||
--btn-active-border-color: #7c1712;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(3, 75%, 37%);
|
||||
--btn-disabled-border-color: hsl(3, 75%, 37%);
|
||||
}
|
||||
|
||||
.btn-light {
|
||||
--btn-color: hsl(0, 0%, 0%);
|
||||
--btn-bg: hsl(210, 17%, 98%);
|
||||
--btn-border-color: hsl(210, 17%, 98%);
|
||||
--btn-hover-color: hsl(0, 0%, 0%);
|
||||
--btn-hover-bg: #d4d5d5;
|
||||
--btn-hover-border-color: #c7c8c9;
|
||||
--btn-focus-shadow-rgb: 212, 213, 213;
|
||||
--btn-active-color: hsl(0, 0%, 0%);
|
||||
--btn-active-bg: #c7c8c9;
|
||||
--btn-active-border-color: #bbbcbc;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 0%);
|
||||
--btn-disabled-bg: hsl(210, 17%, 98%);
|
||||
--btn-disabled-border-color: hsl(210, 17%, 98%);
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(210, 10%, 23%);
|
||||
--btn-border-color: hsl(210, 10%, 23%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #53585e;
|
||||
--btn-hover-border-color: #494f54;
|
||||
--btn-focus-shadow-rgb: 83, 88, 94;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #5d6267;
|
||||
--btn-active-border-color: #494f54;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(210, 10%, 23%);
|
||||
--btn-disabled-border-color: hsl(210, 10%, 23%);
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
--btn-color: hsl(240, 98%, 17%);
|
||||
--btn-border-color: hsl(240, 98%, 17%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(240, 98%, 17%);
|
||||
--btn-hover-border-color: hsl(240, 98%, 17%);
|
||||
--btn-focus-shadow-rgb: 1, 1, 86;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(240, 98%, 17%);
|
||||
--btn-active-border-color: hsl(240, 98%, 17%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(240, 98%, 17%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(240, 98%, 17%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
--btn-color: hsl(210, 7%, 46%);
|
||||
--btn-border-color: hsl(210, 7%, 46%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(210, 7%, 46%);
|
||||
--btn-hover-border-color: hsl(210, 7%, 46%);
|
||||
--btn-focus-shadow-rgb: 109, 117, 126;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(210, 7%, 46%);
|
||||
--btn-active-border-color: hsl(210, 7%, 46%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 7%, 46%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 7%, 46%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-success {
|
||||
--btn-color: hsl(120, 32%, 39%);
|
||||
--btn-border-color: hsl(120, 32%, 39%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(120, 32%, 39%);
|
||||
--btn-hover-border-color: hsl(120, 32%, 39%);
|
||||
--btn-focus-shadow-rgb: 68, 131, 68;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(120, 32%, 39%);
|
||||
--btn-active-border-color: hsl(120, 32%, 39%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(120, 32%, 39%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(120, 32%, 39%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-info {
|
||||
--btn-color: hsl(207, 49%, 37%);
|
||||
--btn-border-color: hsl(207, 49%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(207, 49%, 37%);
|
||||
--btn-hover-border-color: hsl(207, 49%, 37%);
|
||||
--btn-focus-shadow-rgb: 48, 99, 141;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(207, 49%, 37%);
|
||||
--btn-active-border-color: hsl(207, 49%, 37%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(207, 49%, 37%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(207, 49%, 37%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-warning {
|
||||
--btn-color: hsl(34, 100%, 34%);
|
||||
--btn-border-color: hsl(34, 100%, 34%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(34, 100%, 34%);
|
||||
--btn-hover-border-color: hsl(34, 100%, 34%);
|
||||
--btn-focus-shadow-rgb: 173, 98, 0;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(34, 100%, 34%);
|
||||
--btn-active-border-color: hsl(34, 100%, 34%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(34, 100%, 34%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(34, 100%, 34%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-danger {
|
||||
--btn-color: hsl(3, 75%, 37%);
|
||||
--btn-border-color: hsl(3, 75%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(3, 75%, 37%);
|
||||
--btn-hover-border-color: hsl(3, 75%, 37%);
|
||||
--btn-focus-shadow-rgb: 165, 31, 24;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(3, 75%, 37%);
|
||||
--btn-active-border-color: hsl(3, 75%, 37%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(3, 75%, 37%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(3, 75%, 37%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
--btn-color: hsl(210, 17%, 98%);
|
||||
--btn-border-color: hsl(210, 17%, 98%);
|
||||
--btn-hover-color: hsl(0, 0%, 0%);
|
||||
--btn-hover-bg: hsl(210, 17%, 98%);
|
||||
--btn-hover-border-color: hsl(210, 17%, 98%);
|
||||
--btn-focus-shadow-rgb: 249, 250, 251;
|
||||
--btn-active-color: hsl(0, 0%, 0%);
|
||||
--btn-active-bg: hsl(210, 17%, 98%);
|
||||
--btn-active-border-color: hsl(210, 17%, 98%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 17%, 98%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 17%, 98%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
--btn-color: hsl(210, 10%, 23%);
|
||||
--btn-border-color: hsl(210, 10%, 23%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(210, 10%, 23%);
|
||||
--btn-hover-border-color: hsl(210, 10%, 23%);
|
||||
--btn-focus-shadow-rgb: 53, 59, 65;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(210, 10%, 23%);
|
||||
--btn-active-border-color: hsl(210, 10%, 23%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 10%, 23%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 10%, 23%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
--btn-font-weight: 400;
|
||||
--btn-color: var(--link-color);
|
||||
--btn-bg: transparent;
|
||||
--btn-border-color: transparent;
|
||||
--btn-hover-color: var(--link-hover-color);
|
||||
--btn-hover-border-color: transparent;
|
||||
--btn-active-color: var(--link-hover-color);
|
||||
--btn-active-border-color: transparent;
|
||||
--btn-disabled-color: hsl(210, 7%, 46%);
|
||||
--btn-disabled-border-color: transparent;
|
||||
--btn-box-shadow: none;
|
||||
--btn-focus-shadow-rgb: 39, 39, 111;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -1,551 +0,0 @@
|
||||
/*!
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.moko-cassiopeia
|
||||
* @file /media/templates/sote/moko-cassiopeia/css/global/light/colors_standard.css
|
||||
*
|
||||
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
*
|
||||
* Website: https://mokoconsulting.tech
|
||||
* Email: hello@mokoconsulting.tech
|
||||
* Phone: +1 (931) 279-6313
|
||||
*/
|
||||
|
||||
/* -----------------------------------------------
|
||||
* LIGHT THEME
|
||||
* --------------------------------------------- */
|
||||
|
||||
:root[data-bs-theme="light"] {
|
||||
color-scheme: light;
|
||||
--color-primary: #112855;
|
||||
--accent-color-primary: #3f8ff0;
|
||||
--accent-color-secondary: #3f8ff0;
|
||||
|
||||
--mainmenu-nav-link-color: white;
|
||||
|
||||
--color-link: #224FAA;
|
||||
--color-hover: var(--accent-color-primary);
|
||||
|
||||
--header-background-image: url('../../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg');
|
||||
--header-background-attachment: fixed;
|
||||
--header-background-repeat: repeat;
|
||||
--header-background-size: auto;
|
||||
|
||||
--container-below-topbar-bg-image: ;
|
||||
--container-below-topbar-bg-color ;
|
||||
--container-below-topbar-bg-position: auto;
|
||||
--container-below-topbar-bg-attachment: fixed;
|
||||
--container-below-topbar-bg-repeat: repeat;
|
||||
--container-below-topbar-bg-size: auto;
|
||||
--container-below-topbar-border: ;
|
||||
--container-below-topbar-border-radius: ;
|
||||
|
||||
--container-top-a-bg-image: ;
|
||||
--container-top-a-bg-color: ;
|
||||
--container-top-a-bg-position: auto;
|
||||
--container-top-a-bg-attachment: fixed;
|
||||
--container-top-a-bg-repeat: repeat;
|
||||
--container-top-a-bg-size: auto;
|
||||
--container-top-a-border: ;
|
||||
--container-top-a-border-radius: ;
|
||||
|
||||
--container-top-b-bg-image: ;
|
||||
--container-top-b-bg-color: ;
|
||||
--container-top-b-bg-position: auto;
|
||||
--container-top-b-bg-attachment: fixed;
|
||||
--container-top-b-bg-repeat: repeat;
|
||||
--container-top-b-bg-size: auto;
|
||||
--container-top-b-border: ;
|
||||
--container-top-b-border-radius: ;
|
||||
|
||||
--container-toc-bg: var(--mainmenu-nav-link-color);
|
||||
--container-toc-color: var(--color-primary);
|
||||
|
||||
--container-sidebar-bg-image: ;
|
||||
--container-sidebar-bg-color: ;
|
||||
--container-sidebar-bg-position: auto;
|
||||
--container-sidebar-bg-attachment: scroll;
|
||||
--container-sidebar-bg-repeat: repeat;
|
||||
--container-sidebar-bg-size: auto;
|
||||
--container-sidebar-border: ;
|
||||
--container-sidebar-border-radius: ;
|
||||
|
||||
--container-bottom-a-bg-image: ;
|
||||
--container-bottom-a-bg-color: ;
|
||||
--container-bottom-a-bg-position: auto;
|
||||
--container-bottom-a-bg-attachment: fixed;
|
||||
--container-bottom-a-bg-repeat: repeat;
|
||||
--container-bottom-a-bg-size: auto;
|
||||
--container-bottom-a-border: ;
|
||||
--container-bottom-a-border-radius: ;
|
||||
|
||||
--container-bottom-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: ;
|
||||
--container-bottom-b-bg-position: auto;
|
||||
--container-bottom-b-bg-attachment: fixed;
|
||||
--container-bottom-b-bg-repeat: repeat;
|
||||
--container-bottom-b-bg-size: auto;
|
||||
--container-bottom-b-border: ;
|
||||
--container-bottom-b-border-radius: ;
|
||||
|
||||
--nav-text-color: var(--mainmenu-nav-link-color);
|
||||
--nav-bg-color: var(--color-link);
|
||||
--border: 5px;
|
||||
|
||||
--muted-color: #6d757e;
|
||||
--hr-color: var(--border-color, #dfe3e7);
|
||||
--link-active-color: var(--link-color);
|
||||
--code-color-ink: var(--code-color, #e93f8e);
|
||||
--border-color-soft: var(--border-color, #dfe3e7);
|
||||
--kbd-bg: var(--secondary-bg, #eaedf0);
|
||||
--kbd-ink: var(--body-bg, #fff);
|
||||
--toc-bg: var(--secondary-bg, #eaedf0);
|
||||
--toc-ink: var(--color-primary, #112855);
|
||||
--selection-bg: var(--highlight-bg, #fbeea8);
|
||||
--selection-ink: var(--body-color, #22262a);
|
||||
|
||||
--blue: #010156;
|
||||
--black: #000;
|
||||
--indigo: #6812f3;
|
||||
--purple: #6f42c2;
|
||||
--pink: #e93f8e;
|
||||
--red: #a51f18;
|
||||
--orange: #fd7e17;
|
||||
--yellow: #ad6200;
|
||||
--green: #448344;
|
||||
--teal: #5abfdd;
|
||||
--cyan: #30638d;
|
||||
--white: #fff;
|
||||
--gray-100: #f9fafb;
|
||||
--gray-200: #eaedf0;
|
||||
--gray-300: #dfe3e7;
|
||||
--gray-400: #ced4da;
|
||||
--gray-500: #adb5bd;
|
||||
--gray-600: #6d757e;
|
||||
--gray-700: #484f56;
|
||||
--gray-800: #353b41;
|
||||
--gray-900: #22262a;
|
||||
--primary: #010156;
|
||||
--secondary: #6d757e;
|
||||
--success: #448344;
|
||||
--info: #30638d;
|
||||
--warning: #ad6200;
|
||||
--danger: #a51f18;
|
||||
--light: #f9fafb;
|
||||
--dark: #353b41;
|
||||
--primary-rgb: 1, 1, 86;
|
||||
--secondary-rgb: 109, 117, 126;
|
||||
--success-rgb: 68, 131, 68;
|
||||
--info-rgb: 48, 99, 141;
|
||||
--warning-rgb: 173, 98, 0;
|
||||
--danger-rgb: 165, 31, 24;
|
||||
--light-rgb: 249, 250, 251;
|
||||
--dark-rgb: 53, 59, 65;
|
||||
--primary-text-emphasis: #002;
|
||||
--secondary-text-emphasis: #2c2f32;
|
||||
--success-text-emphasis: #1b351b;
|
||||
--info-text-emphasis: #132838;
|
||||
--warning-text-emphasis: #452700;
|
||||
--danger-text-emphasis: #420c09;
|
||||
--light-text-emphasis: #484f56;
|
||||
--dark-text-emphasis: #484f56;
|
||||
--primary-bg-subtle: #ccd;
|
||||
--secondary-bg-subtle: #e2e3e5;
|
||||
--success-bg-subtle: #dae6da;
|
||||
--info-bg-subtle: #d6e0e8;
|
||||
--warning-bg-subtle: #efe0cc;
|
||||
--danger-bg-subtle: #edd2d1;
|
||||
--light-bg-subtle: #fcfcfd;
|
||||
--dark-bg-subtle: #ced4da;
|
||||
--primary-border-subtle: #99b;
|
||||
--secondary-border-subtle: #c5c8cb;
|
||||
--success-border-subtle: #b4ceb4;
|
||||
--info-border-subtle: #acc1d1;
|
||||
--warning-border-subtle: #dec099;
|
||||
--danger-border-subtle: #dba5a2;
|
||||
--light-border-subtle: #eaedf0;
|
||||
--dark-border-subtle: #adb5bd;
|
||||
--white-rgb: 255, 255, 255;
|
||||
--black-rgb: 0, 0, 0;
|
||||
--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--gradient: linear-gradient(180deg, #ffffff26, #fff0);
|
||||
--body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
||||
--body-font-size: 1rem;
|
||||
--body-font-weight: 400;
|
||||
--body-line-height: 1.5;
|
||||
--body-color: #22262a;
|
||||
--body-color-rgb: 34, 38, 42;
|
||||
--body-bg: #fff;
|
||||
--body-bg-rgb: 255, 255, 255;
|
||||
--emphasis-color: #000;
|
||||
--emphasis-color-rgb: 0, 0, 0;
|
||||
--secondary-color: #22262abf;
|
||||
--secondary-color-rgb: 34, 38, 42;
|
||||
--secondary-bg: #eaedf0;
|
||||
--secondary-bg-rgb: 234, 237, 240;
|
||||
--tertiary-color: #22262a80;
|
||||
--tertiary-color-rgb: 34, 38, 42;
|
||||
--tertiary-bg: #f9fafb;
|
||||
--tertiary-bg-rgb: 249, 250, 251;
|
||||
--heading-color: inherit;
|
||||
--link-color: #224faa;
|
||||
--link-color-rgb: 34, 79, 170;
|
||||
--link-decoration: underline;
|
||||
--link-hover-color: #424077;
|
||||
--link-hover-color-rgb: 66, 64, 119;
|
||||
--code-color: #e93f8e;
|
||||
--highlight-color: #22262a;
|
||||
--highlight-bg: #fbeea8;
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border-color: #dfe3e7;
|
||||
--border-color-translucent: #0000002d;
|
||||
--border-radius: .25rem;
|
||||
--border-radius-sm: .2rem;
|
||||
--border-radius-lg: .3rem;
|
||||
--border-radius-xl: .3rem;
|
||||
--border-radius-xxl: 2rem;
|
||||
--border-radius-2xl: var(--border-radius-xxl)*2;
|
||||
--border-radius-pill: 50rem;
|
||||
--box-shadow: 0 .5rem 1rem #00000026;
|
||||
--box-shadow-sm: 0 .125rem .25rem #00000013;
|
||||
--box-shadow-lg: 0 1rem 3rem #0000002d;
|
||||
--box-shadow-inset: inset 0 1px 2px #00000013;
|
||||
--focus-ring-width: .25rem;
|
||||
--focus-ring-opacity: .25;
|
||||
--focus-ring-color: #01015640;
|
||||
--form-valid-color: #448344;
|
||||
--form-valid-border-color: #448344;
|
||||
--form-invalid-color: #a51f18;
|
||||
--form-invalid-border-color: #a51f18;
|
||||
}
|
||||
|
||||
.btn {
|
||||
--btn-padding-x: 1rem;
|
||||
--btn-padding-y: 0.6rem;
|
||||
--btn-font-family: ;
|
||||
--btn-font-size: 1rem;
|
||||
--btn-font-weight: 400;
|
||||
--btn-line-height: 1.5;
|
||||
--btn-color: hsl(210, 11%, 15%);
|
||||
--btn-bg: transparent;
|
||||
--btn-border-width: 1px;
|
||||
--btn-border-color: transparent;
|
||||
--btn-border-radius: 0.25rem;
|
||||
--btn-active-border-color: transparent;
|
||||
--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
--btn-disabled-opacity: 0.65;
|
||||
--btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5);
|
||||
display: inline-block;
|
||||
padding: var(--btn-padding-y) var(--btn-padding-x);
|
||||
font-family: var(--btn-font-family);
|
||||
font-size: var(--btn-font-size);
|
||||
font-weight: var(--btn-font-weight);
|
||||
line-height: var(--btn-line-height);
|
||||
color: var(--btn-color);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
border: var(--btn-border-width) solid var(--btn-border-color);
|
||||
border-radius: var(--btn-border-radius);
|
||||
background-color: var(--btn-bg);
|
||||
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
|
||||
-o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(240, 98%, 17%);
|
||||
--btn-border-color: hsl(240, 98%, 17%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #010149;
|
||||
--btn-hover-border-color: #010145;
|
||||
--btn-focus-shadow-rgb: 39, 39, 111;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #010145;
|
||||
--btn-active-border-color: #010141;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(240, 98%, 17%);
|
||||
--btn-disabled-border-color: hsl(240, 98%, 17%);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
--btn-color: --nav-text-color;
|
||||
--btn-bg: --nav-bg-color;
|
||||
--btn-border-color: hsl(210, 7%, 46%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #5d636b;
|
||||
--btn-hover-border-color: #575e65;
|
||||
--btn-focus-shadow-rgb: gray;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #575e65;
|
||||
--btn-active-border-color: #52585f;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(210, 7%, 46%);
|
||||
--btn-disabled-border-color: hsl(210, 7%, 46%);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(120, 32%, 39%);
|
||||
--btn-border-color: hsl(120, 32%, 39%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #3a6f3a;
|
||||
--btn-hover-border-color: #366936;
|
||||
--btn-focus-shadow-rgb: 96, 150, 96;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #366936;
|
||||
--btn-active-border-color: #336233;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(120, 32%, 39%);
|
||||
--btn-disabled-border-color: hsl(120, 32%, 39%);
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(207, 49%, 37%);
|
||||
--btn-border-color: hsl(207, 49%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #295478;
|
||||
--btn-hover-border-color: #264f71;
|
||||
--btn-focus-shadow-rgb: 79, 122, 158;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #264f71;
|
||||
--btn-active-border-color: #244a6a;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(207, 49%, 37%);
|
||||
--btn-disabled-border-color: hsl(207, 49%, 37%);
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(34, 100%, 34%);
|
||||
--btn-border-color: hsl(34, 100%, 34%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #935300;
|
||||
--btn-hover-border-color: #8a4e00;
|
||||
--btn-focus-shadow-rgb: 185, 122, 38;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #8a4e00;
|
||||
--btn-active-border-color: #824a00;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(34, 100%, 34%);
|
||||
--btn-disabled-border-color: hsl(34, 100%, 34%);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(3, 75%, 37%);
|
||||
--btn-border-color: hsl(3, 75%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #8c1a14;
|
||||
--btn-hover-border-color: #841913;
|
||||
--btn-focus-shadow-rgb: 179, 65, 59;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #841913;
|
||||
--btn-active-border-color: #7c1712;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(3, 75%, 37%);
|
||||
--btn-disabled-border-color: hsl(3, 75%, 37%);
|
||||
}
|
||||
|
||||
.btn-light {
|
||||
--btn-color: hsl(0, 0%, 0%);
|
||||
--btn-bg: hsl(210, 17%, 98%);
|
||||
--btn-border-color: hsl(210, 17%, 98%);
|
||||
--btn-hover-color: hsl(0, 0%, 0%);
|
||||
--btn-hover-bg: #d4d5d5;
|
||||
--btn-hover-border-color: #c7c8c9;
|
||||
--btn-focus-shadow-rgb: 212, 213, 213;
|
||||
--btn-active-color: hsl(0, 0%, 0%);
|
||||
--btn-active-bg: #c7c8c9;
|
||||
--btn-active-border-color: #bbbcbc;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 0%);
|
||||
--btn-disabled-bg: hsl(210, 17%, 98%);
|
||||
--btn-disabled-border-color: hsl(210, 17%, 98%);
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(210, 10%, 23%);
|
||||
--btn-border-color: hsl(210, 10%, 23%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #53585e;
|
||||
--btn-hover-border-color: #494f54;
|
||||
--btn-focus-shadow-rgb: 83, 88, 94;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #5d6267;
|
||||
--btn-active-border-color: #494f54;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(210, 10%, 23%);
|
||||
--btn-disabled-border-color: hsl(210, 10%, 23%);
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
--btn-color: hsl(240, 98%, 17%);
|
||||
--btn-border-color: hsl(240, 98%, 17%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(240, 98%, 17%);
|
||||
--btn-hover-border-color: hsl(240, 98%, 17%);
|
||||
--btn-focus-shadow-rgb: 1, 1, 86;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(240, 98%, 17%);
|
||||
--btn-active-border-color: hsl(240, 98%, 17%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(240, 98%, 17%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(240, 98%, 17%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
--btn-color: hsl(210, 7%, 46%);
|
||||
--btn-border-color: hsl(210, 7%, 46%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(210, 7%, 46%);
|
||||
--btn-hover-border-color: hsl(210, 7%, 46%);
|
||||
--btn-focus-shadow-rgb: 109, 117, 126;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(210, 7%, 46%);
|
||||
--btn-active-border-color: hsl(210, 7%, 46%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 7%, 46%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 7%, 46%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-success {
|
||||
--btn-color: hsl(120, 32%, 39%);
|
||||
--btn-border-color: hsl(120, 32%, 39%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(120, 32%, 39%);
|
||||
--btn-hover-border-color: hsl(120, 32%, 39%);
|
||||
--btn-focus-shadow-rgb: 68, 131, 68;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(120, 32%, 39%);
|
||||
--btn-active-border-color: hsl(120, 32%, 39%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(120, 32%, 39%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(120, 32%, 39%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-info {
|
||||
--btn-color: hsl(207, 49%, 37%);
|
||||
--btn-border-color: hsl(207, 49%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(207, 49%, 37%);
|
||||
--btn-hover-border-color: hsl(207, 49%, 37%);
|
||||
--btn-focus-shadow-rgb: 48, 99, 141;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(207, 49%, 37%);
|
||||
--btn-active-border-color: hsl(207, 49%, 37%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(207, 49%, 37%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(207, 49%, 37%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-warning {
|
||||
--btn-color: hsl(34, 100%, 34%);
|
||||
--btn-border-color: hsl(34, 100%, 34%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(34, 100%, 34%);
|
||||
--btn-hover-border-color: hsl(34, 100%, 34%);
|
||||
--btn-focus-shadow-rgb: 173, 98, 0;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(34, 100%, 34%);
|
||||
--btn-active-border-color: hsl(34, 100%, 34%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(34, 100%, 34%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(34, 100%, 34%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-danger {
|
||||
--btn-color: hsl(3, 75%, 37%);
|
||||
--btn-border-color: hsl(3, 75%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(3, 75%, 37%);
|
||||
--btn-hover-border-color: hsl(3, 75%, 37%);
|
||||
--btn-focus-shadow-rgb: 165, 31, 24;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(3, 75%, 37%);
|
||||
--btn-active-border-color: hsl(3, 75%, 37%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(3, 75%, 37%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(3, 75%, 37%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
--btn-color: hsl(210, 17%, 98%);
|
||||
--btn-border-color: hsl(210, 17%, 98%);
|
||||
--btn-hover-color: hsl(0, 0%, 0%);
|
||||
--btn-hover-bg: hsl(210, 17%, 98%);
|
||||
--btn-hover-border-color: hsl(210, 17%, 98%);
|
||||
--btn-focus-shadow-rgb: 249, 250, 251;
|
||||
--btn-active-color: hsl(0, 0%, 0%);
|
||||
--btn-active-bg: hsl(210, 17%, 98%);
|
||||
--btn-active-border-color: hsl(210, 17%, 98%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 17%, 98%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 17%, 98%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
--btn-color: hsl(210, 10%, 23%);
|
||||
--btn-border-color: hsl(210, 10%, 23%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(210, 10%, 23%);
|
||||
--btn-hover-border-color: hsl(210, 10%, 23%);
|
||||
--btn-focus-shadow-rgb: 53, 59, 65;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(210, 10%, 23%);
|
||||
--btn-active-border-color: hsl(210, 10%, 23%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 10%, 23%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 10%, 23%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
--btn-font-weight: 400;
|
||||
--btn-color: var(--link-color);
|
||||
--btn-bg: transparent;
|
||||
--btn-border-color: transparent;
|
||||
--btn-hover-color: var(--link-hover-color);
|
||||
--btn-hover-border-color: transparent;
|
||||
--btn-active-color: var(--link-hover-color);
|
||||
--btn-active-border-color: transparent;
|
||||
--btn-disabled-color: hsl(210, 7%, 46%);
|
||||
--btn-disabled-border-color: transparent;
|
||||
--btn-box-shadow: none;
|
||||
--btn-focus-shadow-rgb: 39, 39, 111;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -1,126 +1,156 @@
|
||||
@charset "UTF-8";
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* This file is part of a Moko Consulting project.
|
||||
*
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see https://www.gnu.org/licenses/ .
|
||||
* =========================================================================
|
||||
* FILE INFORMATION
|
||||
* DEFGROUP: Joomla
|
||||
* INGROUP: Moko-Cassiopeia
|
||||
* PATH: media/templates/site/moko-cassiopeia/css/global/fonts-local_roboto.css
|
||||
* VERSION: 02.00
|
||||
* BRIEF: Local Roboto font-face definitions for the Moko-Cassiopeia template
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-Regular";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff") format("woff");
|
||||
font-family: "Roboto-Regular";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-RegularItalic";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff") format("woff");
|
||||
font-family: "Roboto-RegularItalic";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff") format("woff");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff") format("woff");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-Light";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff") format("woff");
|
||||
font-family: "Roboto-Light";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff") format("woff");
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff") format("woff");
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-LightItalic";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff") format("woff");
|
||||
font-family: "Roboto-LightItalic";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff") format("woff");
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff") format("woff");
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-Thin";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff") format("woff");
|
||||
font-family: "Roboto-Thin";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff") format("woff");
|
||||
font-weight: 100;
|
||||
font-style: italic;
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff") format("woff");
|
||||
font-weight: 100;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-ThinItalic";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff") format("woff");
|
||||
font-family: "Roboto-ThinItalic";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff") format("woff");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff") format("woff");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-Medium";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff") format("woff");
|
||||
font-family: "Roboto-Medium";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff") format("woff");
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff") format("woff");
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-MediumItalic";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff") format("woff");
|
||||
font-family: "Roboto-MediumItalic";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-Bold";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff") format("woff");
|
||||
font-family: "Roboto-Bold";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-BoldItalic";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff") format("woff");
|
||||
font-family: "Roboto-BoldItalic";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff") format("woff");
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff") format("woff");
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-Black";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff") format("woff");
|
||||
font-family: "Roboto-Black";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff") format("woff");
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff") format("woff");
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-BlackItalic";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff") format("woff");
|
||||
font-family: "Roboto-BlackItalic";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff") format("woff");
|
||||
}
|
||||
:root {
|
||||
--font-family-body: "Roboto", sans-serif;
|
||||
--font-family-headings: "Roboto", sans-serif;
|
||||
--font-weight-headings: 700;
|
||||
--font-weight-normal: 400;
|
||||
--font-family-body: "Roboto", sans-serif;
|
||||
--font-family-headings: "Roboto", sans-serif;
|
||||
--font-weight-headings: 700;
|
||||
--font-weight-normal: 400;
|
||||
}
|
||||
@@ -1,16 +1,33 @@
|
||||
/*!
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.moko-cassiopeia
|
||||
* @file /media/templates/sote/moko-cassiopeia/css/global/csocial-media-demos.css
|
||||
@charset "UTF-8";
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
* This file is part of a Moko Consulting project.
|
||||
*
|
||||
* Website: https://mokoconsulting.tech
|
||||
* Email: hello@mokoconsulting.tech
|
||||
* Phone: +1 (931) 279-6313
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see https://www.gnu.org/licenses/ .
|
||||
* =========================================================================
|
||||
* FILE INFORMATION
|
||||
* DEFGROUP: Joomla
|
||||
* INGROUP: Moko-Cassiopeia
|
||||
* PATH: media/templates/site/moko-cassiopeia/css/global/social-media-demo.css
|
||||
* VERSION: 02.00
|
||||
* BRIEF: Demo styles for showcasing social media elements in Moko-Cassiopeia template
|
||||
* =========================================================================
|
||||
*/
|
||||
*
|
||||
|
||||
/*
|
||||
======================================================================
|
||||
Social Media Demo — FULL CSS (Joomla-safe, fully scoped)
|
||||
@@ -19,10 +36,10 @@ Usage: Wrap your article markup in <div class="social-media-demo"> ... </div>
|
||||
Version: 2.0 (2025-08-23)
|
||||
|
||||
How it’s organized:
|
||||
1) Container-level CSS variables (IMAGES ONLY). Colors are hard-coded per brand below.
|
||||
2) Base/layout styles (sections, header shell, placeholders, buttons).
|
||||
3) Platform brand colors (hard-coded) and cover height tweaks.
|
||||
4) Image assignments (map classes like .fb-cover → variable --fb-cover-img).
|
||||
1) Container-level CSS variables (IMAGES ONLY). Colors are hard-coded per brand below.
|
||||
2) Base/layout styles (sections, header shell, placeholders, buttons).
|
||||
3) Platform brand colors (hard-coded) and cover height tweaks.
|
||||
4) Image assignments (map classes like .fb-cover → variable --fb-cover-img).
|
||||
|
||||
INSTRUCTIONS:
|
||||
- Save the images in their requried sizes into the [SITEROOT]/images/social/ folder with the exact names.
|
||||
@@ -32,77 +49,77 @@ INSTRUCTIONS:
|
||||
REQUIRED IMAGE SIZES — Social Media Demo Wireframes
|
||||
|
||||
Facebook
|
||||
--fb-cover-img → Cover: 820×312 (desktop), 640×360 (mobile safe)
|
||||
--fb-avatar-img → Profile: 176×176 (shown as circle, but use square image)
|
||||
--fb-cover-img → Cover: 820×312 (desktop), 640×360 (mobile safe)
|
||||
--fb-avatar-img → Profile: 176×176 (shown as circle, but use square image)
|
||||
|
||||
Twitter / X
|
||||
--x-cover-img → Header: 1500×500
|
||||
--x-avatar-img → Profile: up to 400×400 (shown as circle, but use square image)
|
||||
--x-cover-img → Header: 1500×500
|
||||
--x-avatar-img → Profile: up to 400×400 (shown as circle, but use square image)
|
||||
|
||||
LinkedIn Company
|
||||
--li-cover-img → Banner: ~1128×191
|
||||
--li-logo-img → Logo: up to 300×300 (rounded square)
|
||||
--li-cover-img → Banner: ~1128×191
|
||||
--li-logo-img → Logo: up to 300×300 (rounded square)
|
||||
|
||||
Google Business Profile
|
||||
--gmb-cover-img → Banner: ~960×200 (mobile ~960×140)
|
||||
--gmb-logo-img → Logo: up to 300×300 (shown as circle, but use square image)
|
||||
--gmb-cover-img → Banner: ~960×200 (mobile ~960×140)
|
||||
--gmb-logo-img → Logo: up to 300×300 (shown as circle, but use square image)
|
||||
|
||||
Instagram Business
|
||||
--ig-cover-img → Not always visible, safe 1080×608 for highlight background
|
||||
--ig-avatar-img → Profile: 320×320 (shown as circle, but use square image)
|
||||
--ig-cover-img → Not always visible, safe 1080×608 for highlight background
|
||||
--ig-avatar-img → Profile: 320×320 (shown as circle, but use square image)
|
||||
|
||||
YouTube Channel
|
||||
--yt-cover-img → Channel art: 2560×1440 (safe area ~1546×423 center)
|
||||
--yt-avatar-img → Channel icon: 800×800 (shown as circle, but use square image)
|
||||
--yt-cover-img → Channel art: 2560×1440 (safe area ~1546×423 center)
|
||||
--yt-avatar-img → Channel icon: 800×800 (shown as circle, but use square image)
|
||||
|
||||
TikTok Business
|
||||
--tt-cover-img → Profile header: ~900×500 (safe area ~720×405)
|
||||
--tt-avatar-img → Profile: 200×200 (shown as circle, but use square image)
|
||||
--tt-cover-img → Profile header: ~900×500 (safe area ~720×405)
|
||||
--tt-avatar-img → Profile: 200×200 (shown as circle, but use square image)
|
||||
|
||||
Pinterest Business
|
||||
--pin-cover-img → Board/brand banner: ~800×450
|
||||
--pin-avatar-img → Profile: 165×165 (shown as circle, but use square image)
|
||||
--pin-cover-img → Board/brand banner: ~800×450
|
||||
--pin-avatar-img → Profile: 165×165 (shown as circle, but use square image)
|
||||
|
||||
Snapchat Public Profile
|
||||
--sc-cover-img → Banner: ~1080×1920 (stories/poster)
|
||||
--sc-avatar-img → Bitmoji/Profile: 320×320 (shown as circle, but use square image)
|
||||
--sc-cover-img → Banner: ~1080×1920 (stories/poster)
|
||||
--sc-avatar-img → Bitmoji/Profile: 320×320 (shown as circle, but use square image)
|
||||
|
||||
Reddit Community
|
||||
--rd-cover-img → Banner: 1920×384
|
||||
--rd-avatar-img → Community icon: 256×256 (shown as circle, but use square image)
|
||||
--rd-cover-img → Banner: 1920×384
|
||||
--rd-avatar-img → Community icon: 256×256 (shown as circle, but use square image)
|
||||
====================================================================== */
|
||||
|
||||
/* Container variables — IMAGES ONLY (safe-scoped) */
|
||||
.social-media-demo {
|
||||
--fb-cover-img: url('../../../../../image/social/fb-cover.jpg');
|
||||
--fb-avatar-img: url('../../../../../image/social/fb-avatar.jpg');
|
||||
--fb-cover-img: url('../../../../../image/social/fb-cover.jpg');
|
||||
--fb-avatar-img: url('../../../../../image/social/fb-avatar.jpg');
|
||||
|
||||
--x-cover-img: url('../../../../../image/social/x-cover.jpg');
|
||||
--x-avatar-img: url('../../../../../image/social/x-avatar.jpg');
|
||||
--x-cover-img: url('../../../../../image/social/x-cover.jpg');
|
||||
--x-avatar-img: url('../../../../../image/social/x-avatar.jpg');
|
||||
|
||||
--li-cover-img: url('../../../../../image/social/li-cover.jpg');
|
||||
--li-logo-img: url('../../../../../image/social/li-logo.jpg');
|
||||
--li-cover-img: url('../../../../../image/social/li-cover.jpg');
|
||||
--li-logo-img: url('../../../../../image/social/li-logo.jpg');
|
||||
|
||||
--gmb-cover-img: url('../../../../../image/social/gmb-cover.jpg');
|
||||
--gmb-logo-img: url('../../../../../image/social/gmb-logo.jpg');
|
||||
--gmb-cover-img: url('../../../../../image/social/gmb-cover.jpg');
|
||||
--gmb-logo-img: url('../../../../../image/social/gmb-logo.jpg');
|
||||
|
||||
--ig-cover-img: url('../../../../../image/social/ig-cover.jpg');
|
||||
--ig-avatar-img: url('../../../../../image/social/ig-avatar.jpg');
|
||||
--ig-cover-img: url('../../../../../image/social/ig-cover.jpg');
|
||||
--ig-avatar-img: url('../../../../../image/social/ig-avatar.jpg');
|
||||
|
||||
--yt-cover-img: url('../../../../../image/social/yt-cover.jpg');
|
||||
--yt-avatar-img: url('../../../../../image/social/yt-avatar.jpg');
|
||||
--yt-cover-img: url('../../../../../image/social/yt-cover.jpg');
|
||||
--yt-avatar-img: url('../../../../../image/social/yt-avatar.jpg');
|
||||
|
||||
--tt-cover-img: url('../../../../../image/social/tt-cover.jpg');
|
||||
--tt-avatar-img: url('../../../../../image/social/tt-avatar.jpg');
|
||||
--tt-cover-img: url('../../../../../image/social/tt-cover.jpg');
|
||||
--tt-avatar-img: url('../../../../../image/social/tt-avatar.jpg');
|
||||
|
||||
--pin-cover-img: url('../../../../../image/social/pin-cover.jpg');
|
||||
--pin-avatar-img: url('../../../../../image/social/pin-avatar.jpg');
|
||||
--pin-cover-img: url('../../../../../image/social/pin-cover.jpg');
|
||||
--pin-avatar-img: url('../../../../../image/social/pin-avatar.jpg');
|
||||
|
||||
--sc-cover-img: url('../../../../../image/social/sc-cover.jpg');
|
||||
--sc-avatar-img: url('../../../../../image/social/sc-avatar.jpg');
|
||||
--sc-cover-img: url('../../../../../image/social/sc-cover.jpg');
|
||||
--sc-avatar-img: url('../../../../../image/social/sc-avatar.jpg');
|
||||
|
||||
--rd-cover-img: url('../../../../../image/social/rd-cover.jpg');
|
||||
--rd-avatar-img: url('../../../../../image/social/rd-avatar.jpg');
|
||||
--rd-cover-img: url('../../../../../image/social/rd-cover.jpg');
|
||||
--rd-avatar-img: url('../../../../../image/social/rd-avatar.jpg');
|
||||
}
|
||||
|
||||
/* DO NOT TOUCH */
|
||||
|
||||
@@ -1,49 +1,79 @@
|
||||
@charset "UTF-8";
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* This file is part of a Moko Consulting project.
|
||||
*
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see https://www.gnu.org/licenses/ .
|
||||
* =========================================================================
|
||||
* FILE INFORMATION
|
||||
* DEFGROUP: Joomla
|
||||
* INGROUP: Moko-Cassiopeia
|
||||
* PATH: media/templates/site/moko-cassiopeia/css/system/searchtools/searchtools.css
|
||||
* VERSION: 02.00
|
||||
* BRIEF: Stylesheet for Joomla search tools integration in Moko-Cassiopeia template
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
.js-stools-container-bar {
|
||||
padding: 10px 20px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.js-stools-container-bar .btn-toolbar {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.js-stools-container-bar .btn-toolbar > * {
|
||||
margin: 4px 0;
|
||||
-webkit-margin-end: 8px;
|
||||
margin-inline-end: 8px;
|
||||
margin: 4px 0;
|
||||
-webkit-margin-end: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
.js-stools-container-bar .btn-toolbar .js-stools-btn-clear {
|
||||
background-color: hsl(207, 49%, 37%);
|
||||
border: 0;
|
||||
background-color: hsl(207, 49%, 37%);
|
||||
border: 0;
|
||||
}
|
||||
.js-stools-container-bar .ordering-select {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.js-stools-container-filters {
|
||||
display: none;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 20px;
|
||||
display: none;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.js-stools-container-filters-visible {
|
||||
display: grid;
|
||||
grid-gap: 8px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
padding: 10px;
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
display: grid;
|
||||
grid-gap: 8px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
padding: 10px;
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
}
|
||||
.js-stools-container-filters > * {
|
||||
margin: 4px 0;
|
||||
-webkit-margin-end: 8px;
|
||||
margin-inline-end: 8px;
|
||||
margin: 4px 0;
|
||||
-webkit-margin-end: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.js-stools-field-list + .js-stools-field-list {
|
||||
-webkit-margin-start: 8px;
|
||||
margin-inline-start: 8px;
|
||||
-webkit-margin-start: 8px;
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
|
||||
.js-stools-field-selector .form-select {
|
||||
width: auto;
|
||||
width: auto;
|
||||
}
|
||||
@@ -1,499 +1,528 @@
|
||||
@charset "UTF-8";
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* This file is part of a Moko Consulting project.
|
||||
*
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see https://www.gnu.org/licenses/ .
|
||||
* =========================================================================
|
||||
* FILE INFORMATION
|
||||
* DEFGROUP: Joomla
|
||||
* INGROUP: Moko-Cassiopeia
|
||||
* PATH: media/templates/site/moko-cassiopeia/css/vendor/choicesjs/choices.css
|
||||
* VERSION: 02.00
|
||||
* BRIEF: Vendor stylesheet for Choices.js select and input enhancements in Moko-Cassiopeia
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
/* ===============================
|
||||
= Choices =
|
||||
=============================== */
|
||||
.choices {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 24px;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.choices:focus {
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
.choices:last-child {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.choices.is-open {
|
||||
overflow: initial;
|
||||
overflow: initial;
|
||||
}
|
||||
.choices.is-disabled .choices__inner,
|
||||
.choices.is-disabled .choices__input {
|
||||
background-color: #eaeaea;
|
||||
cursor: not-allowed;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-color: #eaeaea;
|
||||
cursor: not-allowed;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.choices.is-disabled .choices__item {
|
||||
cursor: not-allowed;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.choices [hidden] {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.choices[data-type*=select-one] {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
.choices[data-type*=select-one] .choices__inner {
|
||||
padding-bottom: 7.5px;
|
||||
padding-bottom: 7.5px;
|
||||
}
|
||||
.choices[data-type*=select-one] .choices__input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: #fff;
|
||||
margin: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
.choices[data-type*=select-one] .choices__button {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
|
||||
padding: 0;
|
||||
background-size: 8px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
margin-top: -10px;
|
||||
margin-right: 25px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 10em;
|
||||
opacity: 0.25;
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
|
||||
padding: 0;
|
||||
background-size: 8px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
margin-top: -10px;
|
||||
margin-right: 25px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 10em;
|
||||
opacity: 0.25;
|
||||
}
|
||||
.choices[data-type*=select-one] .choices__button:hover, .choices[data-type*=select-one] .choices__button:focus {
|
||||
opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
.choices[data-type*=select-one] .choices__button:focus {
|
||||
-webkit-box-shadow: 0 0 0 2px #00bcd4;
|
||||
box-shadow: 0 0 0 2px #00bcd4;
|
||||
-webkit-box-shadow: 0 0 0 2px #00bcd4;
|
||||
box-shadow: 0 0 0 2px #00bcd4;
|
||||
}
|
||||
.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
.choices[data-type*=select-one]::after {
|
||||
content: "";
|
||||
height: 0;
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
border-color: #333 transparent transparent transparent;
|
||||
border-width: 5px;
|
||||
position: absolute;
|
||||
right: 11.5px;
|
||||
top: 50%;
|
||||
margin-top: -2.5px;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
height: 0;
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
border-color: #333 transparent transparent transparent;
|
||||
border-width: 5px;
|
||||
position: absolute;
|
||||
right: 11.5px;
|
||||
top: 50%;
|
||||
margin-top: -2.5px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.choices[data-type*=select-one].is-open::after {
|
||||
border-color: transparent transparent #333 transparent;
|
||||
margin-top: -7.5px;
|
||||
border-color: transparent transparent #333 transparent;
|
||||
margin-top: -7.5px;
|
||||
}
|
||||
.choices[data-type*=select-one][dir=rtl]::after {
|
||||
left: 11.5px;
|
||||
right: auto;
|
||||
left: 11.5px;
|
||||
right: auto;
|
||||
}
|
||||
.choices[data-type*=select-one][dir=rtl] .choices__button {
|
||||
right: auto;
|
||||
left: 0;
|
||||
margin-left: 25px;
|
||||
margin-right: 0;
|
||||
right: auto;
|
||||
left: 0;
|
||||
margin-left: 25px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.choices[data-type*=select-multiple] .choices__inner,
|
||||
.choices[data-type*=text] .choices__inner {
|
||||
cursor: text;
|
||||
cursor: text;
|
||||
}
|
||||
.choices[data-type*=select-multiple] .choices__button,
|
||||
.choices[data-type*=text] .choices__button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
margin-right: -4px;
|
||||
margin-bottom: 0;
|
||||
margin-left: 8px;
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid #008fa1;
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
|
||||
background-size: 8px;
|
||||
width: 8px;
|
||||
line-height: 1;
|
||||
opacity: 0.75;
|
||||
border-radius: 0;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
margin-right: -4px;
|
||||
margin-bottom: 0;
|
||||
margin-left: 8px;
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid #008fa1;
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
|
||||
background-size: 8px;
|
||||
width: 8px;
|
||||
line-height: 1;
|
||||
opacity: 0.75;
|
||||
border-radius: 0;
|
||||
}
|
||||
.choices[data-type*=select-multiple] .choices__button:hover, .choices[data-type*=select-multiple] .choices__button:focus,
|
||||
.choices[data-type*=text] .choices__button:hover,
|
||||
.choices[data-type*=text] .choices__button:focus {
|
||||
opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.choices__inner {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
background-color: #f9f9f9;
|
||||
padding: 7.5px 7.5px 3.75px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 2.5px;
|
||||
font-size: 14px;
|
||||
min-height: 44px;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
background-color: #f9f9f9;
|
||||
padding: 7.5px 7.5px 3.75px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 2.5px;
|
||||
font-size: 14px;
|
||||
min-height: 44px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.is-focused .choices__inner, .is-open .choices__inner {
|
||||
border-color: #b7b7b7;
|
||||
border-color: #b7b7b7;
|
||||
}
|
||||
.is-open .choices__inner {
|
||||
border-radius: 2.5px 2.5px 0 0;
|
||||
border-radius: 2.5px 2.5px 0 0;
|
||||
}
|
||||
.is-flipped.is-open .choices__inner {
|
||||
border-radius: 0 0 2.5px 2.5px;
|
||||
border-radius: 0 0 2.5px 2.5px;
|
||||
}
|
||||
|
||||
.choices__list {
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.choices__list--single {
|
||||
display: inline-block;
|
||||
padding: 4px 16px 4px 4px;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
padding: 4px 16px 4px 4px;
|
||||
width: 100%;
|
||||
}
|
||||
[dir=rtl] .choices__list--single {
|
||||
padding-right: 4px;
|
||||
padding-left: 16px;
|
||||
padding-right: 4px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.choices__list--single .choices__item {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.choices__list--multiple {
|
||||
display: inline;
|
||||
display: inline;
|
||||
}
|
||||
.choices__list--multiple .choices__item {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border-radius: 20px;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-right: 3.75px;
|
||||
margin-bottom: 3.75px;
|
||||
background-color: #00bcd4;
|
||||
border: 1px solid #00a5bb;
|
||||
color: #fff;
|
||||
word-break: break-all;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border-radius: 20px;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-right: 3.75px;
|
||||
margin-bottom: 3.75px;
|
||||
background-color: #00bcd4;
|
||||
border: 1px solid #00a5bb;
|
||||
color: #fff;
|
||||
word-break: break-all;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.choices__list--multiple .choices__item[data-deletable] {
|
||||
padding-right: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
[dir=rtl] .choices__list--multiple .choices__item {
|
||||
margin-right: 0;
|
||||
margin-left: 3.75px;
|
||||
margin-right: 0;
|
||||
margin-left: 3.75px;
|
||||
}
|
||||
.choices__list--multiple .choices__item.is-highlighted {
|
||||
background-color: #00a5bb;
|
||||
border: 1px solid #008fa1;
|
||||
background-color: #00a5bb;
|
||||
border: 1px solid #008fa1;
|
||||
}
|
||||
.is-disabled .choices__list--multiple .choices__item {
|
||||
background-color: #aaaaaa;
|
||||
border: 1px solid #919191;
|
||||
background-color: #aaaaaa;
|
||||
border: 1px solid #919191;
|
||||
}
|
||||
|
||||
.choices__list--dropdown {
|
||||
visibility: hidden;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
top: 100%;
|
||||
margin-top: -1px;
|
||||
border-bottom-left-radius: 2.5px;
|
||||
border-bottom-right-radius: 2.5px;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
will-change: visibility;
|
||||
visibility: hidden;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
top: 100%;
|
||||
margin-top: -1px;
|
||||
border-bottom-left-radius: 2.5px;
|
||||
border-bottom-right-radius: 2.5px;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
will-change: visibility;
|
||||
}
|
||||
.choices__list--dropdown.is-active {
|
||||
visibility: visible;
|
||||
visibility: visible;
|
||||
}
|
||||
.is-open .choices__list--dropdown {
|
||||
border-color: #b7b7b7;
|
||||
border-color: #b7b7b7;
|
||||
}
|
||||
.is-flipped .choices__list--dropdown {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: -1px;
|
||||
border-radius: 0.25rem 0.25rem 0 0;
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: -1px;
|
||||
border-radius: 0.25rem 0.25rem 0 0;
|
||||
}
|
||||
.choices__list--dropdown .choices__list {
|
||||
position: relative;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
will-change: scroll-position;
|
||||
position: relative;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
will-change: scroll-position;
|
||||
}
|
||||
.choices__list--dropdown .choices__item {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
[dir=rtl] .choices__list--dropdown .choices__item {
|
||||
text-align: right;
|
||||
text-align: right;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.choices__list--dropdown .choices__item--selectable {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.choices__list--dropdown .choices__item--selectable::after {
|
||||
content: attr(data-select-text);
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
[dir=rtl] .choices__list--dropdown .choices__item--selectable {
|
||||
text-align: right;
|
||||
padding-left: 100px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
[dir=rtl] .choices__list--dropdown .choices__item--selectable::after {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
.choices__list--dropdown .choices__item--selectable {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.choices__list--dropdown .choices__item--selectable::after {
|
||||
content: attr(data-select-text);
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
[dir=rtl] .choices__list--dropdown .choices__item--selectable {
|
||||
text-align: right;
|
||||
padding-left: 100px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
[dir=rtl] .choices__list--dropdown .choices__item--selectable::after {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
.choices__list--dropdown .choices__item--selectable.is-highlighted {
|
||||
background-color: #f2f2f2;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.choices__list--dropdown .choices__item--selectable.is-highlighted::after {
|
||||
opacity: 0.5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.choices__item {
|
||||
cursor: default;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.choices__item--selectable {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.choices__item--disabled {
|
||||
cursor: not-allowed;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.choices__heading {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
color: gray;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.choices__button {
|
||||
text-indent: -9999px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
text-indent: -9999px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.choices__button:focus {
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.choices__input {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
background-color: #f9f9f9;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
max-width: 100%;
|
||||
padding: 4px 0 4px 2px;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
background-color: #f9f9f9;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
max-width: 100%;
|
||||
padding: 4px 0 4px 2px;
|
||||
}
|
||||
.choices__input:focus {
|
||||
outline: 0;
|
||||
outline: 0;
|
||||
}
|
||||
[dir=rtl] .choices__input {
|
||||
padding-right: 2px;
|
||||
padding-left: 0;
|
||||
padding-right: 2px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.choices__placeholder {
|
||||
opacity: 0.5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ===== End of Choices ====== */
|
||||
.choices {
|
||||
border: 1px solid hsl(210, 14%, 83%);
|
||||
border-radius: 0.25rem;
|
||||
border: 1px solid hsl(210, 14%, 83%);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.choices.is-focused {
|
||||
border-color: #8894aa;
|
||||
-webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
|
||||
box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
|
||||
border-color: #8894aa;
|
||||
-webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
|
||||
box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
|
||||
}
|
||||
|
||||
.choices__inner {
|
||||
padding: 0.4rem 1rem;
|
||||
margin-bottom: 0;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: 0.4rem 1rem;
|
||||
margin-bottom: 0;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.choices__input {
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 1rem;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 1rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
.choices__input::-webkit-input-placeholder {
|
||||
color: hsl(210, 9%, 31%);
|
||||
opacity: 1;
|
||||
color: hsl(210, 9%, 31%);
|
||||
opacity: 1;
|
||||
}
|
||||
.choices__input::-moz-placeholder {
|
||||
color: hsl(210, 9%, 31%);
|
||||
opacity: 1;
|
||||
color: hsl(210, 9%, 31%);
|
||||
opacity: 1;
|
||||
}
|
||||
.choices__input:-ms-input-placeholder {
|
||||
color: hsl(210, 9%, 31%);
|
||||
opacity: 1;
|
||||
color: hsl(210, 9%, 31%);
|
||||
opacity: 1;
|
||||
}
|
||||
.choices__input::-ms-input-placeholder {
|
||||
color: hsl(210, 9%, 31%);
|
||||
opacity: 1;
|
||||
color: hsl(210, 9%, 31%);
|
||||
opacity: 1;
|
||||
}
|
||||
.choices__input::placeholder {
|
||||
color: hsl(210, 9%, 31%);
|
||||
opacity: 1;
|
||||
color: hsl(210, 9%, 31%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.choices__list--dropdown {
|
||||
z-index: 1060;
|
||||
z-index: 1060;
|
||||
}
|
||||
|
||||
.choices__list--multiple .choices__item {
|
||||
position: relative;
|
||||
margin: 2px;
|
||||
background-color: var(--color-primary);
|
||||
-webkit-margin-end: 2px;
|
||||
margin-inline-end: 2px;
|
||||
border: 0;
|
||||
border-radius: 0.25rem;
|
||||
position: relative;
|
||||
margin: 2px;
|
||||
background-color: var(--color-primary);
|
||||
-webkit-margin-end: 2px;
|
||||
margin-inline-end: 2px;
|
||||
border: 0;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.choices__list--multiple .choices__item.is-highlighted {
|
||||
background-color: var(--color-primary);
|
||||
opacity: 0.9;
|
||||
background-color: var(--color-primary);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.choices .choices__list--dropdown .choices__item {
|
||||
-webkit-padding-end: 10px;
|
||||
padding-inline-end: 10px;
|
||||
-webkit-padding-end: 10px;
|
||||
padding-inline-end: 10px;
|
||||
}
|
||||
.choices .choices__list--dropdown .choices__item--selectable::after {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.choices__button_joomla {
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
color: inherit;
|
||||
text-indent: -9999px;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: 0;
|
||||
opacity: 0.5;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
color: inherit;
|
||||
text-indent: -9999px;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: 0;
|
||||
opacity: 0.5;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.choices__button_joomla::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-indent: 0;
|
||||
content: "×";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-indent: 0;
|
||||
content: "×";
|
||||
}
|
||||
.choices__button_joomla:hover, .choices__button_joomla:focus {
|
||||
opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
.choices__button_joomla:focus {
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.choices[data-type*=select-one] .choices__inner,
|
||||
.choices[data-type*=select-multiple] .choices__inner {
|
||||
-webkit-padding-end: 3rem;
|
||||
padding-inline-end: 3rem;
|
||||
cursor: pointer;
|
||||
background: url("../../../images/select-bg.svg") no-repeat 100%/116rem;
|
||||
background-color: hsl(210, 16%, 93%);
|
||||
-webkit-padding-end: 3rem;
|
||||
padding-inline-end: 3rem;
|
||||
cursor: pointer;
|
||||
background: url("../../../images/select-bg.svg") no-repeat 100%/116rem;
|
||||
background-color: hsl(210, 16%, 93%);
|
||||
}
|
||||
[dir=rtl] .choices[data-type*=select-one] .choices__inner,
|
||||
[dir=rtl] .choices[data-type*=select-multiple] .choices__inner {
|
||||
background: url("../../../images/select-bg-rtl.svg") no-repeat 0/116rem;
|
||||
background-color: hsl(210, 16%, 93%);
|
||||
background: url("../../../images/select-bg-rtl.svg") no-repeat 0/116rem;
|
||||
background-color: hsl(210, 16%, 93%);
|
||||
}
|
||||
|
||||
.choices[data-type*=select-one] .choices__item {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.choices[data-type*=select-one] .choices__button_joomla {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
inset-inline-end: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
-webkit-margin-before: -10px;
|
||||
margin-block-start: -10px;
|
||||
-webkit-margin-end: 50px;
|
||||
margin-inline-end: 50px;
|
||||
border-radius: 10em;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
inset-inline-end: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
-webkit-margin-before: -10px;
|
||||
margin-block-start: -10px;
|
||||
-webkit-margin-end: 50px;
|
||||
margin-inline-end: 50px;
|
||||
border-radius: 10em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.choices[data-type*=select-one] .choices__button_joomla:hover, .choices[data-type*=select-one] .choices__button_joomla:focus {
|
||||
opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
.choices[data-type*=select-one] .choices__button_joomla:focus {
|
||||
-webkit-box-shadow: 0 0 0 2px #00bcd4;
|
||||
box-shadow: 0 0 0 2px #00bcd4;
|
||||
-webkit-box-shadow: 0 0 0 2px #00bcd4;
|
||||
box-shadow: 0 0 0 2px #00bcd4;
|
||||
}
|
||||
.choices[data-type*=select-one]::after {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.choices[data-type*=select-multiple] .choices__input,
|
||||
.choices[data-type*=text] .choices__input {
|
||||
padding: 0.2rem 0;
|
||||
padding: 0.2rem 0;
|
||||
}
|
||||
|
||||
.choices__heading {
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
@@ -1,146 +1,176 @@
|
||||
@charset "UTF-8";
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* This file is part of a Moko Consulting project.
|
||||
*
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see https://www.gnu.org/licenses/ .
|
||||
* =========================================================================
|
||||
* FILE INFORMATION
|
||||
* DEFGROUP: Joomla
|
||||
* INGROUP: Moko-Cassiopeia
|
||||
* PATH: media/templates/site/moko-cassiopeia/css/vendor/choicesjs/choices.css
|
||||
* VERSION: 02.00
|
||||
* BRIEF: Vendor stylesheet for Choices.js select and input enhancements in Moko-Cassiopeia
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
@import "../../../../../../vendor/joomla-custom-elements/css/joomla-alert.css";
|
||||
#system-message-container:empty {
|
||||
display: none;
|
||||
margin-top: 0;
|
||||
display: none;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#system-message-container joomla-alert {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-width: 16rem;
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
color: var(--gray-dark);
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
border: 1px solid var(--alert-accent-color, transparent);
|
||||
border-radius: 0.25rem;
|
||||
-webkit-transition: opacity 0.15s linear;
|
||||
-o-transition: opacity 0.15s linear;
|
||||
transition: opacity 0.15s linear;
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-width: 16rem;
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
color: var(--gray-dark);
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
border: 1px solid var(--alert-accent-color, transparent);
|
||||
border-radius: 0.25rem;
|
||||
-webkit-transition: opacity 0.15s linear;
|
||||
-o-transition: opacity 0.15s linear;
|
||||
transition: opacity 0.15s linear;
|
||||
}
|
||||
#system-message-container joomla-alert + * {
|
||||
margin-top: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
#system-message-container joomla-alert .alert-heading {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
padding: 0.8rem;
|
||||
color: var(--alert-heading-text);
|
||||
background: var(--alert-accent-color, transparent);
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
padding: 0.8rem;
|
||||
color: var(--alert-heading-text);
|
||||
background: var(--alert-accent-color, transparent);
|
||||
}
|
||||
#system-message-container joomla-alert .alert-heading .message::before,
|
||||
#system-message-container joomla-alert .alert-heading .success::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg>');
|
||||
background-size: 100%;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg>');
|
||||
background-size: 100%;
|
||||
}
|
||||
#system-message-container joomla-alert .alert-heading .notice::before,
|
||||
#system-message-container joomla-alert .alert-heading .info::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"/></svg>');
|
||||
background-size: 100%;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"/></svg>');
|
||||
background-size: 100%;
|
||||
}
|
||||
#system-message-container joomla-alert .alert-heading .warning::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z"/></svg>');
|
||||
background-size: 100%;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z"/></svg>');
|
||||
background-size: 100%;
|
||||
}
|
||||
#system-message-container joomla-alert .alert-heading .error::before,
|
||||
#system-message-container joomla-alert .alert-heading .danger::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"/></svg>');
|
||||
background-size: 100%;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"/></svg>');
|
||||
background-size: 100%;
|
||||
}
|
||||
#system-message-container joomla-alert .alert-wrapper {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
#system-message-container joomla-alert .alert-link {
|
||||
color: var(--success, inherit);
|
||||
color: var(--success, inherit);
|
||||
}
|
||||
#system-message-container joomla-alert[type=success], #system-message-container joomla-alert[type=message] {
|
||||
--alert-accent-color: var(--success);
|
||||
--alert-heading-text: hsla(0, 0%, 100%, .95);
|
||||
--alert-close-button: var(--success);
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
--alert-accent-color: var(--success);
|
||||
--alert-heading-text: hsla(0, 0%, 100%, .95);
|
||||
--alert-close-button: var(--success);
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
}
|
||||
#system-message-container joomla-alert[type=info], #system-message-container joomla-alert[type=notice] {
|
||||
--alert-accent-color: var(--info);
|
||||
--alert-heading-text: hsla(0, 0%, 100%, .95);
|
||||
--alert-close-button: var(--info);
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
--alert-accent-color: var(--info);
|
||||
--alert-heading-text: hsla(0, 0%, 100%, .95);
|
||||
--alert-close-button: var(--info);
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
}
|
||||
#system-message-container joomla-alert[type=warning] {
|
||||
--alert-accent-color: var(--warning);
|
||||
--alert-heading-text: hsla(0, 0%, 100%, .95);
|
||||
--alert-close-button: var(--warning);
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
--alert-accent-color: var(--warning);
|
||||
--alert-heading-text: hsla(0, 0%, 100%, .95);
|
||||
--alert-close-button: var(--warning);
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
}
|
||||
#system-message-container joomla-alert[type=error], #system-message-container joomla-alert[type=danger] {
|
||||
--alert-accent-color: var(--danger);
|
||||
--alert-heading-text: hsla(0, 0%, 100%, .95);
|
||||
--alert-close-button: var(--danger);
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
--alert-accent-color: var(--danger);
|
||||
--alert-heading-text: hsla(0, 0%, 100%, .95);
|
||||
--alert-close-button: var(--danger);
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
}
|
||||
#system-message-container joomla-alert .joomla-alert--close,
|
||||
#system-message-container joomla-alert .joomla-alert-button--close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 0.2rem 0.8rem;
|
||||
font-size: 2rem;
|
||||
color: var(--alert-close-button);
|
||||
background: none;
|
||||
border: 0;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 0.2rem 0.8rem;
|
||||
font-size: 2rem;
|
||||
color: var(--alert-close-button);
|
||||
background: none;
|
||||
border: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
#system-message-container joomla-alert .joomla-alert--close:hover, #system-message-container joomla-alert .joomla-alert--close:focus,
|
||||
#system-message-container joomla-alert .joomla-alert-button--close:hover,
|
||||
#system-message-container joomla-alert .joomla-alert-button--close:focus {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
opacity: 0.75;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
opacity: 0.75;
|
||||
}
|
||||
[dir=rtl] #system-message-container joomla-alert .joomla-alert--close,
|
||||
[dir=rtl] #system-message-container joomla-alert .joomla-alert-button--close {
|
||||
right: auto;
|
||||
left: 0;
|
||||
padding: 0.2rem 0.6rem;
|
||||
right: auto;
|
||||
left: 0;
|
||||
padding: 0.2rem 0.6rem;
|
||||
}
|
||||
#system-message-container joomla-alert div {
|
||||
font-size: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
#system-message-container joomla-alert div .alert-message {
|
||||
padding: 0.3rem 2rem 0.3rem 0.3rem;
|
||||
margin: 0.5rem;
|
||||
padding: 0.3rem 2rem 0.3rem 0.3rem;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
[dir=rtl] #system-message-container joomla-alert div .alert-message {
|
||||
padding: 0.3rem 0.3rem 0.3rem 2rem;
|
||||
padding: 0.3rem 0.3rem 0.3rem 2rem;
|
||||
}
|
||||
#system-message-container joomla-alert div .alert-message:not(:first-of-type) {
|
||||
border-top: 1px solid var(--alert-accent-color);
|
||||
border-top: 1px solid var(--alert-accent-color);
|
||||
}
|
||||
@@ -1,3 +1,33 @@
|
||||
@charset "UTF-8";
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* This file is part of a Moko Consulting project.
|
||||
*
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see https://www.gnu.org/licenses/ .
|
||||
* =========================================================================
|
||||
* FILE INFORMATION
|
||||
* DEFGROUP: Joomla
|
||||
* INGROUP: Moko-Cassiopeia
|
||||
* PATH: media/templates/site/moko-cassiopeia/css/vendor/vmbasic.css
|
||||
* VERSION: 02.00
|
||||
* BRIEF: Vendor stylesheet providing base styles for VM Basic in Moko-Cassiopeia
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
/* Bootstrap */
|
||||
.dropdown-menu {
|
||||
border-radius: 0;
|
||||
|
||||
@@ -1,147 +1,170 @@
|
||||
/**
|
||||
* darkmode-toggle.js — Floating theme switch (class-based, CSP-proof)
|
||||
* @version 2.2.1
|
||||
* Storage key: "theme" -> "light" | "dark"
|
||||
* Corner from <body data-theme-fab-pos="br|bl|tr|tl"> (default br)
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* This file is part of a Moko Consulting project.
|
||||
*
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see https://www.gnu.org/licenses/ .
|
||||
* =========================================================================
|
||||
* FILE INFORMATION
|
||||
* DEFGROUP: Joomla
|
||||
* INGROUP: Moko-Cassiopeia
|
||||
* PATH: media/templates/site/moko-cassiopeia/js/darkmode-toggle.js
|
||||
* VERSION: 02.00
|
||||
* BRIEF: JavaScript logic for dark mode toggle functionality in Moko-Cassiopeia
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
'use strict';
|
||||
|
||||
var STORAGE_KEY = 'theme';
|
||||
var docEl = document.documentElement;
|
||||
var mql = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
var STORAGE_KEY = 'theme';
|
||||
var docEl = document.documentElement;
|
||||
var mql = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
|
||||
function getStored() { try { return localStorage.getItem(STORAGE_KEY); } catch (e) { return null; } }
|
||||
function setStored(v) { try { localStorage.setItem(STORAGE_KEY, v); } catch (e) {} }
|
||||
function clearStored() { try { localStorage.removeItem(STORAGE_KEY); } catch (e) {} }
|
||||
function systemTheme() { return mql.matches ? 'dark' : 'light'; }
|
||||
function getStored() { try { return localStorage.getItem(STORAGE_KEY); } catch (e) { return null; } }
|
||||
function setStored(v) { try { localStorage.setItem(STORAGE_KEY, v); } catch (e) {} }
|
||||
function clearStored() { try { localStorage.removeItem(STORAGE_KEY); } catch (e) {} }
|
||||
function systemTheme() { return mql.matches ? 'dark' : 'light'; }
|
||||
|
||||
function applyTheme(theme) {
|
||||
docEl.setAttribute('data-bs-theme', theme);
|
||||
docEl.setAttribute('data-aria-theme', theme);
|
||||
var meta = document.querySelector('meta[name="theme-color"]');
|
||||
if (meta) {
|
||||
meta.setAttribute('content', theme === 'dark' ? '#0f1115' : '#ffffff');
|
||||
}
|
||||
var sw = document.getElementById('mokoThemeSwitch');
|
||||
if (sw) {
|
||||
sw.setAttribute('aria-checked', theme === 'dark' ? 'true' : 'false');
|
||||
}
|
||||
}
|
||||
function applyTheme(theme) {
|
||||
docEl.setAttribute('data-bs-theme', theme);
|
||||
docEl.setAttribute('data-aria-theme', theme);
|
||||
var meta = document.querySelector('meta[name="theme-color"]');
|
||||
if (meta) {
|
||||
meta.setAttribute('content', theme === 'dark' ? '#0f1115' : '#ffffff');
|
||||
}
|
||||
var sw = document.getElementById('mokoThemeSwitch');
|
||||
if (sw) {
|
||||
sw.setAttribute('aria-checked', theme === 'dark' ? 'true' : 'false');
|
||||
}
|
||||
}
|
||||
|
||||
function initTheme() {
|
||||
var stored = getStored();
|
||||
applyTheme(stored ? stored : systemTheme());
|
||||
}
|
||||
function initTheme() {
|
||||
var stored = getStored();
|
||||
applyTheme(stored ? stored : systemTheme());
|
||||
}
|
||||
|
||||
function posClassFromBody() {
|
||||
var pos = (document.body.getAttribute('data-theme-fab-pos') || 'br').toLowerCase();
|
||||
if (!/^(br|bl|tr|tl)$/.test(pos)) pos = 'br';
|
||||
return 'pos-' + pos;
|
||||
}
|
||||
function posClassFromBody() {
|
||||
var pos = (document.body.getAttribute('data-theme-fab-pos') || 'br').toLowerCase();
|
||||
if (!/^(br|bl|tr|tl)$/.test(pos)) pos = 'br';
|
||||
return 'pos-' + pos;
|
||||
}
|
||||
|
||||
function buildToggle() {
|
||||
if (document.getElementById('mokoThemeFab')) return;
|
||||
function buildToggle() {
|
||||
if (document.getElementById('mokoThemeFab')) return;
|
||||
|
||||
var wrap = document.createElement('div');
|
||||
wrap.id = 'mokoThemeFab';
|
||||
wrap.className = posClassFromBody();
|
||||
var wrap = document.createElement('div');
|
||||
wrap.id = 'mokoThemeFab';
|
||||
wrap.className = posClassFromBody();
|
||||
|
||||
// Light label
|
||||
var lblL = document.createElement('span');
|
||||
lblL.className = 'label';
|
||||
lblL.textContent = 'Light';
|
||||
// Light label
|
||||
var lblL = document.createElement('span');
|
||||
lblL.className = 'label';
|
||||
lblL.textContent = 'Light';
|
||||
|
||||
// Switch
|
||||
var switchWrap = document.createElement('button');
|
||||
switchWrap.id = 'mokoThemeSwitch';
|
||||
switchWrap.type = 'button';
|
||||
switchWrap.setAttribute('role', 'switch');
|
||||
switchWrap.setAttribute('aria-label', 'Toggle dark mode');
|
||||
switchWrap.setAttribute('aria-checked', 'false'); // updated after init
|
||||
// Switch
|
||||
var switchWrap = document.createElement('button');
|
||||
switchWrap.id = 'mokoThemeSwitch';
|
||||
switchWrap.type = 'button';
|
||||
switchWrap.setAttribute('role', 'switch');
|
||||
switchWrap.setAttribute('aria-label', 'Toggle dark mode');
|
||||
switchWrap.setAttribute('aria-checked', 'false'); // updated after init
|
||||
|
||||
var track = document.createElement('span');
|
||||
track.className = 'switch';
|
||||
var knob = document.createElement('span');
|
||||
knob.className = 'knob';
|
||||
track.appendChild(knob);
|
||||
switchWrap.appendChild(track);
|
||||
var track = document.createElement('span');
|
||||
track.className = 'switch';
|
||||
var knob = document.createElement('span');
|
||||
knob.className = 'knob';
|
||||
track.appendChild(knob);
|
||||
switchWrap.appendChild(track);
|
||||
|
||||
// Dark label
|
||||
var lblD = document.createElement('span');
|
||||
lblD.className = 'label';
|
||||
lblD.textContent = 'Dark';
|
||||
// Dark label
|
||||
var lblD = document.createElement('span');
|
||||
lblD.className = 'label';
|
||||
lblD.textContent = 'Dark';
|
||||
|
||||
// Auto button
|
||||
var auto = document.createElement('button');
|
||||
auto.id = 'mokoThemeAuto';
|
||||
auto.type = 'button';
|
||||
auto.className = 'btn btn-sm btn-link text-decoration-none px-2';
|
||||
auto.setAttribute('aria-label', 'Follow system theme');
|
||||
auto.textContent = 'Auto';
|
||||
// Auto button
|
||||
var auto = document.createElement('button');
|
||||
auto.id = 'mokoThemeAuto';
|
||||
auto.type = 'button';
|
||||
auto.className = 'btn btn-sm btn-link text-decoration-none px-2';
|
||||
auto.setAttribute('aria-label', 'Follow system theme');
|
||||
auto.textContent = 'Auto';
|
||||
|
||||
// Behavior
|
||||
switchWrap.addEventListener('click', function () {
|
||||
var current = (docEl.getAttribute('data-bs-theme') || 'light').toLowerCase();
|
||||
var next = current === 'dark' ? 'light' : 'dark';
|
||||
applyTheme(next);
|
||||
setStored(next);
|
||||
});
|
||||
// Behavior
|
||||
switchWrap.addEventListener('click', function () {
|
||||
var current = (docEl.getAttribute('data-bs-theme') || 'light').toLowerCase();
|
||||
var next = current === 'dark' ? 'light' : 'dark';
|
||||
applyTheme(next);
|
||||
setStored(next);
|
||||
});
|
||||
|
||||
auto.addEventListener('click', function () {
|
||||
clearStored();
|
||||
applyTheme(systemTheme());
|
||||
});
|
||||
auto.addEventListener('click', function () {
|
||||
clearStored();
|
||||
applyTheme(systemTheme());
|
||||
});
|
||||
|
||||
// Respond to OS changes only when not user-forced
|
||||
var onMql = function () {
|
||||
if (!getStored()) applyTheme(systemTheme());
|
||||
};
|
||||
if (typeof mql.addEventListener === 'function') mql.addEventListener('change', onMql);
|
||||
else if (typeof mql.addListener === 'function') mql.addListener(onMql);
|
||||
// Respond to OS changes only when not user-forced
|
||||
var onMql = function () {
|
||||
if (!getStored()) applyTheme(systemTheme());
|
||||
};
|
||||
if (typeof mql.addEventListener === 'function') mql.addEventListener('change', onMql);
|
||||
else if (typeof mql.addListener === 'function') mql.addListener(onMql);
|
||||
|
||||
// Initial state
|
||||
var initial = getStored() || systemTheme();
|
||||
switchWrap.setAttribute('aria-checked', initial === 'dark' ? 'true' : 'false');
|
||||
// Initial state
|
||||
var initial = getStored() || systemTheme();
|
||||
switchWrap.setAttribute('aria-checked', initial === 'dark' ? 'true' : 'false');
|
||||
|
||||
// Mount
|
||||
wrap.appendChild(lblL);
|
||||
wrap.appendChild(switchWrap);
|
||||
wrap.appendChild(lblD);
|
||||
wrap.appendChild(auto);
|
||||
document.body.appendChild(wrap);
|
||||
// Mount
|
||||
wrap.appendChild(lblL);
|
||||
wrap.appendChild(switchWrap);
|
||||
wrap.appendChild(lblD);
|
||||
wrap.appendChild(auto);
|
||||
document.body.appendChild(wrap);
|
||||
|
||||
// Debug helper
|
||||
window.mokoThemeFabStatus = function () {
|
||||
var el = document.getElementById('mokoThemeFab');
|
||||
if (!el) return { mounted: false };
|
||||
var r = el.getBoundingClientRect();
|
||||
return {
|
||||
mounted: true,
|
||||
rect: { top: r.top, left: r.left, width: r.width, height: r.height },
|
||||
zIndex: window.getComputedStyle(el).zIndex,
|
||||
posClass: el.className
|
||||
};
|
||||
};
|
||||
// Debug helper
|
||||
window.mokoThemeFabStatus = function () {
|
||||
var el = document.getElementById('mokoThemeFab');
|
||||
if (!el) return { mounted: false };
|
||||
var r = el.getBoundingClientRect();
|
||||
return {
|
||||
mounted: true,
|
||||
rect: { top: r.top, left: r.left, width: r.width, height: r.height },
|
||||
zIndex: window.getComputedStyle(el).zIndex,
|
||||
posClass: el.className
|
||||
};
|
||||
};
|
||||
|
||||
// Outline if invisible
|
||||
setTimeout(function () {
|
||||
var r = wrap.getBoundingClientRect();
|
||||
if (r.width < 10 || r.height < 10) {
|
||||
wrap.classList.add('debug-outline');
|
||||
console.warn('[moko] Theme FAB mounted but appears too small — check CSS collisions.');
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
// Outline if invisible
|
||||
setTimeout(function () {
|
||||
var r = wrap.getBoundingClientRect();
|
||||
if (r.width < 10 || r.height < 10) {
|
||||
wrap.classList.add('debug-outline');
|
||||
console.warn('[moko] Theme FAB mounted but appears too small — check CSS collisions.');
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function init() {
|
||||
initTheme();
|
||||
buildToggle();
|
||||
}
|
||||
function init() {
|
||||
initTheme();
|
||||
buildToggle();
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
|
||||
@@ -0,0 +1,347 @@
|
||||
/*
|
||||
=========================================================================
|
||||
Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
This file is part of a Moko Consulting project.
|
||||
SPDX-License-Identifier: GPL-3.0-or-later
|
||||
|
||||
This program is free software; you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation; either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see https://www.gnu.org/licenses/ .
|
||||
=========================================================================
|
||||
FILE INFORMATION
|
||||
DEFGROUP: Joomla Template
|
||||
FILE: media/templates/site/moko-cassiopeia/js/gtm.js
|
||||
HEADER VERSION: 1.0
|
||||
VERSION: 2.0
|
||||
BRIEF: Safe, configurable Google Tag Manager loader for Moko-Cassiopeia.
|
||||
PATH: media/templates/site/moko-cassiopeia/js/gtm.js
|
||||
NOTE: Place the <noscript> fallback iframe in your HTML template (index.php). A JS file
|
||||
cannot provide a true no-JS fallback by definition.
|
||||
VARIABLES:
|
||||
- window.MOKO_GTM_ID (string) // Optional global GTM container ID (e.g., "GTM-XXXXXXX")
|
||||
- window.MOKO_GTM_OPTIONS (object) // Optional global options (see JSDoc below)
|
||||
- data- attributes on the script tag or <html>/<body>:
|
||||
data-gtm-id, data-data-layer, data-debug, data-ignore-dnt,
|
||||
data-env-auth, data-env-preview, data-block-on-dev
|
||||
=========================================================================
|
||||
*/
|
||||
|
||||
/* global window, document, navigator */
|
||||
(() => {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* @typedef {Object} MokoGtmOptions
|
||||
* @property {string} [id] GTM container ID (e.g., "GTM-XXXXXXX")
|
||||
* @property {string} [dataLayerName] Custom dataLayer name (default: "dataLayer")
|
||||
* @property {boolean} [debug] Log debug messages to console (default: false)
|
||||
* @property {boolean} [ignoreDNT] Ignore Do Not Track and always load (default: false)
|
||||
* @property {boolean} [blockOnDev] Block loading on localhost/*.test/127.0.0.1 (default: true)
|
||||
* @property {string} [envAuth] GTM Environment auth string (optional)
|
||||
* @property {string} [envPreview] GTM Environment preview name (optional)
|
||||
* @property {Record<string,'granted'|'denied'>} [consentDefault]
|
||||
* Default Consent Mode v2 map. Keys like:
|
||||
* analytics_storage, ad_storage, ad_user_data, ad_personalization, functionality_storage, security_storage
|
||||
* (default: {analytics_storage:'granted', functionality_storage:'granted', security_storage:'granted'})
|
||||
* @property {() => (Record<string, any>|void)} [pageVars]
|
||||
* Function returning extra page variables to push on init (optional)
|
||||
*/
|
||||
|
||||
const PKG = "moko-gtm";
|
||||
const PREFIX = `[${PKG}]`;
|
||||
const WIN = window;
|
||||
|
||||
// Public API placeholder (attached to window at the end)
|
||||
/** @type {{
|
||||
* init: (opts?: Partial<MokoGtmOptions>) => void,
|
||||
* setConsent: (updates: Record<string,'granted'|'denied'>) => void,
|
||||
* push: (...args:any[]) => void,
|
||||
* isLoaded: () => boolean,
|
||||
* config: () => Required<MokoGtmOptions>
|
||||
* }} */
|
||||
const API = {};
|
||||
|
||||
// ---- Utilities ---------------------------------------------------------
|
||||
|
||||
const isDevHost = () => {
|
||||
const h = WIN.location && WIN.location.hostname || "";
|
||||
return (
|
||||
h === "localhost" ||
|
||||
h === "127.0.0.1" ||
|
||||
h.endsWith(".local") ||
|
||||
h.endsWith(".test")
|
||||
);
|
||||
};
|
||||
|
||||
const dntEnabled = () => {
|
||||
// Different browsers expose DNT differently; treat "1" or "yes" as enabled.
|
||||
const n = navigator;
|
||||
const v = (n.doNotTrack || n.msDoNotTrack || (n.navigator && n.navigator.doNotTrack) || "").toString().toLowerCase();
|
||||
return v === "1" || v === "yes";
|
||||
};
|
||||
|
||||
const getCurrentScript = () => {
|
||||
// document.currentScript is best; fallback to last <script> whose src ends with /gtm.js
|
||||
const cs = document.currentScript;
|
||||
if (cs) return cs;
|
||||
const scripts = Array.from(document.getElementsByTagName("script"));
|
||||
return scripts.reverse().find(s => (s.getAttribute("src") || "").includes("/gtm.js")) || null;
|
||||
};
|
||||
|
||||
const getAttr = (el, name) => el ? el.getAttribute(name) : null;
|
||||
|
||||
const readDatasetCascade = (name) => {
|
||||
// Check <script>, <html>, <body>, then <meta name="moko:gtm-<name>">
|
||||
const script = getCurrentScript();
|
||||
const html = document.documentElement;
|
||||
const body = document.body;
|
||||
const meta = document.querySelector(`meta[name="moko:gtm-${name}"]`);
|
||||
return (
|
||||
(script && script.dataset && script.dataset[name]) ||
|
||||
(html && html.dataset && html.dataset[name]) ||
|
||||
(body && body.dataset && body.dataset[name]) ||
|
||||
(meta && meta.getAttribute("content")) ||
|
||||
null
|
||||
);
|
||||
};
|
||||
|
||||
const parseBool = (v, fallback = false) => {
|
||||
if (v == null) return fallback;
|
||||
const s = String(v).trim().toLowerCase();
|
||||
if (["1","true","yes","y","on"].includes(s)) return true;
|
||||
if (["0","false","no","n","off"].includes(s)) return false;
|
||||
return fallback;
|
||||
};
|
||||
|
||||
const debugLog = (...args) => {
|
||||
if (STATE.debug) {
|
||||
try { console.info(PREFIX, ...args); } catch (_) {}
|
||||
}
|
||||
};
|
||||
|
||||
// ---- Configuration & State --------------------------------------------
|
||||
|
||||
/** @type {Required<MokoGtmOptions>} */
|
||||
const STATE = {
|
||||
id: "",
|
||||
dataLayerName: "dataLayer",
|
||||
debug: false,
|
||||
ignoreDNT: false,
|
||||
blockOnDev: true,
|
||||
envAuth: "",
|
||||
envPreview: "",
|
||||
consentDefault: {
|
||||
analytics_storage: "granted",
|
||||
functionality_storage: "granted",
|
||||
security_storage: "granted",
|
||||
// The following default to "denied" unless the site explicitly opts-in:
|
||||
ad_storage: "denied",
|
||||
ad_user_data: "denied",
|
||||
ad_personalization: "denied",
|
||||
},
|
||||
pageVars: () => ({})
|
||||
};
|
||||
|
||||
const mergeOptions = (base, extra = {}) => {
|
||||
const out = {...base};
|
||||
for (const k in extra) {
|
||||
if (!Object.prototype.hasOwnProperty.call(extra, k)) continue;
|
||||
const v = extra[k];
|
||||
if (v && typeof v === "object" && !Array.isArray(v)) {
|
||||
out[k] = {...(out[k] || {}), ...v};
|
||||
} else if (v !== undefined) {
|
||||
out[k] = v;
|
||||
}
|
||||
}
|
||||
return out;
|
||||
};
|
||||
|
||||
const detectOptions = () => {
|
||||
// 1) Global window options
|
||||
/** @type {Partial<MokoGtmOptions>} */
|
||||
const globalOpts = (WIN.MOKO_GTM_OPTIONS && typeof WIN.MOKO_GTM_OPTIONS === "object") ? WIN.MOKO_GTM_OPTIONS : {};
|
||||
|
||||
// 2) Dataset / meta
|
||||
const idFromData = readDatasetCascade("id") || WIN.MOKO_GTM_ID || "";
|
||||
const dlFromData = readDatasetCascade("dataLayer") || "";
|
||||
const dbgFromData = readDatasetCascade("debug");
|
||||
const dntFromData = readDatasetCascade("ignoreDnt");
|
||||
const devFromData = readDatasetCascade("blockOnDev");
|
||||
const authFromData = readDatasetCascade("envAuth") || "";
|
||||
const prevFromData = readDatasetCascade("envPreview") || "";
|
||||
|
||||
// 3) Combine
|
||||
/** @type {Partial<MokoGtmOptions>} */
|
||||
const detected = {
|
||||
id: idFromData || globalOpts.id || "",
|
||||
dataLayerName: dlFromData || globalOpts.dataLayerName || undefined,
|
||||
debug: parseBool(dbgFromData, !!globalOpts.debug),
|
||||
ignoreDNT: parseBool(dntFromData, !!globalOpts.ignoreDNT),
|
||||
blockOnDev: parseBool(devFromData, (globalOpts.blockOnDev ?? true)),
|
||||
envAuth: authFromData || globalOpts.envAuth || "",
|
||||
envPreview: prevFromData || globalOpts.envPreview || "",
|
||||
consentDefault: globalOpts.consentDefault || undefined,
|
||||
pageVars: typeof globalOpts.pageVars === "function" ? globalOpts.pageVars : undefined
|
||||
};
|
||||
|
||||
return detected;
|
||||
};
|
||||
|
||||
// ---- dataLayer / gtag helpers -----------------------------------------
|
||||
|
||||
const ensureDataLayer = () => {
|
||||
const l = STATE.dataLayerName;
|
||||
WIN[l] = WIN[l] || [];
|
||||
return WIN[l];
|
||||
};
|
||||
|
||||
/** gtag wrapper backed by dataLayer. */
|
||||
const gtag = (...args) => {
|
||||
const dl = ensureDataLayer();
|
||||
dl.push(arguments.length > 1 ? args : args[0]);
|
||||
debugLog("gtag push:", args);
|
||||
};
|
||||
|
||||
API.push = (...args) => gtag(...args);
|
||||
|
||||
API.setConsent = (updates) => {
|
||||
gtag("consent", "update", updates || {});
|
||||
};
|
||||
|
||||
API.isLoaded = () => {
|
||||
const hasScript = !!document.querySelector('script[src*="googletagmanager.com/gtm.js"]');
|
||||
return hasScript;
|
||||
};
|
||||
|
||||
API.config = () => ({...STATE});
|
||||
|
||||
// ---- Loader ------------------------------------------------------------
|
||||
|
||||
const buildEnvQuery = () => {
|
||||
const qp = [];
|
||||
if (STATE.envAuth) qp.push(`gtm_auth=${encodeURIComponent(STATE.envAuth)}`);
|
||||
if (STATE.envPreview) qp.push(`gtm_preview=${encodeURIComponent(STATE.envPreview)}`, "gtm_cookies_win=x");
|
||||
return qp.length ? `&${qp.join("&")}` : "";
|
||||
};
|
||||
|
||||
const injectScript = () => {
|
||||
if (!STATE.id) {
|
||||
debugLog("GTM ID missing; aborting load.");
|
||||
return;
|
||||
}
|
||||
if (API.isLoaded()) {
|
||||
debugLog("GTM already loaded; skipping duplicate injection.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Standard GTM bootstrap timing event
|
||||
const dl = ensureDataLayer();
|
||||
dl.push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
|
||||
|
||||
const f = document.getElementsByTagName("script")[0];
|
||||
const j = document.createElement("script");
|
||||
j.async = true;
|
||||
j.src = `https://www.googletagmanager.com/gtm.js?id=${encodeURIComponent(STATE.id)}${STATE.dataLayerName !== "dataLayer" ? `&l=${encodeURIComponent(STATE.dataLayerName)}` : ""}${buildEnvQuery()}`;
|
||||
if (f && f.parentNode) {
|
||||
f.parentNode.insertBefore(j, f);
|
||||
} else {
|
||||
(document.head || document.documentElement).appendChild(j);
|
||||
}
|
||||
debugLog("Injected GTM script:", j.src);
|
||||
};
|
||||
|
||||
const applyDefaultConsent = () => {
|
||||
// Consent Mode v2 default
|
||||
gtag("consent", "default", STATE.consentDefault);
|
||||
debugLog("Applied default consent:", STATE.consentDefault);
|
||||
};
|
||||
|
||||
const pushInitialVars = () => {
|
||||
// Minimal page vars; allow site to add more via pageVars()
|
||||
const vars = {
|
||||
event: "moko.page_init",
|
||||
page_title: document.title || "",
|
||||
page_language: (document.documentElement && document.documentElement.lang) || "",
|
||||
...(typeof STATE.pageVars === "function" ? (STATE.pageVars() || {}) : {})
|
||||
};
|
||||
gtag(vars);
|
||||
};
|
||||
|
||||
const shouldLoad = () => {
|
||||
if (!STATE.ignoreDNT && dntEnabled()) {
|
||||
debugLog("DNT is enabled; blocking GTM load (set ignoreDNT=true to override).");
|
||||
return false;
|
||||
}
|
||||
if (STATE.blockOnDev && isDevHost()) {
|
||||
debugLog("Development host detected; blocking GTM load (set blockOnDev=false to override).");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
// ---- Public init -------------------------------------------------------
|
||||
|
||||
API.init = (opts = {}) => {
|
||||
// Merge: defaults <- detected <- passed opts
|
||||
const detected = detectOptions();
|
||||
const merged = mergeOptions(STATE, mergeOptions(detected, opts));
|
||||
|
||||
// Commit back to STATE
|
||||
Object.assign(STATE, merged);
|
||||
|
||||
debugLog("Config:", STATE);
|
||||
|
||||
// Prepare dataLayer/gtag and consent
|
||||
ensureDataLayer();
|
||||
applyDefaultConsent();
|
||||
pushInitialVars();
|
||||
|
||||
// Load GTM if allowed
|
||||
if (shouldLoad()) {
|
||||
injectScript();
|
||||
} else {
|
||||
debugLog("GTM load prevented by configuration or environment.");
|
||||
}
|
||||
};
|
||||
|
||||
// ---- Auto-init on DOMContentLoaded (safe even if deferred) -------------
|
||||
|
||||
const autoInit = () => {
|
||||
// Only auto-init if we have some ID from globals/datasets.
|
||||
const detected = detectOptions();
|
||||
const hasId = !!(detected.id || WIN.MOKO_GTM_ID);
|
||||
if (hasId) {
|
||||
API.init(); // use detected/global defaults
|
||||
} else {
|
||||
debugLog("No GTM ID detected; awaiting manual init via window.mokoGTM.init({ id: 'GTM-XXXXXXX' }).");
|
||||
}
|
||||
};
|
||||
|
||||
if (document.readyState === "complete" || document.readyState === "interactive") {
|
||||
// Defer to ensure <body> exists for any late consumers.
|
||||
setTimeout(autoInit, 0);
|
||||
} else {
|
||||
document.addEventListener("DOMContentLoaded", autoInit, { once: true });
|
||||
}
|
||||
|
||||
// Expose API
|
||||
WIN.mokoGTM = API;
|
||||
|
||||
// Helpful console hint (only if debug true after detection)
|
||||
try {
|
||||
const detected = detectOptions();
|
||||
if (parseBool(detected.debug, false)) {
|
||||
STATE.debug = true;
|
||||
debugLog("Ready. You can call window.mokoGTM.init({ id: 'GTM-XXXXXXX' }).");
|
||||
}
|
||||
} catch (_) {}
|
||||
})();
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
/**
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.Moko-Cassiopeia
|
||||
* @file /media/templates/site/moko-cassiopeia/js/mod_gabble.js
|
||||
* @copyright (C) 2025 Jonathan Miler || Moko Consulting <https://mokoconsulting.tech>
|
||||
* @website: https://mokoconsulting.tech
|
||||
* @email: hello@mokoconsulting.tech
|
||||
* @phone: +1 (931) 279-6313
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
* @note This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
|
||||
*/
|
||||
@@ -1,118 +0,0 @@
|
||||
<!--
|
||||
* Copyright (C) 2025 Moko Consulting <jmiller@mokoconsulting.tech>
|
||||
*
|
||||
* This file is part of a Moko Consulting project.
|
||||
*
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<!--FILE INFORMATION
|
||||
* DEFGROUP: Joomla.Site
|
||||
* INGROUP: Templates.Moko-Cassiopeia
|
||||
* FILE: index.html
|
||||
* BRIEF: Security redirect page to block folder access and forward to site root.
|
||||
-->
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Redirecting…</title>
|
||||
|
||||
<!-- Search engines: do not index this placeholder redirect page -->
|
||||
<meta name="robots" content="noindex, nofollow, noarchive" />
|
||||
|
||||
<!-- Instant redirect fallback even if JavaScript is disabled -->
|
||||
<meta http-equiv="refresh" content="0; url=/" />
|
||||
|
||||
<!-- Canonical root reference -->
|
||||
<link rel="canonical" href="/" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<script>
|
||||
/**
|
||||
* @defgroup Dolibarr
|
||||
* @file index.html (embedded script)
|
||||
* @version 1.0.0
|
||||
* @brief Security redirect logic. Replaces the current history entry with the site root.
|
||||
* @details This script computes the absolute root URL using `location.origin` and
|
||||
* forwards the user immediately. It prevents leaving the protected folder
|
||||
* in the browser history by default.
|
||||
*
|
||||
* @section VARIABLES
|
||||
* @var {Object} opts Configuration options for the redirect behavior.
|
||||
* @var {string} opts.fallbackPath Path used when `location.origin` cannot be determined.
|
||||
* @var {number} opts.delayMs Optional delay in milliseconds before redirecting.
|
||||
* @var {"replace"|"assign"} opts.behavior Navigation method used for the redirect.
|
||||
*
|
||||
* @section OPTIONS
|
||||
* - opts.fallbackPath: default "/" (root path)
|
||||
* - opts.delayMs: default 0 (immediate)
|
||||
* - opts.behavior: one of
|
||||
* * "replace" — calls `location.replace(url)`; does not keep the folder page in history.
|
||||
* * "assign" — calls `location.assign(url)`; keeps an extra history entry.
|
||||
*/
|
||||
(function redirectToRoot() {
|
||||
// Configuration object with safe defaults.
|
||||
var opts = {
|
||||
fallbackPath: "/", // string: fallback destination if origin is unavailable
|
||||
delayMs: 0, // number: delay before redirect in ms (0 = immediate)
|
||||
behavior: "replace" // enum: "replace" | "assign"
|
||||
};
|
||||
|
||||
// Determine absolute origin in all mainstream browsers.
|
||||
var origin = (typeof location.origin === "string" && location.origin)
|
||||
|| (location.protocol + "//" + location.host);
|
||||
|
||||
// Final destination: absolute root of the current site, or fallback path.
|
||||
var destination = origin ? origin + "/" : opts.fallbackPath;
|
||||
|
||||
function go() {
|
||||
if (opts.behavior === "assign") {
|
||||
location.assign(destination);
|
||||
} else {
|
||||
location.replace(destination);
|
||||
}
|
||||
}
|
||||
|
||||
// Execute redirect, optionally after a short delay.
|
||||
if (opts.delayMs > 0) {
|
||||
setTimeout(go, opts.delayMs);
|
||||
} else {
|
||||
go();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--
|
||||
Secondary meta-refresh for no-JS environments is already set above.
|
||||
Some very old crawlers may ignore JS; the meta refresh ensures coverage.
|
||||
-->
|
||||
|
||||
<noscript>
|
||||
<!-- Extra defense-in-depth: if JS is disabled, meta refresh (above) handles redirect. -->
|
||||
<style>
|
||||
html, body { height:100%; }
|
||||
body { display:flex; align-items:center; justify-content:center; margin:0; font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
|
||||
.msg { opacity: .75; text-align: center; }
|
||||
</style>
|
||||
</noscript>
|
||||
</head>
|
||||
<body>
|
||||
<div class="msg">Redirecting to the site root… If you are not redirected, <a href="/">click here</a>.</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,13 +1,30 @@
|
||||
/**
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.Moko-Cassiopeia
|
||||
* @file /media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu-es5.js
|
||||
* @copyright (C) 2025 Jonathan Miler || Moko Consulting <https://mokoconsulting.tech>
|
||||
* @website: https://mokoconsulting.tech
|
||||
* @email: hello@mokoconsulting.tech
|
||||
* @phone: +1 (931) 279-6313
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
* @note This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* This file is part of a Moko Consulting project.
|
||||
*
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see https://www.gnu.org/licenses/ .
|
||||
* =========================================================================
|
||||
* FILE INFORMATION
|
||||
* DEFGROUP: Joomla
|
||||
* INGROUP: Moko-Cassiopeia
|
||||
* PATH: media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu-es5.js
|
||||
* VERSION: 02.00
|
||||
* BRIEF: ES5-compatible MetisMenu script for Joomla mod_menu in Moko-Cassiopeia
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
(function () {
|
||||
|
||||
@@ -1,13 +1,30 @@
|
||||
/**
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.Moko-Cassiopeia
|
||||
* @file /media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu.js
|
||||
* @copyright (C) 2025 Jonathan Miler || Moko Consulting <https://mokoconsulting.tech>
|
||||
* @website: https://mokoconsulting.tech
|
||||
* @email: hello@mokoconsulting.tech
|
||||
* @phone: +1 (931) 279-6313
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
* @note This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* This file is part of a Moko Consulting project.
|
||||
*
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see https://www.gnu.org/licenses/ .
|
||||
* =========================================================================
|
||||
* FILE INFORMATION
|
||||
* DEFGROUP: Joomla
|
||||
* INGROUP: Moko-Cassiopeia
|
||||
* PATH: media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu.js
|
||||
* VERSION: 02.00
|
||||
* BRIEF: Modern MetisMenu script for Joomla mod_menu in Moko-Cassiopeia
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
@@ -1,25 +1,14 @@
|
||||
/**
|
||||
* template.js — Custom JavaScript for the Moko Cassiopeia Joomla template
|
||||
*
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.Moko-Cassiopeia
|
||||
* @file /media/templates/site/moko-cassiopeia/js/template.js
|
||||
* @version 2.0
|
||||
*
|
||||
* @copyright (C) 2025 Moko Consulting
|
||||
* @author Jonathan Miller
|
||||
* @website https://mokoconsulting.tech
|
||||
* @email hello@mokoconsulting.tech
|
||||
* @phone +1 (931) 279-6313
|
||||
*
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* This file is part of a Moko Consulting project.
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify it
|
||||
* under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or (at
|
||||
* your option) any later version.
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
@@ -27,7 +16,15 @@
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
* along with this program. If not, see https://www.gnu.org/licenses/ .
|
||||
* =========================================================================
|
||||
* FILE INFORMATION
|
||||
* DEFGROUP: Joomla
|
||||
* INGROUP: Moko-Cassiopeia
|
||||
* PATH: media/templates/site/moko-cassiopeia/js/template.js
|
||||
* VERSION: 02.00
|
||||
* BRIEF: Core JavaScript utilities and behaviors for Moko-Cassiopeia template
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
(function (win, doc) {
|
||||
|
||||
@@ -1,25 +1,14 @@
|
||||
/**
|
||||
* theme-init.js — Light/Dark mode initialization for Moko Cassiopeia
|
||||
*
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.Moko-Cassiopeia
|
||||
* @file /media/templates/site/moko-cassiopeia/js/theme-init.js
|
||||
* @version 2.0
|
||||
*
|
||||
* @copyright (C) 2025 Moko Consulting
|
||||
* @author Jonathan Miller
|
||||
* @website https://mokoconsulting.tech
|
||||
* @email hello@mokoconsulting.tech
|
||||
* @phone +1 (931) 279-6313
|
||||
*
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* This file is part of a Moko Consulting project.
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify it
|
||||
* under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3 of the License, or (at
|
||||
* your option) any later version.
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
@@ -27,7 +16,15 @@
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
* along with this program. If not, see https://www.gnu.org/licenses/ .
|
||||
* =========================================================================
|
||||
* FILE INFORMATION
|
||||
* DEFGROUP: Joomla
|
||||
* INGROUP: Moko-Cassiopeia
|
||||
* PATH: media/templates/site/moko-cassiopeia/js/theme-init.js
|
||||
* VERSION: 02.00
|
||||
* BRIEF: Initialization script for Moko-Cassiopeia theme features and behaviors
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
(function (win, doc) {
|
||||
|
||||
@@ -1,25 +1,14 @@
|
||||
/**
|
||||
* user.js — User Custom JS File for Moko Cassiopeia
|
||||
*
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.Moko-Cassiopeia
|
||||
* @file /media/templates/site/moko-cassiopeia/js/user.js
|
||||
* @version 2.0
|
||||
*
|
||||
* @copyright (C) 2025 Moko Consulting
|
||||
* @author Jonathan Miller
|
||||
* @website https://mokoconsulting.tech
|
||||
* @email hello@mokoconsulting.tech
|
||||
* @phone +1 (931) 279-6313
|
||||
*
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
/* =========================================================================
|
||||
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
*
|
||||
* This file is part of a Moko Consulting project.
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify it
|
||||
* under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3 of the License, or (at
|
||||
* your option) any later version.
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
@@ -27,5 +16,13 @@
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
* along with this program. If not, see https://www.gnu.org/licenses/ .
|
||||
* =========================================================================
|
||||
* FILE INFORMATION
|
||||
* DEFGROUP: Joomla
|
||||
* INGROUP: Moko-Cassiopeia
|
||||
* PATH: media/templates/site/moko-cassiopeia/js/user.js
|
||||
* VERSION: 02.00
|
||||
* BRIEF: JavaScript for handling user-specific interactions in Moko-Cassiopeia template
|
||||
* =========================================================================
|
||||
*/
|
||||
|
||||
254
readme.md
254
readme.md
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user