quartermoon
Version:
Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools
965 lines (770 loc) • 561 kB
CSS
/*
-------------------------------------------------------------------------------
Quartermoon CSS (Variables file)
Version: Dev
https://www.gethalfmoon.com
Copyright, Quartermoon UI
Licensed under MIT (https://www.gethalfmoon.com/license)
-------------------------------------------------------------------------------
The above notice must be included in its entirety when this file is used.
Table of contents:
1. Base styles --------------------------------------------------- [hm-01]
2. Typography ---------------------------------------------------- [hm-02]
3. Scrollbars ---------------------------------------------------- [hm-03]
4. Layout -------------------------------------------------------- [hm-04]
5. Page building (containers, columns, content and card) --------- [hm-05]
6. Links --------------------------------------------------------- [hm-06]
7. Buttons ------------------------------------------------------- [hm-07]
8. List ---------------------------------------------------------- [hm-08]
9. Code ---------------------------------------------------------- [hm-09]
10. Tables -------------------------------------------------------- [hm-10]
11. Form elements ------------------------------------------------- [hm-11]
12. Dropdown ------------------------------------------------------ [hm-12]
13. Modal --------------------------------------------------------- [hm-13]
14. Alerts -------------------------------------------------------- [hm-14]
15. Navbar content ------------------------------------------------ [hm-15]
16. Sidebar content ----------------------------------------------- [hm-16]
17. Pagination ---------------------------------------------------- [hm-17]
18. Breadcrumb ---------------------------------------------------- [hm-18]
19. Tooltips ------------------------------------------------------ [hm-19]
20. Badges -------------------------------------------------------- [hm-20]
21. Image --------------------------------------------------------- [hm-21]
22. Button group -------------------------------------------------- [hm-22]
23. Collapse ------------------------------------------------------ [hm-23]
24. Progress ------------------------------------------------------ [hm-24]
25. Tabs (navs) --------------------------------------------------- [hm-25]
26. List group ---------------------------------------------------- [hm-26]
27. Spinners (and loaders) ---------------------------------------- [hm-27]
28. Spacing utilities --------------------------------------------- [hm-28]
29. Display utilities --------------------------------------------- [hm-29]
30. Sizing utilities ---------------------------------------------- [hm-30]
31. Flex utilities ------------------------------------------------ [hm-31]
32. Position utilities -------------------------------------------- [hm-32]
33. Other utilities ----------------------------------------------- [hm-33]
Credits:
Bootstrap and its contributors for class names and inspiration. Moreover,
the containers, grid system and the flex utilities found in Quartermoon CSS
are almost direct copies of the ones found in Bootstrap. Therefore, the
following copyright notice is provided:
---------------------------------------------------------------------------
Bootstrap (https://getbootstrap.com/)
Copyright 2011-2020 The Bootstrap Authors
Copyright 2011-2020 Twitter, Inc.
Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
---------------------------------------------------------------------------
*/
/*
-------------------------------------------------------------------------------
CSS variables (CSS custom properties)
-------------------------------------------------------------------------------
*/
:root {
/*
Table of contents (for variables):
1. Base variables ------------------------------------------- [hmv-01]
2. System colors -------------------------------------------- [hmv-02]
3. Context colors ------------------------------------------- [hmv-03]
4. Box shadows ---------------------------------------------- [hmv-04]
5. Scrollbars ----------------------------------------------- [hmv-05]
6. Layout (Sticky alerts, navbar, sidebar) ------------------ [hmv-06]
7. Page building (containers, content, card, v-spacer) ------ [hmv-07]
8. Links ---------------------------------------------------- [hmv-08]
9. Buttons -------------------------------------------------- [hmv-09]
10. List ----------------------------------------------------- [hmv-10]
11. Code ----------------------------------------------------- [hmv-11]
12. Tables --------------------------------------------------- [hmv-12]
13. Form helpers (form-groups, labels, form-text, etc.) ------ [hmv-13]
14. Inputs --------------------------------------------------- [hmv-14]
15. Checkbox ------------------------------------------------- [hmv-15]
16. Radio ---------------------------------------------------- [hmv-16]
17. Switch --------------------------------------------------- [hmv-17]
18. Range ---------------------------------------------------- [hmv-18]
19. Input file ----------------------------------------------- [hmv-19]
20. Input group ---------------------------------------------- [hmv-20]
21. Dropdown ------------------------------------------------- [hmv-21]
22. Modal ---------------------------------------------------- [hmv-22]
23. Alerts --------------------------------------------------- [hmv-23]
24. Navbar content ------------------------------------------- [hmv-24]
25. Sidebar content ------------------------------------------ [hmv-25]
26. Pagination ----------------------------------------------- [hmv-26]
27. Breadcrumb ----------------------------------------------- [hmv-27]
28. Tooltips ------------------------------------------------- [hmv-28]
29. Badges --------------------------------------------------- [hmv-29]
30. Button group --------------------------------------------- [hmv-30]
31. Collapse ------------------------------------------------- [hmv-31]
32. Progress ------------------------------------------------- [hmv-32]
33. Tabs (navs) ---------------------------------------------- [hmv-33]
34. List group ----------------------------------------------- [hmv-34]
35. Spinners (and loaders) ----------------------------------- [hmv-35]
Understanding names of variables:
~ Variable names are long, descriptive, and fairly self-explanatory.
The only thing to understand about them are the states.
~ Basic states:
~ --lm-* variables apply only in light mode.
~ --dm-* variables apply only in dark mode.
~ Variables without these states apply for both modes.
~ Other common states:
~ *-hover (:hover)
~ *-focus (:focus)
~ A variable with a given state only applies to the element when
the element is in that state.
~ Regarding the :focus state:
~ For some elements, only variables for setting the border color
and box shadow are available for the :focus state. This is because
in these cases, they are the only properties that need to be
changed to signify the state.
~ For elements like input boxes and buttons (and elements that
behave like buttons), variables for setting the text color and
backgrounds are also available (along with border color and box
shadow variables). Buttons (and elements that behave like buttons)
also have variables for setting the outline during the :focus
state. This is because input boxes and buttons are very commonly
used, and they may benefit from some extra customization options
(if required).
~ Regarding the :focus-visible state:
~ For links (and other elements that are meant to be used as
links, ie, sidebar links, dropdown items, badges, and so on),
variables for setting the box shadow, outline, and (sometimes)
border radius are available. The border radius variables are
mainly used to give the links a rounded ring during the
:focus-visible state.
~ Since the :focus-visible selector is not supported by all
browsers, namely Safari and IE as of March 2021, a polyfill is
included in quartermoon.js. This polyfill relies on the class
.focus-visible, and this is why this class is used alongside the
:focus-visible selector.
~ Regarding the :active state:
~ Variables for the :active state are not available. The ones in
the format *-active-* are applied when the element has the .active
class.
~ Examples:
~ --button-padding sets the padding of buttons in both light and
dark mode.
~ --lm-pagination-item-text-color-hover sets the text color when
the pagination item is hovered over (in light mode).
~ --dm-sidebar-link-active-border-color-hover sets the border
color when the sidebar link has the class .active, and is hovered
over (in dark mode).
~ --small-button-height sets the height of small buttons (.btn-sm).
~ --dm-open-collapse-header-bg-color sets the background color of
the collapse header when the collapse panel is open.
Notes:
~ Transparency (in colors) is used more commonly in dark mode, because
everything needs to blend together to look good.
~ By default, Hafmoon uses auto-scaling on screens >= 1600px. For this
reason, rem units are used, so that everything can scale up. The base
is adjusted so that 10px = 1rem.
~ The only time px should be used is when a fixed size is always
required, especially if that fixed size is 1px. For example, border
widths, outline widths, divider heights, etc.
~ Background image variables are available for some components. These
are useful for setting gradients. However, border image variables are
not available, because most browsers do not support rounded border
images (yet).
*/
/*
---------------------------------------------------------------------------
1. Base variables [hmv-01]
---------------------------------------------------------------------------
*/
/*
White colors
Notes:
~ The --white-color-hsl and --white-color variables are simply plain
white no matter what the theming is. Therefore, they should be used
anywhere the actual white color is required.
~ The --base-white-color-hsl and --base-white-color variables are
meant for the background colors of the body and other container type
components (in light mode). By default, they are set to actual white,
however, depending on the theme, they could easily be a very light
shade of gray.
~ Ideally, the --base-white-color should be lighter than the lightest
shade of gray, ie, --gray-color-very-light (see below).
*/
--white-color-hsl: 0, 0%, 100%;
--white-color: hsl(var(--white-color-hsl));
--base-white-color-hsl: var(--white-color-hsl);
--base-white-color: hsl(var(--base-white-color-hsl));
/*
Black colors
Notes:
~ The --black-color-hsl and --black-color variables are simply plain
black no matter what the theming is. Therefore, they should be used
anywhere the actual black color is required.
~ The --base-black-color-hsl and --base-black-color variables are not
really used anywhere, however, the --base-black-color should still be
darker than the --dark-color-dim (see below).
*/
--black-color-hsl: 0, 0%, 0%;
--black-color: hsl(var(--black-color-hsl));
--base-black-color-hsl: var(--black-color-hsl);
--base-black-color: hsl(var(--base-black-color-hsl));
/*
Dark colors
Notes:
~ The base hue and saturation are simply reference points. There is no
hard and fast rule that they must be used for every shade. That said,
it is expected that they will be used for most (if not all) of the HSL
values.
~ The lightest shade (--dark-color-very-light) should still be darker
than the darkest shade of gray, ie, --gray-color-very-dim (see below).
*/
--dark-color-base-hue: 214.3;
--dark-color-base-saturation: 12.3%;
--dark-color-hsl: var(--dark-color-base-hue), var(--dark-color-base-saturation), 11%;
--dark-color-light-hsl: var(--dark-color-base-hue), 10.4%, 13%; /* Saturation reduced from base */
--dark-color-very-light-hsl: var(--dark-color-base-hue), 9%, 16%; /* Saturation reduced from base */
--dark-color-dim-hsl: var(--dark-color-base-hue), var(--dark-color-base-saturation), 8%;
--dark-color-very-dim-hsl: var(--dark-color-base-hue), var(--dark-color-base-saturation), 5%;
--dark-color: hsl(var(--dark-color-hsl));
--dark-color-light: hsl(var(--dark-color-light-hsl));
--dark-color-very-light: hsl(var(--dark-color-very-light-hsl));
--dark-color-dim: hsl(var(--dark-color-dim-hsl));
--dark-color-very-dim: hsl(var(--dark-color-very-dim-hsl));
/*
Gray colors
Notes:
~ The base hue and saturation are simply reference points. There is no
hard and fast rule that they must be used for every shade. That said,
it is expected that they will be used for most (if not all) of the HSL
values.
*/
--gray-color-base-hue: 218;
--gray-color-base-saturation: 5%;
--gray-color-hsl: var(--gray-color-base-hue), var(--gray-color-base-saturation), 87%;
--gray-color-light-hsl: var(--gray-color-base-hue), 15%, 94%; /* Saturation increased from base */
--gray-color-very-light-hsl: var(--gray-color-base-hue), var(--gray-color-base-saturation), 97%;
--gray-color-dim-hsl: var(--gray-color-base-hue), var(--gray-color-base-saturation), 73%;
--gray-color-very-dim-hsl: var(--gray-color-base-hue), var(--gray-color-base-saturation), 30%;
--gray-color: hsl(var(--gray-color-hsl));
--gray-color-light: hsl(var(--gray-color-light-hsl));
--gray-color-very-light: hsl(var(--gray-color-very-light-hsl));
--gray-color-dim: hsl(var(--gray-color-dim-hsl));
--gray-color-very-dim: hsl(var(--gray-color-very-dim-hsl));
/* Base variables */
--base-html-font-size: 62.5%; /* 62.5% is used for easier calculations, because the base is now set to 10px, so 1.4rem = 14px for example. */
--base-html-font-size-1600: 75%; /* For screens with widths >= 1600px */
--base-html-font-size-1920: 87.5%; /* For screens with widths >= 1920px */
--base-font-size: 1.4rem;
--base-line-height: 1.5;
--extra-letter-spacing-size: 0.03rem;
--lm-base-text-color: hsla(var(--black-color-hsl), 0.85);
--lm-base-text-color-light: hsla(var(--black-color-hsl), 0.7);
--lm-base-body-bg-color: var(--base-white-color);
--lm-base-body-bg-image: none;
--lm-horizontal-rule-color: hsla(var(--black-color-hsl), 0.05);
--dm-base-text-color: hsla(var(--white-color-hsl), 0.8);
--dm-base-text-color-light: hsla(var(--white-color-hsl), 0.65);
--dm-base-body-bg-color: var(--dark-color-very-light);
--dm-base-body-bg-image: none;
--dm-horizontal-rule-color: hsla(var(--white-color-hsl), 0.05);
/* Border variables (a lot of these are used only for utilities) */
--base-border-width: 1px;
--base-border-radius: 0.4rem;
--border-1-border-width: var(--base-border-width);
--border-2-border-width: calc(var(--base-border-width) + 1px);
--border-3-border-width: calc(var(--base-border-width) + 2px);
--border-4-border-width: calc(var(--base-border-width) + 3px);
--border-5-border-width: calc(var(--base-border-width) + 4px);
--rounded-1-border-radius: var(--base-border-radius);
--rounded-2-border-radius: calc(var(--base-border-radius) + 0.2rem);
--rounded-3-border-radius: calc(var(--base-border-radius) + 0.4rem);
--rounded-pill-border-radius: 50rem;
--lm-border-color: hsla(var(--black-color-hsl), 0.2);
--dm-border-color: hsla(var(--white-color-hsl), 0.2);
--light-border-color: var(--dm-border-color);
--dark-border-color: var(--lm-border-color);
/* Heading */
--heading-font-weight: 400;
/* Text muted colors */
--lm-muted-text-color: hsla(var(--black-color-hsl), 0.6);
--dm-muted-text-color: hsla(var(--white-color-hsl), 0.6);
/*
---------------------------------------------------------------------------
2. System colors [hmv-02]
Notes:
~ Not actually used in classes or components. Extended by context
colors (see below).
~ The base hue and saturation are simply reference points. There is no
hard and fast rule that they must be used for every shade. That said,
it is expected that they will be used for most (if not all) of the HSL
values.
---------------------------------------------------------------------------
*/
/* Blue */
--blue-color-base-hue: 209;
--blue-color-base-saturation: 100%;
--blue-color-hsl: var(--blue-color-base-hue), var(--blue-color-base-saturation), 55%;
--blue-color-light-hsl: var(--blue-color-base-hue), var(--blue-color-base-saturation), 65%;
--blue-color-very-light-hsl: var(--blue-color-base-hue), var(--blue-color-base-saturation), 92.5%;
--blue-color-dim-hsl: var(--blue-color-base-hue), var(--blue-color-base-saturation), 45%;
--blue-color-very-dim-hsl: var(--blue-color-base-hue), 25%, 15%; /* Saturation greatly reduced from base */
--blue-color: hsl(var(--blue-color-hsl));
--blue-color-light: hsl(var(--blue-color-light-hsl));
--blue-color-very-light: hsl(var(--blue-color-very-light-hsl));
--blue-color-dim: hsl(var(--blue-color-dim-hsl));
--blue-color-very-dim: hsl(var(--blue-color-very-dim-hsl));
--text-color-on-blue-color-bg: var(--white-color);
/* Teal */
--teal-color-base-hue: 177;
--teal-color-base-saturation: 52%;
--teal-color-hsl: var(--teal-color-base-hue), var(--teal-color-base-saturation), 45%;
--teal-color-light-hsl: var(--teal-color-base-hue), var(--teal-color-base-saturation), 55%;
--teal-color-very-light-hsl: var(--teal-color-base-hue), var(--teal-color-base-saturation), 92.5%;
--teal-color-dim-hsl: var(--teal-color-base-hue), var(--teal-color-base-saturation), 40%;
--teal-color-very-dim-hsl: var(--teal-color-base-hue), 25%, 15%; /* Saturation greatly reduced from base */
--teal-color: hsl(var(--teal-color-hsl));
--teal-color-light: hsl(var(--teal-color-light-hsl));
--teal-color-very-light: hsl(var(--teal-color-very-light-hsl));
--teal-color-dim: hsl(var(--teal-color-dim-hsl));
--teal-color-very-dim: hsl(var(--teal-color-very-dim-hsl));
--text-color-on-teal-color-bg: var(--white-color);
/* Indigo */
--indigo-color-base-hue: 241;
--indigo-color-base-saturation: 100%;
--indigo-color-hsl: var(--indigo-color-base-hue), var(--indigo-color-base-saturation), 65%;
--indigo-color-light-hsl: var(--indigo-color-base-hue), var(--indigo-color-base-saturation), 70%;
--indigo-color-very-light-hsl: var(--indigo-color-base-hue), var(--indigo-color-base-saturation), 92.5%;
--indigo-color-dim-hsl: var(--indigo-color-base-hue), var(--indigo-color-base-saturation), 40%;
--indigo-color-very-dim-hsl: var(--indigo-color-base-hue), 25%, 15%; /* Saturation greatly reduced from base */
--indigo-color: hsl(var(--indigo-color-hsl));
--indigo-color-light: hsl(var(--indigo-color-light-hsl));
--indigo-color-very-light: hsl(var(--indigo-color-very-light-hsl));
--indigo-color-dim: hsl(var(--indigo-color-dim-hsl));
--indigo-color-very-dim: hsl(var(--indigo-color-very-dim-hsl));
--text-color-on-indigo-color-bg: var(--white-color);
/* Green */
--green-color-base-hue: 152;
--green-color-base-saturation: 85%;
--green-color-hsl: var(--green-color-base-hue), var(--green-color-base-saturation), 50%;
--green-color-light-hsl: var(--green-color-base-hue), var(--green-color-base-saturation), 70%;
--green-color-very-light-hsl: var(--green-color-base-hue), var(--green-color-base-saturation), 92.5%;
--green-color-dim-hsl: var(--green-color-base-hue), var(--green-color-base-saturation), 40%;
--green-color-very-dim-hsl: var(--green-color-base-hue), 25%, 15%; /* Saturation greatly reduced from base */
--green-color: hsl(var(--green-color-hsl));
--green-color-light: hsl(var(--green-color-light-hsl));
--green-color-very-light: hsl(var(--green-color-very-light-hsl));
--green-color-dim: hsl(var(--green-color-dim-hsl));
--green-color-very-dim: hsl(var(--green-color-very-dim-hsl));
--text-color-on-green-color-bg: var(--lm-base-text-color);
/* Yellow */
--yellow-color-base-hue: 49;
--yellow-color-base-saturation: 100%;
--yellow-color-hsl: var(--yellow-color-base-hue), var(--yellow-color-base-saturation), 50%;
--yellow-color-light-hsl: var(--yellow-color-base-hue), var(--yellow-color-base-saturation), 70%;
--yellow-color-very-light-hsl: var(--yellow-color-base-hue), var(--yellow-color-base-saturation), 92.5%;
--yellow-color-dim-hsl: var(--yellow-color-base-hue), var(--yellow-color-base-saturation), 40%;
--yellow-color-very-dim-hsl: var(--yellow-color-base-hue), 25%, 15%; /* Saturation greatly reduced from base */
--yellow-color: hsl(var(--yellow-color-hsl));
--yellow-color-light: hsl(var(--yellow-color-light-hsl));
--yellow-color-very-light: hsl(var(--yellow-color-very-light-hsl));
--yellow-color-dim: hsl(var(--yellow-color-dim-hsl));
--yellow-color-very-dim: hsl(var(--yellow-color-very-dim-hsl));
--text-color-on-yellow-color-bg: var(--lm-base-text-color);
/* Red */
--red-color-base-hue: 359;
--red-color-base-saturation: 100%;
--red-color-hsl: var(--red-color-base-hue), var(--red-color-base-saturation), 65%;
--red-color-light-hsl: var(--red-color-base-hue), var(--red-color-base-saturation), 70%;
--red-color-very-light-hsl: var(--red-color-base-hue), var(--red-color-base-saturation), 92.5%;
--red-color-dim-hsl: var(--red-color-base-hue), var(--red-color-base-saturation), 35%;
--red-color-very-dim-hsl: var(--red-color-base-hue), 25%, 15%; /* Saturation greatly reduced from base */
--red-color: hsl(var(--red-color-hsl));
--red-color-light: hsl(var(--red-color-light-hsl));
--red-color-very-light: hsl(var(--red-color-very-light-hsl));
--red-color-dim: hsl(var(--red-color-dim-hsl));
--red-color-very-dim: hsl(var(--red-color-very-dim-hsl));
--text-color-on-red-color-bg: var(--white-color);
/* Pink */
--pink-color-base-hue: 331;
--pink-color-base-saturation: 75%;
--pink-color-hsl: var(--pink-color-base-hue), var(--pink-color-base-saturation), 60%;
--pink-color-light-hsl: var(--pink-color-base-hue), var(--pink-color-base-saturation), 70%;
--pink-color-very-light-hsl: var(--pink-color-base-hue), var(--pink-color-base-saturation), 92.5%;
--pink-color-dim-hsl: var(--pink-color-base-hue), var(--pink-color-base-saturation), 45%;
--pink-color-very-dim-hsl: var(--pink-color-base-hue), 25%, 15%; /* Saturation greatly reduced from base */
--pink-color: hsl(var(--pink-color-hsl));
--pink-color-light: hsl(var(--pink-color-light-hsl));
--pink-color-very-light: hsl(var(--pink-color-very-light-hsl));
--pink-color-dim: hsl(var(--pink-color-dim-hsl));
--pink-color-very-dim: hsl(var(--pink-color-very-dim-hsl));
--text-color-on-pink-color-bg: var(--white-color);
/* Orange */
--orange-color-base-hue: 27;
--orange-color-base-saturation: 84%;
--orange-color-hsl: var(--orange-color-base-hue), var(--orange-color-base-saturation), 50%;
--orange-color-light-hsl: var(--orange-color-base-hue), var(--orange-color-base-saturation), 60%;
--orange-color-very-light-hsl: var(--orange-color-base-hue), var(--orange-color-base-saturation), 92.5%;
--orange-color-dim-hsl: var(--orange-color-base-hue), var(--orange-color-base-saturation), 40%;
--orange-color-very-dim-hsl: var(--orange-color-base-hue), 25%, 15%; /* Saturation greatly reduced from base */
--orange-color: hsl(var(--orange-color-hsl));
--orange-color-light: hsl(var(--orange-color-light-hsl));
--orange-color-very-light: hsl(var(--orange-color-very-light-hsl));
--orange-color-dim: hsl(var(--orange-color-dim-hsl));
--orange-color-very-dim: hsl(var(--orange-color-very-dim-hsl));
--text-color-on-orange-color-bg: var(--white-color);
/*
---------------------------------------------------------------------------
3. Context colors [hmv-03]
Notes:
~ Used in classes and components.
~ The *-hsl variables allow each shade of color to be used with
varying transparencies using the hsla() function. For example: the
hsla(var(--primary-color-hsl), 0.2) would set the primary color with
an opacity of 20%, thus allowing for a much higher degree of
flexibility with only a few shades.
---------------------------------------------------------------------------
*/
/* Primary colors */
--primary-color-hsl: var(--blue-color-hsl);
--primary-color-light-hsl: var(--blue-color-light-hsl);
--primary-color-very-light-hsl: var(--blue-color-very-light-hsl);
--primary-color-dim-hsl: var(--blue-color-dim-hsl);
--primary-color-very-dim-hsl: var(--blue-color-very-dim-hsl);
--primary-color: var(--blue-color);
--primary-color-light: var(--blue-color-light);
--primary-color-very-light: var(--blue-color-very-light);
--primary-color-dim: var(--blue-color-dim);
--primary-color-very-dim: var(--blue-color-very-dim);
--text-color-on-primary-color-bg: var(--text-color-on-blue-color-bg);
/* Success colors */
--success-color-hsl: var(--green-color-hsl);
--success-color-light-hsl: var(--green-color-light-hsl);
--success-color-very-light-hsl: var(--green-color-very-light-hsl);
--success-color-dim-hsl: var(--green-color-dim-hsl);
--success-color-very-dim-hsl: var(--green-color-very-dim-hsl);
--success-color: var(--green-color);
--success-color-light: var(--green-color-light);
--success-color-very-light: var(--green-color-very-light);
--success-color-dim: var(--green-color-dim);
--success-color-very-dim: var(--green-color-very-dim);
--text-color-on-success-color-bg: var(--text-color-on-green-color-bg);
/* Secondary colors */
--secondary-color-hsl: var(--yellow-color-hsl);
--secondary-color-light-hsl: var(--yellow-color-light-hsl);
--secondary-color-very-light-hsl: var(--yellow-color-very-light-hsl);
--secondary-color-dim-hsl: var(--yellow-color-dim-hsl);
--secondary-color-very-dim-hsl: var(--yellow-color-very-dim-hsl);
--secondary-color: var(--yellow-color);
--secondary-color-light: var(--yellow-color-light);
--secondary-color-very-light: var(--yellow-color-very-light);
--secondary-color-dim: var(--yellow-color-dim);
--secondary-color-very-dim: var(--yellow-color-very-dim);
--text-color-on-secondary-color-bg: var(--text-color-on-yellow-color-bg);
/* Danger colors */
--danger-color-hsl: var(--red-color-hsl);
--danger-color-light-hsl: var(--red-color-light-hsl);
--danger-color-very-light-hsl: var(--red-color-very-light-hsl);
--danger-color-dim-hsl: var(--red-color-dim-hsl);
--danger-color-very-dim-hsl: var(--red-color-very-dim-hsl);
--danger-color: var(--red-color);
--danger-color-light: var(--red-color-light);
--danger-color-very-light: var(--red-color-very-light);
--danger-color-dim: var(--red-color-dim);
--danger-color-very-dim: var(--red-color-very-dim);
--text-color-on-danger-color-bg: var(--text-color-on-red-color-bg);
/*
---------------------------------------------------------------------------
4. Box shadows [hmv-04]
---------------------------------------------------------------------------
*/
--lm-shadow-color: hsla(var(--black-color-hsl), 0.15);
--dm-shadow-color: hsla(var(--black-color-hsl), 0.4);
--lm-small-shadow: 0 0.1rem 0.2rem var(--lm-shadow-color);
--dm-small-shadow: 0 0.1rem 0.6rem var(--dm-shadow-color);
--lm-shadow: 0 0.2rem 0.4rem var(--lm-shadow-color);
--dm-shadow: 0 0.2rem 0.8rem var(--dm-shadow-color);
--lm-large-shadow: 0 0.4rem 0.8rem var(--lm-shadow-color);
--dm-large-shadow: 0 0.4rem 1.2rem var(--dm-shadow-color);
/*
---------------------------------------------------------------------------
5. Scrollbars [hmv-05]
Notes:
~ The webkit scrollbars work on webkit based browsers, such as Chrome,
Safari, Brave, and the new Microsoft Edge.
~ The custom CSS scrollbars work only on Firefox as of 2020.
---------------------------------------------------------------------------
*/
--webkit-scrollbar-width-height: 1.4rem;
--webkit-scrollbar-track-border-width: var(--base-border-width);
--webkit-scrollbar-thumb-min-width-height: 3rem;
--webkit-scrollbar-thumb-border-width: 0.4rem;
--webkit-scrollbar-thumb-border-radius: 1rem;
--webkit-scrollbar-corner-border-width: var(--base-border-width);
--lm-webkit-scrollbar-bg-color: transparent;
--lm-webkit-scrollbar-track-border-color: hsla(var(--black-color-hsl), 0.1);
--lm-webkit-scrollbar-thumb-bg-color: hsla(var(--black-color-hsl), 0.25);
--lm-webkit-scrollbar-thumb-bg-color-hover: hsla(var(--black-color-hsl), 0.4);
--lm-webkit-scrollbar-thumb-border-color: transparent;
--lm-webkit-scrollbar-thumb-border-color-hover: transparent;
--lm-webkit-scrollbar-corner-bg-color: transparent;
--lm-webkit-scrollbar-corner-border-color: hsla(var(--black-color-hsl), 0.1);
--dm-webkit-scrollbar-bg-color: transparent;
--dm-webkit-scrollbar-track-border-color: hsla(var(--white-color-hsl), 0.05);
--dm-webkit-scrollbar-thumb-bg-color: hsla(var(--white-color-hsl), 0.25);
--dm-webkit-scrollbar-thumb-bg-color-hover: hsla(var(--white-color-hsl), 0.4);
--dm-webkit-scrollbar-thumb-border-color: transparent;
--dm-webkit-scrollbar-thumb-border-color-hover: transparent;
--dm-webkit-scrollbar-corner-bg-color: transparent;
--dm-webkit-scrollbar-corner-border-color: hsla(var(--white-color-hsl), 0.05);
--css-scrollbar-width: thin;
--lm-css-scrollbar-color: var(--lm-webkit-scrollbar-thumb-bg-color) var(--lm-base-body-bg-color);
--dm-css-scrollbar-color: var(--dm-webkit-scrollbar-thumb-bg-color) var(--dm-base-body-bg-color);
/* Sidebar scrollbar */
--sidebar-webkit-scrollbar-width-height: var(--webkit-scrollbar-width-height);
--sidebar-webkit-scrollbar-track-border-width: var(--webkit-scrollbar-track-border-width);
--sidebar-webkit-scrollbar-thumb-border-width: var(--webkit-scrollbar-thumb-border-width);
--sidebar-webkit-scrollbar-thumb-border-radius: var(--webkit-scrollbar-thumb-border-radius);
--sidebar-webkit-scrollbar-corner-border-width: var(--webkit-scrollbar-corner-border-width);
--lm-sidebar-webkit-scrollbar-bg-color: var(--lm-webkit-scrollbar-bg-color);
--lm-sidebar-webkit-scrollbar-track-border-color: var(--lm-webkit-scrollbar-track-border-color);
--lm-sidebar-webkit-scrollbar-thumb-bg-color: var(--lm-webkit-scrollbar-thumb-bg-color);
--lm-sidebar-webkit-scrollbar-thumb-bg-color-hover: var(--lm-webkit-scrollbar-thumb-bg-color-hover);
--lm-sidebar-webkit-scrollbar-thumb-border-color: var(--lm-webkit-scrollbar-thumb-border-color);
--lm-sidebar-webkit-scrollbar-thumb-border-color-hover: var(--lm-webkit-scrollbar-thumb-border-color-hover);
--lm-sidebar-webkit-scrollbar-corner-bg-color: var(--lm-webkit-scrollbar-corner-bg-color);
--lm-sidebar-webkit-scrollbar-corner-border-color: var(--lm-webkit-scrollbar-corner-border-color);
--dm-sidebar-webkit-scrollbar-bg-color: var(--dm-webkit-scrollbar-bg-color);
--dm-sidebar-webkit-scrollbar-track-border-color: var(--dm-webkit-scrollbar-track-border-color);
--dm-sidebar-webkit-scrollbar-thumb-bg-color: var(--dm-webkit-scrollbar-thumb-bg-color);
--dm-sidebar-webkit-scrollbar-thumb-bg-color-hover: var(--dm-webkit-scrollbar-thumb-bg-color-hover);
--dm-sidebar-webkit-scrollbar-thumb-border-color: var(--dm-webkit-scrollbar-thumb-border-color);
--dm-sidebar-webkit-scrollbar-thumb-border-color-hover: var(--dm-webkit-scrollbar-thumb-border-color-hover);
--dm-sidebar-webkit-scrollbar-corner-bg-color: var(--dm-webkit-scrollbar-corner-bg-color);
--dm-sidebar-webkit-scrollbar-corner-border-color: var(--dm-webkit-scrollbar-corner-border-color);
--sidebar-css-scrollbar-width: var(--css-scrollbar-width);
--lm-sidebar-css-scrollbar-color: var(--lm-webkit-scrollbar-thumb-bg-color) var(--lm-sidebar-bg-color);
--dm-sidebar-css-scrollbar-color: var(--dm-webkit-scrollbar-thumb-bg-color) var(--dm-sidebar-bg-color);
/*
Modal scrollbar
Notes:
~ By default, the light mode thumb background color and track border
color are changed to the dark mode ones, as the modal overlay is close
to black, even in light mode.
*/
--modal-webkit-scrollbar-width-height: var(--webkit-scrollbar-width-height);
--modal-webkit-scrollbar-track-border-width: var(--webkit-scrollbar-track-border-width);
--modal-webkit-scrollbar-thumb-border-width: var(--webkit-scrollbar-thumb-border-width);
--modal-webkit-scrollbar-thumb-border-radius: var(--webkit-scrollbar-thumb-border-radius);
--modal-webkit-scrollbar-corner-border-width: var(--webkit-scrollbar-corner-border-width);
--lm-modal-webkit-scrollbar-bg-color: var(--lm-webkit-scrollbar-bg-color);
--lm-modal-webkit-scrollbar-track-border-color: var(--dm-webkit-scrollbar-track-border-color); /* Changed */
--lm-modal-webkit-scrollbar-thumb-bg-color: var(--dm-webkit-scrollbar-thumb-bg-color); /* Changed */
--lm-modal-webkit-scrollbar-thumb-bg-color-hover: var(--dm-webkit-scrollbar-thumb-bg-color-hover); /* Changed */
--lm-modal-webkit-scrollbar-thumb-border-color: var(--lm-webkit-scrollbar-thumb-border-color);
--lm-modal-webkit-scrollbar-thumb-border-color-hover: var(--lm-webkit-scrollbar-thumb-border-color-hover);
--lm-modal-webkit-scrollbar-corner-bg-color: var(--lm-webkit-scrollbar-corner-bg-color);
--lm-modal-webkit-scrollbar-corner-border-color: var(--lm-webkit-scrollbar-corner-border-color);
--dm-modal-webkit-scrollbar-bg-color: var(--dm-webkit-scrollbar-bg-color);
--dm-modal-webkit-scrollbar-track-border-color: var(--dm-webkit-scrollbar-track-border-color);
--dm-modal-webkit-scrollbar-thumb-bg-color: var(--dm-webkit-scrollbar-thumb-bg-color);
--dm-modal-webkit-scrollbar-thumb-bg-color-hover: var(--dm-webkit-scrollbar-thumb-bg-color-hover);
--dm-modal-webkit-scrollbar-thumb-border-color: var(--dm-webkit-scrollbar-thumb-border-color);
--dm-modal-webkit-scrollbar-thumb-border-color-hover: var(--dm-webkit-scrollbar-thumb-border-color-hover);
--dm-modal-webkit-scrollbar-corner-bg-color: var(--dm-webkit-scrollbar-corner-bg-color);
--dm-modal-webkit-scrollbar-corner-border-color: var(--dm-webkit-scrollbar-corner-border-color);
--modal-css-scrollbar-width: var(--css-scrollbar-width);
--lm-modal-css-scrollbar-color: var(--dm-webkit-scrollbar-thumb-bg-color) transparent; /* Changed */
--dm-modal-css-scrollbar-color: var(--dm-webkit-scrollbar-thumb-bg-color) transparent;
/*
Full screen modal scrollbar
Notes:
~ The background color of the scrollbar and the corner is changed to
the modal content background colors. This is so that the scrollbars
blend in with the content in the full screen modals.
*/
--modal-full-webkit-scrollbar-width-height: var(--webkit-scrollbar-width-height);
--modal-full-webkit-scrollbar-track-border-width: var(--webkit-scrollbar-track-border-width);
--modal-full-webkit-scrollbar-thumb-border-width: var(--webkit-scrollbar-thumb-border-width);
--modal-full-webkit-scrollbar-thumb-border-radius: var(--webkit-scrollbar-thumb-border-radius);
--modal-full-webkit-scrollbar-corner-border-width: var(--webkit-scrollbar-corner-border-width);
--lm-modal-full-webkit-scrollbar-bg-color: var(--lm-modal-full-content-bg-color); /* Changed */
--lm-modal-full-webkit-scrollbar-track-border-color: var(--lm-webkit-scrollbar-track-border-color);
--lm-modal-full-webkit-scrollbar-thumb-bg-color: var(--lm-webkit-scrollbar-thumb-bg-color);
--lm-modal-full-webkit-scrollbar-thumb-bg-color-hover: var(--lm-webkit-scrollbar-thumb-bg-color-hover);
--lm-modal-full-webkit-scrollbar-thumb-border-color: var(--lm-webkit-scrollbar-thumb-border-color);
--lm-modal-full-webkit-scrollbar-thumb-border-color-hover: var(--lm-webkit-scrollbar-thumb-border-color-hover);
--lm-modal-full-webkit-scrollbar-corner-bg-color: var(--lm-modal-full-content-bg-color); /* Changed */
--lm-modal-full-webkit-scrollbar-corner-border-color: var(--lm-webkit-scrollbar-corner-border-color);
--dm-modal-full-webkit-scrollbar-bg-color: var(--dm-modal-full-content-bg-color); /* Changed */
--dm-modal-full-webkit-scrollbar-track-border-color: var(--dm-webkit-scrollbar-track-border-color);
--dm-modal-full-webkit-scrollbar-thumb-bg-color: var(--dm-webkit-scrollbar-thumb-bg-color);
--dm-modal-full-webkit-scrollbar-thumb-bg-color-hover: var(--dm-webkit-scrollbar-thumb-bg-color-hover);
--dm-modal-full-webkit-scrollbar-thumb-border-color: var(--dm-webkit-scrollbar-thumb-border-color);
--dm-modal-full-webkit-scrollbar-thumb-border-color-hover: var(--dm-webkit-scrollbar-thumb-border-color-hover);
--dm-modal-full-webkit-scrollbar-corner-bg-color: var(--dm-modal-full-content-bg-color); /* Changed */
--dm-modal-full-webkit-scrollbar-corner-border-color: var(--dm-webkit-scrollbar-corner-border-color);
--modal-full-css-scrollbar-width: var(--css-scrollbar-width);
--lm-modal-full-css-scrollbar-color: var(--lm-webkit-scrollbar-thumb-bg-color) var(--lm-modal-full-content-bg-color);
--dm-modal-full-css-scrollbar-color: var(--dm-webkit-scrollbar-thumb-bg-color) var(--dm-modal-full-content-bg-color);
/* Card scrollbar */
--card-webkit-scrollbar-width-height: var(--webkit-scrollbar-width-height);
--card-webkit-scrollbar-track-border-width: var(--webkit-scrollbar-track-border-width);
--card-webkit-scrollbar-thumb-border-width: var(--webkit-scrollbar-thumb-border-width);
--card-webkit-scrollbar-thumb-border-radius: var(--webkit-scrollbar-thumb-border-radius);
--card-webkit-scrollbar-corner-border-width: var(--webkit-scrollbar-corner-border-width);
--lm-card-webkit-scrollbar-bg-color: var(--lm-webkit-scrollbar-bg-color);
--lm-card-webkit-scrollbar-track-border-color: var(--lm-webkit-scrollbar-track-border-color);
--lm-card-webkit-scrollbar-thumb-bg-color: var(--lm-webkit-scrollbar-thumb-bg-color);
--lm-card-webkit-scrollbar-thumb-bg-color-hover: var(--lm-webkit-scrollbar-thumb-bg-color-hover);
--lm-card-webkit-scrollbar-thumb-border-color: var(--lm-webkit-scrollbar-thumb-border-color);
--lm-card-webkit-scrollbar-thumb-border-color-hover: var(--lm-webkit-scrollbar-thumb-border-color-hover);
--lm-card-webkit-scrollbar-corner-bg-color: var(--lm-webkit-scrollbar-corner-bg-color);
--lm-card-webkit-scrollbar-corner-border-color: var(--lm-webkit-scrollbar-corner-border-color);
--dm-card-webkit-scrollbar-bg-color: var(--dm-webkit-scrollbar-bg-color);
--dm-card-webkit-scrollbar-track-border-color: var(--dm-webkit-scrollbar-track-border-color);
--dm-card-webkit-scrollbar-thumb-bg-color: var(--dm-webkit-scrollbar-thumb-bg-color);
--dm-card-webkit-scrollbar-thumb-bg-color-hover: var(--dm-webkit-scrollbar-thumb-bg-color-hover);
--dm-card-webkit-scrollbar-thumb-border-color: var(--dm-webkit-scrollbar-thumb-border-color);
--dm-card-webkit-scrollbar-thumb-border-color-hover: var(--dm-webkit-scrollbar-thumb-border-color-hover);
--dm-card-webkit-scrollbar-corner-bg-color: var(--dm-webkit-scrollbar-corner-bg-color);
--dm-card-webkit-scrollbar-corner-border-color: var(--dm-webkit-scrollbar-corner-border-color);
--card-css-scrollbar-width: var(--css-scrollbar-width);
--lm-card-css-scrollbar-color: var(--lm-webkit-scrollbar-thumb-bg-color) var(--lm-card-bg-color);
--dm-card-css-scrollbar-color: var(--dm-webkit-scrollbar-thumb-bg-color) var(--dm-card-bg-color);
/* CSS scrollbar with transparent track (for utility class) */
--utility-transparent-track-css-scrollbar-width: var(--css-scrollbar-width);
--lm-utility-transparent-track-css-scrollbar-color: var(--lm-webkit-scrollbar-thumb-bg-color) transparent;
--dm-utility-transparent-track-css-scrollbar-color: var(--dm-webkit-scrollbar-thumb-bg-color) transparent;
/*
---------------------------------------------------------------------------
6. Layout (Sticky alerts, navbar, sidebar) [hmv-06]
---------------------------------------------------------------------------
*/
/* Sticky alerts */
--sticky-alerts-top: 0;
--sticky-alerts-right: 2.4rem;
/* Navbar */
--navbar-height: 5rem;
--navbar-border-width: var(--base-border-width);
--navbar-horizontal-padding: 1rem;
--lm-navbar-bg-color: var(--base-white-color);
--lm-navbar-bg-image: none;
--lm-navbar-border-color: hsla(var(--black-color-hsl), 0.2);
--lm-navbar-box-shadow: none;
--dm-navbar-bg-color: var(--dark-color-dim);
--dm-navbar-bg-image: none;
--dm-navbar-border-color: hsla(var(--black-color-hsl), 0.2);
--dm-navbar-box-shadow: var(--lm-navbar-box-shadow);
--navbar-fixed-bottom-height: var(--navbar-height);
--lm-navbar-fixed-bottom-box-shadow: none;
--dm-navbar-fixed-bottom-box-shadow: var(--lm-navbar-fixed-bottom-box-shadow);
--lm-navbar-static-bottom-box-shadow: var(--lm-navbar-fixed-bottom-box-shadow);
--dm-navbar-static-bottom-box-shadow: var(--lm-navbar-static-bottom-box-shadow);
/* Sidebar */
--sidebar-width: 26rem;
--sidebar-border-width: var(--base-border-width);
--lm-sidebar-bg-color: var(--base-white-color);
--lm-sidebar-bg-image: none;
--lm-sidebar-border-color: hsla(var(--black-color-hsl), 0.2);
--lm-sidebar-box-shadow: none;
--dm-sidebar-bg-color: var(--dark-color);
--dm-sidebar-bg-image: none;
--dm-sidebar-border-color: hsla(var(--black-color-hsl), 0.2);
--dm-sidebar-box-shadow: var(--lm-sidebar-box-shadow);
--sidebar-overlay-bg-color: hsla(var(--black-color-hsl), 0.75);
/*
---------------------------------------------------------------------------
7. Page building (containers, content, card, v-spacer) [hmv-07]
---------------------------------------------------------------------------
*/
/* Containers */
--container-width: 100%;
--container-sm-max-width: 54rem;
--container-md-max-width: 72rem;
--container-lg-max-width: 96rem;
--container-xl-max-width: 114rem;
--container-fluid-width: 100%;
/* Content and card */
--content-and-card-spacing: 3rem;
--content-and-card-spacing-xs: 2rem;
--content-and-card-spacing-half: calc(var(--content-and-card-spacing)/2); /* For rows with adjusted spacing */
--content-and-card-spacing-xs-half: calc(var(--content-and-card-spacing-xs)/2); /* For rows with adjusted spacing */
--content-title-font-size: 2rem;
--content-title-font-weight: 500;
--card-border-width: var(--base-border-width);
--card-border-radius: var(--base-border-radius);
--card-title-font-size: var(--content-title-font-size);
--card-title-font-weight: var(--content-title-font-weight);
--lm-card-text-color: var(--lm-base-text-color);
--lm-card-bg-color: var(--base-white-color);
--lm-card-bg-image: none;
--lm-card-border-color: hsla(var(--black-color-hsl), 0.2);
--lm-card-box-shadow: none;
--dm-card-text-color: var(--dm-base-text-color);
--dm-card-bg-color: var(--dark-color);
--dm-card-bg-image: none;
--dm-card-border-color: hsla(var(--black-color-hsl), 0.2);
--dm-card-box-shadow: var(--lm-card-box-shadow);
/* Vertical spacer (Height same as content and card spacing) */
--v-spacer-height: var(--content-and-card-spacing);
--v-spacer-height-xs: var(--content-and-card-spacing-xs);
/*
---------------------------------------------------------------------------
8. Links [hmv-08]
---------------------------------------------------------------------------
*/
--lm-link-text-color: var(--primary-color);
--lm-link-text-color-hover: var(--primary-color-light);
--dm-link-text-color: var(--primary-color);
--dm-link-text-color-hover: var(--primary-color-light);
--hyperlink-border-radius-focus-visible: var(--base-border-radius);
--lm-hyperlink-box-shadow-focus-visible: 0 0 0 0.2rem hsla(var(--primary-color-hsl), 0.6);
--lm-hyperlink-outline-focus-visible: none;
--dm-hyperlink-box-shadow-focus-visible: 0 0 0 0.2rem hsla(var(--primary-color-hsl), 0.6);
--dm-hyperlink-outline-focus-visible: none;
/*
---------------------------------------------------------------------------
9. Buttons [hmv-09]
---------------------------------------------------------------------------
*/
--button-height: 3.2rem;
--button-line-height: var(--button-height);
--button-padding: 0 1.5rem;
--button-border-width: var(--base-border-width);
--button-border-radius: var(--base-border-radius);
/* Small button */
--small-button-height: 2.6rem;
--small-button-line-height: var(--small-button-height);
--small-button-padding: 0 1rem;
--small-button-font-size: 1.2rem;
/* Large button */
--large-button-height: 4rem;
--large-button-line-height: var(--large-button-height);
--large-button-padding: 0 2rem;
--large-button-font-size: 1.8rem;
/* Default button */
--lm-button-text-color: var(--lm-base-text-color-light);
--lm-button-bg-color: var(--white-color);
--lm-button-bg-image: none;
--lm-button-border-color: hsla(var(--black-color-hsl), 0.2);
--lm-button-box-shadow: 0 0.2rem 0 hsla(var(--black-color-hsl), 0.05);
--lm-button-text-color-hover: var(--lm-button-text-color);
--lm-button-bg-color-hover: var(--gray-color-very-light);
--lm-button-bg-image-hover: none;
--lm-button-border-color-hover: var(--lm-button-border-color);
--lm-button-box-shadow-hover: var(--lm-button-box-shadow);
--lm-button-text-color-focus: var(--lm-button-text-color);
--lm-button-bg-color-focus: var(--lm-button-bg-color);
--lm-button-bg-image-focus: var(--lm-button-bg-image);
--lm-button-border-color-focus: var(--lm-button-border-color);
--lm-button-box-shadow-focus: 0 0 0 0.2rem hsla(var(--primary-color-hsl), 0.6);
--lm-button-outline-focus: none;
--dm-button-text-color: var(--dm-base-text-color);
--dm-button-bg-color: hsla(var(--white-color-hsl), 0.05);
--dm-button-bg-image: none;
--dm-button-border-color: hsla(var(--white-color-hsl), 0.025) transparent transparent transparent;
--dm-button-box-shadow: 0 0.2rem 0 hsla(var(--black-color-hsl), 0.1);
--dm-button-text-color-hover: var(--dm-button-text-color);
--dm-button-bg-color-hover: hsla(var(--white-color-hsl), 0.1);
--dm-button-bg-image-hover: none;
--dm-button-border-color-hover: var(--dm-button-border-color);
--dm-button-box-shadow-hover: var(--dm-button-box-shadow);
--dm-button-text-color-focus: var(--dm-button-text-color);
--dm-button-bg-color-focus: var(--dm-button-bg-color);
--dm-button-bg-image-focus: var(--dm-button-bg-image);
--dm-button-border-color-focus: hsla(var(--black-color-hsl), 0.4); /* Made darker to better work with the box shadow */
--dm-button-box-shadow-focus: 0 0 0 0.2rem hsla(var(--primary-color-hsl), 0.3);
--dm-button-outline-focus: none;
/* Alternate dark mode default button */
--dm-