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

Template fixes

Browse Source
This commit is contained in:
Jonathan Miller
2026-01-27 21:04:37 -06:00
parent c7f81f8321
commit 9ba3955504
86 changed files with 3797 additions and 10585 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/media/css/colors/dark/colors_alternative.css
View File

@@ -185,7 +185,7 @@
--dark-border-subtle: #2b323b;
/* Typography & layout */
--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-family: -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;

2
src/media/css/colors/dark/colors_standard.css
View File

@@ -186,7 +186,7 @@
--dark-border-subtle: #2b323b;
/* Typography & layout */
--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-family: -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;

2
src/media/css/colors/light/colors_alternative.css
View File

@@ -172,7 +172,7 @@
--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-family: -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;

2
src/media/css/colors/light/colors_standard.css
View File

@@ -172,7 +172,7 @@
--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-family: -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;

556
src/media/css/gable.css
View File

@@ -1,556 +0,0 @@
@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
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: Moko-Cassiopeia
PATH: ./media/templates/site/moko-cassiopeia/css/gable.css
VERSION: 03.05.00
BRIEF: Stylesheet providing gable-specific layout and design rules for Moko-Cassiopeia
*/
:root {
--gab-blue: transparent;
--gab-green: #7ac143;
--gab-red: #3f8ff0;
--gab-orange: #F9A541;
--gab-gray1: #DDDDDD;
--gab-gray2: #AAAAAA;
--gab-gray3: #777777;
}
code {
background-color: var(--gab-gray1);
}
#view_gabble {
background-color: var(--gab-blue);
padding: 6px;
border-radius: 6px;
}
#mod_gabble {
background-color: var(--gab-blue);
padding: 3px;
border-radius: 6px;
}
#lists_gabble {
position: relative;
height: 100%;
border: 4px solid var(--gab-red);
background-color: var(--gab-green);
padding: 4px;
border-radius: 6px;
}
#select_list {
margin-left: 0px;
width: 100%;
padding: 4px;
border-radius: 6px 6px 0px 0px;
}
#options_list {
width: 100%;
padding: 4px;
}
#frame_list {
width: 100%;
height: 484px;
padding: 4px;
border-radius: 0px 0px 6px 6px;
}
#windows_list {
margin-left: 0px;
width: 100%;
border: 4px solid var(--gab-red);
background-color: var(--gab-green);
padding: 4px;
border-radius: 6px;
}
#frame_window {
width: 100%;
}
#openai_btn {
position: absolute;
right: 10px;
bottom: 10px;
visibility: hidden;
width: 34px;
height: 34px;
cursor: pointer;
border: 3px solid var(--gab-gray3);
background-color: #FFF;
border-radius: 17px;
}
#openai_btn:hover {
width: 36px;
height: 36px;
border: 3px solid var(--gab-gray3);
border-radius: 18px;
}
#openai_logo_anim {
position: absolute;
top: 15px;
right: 15px;
width: 35px;
height: 35px;
padding: 2px;
z-index: 1;
border-radius: 10px;
}
.openai_logo_sm {
width: 22px;
height: 22px;
background-color: #FFF;
border: 3px solid #FFF;
border-radius: 11px;
}
.openai_logo_md {
width: 34px;
height: 34px;
background-color: #FFF;
border: 4px solid #FFF;
border-radius: 17px;
}
.btn_on_com {
position: absolute;
bottom: -2px;
left: -2px;
width: 12px;
height: 12px;
background-color: #448344;
border-radius: 6px;
}
.btn_on_mod {
position: absolute;
top: 0px;
left: 0px;
width: 12px;
height: 12px;
background-color: #448344;
border-radius: 6px;
}
.button_list {
border: none;
width:100%;
outline: none;
background-color: var(--gab-gray1);
padding: 6px;
border-radius: 6px;
}
.button_list:hover {
background-color: var(--gab-gray2);
}
.button_list_s {
border: none;
width: 100%;
outline: none;
cursor: pointer;
color: #FFF;
background-color: var(--gab-red);
padding: 6px;
border-radius: 6px;
}
.window_list {
position: relative;
margin: 4px;
width: 100%;
border: none;
outline: none;
cursor: pointer;
text-align: left;
background-color: var(--gab-gray1);
padding: 6px;
border-radius: 6px;
}
.window_list:hover {
background-color: var(--gab-gray2);
}
.window_list_s {
position: relative;
margin: 4px;
width: 100%;
border: none;
outline: none;
cursor: pointer;
text-align: left;
color: #FFF;
background-color: var(--gab-red);
padding: 6px;
border-radius: 6px;
}
.btn_close {
position: absolute;
right: 4px;
top: 10px;
padding-left: 1px;
width: 16px;
height: 16px;
color: #000;
font-size: 10px;
text-align: center;
background-color: var(--gab-gray2);
border-radius: 8px;
}
.btn_close:hover {
background-color: var(--gab-gray3);
}
.iframe_list {
width: 100%;
height: 100%;
background-color: #FFF;
border: 4px solid var(--gab-red);
border-radius: 6px;
}
.iframe_messages {
width: 100%;
height: 100%;
background-color: #FFF;
border: 4px solid var(--gab-red);
border-radius: 6px;
}
.input_box {
position: relative;
}
.input_emoji {
position: absolute;
right: 48px;
top: 11px;
cursor: pointer;
color: var(--gab-gray2);
}
.input_emoji:hover {
color: var(--gab-gray3);
}
.emoji {
display: inline-block;
float: left;
cursor: pointer;
padding: 2px;
background-color: #FFF;
}
.emoji:hover {
background-color: var(--gab-orange);
}
.emojis_div {
position: absolute;
top: -92px;
right: 0px;
width: 200px;
height: 92px;
border: 4px solid var(--gab-red);
background-color: var(--gab-gray1);
border-radius: 6px;
}
.msg-button-on {
margin-left: 5px;
width: 30px;
height: 30px;
font-size: 20px;
text-align: center;
color: #FFF;
background-color: var(--gab-orange);
border-radius: 15px;
}
.msg-button-off {
margin-left: 5px;
width: 30px;
height: 30px;
font-size: 20px;
text-align: center;
color: #FFF;
background-color: var(--gab-gray2);
border-radius: 15px;
}
.taba-content {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.msg-input {
padding-left: 10px;
padding-right: 26px;
width: calc(100% - 35px);
height: 30px;
border-radius: 15px;
}
.main-windows {
position: fixed;
margin-bottom: 10px;
bottom: 0px;
right: 90px;
z-index: 901;
}
.list-windows {
position: fixed;
bottom: 0px;
right: 0px;
width: 50px;
margin-bottom: 20px;
margin-right: 20px;
z-index: 901;
}
.item-list {
display: inline-block;
color: #F5F5F5;
margin-top: 5px;
width: 50px;
height: 50px;
font-size: 30px;
text-align: center;
border: 3px solid var(--gab-red);
background-color: var(--gab-blue);
border-radius: 25px;
}
.button {
opacity: 1;
}
.button:hover {
cursor: pointer;
opacity: .6;
}
.notifications {
position: relative;
}
.n-notifications {
position: absolute;
bottom: -6px;
right: -2px;
width: 18px;
height: 18px;
color: #FFF;
font-size: 11px;
font-weight: bold;
text-align: center;
background-color: #a51f18;
border-radius: 9px;
}
.m-notifications {
position: absolute;
top: -6px;
right: -2px;
width: 18px;
height: 18px;
color: #FFF;
font-size: 11px;
font-weight: bold;
text-align: center;
background-color: #a51f18;
border-radius: 9px;
}
.window {
display: inline-block;
margin-left: 8px;
width: 280px;
height: 420px;
}
.window-com {
margin-top: 6px;
width: 100%;
height: 480px;
}
.window-title {
margin-left: 5px;
display: inline-block;
color: #FFF;
}
.window-title-com {
margin-left: 5px;
display: inline-block;
color: #000;
}
.window-icon {
display: inline-block;
color: #FFF;
}
.window-header {
padding: 6px;
width: 100%;
height: 40px;
background-color: var(--gab-blue);
border-radius: 8px 8px 0px 0px;
}
.window-header-com {
padding: 4px;
width: 100%;
height: 35px;
background-color: var(--gab-red);
border-radius: 8px 8px 0px 0px;
}
.window-content {
position: relative;
display: block;
width: 100%;
height: calc(100% - 80px);
background-color: #DDD;
}
.content-footer {
position: relative;
padding: 5px;
width: 100%;
height: 40px;
background-color: #DDD;
border-radius: 0px 0px 8px 8px;
}
.taba-btn {
text-align: center;
display: inline-block;
margin-left: 5px;
float: right;
width: 24px;
height: 24px;
background-color: #DDD;
border-radius: 12px;
}
.taba-hover {
cursor: pointer;
opacity: 1;
}
.taba-hover:hover {
opacity: 0.6;
}
.taba-self {
border: 1px solid #FFF;
background-color: #7ac143;
padding: 6px;
padding-top: 9px;
border-radius: 10px;
}
.taba-others {
border: 1px solid #FFF;
background-color: #5091cd;
padding: 6px;
padding-top: 9px;
border-radius: 10px;
}
.taba-bot {
border: 1px solid #FFF;
background-color: var(--gab-gray3);
padding: 6px;
padding-top: 9px;
border-radius: 10px;
}
.taba-dice {
border: 1px solid #FFF;
background-color: #f44321;
padding: 6px;
border-radius: 10px;
}
.taba-emoji {
border: 1px solid #FFF;
background-color: #5091cd;
padding: 6px;
border-radius: 10px;
}
.taba-user {
border: 1px solid #FFF;
background-color: #FFF;
padding: 6px;
border-radius: 6px;
word-wrap: break-word;
}
.taba-user-on {
border: 1px solid #FFF;
background-color: var(--gab-green);
padding: 6px;
border-radius: 8px;
}
.taba-feed {
border: 1px solid #FFF;
background-color: var(--gab-blue);
padding: 6px;
border-radius: 8px;
}
.openai_error {
border: 1px solid #FFF;
background-color: var(--gab-red);
padding: 6px;
border-radius: 8px;
}
.taba-msgsystem {
border: 1px solid #FFF;
background-color: #AAA;
padding: 6px;
border-radius: 10px;
}
.taba-msghead {
background-color: #f5f5f5;
padding: 4px;
padding-left: 10px;
padding-right: 6px;
border-radius: 6px 6px 0px 0px;
}
.taba-msg {
background-color: #f5f5f5;
padding: 8px;
border-radius: 0px 8px 8px 8px;
word-wrap: break-word;
}

222
src/media/css/global/social-media-demo.css
View File

@@ -1,222 +0,0 @@
@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
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: Moko-Cassiopeia
PATH: ./media/templates/site/moko-cassiopeia/css/global/social-media-demo.css
VERSION: 03.05.00
BRIEF: Demo styles for showcasing social media elements in Moko-Cassiopeia template
*/
/*
======================================================================
Social Media Demo — FULL CSS (Joomla-safe, fully scoped)
Scope: All selectors prefixed with .social-media-demo to avoid leakage
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).
INSTRUCTIONS:
- Save the images in their requried sizes into the [SITEROOT]/images/social/ folder with the exact names.
- For circle images, sue a square image t fille the entire space
- All images are center and miiddle aligned when loaded.
======================================================================
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)
Twitter / X
--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)
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)
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)
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)
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)
Pinterest Business
--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)
Reddit Community
--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');
--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');
--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');
--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');
--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');
--rd-cover-img: url('../../../../../image/social/rd-cover.jpg');
--rd-avatar-img: url('../../../../../image/social/rd-avatar.jpg');
}
/* DO NOT TOUCH */
.social-media-demo * { box-sizing: border-box; }
.social-media-demo section { margin: 24px auto; max-width: 1128px; background: #fff; border: 1px solid #d9dee3; border-radius: 12px; overflow: hidden; }
.social-media-demo section h2 { margin: 0; padding: 12px 16px; background: #f9fafb; border-bottom: 1px solid #d9dee3; font-size: 16px; font-weight: 800; color: #111; }
.social-media-demo .preview { padding: 16px; }
/* Header shell */
.social-media-demo .header { position: relative; border: 1px solid #d9dee3; border-radius: 12px; overflow: hidden; background: #fff; }
.social-media-demo .cover { position: relative; width: 100%; height: 200px; background-size: cover; background-position: center; background-color: #e8edf3; }
.social-media-demo .avatar-wrap { position: absolute; left: 16px; bottom: -48px; }
.social-media-demo .avatar,
.social-media-demo .logo { width: 160px; height: 160px; border: 4px solid #fff; background-size: cover; background-position: center; overflow: hidden; }
.social-media-demo .avatar.shown as circle, but use square image { border-radius: 999px; }
.social-media-demo .logo.rounded { border-radius: 16px; }
/* Meta */
.social-media-demo .meta { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 16px; padding-top: 56px; }
.social-media-demo .name { font-size: 22px; font-weight: 800; color: #111; }
.social-media-demo .subline { font-size: 13px; color: #666; }
/* Buttons */
.social-media-demo .btn { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid #d9dee3; background: #fff; font-weight: 700; color: #111; }
.social-media-demo .btn.primary { color: #fff; border-color: transparent; }
/* Placeholder visuals (used until you swap in real images) */
.social-media-demo .placeholder { position: relative; width: 100%; height: 100%; display: grid; place-items: center; text-align: center; font-weight: 600; color: #6b7280; background: repeating-linear-gradient(45deg,#f6f7f9 0 12px,#eef0f3 12px 24px); border: 1px dashed #cfd3d8; }
.social-media-demo .placeholder .dims { position: absolute; bottom: 8px; right: 8px; font-size: 12px; opacity: .85; }
/* 3) Platform brand colors & cover height tweaks (hard-coded colors on purpose) */
/* Facebook */
.social-media-demo #fb .btn.primary { background: #1877F2; }
.social-media-demo #fb .cover { height: 312px; }
@media (max-width: 480px) { .social-media-demo #fb .cover { height: 360px; } }
/* Twitter / X */
.social-media-demo #x .btn.primary { background: #1D9BF0; }
.social-media-demo #x .cover { height: 200px; background-color: #22303C; }
@media (max-width: 480px) { .social-media-demo #x .cover { height: 160px; } }
/* LinkedIn */
.social-media-demo #li .btn.primary { background: #0A66C2; }
.social-media-demo #li .cover { height: 220px; background-color: #e6edf5; }
@media (max-width: 480px) { .social-media-demo #li .cover { height: 160px; } }
/* Google Business Profile */
.social-media-demo #gmb .btn.primary { background: #4285F4; }
.social-media-demo #gmb .cover { height: 200px; }
@media (max-width: 480px) { .social-media-demo #gmb .cover { height: 140px; } }
/* Instagram Business */
.social-media-demo #ig .btn.primary { background: #E1306C; }
.social-media-demo #ig .cover { height: 200px; }
/* YouTube Channel */
.social-media-demo #yt .btn.primary { background: #FF0000; }
.social-media-demo #yt .cover { height: 180px; }
/* TikTok Business */
.social-media-demo #tt .btn.primary { background: #000000; color: #fff; }
.social-media-demo #tt .cover { height: 200px; }
/* Pinterest Business */
.social-media-demo #pin .btn.primary { background: #E60023; }
.social-media-demo #pin .cover { height: 200px; }
/* Snapchat Public Profile */
.social-media-demo #sc .btn.primary { background: #FFFC00; color: #000; }
.social-media-demo #sc .cover { height: 160px; }
/* Reddit Community */
.social-media-demo #rd .btn.primary { background: #FF4500; }
.social-media-demo #rd .cover { height: 180px; }
/* 4) Image assignments — map classes to variables (swap vars to change images) */
/* Facebook */
.social-media-demo .fb-cover { background-image: var(--fb-cover-img); }
.social-media-demo .fb-avatar { background-image: var(--fb-avatar-img); }
/* X */
.social-media-demo .x-cover { background-image: var(--x-cover-img); }
.social-media-demo .x-avatar { background-image: var(--x-avatar-img); }
/* LinkedIn */
.social-media-demo .li-cover { background-image: var(--li-cover-img); }
.social-media-demo .li-logo { background-image: var(--li-logo-img); }
/* Google Business */
.social-media-demo .gmb-cover { background-image: var(--gmb-cover-img); }
.social-media-demo .gmb-logo { background-image: var(--gmb-logo-img); }
/* Instagram */
.social-media-demo .ig-cover { background-image: var(--ig-cover-img); }
.social-media-demo .ig-avatar { background-image: var(--ig-avatar-img); }
/* YouTube */
.social-media-demo .yt-cover { background-image: var(--yt-cover-img); }
.social-media-demo .yt-avatar { background-image: var(--yt-avatar-img); }
/* TikTok */
.social-media-demo .tt-cover { background-image: var(--tt-cover-img); }
.social-media-demo .tt-avatar { background-image: var(--tt-avatar-img); }
/* Pinterest */
.social-media-demo .pin-cover { background-image: var(--pin-cover-img); }
.social-media-demo .pin-avatar { background-image: var(--pin-avatar-img); }
/* Snapchat */
.social-media-demo .sc-cover { background-image: var(--sc-cover-img); }
.social-media-demo .sc-avatar { background-image: var(--sc-avatar-img); }
/* Reddit */
.social-media-demo .rd-cover { background-image: var(--rd-cover-img); }
.social-media-demo .rd-avatar { background-image: var(--rd-avatar-img); }

5559
src/media/css/template.css
View File

File diff suppressed because it is too large Load Diff

2
src/media/js/template.js
View File

@@ -11,7 +11,7 @@
VERSION: 03.05.00
BRIEF: Core JavaScript utilities and behaviors for Moko-Cassiopeia template
*/
!function(a){"use strict";window.Toc={helpers:{findOrFilter:function(e,t){var n=e.find(t);return e.filter(t).add(n).filter(":not([data-toc-skip])")},generateUniqueIdBase:function(e){return a(e).text().trim().replace(/\'/gi,"").replace(/[& +$,:;=?@"#{}|^~[`%!'<>\]\.\/\(\)\*\\\n\t\b\v]/g,"-").replace(/-{2,}/g,"-").substring(0,64).replace(/^-+|-+$/gm,"").toLowerCase()||e.tagName.toLowerCase()},generateUniqueId:function(e){for(var t=this.generateUniqueIdBase(e),n=0;;n++){var r=t;if(0<n&&(r+="-"+n),!document.getElementById(r))return r}},generateAnchor:function(e){if(e.id)return e.id;var t=this.generateUniqueId(e);return e.id=t},createNavList:function(){return a('<ul class="nav navbar-nav"></ul>')},createChildNavList:function(e){var t=this.createNavList();return e.append(t),t},generateNavEl:function(e,t){var n=a('<a class="nav-link"></a>');n.attr("href","#"+e),n.text(t);var r=a("<li></li>");return r.append(n),r},generateNavItem:function(e){var t=this.generateAnchor(e),n=a(e),r=n.data("toc-text")||n.text();return this.generateNavEl(t,r)},getTopLevel:function(e){for(var t=1;t<=6;t++){if(1<this.findOrFilter(e,"h"+t).length)return t}return 1},getHeadings:function(e,t){var n="h"+t,r="h"+(t+1);return this.findOrFilter(e,n+","+r)},getNavLevel:function(e){return parseInt(e.tagName.charAt(1),10)},populateNav:function(r,a,e){var i,s=r,c=this;e.each(function(e,t){var n=c.generateNavItem(t);c.getNavLevel(t)===a?s=r:i&&s===r&&(s=c.createChildNavList(i)),s.append(n),i=n})},parseOps:function(e){var t;return(t=e.jquery?{$nav:e}:e).$scope=t.$scope||a(document.body),t}},init:function(e){(e=this.helpers.parseOps(e)).$nav.attr("data-toggle","toc");var t=this.helpers.createChildNavList(e.$nav),n=this.helpers.getTopLevel(e.$scope),r=this.helpers.getHeadings(e.$scope,n);this.helpers.populateNav(t,n,r)}},a(function(){a('nav[data-toggle="toc"]').each(function(e,t){var n=a(t);Toc.init(n)})})}(jQuery);
(function (win, doc) {
"use strict";

21
src/media/js/user.js Normal file
View File

@@ -0,0 +1,21 @@
/* 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.Site
INGROUP: Moko-Cassiopeia
REPO: https://github.com/mokoconsulting-tech/moko-cassiopeia
PATH: ./media/templates/site/moko-cassiopeia/js/user.js
VERSION: 03.00.00
BRIEF: JavaScript for handling user-specific interactions in Moko-Cassiopeia template
*/

4
src/media/vendor/afeld/bootstrap-toc.min.css vendored
View File

@@ -1,4 +0,0 @@
/*!
* Bootstrap Table of Contents v1.0.1 (http://afeld.github.io/bootstrap-toc/)
* Copyright 2015 Aidan Feldman
* Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */nav[data-toggle=toc] .nav>li>a{display:block;padding:4px 20px;font-size:13px;font-weight:500;color:#767676}nav[data-toggle=toc] .nav>li>a:focus,nav[data-toggle=toc] .nav>li>a:hover{padding-left:19px;color:#563d7c;text-decoration:none;background-color:transparent;border-left:1px solid #563d7c}nav[data-toggle=toc] .nav-link.active,nav[data-toggle=toc] .nav-link.active:focus,nav[data-toggle=toc] .nav-link.active:hover{padding-left:18px;font-weight:700;color:#563d7c;background-color:transparent;border-left:2px solid #563d7c}nav[data-toggle=toc] .nav-link+ul{display:none;padding-bottom:10px}nav[data-toggle=toc] .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}nav[data-toggle=toc] .nav .nav>li>a:focus,nav[data-toggle=toc] .nav .nav>li>a:hover{padding-left:29px}nav[data-toggle=toc] .nav .nav>li>.active,nav[data-toggle=toc] .nav .nav>li>.active:focus,nav[data-toggle=toc] .nav .nav>li>.active:hover{padding-left:28px;font-weight:500}nav[data-toggle=toc] .nav-link.active+ul{display:block}

5
src/media/vendor/afeld/bootstrap-toc.min.js vendored
View File

@@ -1,5 +0,0 @@
/*!
* Bootstrap Table of Contents v1.0.1 (http://afeld.github.io/bootstrap-toc/)
* Copyright 2015 Aidan Feldman
* Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */
!function(a){"use strict";window.Toc={helpers:{findOrFilter:function(e,t){var n=e.find(t);return e.filter(t).add(n).filter(":not([data-toc-skip])")},generateUniqueIdBase:function(e){return a(e).text().trim().replace(/\'/gi,"").replace(/[& +$,:;=?@"#{}|^~[`%!'<>\]\.\/\(\)\*\\\n\t\b\v]/g,"-").replace(/-{2,}/g,"-").substring(0,64).replace(/^-+|-+$/gm,"").toLowerCase()||e.tagName.toLowerCase()},generateUniqueId:function(e){for(var t=this.generateUniqueIdBase(e),n=0;;n++){var r=t;if(0<n&&(r+="-"+n),!document.getElementById(r))return r}},generateAnchor:function(e){if(e.id)return e.id;var t=this.generateUniqueId(e);return e.id=t},createNavList:function(){return a('<ul class="nav navbar-nav"></ul>')},createChildNavList:function(e){var t=this.createNavList();return e.append(t),t},generateNavEl:function(e,t){var n=a('<a class="nav-link"></a>');n.attr("href","#"+e),n.text(t);var r=a("<li></li>");return r.append(n),r},generateNavItem:function(e){var t=this.generateAnchor(e),n=a(e),r=n.data("toc-text")||n.text();return this.generateNavEl(t,r)},getTopLevel:function(e){for(var t=1;t<=6;t++){if(1<this.findOrFilter(e,"h"+t).length)return t}return 1},getHeadings:function(e,t){var n="h"+t,r="h"+(t+1);return this.findOrFilter(e,n+","+r)},getNavLevel:function(e){return parseInt(e.tagName.charAt(1),10)},populateNav:function(r,a,e){var i,s=r,c=this;e.each(function(e,t){var n=c.generateNavItem(t);c.getNavLevel(t)===a?s=r:i&&s===r&&(s=c.createChildNavList(i)),s.append(n),i=n})},parseOps:function(e){var t;return(t=e.jquery?{$nav:e}:e).$scope=t.$scope||a(document.body),t}},init:function(e){(e=this.helpers.parseOps(e)).$nav.attr("data-toggle","toc");var t=this.helpers.createChildNavList(e.$nav),n=this.helpers.getTopLevel(e.$scope),r=this.helpers.getHeadings(e.$scope,n);this.helpers.populateNav(t,n,r)}},a(function(){a('nav[data-toggle="toc"]').each(function(e,t){var n=a(t);Toc.init(n)})})}(jQuery);

513
src/media/vendor/choicesjs/choices.css vendored
View File

@@ -1,513 +0,0 @@
@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
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: Moko-Cassiopeia
PATH: ./media/templates/site/moko-cassiopeia/css/vendor/choicesjs/choices.css
VERSION: 03.00.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;
}
.choices:focus {
outline: none;
}
.choices:last-child {
margin-bottom: 0;
}
.choices.is-open {
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;
}
.choices.is-disabled .choices__item {
cursor: not-allowed;
}
.choices [hidden] {
display: none !important;
}
.choices[data-type*=select-one] {
cursor: pointer;
}
.choices[data-type*=select-one] .choices__inner {
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;
}
.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;
}
.choices[data-type*=select-one] .choices__button:hover, .choices[data-type*=select-one] .choices__button:focus {
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;
}
.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button {
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;
}
.choices[data-type*=select-one].is-open::after {
border-color: transparent transparent #333 transparent;
margin-top: -7.5px;
}
.choices[data-type*=select-one][dir=rtl]::after {
left: 11.5px;
right: auto;
}
.choices[data-type*=select-one][dir=rtl] .choices__button {
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;
}
.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;
}
.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;
}
.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;
}
.is-focused .choices__inner, .is-open .choices__inner {
border-color: #b7b7b7;
}
.is-open .choices__inner {
border-radius: 2.5px 2.5px 0 0;
}
.is-flipped.is-open .choices__inner {
border-radius: 0 0 2.5px 2.5px;
}
.choices__list {
margin: 0;
padding-left: 0;
list-style: none;
}
.choices__list--single {
display: inline-block;
padding: 4px 16px 4px 4px;
width: 100%;
}
[dir=rtl] .choices__list--single {
padding-right: 4px;
padding-left: 16px;
}
.choices__list--single .choices__item {
width: 100%;
}
.choices__list--multiple {
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;
}
.choices__list--multiple .choices__item[data-deletable] {
padding-right: 5px;
}
[dir=rtl] .choices__list--multiple .choices__item {
margin-right: 0;
margin-left: 3.75px;
}
.choices__list--multiple .choices__item.is-highlighted {
background-color: #00a5bb;
border: 1px solid #008fa1;
}
.is-disabled .choices__list--multiple .choices__item {
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;
}
.choices__list--dropdown.is-active {
visibility: visible;
}
.is-open .choices__list--dropdown {
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;
}
.choices__list--dropdown .choices__list {
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;
}
[dir=rtl] .choices__list--dropdown .choices__item {
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.is-highlighted {
background-color: #f2f2f2;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted::after {
opacity: 0.5;
}
.choices__item {
cursor: default;
}
.choices__item--selectable {
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;
}
.choices__heading {
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;
}
.choices__button:focus {
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;
}
.choices__input:focus {
outline: 0;
}
[dir=rtl] .choices__input {
padding-right: 2px;
padding-left: 0;
}
.choices__placeholder {
opacity: 0.5;
}
/* ===== End of Choices ====== */
.choices {
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);
}
.choices__inner {
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;
}
.choices__input::-webkit-input-placeholder {
color: hsl(210, 9%, 31%);
opacity: 1;
}
.choices__input::-moz-placeholder {
color: hsl(210, 9%, 31%);
opacity: 1;
}
.choices__input:-ms-input-placeholder {
color: hsl(210, 9%, 31%);
opacity: 1;
}
.choices__input::-ms-input-placeholder {
color: hsl(210, 9%, 31%);
opacity: 1;
}
.choices__input::placeholder {
color: hsl(210, 9%, 31%);
opacity: 1;
}
.choices__list--dropdown {
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;
}
.choices__list--multiple .choices__item.is-highlighted {
background-color: var(--color-primary);
opacity: 0.9;
}
.choices .choices__list--dropdown .choices__item {
-webkit-padding-end: 10px;
padding-inline-end: 10px;
}
.choices .choices__list--dropdown .choices__item--selectable::after {
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;
}
.choices__button_joomla::before {
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;
}
.choices__button_joomla:focus {
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%);
}
[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%);
}
.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;
}
.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;
}
.choices[data-type*=select-one] .choices__button_joomla:hover, .choices[data-type*=select-one] .choices__button_joomla:focus {
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;
}
.choices[data-type*=select-one]::after {
display: none;
}
.choices[data-type*=select-multiple] .choices__input,
.choices[data-type*=text] .choices__input {
padding: 0.2rem 0;
}
.choices__heading {
font-size: 1.2rem;
}

81
src/media/vendor/choicesjs/index.html vendored
View File

@@ -1,81 +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
# 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>
(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>

81
src/media/vendor/joomla-custom-elements/index.html vendored
View File

@@ -1,81 +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
# 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>
(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>

161
src/media/vendor/joomla-custom-elements/joomla-alert.css vendored
View File

@@ -1,161 +0,0 @@
@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
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: Moko-Cassiopeia
PATH: ./media/templates/site/moko-cassiopeia/css/vendor/choicesjs/choices.css
VERSION: 03.00.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;
}
#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;
}
#system-message-container joomla-alert + * {
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);
}
#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%;
}
#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%;
}
#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%;
}
#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%;
}
#system-message-container joomla-alert .alert-wrapper {
width: 100%;
}
#system-message-container joomla-alert .alert-link {
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%);
}
#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%);
}
#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%);
}
#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%);
}
#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;
}
#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;
}
[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;
}
#system-message-container joomla-alert div {
font-size: 1rem;
}
#system-message-container joomla-alert div .alert-message {
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;
}
#system-message-container joomla-alert div .alert-message:not(:first-of-type) {
border-top: 1px solid var(--alert-accent-color);
}