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

v03.09.16: brand-aside columns, offline page redesign, variable click-to-copy
Some checks failed
Repo Health / Access control (push) Failing after 1s
Details
Repo Health / Release configuration (push) Has been skipped
Details
Repo Health / Scripts governance (push) Has been skipped
Details
Repo Health / Repository health (push) Has been skipped
Details
Auto-Update SHA Hash / Update SHA-256 Hash in updates.xml (release) Failing after 40s
Details

Browse Source 
- Brand-aside position now uses flex columns like top-a (card style, equal-width)
- Offline page: external offline.css with theme variables, 3-column centered card
  layout, Osaka font loading, full-screen on mobile
- CSS variable click-to-copy: scans text for --var patterns, wraps in clickable
  chips with toast notification on copy
- Search button border matches input border (--input-border-color)
- mod_stats override: converted from dl to table layout
- Patch bump 03.09.15 → 03.09.16

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
2026-04-16 00:56:20 -05:00
parent 3c9cd8383c
commit cb4468af19
10 changed files with 568 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -9,7 +9,7 @@
INGROUP: MokoCassiopeia.Documentation
REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia
FILE: ./README.md
VERSION: 03.09.15
VERSION: 03.09.16
BRIEF: Documentation for MokoCassiopeia template
-->

16
src/html/mod_stats/default.php
View File

@@ -26,10 +26,14 @@ $headerClass = htmlspecialchars($params->get('header_class', ''), ENT_COMPAT, 'U
<?php if ($module->showtitle) : ?>
<<?php echo $headerTag; ?> class="mod-stats__title<?php echo $headerClass ? ' ' . $headerClass : ''; ?>"><?php echo $module->title; ?></<?php echo $headerTag; ?>>
<?php endif; ?>
<dl class="mod-stats__list">
<?php foreach ($list as $item) : ?>
<dt class="mod-stats__label"><?php echo $item->title; ?></dt>
<dd class="mod-stats__data"><?php echo $item->data; ?></dd>
<?php endforeach; ?>
</dl>
<table class="mod_stats__table">
<tbody>
<?php foreach ($list as $item) : ?>
<tr>
<th class="mod_stats__label" scope="row"><?php echo $item->title; ?></th>
<td class="mod_stats__data"><?php echo $item->data; ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>

2
src/index.php
View File

@@ -406,7 +406,7 @@ $wa->useScript('user.js'); // js/user.js
</div>
<?php if ($this->countModules('brand-aside', true)) : ?>
<div class="container-brand-aside">
<jdoc:include type="modules" name="brand-aside" style="none" />
<jdoc:include type="modules" name="brand-aside" style="card" />
</div>
<?php endif; ?>
</div>

2
src/joomla.asset.json
View File

@@ -17,7 +17,7 @@
"defgroup": "Joomla.Template.Site",
"ingroup": "MokoCassiopeia.Template.Assets",
"path": "./media/templates/site/mokocassiopeia/joomla.asset.json",
"version": "03.09.15",
"version": "03.09.16",
"brief": "Joomla asset registry for MokoCassiopeia"
}
},

237
src/media/css/offline.css Normal file
View File

