Remove custom theme CSS from tracking, update gitignore with glob
Custom palettes (*.custom.css) are site-specific overrides that should not be version controlled. Glob pattern covers all locations. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
7
.gitignore
vendored
7
.gitignore
vendored
@@ -198,5 +198,8 @@ venv/
|
||||
*.coverage
|
||||
hypothesis/
|
||||
|
||||
src/media/css/theme/dark.custom.css
|
||||
src/media/css/theme/light.custom.css
|
||||
# Custom theme palettes (site-specific, not version controlled)
|
||||
src/media/css/theme/*.custom.css
|
||||
src/media/css/theme/*.custom.min.css
|
||||
src/templates/*.custom.css
|
||||
templates/*.custom.css
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,327 +0,0 @@
|
||||
@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.09.03
|
||||
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;
|
||||
}
|
||||
@@ -1,327 +0,0 @@
|
||||
@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
Block a user