328 lines
9.6 KiB
CSS
328 lines
9.6 KiB
CSS
@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/dark.custom.css
|
|
VERSION: 03.08.04
|
|
BRIEF: Custom dark theme color template with Bootstrap button definitions
|
|
*/
|
|
|
|
/* -----------------------------------------------
|
|
* CUSTOM DARK THEME TEMPLATE
|
|
*
|
|
* Copy this file to:
|
|
* src/media/css/theme/dark.custom.css
|
|
*
|
|
* Then register it in src/joomla.asset.json under
|
|
* template.dark.custom asset.
|
|
* --------------------------------------------- */
|
|
|
|
:root[data-bs-theme='dark'] {
|
|
/* ===== BRAND COLORS (Customize these) ===== */
|
|
--color-primary: #3399ff;
|
|
--accent-color-primary: #66b3ff;
|
|
--accent-color-secondary: #99ccff;
|
|
|
|
/* ===== LINKS ===== */
|
|
--link-color: #6bb3ff;
|
|
--link-hover-color: #99ccff;
|
|
|
|
/* ===== BODY & TYPOGRAPHY ===== */
|
|
--body-color: #e9ecef;
|
|
--body-bg: #0e1318;
|
|
|
|
/* ===== BOOTSTRAP STATE COLORS ===== */
|
|
--success: #5cb85c;
|
|
--info: #5bc0de;
|
|
--warning: #ffc107;
|
|
--danger: #d9534f;
|
|
|
|
/* ===== 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: #2680e6;
|
|
--btn-hover-border-color: #1f73d9;
|
|
--btn-focus-shadow-rgb: 82, 168, 255;
|
|
--btn-active-color: hsl(0, 0%, 100%);
|
|
--btn-active-bg: #1f73d9;
|
|
--btn-active-border-color: #1a66cc;
|
|
--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: #4cae4c;
|
|
--btn-hover-border-color: #449d44;
|
|
--btn-focus-shadow-rgb: 113, 198, 113;
|
|
--btn-active-color: hsl(0, 0%, 100%);
|
|
--btn-active-bg: #449d44;
|
|
--btn-active-border-color: #398439;
|
|
--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: #46b8da;
|
|
--btn-hover-border-color: #31b0d5;
|
|
--btn-focus-shadow-rgb: 116, 204, 233;
|
|
--btn-active-color: hsl(0, 0%, 100%);
|
|
--btn-active-bg: #31b0d5;
|
|
--btn-active-border-color: #269abc;
|
|
--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: #edb100;
|
|
--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: #d43f3a;
|
|
--btn-hover-border-color: #c9302c;
|
|
--btn-focus-shadow-rgb: 223, 109, 105;
|
|
--btn-active-color: hsl(0, 0%, 100%);
|
|
--btn-active-bg: #c9302c;
|
|
--btn-active-border-color: #ac2925;
|
|
--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: #e9ecef;
|
|
--btn-border-color: #e9ecef;
|
|
--btn-hover-color: hsl(0, 0%, 0%);
|
|
--btn-hover-bg: #d3d6d9;
|
|
--btn-hover-border-color: #c8cbcf;
|
|
--btn-focus-shadow-rgb: 204, 207, 210;
|
|
--btn-active-color: hsl(0, 0%, 0%);
|
|
--btn-active-bg: #c8cbcf;
|
|
--btn-active-border-color: #bdc1c5;
|
|
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
|
--btn-disabled-color: hsl(0, 0%, 0%);
|
|
--btn-disabled-bg: #e9ecef;
|
|
--btn-disabled-border-color: #e9ecef;
|
|
}
|
|
|
|
.btn-dark {
|
|
--btn-color: hsl(0, 0%, 100%);
|
|
--btn-bg: #2c3136;
|
|
--btn-border-color: #2c3136;
|
|
--btn-hover-color: hsl(0, 0%, 100%);
|
|
--btn-hover-bg: #1e2124;
|
|
--btn-hover-border-color: #191c1f;
|
|
--btn-focus-shadow-rgb: 70, 75, 80;
|
|
--btn-active-color: hsl(0, 0%, 100%);
|
|
--btn-active-bg: #191c1f;
|
|
--btn-active-border-color: #14161a;
|
|
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
|
--btn-disabled-color: hsl(0, 0%, 100%);
|
|
--btn-disabled-bg: #2c3136;
|
|
--btn-disabled-border-color: #2c3136;
|
|
}
|
|
|
|
/* ===== OUTLINE BUTTON VARIANTS ===== */
|
|
|
|
.btn-outline-primary {
|
|
--btn-color: var(--color-primary);
|
|
--btn-border-color: var(--color-primary);
|
|
--btn-hover-color: hsl(0, 0%, 0%);
|
|
--btn-hover-bg: var(--color-primary);
|
|
--btn-hover-border-color: var(--color-primary);
|
|
--btn-focus-shadow-rgb: 82, 168, 255;
|
|
--btn-active-color: hsl(0, 0%, 0%);
|
|
--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: #8c959f;
|
|
--btn-border-color: #8c959f;
|
|
--btn-hover-color: hsl(0, 0%, 0%);
|
|
--btn-hover-bg: #8c959f;
|
|
--btn-hover-border-color: #8c959f;
|
|
--btn-focus-shadow-rgb: 150, 158, 167;
|
|
--btn-active-color: hsl(0, 0%, 0%);
|
|
--btn-active-bg: #8c959f;
|
|
--btn-active-border-color: #8c959f;
|
|
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
|
--btn-disabled-color: #8c959f;
|
|
--btn-disabled-bg: transparent;
|
|
--btn-disabled-border-color: #8c959f;
|
|
--gradient: none;
|
|
}
|
|
|
|
.btn-outline-success {
|
|
--btn-color: var(--success);
|
|
--btn-border-color: var(--success);
|
|
--btn-hover-color: hsl(0, 0%, 0%);
|
|
--btn-hover-bg: var(--success);
|
|
--btn-hover-border-color: var(--success);
|
|
--btn-focus-shadow-rgb: 113, 198, 113;
|
|
--btn-active-color: hsl(0, 0%, 0%);
|
|
--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%, 0%);
|
|
--btn-hover-bg: var(--info);
|
|
--btn-hover-border-color: var(--info);
|
|
--btn-focus-shadow-rgb: 116, 204, 233;
|
|
--btn-active-color: hsl(0, 0%, 0%);
|
|
--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: 223, 109, 105;
|
|
--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: #e9ecef;
|
|
--btn-border-color: #e9ecef;
|
|
--btn-hover-color: hsl(0, 0%, 0%);
|
|
--btn-hover-bg: #e9ecef;
|
|
--btn-hover-border-color: #e9ecef;
|
|
--btn-focus-shadow-rgb: 204, 207, 210;
|
|
--btn-active-color: hsl(0, 0%, 0%);
|
|
--btn-active-bg: #e9ecef;
|
|
--btn-active-border-color: #e9ecef;
|
|
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
|
--btn-disabled-color: #e9ecef;
|
|
--btn-disabled-bg: transparent;
|
|
--btn-disabled-border-color: #e9ecef;
|
|
--gradient: none;
|
|
}
|
|
|
|
.btn-outline-dark {
|
|
--btn-color: #4a5057;
|
|
--btn-border-color: #4a5057;
|
|
--btn-hover-color: hsl(0, 0%, 100%);
|
|
--btn-hover-bg: #4a5057;
|
|
--btn-hover-border-color: #4a5057;
|
|
--btn-focus-shadow-rgb: 90, 95, 100;
|
|
--btn-active-color: hsl(0, 0%, 100%);
|
|
--btn-active-bg: #4a5057;
|
|
--btn-active-border-color: #4a5057;
|
|
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
|
--btn-disabled-color: #4a5057;
|
|
--btn-disabled-bg: transparent;
|
|
--btn-disabled-border-color: #4a5057;
|
|
--gradient: none;
|
|
}
|