From 910d1dcb3ee6fd95872825d78ddcd6e6f9847c2d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 17:17:49 +0000 Subject: [PATCH] Complete CSS variable system: Add missing values, regenerate alternative colors, add Bootstrap/Joomla styles Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- .../css/colors/dark/colors_alternative.css | 351 ++++---- src/media/css/colors/dark/colors_standard.css | 50 +- .../css/colors/light/colors_alternative.css | 848 +++++++++--------- .../css/colors/light/colors_standard.css | 50 +- src/media/css/template.css | 198 ++++ 5 files changed, 848 insertions(+), 649 deletions(-) diff --git a/src/media/css/colors/dark/colors_alternative.css b/src/media/css/colors/dark/colors_alternative.css index 1f7a298..87e7352 100644 --- a/src/media/css/colors/dark/colors_alternative.css +++ b/src/media/css/colors/dark/colors_alternative.css @@ -12,34 +12,35 @@ INGROUP: MokoCassiopeia PATH: ./media/templates/site/mokocassiopeia/css/global/dark/colors_alternative.css VERSION: 03.05.00 - BRIEF: Alternative dark mode color definitions for MokoCassiopeia template + BRIEF: Alternative dark mode color definitions (Teal & Purple) for MokoCassiopeia template */ /* ----------------------------------------------- - * DARK THEME + * ALTERNATIVE DARK THEME - TEAL & PURPLE * --------------------------------------------- */ :root[data-bs-theme='dark']{ color-scheme: dark; /* ===== BRAND & THEME COLORS ===== */ ---color-primary: #112855; ---accent-color-primary: #3f8ff0; ---accent-color-secondary: #6fb3ff; +--color-primary: #14b8a6; +--accent-color-primary: #c084fc; +--accent-color-secondary: #d8b4fe; /* ===== NAVIGATION ===== */ --mainmenu-nav-link-color: #fff; ---nav-text-color: var(--mainmenu-nav-link-color); ---nav-bg-color: var(--color-link); +--nav-text-color: #e2e8f0; +--nav-bg-color: #0f766e; /* ===== LINKS ===== */ ---color-link: #224FAA; ---color-hover: #224FAA; ---link-color: #8ab4f8; ---link-color-rgb: 138, 180, 248; +--color-link: #e9d5ff; +--color-hover: #c084fc; +--color-active: var(--mainmenu-nav-link-color); +--link-color: #c084fc; +--link-color-rgb: 192, 132, 252; --link-decoration: underline; ---link-hover-color: #c3d6ff; ---link-hover-color-rgb: 195, 214, 255; +--link-hover-color: #d8b4fe; +--link-hover-color-rgb: 216, 180, 254; --link-active-color: var(--link-color); /* ===== OFFCANVAS ===== */ @@ -52,7 +53,7 @@ color-scheme: dark; --navbar-padding-y: 0.5rem; --navbar-color: var(--nav-text-color); --navbar-active-color: var(--mainmenu-nav-link-color); ---navbar-disabled-color: #6c757d; +--navbar-disabled-color: #475569; --navbar-brand-padding-y: 0.3125rem; --navbar-brand-margin-end: 1rem; --navbar-brand-font-size: 1.25rem; @@ -71,7 +72,7 @@ color-scheme: dark; --nav-link-font-weight: 400; --nav-link-color: var(--nav-text-color); --nav-link-active-color: var(--mainmenu-nav-link-color); ---nav-link-disabled-color: #6c757d; +--nav-link-disabled-color: #475569; /* ===== TYPOGRAPHY & BODY ===== */ --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'; @@ -80,22 +81,22 @@ color-scheme: dark; --body-font-size: 1rem; --body-font-weight: 400; --body-line-height: 1.5; ---body-color: #e6ebf1; ---body-color-rgb: 230, 235, 241; ---body-bg: #0e1318; ---body-bg-rgb: 14, 19, 24; +--body-color: #e2e8f0; +--body-color-rgb: 226, 232, 240; +--body-bg: #0f172a; +--body-bg-rgb: 15, 23, 42; --heading-color: #f1f5f9; --emphasis-color: #fff; --emphasis-color-rgb: 255, 255, 255; ---secondary-color: #e6ebf1bf; ---secondary-color-rgb: 230, 235, 241; ---tertiary-color: #e6ebf180; ---tertiary-color-rgb: 230, 235, 241; ---muted-color: #6d757e; ---code-color: #ff7abd; ---code-color-ink: var(--code-color, #e93f8e); ---highlight-color: #111; ---highlight-bg: #ffe28a1a; +--secondary-color: #cbd5e1; +--secondary-color-rgb: 203, 213, 225; +--tertiary-color: #94a3b8; +--tertiary-color-rgb: 148, 163, 184; +--muted-color: #64748b; +--code-color: #e879f9; +--code-color-ink: var(--code-color, #e879f9); +--highlight-color: #0f172a; +--highlight-bg: #fef08a1a; /* ===== LAYOUT & SPACING ===== */ --padding-x: 1rem; @@ -103,18 +104,18 @@ color-scheme: dark; --bg-opacity: 1; --nav-toggle-size: 3rem; --gradient: linear-gradient(180deg, #ffffff26, #fff0); ---secondary-bg: #151b22; ---secondary-bg-rgb: 21, 27, 34; ---tertiary-bg: #10151b; ---tertiary-bg-rgb: 16, 21, 27; ---hr-color: var(--border-color, #dfe3e7); ---border-color-soft: var(--border-color, #dfe3e7); ---kbd-bg: var(--secondary-bg, #eaedf0); ---kbd-ink: var(--body-bg, #fff); ---toc-bg: var(--secondary-bg, #eaedf0); ---toc-ink: var(--color-primary, #112855); ---selection-bg: var(--highlight-bg, #fbeea8); ---selection-ink: var(--body-color, #22262a); +--secondary-bg: #1e293b; +--secondary-bg-rgb: 30, 41, 59; +--tertiary-bg: #334155; +--tertiary-bg-rgb: 51, 65, 85; +--hr-color: var(--border-color, #334155); +--border-color-soft: var(--border-color, #334155); +--kbd-bg: var(--secondary-bg, #1e293b); +--kbd-ink: var(--body-bg, #0f172a); +--toc-bg: var(--secondary-bg, #1e293b); +--toc-ink: var(--color-primary, #14b8a6); +--selection-bg: var(--highlight-bg, #fef08a1a); +--selection-ink: var(--body-color, #e2e8f0); --border: 5px; /* ===== BREAKPOINTS ===== */ @@ -125,71 +126,71 @@ color-scheme: dark; --bp-xl: 1200px; /* ===== BOOTSTRAP PALETTE ===== */ ---primary: #010156; ---secondary: #48525d; ---success: #4aa664; ---info: #4f7aa0; ---warning: #c77a00; ---danger: #c23a31; ---light: #1b2027; ---dark: #0f1318; ---primary-rgb: 1,1,86; ---secondary-rgb: 72,82,93; ---success-rgb: 74,166,100; ---info-rgb: 79,122,160; ---warning-rgb: 199,122,0; ---danger-rgb: 194,58,49; ---light-rgb: 27,32,39; ---dark-rgb: 15,19,24; ---primary-text-emphasis: #c7ccff; ---secondary-text-emphasis: #cfd6de; ---success-text-emphasis: #bde8c9; ---info-text-emphasis: #bcd6ee; ---warning-text-emphasis: #ffd9a6; ---danger-text-emphasis: #ffb7b2; ---light-text-emphasis: #d2d8df; ---dark-text-emphasis: #d2d8df; ---primary-bg-subtle: #0b1030; ---secondary-bg-subtle: #1e2430; ---success-bg-subtle: #0f2a1b; ---info-bg-subtle: #0d2232; ---warning-bg-subtle: #2a1e06; ---danger-bg-subtle: #2d1110; ---light-bg-subtle: #12161d; ---dark-bg-subtle: #1e2430; ---primary-border-subtle: #2b3a7a; ---secondary-border-subtle: #2b323b; ---success-border-subtle: #2b5b40; ---info-border-subtle: #254861; ---warning-border-subtle: #5a3c0e; ---danger-border-subtle: #5c2723; ---light-border-subtle: #222831; ---dark-border-subtle: #2b323b; +--primary: #14b8a6; +--secondary: #64748b; +--success: #34d399; +--info: #38bdf8; +--warning: #fbbf24; +--danger: #fb7185; +--light: #334155; +--dark: #0f172a; +--primary-rgb: 20, 184, 166; +--secondary-rgb: 100, 116, 139; +--success-rgb: 52, 211, 153; +--info-rgb: 56, 189, 248; +--warning-rgb: 251, 191, 36; +--danger-rgb: 251, 113, 133; +--light-rgb: 51, 65, 85; +--dark-rgb: 15, 23, 42; +--primary-text-emphasis: #99f6e4; +--secondary-text-emphasis: #cbd5e1; +--success-text-emphasis: #a7f3d0; +--info-text-emphasis: #bae6fd; +--warning-text-emphasis: #fde68a; +--danger-text-emphasis: #fecdd3; +--light-text-emphasis: #cbd5e1; +--dark-text-emphasis: #cbd5e1; +--primary-bg-subtle: #134e4a; +--secondary-bg-subtle: #1e293b; +--success-bg-subtle: #064e3b; +--info-bg-subtle: #0c4a6e; +--warning-bg-subtle: #78350f; +--danger-bg-subtle: #881337; +--light-bg-subtle: #1e293b; +--dark-bg-subtle: #0f172a; +--primary-border-subtle: #115e59; +--secondary-border-subtle: #334155; +--success-border-subtle: #065f46; +--info-border-subtle: #075985; +--warning-border-subtle: #92400e; +--danger-border-subtle: #9f1239; +--light-border-subtle: #334155; +--dark-border-subtle: #1e293b; /* ===== STANDARD COLORS ===== */ ---blue: #91a4ff; ---indigo: #b19cff; ---purple: #c0a5ff; ---pink: #ff8fc0; ---red: #ff7a73; ---orange: #ff9c4d; ---yellow: #ffd166; ---green: #78d694; ---teal: #76e3ff; ---cyan: #6fb7ff; +--blue: #60a5fa; +--indigo: #818cf8; +--purple: #c084fc; +--pink: #f472b6; +--red: #f87171; +--orange: #fb923c; +--yellow: #fbbf24; +--green: #34d399; +--teal: #2dd4bf; +--cyan: #22d3ee; --black: #000; --white: #fff; /* ===== GRAY SCALE ===== */ ---gray-100: #161a20; ---gray-200: #1b2027; ---gray-300: #222831; ---gray-400: #2b323b; ---gray-500: #36404a; ---gray-600: #48525d; ---gray-700: #5b6672; ---gray-800: #cfd6de; ---gray-900: #e6ebf1; +--gray-100: #1e293b; +--gray-200: #334155; +--gray-300: #475569; +--gray-400: #64748b; +--gray-500: #94a3b8; +--gray-600: #cbd5e1; +--gray-700: #e2e8f0; +--gray-800: #f1f5f9; +--gray-900: #f8fafc; --white-rgb: 255, 255, 255; --black-rgb: 0, 0, 0; @@ -201,73 +202,73 @@ color-scheme: dark; /* ===== CONTAINER BACKGROUNDS ===== */ /* Below Topbar Container */ ---container-below-topbar-bg-image: ; ---container-below-topbar-bg-color: ; +--container-below-topbar-bg-image: none; +--container-below-topbar-bg-color: transparent; --container-below-topbar-bg-position: center; --container-below-topbar-bg-attachment: fixed; --container-below-topbar-bg-repeat: no-repeat; --container-below-topbar-bg-size: cover; ---container-below-topbar-border: ; ---container-below-topbar-border-radius: ; +--container-below-topbar-border: none; +--container-below-topbar-border-radius: 0; /* Top A Container */ ---container-top-a-bg-image: ; ---container-top-a-bg-color: ; +--container-top-a-bg-image: none; +--container-top-a-bg-color: transparent; --container-top-a-bg-position: center; --container-top-a-bg-attachment: fixed; --container-top-a-bg-repeat: no-repeat; --container-top-a-bg-size: cover; ---container-top-a-border: ; ---container-top-a-border-radius: ; +--container-top-a-border: none; +--container-top-a-border-radius: 0; /* Top B Container */ ---container-top-b-bg-image: ; ---container-top-b-bg-color: ; +--container-top-b-bg-image: none; +--container-top-b-bg-color: transparent; --container-top-b-bg-position: center; --container-top-b-bg-attachment: fixed; --container-top-b-bg-repeat: no-repeat; --container-top-b-bg-size: cover; ---container-top-b-border: ; ---container-top-b-border-radius: ; +--container-top-b-border: none; +--container-top-b-border-radius: 0; /* TOC Container */ ---container-toc-bg: ; ---container-toc-color: #dbe3ff; +--container-toc-bg: var(--secondary-bg); +--container-toc-color: #99f6e4; /* Sidebar Container */ ---container-sidebar-bg-image: ; ---container-sidebar-bg-color: ; +--container-sidebar-bg-image: none; +--container-sidebar-bg-color: transparent; --container-sidebar-bg-position: center; --container-sidebar-bg-attachment: scroll; --container-sidebar-bg-repeat: repeat; --container-sidebar-bg-size: auto; ---container-sidebar-border: ; ---container-sidebar-border-radius: ; +--container-sidebar-border: none; +--container-sidebar-border-radius: 0; /* Bottom A Container */ ---container-bottom-a-bg-image: ; ---container-bottom-a-bg-color: ; +--container-bottom-a-bg-image: none; +--container-bottom-a-bg-color: transparent; --container-bottom-a-bg-position: center; --container-bottom-a-bg-attachment: fixed; --container-bottom-a-bg-repeat: no-repeat; --container-bottom-a-bg-size: cover; ---container-bottom-a-border: ; +--container-bottom-a-border: none; --container-bottom-a-border-radius: 5px; /* Bottom B Container */ ---container-bottom-b-bg-image: ; ---container-bottom-b-bg-color: ; +--container-bottom-b-bg-image: none; +--container-bottom-b-bg-color: transparent; --container-bottom-b-bg-position: center; --container-bottom-b-bg-attachment: fixed; --container-bottom-b-bg-repeat: no-repeat; --container-bottom-b-bg-size: cover; ---container-bottom-b-border: ; ---container-bottom-b-border-radius: ; +--container-bottom-b-border: none; +--container-bottom-b-border-radius: 0; /* ===== BORDERS ===== */ --border-width: 1px; --border-style: solid; ---border-color: #2b323b; +--border-color: #334155; --border-color-translucent: #ffffff26; --border-radius: .25rem; --border-radius-sm: .2rem; @@ -286,19 +287,19 @@ color-scheme: dark; /* ===== FOCUS & FORMS ===== */ --focus-ring-width: .25rem; --focus-ring-opacity: .6; ---focus-ring-color: #5472ff66; ---input-color: #e6ebf1; ---input-bg: #1a2332; ---input-border-color: #3a4250; ---input-focus-border-color: #5472ff; ---input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); ---input-placeholder-color: #8894aa; ---input-disabled-bg: #0f1318; ---input-disabled-border-color: #2b323b; ---form-valid-color: #78d694; ---form-valid-border-color: #78d694; ---form-invalid-color: #ff8e86; ---form-invalid-border-color: #ff8e86; +--focus-ring-color: #14b8a666; +--input-color: #e2e8f0; +--input-bg: #1e293b; +--input-border-color: #475569; +--input-focus-border-color: #14b8a6; +--input-focus-box-shadow: 0 0 0 0.25rem rgba(20, 184, 166, 0.25); +--input-placeholder-color: #94a3b8; +--input-disabled-bg: #0f172a; +--input-disabled-border-color: #334155; +--form-valid-color: #34d399; +--form-valid-border-color: #34d399; +--form-invalid-color: #fb7185; +--form-invalid-border-color: #fb7185; /* ===== BUTTONS ===== */ --btn-border-radius: var(--border-radius); @@ -329,7 +330,7 @@ color-scheme: dark; --vm-surface-2: var(--tertiary-bg); --vm-text: var(--body-color); --vm-text-strong: #ffffff; ---vm-text-muted: var(--gray-700); +--vm-text-muted: var(--gray-600); --vm-border: var(--border-color); --vm-price-color: var(--success); @@ -403,19 +404,19 @@ color-scheme: dark; --vm-vendor-menu-hover-bg: var(--tertiary-bg); /* ===== GABLE ===== */ ---gab-blue: #4d9fff; ---gab-green: #5cb85c; ---gab-red: #ff6b6b; ---gab-orange: #ff9f5a; ---gab-gray1: #868e96; ---gab-gray2: #adb5bd; ---gab-gray3: #ced4da; +--gab-blue: #60a5fa; +--gab-green: #34d399; +--gab-red: #f87171; +--gab-orange: #fb923c; +--gab-gray1: #94a3b8; +--gab-gray2: #cbd5e1; +--gab-gray3: #e2e8f0; } .btn { --btn-padding-x: 1rem; --btn-padding-y: 0.6rem; ---btn-font-family: ; +--btn-font-family: inherit; --btn-font-size: 1rem; --btn-font-weight: 400; --btn-line-height: 1.5; @@ -454,60 +455,60 @@ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border- } .btn-primary { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(240, 98%, 17%); ---btn-border-color: hsl(240, 98%, 17%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #010149; ---btn-hover-border-color: #010145; ---btn-focus-shadow-rgb: 84, 114, 255; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #010145; ---btn-active-border-color: #010141; +--btn-color: #ffffff; +--btn-bg: #14b8a6; +--btn-border-color: #14b8a6; +--btn-hover-color: #ffffff; +--btn-hover-bg: #0d9488; +--btn-hover-border-color: #0d9488; +--btn-focus-shadow-rgb: 20, 184, 166; +--btn-active-color: #ffffff; +--btn-active-bg: #0d9488; +--btn-active-border-color: #0f766e; } .btn-secondary { --btn-color: var(--nav-text-color); --btn-bg: var(--nav-bg-color); ---btn-border-color: #3a4250; +--btn-border-color: #475569; --btn-hover-color: #fff; ---btn-hover-bg: #1b2a55; ---btn-hover-border-color: #162448; ---btn-focus-shadow-rgb: 84, 114, 255; +--btn-hover-bg: #115e59; +--btn-hover-border-color: #134e4a; +--btn-focus-shadow-rgb: 20, 184, 166; --btn-active-color: #fff; ---btn-active-bg: #162448; ---btn-active-border-color: #12203f; +--btn-active-bg: #134e4a; +--btn-active-border-color: #134e4a; } .btn-outline-light { ---btn-color: #e6ebf1; ---btn-border-color: #e6ebf1; ---btn-hover-color: #111; ---btn-hover-bg: #e6ebf1; ---btn-hover-border-color: #e6ebf1; ---btn-active-color: #111; ---btn-active-bg: #d7dce2; ---btn-active-border-color: #d7dce2; +--btn-color: #e2e8f0; +--btn-border-color: #e2e8f0; +--btn-hover-color: #0f172a; +--btn-hover-bg: #e2e8f0; +--btn-hover-border-color: #e2e8f0; +--btn-active-color: #0f172a; +--btn-active-bg: #cbd5e1; +--btn-active-border-color: #cbd5e1; --gradient: none; } .btn-link { --btn-font-weight: 400; ---btn-color: var(--link-color); +--btn-color: var(--color-link); --btn-bg: transparent; --btn-border-color: transparent; --btn-hover-color: var(--link-hover-color); --btn-hover-border-color: transparent; --btn-active-color: var(--link-hover-color); --btn-active-border-color: transparent; ---btn-disabled-color: #6d7781; +--btn-disabled-color: #64748b; --btn-disabled-border-color: transparent; --btn-box-shadow: none; ---btn-focus-shadow-rgb: 84, 114, 255; +--btn-focus-shadow-rgb: 20, 184, 166; text-decoration: underline; } .btn-secondary { ---btn-color: var(--nav-text-color); +--btn-color: var(--color-hover); --btn-bg: var(--nav-bg-color); } diff --git a/src/media/css/colors/dark/colors_standard.css b/src/media/css/colors/dark/colors_standard.css index 4b34ea1..bb4d44d 100644 --- a/src/media/css/colors/dark/colors_standard.css +++ b/src/media/css/colors/dark/colors_standard.css @@ -202,68 +202,68 @@ color-scheme: dark; /* ===== CONTAINER BACKGROUNDS ===== */ /* Below Topbar Container */ ---container-below-topbar-bg-image: ; ---container-below-topbar-bg-color: ; +--container-below-topbar-bg-image: none; +--container-below-topbar-bg-color: transparent; --container-below-topbar-bg-position: center; --container-below-topbar-bg-attachment: fixed; --container-below-topbar-bg-repeat: no-repeat; --container-below-topbar-bg-size: cover; ---container-below-topbar-border: ; ---container-below-topbar-border-radius: ; +--container-below-topbar-border: none; +--container-below-topbar-border-radius: 0; /* Top A Container */ ---container-top-a-bg-image: ; ---container-top-a-bg-color: ; +--container-top-a-bg-image: none; +--container-top-a-bg-color: transparent; --container-top-a-bg-position: center; --container-top-a-bg-attachment: fixed; --container-top-a-bg-repeat: no-repeat; --container-top-a-bg-size: cover; ---container-top-a-border: ; ---container-top-a-border-radius: ; +--container-top-a-border: none; +--container-top-a-border-radius: 0; /* Top B Container */ ---container-top-b-bg-image: ; ---container-top-b-bg-color: ; +--container-top-b-bg-image: none; +--container-top-b-bg-color: transparent; --container-top-b-bg-position: center; --container-top-b-bg-attachment: fixed; --container-top-b-bg-repeat: no-repeat; --container-top-b-bg-size: cover; ---container-top-b-border: ; ---container-top-b-border-radius: ; +--container-top-b-border: none; +--container-top-b-border-radius: 0; /* TOC Container */ ---container-toc-bg: ; +--container-toc-bg: var(--secondary-bg); --container-toc-color: #dbe3ff; /* Sidebar Container */ ---container-sidebar-bg-image: ; ---container-sidebar-bg-color: ; +--container-sidebar-bg-image: none; +--container-sidebar-bg-color: transparent; --container-sidebar-bg-position: center; --container-sidebar-bg-attachment: scroll; --container-sidebar-bg-repeat: repeat; --container-sidebar-bg-size: auto; ---container-sidebar-border: ; ---container-sidebar-border-radius: ; +--container-sidebar-border: none; +--container-sidebar-border-radius: 0; /* Bottom A Container */ ---container-bottom-a-bg-image: ; ---container-bottom-a-bg-color: ; +--container-bottom-a-bg-image: none; +--container-bottom-a-bg-color: transparent; --container-bottom-a-bg-position: center; --container-bottom-a-bg-attachment: fixed; --container-bottom-a-bg-repeat: no-repeat; --container-bottom-a-bg-size: cover; ---container-bottom-a-border: ; +--container-bottom-a-border: none; --container-bottom-a-border-radius: 5px; /* Bottom B Container */ ---container-bottom-b-bg-image: ; ---container-bottom-b-bg-color: ; +--container-bottom-b-bg-image: none; +--container-bottom-b-bg-color: transparent; --container-bottom-b-bg-position: center; --container-bottom-b-bg-attachment: fixed; --container-bottom-b-bg-repeat: no-repeat; --container-bottom-b-bg-size: cover; ---container-bottom-b-border: ; ---container-bottom-b-border-radius: ; +--container-bottom-b-border: none; +--container-bottom-b-border-radius: 0; /* ===== BORDERS ===== */ --border-width: 1px; @@ -416,7 +416,7 @@ color-scheme: dark; .btn { --btn-padding-x: 1rem; --btn-padding-y: 0.6rem; - --btn-font-family: ; + --btn-font-family: inherit; --btn-font-size: 1rem; --btn-font-weight: 400; --btn-line-height: 1.5; diff --git a/src/media/css/colors/light/colors_alternative.css b/src/media/css/colors/light/colors_alternative.css index 93e923e..98b92b7 100644 --- a/src/media/css/colors/light/colors_alternative.css +++ b/src/media/css/colors/light/colors_alternative.css @@ -12,34 +12,34 @@ INGROUP: MokoCassiopeia PATH: ./media/templates/site/mokocassiopeia/css/global/light/colors_alternative.css VERSION: 03.05.00 - BRIEF: Alternative light mode color definitions for MokoCassiopeia template + BRIEF: Alternative light mode color definitions (Teal & Purple) for MokoCassiopeia template */ /* ----------------------------------------------- - * LIGHT THEME + * ALTERNATIVE LIGHT THEME - TEAL & PURPLE * --------------------------------------------- */ :root[data-bs-theme="light"] { color-scheme: light; /* ===== BRAND & THEME COLORS ===== */ ---color-primary: #112855; ---accent-color-primary: #3f8ff0; ---accent-color-secondary: #3f8ff0; +--color-primary: #0d9488; +--accent-color-primary: #a855f7; +--accent-color-secondary: #c084fc; /* ===== NAVIGATION ===== */ --mainmenu-nav-link-color: white; ---nav-text-color: var(--mainmenu-nav-link-color); ---nav-bg-color: var(--color-link); +--nav-text-color: white; +--nav-bg-color: #0d9488; /* ===== LINKS ===== */ ---color-link: #224FAA; ---color-hover: var(--accent-color-primary); ---link-color: #224faa; ---link-color-rgb: 34, 79, 170; +--color-link: #7c3aed; +--color-hover: #a855f7; +--link-color: #7c3aed; +--link-color-rgb: 124, 58, 237; --link-decoration: underline; ---link-hover-color: #424077; ---link-hover-color-rgb: 66, 64, 119; +--link-hover-color: #a855f7; +--link-hover-color-rgb: 168, 85, 247; --link-active-color: var(--link-color); /* ===== OFFCANVAS ===== */ @@ -52,7 +52,7 @@ color-scheme: light; --navbar-padding-y: 0.5rem; --navbar-color: var(--nav-text-color); --navbar-active-color: var(--mainmenu-nav-link-color); ---navbar-disabled-color: #6c757d; +--navbar-disabled-color: #94a3b8; --navbar-brand-padding-y: 0.3125rem; --navbar-brand-margin-end: 1rem; --navbar-brand-font-size: 1.25rem; @@ -71,7 +71,7 @@ color-scheme: light; --nav-link-font-weight: 400; --nav-link-color: var(--nav-text-color); --nav-link-active-color: var(--mainmenu-nav-link-color); ---nav-link-disabled-color: #6c757d; +--nav-link-disabled-color: #94a3b8; /* ===== TYPOGRAPHY & BODY ===== */ --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"; @@ -80,22 +80,22 @@ color-scheme: light; --body-font-size: 1rem; --body-font-weight: 400; --body-line-height: 1.5; ---body-color: #22262a; ---body-color-rgb: 34, 38, 42; +--body-color: #1e293b; +--body-color-rgb: 30, 41, 59; --body-bg: #fff; --body-bg-rgb: 255, 255, 255; --heading-color: inherit; ---emphasis-color: #000; ---emphasis-color-rgb: 0, 0, 0; ---secondary-color: #22262abf; ---secondary-color-rgb: 34, 38, 42; ---tertiary-color: #22262a80; ---tertiary-color-rgb: 34, 38, 42; ---muted-color: #6d757e; ---code-color: #e93f8e; ---code-color-ink: var(--code-color, #e93f8e); ---highlight-color: #22262a; ---highlight-bg: #fbeea8; +--emphasis-color: #0f172a; +--emphasis-color-rgb: 15, 23, 42; +--secondary-color: #475569; +--secondary-color-rgb: 71, 85, 105; +--tertiary-color: #64748b; +--tertiary-color-rgb: 100, 116, 139; +--muted-color: #64748b; +--code-color: #c026d3; +--code-color-ink: var(--code-color, #c026d3); +--highlight-color: #1e293b; +--highlight-bg: #fde68a; /* ===== LAYOUT & SPACING ===== */ --padding-x: 1rem; @@ -103,18 +103,18 @@ color-scheme: light; --bg-opacity: 1; --nav-toggle-size: 3rem; --gradient: linear-gradient(180deg, #ffffff26, #fff0); ---secondary-bg: #eaedf0; ---secondary-bg-rgb: 234, 237, 240; ---tertiary-bg: #f9fafb; ---tertiary-bg-rgb: 249, 250, 251; ---hr-color: var(--border-color, #dfe3e7); ---border-color-soft: var(--border-color, #dfe3e7); ---kbd-bg: var(--secondary-bg, #eaedf0); +--secondary-bg: #f1f5f9; +--secondary-bg-rgb: 241, 245, 249; +--tertiary-bg: #f8fafc; +--tertiary-bg-rgb: 248, 250, 252; +--hr-color: var(--border-color, #e2e8f0); +--border-color-soft: var(--border-color, #e2e8f0); +--kbd-bg: var(--secondary-bg, #f1f5f9); --kbd-ink: var(--body-bg, #fff); ---toc-bg: var(--secondary-bg, #eaedf0); ---toc-ink: var(--color-primary, #112855); ---selection-bg: var(--highlight-bg, #fbeea8); ---selection-ink: var(--body-color, #22262a); +--toc-bg: var(--secondary-bg, #f1f5f9); +--toc-ink: var(--color-primary, #0d9488); +--selection-bg: var(--highlight-bg, #fde68a); +--selection-ink: var(--body-color, #1e293b); --border: 5px; /* ===== BREAKPOINTS ===== */ @@ -125,71 +125,71 @@ color-scheme: light; --bp-xl: 1200px; /* ===== BOOTSTRAP PALETTE ===== */ ---primary: #010156; ---secondary: #6d757e; ---success: #448344; ---info: #30638d; ---warning: #ad6200; ---danger: #a51f18; ---light: #f9fafb; ---dark: #353b41; ---primary-rgb: 1, 1, 86; ---secondary-rgb: 109, 117, 126; ---success-rgb: 68, 131, 68; ---info-rgb: 48, 99, 141; ---warning-rgb: 173, 98, 0; ---danger-rgb: 165, 31, 24; ---light-rgb: 249, 250, 251; ---dark-rgb: 53, 59, 65; ---primary-text-emphasis: #002; ---secondary-text-emphasis: #2c2f32; ---success-text-emphasis: #1b351b; ---info-text-emphasis: #132838; ---warning-text-emphasis: #452700; ---danger-text-emphasis: #420c09; ---light-text-emphasis: #484f56; ---dark-text-emphasis: #484f56; ---primary-bg-subtle: #ccd; ---secondary-bg-subtle: #e2e3e5; ---success-bg-subtle: #dae6da; ---info-bg-subtle: #d6e0e8; ---warning-bg-subtle: #efe0cc; ---danger-bg-subtle: #edd2d1; +--primary: #0d9488; +--secondary: #64748b; +--success: #10b981; +--info: #0ea5e9; +--warning: #f59e0b; +--danger: #f43f5e; +--light: #f8fafc; +--dark: #334155; +--primary-rgb: 13, 148, 136; +--secondary-rgb: 100, 116, 139; +--success-rgb: 16, 185, 129; +--info-rgb: 14, 165, 233; +--warning-rgb: 245, 158, 11; +--danger-rgb: 244, 63, 94; +--light-rgb: 248, 250, 252; +--dark-rgb: 51, 65, 85; +--primary-text-emphasis: #0f766e; +--secondary-text-emphasis: #334155; +--success-text-emphasis: #047857; +--info-text-emphasis: #0369a1; +--warning-text-emphasis: #c2410c; +--danger-text-emphasis: #be123c; +--light-text-emphasis: #475569; +--dark-text-emphasis: #475569; +--primary-bg-subtle: #ccfbf1; +--secondary-bg-subtle: #e2e8f0; +--success-bg-subtle: #d1fae5; +--info-bg-subtle: #e0f2fe; +--warning-bg-subtle: #fef3c7; +--danger-bg-subtle: #ffe4e6; --light-bg-subtle: #fcfcfd; ---dark-bg-subtle: #ced4da; ---primary-border-subtle: #99b; ---secondary-border-subtle: #c5c8cb; ---success-border-subtle: #b4ceb4; ---info-border-subtle: #acc1d1; ---warning-border-subtle: #dec099; ---danger-border-subtle: #dba5a2; ---light-border-subtle: #eaedf0; ---dark-border-subtle: #adb5bd; +--dark-bg-subtle: #cbd5e1; +--primary-border-subtle: #99f6e4; +--secondary-border-subtle: #cbd5e1; +--success-border-subtle: #a7f3d0; +--info-border-subtle: #bae6fd; +--warning-border-subtle: #fde68a; +--danger-border-subtle: #fecdd3; +--light-border-subtle: #f1f5f9; +--dark-border-subtle: #94a3b8; /* ===== STANDARD COLORS ===== */ ---blue: #010156; ---indigo: #6812f3; ---purple: #6f42c2; ---pink: #e93f8e; ---red: #a51f18; ---orange: #fd7e17; ---yellow: #ad6200; ---green: #448344; ---teal: #5abfdd; ---cyan: #30638d; +--blue: #3b82f6; +--indigo: #6366f1; +--purple: #a855f7; +--pink: #ec4899; +--red: #ef4444; +--orange: #f97316; +--yellow: #f59e0b; +--green: #10b981; +--teal: #14b8a6; +--cyan: #06b6d4; --black: #000; --white: #fff; /* ===== GRAY SCALE ===== */ ---gray-100: #f9fafb; ---gray-200: #eaedf0; ---gray-300: #dfe3e7; ---gray-400: #ced4da; ---gray-500: #adb5bd; ---gray-600: #6d757e; ---gray-700: #484f56; ---gray-800: #353b41; ---gray-900: #22262a; +--gray-100: #f8fafc; +--gray-200: #f1f5f9; +--gray-300: #e2e8f0; +--gray-400: #cbd5e1; +--gray-500: #94a3b8; +--gray-600: #64748b; +--gray-700: #475569; +--gray-800: #334155; +--gray-900: #1e293b; --white-rgb: 255, 255, 255; --black-rgb: 0, 0, 0; @@ -201,73 +201,73 @@ color-scheme: light; /* ===== CONTAINER BACKGROUNDS ===== */ /* Below Topbar Container */ ---container-below-topbar-bg-image: ; ---container-below-topbar-bg-color ; +--container-below-topbar-bg-image: none; +--container-below-topbar-bg-color: transparent; --container-below-topbar-bg-position: auto; --container-below-topbar-bg-attachment: fixed; --container-below-topbar-bg-repeat: repeat; --container-below-topbar-bg-size: auto; ---container-below-topbar-border: ; ---container-below-topbar-border-radius: ; +--container-below-topbar-border: none; +--container-below-topbar-border-radius: 0; /* Top A Container */ ---container-top-a-bg-image: ; ---container-top-a-bg-color: ; +--container-top-a-bg-image: none; +--container-top-a-bg-color: transparent; --container-top-a-bg-position: auto; --container-top-a-bg-attachment: fixed; --container-top-a-bg-repeat: repeat; --container-top-a-bg-size: auto; ---container-top-a-border: ; ---container-top-a-border-radius: ; +--container-top-a-border: none; +--container-top-a-border-radius: 0; /* Top B Container */ ---container-top-b-bg-image: ; ---container-top-b-bg-color: ; +--container-top-b-bg-image: none; +--container-top-b-bg-color: transparent; --container-top-b-bg-position: auto; --container-top-b-bg-attachment: fixed; --container-top-b-bg-repeat: repeat; --container-top-b-bg-size: auto; ---container-top-b-border: ; ---container-top-b-border-radius: ; +--container-top-b-border: none; +--container-top-b-border-radius: 0; /* TOC Container */ --container-toc-bg: var(--mainmenu-nav-link-color); --container-toc-color: var(--color-primary); /* Sidebar Container */ ---container-sidebar-bg-image: ; ---container-sidebar-bg-color: ; +--container-sidebar-bg-image: none; +--container-sidebar-bg-color: transparent; --container-sidebar-bg-position: auto; --container-sidebar-bg-attachment: scroll; --container-sidebar-bg-repeat: repeat; --container-sidebar-bg-size: auto; ---container-sidebar-border: ; ---container-sidebar-border-radius: ; +--container-sidebar-border: none; +--container-sidebar-border-radius: 0; /* Bottom A Container */ ---container-bottom-a-bg-image: ; ---container-bottom-a-bg-color: ; +--container-bottom-a-bg-image: none; +--container-bottom-a-bg-color: transparent; --container-bottom-a-bg-position: auto; --container-bottom-a-bg-attachment: fixed; --container-bottom-a-bg-repeat: repeat; --container-bottom-a-bg-size: auto; ---container-bottom-a-border: ; ---container-bottom-a-border-radius: ; +--container-bottom-a-border: none; +--container-bottom-a-border-radius: 0; /* Bottom B Container */ ---container-bottom-b-bg-image: ; ---container-bottom-b-bg-color: ; +--container-bottom-b-bg-image: none; +--container-bottom-b-bg-color: transparent; --container-bottom-b-bg-position: auto; --container-bottom-b-bg-attachment: fixed; --container-bottom-b-bg-repeat: repeat; --container-bottom-b-bg-size: auto; ---container-bottom-b-border: ; ---container-bottom-b-border-radius: ; +--container-bottom-b-border: none; +--container-bottom-b-border-radius: 0; /* ===== BORDERS ===== */ --border-width: 1px; --border-style: solid; ---border-color: #dfe3e7; +--border-color: #e2e8f0; --border-color-translucent: #0000002d; --border-radius: .25rem; --border-radius-sm: .2rem; @@ -278,27 +278,27 @@ color-scheme: light; --border-radius-pill: 50rem; /* ===== SHADOWS ===== */ ---box-shadow: 0 .5rem 1rem #00000026; ---box-shadow-sm: 0 .125rem .25rem #00000013; ---box-shadow-lg: 0 1rem 3rem #0000002d; ---box-shadow-inset: inset 0 1px 2px #00000013; +--box-shadow: 0 .5rem 1rem #0000001a; +--box-shadow-sm: 0 .125rem .25rem #0000000d; +--box-shadow-lg: 0 1rem 3rem #00000026; +--box-shadow-inset: inset 0 1px 2px #0000000d; /* ===== FOCUS & FORMS ===== */ --focus-ring-width: .25rem; --focus-ring-opacity: .25; ---focus-ring-color: #01015640; ---input-color: hsl(210, 11%, 15%); ---input-bg: hsl(210, 20%, 98%); ---input-border-color: hsl(210, 14%, 83%); ---input-focus-border-color: #8894aa; ---input-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); ---input-placeholder-color: hsl(210, 7%, 46%); ---input-disabled-bg: hsl(210, 16%, 93%); ---input-disabled-border-color: hsl(210, 14%, 83%); ---form-valid-color: #448344; ---form-valid-border-color: #448344; ---form-invalid-color: #a51f18; ---form-invalid-border-color: #a51f18; +--focus-ring-color: #0d948840; +--input-color: #1e293b; +--input-bg: #f8fafc; +--input-border-color: #cbd5e1; +--input-focus-border-color: #14b8a6; +--input-focus-box-shadow: 0 0 0 0.25rem rgba(13, 148, 136, 0.25); +--input-placeholder-color: #64748b; +--input-disabled-bg: #e2e8f0; +--input-disabled-border-color: #cbd5e1; +--form-valid-color: #10b981; +--form-valid-border-color: #10b981; +--form-invalid-color: #f43f5e; +--form-invalid-border-color: #f43f5e; /* ===== BUTTONS ===== */ --btn-border-radius: var(--border-radius); @@ -326,10 +326,10 @@ color-scheme: light; /* ===== VIRTUEMART (VM) ===== */ /* VM Surfaces */ --vm-surface: #ffffff; ---vm-surface-2: #f8f9fa; +--vm-surface-2: #f8fafc; --vm-text: var(--body-color); ---vm-text-strong: #000000; ---vm-text-muted: #6c757d; +--vm-text-strong: #0f172a; +--vm-text-muted: #64748b; --vm-border: var(--border-color); --vm-price-color: var(--success); @@ -403,340 +403,340 @@ color-scheme: light; --vm-vendor-menu-hover-bg: var(--secondary-bg); /* ===== GABLE ===== */ ---gab-blue: #0066cc; ---gab-green: #28a745; ---gab-red: #dc3545; ---gab-orange: #fd7e14; ---gab-gray1: #495057; ---gab-gray2: #6c757d; ---gab-gray3: #adb5bd; +--gab-blue: #3b82f6; +--gab-green: #10b981; +--gab-red: #ef4444; +--gab-orange: #f97316; +--gab-gray1: #475569; +--gab-gray2: #64748b; +--gab-gray3: #94a3b8; } .btn { - --btn-padding-x: 1rem; - --btn-padding-y: 0.6rem; - --btn-font-family: ; - --btn-font-size: 1rem; - --btn-font-weight: 400; - --btn-line-height: 1.5; - --btn-color: hsl(210, 11%, 15%); - --btn-bg: transparent; - --btn-border-width: 1px; - --btn-border-color: transparent; - --btn-border-radius: 0.25rem; - --btn-active-border-color: transparent; - --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); - --btn-disabled-opacity: 0.65; - --btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); - display: inline-block; - padding: var(--btn-padding-y) var(--btn-padding-x); - font-family: var(--btn-font-family); - font-size: var(--btn-font-size); - font-weight: var(--btn-font-weight); - line-height: var(--btn-line-height); - color: var(--btn-color); - text-align: center; - text-decoration: none; - vertical-align: middle; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border: var(--btn-border-width) solid var(--btn-border-color); - border-radius: var(--btn-border-radius); - background-color: var(--btn-bg); - -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; +--btn-padding-x: 1rem; +--btn-padding-y: 0.6rem; +--btn-font-family: inherit; +--btn-font-size: 1rem; +--btn-font-weight: 400; +--btn-line-height: 1.5; +--btn-color: #1e293b; +--btn-bg: transparent; +--btn-border-width: 1px; +--btn-border-color: transparent; +--btn-border-radius: 0.25rem; +--btn-active-border-color: transparent; +--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); +--btn-disabled-opacity: 0.65; +--btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); +display: inline-block; +padding: var(--btn-padding-y) var(--btn-padding-x); +font-family: var(--btn-font-family); +font-size: var(--btn-font-size); +font-weight: var(--btn-font-weight); +line-height: var(--btn-line-height); +color: var(--btn-color); +text-align: center; +text-decoration: none; +vertical-align: middle; +cursor: pointer; +-webkit-user-select: none; +-moz-user-select: none; +-ms-user-select: none; +user-select: none; +border: var(--btn-border-width) solid var(--btn-border-color); +border-radius: var(--btn-border-radius); +background-color: var(--btn-bg); +-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; +transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; +-o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; } .btn-primary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(240, 98%, 17%); - --btn-border-color: hsl(240, 98%, 17%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #010149; - --btn-hover-border-color: #010145; - --btn-focus-shadow-rgb: 39, 39, 111; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #010145; - --btn-active-border-color: #010141; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(240, 98%, 17%); - --btn-disabled-border-color: hsl(240, 98%, 17%); +--btn-color: #ffffff; +--btn-bg: #0d9488; +--btn-border-color: #0d9488; +--btn-hover-color: #ffffff; +--btn-hover-bg: #0f766e; +--btn-hover-border-color: #0f766e; +--btn-focus-shadow-rgb: 13, 148, 136; +--btn-active-color: #ffffff; +--btn-active-bg: #0f766e; +--btn-active-border-color: #115e59; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #ffffff; +--btn-disabled-bg: #0d9488; +--btn-disabled-border-color: #0d9488; } .btn-secondary { - --btn-color: --nav-text-color; - --btn-bg: --nav-bg-color; - --btn-border-color: hsl(210, 7%, 46%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #5d636b; - --btn-hover-border-color: #575e65; - --btn-focus-shadow-rgb: gray; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #575e65; - --btn-active-border-color: #52585f; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(210, 7%, 46%); - --btn-disabled-border-color: hsl(210, 7%, 46%); +--btn-color: #ffffff; +--btn-bg: #64748b; +--btn-border-color: #64748b; +--btn-hover-color: #ffffff; +--btn-hover-bg: #475569; +--btn-hover-border-color: #475569; +--btn-focus-shadow-rgb: 100, 116, 139; +--btn-active-color: #ffffff; +--btn-active-bg: #475569; +--btn-active-border-color: #334155; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #ffffff; +--btn-disabled-bg: #64748b; +--btn-disabled-border-color: #64748b; } .btn-success { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(120, 32%, 39%); - --btn-border-color: hsl(120, 32%, 39%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #3a6f3a; - --btn-hover-border-color: #366936; - --btn-focus-shadow-rgb: 96, 150, 96; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #366936; - --btn-active-border-color: #336233; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(120, 32%, 39%); - --btn-disabled-border-color: hsl(120, 32%, 39%); +--btn-color: #ffffff; +--btn-bg: #10b981; +--btn-border-color: #10b981; +--btn-hover-color: #ffffff; +--btn-hover-bg: #059669; +--btn-hover-border-color: #059669; +--btn-focus-shadow-rgb: 16, 185, 129; +--btn-active-color: #ffffff; +--btn-active-bg: #059669; +--btn-active-border-color: #047857; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #ffffff; +--btn-disabled-bg: #10b981; +--btn-disabled-border-color: #10b981; } .btn-info { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(207, 49%, 37%); - --btn-border-color: hsl(207, 49%, 37%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #295478; - --btn-hover-border-color: #264f71; - --btn-focus-shadow-rgb: 79, 122, 158; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #264f71; - --btn-active-border-color: #244a6a; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(207, 49%, 37%); - --btn-disabled-border-color: hsl(207, 49%, 37%); +--btn-color: #ffffff; +--btn-bg: #0ea5e9; +--btn-border-color: #0ea5e9; +--btn-hover-color: #ffffff; +--btn-hover-bg: #0284c7; +--btn-hover-border-color: #0284c7; +--btn-focus-shadow-rgb: 14, 165, 233; +--btn-active-color: #ffffff; +--btn-active-bg: #0284c7; +--btn-active-border-color: #0369a1; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #ffffff; +--btn-disabled-bg: #0ea5e9; +--btn-disabled-border-color: #0ea5e9; } .btn-warning { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(34, 100%, 34%); - --btn-border-color: hsl(34, 100%, 34%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #935300; - --btn-hover-border-color: #8a4e00; - --btn-focus-shadow-rgb: 185, 122, 38; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #8a4e00; - --btn-active-border-color: #824a00; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(34, 100%, 34%); - --btn-disabled-border-color: hsl(34, 100%, 34%); +--btn-color: #ffffff; +--btn-bg: #f59e0b; +--btn-border-color: #f59e0b; +--btn-hover-color: #ffffff; +--btn-hover-bg: #d97706; +--btn-hover-border-color: #d97706; +--btn-focus-shadow-rgb: 245, 158, 11; +--btn-active-color: #ffffff; +--btn-active-bg: #d97706; +--btn-active-border-color: #b45309; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #ffffff; +--btn-disabled-bg: #f59e0b; +--btn-disabled-border-color: #f59e0b; } .btn-danger { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(3, 75%, 37%); - --btn-border-color: hsl(3, 75%, 37%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #8c1a14; - --btn-hover-border-color: #841913; - --btn-focus-shadow-rgb: 179, 65, 59; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #841913; - --btn-active-border-color: #7c1712; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(3, 75%, 37%); - --btn-disabled-border-color: hsl(3, 75%, 37%); +--btn-color: #ffffff; +--btn-bg: #f43f5e; +--btn-border-color: #f43f5e; +--btn-hover-color: #ffffff; +--btn-hover-bg: #e11d48; +--btn-hover-border-color: #e11d48; +--btn-focus-shadow-rgb: 244, 63, 94; +--btn-active-color: #ffffff; +--btn-active-bg: #e11d48; +--btn-active-border-color: #be123c; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #ffffff; +--btn-disabled-bg: #f43f5e; +--btn-disabled-border-color: #f43f5e; } .btn-light { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: hsl(210, 17%, 98%); - --btn-border-color: hsl(210, 17%, 98%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: #d4d5d5; - --btn-hover-border-color: #c7c8c9; - --btn-focus-shadow-rgb: 212, 213, 213; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: #c7c8c9; - --btn-active-border-color: #bbbcbc; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: hsl(210, 17%, 98%); - --btn-disabled-border-color: hsl(210, 17%, 98%); +--btn-color: #1e293b; +--btn-bg: #f8fafc; +--btn-border-color: #f8fafc; +--btn-hover-color: #1e293b; +--btn-hover-bg: #e2e8f0; +--btn-hover-border-color: #e2e8f0; +--btn-focus-shadow-rgb: 248, 250, 252; +--btn-active-color: #1e293b; +--btn-active-bg: #e2e8f0; +--btn-active-border-color: #cbd5e1; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #1e293b; +--btn-disabled-bg: #f8fafc; +--btn-disabled-border-color: #f8fafc; } .btn-dark { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(210, 10%, 23%); - --btn-border-color: hsl(210, 10%, 23%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #53585e; - --btn-hover-border-color: #494f54; - --btn-focus-shadow-rgb: 83, 88, 94; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #5d6267; - --btn-active-border-color: #494f54; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(210, 10%, 23%); - --btn-disabled-border-color: hsl(210, 10%, 23%); +--btn-color: #ffffff; +--btn-bg: #334155; +--btn-border-color: #334155; +--btn-hover-color: #ffffff; +--btn-hover-bg: #1e293b; +--btn-hover-border-color: #1e293b; +--btn-focus-shadow-rgb: 51, 65, 85; +--btn-active-color: #ffffff; +--btn-active-bg: #1e293b; +--btn-active-border-color: #0f172a; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #ffffff; +--btn-disabled-bg: #334155; +--btn-disabled-border-color: #334155; } .btn-outline-primary { - --btn-color: hsl(240, 98%, 17%); - --btn-border-color: hsl(240, 98%, 17%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(240, 98%, 17%); - --btn-hover-border-color: hsl(240, 98%, 17%); - --btn-focus-shadow-rgb: 1, 1, 86; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(240, 98%, 17%); - --btn-active-border-color: hsl(240, 98%, 17%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(240, 98%, 17%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(240, 98%, 17%); - --gradient: none; +--btn-color: #0d9488; +--btn-border-color: #0d9488; +--btn-hover-color: #ffffff; +--btn-hover-bg: #0d9488; +--btn-hover-border-color: #0d9488; +--btn-focus-shadow-rgb: 13, 148, 136; +--btn-active-color: #ffffff; +--btn-active-bg: #0d9488; +--btn-active-border-color: #0d9488; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #0d9488; +--btn-disabled-bg: transparent; +--btn-disabled-border-color: #0d9488; +--gradient: none; } .btn-outline-secondary { - --btn-color: hsl(210, 7%, 46%); - --btn-border-color: hsl(210, 7%, 46%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(210, 7%, 46%); - --btn-hover-border-color: hsl(210, 7%, 46%); - --btn-focus-shadow-rgb: 109, 117, 126; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 7%, 46%); - --btn-active-border-color: hsl(210, 7%, 46%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 7%, 46%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 7%, 46%); - --gradient: none; +--btn-color: #64748b; +--btn-border-color: #64748b; +--btn-hover-color: #ffffff; +--btn-hover-bg: #64748b; +--btn-hover-border-color: #64748b; +--btn-focus-shadow-rgb: 100, 116, 139; +--btn-active-color: #ffffff; +--btn-active-bg: #64748b; +--btn-active-border-color: #64748b; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #64748b; +--btn-disabled-bg: transparent; +--btn-disabled-border-color: #64748b; +--gradient: none; } .btn-outline-success { - --btn-color: hsl(120, 32%, 39%); - --btn-border-color: hsl(120, 32%, 39%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(120, 32%, 39%); - --btn-hover-border-color: hsl(120, 32%, 39%); - --btn-focus-shadow-rgb: 68, 131, 68; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(120, 32%, 39%); - --btn-active-border-color: hsl(120, 32%, 39%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(120, 32%, 39%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(120, 32%, 39%); - --gradient: none; +--btn-color: #10b981; +--btn-border-color: #10b981; +--btn-hover-color: #ffffff; +--btn-hover-bg: #10b981; +--btn-hover-border-color: #10b981; +--btn-focus-shadow-rgb: 16, 185, 129; +--btn-active-color: #ffffff; +--btn-active-bg: #10b981; +--btn-active-border-color: #10b981; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #10b981; +--btn-disabled-bg: transparent; +--btn-disabled-border-color: #10b981; +--gradient: none; } .btn-outline-info { - --btn-color: hsl(207, 49%, 37%); - --btn-border-color: hsl(207, 49%, 37%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(207, 49%, 37%); - --btn-hover-border-color: hsl(207, 49%, 37%); - --btn-focus-shadow-rgb: 48, 99, 141; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(207, 49%, 37%); - --btn-active-border-color: hsl(207, 49%, 37%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(207, 49%, 37%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(207, 49%, 37%); - --gradient: none; +--btn-color: #0ea5e9; +--btn-border-color: #0ea5e9; +--btn-hover-color: #ffffff; +--btn-hover-bg: #0ea5e9; +--btn-hover-border-color: #0ea5e9; +--btn-focus-shadow-rgb: 14, 165, 233; +--btn-active-color: #ffffff; +--btn-active-bg: #0ea5e9; +--btn-active-border-color: #0ea5e9; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #0ea5e9; +--btn-disabled-bg: transparent; +--btn-disabled-border-color: #0ea5e9; +--gradient: none; } .btn-outline-warning { - --btn-color: hsl(34, 100%, 34%); - --btn-border-color: hsl(34, 100%, 34%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(34, 100%, 34%); - --btn-hover-border-color: hsl(34, 100%, 34%); - --btn-focus-shadow-rgb: 173, 98, 0; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(34, 100%, 34%); - --btn-active-border-color: hsl(34, 100%, 34%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(34, 100%, 34%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(34, 100%, 34%); - --gradient: none; +--btn-color: #f59e0b; +--btn-border-color: #f59e0b; +--btn-hover-color: #ffffff; +--btn-hover-bg: #f59e0b; +--btn-hover-border-color: #f59e0b; +--btn-focus-shadow-rgb: 245, 158, 11; +--btn-active-color: #ffffff; +--btn-active-bg: #f59e0b; +--btn-active-border-color: #f59e0b; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #f59e0b; +--btn-disabled-bg: transparent; +--btn-disabled-border-color: #f59e0b; +--gradient: none; } .btn-outline-danger { - --btn-color: hsl(3, 75%, 37%); - --btn-border-color: hsl(3, 75%, 37%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(3, 75%, 37%); - --btn-hover-border-color: hsl(3, 75%, 37%); - --btn-focus-shadow-rgb: 165, 31, 24; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(3, 75%, 37%); - --btn-active-border-color: hsl(3, 75%, 37%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(3, 75%, 37%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(3, 75%, 37%); - --gradient: none; +--btn-color: #f43f5e; +--btn-border-color: #f43f5e; +--btn-hover-color: #ffffff; +--btn-hover-bg: #f43f5e; +--btn-hover-border-color: #f43f5e; +--btn-focus-shadow-rgb: 244, 63, 94; +--btn-active-color: #ffffff; +--btn-active-bg: #f43f5e; +--btn-active-border-color: #f43f5e; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #f43f5e; +--btn-disabled-bg: transparent; +--btn-disabled-border-color: #f43f5e; +--gradient: none; } .btn-outline-light { - --btn-color: hsl(210, 17%, 98%); - --btn-border-color: hsl(210, 17%, 98%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(210, 17%, 98%); - --btn-hover-border-color: hsl(210, 17%, 98%); - --btn-focus-shadow-rgb: 249, 250, 251; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(210, 17%, 98%); - --btn-active-border-color: hsl(210, 17%, 98%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 17%, 98%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 17%, 98%); - --gradient: none; +--btn-color: #f8fafc; +--btn-border-color: #f8fafc; +--btn-hover-color: #1e293b; +--btn-hover-bg: #f8fafc; +--btn-hover-border-color: #f8fafc; +--btn-focus-shadow-rgb: 248, 250, 252; +--btn-active-color: #1e293b; +--btn-active-bg: #f8fafc; +--btn-active-border-color: #f8fafc; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #f8fafc; +--btn-disabled-bg: transparent; +--btn-disabled-border-color: #f8fafc; +--gradient: none; } .btn-outline-dark { - --btn-color: hsl(210, 10%, 23%); - --btn-border-color: hsl(210, 10%, 23%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(210, 10%, 23%); - --btn-hover-border-color: hsl(210, 10%, 23%); - --btn-focus-shadow-rgb: 53, 59, 65; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 10%, 23%); - --btn-active-border-color: hsl(210, 10%, 23%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 10%, 23%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 10%, 23%); - --gradient: none; +--btn-color: #334155; +--btn-border-color: #334155; +--btn-hover-color: #ffffff; +--btn-hover-bg: #334155; +--btn-hover-border-color: #334155; +--btn-focus-shadow-rgb: 51, 65, 85; +--btn-active-color: #ffffff; +--btn-active-bg: #334155; +--btn-active-border-color: #334155; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: #334155; +--btn-disabled-bg: transparent; +--btn-disabled-border-color: #334155; +--gradient: none; } .btn-link { - --btn-font-weight: 400; - --btn-color: var(--link-color); - --btn-bg: transparent; - --btn-border-color: transparent; - --btn-hover-color: var(--link-hover-color); - --btn-hover-border-color: transparent; - --btn-active-color: var(--link-hover-color); - --btn-active-border-color: transparent; - --btn-disabled-color: hsl(210, 7%, 46%); - --btn-disabled-border-color: transparent; - --btn-box-shadow: none; - --btn-focus-shadow-rgb: 39, 39, 111; - text-decoration: underline; +--btn-font-weight: 400; +--btn-color: var(--link-color); +--btn-bg: transparent; +--btn-border-color: transparent; +--btn-hover-color: var(--link-hover-color); +--btn-hover-border-color: transparent; +--btn-active-color: var(--link-hover-color); +--btn-active-border-color: transparent; +--btn-disabled-color: #64748b; +--btn-disabled-border-color: transparent; +--btn-box-shadow: none; +--btn-focus-shadow-rgb: 13, 148, 136; +text-decoration: underline; } diff --git a/src/media/css/colors/light/colors_standard.css b/src/media/css/colors/light/colors_standard.css index a0c410e..f890562 100644 --- a/src/media/css/colors/light/colors_standard.css +++ b/src/media/css/colors/light/colors_standard.css @@ -201,68 +201,68 @@ color-scheme: light; /* ===== CONTAINER BACKGROUNDS ===== */ /* Below Topbar Container */ ---container-below-topbar-bg-image: ; ---container-below-topbar-bg-color ; +--container-below-topbar-bg-image: none; +--container-below-topbar-bg-color: transparent; --container-below-topbar-bg-position: auto; --container-below-topbar-bg-attachment: fixed; --container-below-topbar-bg-repeat: repeat; --container-below-topbar-bg-size: auto; ---container-below-topbar-border: ; ---container-below-topbar-border-radius: ; +--container-below-topbar-border: none; +--container-below-topbar-border-radius: 0; /* Top A Container */ ---container-top-a-bg-image: ; ---container-top-a-bg-color: ; +--container-top-a-bg-image: none; +--container-top-a-bg-color: transparent; --container-top-a-bg-position: auto; --container-top-a-bg-attachment: fixed; --container-top-a-bg-repeat: repeat; --container-top-a-bg-size: auto; ---container-top-a-border: ; ---container-top-a-border-radius: ; +--container-top-a-border: none; +--container-top-a-border-radius: 0; /* Top B Container */ ---container-top-b-bg-image: ; ---container-top-b-bg-color: ; +--container-top-b-bg-image: none; +--container-top-b-bg-color: transparent; --container-top-b-bg-position: auto; --container-top-b-bg-attachment: fixed; --container-top-b-bg-repeat: repeat; --container-top-b-bg-size: auto; ---container-top-b-border: ; ---container-top-b-border-radius: ; +--container-top-b-border: none; +--container-top-b-border-radius: 0; /* TOC Container */ --container-toc-bg: var(--mainmenu-nav-link-color); --container-toc-color: var(--color-primary); /* Sidebar Container */ ---container-sidebar-bg-image: ; ---container-sidebar-bg-color: ; +--container-sidebar-bg-image: none; +--container-sidebar-bg-color: transparent; --container-sidebar-bg-position: auto; --container-sidebar-bg-attachment: scroll; --container-sidebar-bg-repeat: repeat; --container-sidebar-bg-size: auto; ---container-sidebar-border: ; ---container-sidebar-border-radius: ; +--container-sidebar-border: none; +--container-sidebar-border-radius: 0; /* Bottom A Container */ ---container-bottom-a-bg-image: ; ---container-bottom-a-bg-color: ; +--container-bottom-a-bg-image: none; +--container-bottom-a-bg-color: transparent; --container-bottom-a-bg-position: auto; --container-bottom-a-bg-attachment: fixed; --container-bottom-a-bg-repeat: repeat; --container-bottom-a-bg-size: auto; ---container-bottom-a-border: ; ---container-bottom-a-border-radius: ; +--container-bottom-a-border: none; +--container-bottom-a-border-radius: 0; /* Bottom B Container */ ---container-bottom-b-bg-image: ; ---container-bottom-b-bg-color: ; +--container-bottom-b-bg-image: none; +--container-bottom-b-bg-color: transparent; --container-bottom-b-bg-position: auto; --container-bottom-b-bg-attachment: fixed; --container-bottom-b-bg-repeat: repeat; --container-bottom-b-bg-size: auto; ---container-bottom-b-border: ; ---container-bottom-b-border-radius: ; +--container-bottom-b-border: none; +--container-bottom-b-border-radius: 0; /* ===== BORDERS ===== */ --border-width: 1px; @@ -415,7 +415,7 @@ color-scheme: light; .btn { --btn-padding-x: 1rem; --btn-padding-y: 0.6rem; ---btn-font-family: ; +--btn-font-family: inherit; --btn-font-size: 1rem; --btn-font-weight: 400; --btn-line-height: 1.5; diff --git a/src/media/css/template.css b/src/media/css/template.css index be9834a..058ef79 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -18357,3 +18357,201 @@ nav[data-toggle=toc] .nav-link.active+ul{ .icon-check::before { content: "\f00c"; } .icon-plus::before { content: "\f067"; } .icon-minus::before { content: "\f068"; } + +/* ===== BOOTSTRAP & JOOMLA BUTTONS ===== */ +.btn-primary { + --btn-color: white; + --btn-bg: var(--color-primary); + --btn-border-color: var(--color-primary); + --btn-hover-bg: color-mix(in srgb, var(--color-primary) 85%, black); + --btn-hover-border-color: color-mix(in srgb, var(--color-primary) 85%, black); +} + +.btn-secondary { + --btn-color: var(--body-bg); + --btn-bg: var(--secondary); + --btn-border-color: var(--secondary); + --btn-hover-bg: color-mix(in srgb, var(--secondary) 85%, black); + --btn-hover-border-color: color-mix(in srgb, var(--secondary) 85%, black); +} + +.btn-success { + --btn-color: white; + --btn-bg: var(--success); + --btn-border-color: var(--success); + --btn-hover-bg: color-mix(in srgb, var(--success) 85%, black); + --btn-hover-border-color: color-mix(in srgb, var(--success) 85%, black); +} + +.btn-info { + --btn-color: white; + --btn-bg: var(--info); + --btn-border-color: var(--info); + --btn-hover-bg: color-mix(in srgb, var(--info) 85%, black); + --btn-hover-border-color: color-mix(in srgb, var(--info) 85%, black); +} + +.btn-warning { + --btn-color: white; + --btn-bg: var(--warning); + --btn-border-color: var(--warning); + --btn-hover-bg: color-mix(in srgb, var(--warning) 85%, black); + --btn-hover-border-color: color-mix(in srgb, var(--warning) 85%, black); +} + +.btn-danger { + --btn-color: white; + --btn-bg: var(--danger); + --btn-border-color: var(--danger); + --btn-hover-bg: color-mix(in srgb, var(--danger) 85%, black); + --btn-hover-border-color: color-mix(in srgb, var(--danger) 85%, black); +} + +.btn-light { + --btn-color: var(--body-color); + --btn-bg: var(--light); + --btn-border-color: var(--light); + --btn-hover-bg: color-mix(in srgb, var(--light) 90%, black); + --btn-hover-border-color: color-mix(in srgb, var(--light) 90%, black); +} + +.btn-dark { + --btn-color: white; + --btn-bg: var(--dark); + --btn-border-color: var(--dark); + --btn-hover-bg: color-mix(in srgb, var(--dark) 85%, black); + --btn-hover-border-color: color-mix(in srgb, var(--dark) 85%, black); +} + +/* Outline button variants */ +.btn-outline-primary { + --btn-color: var(--color-primary); + --btn-border-color: var(--color-primary); + --btn-hover-color: white; + --btn-hover-bg: var(--color-primary); + --btn-hover-border-color: var(--color-primary); +} + +.btn-outline-secondary { + --btn-color: var(--secondary); + --btn-border-color: var(--secondary); + --btn-hover-color: white; + --btn-hover-bg: var(--secondary); + --btn-hover-border-color: var(--secondary); +} + +.btn-outline-success { + --btn-color: var(--success); + --btn-border-color: var(--success); + --btn-hover-color: white; + --btn-hover-bg: var(--success); + --btn-hover-border-color: var(--success); +} + +.btn-outline-info { + --btn-color: var(--info); + --btn-border-color: var(--info); + --btn-hover-color: white; + --btn-hover-bg: var(--info); + --btn-hover-border-color: var(--info); +} + +.btn-outline-warning { + --btn-color: var(--warning); + --btn-border-color: var(--warning); + --btn-hover-color: white; + --btn-hover-bg: var(--warning); + --btn-hover-border-color: var(--warning); +} + +.btn-outline-danger { + --btn-color: var(--danger); + --btn-border-color: var(--danger); + --btn-hover-color: white; + --btn-hover-bg: var(--danger); + --btn-hover-border-color: var(--danger); +} + +.btn-outline-light { + --btn-color: var(--light); + --btn-border-color: var(--light); + --btn-hover-color: var(--body-color); + --btn-hover-bg: var(--light); + --btn-hover-border-color: var(--light); +} + +.btn-outline-dark { + --btn-color: var(--dark); + --btn-border-color: var(--dark); + --btn-hover-color: white; + --btn-hover-bg: var(--dark); + --btn-hover-border-color: var(--dark); +} + +/* ===== BOOTSTRAP & JOOMLA ALERTS ===== */ +.alert-primary { + --alert-bg: color-mix(in srgb, var(--primary) 10%, var(--body-bg)); + --alert-color: color-mix(in srgb, var(--primary) 90%, black); + --alert-border-color: color-mix(in srgb, var(--primary) 20%, var(--body-bg)); +} + +.alert-secondary { + --alert-bg: color-mix(in srgb, var(--secondary) 10%, var(--body-bg)); + --alert-color: color-mix(in srgb, var(--secondary) 90%, black); + --alert-border-color: color-mix(in srgb, var(--secondary) 20%, var(--body-bg)); +} + +.alert-success { + --alert-bg: color-mix(in srgb, var(--success) 10%, var(--body-bg)); + --alert-color: color-mix(in srgb, var(--success) 90%, black); + --alert-border-color: color-mix(in srgb, var(--success) 20%, var(--body-bg)); +} + +.alert-info { + --alert-bg: color-mix(in srgb, var(--info) 10%, var(--body-bg)); + --alert-color: color-mix(in srgb, var(--info) 90%, black); + --alert-border-color: color-mix(in srgb, var(--info) 20%, var(--body-bg)); +} + +.alert-warning { + --alert-bg: color-mix(in srgb, var(--warning) 10%, var(--body-bg)); + --alert-color: color-mix(in srgb, var(--warning) 90%, black); + --alert-border-color: color-mix(in srgb, var(--warning) 20%, var(--body-bg)); +} + +.alert-danger { + --alert-bg: color-mix(in srgb, var(--danger) 10%, var(--body-bg)); + --alert-color: color-mix(in srgb, var(--danger) 90%, black); + --alert-border-color: color-mix(in srgb, var(--danger) 20%, var(--body-bg)); +} + +.alert-light { + --alert-bg: var(--light); + --alert-color: var(--body-color); + --alert-border-color: color-mix(in srgb, var(--light) 85%, black); +} + +.alert-dark { + --alert-bg: var(--dark); + --alert-color: white; + --alert-border-color: var(--dark); +} + +/* Joomla-specific alert mappings */ +.alert-message { + --alert-bg: var(--alert-info, color-mix(in srgb, var(--info) 10%, var(--body-bg))); + --alert-color: color-mix(in srgb, var(--info) 90%, black); + --alert-border-color: color-mix(in srgb, var(--info) 20%, var(--body-bg)); +} + +.alert-error { + --alert-bg: var(--alert-danger, color-mix(in srgb, var(--danger) 10%, var(--body-bg))); + --alert-color: color-mix(in srgb, var(--danger) 90%, black); + --alert-border-color: color-mix(in srgb, var(--danger) 20%, var(--body-bg)); +} + +.alert-notice { + --alert-bg: var(--alert-warning, color-mix(in srgb, var(--warning) 10%, var(--body-bg))); + --alert-color: color-mix(in srgb, var(--warning) 90%, black); + --alert-border-color: color-mix(in srgb, var(--warning) 20%, var(--body-bg)); +}