Stylesheet Updats
This commit is contained in:
@@ -0,0 +1,351 @@
|
||||
/*!
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.moko-cassiopeia
|
||||
* @file /media/templates/sote/moko-cassiopeia/css/global/dark/colors_alternative.css
|
||||
*
|
||||
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
*
|
||||
* Website: https://mokoconsulting.tech
|
||||
* Email: hello@mokoconsulting.tech
|
||||
* Phone: +1 (931) 279-6313
|
||||
*/
|
||||
|
||||
/* -----------------------------------------------
|
||||
* DARK THEME
|
||||
* --------------------------------------------- */
|
||||
|
||||
:root[data-bs-theme='dark']{
|
||||
/* System hint for native widgets */
|
||||
color-scheme: dark;
|
||||
|
||||
/* Brand & links */
|
||||
--color-primary: #112855;
|
||||
--accent-color-primary: #3f8ff0;
|
||||
--accent-color-secondary: #6fb3ff;
|
||||
|
||||
--mainmenu-nav-link-color: #fff;
|
||||
|
||||
--color-link: #224FAA;
|
||||
--color-hover: #224FAA;
|
||||
|
||||
/* Header background (kept same image; works over dark bg) */
|
||||
--header-background-image: url('../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); --header-background-attachment: fixed;
|
||||
--header-background-repeat: repeat;
|
||||
--header-background-size: auto;
|
||||
|
||||
/* Section containers */
|
||||
--container-below-topbar-bg-image: ;
|
||||
--container-below-topbar-bg-color: ;
|
||||
--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-top-a-bg-image: ;
|
||||
--container-top-a-bg-color: ;
|
||||
--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-b-bg-image: ;
|
||||
--container-top-b-bg-color: ;
|
||||
--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-toc-bg: ;
|
||||
--container-toc-color: #dbe3ff;
|
||||
|
||||
--container-sidebar-bg-image: ;
|
||||
--container-sidebar-bg-color: ;
|
||||
--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-bottom-a-bg-image: ;
|
||||
--container-bottom-a-bg-color: ;
|
||||
--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-radius: 5px;
|
||||
|
||||
--container-bottom-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* Nav & accents */
|
||||
--nav-text-color: var(--mainmenu-nav-link-color);
|
||||
--nav-bg-color: var(--color-link);
|
||||
--border: 5px;
|
||||
|
||||
--muted-color: #6d757e;
|
||||
--hr-color: var(--border-color, #dfe3e7);
|
||||
--link-active-color: var(--link-color);
|
||||
--code-color-ink: var(--code-color, #e93f8e);
|
||||
--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);
|
||||
|
||||
/* Palette */
|
||||
--blue: #91a4ff;
|
||||
--black: #000;
|
||||
--indigo: #b19cff;
|
||||
--purple: #c0a5ff;
|
||||
--pink: #ff8fc0;
|
||||
--red: #ff7a73;
|
||||
--orange: #ff9c4d;
|
||||
--yellow: #ffd166;
|
||||
--green: #78d694;
|
||||
--teal: #76e3ff;
|
||||
--cyan: #6fb7ff;
|
||||
--white: #fff;
|
||||
|
||||
/* Grays tuned for dark */
|
||||
--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;
|
||||
|
||||
/* Contextuals (keep brand hues) */
|
||||
--primary: #010156;
|
||||
--secondary: #48525d;
|
||||
--success: #4aa664;
|
||||
--info: #4f7aa0;
|
||||
--warning: #c77a00;
|
||||
--danger: #c23a31;
|
||||
--light: #1b2027;
|
||||
--dark: #0f1318;
|
||||
|
||||
/* RGB helpers */
|
||||
--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;
|
||||
|
||||
/* Emphasis & subtle variants */
|
||||
--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;
|
||||
|
||||
/* Typography & layout */
|
||||
--body-font-family: var(--optain-cassiopeia-font-family-body, -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');
|
||||
--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;
|
||||
|
||||
--emphasis-color: #fff;
|
||||
--emphasis-color-rgb: 255, 255, 255;
|
||||
|
||||
--secondary-color: #e6ebf1bf;
|
||||
--secondary-color-rgb: 230, 235, 241;
|
||||
|
||||
--secondary-bg: #151b22;
|
||||
--secondary-bg-rgb: 21, 27, 34;
|
||||
|
||||
--tertiary-color: #e6ebf180;
|
||||
--tertiary-color-rgb: 230, 235, 241;
|
||||
--tertiary-bg: #10151b;
|
||||
--tertiary-bg-rgb: 16, 21, 27;
|
||||
|
||||
--heading-color: #f1f5f9;
|
||||
|
||||
--link-color: #8ab4f8;
|
||||
--link-color-rgb: 138, 180, 248;
|
||||
--link-decoration: underline;
|
||||
--link-hover-color: #c3d6ff;
|
||||
--link-hover-color-rgb: 195, 214, 255;
|
||||
|
||||
--code-color: #ff7abd;
|
||||
--highlight-color: #111;
|
||||
--highlight-bg: #ffe28a1a;
|
||||
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border-color: #2b323b;
|
||||
--border-color-translucent: #ffffff26;
|
||||
|
||||
--border-radius: .25rem;
|
||||
--border-radius-sm: .2rem;
|
||||
--border-radius-lg: .3rem;
|
||||
--border-radius-xl: .3rem;
|
||||
--border-radius-xxl: 2rem;
|
||||
--border-radius-2xl: var(--border-radius-xxl);
|
||||
--border-radius-pill: 50rem;
|
||||
|
||||
--box-shadow: 0 .5rem 1rem #00000066;
|
||||
--box-shadow-sm: 0 .125rem .25rem #00000040;
|
||||
--box-shadow-lg: 0 1rem 3rem #00000080;
|
||||
--box-shadow-inset: inset 0 1px 2px #00000040;
|
||||
|
||||
--focus-ring-width: .25rem;
|
||||
--focus-ring-opacity: .6;
|
||||
--focus-ring-color: #5472ff66;
|
||||
|
||||
--form-valid-color: #78d694;
|
||||
--form-valid-border-color: #78d694;
|
||||
--form-invalid-color: #ff8e86;
|
||||
--form-invalid-border-color: #ff8e86;
|
||||
}
|
||||
|
||||
.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: var(--white);
|
||||
--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;
|
||||
}
|
||||
|
||||
/* Buttons — inherit brand hues; ensure strong contrast on dark bg */
|
||||
.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-secondary {
|
||||
--btn-color: var(--nav-text-color);
|
||||
--btn-bg: var(--nav-bg-color);
|
||||
--btn-border-color: #3a4250;
|
||||
--btn-hover-color: #fff;
|
||||
--btn-hover-bg: #1b2a55;
|
||||
--btn-hover-border-color: #162448;
|
||||
--btn-focus-shadow-rgb: 84, 114, 255;
|
||||
--btn-active-color: #fff;
|
||||
--btn-active-bg: #162448;
|
||||
--btn-active-border-color: #12203f;
|
||||
}
|
||||
|
||||
/* Outline buttons on dark: keep readable borders */
|
||||
.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;
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
/* Links as buttons */
|
||||
.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: #6d7781;
|
||||
--btn-disabled-border-color: transparent;
|
||||
--btn-box-shadow: none;
|
||||
--btn-focus-shadow-rgb: 84, 114, 255;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
--btn-color: var(--nav-text-color);
|
||||
--btn-bg: var(--nav-bg-color);
|
||||
}
|
||||
@@ -0,0 +1,351 @@
|
||||
/*!
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.moko-cassiopeia
|
||||
* @file /media/templates/sote/moko-cassiopeia/css/global/dark/colors_standard.css
|
||||
*
|
||||
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
*
|
||||
* Website: https://mokoconsulting.tech
|
||||
* Email: hello@mokoconsulting.tech
|
||||
* Phone: +1 (931) 279-6313
|
||||
*/
|
||||
|
||||
/* -----------------------------------------------
|
||||
* DARK THEME
|
||||
* --------------------------------------------- */
|
||||
|
||||
:root[data-bs-theme='dark']{
|
||||
/* System hint for native widgets */
|
||||
color-scheme: dark;
|
||||
|
||||
/* Brand & links */
|
||||
--color-primary: #112855;
|
||||
--accent-color-primary: #3f8ff0;
|
||||
--accent-color-secondary: #6fb3ff;
|
||||
|
||||
--mainmenu-nav-link-color: #fff;
|
||||
|
||||
--color-link: #224FAA;
|
||||
--color-hover: #224FAA;
|
||||
|
||||
/* Header background (kept same image; works over dark bg) */
|
||||
--header-background-image: url('../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); --header-background-attachment: fixed;
|
||||
--header-background-repeat: repeat;
|
||||
--header-background-size: auto;
|
||||
|
||||
/* Section containers */
|
||||
--container-below-topbar-bg-image: ;
|
||||
--container-below-topbar-bg-color: ;
|
||||
--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-top-a-bg-image: ;
|
||||
--container-top-a-bg-color: ;
|
||||
--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-b-bg-image: ;
|
||||
--container-top-b-bg-color: ;
|
||||
--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-toc-bg: ;
|
||||
--container-toc-color: #dbe3ff;
|
||||
|
||||
--container-sidebar-bg-image: ;
|
||||
--container-sidebar-bg-color: ;
|
||||
--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-bottom-a-bg-image: ;
|
||||
--container-bottom-a-bg-color: ;
|
||||
--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-radius: 5px;
|
||||
|
||||
--container-bottom-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: ;
|
||||
--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: ;
|
||||
|
||||
/* Nav & accents */
|
||||
--nav-text-color: var(--mainmenu-nav-link-color);
|
||||
--nav-bg-color: var(--color-link);
|
||||
--border: 5px;
|
||||
|
||||
--muted-color: #6d757e;
|
||||
--hr-color: var(--border-color, #dfe3e7);
|
||||
--link-active-color: var(--link-color);
|
||||
--code-color-ink: var(--code-color, #e93f8e);
|
||||
--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);
|
||||
|
||||
/* Palette */
|
||||
--blue: #91a4ff;
|
||||
--black: #000;
|
||||
--indigo: #b19cff;
|
||||
--purple: #c0a5ff;
|
||||
--pink: #ff8fc0;
|
||||
--red: #ff7a73;
|
||||
--orange: #ff9c4d;
|
||||
--yellow: #ffd166;
|
||||
--green: #78d694;
|
||||
--teal: #76e3ff;
|
||||
--cyan: #6fb7ff;
|
||||
--white: #fff;
|
||||
|
||||
/* Grays tuned for dark */
|
||||
--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;
|
||||
|
||||
/* Contextuals (keep brand hues) */
|
||||
--primary: #010156;
|
||||
--secondary: #48525d;
|
||||
--success: #4aa664;
|
||||
--info: #4f7aa0;
|
||||
--warning: #c77a00;
|
||||
--danger: #c23a31;
|
||||
--light: #1b2027;
|
||||
--dark: #0f1318;
|
||||
|
||||
/* RGB helpers */
|
||||
--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;
|
||||
|
||||
/* Emphasis & subtle variants */
|
||||
--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;
|
||||
|
||||
/* Typography & layout */
|
||||
--body-font-family: var(--optain-cassiopeia-font-family-body, -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');
|
||||
--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;
|
||||
|
||||
--emphasis-color: #fff;
|
||||
--emphasis-color-rgb: 255, 255, 255;
|
||||
|
||||
--secondary-color: #e6ebf1bf;
|
||||
--secondary-color-rgb: 230, 235, 241;
|
||||
|
||||
--secondary-bg: #151b22;
|
||||
--secondary-bg-rgb: 21, 27, 34;
|
||||
|
||||
--tertiary-color: #e6ebf180;
|
||||
--tertiary-color-rgb: 230, 235, 241;
|
||||
--tertiary-bg: #10151b;
|
||||
--tertiary-bg-rgb: 16, 21, 27;
|
||||
|
||||
--heading-color: #f1f5f9;
|
||||
|
||||
--link-color: #8ab4f8;
|
||||
--link-color-rgb: 138, 180, 248;
|
||||
--link-decoration: underline;
|
||||
--link-hover-color: #c3d6ff;
|
||||
--link-hover-color-rgb: 195, 214, 255;
|
||||
|
||||
--code-color: #ff7abd;
|
||||
--highlight-color: #111;
|
||||
--highlight-bg: #ffe28a1a;
|
||||
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border-color: #2b323b;
|
||||
--border-color-translucent: #ffffff26;
|
||||
|
||||
--border-radius: .25rem;
|
||||
--border-radius-sm: .2rem;
|
||||
--border-radius-lg: .3rem;
|
||||
--border-radius-xl: .3rem;
|
||||
--border-radius-xxl: 2rem;
|
||||
--border-radius-2xl: var(--border-radius-xxl);
|
||||
--border-radius-pill: 50rem;
|
||||
|
||||
--box-shadow: 0 .5rem 1rem #00000066;
|
||||
--box-shadow-sm: 0 .125rem .25rem #00000040;
|
||||
--box-shadow-lg: 0 1rem 3rem #00000080;
|
||||
--box-shadow-inset: inset 0 1px 2px #00000040;
|
||||
|
||||
--focus-ring-width: .25rem;
|
||||
--focus-ring-opacity: .6;
|
||||
--focus-ring-color: #5472ff66;
|
||||
|
||||
--form-valid-color: #78d694;
|
||||
--form-valid-border-color: #78d694;
|
||||
--form-invalid-color: #ff8e86;
|
||||
--form-invalid-border-color: #ff8e86;
|
||||
}
|
||||
|
||||
.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: var(--white);
|
||||
--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;
|
||||
}
|
||||
|
||||
/* Buttons — inherit brand hues; ensure strong contrast on dark bg */
|
||||
.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-secondary {
|
||||
--btn-color: var(--nav-text-color);
|
||||
--btn-bg: var(--nav-bg-color);
|
||||
--btn-border-color: #3a4250;
|
||||
--btn-hover-color: #fff;
|
||||
--btn-hover-bg: #1b2a55;
|
||||
--btn-hover-border-color: #162448;
|
||||
--btn-focus-shadow-rgb: 84, 114, 255;
|
||||
--btn-active-color: #fff;
|
||||
--btn-active-bg: #162448;
|
||||
--btn-active-border-color: #12203f;
|
||||
}
|
||||
|
||||
/* Outline buttons on dark: keep readable borders */
|
||||
.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;
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
/* Links as buttons */
|
||||
.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: #6d7781;
|
||||
--btn-disabled-border-color: transparent;
|
||||
--btn-box-shadow: none;
|
||||
--btn-focus-shadow-rgb: 84, 114, 255;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
--btn-color: var(--nav-text-color);
|
||||
--btn-bg: var(--nav-bg-color);
|
||||
}
|
||||
@@ -1,10 +1,9 @@
|
||||
/* MOKO-COPYRIGHT: © 2025-08-10 Jonathan Miller || Moko Consulting — https://mokoconsulting.tech */
|
||||
/*!
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.moko-cassiopeia
|
||||
* @file /media/templates/sote/moko-cassiopeia/css/global/colors_standard.css
|
||||
* @file /media/templates/sote/moko-cassiopeia/css/global/light/colors_alternative.css
|
||||
*
|
||||
* © 2025 Moko Consulting — All Rights Reserved
|
||||
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
*
|
||||
* Website: https://mokoconsulting.tech
|
||||
@@ -12,14 +11,22 @@
|
||||
* Phone: +1 (931) 279-6313
|
||||
*/
|
||||
|
||||
:root, [data-bs-theme="light"] {
|
||||
/* -----------------------------------------------
|
||||
* LIGHT THEME
|
||||
* --------------------------------------------- */
|
||||
|
||||
:root[data-bs-theme="light"] {
|
||||
color-scheme: light;
|
||||
|
||||
--color-primary: #112855;
|
||||
--color-link: #224FAA;
|
||||
--color-hover: #224FAA;
|
||||
--accent-color-primary: #3f8ff0;
|
||||
--accent-color-secondary: #3f8ff0;
|
||||
|
||||
--header-background-image: url('../../../../../media/templates/site/moko-cassiopeia/images/bg.svg');
|
||||
--mainmenu-nav-link-color: white;
|
||||
|
||||
--color-link: #224FAA;
|
||||
--color-hover: var(--accent-color-primary);
|
||||
|
||||
--header-background-image: url('../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg');
|
||||
--header-background-attachment: fixed;
|
||||
--header-background-repeat: repeat;
|
||||
--header-background-size: auto;
|
||||
@@ -51,7 +58,7 @@
|
||||
--container-top-b-border: ;
|
||||
--container-top-b-border-radius: ;
|
||||
|
||||
--container-toc-bg: white;
|
||||
--container-toc-bg: var(--mainmenu-nav-link-color);
|
||||
--container-toc-color: var(--color-primary);
|
||||
|
||||
--container-sidebar-bg-image: ;
|
||||
@@ -70,7 +77,7 @@
|
||||
--container-bottom-a-bg-repeat: repeat;
|
||||
--container-bottom-a-bg-size: auto;
|
||||
--container-bottom-a-border: ;
|
||||
--container-bottom-a-border-radius: 5px;
|
||||
--container-bottom-a-border-radius: ;
|
||||
|
||||
--container-bottom-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: ;
|
||||
@@ -81,12 +88,21 @@
|
||||
--container-bottom-b-border: ;
|
||||
--container-bottom-b-border-radius: ;
|
||||
|
||||
--nav-text-color: white;
|
||||
--nav-bg-color: #224FAA;
|
||||
--accent-color-primary: #3f8ff0;
|
||||
--accent-color-secondary: #3f8ff0;
|
||||
--nav-text-color: var(--mainmenu-nav-link-color);
|
||||
--nav-bg-color: var(--color-link);
|
||||
--border: 5px;
|
||||
--mainmenu-nav-link-color: white;
|
||||
|
||||
--muted-color: #6d757e;
|
||||
--hr-color: var(--border-color, #dfe3e7);
|
||||
--link-active-color: var(--link-color);
|
||||
--code-color-ink: var(--code-color, #e93f8e);
|
||||
--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);
|
||||
|
||||
--blue: #010156;
|
||||
--black: #000;
|
||||
@@ -190,7 +206,7 @@
|
||||
--border-radius-lg: .3rem;
|
||||
--border-radius-xl: .3rem;
|
||||
--border-radius-xxl: 2rem;
|
||||
--border-radius-2xl: var(--border-radius-xxl);
|
||||
--border-radius-2xl: var(--border-radius-xxl)*2;
|
||||
--border-radius-pill: 50rem;
|
||||
--box-shadow: 0 .5rem 1rem #00000026;
|
||||
--box-shadow-sm: 0 .125rem .25rem #00000013;
|
||||
@@ -205,6 +221,47 @@
|
||||
--form-invalid-border-color: #a51f18;
|
||||
}
|
||||
|
||||
.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-primary {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(240, 98%, 17%);
|
||||
@@ -492,293 +549,3 @@
|
||||
--btn-focus-shadow-rgb: 39, 39, 111;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------
|
||||
* DARK THEME — append below your light block
|
||||
* --------------------------------------------- */
|
||||
|
||||
:root[data-bs-theme='dark'], [data-bs-theme='dark'] {
|
||||
/* System hint for native widgets */
|
||||
color-scheme: dark;
|
||||
|
||||
/* Brand & links */
|
||||
--color-primary: #c7d2ff;
|
||||
--color-link: #8ab4f8;
|
||||
--color-hover: #bcd1ff;
|
||||
|
||||
/* Header background (kept same image; works over dark bg) */
|
||||
--header-background-image: url('../../../../../media/templates/site/moko-cassiopeia/images/bg.svg');
|
||||
--header-background-attachment: fixed;
|
||||
--header-background-repeat: repeat;
|
||||
--header-background-size: auto;
|
||||
|
||||
/* Section containers */
|
||||
--container-below-topbar-bg-image: ;
|
||||
--container-below-topbar-bg-color: #0f141b;
|
||||
--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: 1px solid #2b323b;
|
||||
--container-below-topbar-border-radius: 8px;
|
||||
|
||||
--container-top-a-bg-image: ;
|
||||
--container-top-a-bg-color: #0e1319;
|
||||
--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: 1px solid #2b323b;
|
||||
--container-top-a-border-radius: 8px;
|
||||
|
||||
--container-top-b-bg-image: ;
|
||||
--container-top-b-bg-color: #0e1319;
|
||||
--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: 1px solid #2b323b;
|
||||
--container-top-b-border-radius: 8px;
|
||||
|
||||
--container-toc-bg: #0f141b;
|
||||
--container-toc-color: #dbe3ff;
|
||||
|
||||
--container-sidebar-bg-image: ;
|
||||
--container-sidebar-bg-color: #0c1016;
|
||||
--container-sidebar-bg-position: center;
|
||||
--container-sidebar-bg-attachment: scroll;
|
||||
--container-sidebar-bg-repeat: repeat;
|
||||
--container-sidebar-bg-size: auto;
|
||||
--container-sidebar-border: 1px solid #28303a;
|
||||
--container-sidebar-border-radius: 8px;
|
||||
|
||||
--container-bottom-a-bg-image: ;
|
||||
--container-bottom-a-bg-color: #0e141b;
|
||||
--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: 1px solid #2b323b;
|
||||
--container-bottom-a-border-radius: 5px;
|
||||
|
||||
--container-bottom-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: #0e141b;
|
||||
--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: 1px solid #2b323b;
|
||||
--container-bottom-b-border-radius: 8px;
|
||||
|
||||
/* Nav & accents */
|
||||
--nav-text-color: #fff;
|
||||
--nav-bg-color: #0e1a3c;
|
||||
--accent-color-primary: #3f8ff0;
|
||||
--accent-color-secondary: #6fb3ff;
|
||||
--border: 5px;
|
||||
--mainmenu-nav-link-color: #fff;
|
||||
|
||||
/* Palette */
|
||||
--blue: #91a4ff;
|
||||
--black: #000;
|
||||
--indigo: #b19cff;
|
||||
--purple: #c0a5ff;
|
||||
--pink: #ff8fc0;
|
||||
--red: #ff7a73;
|
||||
--orange: #ff9c4d;
|
||||
--yellow: #ffd166;
|
||||
--green: #78d694;
|
||||
--teal: #76e3ff;
|
||||
--cyan: #6fb7ff;
|
||||
--white: #fff;
|
||||
|
||||
/* Grays tuned for dark */
|
||||
--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;
|
||||
|
||||
/* Contextuals (keep brand hues) */
|
||||
--primary: #010156;
|
||||
--secondary: #48525d;
|
||||
--success: #4aa664;
|
||||
--info: #4f7aa0;
|
||||
--warning: #c77a00;
|
||||
--danger: #c23a31;
|
||||
--light: #1b2027;
|
||||
--dark: #0f1318;
|
||||
|
||||
/* RGB helpers */
|
||||
--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;
|
||||
|
||||
/* Emphasis & subtle variants */
|
||||
--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;
|
||||
|
||||
/* Typography & layout */
|
||||
--body-font-family: var(--optain-cassiopeia-font-family-body, -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');
|
||||
--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;
|
||||
|
||||
--emphasis-color: #fff;
|
||||
--emphasis-color-rgb: 255, 255, 255;
|
||||
|
||||
--secondary-color: #e6ebf1bf;
|
||||
--secondary-color-rgb: 230, 235, 241;
|
||||
|
||||
--secondary-bg: #151b22;
|
||||
--secondary-bg-rgb: 21, 27, 34;
|
||||
|
||||
--tertiary-color: #e6ebf180;
|
||||
--tertiary-color-rgb: 230, 235, 241;
|
||||
--tertiary-bg: #10151b;
|
||||
--tertiary-bg-rgb: 16, 21, 27;
|
||||
|
||||
--heading-color: #f1f5f9;
|
||||
|
||||
--link-color: #8ab4f8;
|
||||
--link-color-rgb: 138, 180, 248;
|
||||
--link-decoration: underline;
|
||||
--link-hover-color: #c3d6ff;
|
||||
--link-hover-color-rgb: 195, 214, 255;
|
||||
|
||||
--code-color: #ff7abd;
|
||||
--highlight-color: #111;
|
||||
--highlight-bg: #ffe28a1a;
|
||||
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border-color: #2b323b;
|
||||
--border-color-translucent: #ffffff26;
|
||||
|
||||
--border-radius: .25rem;
|
||||
--border-radius-sm: .2rem;
|
||||
--border-radius-lg: .3rem;
|
||||
--border-radius-xl: .3rem;
|
||||
--border-radius-xxl: 2rem;
|
||||
--border-radius-2xl: var(--border-radius-xxl);
|
||||
--border-radius-pill: 50rem;
|
||||
|
||||
--box-shadow: 0 .5rem 1rem #00000066;
|
||||
--box-shadow-sm: 0 .125rem .25rem #00000040;
|
||||
--box-shadow-lg: 0 1rem 3rem #00000080;
|
||||
--box-shadow-inset: inset 0 1px 2px #00000040;
|
||||
|
||||
--focus-ring-width: .25rem;
|
||||
--focus-ring-opacity: .6;
|
||||
--focus-ring-color: #5472ff66;
|
||||
|
||||
--form-valid-color: #78d694;
|
||||
--form-valid-border-color: #78d694;
|
||||
--form-invalid-color: #ff8e86;
|
||||
--form-invalid-border-color: #ff8e86;
|
||||
}
|
||||
|
||||
/* Buttons — inherit brand hues; ensure strong contrast on dark bg */
|
||||
[data-bs-theme='dark'] .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;
|
||||
}
|
||||
|
||||
[data-bs-theme='dark'] .btn-secondary {
|
||||
--btn-color: var(--nav-text-color);
|
||||
--btn-bg: var(--nav-bg-color);
|
||||
--btn-border-color: #3a4250;
|
||||
--btn-hover-color: #fff;
|
||||
--btn-hover-bg: #1b2a55;
|
||||
--btn-hover-border-color: #162448;
|
||||
--btn-focus-shadow-rgb: 84, 114, 255;
|
||||
--btn-active-color: #fff;
|
||||
--btn-active-bg: #162448;
|
||||
--btn-active-border-color: #12203f;
|
||||
}
|
||||
|
||||
/* Outline buttons on dark: keep readable borders */
|
||||
[data-bs-theme='dark'] .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;
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
/* Links as buttons */
|
||||
[data-bs-theme='dark'] .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: #6d7781;
|
||||
--btn-disabled-border-color: transparent;
|
||||
--btn-box-shadow: none;
|
||||
--btn-focus-shadow-rgb: 84, 114, 255;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------
|
||||
* OPTIONAL: small fix for .btn-secondary in light
|
||||
* (uses var() so it picks up your nav colors)
|
||||
* --------------------------------------------- */
|
||||
[data-bs-theme='light'] .btn-secondary,
|
||||
:root .btn-secondary {
|
||||
--btn-color: var(--nav-text-color);
|
||||
--btn-bg: var(--nav-bg-color);
|
||||
}
|
||||
@@ -1,10 +1,9 @@
|
||||
/* MOKO-COPYRIGHT: © 2025-08-10 Jonathan Miller || Moko Consulting — https://mokoconsulting.tech */
|
||||
/*!
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.moko-cassiopeia
|
||||
* @file /media/templates/sote/moko-cassiopeia/css/global/colors_standard.css
|
||||
* @file /media/templates/sote/moko-cassiopeia/css/global/light/colors_standard.css
|
||||
*
|
||||
* © 2025 Moko Consulting — All Rights Reserved
|
||||
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
*
|
||||
* Website: https://mokoconsulting.tech
|
||||
@@ -12,14 +11,22 @@
|
||||
* Phone: +1 (931) 279-6313
|
||||
*/
|
||||
|
||||
:root, [data-bs-theme="light"] {
|
||||
/* -----------------------------------------------
|
||||
* LIGHT THEME
|
||||
* --------------------------------------------- */
|
||||
|
||||
:root[data-bs-theme="light"] {
|
||||
color-scheme: light;
|
||||
|
||||
--color-primary: #112855;
|
||||
--color-link: #224FAA;
|
||||
--color-hover: #224FAA;
|
||||
--accent-color-primary: #3f8ff0;
|
||||
--accent-color-secondary: #3f8ff0;
|
||||
|
||||
--header-background-image: url('../../../../../media/templates/site/moko-cassiopeia/images/bg.svg');
|
||||
--mainmenu-nav-link-color: white;
|
||||
|
||||
--color-link: #224FAA;
|
||||
--color-hover: var(--accent-color-primary);
|
||||
|
||||
--header-background-image: url('../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg');
|
||||
--header-background-attachment: fixed;
|
||||
--header-background-repeat: repeat;
|
||||
--header-background-size: auto;
|
||||
@@ -51,7 +58,7 @@
|
||||
--container-top-b-border: ;
|
||||
--container-top-b-border-radius: ;
|
||||
|
||||
--container-toc-bg: white;
|
||||
--container-toc-bg: var(--mainmenu-nav-link-color);
|
||||
--container-toc-color: var(--color-primary);
|
||||
|
||||
--container-sidebar-bg-image: ;
|
||||
@@ -70,7 +77,7 @@
|
||||
--container-bottom-a-bg-repeat: repeat;
|
||||
--container-bottom-a-bg-size: auto;
|
||||
--container-bottom-a-border: ;
|
||||
--container-bottom-a-border-radius: 5px;
|
||||
--container-bottom-a-border-radius: ;
|
||||
|
||||
--container-bottom-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: ;
|
||||
@@ -81,12 +88,21 @@
|
||||
--container-bottom-b-border: ;
|
||||
--container-bottom-b-border-radius: ;
|
||||
|
||||
--nav-text-color: white;
|
||||
--nav-bg-color: #224FAA;
|
||||
--accent-color-primary: #3f8ff0;
|
||||
--accent-color-secondary: #3f8ff0;
|
||||
--nav-text-color: var(--mainmenu-nav-link-color);
|
||||
--nav-bg-color: var(--color-link);
|
||||
--border: 5px;
|
||||
--mainmenu-nav-link-color: white;
|
||||
|
||||
--muted-color: #6d757e;
|
||||
--hr-color: var(--border-color, #dfe3e7);
|
||||
--link-active-color: var(--link-color);
|
||||
--code-color-ink: var(--code-color, #e93f8e);
|
||||
--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);
|
||||
|
||||
--blue: #010156;
|
||||
--black: #000;
|
||||
@@ -190,7 +206,7 @@
|
||||
--border-radius-lg: .3rem;
|
||||
--border-radius-xl: .3rem;
|
||||
--border-radius-xxl: 2rem;
|
||||
--border-radius-2xl: var(--border-radius-xxl);
|
||||
--border-radius-2xl: var(--border-radius-xxl)*2;
|
||||
--border-radius-pill: 50rem;
|
||||
--box-shadow: 0 .5rem 1rem #00000026;
|
||||
--box-shadow-sm: 0 .125rem .25rem #00000013;
|
||||
@@ -205,6 +221,47 @@
|
||||
--form-invalid-border-color: #a51f18;
|
||||
}
|
||||
|
||||
.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-primary {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(240, 98%, 17%);
|
||||
@@ -492,293 +549,3 @@
|
||||
--btn-focus-shadow-rgb: 39, 39, 111;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------
|
||||
* DARK THEME — append below your light block
|
||||
* --------------------------------------------- */
|
||||
|
||||
:root[data-bs-theme='dark'], [data-bs-theme='dark'] {
|
||||
/* System hint for native widgets */
|
||||
color-scheme: dark;
|
||||
|
||||
/* Brand & links */
|
||||
--color-primary: #112855;
|
||||
--color-link: #224FAA;
|
||||
--color-hover: #224FAA;
|
||||
|
||||
/* Header background (kept same image; works over dark bg) */
|
||||
--header-background-image: url('../../../../../media/templates/site/moko-cassiopeia/images/bg.svg');
|
||||
--header-background-attachment: fixed;
|
||||
--header-background-repeat: repeat;
|
||||
--header-background-size: auto;
|
||||
|
||||
/* Section containers */
|
||||
--container-below-topbar-bg-image: ;
|
||||
--container-below-topbar-bg-color: #0f141b;
|
||||
--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: 1px solid #2b323b;
|
||||
--container-below-topbar-border-radius: 8px;
|
||||
|
||||
--container-top-a-bg-image: ;
|
||||
--container-top-a-bg-color: #0e1319;
|
||||
--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: 1px solid #2b323b;
|
||||
--container-top-a-border-radius: 8px;
|
||||
|
||||
--container-top-b-bg-image: ;
|
||||
--container-top-b-bg-color: #0e1319;
|
||||
--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: 1px solid #2b323b;
|
||||
--container-top-b-border-radius: 8px;
|
||||
|
||||
--container-toc-bg: #0f141b;
|
||||
--container-toc-color: #dbe3ff;
|
||||
|
||||
--container-sidebar-bg-image: ;
|
||||
--container-sidebar-bg-color: #0c1016;
|
||||
--container-sidebar-bg-position: center;
|
||||
--container-sidebar-bg-attachment: scroll;
|
||||
--container-sidebar-bg-repeat: repeat;
|
||||
--container-sidebar-bg-size: auto;
|
||||
--container-sidebar-border: 1px solid #28303a;
|
||||
--container-sidebar-border-radius: 8px;
|
||||
|
||||
--container-bottom-a-bg-image: ;
|
||||
--container-bottom-a-bg-color: #0e141b;
|
||||
--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: 1px solid #2b323b;
|
||||
--container-bottom-a-border-radius: 5px;
|
||||
|
||||
--container-bottom-b-bg-image: ;
|
||||
--container-bottom-b-bg-color: #0e141b;
|
||||
--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: 1px solid #2b323b;
|
||||
--container-bottom-b-border-radius: 8px;
|
||||
|
||||
/* Nav & accents */
|
||||
--nav-text-color: #fff;
|
||||
--nav-bg-color: #0e1a3c;
|
||||
--accent-color-primary: #3f8ff0;
|
||||
--accent-color-secondary: #6fb3ff;
|
||||
--border: 5px;
|
||||
--mainmenu-nav-link-color: #fff;
|
||||
|
||||
/* Palette */
|
||||
--blue: #91a4ff;
|
||||
--black: #000;
|
||||
--indigo: #b19cff;
|
||||
--purple: #c0a5ff;
|
||||
--pink: #ff8fc0;
|
||||
--red: #ff7a73;
|
||||
--orange: #ff9c4d;
|
||||
--yellow: #ffd166;
|
||||
--green: #78d694;
|
||||
--teal: #76e3ff;
|
||||
--cyan: #6fb7ff;
|
||||
--white: #fff;
|
||||
|
||||
/* Grays tuned for dark */
|
||||
--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;
|
||||
|
||||
/* Contextuals (keep brand hues) */
|
||||
--primary: #010156;
|
||||
--secondary: #48525d;
|
||||
--success: #4aa664;
|
||||
--info: #4f7aa0;
|
||||
--warning: #c77a00;
|
||||
--danger: #c23a31;
|
||||
--light: #1b2027;
|
||||
--dark: #0f1318;
|
||||
|
||||
/* RGB helpers */
|
||||
--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;
|
||||
|
||||
/* Emphasis & subtle variants */
|
||||
--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;
|
||||
|
||||
/* Typography & layout */
|
||||
--body-font-family: var(--optain-cassiopeia-font-family-body, -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');
|
||||
--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;
|
||||
|
||||
--emphasis-color: #fff;
|
||||
--emphasis-color-rgb: 255, 255, 255;
|
||||
|
||||
--secondary-color: #e6ebf1bf;
|
||||
--secondary-color-rgb: 230, 235, 241;
|
||||
|
||||
--secondary-bg: #151b22;
|
||||
--secondary-bg-rgb: 21, 27, 34;
|
||||
|
||||
--tertiary-color: #e6ebf180;
|
||||
--tertiary-color-rgb: 230, 235, 241;
|
||||
--tertiary-bg: #10151b;
|
||||
--tertiary-bg-rgb: 16, 21, 27;
|
||||
|
||||
--heading-color: #f1f5f9;
|
||||
|
||||
--link-color: #8ab4f8;
|
||||
--link-color-rgb: 138, 180, 248;
|
||||
--link-decoration: underline;
|
||||
--link-hover-color: #c3d6ff;
|
||||
--link-hover-color-rgb: 195, 214, 255;
|
||||
|
||||
--code-color: #ff7abd;
|
||||
--highlight-color: #111;
|
||||
--highlight-bg: #ffe28a1a;
|
||||
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border-color: #2b323b;
|
||||
--border-color-translucent: #ffffff26;
|
||||
|
||||
--border-radius: .25rem;
|
||||
--border-radius-sm: .2rem;
|
||||
--border-radius-lg: .3rem;
|
||||
--border-radius-xl: .3rem;
|
||||
--border-radius-xxl: 2rem;
|
||||
--border-radius-2xl: var(--border-radius-xxl);
|
||||
--border-radius-pill: 50rem;
|
||||
|
||||
--box-shadow: 0 .5rem 1rem #00000066;
|
||||
--box-shadow-sm: 0 .125rem .25rem #00000040;
|
||||
--box-shadow-lg: 0 1rem 3rem #00000080;
|
||||
--box-shadow-inset: inset 0 1px 2px #00000040;
|
||||
|
||||
--focus-ring-width: .25rem;
|
||||
--focus-ring-opacity: .6;
|
||||
--focus-ring-color: #5472ff66;
|
||||
|
||||
--form-valid-color: #78d694;
|
||||
--form-valid-border-color: #78d694;
|
||||
--form-invalid-color: #ff8e86;
|
||||
--form-invalid-border-color: #ff8e86;
|
||||
}
|
||||
|
||||
/* Buttons — inherit brand hues; ensure strong contrast on dark bg */
|
||||
[data-bs-theme='dark'] .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;
|
||||
}
|
||||
|
||||
[data-bs-theme='dark'] .btn-secondary {
|
||||
--btn-color: var(--nav-text-color);
|
||||
--btn-bg: var(--nav-bg-color);
|
||||
--btn-border-color: #3a4250;
|
||||
--btn-hover-color: #fff;
|
||||
--btn-hover-bg: #1b2a55;
|
||||
--btn-hover-border-color: #162448;
|
||||
--btn-focus-shadow-rgb: 84, 114, 255;
|
||||
--btn-active-color: #fff;
|
||||
--btn-active-bg: #162448;
|
||||
--btn-active-border-color: #12203f;
|
||||
}
|
||||
|
||||
/* Outline buttons on dark: keep readable borders */
|
||||
[data-bs-theme='dark'] .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;
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
/* Links as buttons */
|
||||
[data-bs-theme='dark'] .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: #6d7781;
|
||||
--btn-disabled-border-color: transparent;
|
||||
--btn-box-shadow: none;
|
||||
--btn-focus-shadow-rgb: 84, 114, 255;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------
|
||||
* OPTIONAL: small fix for .btn-secondary in light
|
||||
* (uses var() so it picks up your nav colors)
|
||||
* --------------------------------------------- */
|
||||
[data-bs-theme='light'] .btn-secondary,
|
||||
:root .btn-secondary {
|
||||
--btn-color: var(--nav-text-color);
|
||||
--btn-bg: var(--nav-bg-color);
|
||||
}
|
||||
@@ -0,0 +1,220 @@
|
||||
/*!
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.moko-cassiopeia
|
||||
* @file /media/templates/sote/moko-cassiopeia/css/global/csocial-media-demos.css
|
||||
*
|
||||
* @copyright 2025 Moko Consulting <https://mokoconsulting.tech>
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
*
|
||||
* Website: https://mokoconsulting.tech
|
||||
* Email: hello@mokoconsulting.tech
|
||||
* Phone: +1 (931) 279-6313
|
||||
*/
|
||||
*
|
||||
/*
|
||||
======================================================================
|
||||
Social Media Demo — FULL CSS (Joomla-safe, fully scoped)
|
||||
Scope: All selectors prefixed with .social-media-demo to avoid leakage
|
||||
Usage: Wrap your article markup in <div class="social-media-demo"> ... </div>
|
||||
Version: 2.0 (2025-08-23)
|
||||
|
||||
How it’s organized:
|
||||
1) Container-level CSS variables (IMAGES ONLY). Colors are hard-coded per brand below.
|
||||
2) Base/layout styles (sections, header shell, placeholders, buttons).
|
||||
3) Platform brand colors (hard-coded) and cover height tweaks.
|
||||
4) Image assignments (map classes like .fb-cover → variable --fb-cover-img).
|
||||
|
||||
INSTRUCTIONS:
|
||||
- Save the images in their requried sizes into the [SITEROOT]/images/social/ folder with the exact names.
|
||||
- For circle images, sue a square image t fille the entire space
|
||||
- All images are center and miiddle aligned when loaded.
|
||||
======================================================================
|
||||
REQUIRED IMAGE SIZES — Social Media Demo Wireframes
|
||||
|
||||
Facebook
|
||||
--fb-cover-img → Cover: 820×312 (desktop), 640×360 (mobile safe)
|
||||
--fb-avatar-img → Profile: 176×176 (shown as circle, but use square image)
|
||||
|
||||
Twitter / X
|
||||
--x-cover-img → Header: 1500×500
|
||||
--x-avatar-img → Profile: up to 400×400 (shown as circle, but use square image)
|
||||
|
||||
LinkedIn Company
|
||||
--li-cover-img → Banner: ~1128×191
|
||||
--li-logo-img → Logo: up to 300×300 (rounded square)
|
||||
|
||||
Google Business Profile
|
||||
--gmb-cover-img → Banner: ~960×200 (mobile ~960×140)
|
||||
--gmb-logo-img → Logo: up to 300×300 (shown as circle, but use square image)
|
||||
|
||||
Instagram Business
|
||||
--ig-cover-img → Not always visible, safe 1080×608 for highlight background
|
||||
--ig-avatar-img → Profile: 320×320 (shown as circle, but use square image)
|
||||
|
||||
YouTube Channel
|
||||
--yt-cover-img → Channel art: 2560×1440 (safe area ~1546×423 center)
|
||||
--yt-avatar-img → Channel icon: 800×800 (shown as circle, but use square image)
|
||||
|
||||
TikTok Business
|
||||
--tt-cover-img → Profile header: ~900×500 (safe area ~720×405)
|
||||
--tt-avatar-img → Profile: 200×200 (shown as circle, but use square image)
|
||||
|
||||
Pinterest Business
|
||||
--pin-cover-img → Board/brand banner: ~800×450
|
||||
--pin-avatar-img → Profile: 165×165 (shown as circle, but use square image)
|
||||
|
||||
Snapchat Public Profile
|
||||
--sc-cover-img → Banner: ~1080×1920 (stories/poster)
|
||||
--sc-avatar-img → Bitmoji/Profile: 320×320 (shown as circle, but use square image)
|
||||
|
||||
Reddit Community
|
||||
--rd-cover-img → Banner: 1920×384
|
||||
--rd-avatar-img → Community icon: 256×256 (shown as circle, but use square image)
|
||||
====================================================================== */
|
||||
|
||||
/* Container variables — IMAGES ONLY (safe-scoped) */
|
||||
.social-media-demo {
|
||||
--fb-cover-img: url('../../../../../image/social/fb-cover.jpg');
|
||||
--fb-avatar-img: url('../../../../../image/social/fb-avatar.jpg');
|
||||
|
||||
--x-cover-img: url('../../../../../image/social/x-cover.jpg');
|
||||
--x-avatar-img: url('../../../../../image/social/x-avatar.jpg');
|
||||
|
||||
--li-cover-img: url('../../../../../image/social/li-cover.jpg');
|
||||
--li-logo-img: url('../../../../../image/social/li-logo.jpg');
|
||||
|
||||
--gmb-cover-img: url('../../../../../image/social/gmb-cover.jpg');
|
||||
--gmb-logo-img: url('../../../../../image/social/gmb-logo.jpg');
|
||||
|
||||
--ig-cover-img: url('../../../../../image/social/ig-cover.jpg');
|
||||
--ig-avatar-img: url('../../../../../image/social/ig-avatar.jpg');
|
||||
|
||||
--yt-cover-img: url('../../../../../image/social/yt-cover.jpg');
|
||||
--yt-avatar-img: url('../../../../../image/social/yt-avatar.jpg');
|
||||
|
||||
--tt-cover-img: url('../../../../../image/social/tt-cover.jpg');
|
||||
--tt-avatar-img: url('../../../../../image/social/tt-avatar.jpg');
|
||||
|
||||
--pin-cover-img: url('../../../../../image/social/pin-cover.jpg');
|
||||
--pin-avatar-img: url('../../../../../image/social/pin-avatar.jpg');
|
||||
|
||||
--sc-cover-img: url('../../../../../image/social/sc-cover.jpg');
|
||||
--sc-avatar-img: url('../../../../../image/social/sc-avatar.jpg');
|
||||
|
||||
--rd-cover-img: url('../../../../../image/social/rd-cover.jpg');
|
||||
--rd-avatar-img: url('../../../../../image/social/rd-avatar.jpg');
|
||||
}
|
||||
|
||||
/* DO NOT TOUCH */
|
||||
.social-media-demo * { box-sizing: border-box; }
|
||||
.social-media-demo section { margin: 24px auto; max-width: 1128px; background: #fff; border: 1px solid #d9dee3; border-radius: 12px; overflow: hidden; }
|
||||
.social-media-demo section h2 { margin: 0; padding: 12px 16px; background: #f9fafb; border-bottom: 1px solid #d9dee3; font-size: 16px; font-weight: 800; color: #111; }
|
||||
.social-media-demo .preview { padding: 16px; }
|
||||
|
||||
/* Header shell */
|
||||
.social-media-demo .header { position: relative; border: 1px solid #d9dee3; border-radius: 12px; overflow: hidden; background: #fff; }
|
||||
.social-media-demo .cover { position: relative; width: 100%; height: 200px; background-size: cover; background-position: center; background-color: #e8edf3; }
|
||||
.social-media-demo .avatar-wrap { position: absolute; left: 16px; bottom: -48px; }
|
||||
.social-media-demo .avatar,
|
||||
.social-media-demo .logo { width: 160px; height: 160px; border: 4px solid #fff; background-size: cover; background-position: center; overflow: hidden; }
|
||||
.social-media-demo .avatar.shown as circle, but use square image { border-radius: 999px; }
|
||||
.social-media-demo .logo.rounded { border-radius: 16px; }
|
||||
|
||||
/* Meta */
|
||||
.social-media-demo .meta { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 16px; padding-top: 56px; }
|
||||
.social-media-demo .name { font-size: 22px; font-weight: 800; color: #111; }
|
||||
.social-media-demo .subline { font-size: 13px; color: #666; }
|
||||
|
||||
/* Buttons */
|
||||
.social-media-demo .btn { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid #d9dee3; background: #fff; font-weight: 700; color: #111; }
|
||||
.social-media-demo .btn.primary { color: #fff; border-color: transparent; }
|
||||
|
||||
/* Placeholder visuals (used until you swap in real images) */
|
||||
.social-media-demo .placeholder { position: relative; width: 100%; height: 100%; display: grid; place-items: center; text-align: center; font-weight: 600; color: #6b7280; background: repeating-linear-gradient(45deg,#f6f7f9 0 12px,#eef0f3 12px 24px); border: 1px dashed #cfd3d8; }
|
||||
.social-media-demo .placeholder .dims { position: absolute; bottom: 8px; right: 8px; font-size: 12px; opacity: .85; }
|
||||
|
||||
/* 3) Platform brand colors & cover height tweaks (hard-coded colors on purpose) */
|
||||
/* Facebook */
|
||||
.social-media-demo #fb .btn.primary { background: #1877F2; }
|
||||
.social-media-demo #fb .cover { height: 312px; }
|
||||
@media (max-width: 480px) { .social-media-demo #fb .cover { height: 360px; } }
|
||||
|
||||
/* Twitter / X */
|
||||
.social-media-demo #x .btn.primary { background: #1D9BF0; }
|
||||
.social-media-demo #x .cover { height: 200px; background-color: #22303C; }
|
||||
@media (max-width: 480px) { .social-media-demo #x .cover { height: 160px; } }
|
||||
|
||||
/* LinkedIn */
|
||||
.social-media-demo #li .btn.primary { background: #0A66C2; }
|
||||
.social-media-demo #li .cover { height: 220px; background-color: #e6edf5; }
|
||||
@media (max-width: 480px) { .social-media-demo #li .cover { height: 160px; } }
|
||||
|
||||
/* Google Business Profile */
|
||||
.social-media-demo #gmb .btn.primary { background: #4285F4; }
|
||||
.social-media-demo #gmb .cover { height: 200px; }
|
||||
@media (max-width: 480px) { .social-media-demo #gmb .cover { height: 140px; } }
|
||||
|
||||
/* Instagram Business */
|
||||
.social-media-demo #ig .btn.primary { background: #E1306C; }
|
||||
.social-media-demo #ig .cover { height: 200px; }
|
||||
|
||||
/* YouTube Channel */
|
||||
.social-media-demo #yt .btn.primary { background: #FF0000; }
|
||||
.social-media-demo #yt .cover { height: 180px; }
|
||||
|
||||
/* TikTok Business */
|
||||
.social-media-demo #tt .btn.primary { background: #000000; color: #fff; }
|
||||
.social-media-demo #tt .cover { height: 200px; }
|
||||
|
||||
/* Pinterest Business */
|
||||
.social-media-demo #pin .btn.primary { background: #E60023; }
|
||||
.social-media-demo #pin .cover { height: 200px; }
|
||||
|
||||
/* Snapchat Public Profile */
|
||||
.social-media-demo #sc .btn.primary { background: #FFFC00; color: #000; }
|
||||
.social-media-demo #sc .cover { height: 160px; }
|
||||
|
||||
/* Reddit Community */
|
||||
.social-media-demo #rd .btn.primary { background: #FF4500; }
|
||||
.social-media-demo #rd .cover { height: 180px; }
|
||||
|
||||
/* 4) Image assignments — map classes to variables (swap vars to change images) */
|
||||
/* Facebook */
|
||||
.social-media-demo .fb-cover { background-image: var(--fb-cover-img); }
|
||||
.social-media-demo .fb-avatar { background-image: var(--fb-avatar-img); }
|
||||
|
||||
/* X */
|
||||
.social-media-demo .x-cover { background-image: var(--x-cover-img); }
|
||||
.social-media-demo .x-avatar { background-image: var(--x-avatar-img); }
|
||||
|
||||
/* LinkedIn */
|
||||
.social-media-demo .li-cover { background-image: var(--li-cover-img); }
|
||||
.social-media-demo .li-logo { background-image: var(--li-logo-img); }
|
||||
|
||||
/* Google Business */
|
||||
.social-media-demo .gmb-cover { background-image: var(--gmb-cover-img); }
|
||||
.social-media-demo .gmb-logo { background-image: var(--gmb-logo-img); }
|
||||
|
||||
/* Instagram */
|
||||
.social-media-demo .ig-cover { background-image: var(--ig-cover-img); }
|
||||
.social-media-demo .ig-avatar { background-image: var(--ig-avatar-img); }
|
||||
|
||||
/* YouTube */
|
||||
.social-media-demo .yt-cover { background-image: var(--yt-cover-img); }
|
||||
.social-media-demo .yt-avatar { background-image: var(--yt-avatar-img); }
|
||||
|
||||
/* TikTok */
|
||||
.social-media-demo .tt-cover { background-image: var(--tt-cover-img); }
|
||||
.social-media-demo .tt-avatar { background-image: var(--tt-avatar-img); }
|
||||
|
||||
/* Pinterest */
|
||||
.social-media-demo .pin-cover { background-image: var(--pin-cover-img); }
|
||||
.social-media-demo .pin-avatar { background-image: var(--pin-avatar-img); }
|
||||
|
||||
/* Snapchat */
|
||||
.social-media-demo .sc-cover { background-image: var(--sc-cover-img); }
|
||||
.social-media-demo .sc-avatar { background-image: var(--sc-avatar-img); }
|
||||
|
||||
/* Reddit */
|
||||
.social-media-demo .rd-cover { background-image: var(--rd-cover-img); }
|
||||
.social-media-demo .rd-avatar { background-image: var(--rd-avatar-img); }
|
||||
Reference in New Issue
Block a user