@@ -0,0 +1,237 @@
/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
This file is part of a Moko Consulting project.
SPDX-License-Identifier: GPL-3.0-or-later
*/
/* === Offline Page Layout === */
.moko-offline-wrap {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
background-color: var(--body-bg, #0e1318);
color: var(--body-font-color, #e6ebf1);
font-family: var(--body-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}
.moko-offline-main {
display: grid;
place-items: center;
padding: 2rem 1rem;
}
/* === Centered Card Grid === */
.moko-offline-grid {
display: grid;
grid-template-columns: 1fr minmax(0, 720px) 1fr;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.moko-offline-grid__side {
display: block;
}
.moko-offline-grid__center {
min-width: 0;
}
@media (max-width: 767.98px) {
.moko-offline-grid {
grid-template-columns: 1fr;
}
.moko-offline-grid__side {
display: none;
}
.moko-offline-main {
padding: 0;
}
.moko-offline-card {
border-radius: 0;
border: none;
min-height: 100%;
}
}
/* === Card === */
.moko-offline-card {
background-color: var(--card-bg, var(--secondary-bg, #151b22));
border: var(--card-border-width, 1px) solid var(--card-border-color, var(--border-color, #2b323b));
border-radius: var(--border-radius, 0.25rem);
box-shadow: var(--box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.26));
padding: 2.5rem;
}
@media (min-width: 768px) {
.moko-offline-card {
padding: 3rem;
}
}
/* === Brand / Logo === */
.moko-offline-brand {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.75rem;
text-decoration: none;
color: var(--body-font-color, #e6ebf1);
margin-bottom: 2rem;
}
.moko-offline-brand:hover {
color: var(--color-link, #8ab4f8);
}
.moko-offline-brand img {
max-width: 200px;
max-height: 80px;
width: auto;
height: auto;
}
.moko-offline-brand .site-title {
font-size: 1.75rem;
font-weight: 700;
font-family: 'Osaka', var(--body-font-family, sans-serif);
}
.moko-offline-brand .brand-tagline {
display: block;
opacity: 0.75;
font-size: 0.875rem;
line-height: 1.2;
}
/* === Header === */
.moko-offline-header {
background-color: var(--header-bg, var(--color-primary, #112855));
color: var(--mainmenu-nav-link-color, #fff);
padding: 1rem 0;
}
.moko-offline-header .container {
display: flex;
align-items: center;
gap: 1rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.moko-offline-header .moko-brand {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
color: var(--mainmenu-nav-link-color, #fff);
}
.moko-offline-header .moko-brand img {
max-width: 180px;
max-height: 60px;
width: auto;
height: auto;
}
.moko-offline-header .moko-brand .brand-tagline {
display: block;
opacity: 0.75;
font-size: 0.875rem;
line-height: 1.2;
}
/* === Content Typography === */
.moko-offline-card h1 {
color: var(--heading-color, var(--body-font-color, #f1f5f9));
font-weight: 700;
}
.moko-offline-card .lead {
color: var(--gray-600, #48525d);
line-height: 1.6;
}
/* === Accordion === */
.moko-offline-card .accordion-item {
background-color: var(--card-bg, var(--secondary-bg, #151b22));
border-color: var(--border-color, #2b323b);
}
.moko-offline-card .accordion-button {
background-color: var(--card-bg, var(--secondary-bg, #151b22));
color: var(--body-font-color, #e6ebf1);
}
.moko-offline-card .accordion-button:not(.collapsed) {
background-color: var(--card-cap-bg, rgba(255, 255, 255, 0.03));
color: var(--body-font-color, #e6ebf1);
}
.moko-offline-card .accordion-body {
background-color: var(--card-bg, var(--secondary-bg, #151b22));
}
/* === Form Controls === */
.moko-offline-card .form-control {
background-color: var(--input-bg, #1a2332);
border-color: var(--input-border-color, #3a4250);
color: var(--input-color, #e6ebf1);
}
.moko-offline-card .form-control:focus {
border-color: var(--input-focus-border-color, #5472ff);
box-shadow: var(--input-focus-box-shadow, 0 0 0 0.25rem rgba(84, 114, 255, 0.25));
}
.moko-offline-card .form-label {
color: var(--body-font-color, #e6ebf1);
}
.moko-offline-card .form-check-label {
color: var(--body-font-color, #e6ebf1);
}
/* === Button === */
.moko-offline-card .btn-primary {
background-color: var(--color-primary, #112855);
border-color: var(--color-primary, #112855);
color: var(--mainmenu-nav-link-color, #fff);
}
.moko-offline-card .btn-primary:hover {
background-color: var(--color-hover, gray);
border-color: var(--color-hover, gray);
}
/* === Links === */
.moko-offline-card a {
color: var(--link-color, var(--color-link, #8ab4f8));
}
.moko-offline-card a:hover {
color: var(--link-hover-color, #c3d6ff);
}
/* === Skip Link === */
.skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-link:focus {
position: static;
width: auto;
height: auto;
padding: 0.5rem 1rem;
}

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

@@ -14233,6 +14233,28 @@ fieldset>* {
margin-inline-start: auto;
display: flex;
align-items: center;
gap: 1em;
}
.container-brand-aside>* {
flex: 1;
margin: 0.5em 0;
}
@media (max-width: 991.98px) {
.header-brand-wrap {
flex-direction: column;
align-items: stretch;
}
.container-brand-aside {
margin-inline-start: 0;
flex-direction: column;
}
.container-brand-aside>* {
flex: 0 1 auto;
}
}
.container-header .navbar-brand {
@@ -18659,7 +18681,7 @@ nav[data-toggle=toc] .nav-link.active+ul{
flex: 0 0 auto;
background-color: var(--color-primary, #112855);
color: var(--mainmenu-nav-link-color, #fff);
border-color: var(--color-primary, #112855);
border: 1px solid var(--input-border-color, #3a4250);
padding: 0.6rem 1rem;
border-radius: 0 0.25rem 0.25rem 0;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
@@ -18668,7 +18690,7 @@ nav[data-toggle=toc] .nav-link.active+ul{
.mod-finder__search.input-group button:hover,
.container-search button[type="submit"]:hover {
background-color: var(--color-hover, gray);
border-color: var(--color-hover, gray);
border-color: var(--input-border-color, #3a4250);
}
.mod-finder__search.input-group button:focus,
@@ -21637,6 +21659,33 @@ nav[data-toggle=toc] .nav-link.active+ul{
color: var(--gray-600, #48525d);
}
/* === mod_stats === */
.mod_stats__table {
width: 100%;
border-collapse: collapse;
}
.mod_stats__table tr {
border-bottom: 1px solid var(--border-color, #2b323b);
}
.mod_stats__table tr:last-child {
border-bottom: none;
}
.mod_stats__label {
text-align: start;
font-weight: 600;
padding: 0.6rem 1rem 0.6rem 0;
color: var(--body-font-color, #e6ebf1);
}
.mod_stats__data {
text-align: end;
padding: 0.6rem 0;
color: var(--gray-600, #48525d);
}
/* === Mobile Responsive Adjustments === */
@media (max-width: 575.98px) {
.mod-kunena-login__input {

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

@@ -641,6 +641,154 @@
});
}
// ========================================================================
// CSS VARIABLE CLICK-TO-COPY
// ========================================================================
/**
* Inject toast + variable-chip styles once.
*/
function injectVarCopyStyles() {
if (doc.getElementById("moko-var-copy-styles")) return;
var style = doc.createElement("style");
style.id = "moko-var-copy-styles";
style.textContent =
".moko-var-chip{cursor:pointer;font-family:var(--font-monospace,monospace);font-size:.875em;" +
"background:var(--secondary-bg,#151b22);color:var(--link-color,#8ab4f8);" +
"border:1px solid var(--border-color,#2b323b);border-radius:.25rem;padding:.1em .4em;" +
"transition:background .15s,border-color .15s;white-space:nowrap;display:inline}" +
".moko-var-chip:hover{background:var(--color-primary,#112855);color:#fff;border-color:var(--color-primary,#112855)}" +
".moko-toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:10000;" +
"background:var(--color-primary,#112855);color:#fff;padding:.6rem 1.25rem;" +
"border-radius:.375rem;font-size:.875rem;box-shadow:0 4px 12px rgba(0,0,0,.25);" +
"opacity:0;transition:opacity .2s;pointer-events:none}" +
".moko-toast--show{opacity:1}";
doc.head.appendChild(style);
}
/**
* Show a brief "Copied to clipboard" toast.
* @param {string} text - The variable name that was copied
*/
function showCopyToast(text) {
var existing = doc.querySelector(".moko-toast");
if (existing) existing.remove();
var toast = doc.createElement("div");
toast.className = "moko-toast";
toast.textContent = "Copied to clipboard: " + text;
doc.body.appendChild(toast);
// Trigger reflow then show
void toast.offsetWidth;
toast.classList.add("moko-toast--show");
setTimeout(function () {
toast.classList.remove("moko-toast--show");
setTimeout(function () { toast.remove(); }, 200);
}, 2000);
}
/**
* Copy text to clipboard and show toast.
* @param {string} text
*/
function copyVariable(text) {
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(function () {
showCopyToast(text);
});
} else {
// Fallback for older browsers using deprecated API
var ta = doc.createElement("textarea");
ta.value = text;
ta.style.cssText = "position:fixed;left:-9999px";
doc.body.appendChild(ta);
ta.select();
try { doc.execCommand("copy"); } catch (e) { /* noop */ }
ta.remove();
showCopyToast(text);
}
}
/**
* Scan text nodes for CSS variable patterns (--variable-name) and wrap
* each match in a clickable chip that copies the variable to clipboard.
*/
function initVarCopy() {
injectVarCopyStyles();
// Pattern: --[a-zA-Z] followed by word/hyphen chars
var varPattern = /--[a-zA-Z][\w-]*/g;
// Elements to skip (inputs, scripts, styles, already-processed, code editors)
var SKIP_TAGS = { SCRIPT: 1, STYLE: 1, TEXTAREA: 1, INPUT: 1, SELECT: 1, NOSCRIPT: 1 };
var walker = doc.createTreeWalker(
doc.body,
NodeFilter.SHOW_TEXT,
{
acceptNode: function (node) {
if (SKIP_TAGS[node.parentNode.tagName]) return NodeFilter.FILTER_REJECT;
if (node.parentNode.classList && node.parentNode.classList.contains("moko-var-chip")) return NodeFilter.FILTER_REJECT;
if (!varPattern.test(node.nodeValue)) return NodeFilter.FILTER_REJECT;
varPattern.lastIndex = 0;
return NodeFilter.FILTER_ACCEPT;
}
}
);
var textNodes = [];
while (walker.nextNode()) textNodes.push(walker.currentNode);
textNodes.forEach(function (node) {
var text = node.nodeValue;
var frag = doc.createDocumentFragment();
var lastIndex = 0;
var match;
varPattern.lastIndex = 0;
while ((match = varPattern.exec(text)) !== null) {
// Text before the match
if (match.index > lastIndex) {
frag.appendChild(doc.createTextNode(text.slice(lastIndex, match.index)));
}
// Clickable chip
var chip = doc.createElement("span");
chip.className = "moko-var-chip";
chip.textContent = match[0];
chip.setAttribute("role", "button");
chip.setAttribute("tabindex", "0");
chip.setAttribute("title", "Click to copy " + match[0]);
chip.addEventListener("click", (function (varName) {
return function (e) {
e.preventDefault();
copyVariable(varName);
};
})(match[0]));
chip.addEventListener("keydown", (function (varName) {
return function (e) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
copyVariable(varName);
}
};
})(match[0]));
frag.appendChild(chip);
lastIndex = match.index + match[0].length;
}
// Remaining text after last match
if (lastIndex < text.length) {
frag.appendChild(doc.createTextNode(text.slice(lastIndex)));
}
node.parentNode.replaceChild(frag, node);
});
}
/**
* Run all template JS initializations
*/
@@ -667,6 +815,7 @@
initBackTop();
initSearchToggle();
initSidebarAccordion();
initVarCopy();
}
if (doc.readyState === "loading") {

204
src/offline.php
View File

@@ -38,6 +38,10 @@ $base = rtrim(Uri::root(true), '/') . '/templates/' . $this->template . '
$jsBase = rtrim(Uri::root(true), '/') . '/templates/' . $this->template . '/js/';
$doc->addStyleSheet($base . 'template' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-template']);
$doc->addStyleSheet($base . 'offline' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-offline']);
/* Load Osaka font for site title */
$doc->addStyleSheet($base . 'fonts/osaka.css', ['version' => 'auto'], ['id' => 'moko-font-osaka']);
/* Load theme palettes */
$doc->addStyleSheet($base . 'theme/light.standard' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-light-standard']);
@@ -168,15 +172,6 @@ if (class_exists('\Joomla\Component\Users\Site\Helper\RouteHelper')) {
</script>
<?php endif; ?>
<style>
.moko-offline-wrap { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.moko-offline-main { display: grid; place-items: center; padding: 2rem 1rem; }
.moko-card { max-width: 720px; width: 100%; }
.moko-brand { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.moko-brand .brand-tagline { display:block; opacity:.75; font-size:.875rem; line-height:1.2; }
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:static; width:auto; height:auto; padding:.5rem 1rem; }
</style>
</head>
<body class="site moko-offline-wrap <?php echo htmlspecialchars($direction, ENT_QUOTES, 'UTF-8'); ?>">
<?php if (!empty($params_googletagmanager) && !empty($params_googletagmanagerid)) :
@@ -234,121 +229,120 @@ if (class_exists('\Joomla\Component\Users\Site\Helper\RouteHelper')) {
<a class="skip-link" href="#maincontent"><?php echo Text::_('JSKIP_TO_CONTENT') ?: 'Skip to content'; ?></a>
<header class="container-header header py-3">
<div class="grid-child container-nav d-flex align-items-center gap-3">
<!-- Brand (mutually exclusive image/text) -->
<a class="moko-brand me-auto" href="<?php echo htmlspecialchars(Uri::base(), ENT_QUOTES, 'UTF-8'); ?>" aria-label="<?php echo htmlspecialchars($sitename, ENT_COMPAT, 'UTF-8'); ?>">
<?php echo $brandHtml; ?>
<?php if ($showTagline && $brandTagline): ?>
<small class="brand-tagline"><?php echo htmlspecialchars($brandTagline, ENT_COMPAT, 'UTF-8'); ?></small>
<?php endif; ?>
</a>
<!-- Header module position: offline-header -->
<?php if ($this->countModules('offline-header')) : ?>
<div class="ms-2">
<jdoc:include type="modules" name="offline-header" style="none" />
</div>
<?php endif; ?>
</div>
</header>
<?php if ($this->countModules('offline-header')) : ?>
<header class="moko-offline-header">
<div class="container">
<jdoc:include type="modules" name="offline-header" style="none" />
</div>
</header>
<?php endif; ?>
<main id="maincontent" class="moko-offline-main">
<div class="container">
<jdoc:include type="message" />
<jdoc:include type="message" />
<div class="moko-card card shadow-sm rounded-3 p-4 p-md-5">
<?php if ($displayOfflineMessage === 1 && $offlineMessage !== '') : ?>
<div class="mb-4">
<h1 class="h3 mb-2"><?php echo Text::_('JOFFLINE_MESSAGE') ?: 'Site Offline'; ?></h1>
<p class="lead mb-0"><?php echo $offlineMessage; ?></p>
</div>
<?php elseif ($displayOfflineMessage === 2) : ?>
<div class="mb-4">
<h1 class="h3 mb-2"><?php echo Text::_('JOFFLINE_MESSAGE') ?: 'Site Offline'; ?></h1>
<p class="lead mb-0">
<?php echo Text::_('JOFFLINE_MESSAGE_DEFAULT') ?: 'This site is down for maintenance. Please check back soon.'; ?>
</p>
</div>
<?php endif; ?>
<div class="moko-offline-grid">
<div class="moko-offline-grid__side"></div>
<div class="moko-offline-grid__center">
<div class="moko-offline-card">
<!-- Centered logo -->
<a class="moko-offline-brand" href="<?php echo htmlspecialchars(Uri::base(), ENT_QUOTES, 'UTF-8'); ?>" aria-label="<?php echo htmlspecialchars($sitename, ENT_COMPAT, 'UTF-8'); ?>">
<?php echo $brandHtml; ?>
<?php if ($showTagline && $brandTagline): ?>
<small class="brand-tagline"><?php echo htmlspecialchars($brandTagline, ENT_COMPAT, 'UTF-8'); ?></small>
<?php endif; ?>
</a>
<!-- Main offline module position -->
<?php if ($this->countModules('offline')) : ?>
<section class="mb-4" aria-label="Offline modules">
<jdoc:include type="modules" name="offline" style="none" />
</section>
<?php endif; ?>
<?php if ($displayOfflineMessage === 1 && $offlineMessage !== '') : ?>
<div class="mb-4 text-center">
<h1 class="h3 mb-2"><?php echo Text::_('JOFFLINE_MESSAGE') ?: 'Site Offline'; ?></h1>
<p class="lead mb-0"><?php echo $offlineMessage; ?></p>
</div>
<?php elseif ($displayOfflineMessage === 2) : ?>
<div class="mb-4 text-center">
<h1 class="h3 mb-2"><?php echo Text::_('JOFFLINE_MESSAGE') ?: 'Site Offline'; ?></h1>
<p class="lead mb-0">
<?php echo Text::_('JOFFLINE_MESSAGE_DEFAULT') ?: 'This site is down for maintenance. Please check back soon.'; ?>
</p>
</div>
<?php endif; ?>
<!-- Login UNDER an accordion (collapsed by default) -->
<div class="accordion" id="offlineAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingLogin">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseLogin"
aria-expanded="false" aria-controls="collapseLogin">
<?php echo Text::_('JLOGIN'); ?>
</button>
</h2>
<div id="collapseLogin" class="accordion-collapse collapse" aria-labelledby="headingLogin" data-bs-parent="#offlineAccordion">
<div class="accordion-body">
<form action="<?php echo $action; ?>" method="post" class="form-validate">
<fieldset>
<legend class="visually-hidden"><?php echo Text::_('JLOGIN'); ?></legend>
<!-- Main offline module position -->
<?php if ($this->countModules('offline')) : ?>
<section class="mb-4" aria-label="Offline modules">
<jdoc:include type="modules" name="offline" style="none" />
</section>
<?php endif; ?>
<div class="mb-3">
<label class="form-label" for="username"><?php echo Text::_('JGLOBAL_USERNAME'); ?></label>
<input class="form-control" type="text" name="username" id="username" autocomplete="username" required aria-required="true">
</div>
<!-- Login accordion (collapsed by default) -->
<div class="accordion" id="offlineAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingLogin">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseLogin"
aria-expanded="false" aria-controls="collapseLogin">
<?php echo Text::_('JLOGIN'); ?>
</button>
</h2>
<div id="collapseLogin" class="accordion-collapse collapse" aria-labelledby="headingLogin" data-bs-parent="#offlineAccordion">
<div class="accordion-body">
<form action="<?php echo $action; ?>" method="post" class="form-validate">
<fieldset>
<legend class="visually-hidden"><?php echo Text::_('JLOGIN'); ?></legend>
<div class="mb-3">
<label class="form-label" for="password"><?php echo Text::_('JGLOBAL_PASSWORD'); ?></label>
<input class="form-control" type="password" name="password" id="password" autocomplete="current-password" required aria-required="true">
</div>
<div class="mb-3">
<label class="form-label" for="username"><?php echo Text::_('JGLOBAL_USERNAME'); ?></label>
<input class="form-control" type="text" name="username" id="username" autocomplete="username" required aria-required="true">
</div>
<div class="mb-3">
<label class="form-label" for="secretkey"><?php echo Text::_('JGLOBAL_SECRETKEY'); ?></label>
<input class="form-control" type="text" name="secretkey" id="secretkey" autocomplete="one-time-code" placeholder="<?php echo Text::_('JGLOBAL_SECRETKEY'); ?>">
</div>
<div class="mb-3">
<label class="form-label" for="password"><?php echo Text::_('JGLOBAL_PASSWORD'); ?></label>
<input class="form-control" type="password" name="password" id="password" autocomplete="current-password" required aria-required="true">
</div>
<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" name="remember" id="remember">
<label class="form-check-label" for="remember"><?php echo Text::_('JGLOBAL_REMEMBER_ME'); ?></label>
</div>
<div class="mb-3">
<label class="form-label" for="secretkey"><?php echo Text::_('JGLOBAL_SECRETKEY'); ?></label>
<input class="form-control" type="text" name="secretkey" id="secretkey" autocomplete="one-time-code" placeholder="<?php echo Text::_('JGLOBAL_SECRETKEY'); ?>">
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary"><?php echo Text::_('JLOGIN'); ?></button>
</div>
<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" name="remember" id="remember">
<label class="form-check-label" for="remember"><?php echo Text::_('JGLOBAL_REMEMBER_ME'); ?></label>
</div>
<input type="hidden" name="option" value="com_users">
<input type="hidden" name="task" value="user.login">
<input type="hidden" name="return" value="<?php echo $return; ?>">
<?php echo HTMLHelper::_('form.token'); ?>
</fieldset>
<div class="d-grid">
<button type="submit" class="btn btn-primary"><?php echo Text::_('JLOGIN'); ?></button>
</div>
<nav class="mt-3 small" aria-label="<?php echo Text::_('COM_USERS'); ?>">
<ul class="list-inline m-0">
<li class="list-inline-item">
<a href="<?php echo $resetUrl; ?>"><?php echo Text::_('COM_USERS_LOGIN_RESET'); ?></a>
</li>
<li class="list-inline-item">
<a href="<?php echo $remindUrl; ?>"><?php echo Text::_('COM_USERS_LOGIN_REMIND'); ?></a>
</li>
<?php if ($allowRegistration) : ?>
<input type="hidden" name="option" value="com_users">
<input type="hidden" name="task" value="user.login">
<input type="hidden" name="return" value="<?php echo $return; ?>">
<?php echo HTMLHelper::_('form.token'); ?>
</fieldset>
<nav class="mt-3 small" aria-label="<?php echo Text::_('COM_USERS'); ?>">
<ul class="list-inline m-0">
<li class="list-inline-item">
<a href="<?php echo $registrationUrl; ?>"><?php echo Text::_('COM_USERS_REGISTER'); ?></a>
<a href="<?php echo $resetUrl; ?>"><?php echo Text::_('COM_USERS_LOGIN_RESET'); ?></a>
</li>
<?php endif; ?>
</ul>
</nav>
</form>
<li class="list-inline-item">
<a href="<?php echo $remindUrl; ?>"><?php echo Text::_('COM_USERS_LOGIN_REMIND'); ?></a>
</li>
<?php if ($allowRegistration) : ?>
<li class="list-inline-item">
<a href="<?php echo $registrationUrl; ?>"><?php echo Text::_('COM_USERS_REGISTER'); ?></a>
</li>
<?php endif; ?>
</ul>
</nav>
</form>
</div>
</div>
</div>
</div>
<!-- /accordion -->
</div>
<!-- /accordion -->
</div>
<div class="moko-offline-grid__side"></div>
</div>
</main>

6
src/templateDetails.xml
View File

@@ -39,13 +39,13 @@
</server>
</updateservers>
<name>MokoCassiopeia</name>
<version>03.09.15</version>
<version>03.09.16</version>
<scriptfile>script.php</scriptfile>
<creationDate>2026-04-14</creationDate>
<creationDate>2026-04-15</creationDate>
<author>Jonathan Miller || Moko Consulting</author>
<authorEmail>hello@mokoconsulting.tech</authorEmail>
<copyright>(C)GNU General Public License Version 3 - 2026 Moko Consulting</copyright>
<description><![CDATA[<p><img src="https://img.shields.io/badge/version-03.09.15-blue.svg?logo=v&amp;logoColor=white" alt="Version 03.09.15" /> <img src="https://img.shields.io/badge/license-GPL--3.0--or--later-green.svg?logo=gnu&amp;logoColor=white" alt="License" /> <img src="https://img.shields.io/badge/Joomla-5.x%20%7C%206.x-red.svg?logo=joomla&amp;logoColor=white" alt="Joomla" /> <img src="https://img.shields.io/badge/PHP-8.1%2B-777BB4.svg?logo=php&amp;logoColor=white" alt="PHP" /></p> <h3>MokoCassiopeia Template Description</h3> <p> <strong>MokoCassiopeia</strong> continues Joomla's tradition of space-themed default templates— building on the legacy of <em>Solarflare</em> (Joomla 1.0), <em>Milkyway</em> (Joomla 1.5), and <em>Protostar</em> (Joomla 3.0). </p> <p> This template is a customized fork of the <strong>Cassiopeia</strong> template introduced in Joomla 4, preserving its modern, accessible, and mobile-first foundation while introducing new stylistic enhancements and structural refinements specifically tailored for use by Moko Consulting. </p> <h4>Custom Colour Themes</h4> <p> Starter palette files are included with the template. To create a custom colour scheme, copy <code>templates/mokocassiopeia/templates/light.custom.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code>, or <code>templates/mokocassiopeia/templates/dark.custom.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code>. Customise the CSS variables to match your brand, then activate your palette in <em>System → Site Templates → MokoCassiopeia → Theme tab</em> by selecting "Custom" for the Light or Dark Mode Palette. A full variable reference is available in the <em>CSS Variables</em> tab in template options. </p> <h4>Custom CSS &amp; JavaScript</h4> <p> For site-specific styles and scripts that should survive template updates, create the following files: </p> <ul> <li><code>media/templates/site/mokocassiopeia/css/user.css</code> — loaded on every page for custom CSS overrides.</li> <li><code>media/templates/site/mokocassiopeia/js/user.js</code> — loaded on every page for custom JavaScript.</li> </ul> <p> These files are gitignored and will not be overwritten by template updates. </p> <h4>Code Attribution</h4> <p> This template is based on the original <strong>Cassiopeia</strong> template developed by the <a href="https://www.joomla.org" target="_blank" rel="noopener">Joomla! Project</a> and released under the GNU General Public License. </p> <p> Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards. </p> <p> It includes integration with <a href="https://afeld.github.io/bootstrap-toc/" target="_blank" rel="noopener">Bootstrap TOC</a>, an open-source table of contents generator by A. Feld, licensed under the MIT License. </p> <p> All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable. </p>]]></description>
<description><![CDATA[<p><img src="https://img.shields.io/badge/version-03.09.16-blue.svg?logo=v&amp;logoColor=white" alt="Version 03.09.16" /> <img src="https://img.shields.io/badge/license-GPL--3.0--or--later-green.svg?logo=gnu&amp;logoColor=white" alt="License" /> <img src="https://img.shields.io/badge/Joomla-5.x%20%7C%206.x-red.svg?logo=joomla&amp;logoColor=white" alt="Joomla" /> <img src="https://img.shields.io/badge/PHP-8.1%2B-777BB4.svg?logo=php&amp;logoColor=white" alt="PHP" /></p> <h3>MokoCassiopeia Template Description</h3> <p> <strong>MokoCassiopeia</strong> continues Joomla's tradition of space-themed default templates— building on the legacy of <em>Solarflare</em> (Joomla 1.0), <em>Milkyway</em> (Joomla 1.5), and <em>Protostar</em> (Joomla 3.0). </p> <p> This template is a customized fork of the <strong>Cassiopeia</strong> template introduced in Joomla 4, preserving its modern, accessible, and mobile-first foundation while introducing new stylistic enhancements and structural refinements specifically tailored for use by Moko Consulting. </p> <h4>Custom Colour Themes</h4> <p> Starter palette files are included with the template. To create a custom colour scheme, copy <code>templates/mokocassiopeia/templates/light.custom.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code>, or <code>templates/mokocassiopeia/templates/dark.custom.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code>. Customise the CSS variables to match your brand, then activate your palette in <em>System → Site Templates → MokoCassiopeia → Theme tab</em> by selecting "Custom" for the Light or Dark Mode Palette. A full variable reference is available in the <em>CSS Variables</em> tab in template options. </p> <h4>Custom CSS &amp; JavaScript</h4> <p> For site-specific styles and scripts that should survive template updates, create the following files: </p> <ul> <li><code>media/templates/site/mokocassiopeia/css/user.css</code> — loaded on every page for custom CSS overrides.</li> <li><code>media/templates/site/mokocassiopeia/js/user.js</code> — loaded on every page for custom JavaScript.</li> </ul> <p> These files are gitignored and will not be overwritten by template updates. </p> <h4>Code Attribution</h4> <p> This template is based on the original <strong>Cassiopeia</strong> template developed by the <a href="https://www.joomla.org" target="_blank" rel="noopener">Joomla! Project</a> and released under the GNU General Public License. </p> <p> Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards. </p> <p> It includes integration with <a href="https://afeld.github.io/bootstrap-toc/" target="_blank" rel="noopener">Bootstrap TOC</a>, an open-source table of contents generator by A. Feld, licensed under the MIT License. </p> <p> All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable. </p>]]></description>
<inheritable>1</inheritable>
<files>
<filename>component.php</filename>

32
updates.xml
View File

@@ -1,7 +1,7 @@
<?xml version='1.0' encoding='UTF-8'?>
<!-- Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
SPDX-License-Identifier: GPL-3.0-or-later
VERSION: 03.09.15
VERSION: 03.09.16
-->
<updates>
@@ -13,12 +13,12 @@
<element>mokocassiopeia</element>
<type>template</type>
<client>site</client>
<version>03.09.15</version>
<version>03.09.16</version>
<creationDate>2026-04-14</creationDate>
<infourl title='MokoCassiopeia Dev'>https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/tag/development</infourl>
<downloads>
<downloadurl type='full' format='zip'>https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/development/mokocassiopeia-03.09.15-dev.zip</downloadurl>
<downloadurl type='full' format='zip'>https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/download/development/mokocassiopeia-03.09.15-dev.zip</downloadurl>
<downloadurl type='full' format='zip'>https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/development/mokocassiopeia-03.09.16-dev.zip</downloadurl>
<downloadurl type='full' format='zip'>https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/download/development/mokocassiopeia-03.09.16-dev.zip</downloadurl>
</downloads>
<sha256>310fc79b042a042c0b518a806018011d5243893f239d000224fb197943fee5e3</sha256>
<tags><tag>development</tag></tags>
@@ -35,12 +35,12 @@
<element>mokocassiopeia</element>
<type>template</type>
<client>site</client>
<version>03.09.15</version>
<version>03.09.16</version>
<creationDate>2026-04-14</creationDate>
<infourl title='MokoCassiopeia Alpha'>https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/tag/alpha</infourl>
<downloads>
<downloadurl type='full' format='zip'>https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/alpha/mokocassiopeia-03.09.15-alpha.zip</downloadurl>
<downloadurl type='full' format='zip'>https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/download/alpha/mokocassiopeia-03.09.15-alpha.zip</downloadurl>
<downloadurl type='full' format='zip'>https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/alpha/mokocassiopeia-03.09.16-alpha.zip</downloadurl>
<downloadurl type='full' format='zip'>https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/download/alpha/mokocassiopeia-03.09.16-alpha.zip</downloadurl>
</downloads>
<sha256>c2660acdf7389244462485f7ab4c286e9f851366a148acc16739a184576f7932</sha256>
<tags><tag>alpha</tag></tags>
@@ -57,12 +57,12 @@
<element>mokocassiopeia</element>
<type>template</type>
<client>site</client>
<version>03.09.15</version>
<version>03.09.16</version>
<creationDate>2026-04-14</creationDate>
<infourl title='MokoCassiopeia Beta'>https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/tag/beta</infourl>
<downloads>
<downloadurl type='full' format='zip'>https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/beta/mokocassiopeia-03.09.15-beta.zip</downloadurl>
<downloadurl type='full' format='zip'>https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/download/beta/mokocassiopeia-03.09.15-beta.zip</downloadurl>
<downloadurl type='full' format='zip'>https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/beta/mokocassiopeia-03.09.16-beta.zip</downloadurl>
<downloadurl type='full' format='zip'>https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/download/beta/mokocassiopeia-03.09.16-beta.zip</downloadurl>
</downloads>
<sha256>4cbe4fc379182ef17580396e7d12ce4ce95a90017ef364b922bdc2d04b0b3d97</sha256>
<tags><tag>beta</tag></tags>
@@ -79,12 +79,12 @@
<element>mokocassiopeia</element>
<type>template</type>
<client>site</client>
<version>03.09.15</version>
<version>03.09.16</version>
<creationDate>2026-04-14</creationDate>
<infourl title='MokoCassiopeia RC'>https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/tag/release-candidate</infourl>
<downloads>
<downloadurl type='full' format='zip'>https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/release-candidate/mokocassiopeia-03.09.15-rc.zip</downloadurl>
<downloadurl type='full' format='zip'>https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/download/release-candidate/mokocassiopeia-03.09.15-rc.zip</downloadurl>
<downloadurl type='full' format='zip'>https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/release-candidate/mokocassiopeia-03.09.16-rc.zip</downloadurl>
<downloadurl type='full' format='zip'>https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/download/release-candidate/mokocassiopeia-03.09.16-rc.zip</downloadurl>
</downloads>
<sha256>c2660acdf7389244462485f7ab4c286e9f851366a148acc16739a184576f7932</sha256>
<tags><tag>rc</tag></tags>
@@ -101,12 +101,12 @@
<element>mokocassiopeia</element>
<type>template</type>
<client>site</client>
<version>03.09.15</version>
<version>03.09.16</version>
<creationDate>2026-04-14</creationDate>
<infourl title='MokoCassiopeia'>https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/tag/v03</infourl>
<downloads>
<downloadurl type='full' format='zip'>https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.09.15.zip</downloadurl>
<downloadurl type='full' format='zip'>https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.09.15.zip</downloadurl>
<downloadurl type='full' format='zip'>https://git.mokoconsulting.tech/MokoConsulting/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.09.16.zip</downloadurl>
<downloadurl type='full' format='zip'>https://github.com/mokoconsulting-tech/MokoCassiopeia/releases/download/v03/mokocassiopeia-03.09.16.zip</downloadurl>
</downloads>
<sha256>c2660acdf7389244462485f7ab4c286e9f851366a148acc16739a184576f7932</sha256>
<tags><tag>stable</tag></tags>