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

02.00

Browse Source 
**Major Release** — introduces the long-awaited **Dark Mode Toggle**, streamlining accessibility and usability enhancements.

##Added

* **Dark Mode Toggle**

	* Frontend toggle switch included in template.
	* JavaScript handles switching between light/dark modes.
	* Dark mode CSS rules applied across template styles.
	* Automatic persistence of user choice (via localStorage).

* **Header Parameters Update**

	* Added **logo parameter support** in template settings.
	* Updated metadata & copyright header.

* **Expanded TOC (Table of Contents)**

	* Automatic TOC injection when enabled.
	* User selects placement via article > options > layout (`toc-left` or `toc-right`).

##Improved

* Cleaned up `index.php` by removing **skip-to-content** duplicate calls.
* Consolidated JavaScript asset loading (ensuring dark-mode script is loaded correctly from external JS file).
* Streamlined CSS for **toggle switch**, ensuring it inherits Bootstrap/Cassiopeia defaults.
* General accessibility refinements in typography and color contrast.

##Fixed

* Fixed missing **logo param** in header output.
* Corrected stylesheet inconsistencies between Bootstrap 5 helpers and template overrides.
* Patched redundant calls in script includes.
This commit is contained in:
Jonathan Miller
2025-08-30 18:41:15 -05:00
parent d6f84ebb46
commit bee7796645
47 changed files with 2915 additions and 3124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,33 @@
@charset "UTF-8";
/* =========================================================================
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
*
* This file is part of a Moko Consulting project.
*
* SPDX-License-Identifier: GPL-3.0-or-later
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see https://www.gnu.org/licenses/ .
* =========================================================================
* FILE INFORMATION
* DEFGROUP: Joomla
* INGROUP: Moko-Cassiopeia
* PATH: media/templates/site/moko-cassiopeia/css/editor.css
* VERSION: 02.00
* BRIEF: Stylesheet for Joomla editor content within Moko-Cassiopeia template
* =========================================================================
*/
/* STYLES FOR JOOMLA! EDITOR */
body {
font-size: 1rem;

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

@@ -1,3 +1,33 @@
@charset "UTF-8";
/* =========================================================================
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
*
* This file is part of a Moko Consulting project.
*
* SPDX-License-Identifier: GPL-3.0-or-later
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see https://www.gnu.org/licenses/ .
* =========================================================================
* FILE INFORMATION
* DEFGROUP: Joomla
* INGROUP: Moko-Cassiopeia
* PATH: media/templates/site/moko-cassiopeia/css/gable.css
* VERSION: 02.00
* BRIEF: Stylesheet providing gable-specific layout and design rules for Moko-Cassiopeia
* =========================================================================
*/
:root {
--gab-blue: transparent;
--gab-green: #7ac143;

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

@@ -1,551 +0,0 @@
/*!
* @package Joomla.Site
* @subpackage Templates.moko-cassiopeia
* @file /media/templates/sote/moko-cassiopeia/css/global/light/colors_alternative.css
*
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
* @license GNU General Public License version 2 or later; see LICENSE.txt
*
* Website: https://mokoconsulting.tech
* Email: hello@mokoconsulting.tech
* Phone: +1 (931) 279-6313
*/
/* -----------------------------------------------
* LIGHT THEME
* --------------------------------------------- */
:root[data-bs-theme="light"] {
color-scheme: light;
--color-primary: #112855;
--accent-color-primary: #3f8ff0;
--accent-color-secondary: #3f8ff0;
--mainmenu-nav-link-color: white;
--color-link: #224FAA;
--color-hover: var(--accent-color-primary);
--header-background-image: url('../../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg');
--header-background-attachment: fixed;
--header-background-repeat: repeat;
--header-background-size: auto;
--container-below-topbar-bg-image: ;
--container-below-topbar-bg-color ;
--container-below-topbar-bg-position: auto;
--container-below-topbar-bg-attachment: fixed;
--container-below-topbar-bg-repeat: repeat;
--container-below-topbar-bg-size: auto;
--container-below-topbar-border: ;
--container-below-topbar-border-radius: ;
--container-top-a-bg-image: ;
--container-top-a-bg-color: ;
--container-top-a-bg-position: auto;
--container-top-a-bg-attachment: fixed;
--container-top-a-bg-repeat: repeat;
--container-top-a-bg-size: auto;
--container-top-a-border: ;
--container-top-a-border-radius: ;
--container-top-b-bg-image: ;
--container-top-b-bg-color: ;
--container-top-b-bg-position: auto;
--container-top-b-bg-attachment: fixed;
--container-top-b-bg-repeat: repeat;
--container-top-b-bg-size: auto;
--container-top-b-border: ;
--container-top-b-border-radius: ;
--container-toc-bg: var(--mainmenu-nav-link-color);
--container-toc-color: var(--color-primary);
--container-sidebar-bg-image: ;
--container-sidebar-bg-color: ;
--container-sidebar-bg-position: auto;
--container-sidebar-bg-attachment: scroll;
--container-sidebar-bg-repeat: repeat;
--container-sidebar-bg-size: auto;
--container-sidebar-border: ;
--container-sidebar-border-radius: ;
--container-bottom-a-bg-image: ;
--container-bottom-a-bg-color: ;
--container-bottom-a-bg-position: auto;
--container-bottom-a-bg-attachment: fixed;
--container-bottom-a-bg-repeat: repeat;
--container-bottom-a-bg-size: auto;
--container-bottom-a-border: ;
--container-bottom-a-border-radius: ;
--container-bottom-b-bg-image: ;
--container-bottom-b-bg-color: ;
--container-bottom-b-bg-position: auto;
--container-bottom-b-bg-attachment: fixed;
--container-bottom-b-bg-repeat: repeat;
--container-bottom-b-bg-size: auto;
--container-bottom-b-border: ;
--container-bottom-b-border-radius: ;
--nav-text-color: var(--mainmenu-nav-link-color);
--nav-bg-color: var(--color-link);
--border: 5px;
--muted-color: #6d757e;
--hr-color: var(--border-color, #dfe3e7);
--link-active-color: var(--link-color);
--code-color-ink: var(--code-color, #e93f8e);
--border-color-soft: var(--border-color, #dfe3e7);
--kbd-bg: var(--secondary-bg, #eaedf0);
--kbd-ink: var(--body-bg, #fff);
--toc-bg: var(--secondary-bg, #eaedf0);
--toc-ink: var(--color-primary, #112855);
--selection-bg: var(--highlight-bg, #fbeea8);
--selection-ink: var(--body-color, #22262a);
--blue: #010156;
--black: #000;
--indigo: #6812f3;
--purple: #6f42c2;
--pink: #e93f8e;
--red: #a51f18;
--orange: #fd7e17;
--yellow: #ad6200;
--green: #448344;
--teal: #5abfdd;
--cyan: #30638d;
--white: #fff;
--gray-100: #f9fafb;
--gray-200: #eaedf0;
--gray-300: #dfe3e7;
--gray-400: #ced4da;
--gray-500: #adb5bd;
--gray-600: #6d757e;
--gray-700: #484f56;
--gray-800: #353b41;
--gray-900: #22262a;
--primary: #010156;
--secondary: #6d757e;
--success: #448344;
--info: #30638d;
--warning: #ad6200;
--danger: #a51f18;
--light: #f9fafb;
--dark: #353b41;
--primary-rgb: 1, 1, 86;
--secondary-rgb: 109, 117, 126;
--success-rgb: 68, 131, 68;
--info-rgb: 48, 99, 141;
--warning-rgb: 173, 98, 0;
--danger-rgb: 165, 31, 24;
--light-rgb: 249, 250, 251;
--dark-rgb: 53, 59, 65;
--primary-text-emphasis: #002;
--secondary-text-emphasis: #2c2f32;
--success-text-emphasis: #1b351b;
--info-text-emphasis: #132838;
--warning-text-emphasis: #452700;
--danger-text-emphasis: #420c09;
--light-text-emphasis: #484f56;
--dark-text-emphasis: #484f56;
--primary-bg-subtle: #ccd;
--secondary-bg-subtle: #e2e3e5;
--success-bg-subtle: #dae6da;
--info-bg-subtle: #d6e0e8;
--warning-bg-subtle: #efe0cc;
--danger-bg-subtle: #edd2d1;
--light-bg-subtle: #fcfcfd;
--dark-bg-subtle: #ced4da;
--primary-border-subtle: #99b;
--secondary-border-subtle: #c5c8cb;
--success-border-subtle: #b4ceb4;
--info-border-subtle: #acc1d1;
--warning-border-subtle: #dec099;
--danger-border-subtle: #dba5a2;
--light-border-subtle: #eaedf0;
--dark-border-subtle: #adb5bd;
--white-rgb: 255, 255, 255;
--black-rgb: 0, 0, 0;
--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--gradient: linear-gradient(180deg, #ffffff26, #fff0);
--body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
--body-font-size: 1rem;
--body-font-weight: 400;
--body-line-height: 1.5;
--body-color: #22262a;
--body-color-rgb: 34, 38, 42;
--body-bg: #fff;
--body-bg-rgb: 255, 255, 255;
--emphasis-color: #000;
--emphasis-color-rgb: 0, 0, 0;
--secondary-color: #22262abf;
--secondary-color-rgb: 34, 38, 42;
--secondary-bg: #eaedf0;
--secondary-bg-rgb: 234, 237, 240;
--tertiary-color: #22262a80;
--tertiary-color-rgb: 34, 38, 42;
--tertiary-bg: #f9fafb;
--tertiary-bg-rgb: 249, 250, 251;
--heading-color: inherit;
--link-color: #224faa;
--link-color-rgb: 34, 79, 170;
--link-decoration: underline;
--link-hover-color: #424077;
--link-hover-color-rgb: 66, 64, 119;
--code-color: #e93f8e;
--highlight-color: #22262a;
--highlight-bg: #fbeea8;
--border-width: 1px;
--border-style: solid;
--border-color: #dfe3e7;
--border-color-translucent: #0000002d;
--border-radius: .25rem;
--border-radius-sm: .2rem;
--border-radius-lg: .3rem;
--border-radius-xl: .3rem;
--border-radius-xxl: 2rem;
--border-radius-2xl: var(--border-radius-xxl)*2;
--border-radius-pill: 50rem;
--box-shadow: 0 .5rem 1rem #00000026;
--box-shadow-sm: 0 .125rem .25rem #00000013;
--box-shadow-lg: 0 1rem 3rem #0000002d;
--box-shadow-inset: inset 0 1px 2px #00000013;
--focus-ring-width: .25rem;
--focus-ring-opacity: .25;
--focus-ring-color: #01015640;
--form-valid-color: #448344;
--form-valid-border-color: #448344;
--form-invalid-color: #a51f18;
--form-invalid-border-color: #a51f18;
}
.btn {
--btn-padding-x: 1rem;
--btn-padding-y: 0.6rem;
--btn-font-family: ;
--btn-font-size: 1rem;
--btn-font-weight: 400;
--btn-line-height: 1.5;
--btn-color: hsl(210, 11%, 15%);
--btn-bg: transparent;
--btn-border-width: 1px;
--btn-border-color: transparent;
--btn-border-radius: 0.25rem;
--btn-active-border-color: transparent;
--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
--btn-disabled-opacity: 0.65;
--btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5);
display: inline-block;
padding: var(--btn-padding-y) var(--btn-padding-x);
font-family: var(--btn-font-family);
font-size: var(--btn-font-size);
font-weight: var(--btn-font-weight);
line-height: var(--btn-line-height);
color: var(--btn-color);
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: var(--btn-border-width) solid var(--btn-border-color);
border-radius: var(--btn-border-radius);
background-color: var(--btn-bg);
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
-o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.btn-primary {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(240, 98%, 17%);
--btn-border-color: hsl(240, 98%, 17%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #010149;
--btn-hover-border-color: #010145;
--btn-focus-shadow-rgb: 39, 39, 111;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #010145;
--btn-active-border-color: #010141;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(240, 98%, 17%);
--btn-disabled-border-color: hsl(240, 98%, 17%);
}
.btn-secondary {
--btn-color: --nav-text-color;
--btn-bg: --nav-bg-color;
--btn-border-color: hsl(210, 7%, 46%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #5d636b;
--btn-hover-border-color: #575e65;
--btn-focus-shadow-rgb: gray;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #575e65;
--btn-active-border-color: #52585f;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(210, 7%, 46%);
--btn-disabled-border-color: hsl(210, 7%, 46%);
}
.btn-success {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(120, 32%, 39%);
--btn-border-color: hsl(120, 32%, 39%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #3a6f3a;
--btn-hover-border-color: #366936;
--btn-focus-shadow-rgb: 96, 150, 96;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #366936;
--btn-active-border-color: #336233;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(120, 32%, 39%);
--btn-disabled-border-color: hsl(120, 32%, 39%);
}
.btn-info {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(207, 49%, 37%);
--btn-border-color: hsl(207, 49%, 37%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #295478;
--btn-hover-border-color: #264f71;
--btn-focus-shadow-rgb: 79, 122, 158;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #264f71;
--btn-active-border-color: #244a6a;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(207, 49%, 37%);
--btn-disabled-border-color: hsl(207, 49%, 37%);
}
.btn-warning {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(34, 100%, 34%);
--btn-border-color: hsl(34, 100%, 34%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #935300;
--btn-hover-border-color: #8a4e00;
--btn-focus-shadow-rgb: 185, 122, 38;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #8a4e00;
--btn-active-border-color: #824a00;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(34, 100%, 34%);
--btn-disabled-border-color: hsl(34, 100%, 34%);
}
.btn-danger {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(3, 75%, 37%);
--btn-border-color: hsl(3, 75%, 37%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #8c1a14;
--btn-hover-border-color: #841913;
--btn-focus-shadow-rgb: 179, 65, 59;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #841913;
--btn-active-border-color: #7c1712;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(3, 75%, 37%);
--btn-disabled-border-color: hsl(3, 75%, 37%);
}
.btn-light {
--btn-color: hsl(0, 0%, 0%);
--btn-bg: hsl(210, 17%, 98%);
--btn-border-color: hsl(210, 17%, 98%);
--btn-hover-color: hsl(0, 0%, 0%);
--btn-hover-bg: #d4d5d5;
--btn-hover-border-color: #c7c8c9;
--btn-focus-shadow-rgb: 212, 213, 213;
--btn-active-color: hsl(0, 0%, 0%);
--btn-active-bg: #c7c8c9;
--btn-active-border-color: #bbbcbc;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 0%);
--btn-disabled-bg: hsl(210, 17%, 98%);
--btn-disabled-border-color: hsl(210, 17%, 98%);
}
.btn-dark {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(210, 10%, 23%);
--btn-border-color: hsl(210, 10%, 23%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #53585e;
--btn-hover-border-color: #494f54;
--btn-focus-shadow-rgb: 83, 88, 94;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #5d6267;
--btn-active-border-color: #494f54;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(210, 10%, 23%);
--btn-disabled-border-color: hsl(210, 10%, 23%);
}
.btn-outline-primary {
--btn-color: hsl(240, 98%, 17%);
--btn-border-color: hsl(240, 98%, 17%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(240, 98%, 17%);
--btn-hover-border-color: hsl(240, 98%, 17%);
--btn-focus-shadow-rgb: 1, 1, 86;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(240, 98%, 17%);
--btn-active-border-color: hsl(240, 98%, 17%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(240, 98%, 17%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(240, 98%, 17%);
--gradient: none;
}
.btn-outline-secondary {
--btn-color: hsl(210, 7%, 46%);
--btn-border-color: hsl(210, 7%, 46%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(210, 7%, 46%);
--btn-hover-border-color: hsl(210, 7%, 46%);
--btn-focus-shadow-rgb: 109, 117, 126;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(210, 7%, 46%);
--btn-active-border-color: hsl(210, 7%, 46%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(210, 7%, 46%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(210, 7%, 46%);
--gradient: none;
}
.btn-outline-success {
--btn-color: hsl(120, 32%, 39%);
--btn-border-color: hsl(120, 32%, 39%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(120, 32%, 39%);
--btn-hover-border-color: hsl(120, 32%, 39%);
--btn-focus-shadow-rgb: 68, 131, 68;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(120, 32%, 39%);
--btn-active-border-color: hsl(120, 32%, 39%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(120, 32%, 39%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(120, 32%, 39%);
--gradient: none;
}
.btn-outline-info {
--btn-color: hsl(207, 49%, 37%);
--btn-border-color: hsl(207, 49%, 37%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(207, 49%, 37%);
--btn-hover-border-color: hsl(207, 49%, 37%);
--btn-focus-shadow-rgb: 48, 99, 141;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(207, 49%, 37%);
--btn-active-border-color: hsl(207, 49%, 37%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(207, 49%, 37%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(207, 49%, 37%);
--gradient: none;
}
.btn-outline-warning {
--btn-color: hsl(34, 100%, 34%);
--btn-border-color: hsl(34, 100%, 34%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(34, 100%, 34%);
--btn-hover-border-color: hsl(34, 100%, 34%);
--btn-focus-shadow-rgb: 173, 98, 0;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(34, 100%, 34%);
--btn-active-border-color: hsl(34, 100%, 34%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(34, 100%, 34%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(34, 100%, 34%);
--gradient: none;
}
.btn-outline-danger {
--btn-color: hsl(3, 75%, 37%);
--btn-border-color: hsl(3, 75%, 37%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(3, 75%, 37%);
--btn-hover-border-color: hsl(3, 75%, 37%);
--btn-focus-shadow-rgb: 165, 31, 24;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(3, 75%, 37%);
--btn-active-border-color: hsl(3, 75%, 37%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(3, 75%, 37%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(3, 75%, 37%);
--gradient: none;
}
.btn-outline-light {
--btn-color: hsl(210, 17%, 98%);
--btn-border-color: hsl(210, 17%, 98%);
--btn-hover-color: hsl(0, 0%, 0%);
--btn-hover-bg: hsl(210, 17%, 98%);
--btn-hover-border-color: hsl(210, 17%, 98%);
--btn-focus-shadow-rgb: 249, 250, 251;
--btn-active-color: hsl(0, 0%, 0%);
--btn-active-bg: hsl(210, 17%, 98%);
--btn-active-border-color: hsl(210, 17%, 98%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(210, 17%, 98%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(210, 17%, 98%);
--gradient: none;
}
.btn-outline-dark {
--btn-color: hsl(210, 10%, 23%);
--btn-border-color: hsl(210, 10%, 23%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(210, 10%, 23%);
--btn-hover-border-color: hsl(210, 10%, 23%);
--btn-focus-shadow-rgb: 53, 59, 65;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(210, 10%, 23%);
--btn-active-border-color: hsl(210, 10%, 23%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(210, 10%, 23%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(210, 10%, 23%);
--gradient: none;
}
.btn-link {
--btn-font-weight: 400;
--btn-color: var(--link-color);
--btn-bg: transparent;
--btn-border-color: transparent;
--btn-hover-color: var(--link-hover-color);
--btn-hover-border-color: transparent;
--btn-active-color: var(--link-hover-color);
--btn-active-border-color: transparent;
--btn-disabled-color: hsl(210, 7%, 46%);
--btn-disabled-border-color: transparent;
--btn-box-shadow: none;
--btn-focus-shadow-rgb: 39, 39, 111;
text-decoration: underline;
}

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

@@ -1,551 +0,0 @@
/*!
* @package Joomla.Site
* @subpackage Templates.moko-cassiopeia
* @file /media/templates/sote/moko-cassiopeia/css/global/light/colors_standard.css
*
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
* @license GNU General Public License version 2 or later; see LICENSE.txt
*
* Website: https://mokoconsulting.tech
* Email: hello@mokoconsulting.tech
* Phone: +1 (931) 279-6313
*/
/* -----------------------------------------------
* LIGHT THEME
* --------------------------------------------- */
:root[data-bs-theme="light"] {
color-scheme: light;
--color-primary: #112855;
--accent-color-primary: #3f8ff0;
--accent-color-secondary: #3f8ff0;
--mainmenu-nav-link-color: white;
--color-link: #224FAA;
--color-hover: var(--accent-color-primary);
--header-background-image: url('../../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg');
--header-background-attachment: fixed;
--header-background-repeat: repeat;
--header-background-size: auto;
--container-below-topbar-bg-image: ;
--container-below-topbar-bg-color ;
--container-below-topbar-bg-position: auto;
--container-below-topbar-bg-attachment: fixed;
--container-below-topbar-bg-repeat: repeat;
--container-below-topbar-bg-size: auto;
--container-below-topbar-border: ;
--container-below-topbar-border-radius: ;
--container-top-a-bg-image: ;
--container-top-a-bg-color: ;
--container-top-a-bg-position: auto;
--container-top-a-bg-attachment: fixed;
--container-top-a-bg-repeat: repeat;
--container-top-a-bg-size: auto;
--container-top-a-border: ;
--container-top-a-border-radius: ;
--container-top-b-bg-image: ;
--container-top-b-bg-color: ;
--container-top-b-bg-position: auto;
--container-top-b-bg-attachment: fixed;
--container-top-b-bg-repeat: repeat;
--container-top-b-bg-size: auto;
--container-top-b-border: ;
--container-top-b-border-radius: ;
--container-toc-bg: var(--mainmenu-nav-link-color);
--container-toc-color: var(--color-primary);
--container-sidebar-bg-image: ;
--container-sidebar-bg-color: ;
--container-sidebar-bg-position: auto;
--container-sidebar-bg-attachment: scroll;
--container-sidebar-bg-repeat: repeat;
--container-sidebar-bg-size: auto;
--container-sidebar-border: ;
--container-sidebar-border-radius: ;
--container-bottom-a-bg-image: ;
--container-bottom-a-bg-color: ;
--container-bottom-a-bg-position: auto;
--container-bottom-a-bg-attachment: fixed;
--container-bottom-a-bg-repeat: repeat;
--container-bottom-a-bg-size: auto;
--container-bottom-a-border: ;
--container-bottom-a-border-radius: ;
--container-bottom-b-bg-image: ;
--container-bottom-b-bg-color: ;
--container-bottom-b-bg-position: auto;
--container-bottom-b-bg-attachment: fixed;
--container-bottom-b-bg-repeat: repeat;
--container-bottom-b-bg-size: auto;
--container-bottom-b-border: ;
--container-bottom-b-border-radius: ;
--nav-text-color: var(--mainmenu-nav-link-color);
--nav-bg-color: var(--color-link);
--border: 5px;
--muted-color: #6d757e;
--hr-color: var(--border-color, #dfe3e7);
--link-active-color: var(--link-color);
--code-color-ink: var(--code-color, #e93f8e);
--border-color-soft: var(--border-color, #dfe3e7);
--kbd-bg: var(--secondary-bg, #eaedf0);
--kbd-ink: var(--body-bg, #fff);
--toc-bg: var(--secondary-bg, #eaedf0);
--toc-ink: var(--color-primary, #112855);
--selection-bg: var(--highlight-bg, #fbeea8);
--selection-ink: var(--body-color, #22262a);
--blue: #010156;
--black: #000;
--indigo: #6812f3;
--purple: #6f42c2;
--pink: #e93f8e;
--red: #a51f18;
--orange: #fd7e17;
--yellow: #ad6200;
--green: #448344;
--teal: #5abfdd;
--cyan: #30638d;
--white: #fff;
--gray-100: #f9fafb;
--gray-200: #eaedf0;
--gray-300: #dfe3e7;
--gray-400: #ced4da;
--gray-500: #adb5bd;
--gray-600: #6d757e;
--gray-700: #484f56;
--gray-800: #353b41;
--gray-900: #22262a;
--primary: #010156;
--secondary: #6d757e;
--success: #448344;
--info: #30638d;
--warning: #ad6200;
--danger: #a51f18;
--light: #f9fafb;
--dark: #353b41;
--primary-rgb: 1, 1, 86;
--secondary-rgb: 109, 117, 126;
--success-rgb: 68, 131, 68;
--info-rgb: 48, 99, 141;
--warning-rgb: 173, 98, 0;
--danger-rgb: 165, 31, 24;
--light-rgb: 249, 250, 251;
--dark-rgb: 53, 59, 65;
--primary-text-emphasis: #002;
--secondary-text-emphasis: #2c2f32;
--success-text-emphasis: #1b351b;
--info-text-emphasis: #132838;
--warning-text-emphasis: #452700;
--danger-text-emphasis: #420c09;
--light-text-emphasis: #484f56;
--dark-text-emphasis: #484f56;
--primary-bg-subtle: #ccd;
--secondary-bg-subtle: #e2e3e5;
--success-bg-subtle: #dae6da;
--info-bg-subtle: #d6e0e8;
--warning-bg-subtle: #efe0cc;
--danger-bg-subtle: #edd2d1;
--light-bg-subtle: #fcfcfd;
--dark-bg-subtle: #ced4da;
--primary-border-subtle: #99b;
--secondary-border-subtle: #c5c8cb;
--success-border-subtle: #b4ceb4;
--info-border-subtle: #acc1d1;
--warning-border-subtle: #dec099;
--danger-border-subtle: #dba5a2;
--light-border-subtle: #eaedf0;
--dark-border-subtle: #adb5bd;
--white-rgb: 255, 255, 255;
--black-rgb: 0, 0, 0;
--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--gradient: linear-gradient(180deg, #ffffff26, #fff0);
--body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
--body-font-size: 1rem;
--body-font-weight: 400;
--body-line-height: 1.5;
--body-color: #22262a;
--body-color-rgb: 34, 38, 42;
--body-bg: #fff;
--body-bg-rgb: 255, 255, 255;
--emphasis-color: #000;
--emphasis-color-rgb: 0, 0, 0;
--secondary-color: #22262abf;
--secondary-color-rgb: 34, 38, 42;
--secondary-bg: #eaedf0;
--secondary-bg-rgb: 234, 237, 240;
--tertiary-color: #22262a80;
--tertiary-color-rgb: 34, 38, 42;
--tertiary-bg: #f9fafb;
--tertiary-bg-rgb: 249, 250, 251;
--heading-color: inherit;
--link-color: #224faa;
--link-color-rgb: 34, 79, 170;
--link-decoration: underline;
--link-hover-color: #424077;
--link-hover-color-rgb: 66, 64, 119;
--code-color: #e93f8e;
--highlight-color: #22262a;
--highlight-bg: #fbeea8;
--border-width: 1px;
--border-style: solid;
--border-color: #dfe3e7;
--border-color-translucent: #0000002d;
--border-radius: .25rem;
--border-radius-sm: .2rem;
--border-radius-lg: .3rem;
--border-radius-xl: .3rem;
--border-radius-xxl: 2rem;
--border-radius-2xl: var(--border-radius-xxl)*2;
--border-radius-pill: 50rem;
--box-shadow: 0 .5rem 1rem #00000026;
--box-shadow-sm: 0 .125rem .25rem #00000013;
--box-shadow-lg: 0 1rem 3rem #0000002d;
--box-shadow-inset: inset 0 1px 2px #00000013;
--focus-ring-width: .25rem;
--focus-ring-opacity: .25;
--focus-ring-color: #01015640;
--form-valid-color: #448344;
--form-valid-border-color: #448344;
--form-invalid-color: #a51f18;
--form-invalid-border-color: #a51f18;
}
.btn {
--btn-padding-x: 1rem;
--btn-padding-y: 0.6rem;
--btn-font-family: ;
--btn-font-size: 1rem;
--btn-font-weight: 400;
--btn-line-height: 1.5;
--btn-color: hsl(210, 11%, 15%);
--btn-bg: transparent;
--btn-border-width: 1px;
--btn-border-color: transparent;
--btn-border-radius: 0.25rem;
--btn-active-border-color: transparent;
--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
--btn-disabled-opacity: 0.65;
--btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5);
display: inline-block;
padding: var(--btn-padding-y) var(--btn-padding-x);
font-family: var(--btn-font-family);
font-size: var(--btn-font-size);
font-weight: var(--btn-font-weight);
line-height: var(--btn-line-height);
color: var(--btn-color);
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: var(--btn-border-width) solid var(--btn-border-color);
border-radius: var(--btn-border-radius);
background-color: var(--btn-bg);
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
-o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.btn-primary {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(240, 98%, 17%);
--btn-border-color: hsl(240, 98%, 17%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #010149;
--btn-hover-border-color: #010145;
--btn-focus-shadow-rgb: 39, 39, 111;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #010145;
--btn-active-border-color: #010141;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(240, 98%, 17%);
--btn-disabled-border-color: hsl(240, 98%, 17%);
}
.btn-secondary {
--btn-color: --nav-text-color;
--btn-bg: --nav-bg-color;
--btn-border-color: hsl(210, 7%, 46%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #5d636b;
--btn-hover-border-color: #575e65;
--btn-focus-shadow-rgb: gray;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #575e65;
--btn-active-border-color: #52585f;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(210, 7%, 46%);
--btn-disabled-border-color: hsl(210, 7%, 46%);
}
.btn-success {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(120, 32%, 39%);
--btn-border-color: hsl(120, 32%, 39%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #3a6f3a;
--btn-hover-border-color: #366936;
--btn-focus-shadow-rgb: 96, 150, 96;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #366936;
--btn-active-border-color: #336233;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(120, 32%, 39%);
--btn-disabled-border-color: hsl(120, 32%, 39%);
}
.btn-info {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(207, 49%, 37%);
--btn-border-color: hsl(207, 49%, 37%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #295478;
--btn-hover-border-color: #264f71;
--btn-focus-shadow-rgb: 79, 122, 158;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #264f71;
--btn-active-border-color: #244a6a;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(207, 49%, 37%);
--btn-disabled-border-color: hsl(207, 49%, 37%);
}
.btn-warning {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(34, 100%, 34%);
--btn-border-color: hsl(34, 100%, 34%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #935300;
--btn-hover-border-color: #8a4e00;
--btn-focus-shadow-rgb: 185, 122, 38;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #8a4e00;
--btn-active-border-color: #824a00;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(34, 100%, 34%);
--btn-disabled-border-color: hsl(34, 100%, 34%);
}
.btn-danger {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(3, 75%, 37%);
--btn-border-color: hsl(3, 75%, 37%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #8c1a14;
--btn-hover-border-color: #841913;
--btn-focus-shadow-rgb: 179, 65, 59;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #841913;
--btn-active-border-color: #7c1712;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(3, 75%, 37%);
--btn-disabled-border-color: hsl(3, 75%, 37%);
}
.btn-light {
--btn-color: hsl(0, 0%, 0%);
--btn-bg: hsl(210, 17%, 98%);
--btn-border-color: hsl(210, 17%, 98%);
--btn-hover-color: hsl(0, 0%, 0%);
--btn-hover-bg: #d4d5d5;
--btn-hover-border-color: #c7c8c9;
--btn-focus-shadow-rgb: 212, 213, 213;
--btn-active-color: hsl(0, 0%, 0%);
--btn-active-bg: #c7c8c9;
--btn-active-border-color: #bbbcbc;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 0%);
--btn-disabled-bg: hsl(210, 17%, 98%);
--btn-disabled-border-color: hsl(210, 17%, 98%);
}
.btn-dark {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(210, 10%, 23%);
--btn-border-color: hsl(210, 10%, 23%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #53585e;
--btn-hover-border-color: #494f54;
--btn-focus-shadow-rgb: 83, 88, 94;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #5d6267;
--btn-active-border-color: #494f54;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(210, 10%, 23%);
--btn-disabled-border-color: hsl(210, 10%, 23%);
}
.btn-outline-primary {
--btn-color: hsl(240, 98%, 17%);
--btn-border-color: hsl(240, 98%, 17%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(240, 98%, 17%);
--btn-hover-border-color: hsl(240, 98%, 17%);
--btn-focus-shadow-rgb: 1, 1, 86;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(240, 98%, 17%);
--btn-active-border-color: hsl(240, 98%, 17%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(240, 98%, 17%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(240, 98%, 17%);
--gradient: none;
}
.btn-outline-secondary {
--btn-color: hsl(210, 7%, 46%);
--btn-border-color: hsl(210, 7%, 46%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(210, 7%, 46%);
--btn-hover-border-color: hsl(210, 7%, 46%);
--btn-focus-shadow-rgb: 109, 117, 126;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(210, 7%, 46%);
--btn-active-border-color: hsl(210, 7%, 46%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(210, 7%, 46%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(210, 7%, 46%);
--gradient: none;
}
.btn-outline-success {
--btn-color: hsl(120, 32%, 39%);
--btn-border-color: hsl(120, 32%, 39%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(120, 32%, 39%);
--btn-hover-border-color: hsl(120, 32%, 39%);
--btn-focus-shadow-rgb: 68, 131, 68;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(120, 32%, 39%);
--btn-active-border-color: hsl(120, 32%, 39%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(120, 32%, 39%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(120, 32%, 39%);
--gradient: none;
}
.btn-outline-info {
--btn-color: hsl(207, 49%, 37%);
--btn-border-color: hsl(207, 49%, 37%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(207, 49%, 37%);
--btn-hover-border-color: hsl(207, 49%, 37%);
--btn-focus-shadow-rgb: 48, 99, 141;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(207, 49%, 37%);
--btn-active-border-color: hsl(207, 49%, 37%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(207, 49%, 37%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(207, 49%, 37%);
--gradient: none;
}
.btn-outline-warning {
--btn-color: hsl(34, 100%, 34%);
--btn-border-color: hsl(34, 100%, 34%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(34, 100%, 34%);
--btn-hover-border-color: hsl(34, 100%, 34%);
--btn-focus-shadow-rgb: 173, 98, 0;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(34, 100%, 34%);
--btn-active-border-color: hsl(34, 100%, 34%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(34, 100%, 34%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(34, 100%, 34%);
--gradient: none;
}
.btn-outline-danger {
--btn-color: hsl(3, 75%, 37%);
--btn-border-color: hsl(3, 75%, 37%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(3, 75%, 37%);
--btn-hover-border-color: hsl(3, 75%, 37%);
--btn-focus-shadow-rgb: 165, 31, 24;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(3, 75%, 37%);
--btn-active-border-color: hsl(3, 75%, 37%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(3, 75%, 37%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(3, 75%, 37%);
--gradient: none;
}
.btn-outline-light {
--btn-color: hsl(210, 17%, 98%);
--btn-border-color: hsl(210, 17%, 98%);
--btn-hover-color: hsl(0, 0%, 0%);
--btn-hover-bg: hsl(210, 17%, 98%);
--btn-hover-border-color: hsl(210, 17%, 98%);
--btn-focus-shadow-rgb: 249, 250, 251;
--btn-active-color: hsl(0, 0%, 0%);
--btn-active-bg: hsl(210, 17%, 98%);
--btn-active-border-color: hsl(210, 17%, 98%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(210, 17%, 98%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(210, 17%, 98%);
--gradient: none;
}
.btn-outline-dark {
--btn-color: hsl(210, 10%, 23%);
--btn-border-color: hsl(210, 10%, 23%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(210, 10%, 23%);
--btn-hover-border-color: hsl(210, 10%, 23%);
--btn-focus-shadow-rgb: 53, 59, 65;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(210, 10%, 23%);
--btn-active-border-color: hsl(210, 10%, 23%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(210, 10%, 23%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(210, 10%, 23%);
--gradient: none;
}
.btn-link {
--btn-font-weight: 400;
--btn-color: var(--link-color);
--btn-bg: transparent;
--btn-border-color: transparent;
--btn-hover-color: var(--link-hover-color);
--btn-hover-border-color: transparent;
--btn-active-color: var(--link-hover-color);
--btn-active-border-color: transparent;
--btn-disabled-color: hsl(210, 7%, 46%);
--btn-disabled-border-color: transparent;
--btn-box-shadow: none;
--btn-focus-shadow-rgb: 39, 39, 111;
text-decoration: underline;
}

118
media/templates/site/moko-cassiopeia/css/global/colors/light/index.html
View File

@@ -1,118 +0,0 @@
<!--
* Copyright (C) 2025 Moko Consulting <jmiller@mokoconsulting.tech>
*
* This file is part of a Moko Consulting project.
*
* SPDX-License-Identifier: GPL-3.0-or-later
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<!--FILE INFORMATION
* DEFGROUP: Joomla.Site
* INGROUP: Templates.Moko-Cassiopeia
* FILE: index.html
* BRIEF: Security redirect page to block folder access and forward to site root.
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Redirecting…</title>
<!-- Search engines: do not index this placeholder redirect page -->
<meta name="robots" content="noindex, nofollow, noarchive" />
<!-- Instant redirect fallback even if JavaScript is disabled -->
<meta http-equiv="refresh" content="0; url=/" />
<!-- Canonical root reference -->
<link rel="canonical" href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
/**
* @defgroup Dolibarr
* @file index.html (embedded script)
* @version 1.0.0
* @brief Security redirect logic. Replaces the current history entry with the site root.
* @details This script computes the absolute root URL using `location.origin` and
* forwards the user immediately. It prevents leaving the protected folder
* in the browser history by default.
*
* @section VARIABLES
* @var {Object} opts Configuration options for the redirect behavior.
* @var {string} opts.fallbackPath Path used when `location.origin` cannot be determined.
* @var {number} opts.delayMs Optional delay in milliseconds before redirecting.
* @var {"replace"|"assign"} opts.behavior Navigation method used for the redirect.
*
* @section OPTIONS
* - opts.fallbackPath: default "/" (root path)
* - opts.delayMs: default 0 (immediate)
* - opts.behavior: one of
* * "replace" — calls `location.replace(url)`; does not keep the folder page in history.
* * "assign" — calls `location.assign(url)`; keeps an extra history entry.
*/
(function redirectToRoot() {
// Configuration object with safe defaults.
var opts = {
fallbackPath: "/", // string: fallback destination if origin is unavailable
delayMs: 0, // number: delay before redirect in ms (0 = immediate)
behavior: "replace" // enum: "replace" | "assign"
};
// Determine absolute origin in all mainstream browsers.
var origin = (typeof location.origin === "string" && location.origin)
|| (location.protocol + "//" + location.host);
// Final destination: absolute root of the current site, or fallback path.
var destination = origin ? origin + "/" : opts.fallbackPath;
function go() {
if (opts.behavior === "assign") {
location.assign(destination);
} else {
location.replace(destination);
}
}
// Execute redirect, optionally after a short delay.
if (opts.delayMs > 0) {
setTimeout(go, opts.delayMs);
} else {
go();
}
})();
</script>
<!--
Secondary meta-refresh for no-JS environments is already set above.
Some very old crawlers may ignore JS; the meta refresh ensures coverage.
-->
<noscript>
<!-- Extra defense-in-depth: if JS is disabled, meta refresh (above) handles redirect. -->
<style>
html, body { height:100%; }
body { display:flex; align-items:center; justify-content:center; margin:0; font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.msg { opacity: .75; text-align: center; }
</style>
</noscript>
</head>
<body>
<div class="msg">Redirecting to the site root… If you are not redirected, <a href="/">click here</a>.</div>
</body>
</html>

35
media/templates/site/moko-cassiopeia/css/global/colors/dark/colors_alternative.css → media/templates/site/moko-cassiopeia/css/global/dark/colors_alternative.css
View File

@@ -1,14 +1,31 @@
/*!
* @package Joomla.Site
* @subpackage Templates.moko-cassiopeia
* @file /media/templates/sote/moko-cassiopeia/css/global/dark/colors_alternative.css
@charset "UTF-8";
/* =========================================================================
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
*
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
* @license GNU General Public License version 2 or later; see LICENSE.txt
* This file is part of a Moko Consulting project.
*
* Website: https://mokoconsulting.tech
* Email: hello@mokoconsulting.tech
* Phone: +1 (931) 279-6313
* SPDX-License-Identifier: GPL-3.0-or-later
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see https://www.gnu.org/licenses/ .
* =========================================================================
* FILE INFORMATION
* DEFGROUP: Joomla
* INGROUP: Moko-Cassiopeia
* PATH: media/templates/site/moko-cassiopeia/css/global/dark/colors_alternative.css
* VERSION: 02.00
* BRIEF: Alternative dark mode color definitions for Moko-Cassiopeia template
* =========================================================================
*/
/* -----------------------------------------------

35
media/templates/site/moko-cassiopeia/css/global/colors/dark/colors_standard.css → media/templates/site/moko-cassiopeia/css/global/dark/colors_standard.css
View File

@@ -1,14 +1,31 @@
/*!
* @package Joomla.Site
* @subpackage Templates.moko-cassiopeia
* @file /media/templates/sote/moko-cassiopeia/css/global/dark/colors_standard.css
@charset "UTF-8";
/* =========================================================================
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
*
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
* @license GNU General Public License version 2 or later; see LICENSE.txt
* This file is part of a Moko Consulting project.
*
* Website: https://mokoconsulting.tech
* Email: hello@mokoconsulting.tech
* Phone: +1 (931) 279-6313
* SPDX-License-Identifier: GPL-3.0-or-later
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see https://www.gnu.org/licenses/ .
* =========================================================================
* FILE INFORMATION
* DEFGROUP: Joomla
* INGROUP: Moko-Cassiopeia
* PATH: media/templates/site/moko-cassiopeia/css/global/dark/colors_standard.css
* VERSION: 02.00
* BRIEF: Standard dark mode color definitions for Moko-Cassiopeia template
* =========================================================================
*/
/* -----------------------------------------------

0
media/templates/site/moko-cassiopeia/css/global/colors/dark/index.html → media/templates/site/moko-cassiopeia/css/global/dark/index.html
View File

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

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

35
media/templates/site/moko-cassiopeia/css/global/colors/light/colors_alternative.css → media/templates/site/moko-cassiopeia/css/global/light/colors_alternative.css
View File

@@ -1,14 +1,31 @@
/*!
* @package Joomla.Site
* @subpackage Templates.moko-cassiopeia
* @file /media/templates/sote/moko-cassiopeia/css/global/light/colors_alternative.css
@charset "UTF-8";
/* =========================================================================
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
*
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
* @license GNU General Public License version 2 or later; see LICENSE.txt
* This file is part of a Moko Consulting project.
*
* Website: https://mokoconsulting.tech
* Email: hello@mokoconsulting.tech
* Phone: +1 (931) 279-6313
* SPDX-License-Identifier: GPL-3.0-or-later
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see https://www.gnu.org/licenses/ .
* =========================================================================
* FILE INFORMATION
* DEFGROUP: Joomla
* INGROUP: Moko-Cassiopeia
* PATH: media/templates/site/moko-cassiopeia/css/global/light/colors_alternative.css
* VERSION: 02.00
* BRIEF: Alternative light mode color definitions for Moko-Cassiopeia template
* =========================================================================
*/
/* -----------------------------------------------

35
media/templates/site/moko-cassiopeia/css/global/colors/light/colors_standard.css → media/templates/site/moko-cassiopeia/css/global/light/colors_standard.css
View File

@@ -1,14 +1,31 @@
/*!
* @package Joomla.Site
* @subpackage Templates.moko-cassiopeia
* @file /media/templates/sote/moko-cassiopeia/css/global/light/colors_standard.css
@charset "UTF-8";
/* =========================================================================
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
*
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
* @license GNU General Public License version 2 or later; see LICENSE.txt
* This file is part of a Moko Consulting project.
*
* Website: https://mokoconsulting.tech
* Email: hello@mokoconsulting.tech
* Phone: +1 (931) 279-6313
* SPDX-License-Identifier: GPL-3.0-or-later
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see https://www.gnu.org/licenses/ .
* =========================================================================
* FILE INFORMATION
* DEFGROUP: Joomla
* INGROUP: Moko-Cassiopeia
* PATH: media/templates/site/moko-cassiopeia/css/global/light/colors_standard.css
* VERSION: 02.00
* BRIEF: Standard light mode color definitions for Moko-Cassiopeia template
* =========================================================================
*/
/* -----------------------------------------------

0
media/templates/site/moko-cassiopeia/css/global/colors/index.html → media/templates/site/moko-cassiopeia/css/global/light/index.html
View File

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

@@ -1,16 +1,33 @@
/*!
* @package Joomla.Site
* @subpackage Templates.moko-cassiopeia
* @file /media/templates/sote/moko-cassiopeia/css/global/csocial-media-demos.css
@charset "UTF-8";
/* =========================================================================
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
*
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
* @license GNU General Public License version 2 or later; see LICENSE.txt
* This file is part of a Moko Consulting project.
*
* Website: https://mokoconsulting.tech
* Email: hello@mokoconsulting.tech
* Phone: +1 (931) 279-6313
* SPDX-License-Identifier: GPL-3.0-or-later
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see https://www.gnu.org/licenses/ .
* =========================================================================
* FILE INFORMATION
* DEFGROUP: Joomla
* INGROUP: Moko-Cassiopeia
* PATH: media/templates/site/moko-cassiopeia/css/global/social-media-demo.css
* VERSION: 02.00
* BRIEF: Demo styles for showcasing social media elements in Moko-Cassiopeia template
* =========================================================================
*/
*
/*
======================================================================
Social Media Demo — FULL CSS (Joomla-safe, fully scoped)
@@ -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 */

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

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

35
media/templates/site/moko-cassiopeia/css/template-rtl.css
View File

@@ -1,15 +1,31 @@
@charset "UTF-8";
/*!
* @package Joomla.Site
* @subpackage Templates.moko-cassiopeia
* @file /media/templates/sote/moko-cassiopeia/css/template-rtl.css
/* =========================================================================
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
*
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
* @license GNU General Public License version 2 or later; see LICENSE.txt
* This file is part of a Moko Consulting project.
*
* Website: https://mokoconsulting.tech
* Email: hello@mokoconsulting.tech
* Phone: +1 (931) 279-6313
* SPDX-License-Identifier: GPL-3.0-or-later
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see https://www.gnu.org/licenses/ .
* =========================================================================
* FILE INFORMATION
* DEFGROUP: Joomla
* INGROUP: Moko-Cassiopeia
* PATH: media/templates/site/moko-cassiopeia/css/template-rtl.css
* VERSION: 02.00
* BRIEF: Right-to-left (RTL) layout stylesheet for Moko-Cassiopeia template
* =========================================================================
*/
/*!
@@ -20,7 +36,6 @@
* sensitive rules are mirrored here to keep file size reasonable.
*/
[dir="rtl"] .table-of-contents-ck-wrap {
width: 30%;

70
media/templates/site/moko-cassiopeia/css/template.css
View File

@@ -1,15 +1,31 @@
@charset "UTF-8";
/*!
* @package Joomla.Site
* @subpackage Templates.moko-cassiopeia
* @file /media/templates/sote/moko-cassiopeia/css/template.css
/* =========================================================================
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
*
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
* @license GNU General Public License version 2 or later; see LICENSE.txt
* This file is part of a Moko Consulting project.
*
* Website: https://mokoconsulting.tech
* Email: hello@mokoconsulting.tech
* Phone: +1 (931) 279-6313
* SPDX-License-Identifier: GPL-3.0-or-later
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see https://www.gnu.org/licenses/ .
* =========================================================================
* FILE INFORMATION
* DEFGROUP: Joomla
* INGROUP: Moko-Cassiopeia
* PATH: media/templates/site/moko-cassiopeia/css/template.css
* VERSION: 02.00
* BRIEF: Main stylesheet providing layout, typography, and component styles for Moko-Cassiopeia
* =========================================================================
*/
*,
@@ -17206,5 +17222,41 @@ body.site.error-page {
text-decoration: none;
}
#mokoThemeFab .knob {
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
border-radius: var(--border-radius-xxl);
background: var(--bs-body-bg, #fff);
box-shadow: var(--box-shadow);
transition: transform .2s ease;
}
#mokoThemeFab [role="switch"][aria-checked="true"] .knob {
transform: translateX(20px);
}
#mokoThemeFab [role="switch"][aria-checked="true"] .switch {
background: rgba(var(--secondary-color), .15);
}
button#mokoThemeSwitch {
border: unset;
background-color: unset;
}
#mokoThemeFab .label {
user-select: none;
font-size: .875rem;
}
#mokoThemeFab.debug-outline {
outline: 2px dashed var(--pink);
outline-offset: 2px;
}
/* SOCIAL MEDIA DEMOS */
@import url("global/social-media-demos.css");

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

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

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

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

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

@@ -1,3 +1,33 @@
@charset "UTF-8";
/* =========================================================================
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
*
* This file is part of a Moko Consulting project.
*
* SPDX-License-Identifier: GPL-3.0-or-later
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see https://www.gnu.org/licenses/ .
* =========================================================================
* FILE INFORMATION
* DEFGROUP: Joomla
* INGROUP: Moko-Cassiopeia
* PATH: media/templates/site/moko-cassiopeia/css/vendor/vmbasic.css
* VERSION: 02.00
* BRIEF: Vendor stylesheet providing base styles for VM Basic in Moko-Cassiopeia
* =========================================================================
*/
/* Bootstrap */
.dropdown-menu {
border-radius: 0;

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

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

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

@@ -0,0 +1,347 @@
/*
=========================================================================
Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
This file is part of a Moko Consulting project.
SPDX-License-Identifier: GPL-3.0-or-later
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see https://www.gnu.org/licenses/ .
=========================================================================
FILE INFORMATION
DEFGROUP: Joomla Template
FILE: media/templates/site/moko-cassiopeia/js/gtm.js
HEADER VERSION: 1.0
VERSION: 2.0
BRIEF: Safe, configurable Google Tag Manager loader for Moko-Cassiopeia.
PATH: media/templates/site/moko-cassiopeia/js/gtm.js
NOTE: Place the <noscript> fallback iframe in your HTML template (index.php). A JS file
cannot provide a true no-JS fallback by definition.
VARIABLES:
- window.MOKO_GTM_ID (string) // Optional global GTM container ID (e.g., "GTM-XXXXXXX")
- window.MOKO_GTM_OPTIONS (object) // Optional global options (see JSDoc below)
- data- attributes on the script tag or <html>/<body>:
data-gtm-id, data-data-layer, data-debug, data-ignore-dnt,
data-env-auth, data-env-preview, data-block-on-dev
=========================================================================
*/
/* global window, document, navigator */
(() => {
"use strict";
/**
* @typedef {Object} MokoGtmOptions
* @property {string} [id] GTM container ID (e.g., "GTM-XXXXXXX")
* @property {string} [dataLayerName] Custom dataLayer name (default: "dataLayer")
* @property {boolean} [debug] Log debug messages to console (default: false)
* @property {boolean} [ignoreDNT] Ignore Do Not Track and always load (default: false)
* @property {boolean} [blockOnDev] Block loading on localhost/*.test/127.0.0.1 (default: true)
* @property {string} [envAuth] GTM Environment auth string (optional)
* @property {string} [envPreview] GTM Environment preview name (optional)
* @property {Record<string,'granted'|'denied'>} [consentDefault]
* Default Consent Mode v2 map. Keys like:
* analytics_storage, ad_storage, ad_user_data, ad_personalization, functionality_storage, security_storage
* (default: {analytics_storage:'granted', functionality_storage:'granted', security_storage:'granted'})
* @property {() => (Record<string, any>|void)} [pageVars]
* Function returning extra page variables to push on init (optional)
*/
const PKG = "moko-gtm";
const PREFIX = `[${PKG}]`;
const WIN = window;
// Public API placeholder (attached to window at the end)
/** @type {{
* init: (opts?: Partial<MokoGtmOptions>) => void,
* setConsent: (updates: Record<string,'granted'|'denied'>) => void,
* push: (...args:any[]) => void,
* isLoaded: () => boolean,
* config: () => Required<MokoGtmOptions>
* }} */
const API = {};
// ---- Utilities ---------------------------------------------------------
const isDevHost = () => {
const h = WIN.location && WIN.location.hostname || "";
return (
h === "localhost" ||
h === "127.0.0.1" ||
h.endsWith(".local") ||
h.endsWith(".test")
);
};
const dntEnabled = () => {
// Different browsers expose DNT differently; treat "1" or "yes" as enabled.
const n = navigator;
const v = (n.doNotTrack || n.msDoNotTrack || (n.navigator && n.navigator.doNotTrack) || "").toString().toLowerCase();
return v === "1" || v === "yes";
};
const getCurrentScript = () => {
// document.currentScript is best; fallback to last <script> whose src ends with /gtm.js
const cs = document.currentScript;
if (cs) return cs;
const scripts = Array.from(document.getElementsByTagName("script"));
return scripts.reverse().find(s => (s.getAttribute("src") || "").includes("/gtm.js")) || null;
};
const getAttr = (el, name) => el ? el.getAttribute(name) : null;
const readDatasetCascade = (name) => {
// Check <script>, <html>, <body>, then <meta name="moko:gtm-<name>">
const script = getCurrentScript();
const html = document.documentElement;
const body = document.body;
const meta = document.querySelector(`meta[name="moko:gtm-${name}"]`);
return (
(script && script.dataset && script.dataset[name]) ||
(html && html.dataset && html.dataset[name]) ||
(body && body.dataset && body.dataset[name]) ||
(meta && meta.getAttribute("content")) ||
null
);
};
const parseBool = (v, fallback = false) => {
if (v == null) return fallback;
const s = String(v).trim().toLowerCase();
if (["1","true","yes","y","on"].includes(s)) return true;
if (["0","false","no","n","off"].includes(s)) return false;
return fallback;
};
const debugLog = (...args) => {
if (STATE.debug) {
try { console.info(PREFIX, ...args); } catch (_) {}
}
};
// ---- Configuration & State --------------------------------------------
/** @type {Required<MokoGtmOptions>} */
const STATE = {
id: "",
dataLayerName: "dataLayer",
debug: false,
ignoreDNT: false,
blockOnDev: true,
envAuth: "",
envPreview: "",
consentDefault: {
analytics_storage: "granted",
functionality_storage: "granted",
security_storage: "granted",
// The following default to "denied" unless the site explicitly opts-in:
ad_storage: "denied",
ad_user_data: "denied",
ad_personalization: "denied",
},
pageVars: () => ({})
};
const mergeOptions = (base, extra = {}) => {
const out = {...base};
for (const k in extra) {
if (!Object.prototype.hasOwnProperty.call(extra, k)) continue;
const v = extra[k];
if (v && typeof v === "object" && !Array.isArray(v)) {
out[k] = {...(out[k] || {}), ...v};
} else if (v !== undefined) {
out[k] = v;
}
}
return out;
};
const detectOptions = () => {
// 1) Global window options
/** @type {Partial<MokoGtmOptions>} */
const globalOpts = (WIN.MOKO_GTM_OPTIONS && typeof WIN.MOKO_GTM_OPTIONS === "object") ? WIN.MOKO_GTM_OPTIONS : {};
// 2) Dataset / meta
const idFromData = readDatasetCascade("id") || WIN.MOKO_GTM_ID || "";
const dlFromData = readDatasetCascade("dataLayer") || "";
const dbgFromData = readDatasetCascade("debug");
const dntFromData = readDatasetCascade("ignoreDnt");
const devFromData = readDatasetCascade("blockOnDev");
const authFromData = readDatasetCascade("envAuth") || "";
const prevFromData = readDatasetCascade("envPreview") || "";
// 3) Combine
/** @type {Partial<MokoGtmOptions>} */
const detected = {
id: idFromData || globalOpts.id || "",
dataLayerName: dlFromData || globalOpts.dataLayerName || undefined,
debug: parseBool(dbgFromData, !!globalOpts.debug),
ignoreDNT: parseBool(dntFromData, !!globalOpts.ignoreDNT),
blockOnDev: parseBool(devFromData, (globalOpts.blockOnDev ?? true)),
envAuth: authFromData || globalOpts.envAuth || "",
envPreview: prevFromData || globalOpts.envPreview || "",
consentDefault: globalOpts.consentDefault || undefined,
pageVars: typeof globalOpts.pageVars === "function" ? globalOpts.pageVars : undefined
};
return detected;
};
// ---- dataLayer / gtag helpers -----------------------------------------
const ensureDataLayer = () => {
const l = STATE.dataLayerName;
WIN[l] = WIN[l] || [];
return WIN[l];
};
/** gtag wrapper backed by dataLayer. */
const gtag = (...args) => {
const dl = ensureDataLayer();
dl.push(arguments.length > 1 ? args : args[0]);
debugLog("gtag push:", args);
};
API.push = (...args) => gtag(...args);
API.setConsent = (updates) => {
gtag("consent", "update", updates || {});
};
API.isLoaded = () => {
const hasScript = !!document.querySelector('script[src*="googletagmanager.com/gtm.js"]');
return hasScript;
};
API.config = () => ({...STATE});
// ---- Loader ------------------------------------------------------------
const buildEnvQuery = () => {
const qp = [];
if (STATE.envAuth) qp.push(`gtm_auth=${encodeURIComponent(STATE.envAuth)}`);
if (STATE.envPreview) qp.push(`gtm_preview=${encodeURIComponent(STATE.envPreview)}`, "gtm_cookies_win=x");
return qp.length ? `&${qp.join("&")}` : "";
};
const injectScript = () => {
if (!STATE.id) {
debugLog("GTM ID missing; aborting load.");
return;
}
if (API.isLoaded()) {
debugLog("GTM already loaded; skipping duplicate injection.");
return;
}
// Standard GTM bootstrap timing event
const dl = ensureDataLayer();
dl.push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
const f = document.getElementsByTagName("script")[0];
const j = document.createElement("script");
j.async = true;
j.src = `https://www.googletagmanager.com/gtm.js?id=${encodeURIComponent(STATE.id)}${STATE.dataLayerName !== "dataLayer" ? `&l=${encodeURIComponent(STATE.dataLayerName)}` : ""}${buildEnvQuery()}`;
if (f && f.parentNode) {
f.parentNode.insertBefore(j, f);
} else {
(document.head || document.documentElement).appendChild(j);
}
debugLog("Injected GTM script:", j.src);
};
const applyDefaultConsent = () => {
// Consent Mode v2 default
gtag("consent", "default", STATE.consentDefault);
debugLog("Applied default consent:", STATE.consentDefault);
};
const pushInitialVars = () => {
// Minimal page vars; allow site to add more via pageVars()
const vars = {
event: "moko.page_init",
page_title: document.title || "",
page_language: (document.documentElement && document.documentElement.lang) || "",
...(typeof STATE.pageVars === "function" ? (STATE.pageVars() || {}) : {})
};
gtag(vars);
};
const shouldLoad = () => {
if (!STATE.ignoreDNT && dntEnabled()) {
debugLog("DNT is enabled; blocking GTM load (set ignoreDNT=true to override).");
return false;
}
if (STATE.blockOnDev && isDevHost()) {
debugLog("Development host detected; blocking GTM load (set blockOnDev=false to override).");
return false;
}
return true;
};
// ---- Public init -------------------------------------------------------
API.init = (opts = {}) => {
// Merge: defaults <- detected <- passed opts
const detected = detectOptions();
const merged = mergeOptions(STATE, mergeOptions(detected, opts));
// Commit back to STATE
Object.assign(STATE, merged);
debugLog("Config:", STATE);
// Prepare dataLayer/gtag and consent
ensureDataLayer();
applyDefaultConsent();
pushInitialVars();
// Load GTM if allowed
if (shouldLoad()) {
injectScript();
} else {
debugLog("GTM load prevented by configuration or environment.");
}
};
// ---- Auto-init on DOMContentLoaded (safe even if deferred) -------------
const autoInit = () => {
// Only auto-init if we have some ID from globals/datasets.
const detected = detectOptions();
const hasId = !!(detected.id || WIN.MOKO_GTM_ID);
if (hasId) {
API.init(); // use detected/global defaults
} else {
debugLog("No GTM ID detected; awaiting manual init via window.mokoGTM.init({ id: 'GTM-XXXXXXX' }).");
}
};
if (document.readyState === "complete" || document.readyState === "interactive") {
// Defer to ensure <body> exists for any late consumers.
setTimeout(autoInit, 0);
} else {
document.addEventListener("DOMContentLoaded", autoInit, { once: true });
}
// Expose API
WIN.mokoGTM = API;
// Helpful console hint (only if debug true after detection)
try {
const detected = detectOptions();
if (parseBool(detected.debug, false)) {
STATE.debug = true;
debugLog("Ready. You can call window.mokoGTM.init({ id: 'GTM-XXXXXXX' }).");
}
} catch (_) {}
})();

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

@@ -1,11 +0,0 @@
/**
* @package Joomla.Site
* @subpackage Templates.Moko-Cassiopeia
* @file /media/templates/site/moko-cassiopeia/js/mod_gabble.js
* @copyright (C) 2025 Jonathan Miler || Moko Consulting <https://mokoconsulting.tech>
* @website: https://mokoconsulting.tech
* @email: hello@mokoconsulting.tech
* @phone: +1 (931) 279-6313
* @license GNU General Public License version 2 or later; see LICENSE.txt
* @note This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
*/

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

@@ -1,118 +0,0 @@
<!--
* Copyright (C) 2025 Moko Consulting <jmiller@mokoconsulting.tech>
*
* This file is part of a Moko Consulting project.
*
* SPDX-License-Identifier: GPL-3.0-or-later
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<!--FILE INFORMATION
* DEFGROUP: Joomla.Site
* INGROUP: Templates.Moko-Cassiopeia
* FILE: index.html
* BRIEF: Security redirect page to block folder access and forward to site root.
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Redirecting…</title>
<!-- Search engines: do not index this placeholder redirect page -->
<meta name="robots" content="noindex, nofollow, noarchive" />
<!-- Instant redirect fallback even if JavaScript is disabled -->
<meta http-equiv="refresh" content="0; url=/" />
<!-- Canonical root reference -->
<link rel="canonical" href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
/**
* @defgroup Dolibarr
* @file index.html (embedded script)
* @version 1.0.0
* @brief Security redirect logic. Replaces the current history entry with the site root.
* @details This script computes the absolute root URL using `location.origin` and
* forwards the user immediately. It prevents leaving the protected folder
* in the browser history by default.
*
* @section VARIABLES
* @var {Object} opts Configuration options for the redirect behavior.
* @var {string} opts.fallbackPath Path used when `location.origin` cannot be determined.
* @var {number} opts.delayMs Optional delay in milliseconds before redirecting.
* @var {"replace"|"assign"} opts.behavior Navigation method used for the redirect.
*
* @section OPTIONS
* - opts.fallbackPath: default "/" (root path)
* - opts.delayMs: default 0 (immediate)
* - opts.behavior: one of
* * "replace" — calls `location.replace(url)`; does not keep the folder page in history.
* * "assign" — calls `location.assign(url)`; keeps an extra history entry.
*/
(function redirectToRoot() {
// Configuration object with safe defaults.
var opts = {
fallbackPath: "/", // string: fallback destination if origin is unavailable
delayMs: 0, // number: delay before redirect in ms (0 = immediate)
behavior: "replace" // enum: "replace" | "assign"
};
// Determine absolute origin in all mainstream browsers.
var origin = (typeof location.origin === "string" && location.origin)
|| (location.protocol + "//" + location.host);
// Final destination: absolute root of the current site, or fallback path.
var destination = origin ? origin + "/" : opts.fallbackPath;
function go() {
if (opts.behavior === "assign") {
location.assign(destination);
} else {
location.replace(destination);
}
}
// Execute redirect, optionally after a short delay.
if (opts.delayMs > 0) {
setTimeout(go, opts.delayMs);
} else {
go();
}
})();
</script>
<!--
Secondary meta-refresh for no-JS environments is already set above.
Some very old crawlers may ignore JS; the meta refresh ensures coverage.
-->
<noscript>
<!-- Extra defense-in-depth: if JS is disabled, meta refresh (above) handles redirect. -->
<style>
html, body { height:100%; }
body { display:flex; align-items:center; justify-content:center; margin:0; font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.msg { opacity: .75; text-align: center; }
</style>
</noscript>
</head>
<body>
<div class="msg">Redirecting to the site root… If you are not redirected, <a href="/">click here</a>.</div>
</body>
</html>

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

@@ -1,13 +1,30 @@
/**
* @package Joomla.Site
* @subpackage Templates.Moko-Cassiopeia
* @file /media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu-es5.js
* @copyright (C) 2025 Jonathan Miler || Moko Consulting <https://mokoconsulting.tech>
* @website: https://mokoconsulting.tech
* @email: hello@mokoconsulting.tech
* @phone: +1 (931) 279-6313
* @license GNU General Public License version 2 or later; see LICENSE.txt
* @note This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
/* =========================================================================
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
*
* This file is part of a Moko Consulting project.
*
* SPDX-License-Identifier: GPL-3.0-or-later
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see https://www.gnu.org/licenses/ .
* =========================================================================
* FILE INFORMATION
* DEFGROUP: Joomla
* INGROUP: Moko-Cassiopeia
* PATH: media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu-es5.js
* VERSION: 02.00
* BRIEF: ES5-compatible MetisMenu script for Joomla mod_menu in Moko-Cassiopeia
* =========================================================================
*/
(function () {

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

@@ -1,13 +1,30 @@
/**
* @package Joomla.Site
* @subpackage Templates.Moko-Cassiopeia
* @file /media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu.js
* @copyright (C) 2025 Jonathan Miler || Moko Consulting <https://mokoconsulting.tech>
* @website: https://mokoconsulting.tech
* @email: hello@mokoconsulting.tech
* @phone: +1 (931) 279-6313
* @license GNU General Public License version 2 or later; see LICENSE.txt
* @note This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
/* =========================================================================
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
*
* This file is part of a Moko Consulting project.
*
* SPDX-License-Identifier: GPL-3.0-or-later
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see https://www.gnu.org/licenses/ .
* =========================================================================
* FILE INFORMATION
* DEFGROUP: Joomla
* INGROUP: Moko-Cassiopeia
* PATH: media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu.js
* VERSION: 02.00
* BRIEF: Modern MetisMenu script for Joomla mod_menu in Moko-Cassiopeia
* =========================================================================
*/
document.addEventListener('DOMContentLoaded', () => {

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

@@ -1,25 +1,14 @@
/**
* template.js — Custom JavaScript for the Moko Cassiopeia Joomla template
*
* @package Joomla.Site
* @subpackage Templates.Moko-Cassiopeia
* @file /media/templates/site/moko-cassiopeia/js/template.js
* @version 2.0
*
* @copyright (C) 2025 Moko Consulting
* @author Jonathan Miller
* @website https://mokoconsulting.tech
* @email hello@mokoconsulting.tech
* @phone +1 (931) 279-6313
*
* SPDX-License-Identifier: GPL-3.0-or-later
/* =========================================================================
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
*
* This file is part of a Moko Consulting project.
*
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or (at
* your option) any later version.
* SPDX-License-Identifier: GPL-3.0-or-later
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ -27,7 +16,15 @@
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
* along with this program. If not, see https://www.gnu.org/licenses/ .
* =========================================================================
* FILE INFORMATION
* DEFGROUP: Joomla
* INGROUP: Moko-Cassiopeia
* PATH: media/templates/site/moko-cassiopeia/js/template.js
* VERSION: 02.00
* BRIEF: Core JavaScript utilities and behaviors for Moko-Cassiopeia template
* =========================================================================
*/
(function (win, doc) {

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

@@ -1,25 +1,14 @@
/**
* theme-init.js — Light/Dark mode initialization for Moko Cassiopeia
*
* @package Joomla.Site
* @subpackage Templates.Moko-Cassiopeia
* @file /media/templates/site/moko-cassiopeia/js/theme-init.js
* @version 2.0
*
* @copyright (C) 2025 Moko Consulting
* @author Jonathan Miller
* @website https://mokoconsulting.tech
* @email hello@mokoconsulting.tech
* @phone +1 (931) 279-6313
*
* SPDX-License-Identifier: GPL-3.0-or-later
/* =========================================================================
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
*
* This file is part of a Moko Consulting project.
*
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or (at
* your option) any later version.
* SPDX-License-Identifier: GPL-3.0-or-later
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ -27,7 +16,15 @@
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
* along with this program. If not, see https://www.gnu.org/licenses/ .
* =========================================================================
* FILE INFORMATION
* DEFGROUP: Joomla
* INGROUP: Moko-Cassiopeia
* PATH: media/templates/site/moko-cassiopeia/js/theme-init.js
* VERSION: 02.00
* BRIEF: Initialization script for Moko-Cassiopeia theme features and behaviors
* =========================================================================
*/
(function (win, doc) {

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

@@ -1,25 +1,14 @@
/**
* user.js — User Custom JS File for Moko Cassiopeia
*
* @package Joomla.Site
* @subpackage Templates.Moko-Cassiopeia
* @file /media/templates/site/moko-cassiopeia/js/user.js
* @version 2.0
*
* @copyright (C) 2025 Moko Consulting
* @author Jonathan Miller
* @website https://mokoconsulting.tech
* @email hello@mokoconsulting.tech
* @phone +1 (931) 279-6313
*
* SPDX-License-Identifier: GPL-3.0-or-later
/* =========================================================================
* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
*
* This file is part of a Moko Consulting project.
*
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or (at
* your option) any later version.
* SPDX-License-Identifier: GPL-3.0-or-later
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ -27,5 +16,13 @@
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
* along with this program. If not, see https://www.gnu.org/licenses/ .
* =========================================================================
* FILE INFORMATION
* DEFGROUP: Joomla
* INGROUP: Moko-Cassiopeia
* PATH: media/templates/site/moko-cassiopeia/js/user.js
* VERSION: 02.00
* BRIEF: JavaScript for handling user-specific interactions in Moko-Cassiopeia template
* =========================================================================
*/