MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 4 Pull Requests Actions Packages Releases 1 Activity
Files
8c25461f1543ffd5c20917a41a47abf2ceefcd89
MokoCassiopeia/templates/light.custom.css
Jonathan Miller c99eba5c01 chore(release): v03.09.03 — search 3-col layout, version sync 
Search position now 25% width (3 cols), menu fills remaining space.
All VERSION headers synced to 03.09.03 across README, docs, manifests.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-07 18:24:20 -05:00

328 lines
9.6 KiB
CSS
Raw Blame History

@charset "UTF-8";
/* 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
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: MokoCassiopeia.Templates
PATH: ./templates/light.custom.css
VERSION: 03.09.03
BRIEF: Custom light theme color template with Bootstrap button definitions
*/
/* -----------------------------------------------
* CUSTOM LIGHT THEME TEMPLATE
*
* Copy this file to:
* src/media/css/theme/light.custom.css
*
* Then register it in src/joomla.asset.json under
* template.light.custom asset.
* --------------------------------------------- */
:root[data-bs-theme="light"] {
/* ===== BRAND COLORS (Customize these) ===== */
--color-primary: #0066cc;
--accent-color-primary: #3399ff;
--accent-color-secondary: #66b3ff;
/* ===== LINKS ===== */
--link-color: #0066cc;
--link-hover-color: #0052a3;
/* ===== BODY & TYPOGRAPHY ===== */
--body-color: #212529;
--body-bg: #ffffff;
/* ===== BOOTSTRAP STATE COLORS ===== */
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
/* ===== NAVIGATION ===== */
--nav-bg-color: var(--color-primary);
--nav-text-color: #ffffff;
}
/* ===== BOOTSTRAP BUTTON VARIANTS ===== */
.btn-primary {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: var(--color-primary);
--btn-border-color: var(--color-primary);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #0052a3;
--btn-hover-border-color: #004d99;
--btn-focus-shadow-rgb: 38, 128, 217;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #004d99;
--btn-active-border-color: #004788;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: var(--color-primary);
--btn-disabled-border-color: var(--color-primary);
}
.btn-secondary {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: #6c757d;
--btn-border-color: #6c757d;
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #5c636a;
--btn-hover-border-color: #565e64;
--btn-focus-shadow-rgb: 130, 138, 145;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #565e64;
--btn-active-border-color: #51585e;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: #6c757d;
--btn-disabled-border-color: #6c757d;
}
.btn-success {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: var(--success);
--btn-border-color: var(--success);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #218838;
--btn-hover-border-color: #1e7e34;
--btn-focus-shadow-rgb: 72, 180, 97;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #1e7e34;
--btn-active-border-color: #1c7430;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: var(--success);
--btn-disabled-border-color: var(--success);
}
.btn-info {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: var(--info);
--btn-border-color: var(--info);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #138496;
--btn-hover-border-color: #117a8b;
--btn-focus-shadow-rgb: 58, 176, 195;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #117a8b;
--btn-active-border-color: #10707f;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: var(--info);
--btn-disabled-border-color: var(--info);
}
.btn-warning {
--btn-color: hsl(0, 0%, 0%);
--btn-bg: var(--warning);
--btn-border-color: var(--warning);
--btn-hover-color: hsl(0, 0%, 0%);
--btn-hover-bg: #e0a800;
--btn-hover-border-color: #d39e00;
--btn-focus-shadow-rgb: 222, 170, 12;
--btn-active-color: hsl(0, 0%, 0%);
--btn-active-bg: #d39e00;
--btn-active-border-color: #c69500;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 0%);
--btn-disabled-bg: var(--warning);
--btn-disabled-border-color: var(--warning);
}
.btn-danger {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: var(--danger);
--btn-border-color: var(--danger);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #c82333;
--btn-hover-border-color: #bd2130;
--btn-focus-shadow-rgb: 225, 83, 97;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #bd2130;
--btn-active-border-color: #b21f2d;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: var(--danger);
--btn-disabled-border-color: var(--danger);
}
.btn-light {
--btn-color: hsl(0, 0%, 0%);
--btn-bg: #f8f9fa;
--btn-border-color: #f8f9fa;
--btn-hover-color: hsl(0, 0%, 0%);
--btn-hover-bg: #e2e6ea;
--btn-hover-border-color: #dae0e5;
--btn-focus-shadow-rgb: 216, 217, 219;
--btn-active-color: hsl(0, 0%, 0%);
--btn-active-bg: #dae0e5;
--btn-active-border-color: #d3d9df;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 0%);
--btn-disabled-bg: #f8f9fa;
--btn-disabled-border-color: #f8f9fa;
}
.btn-dark {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: #343a40;
--btn-border-color: #343a40;
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #23272b;
--btn-hover-border-color: #1d2124;
--btn-focus-shadow-rgb: 82, 88, 93;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #1d2124;
--btn-active-border-color: #171a1d;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: #343a40;
--btn-disabled-border-color: #343a40;
}
/* ===== OUTLINE BUTTON VARIANTS ===== */
.btn-outline-primary {
--btn-color: var(--color-primary);
--btn-border-color: var(--color-primary);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: var(--color-primary);
--btn-hover-border-color: var(--color-primary);
--btn-focus-shadow-rgb: 38, 128, 217;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: var(--color-primary);
--btn-active-border-color: var(--color-primary);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: var(--color-primary);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: var(--color-primary);
--gradient: none;
}
.btn-outline-secondary {
--btn-color: #6c757d;
--btn-border-color: #6c757d;
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #6c757d;
--btn-hover-border-color: #6c757d;
--btn-focus-shadow-rgb: 130, 138, 145;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #6c757d;
--btn-active-border-color: #6c757d;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: #6c757d;
--btn-disabled-bg: transparent;
--btn-disabled-border-color: #6c757d;
--gradient: none;
}
.btn-outline-success {
--btn-color: var(--success);
--btn-border-color: var(--success);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: var(--success);
--btn-hover-border-color: var(--success);
--btn-focus-shadow-rgb: 72, 180, 97;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: var(--success);
--btn-active-border-color: var(--success);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: var(--success);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: var(--success);
--gradient: none;
}
.btn-outline-info {
--btn-color: var(--info);
--btn-border-color: var(--info);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: var(--info);
--btn-hover-border-color: var(--info);
--btn-focus-shadow-rgb: 58, 176, 195;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: var(--info);
--btn-active-border-color: var(--info);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: var(--info);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: var(--info);
--gradient: none;
}
.btn-outline-warning {
--btn-color: var(--warning);
--btn-border-color: var(--warning);
--btn-hover-color: hsl(0, 0%, 0%);
--btn-hover-bg: var(--warning);
--btn-hover-border-color: var(--warning);
--btn-focus-shadow-rgb: 222, 170, 12;
--btn-active-color: hsl(0, 0%, 0%);
--btn-active-bg: var(--warning);
--btn-active-border-color: var(--warning);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: var(--warning);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: var(--warning);
--gradient: none;
}
.btn-outline-danger {
--btn-color: var(--danger);
--btn-border-color: var(--danger);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: var(--danger);
--btn-hover-border-color: var(--danger);
--btn-focus-shadow-rgb: 225, 83, 97;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: var(--danger);
--btn-active-border-color: var(--danger);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: var(--danger);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: var(--danger);
--gradient: none;
}
.btn-outline-light {
--btn-color: #f8f9fa;
--btn-border-color: #f8f9fa;
--btn-hover-color: hsl(0, 0%, 0%);
--btn-hover-bg: #f8f9fa;
--btn-hover-border-color: #f8f9fa;
--btn-focus-shadow-rgb: 216, 217, 219;
--btn-active-color: hsl(0, 0%, 0%);
--btn-active-bg: #f8f9fa;
--btn-active-border-color: #f8f9fa;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: #f8f9fa;
--btn-disabled-bg: transparent;
--btn-disabled-border-color: #f8f9fa;
--gradient: none;
}
.btn-outline-dark {
--btn-color: #343a40;
--btn-border-color: #343a40;
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #343a40;
--btn-hover-border-color: #343a40;
--btn-focus-shadow-rgb: 82, 88, 93;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #343a40;
--btn-active-border-color: #343a40;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: #343a40;
--btn-disabled-bg: transparent;
--btn-disabled-border-color: #343a40;
--gradient: none;
}
Reference in New Issue View Git Blame Copy Permalink