use-theme-editor
Version:
Zero configuration CSS variables based theme editor
986 lines (823 loc) • 494 kB
CSS
/*!********************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/halfmoon/css/halfmoon-variables.css ***!
\********************************************************************************************************************************/
/*
-------------------------------------------------------------------------------
Halfmoon CSS (Variables file)
Version: 1.1.1
https://www.gethalfmoon.com
Copyright, Halfmoon 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. Spacing utilities --------------------------------------------- [hm-25]
26. Display utilities --------------------------------------------- [hm-26]
27. Sizing utilities ---------------------------------------------- [hm-27]
28. Flex utilities ------------------------------------------------ [hm-28]
29. Position utilities -------------------------------------------- [hm-29]
30. Other utilities ----------------------------------------------- [hm-30]
Credits:
Bootstrap and its contributors for class names and inspiration. Moreover,
the containers, grid system and the flex utilities found in Halfmoon 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. Code ----------------------------------------------------- [hmv-10]
11. Tables --------------------------------------------------- [hmv-11]
12. Form helpers (form-groups, labels, form-text, etc.) ------ [hmv-12]
13. Inputs --------------------------------------------------- [hmv-13]
14. Checkbox ------------------------------------------------- [hmv-14]
15. Radio ---------------------------------------------------- [hmv-15]
16. Switch --------------------------------------------------- [hmv-16]
17. Input file ----------------------------------------------- [hmv-17]
18. Input group ---------------------------------------------- [hmv-18]
19. Dropdown ------------------------------------------------- [hmv-19]
20. Modal ---------------------------------------------------- [hmv-20]
21. Alerts --------------------------------------------------- [hmv-21]
22. Navbar content ------------------------------------------- [hmv-22]
23. Sidebar content ------------------------------------------ [hmv-23]
24. Pagination ----------------------------------------------- [hmv-24]
25. Breadcrumb ----------------------------------------------- [hmv-25]
26. Tooltips ------------------------------------------------- [hmv-26]
27. Badges --------------------------------------------------- [hmv-27]
28. Button group --------------------------------------------- [hmv-28]
29. Collapse ------------------------------------------------- [hmv-29]
30. Progress ------------------------------------------------- [hmv-30]
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)
~ *-active (.active)
~ *-active-hover (.active:hover)
~ A variable with a given state only applies to the element when
the element is in that state.
~ 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-border-color-active-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 (rgba) 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 background color
Notes:
~ The variable should only be used for backgrounds of containers, such
as cards and dropdown menus.
~ The variable should not be used for backgrounds of elements such as
buttons, inputs, badges, and so on. Instead, #ffffff should be used.
~ The variable should also not be used for text color. Again, #ffffff
should be used.
*/
--white-bg-color: #ffffff;
/*
Dark colors
Notes:
~ Only limited to 3 because a wide range of colors don't look good in
dark themes.
*/
--dark-color: #191c20;
--dark-color-light: #25282c;
--dark-color-dark: #111417;
/* Gray colors */
--gray-color: #dadfe1;
--gray-color-light: #ecf0f1;
--gray-color-very-light: #f7f7f7;
--gray-color-dark: #bababc;
--gray-color-very-dark: #47494d;
/* 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;
--base-border-width: 1px;
--base-border-radius: 0.4rem;
--extra-letter-spacing-size: 0.03rem;
--lm-base-text-color: rgba(0, 0, 0, 0.85);
--lm-base-text-color-light: rgba(0, 0, 0, 0.7);
--lm-base-body-bg-color: var(--white-bg-color);
--lm-base-body-bg-image: none;
--lm-horizontal-rule-color: rgba(0, 0, 0, 0.05);
--lm-border-color: rgba(0, 0, 0, 0.2); /* Only used for border utilities */
--dm-base-text-color: rgba(255, 255, 255, 0.8);
--dm-base-text-color-light: rgba(255, 255, 255, 0.65);
--dm-base-body-bg-color: var(--dark-color-light);
--dm-base-body-bg-image: none;
--dm-horizontal-rule-color: rgba(255, 255, 255, 0.05);
--dm-border-color: rgba(255, 255, 255, 0.2); /* Only used for border utilities */
/* Heading */
--heading-font-weight: 400;
/* Text muted colors */
--lm-muted-text-color: rgba(0, 0, 0, 0.6);
--dm-muted-text-color: rgba(255, 255, 255, 0.6);
/*
---------------------------------------------------------------------------
2. System colors [hmv-02]
Notes:
~ Not actually used in classes or components. Extended by context
colors (see below).
---------------------------------------------------------------------------
*/
/* Blue */
--blue-color: #1890ff; /* rgba(24, 144, 255, 1) */
--blue-color-light: #45a3fb;
--blue-color-very-light: #cfe7fd;
--blue-color-dark: #0d518f;
--blue-color-very-dark: #172636;
--blue-box-shadow-color: rgba(24, 144, 255, 0.3);
--blue-box-shadow-color-darker: rgba(24, 144, 255, 0.6);
--text-color-on-blue-color-bg: #ffffff;
/* Indigo */
--indigo-color: #6563ff; /* rgba(101, 99, 255, 1) */
--indigo-color-light: #857cfc;
--indigo-color-very-light: #e0dcfe;
--indigo-color-dark: #383677;
--indigo-color-very-dark: #1f2130;
--indigo-box-shadow-color: rgba(101, 99, 255, 0.3);
--indigo-box-shadow-color-darker: rgba(101, 99, 255, 0.6);
--text-color-on-indigo-color-bg: #ffffff;
/* Teal */
--teal-color: #38b2ac; /* rgba(56, 178, 172, 1) */
--teal-color-light: #5fc0bd;
--teal-color-very-light: #d2efee;
--teal-color-dark: #265758;
--teal-color-very-dark: #1b2a2d;
--teal-box-shadow-color: rgba(56, 178, 172, 0.3);
--teal-box-shadow-color-darker: rgba(56, 178, 172, 0.6);
--text-color-on-teal-color-bg: #ffffff;
/* Green */
--green-color: #0be881; /* rgba(11, 232, 129, 1) */
--green-color-light: #81eea8;
--green-color-very-light: #d5f9e5;
--green-color-dark: #0d8951;
--green-color-very-dark: #17312a;
--green-box-shadow-color: rgba(11, 232, 129, 0.3);
--green-box-shadow-color-darker: rgba(11, 232, 129, 0.6);
--text-color-on-green-color-bg: var(--lm-base-text-color);
/* Yellow */
--yellow-color: #ffcf00; /* rgba(255, 207, 0, 1) */
--yellow-color-light: #ffe04d;
--yellow-color-very-light: #fff6cc;
--yellow-color-dark: #8e7710;
--yellow-color-very-dark: #302c1d;
--yellow-box-shadow-color: rgba(255, 207, 0, 0.3);
--yellow-box-shadow-color-darker: rgba(255, 207, 0, 0.6);
--text-color-on-yellow-color-bg: var(--lm-base-text-color);
/* Orange */
--orange-color: #ed8936; /* rgba(237, 137, 54, 1) */
--orange-color-light: #f09f53;
--orange-color-very-light: #fbe6d2;
--orange-color-dark: #6e4623;
--orange-color-very-dark: #2e2620;
--orange-box-shadow-color: rgba(237, 137, 54, 0.3);
--orange-box-shadow-color-darker: rgba(237, 137, 54, 0.6);
--text-color-on-orange-color-bg: #ffffff;
/* Red */
--red-color: #ff4d4f; /* rgba(245, 34, 45, 1) */
--red-color-light: #ed586c;
--red-color-very-light: #f8d0d9;
--red-color-dark: #8c0e2e;
--red-color-very-dark: #301923;
--red-box-shadow-color: rgba(245, 34, 45, 0.3);
--red-box-shadow-color-darker: rgba(245, 34, 45, 0.6);
--text-color-on-red-color-bg: #ffffff;
/* Pink */
--pink-color: #ed64a6; /* rgba(237, 100, 166, 1) */
--pink-color-light: #ee7db7;
--pink-color-very-light: #f9dced;
--pink-color-dark: #6d3655;
--pink-color-very-dark: #2d212d;
--pink-box-shadow-color: rgba(237, 100, 166, 0.3);
--pink-box-shadow-color-darker: rgba(237, 100, 166, 0.6);
--text-color-on-pink-color-bg: #ffffff;
/*
---------------------------------------------------------------------------
3. Context colors [hmv-03]
Notes:
~ Used in classes and components.
~ The *-box-shadow-color and *-box-shadow-color-darker are used for
the focus effects of inputs and buttons.
---------------------------------------------------------------------------
*/
/* Primary colors */
--primary-color: var(--blue-color);
--primary-color-light: var(--blue-color-light);
--primary-color-very-light: var(--blue-color-very-light);
--primary-color-dark: var(--blue-color-dark);
--primary-color-very-dark: var(--blue-color-very-dark);
--primary-box-shadow-color: var(--blue-box-shadow-color);
--primary-box-shadow-color-darker: var(--blue-box-shadow-color-darker);
--text-color-on-primary-color-bg: var(--text-color-on-blue-color-bg);
/* Success colors */
--success-color: var(--green-color);
--success-color-light: var(--green-color-light);
--success-color-very-light: var(--green-color-very-light);
--success-color-dark: var(--green-color-dark);
--success-color-very-dark: var(--green-color-very-dark);
--success-box-shadow-color: var(--green-box-shadow-color);
--success-box-shadow-color-darker: var(--green-box-shadow-color-darker);
--text-color-on-success-color-bg: var(--text-color-on-green-color-bg);
/* Secondary colors */
--secondary-color: var(--yellow-color);
--secondary-color-light: var(--yellow-color-light);
--secondary-color-very-light: var(--yellow-color-very-light);
--secondary-color-dark: var(--yellow-color-dark);
--secondary-color-very-dark: var(--yellow-color-very-dark);
--secondary-box-shadow-color: var(--yellow-box-shadow-color);
--secondary-box-shadow-color-darker: var(--yellow-box-shadow-color-darker);
--text-color-on-secondary-color-bg: var(--text-color-on-yellow-color-bg);
/* Danger colors */
--danger-color: var(--red-color);
--danger-color-light: var(--red-color-light);
--danger-color-very-light: var(--red-color-very-light);
--danger-color-dark: var(--red-color-dark);
--danger-color-very-dark: var(--red-color-very-dark);
--danger-box-shadow-color: var(--red-box-shadow-color);
--danger-box-shadow-color-darker: var(--red-box-shadow-color-darker);
--text-color-on-danger-color-bg: var(--text-color-on-red-color-bg);
/*
---------------------------------------------------------------------------
4. Box shadows [hmv-04]
---------------------------------------------------------------------------
*/
--lm-shadow-color: rgba(0, 0, 0, 0.15);
--dm-shadow-color: rgba(0, 0, 0, 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: rgba(0, 0, 0, 0.1);
--lm-webkit-scrollbar-thumb-bg-color: rgba(0, 0, 0, 0.25);
--lm-webkit-scrollbar-thumb-bg-color-hover: rgba(0, 0, 0, 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: rgba(0, 0, 0, 0.1);
--dm-webkit-scrollbar-bg-color: transparent;
--dm-webkit-scrollbar-track-border-color: rgba(255, 255, 255, 0.05);
--dm-webkit-scrollbar-thumb-bg-color: rgba(255, 255, 255, 0.25);
--dm-webkit-scrollbar-thumb-bg-color-hover: rgba(255, 255, 255, 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: rgba(255, 255, 255, 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(--white-bg-color);
--lm-navbar-bg-image: none;
--lm-navbar-border-color: rgba(0, 0, 0, 0.2);
--lm-navbar-box-shadow: none;
--dm-navbar-bg-color: var(--dark-color-dark);
--dm-navbar-bg-image: none;
--dm-navbar-border-color: rgba(0, 0, 0, 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(--white-bg-color);
--lm-sidebar-bg-image: none;
--lm-sidebar-border-color: rgba(0, 0, 0, 0.2);
--lm-sidebar-box-shadow: none;
--dm-sidebar-bg-color: var(--dark-color);
--dm-sidebar-bg-image: none;
--dm-sidebar-border-color: rgba(0, 0, 0, 0.2);
--dm-sidebar-box-shadow: var(--lm-sidebar-box-shadow);
--sidebar-overlay-bg-color: rgba(0, 0, 0, 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(--white-bg-color);
--lm-card-bg-image: none;
--lm-card-border-color: rgba(0, 0, 0, 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: rgba(0, 0, 0, 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);
/*
---------------------------------------------------------------------------
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);
--button-outline-width: 1px;
--button-outline-type: dotted;
--button-outline-offset: 0.2rem;
/* 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: #ffffff;
--lm-button-bg-image: none;
--lm-button-border-color: rgba(0, 0, 0, 0.2);
--lm-button-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 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 var(--primary-box-shadow-color-darker);
--lm-button-outline-color-focus: transparent;
--dm-button-text-color: var(--dm-base-text-color);
--dm-button-bg-color: rgba(255, 255, 255, 0.05);
--dm-button-bg-image: none;
--dm-button-border-color: rgba(255, 255, 255, 0.025) transparent transparent transparent;
--dm-button-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.1);
--dm-button-text-color-hover: var(--dm-button-text-color);
--dm-button-bg-color-hover: rgba(255, 255, 255, 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: rgba(0, 0, 0, 0.4); /* Made darker to better work with the box shadow */
--dm-button-box-shadow-focus: 0 0 0 0.2rem var(--primary-box-shadow-color);
--dm-button-outline-color-focus: transparent;
/* Alternate dark mode default button */
--dm-button-alt-text-color: inherit;
--dm-button-alt-bg-color: rgba(0, 0, 0, 0.15);
--dm-button-alt-bg-image: none;
--dm-button-alt-border-color: rgba(0, 0, 0, 0.05);
--dm-button-alt-box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.025);
--dm-button-alt-text-color-hover: var(--dm-button-alt-text-color);
--dm-button-alt-bg-color-hover: rgba(0, 0, 0, 0.2);
--dm-button-alt-bg-image-hover: none;
--dm-button-alt-border-color-hover: var(--dm-button-alt-border-color);
--dm-button-alt-box-shadow-hover: var(--dm-button-alt-box-shadow);
--dm-button-alt-text-color-focus: var(--dm-button-alt-text-color);
--dm-button-alt-bg-color-focus: var(--dm-button-alt-bg-color);
--dm-button-alt-bg-image-focus: var(--dm-button-alt-bg-image);
--dm-button-alt-border-color-focus: inherit;
--dm-button-alt-box-shadow-focus: var(--dm-button-alt-box-shadow);
--dm-button-alt-outline-color-focus: transparent;
/* Link button */
--lm-button-link-text-color: var(--primary-color);
--lm-button-link-bg-color: transparent;
--lm-button-link-bg-image: none;
--lm-button-link-border-color: transparent;
--lm-button-link-box-shadow: none;
--lm-button-link-text-color-hover: var(--primary-color-light);
--lm-button-link-bg-color-hover: var(--lm-button-link-bg-color);
--lm-button-link-bg-image-hover: none;
--lm-button-link-border-color-hover: var(--lm-button-link-border-color);
--lm-button-link-box-shadow-hover: var(--lm-button-link-box-shadow);
--lm-button-link-text-color-focus: var(--lm-button-link-text-color);
--lm-button-link-bg-color-focus: var(--lm-button-link-bg-color);
--lm-button-link-bg-image-focus: var(--lm-button-link-bg-image);
--lm-button-link-border-color-focus: var(--lm-button-link-border-color);
--lm-button-link-box-shadow-focus: var(--lm-button-box-shadow-focus);
--lm-button-link-outline-color-focus: var(--lm-button-outline-color-focus);
--dm-button-link-text-color: var(--primary-color);
--dm-button-link-bg-color: transparent;
--dm-button-link-bg-image: none;
--dm-button-link-border-color: transparent;
--dm-button-link-box-shadow: none;
--dm-button-link-text-color-hover: var(--primary-color-light);
--dm-button-link-bg-color-hover: var(--dm-button-link-bg-color);
--dm-button-link-bg-image-hover: none;
--dm-button-link-border-color-hover: var(--dm-button-link-border-color);
--dm-button-link-box-shadow-hover: var(--dm-button-link-box-shadow);
--dm-button-link-text-color-focus: var(--dm-button-link-text-color);
--dm-button-link-bg-color-focus: var(--dm-button-link-bg-color);
--dm-button-link-bg-image-focus: var(--dm-button-link-bg-image);
--dm-button-link-border-color-focus: var(--dm-button-link-border-color);
--dm-button-link-box-shadow-focus: var(--dm-button-box-shadow-focus);
--dm-button-link-outline-color-focus: var(--dm-button-outline-color-focus);
/* Primary button */
--lm-button-primary-text-color: var(--text-color-on-primary-color-bg);
--lm-button-primary-bg-color: var(--primary-color);
--lm-button-primary-bg-image: none;
--lm-button-primary-border-color: var(--primary-color);
--lm-button-primary-box-shadow: var(--lm-button-box-shadow);
--lm-button-primary-text-color-hover: var(--lm-button-primary-text-color);
--lm-button-primary-bg-color-hover: var(--primary-color-light);
--lm-button-primary-bg-image-hover: none;
--lm-button-primary-border-color-hover: var(--primary-color-light);
--lm-button-primary-box-shadow-hover: var(--lm-button-primary-box-shadow);
--lm-button-primary-text-color-focus: var(--lm-button-primary-text-color);
--lm-button-primary-bg-color-focus: var(--lm-button-primary-bg-color);
--lm-button-primary-bg-image-focus: var(--lm-button-primary-bg-image);
--lm-button-primary-border-color-focus: var(--lm-button-primary-border-color);
--lm-button-primary-box-shadow-focus: 0 0 0 0.3rem var(--primary-box-shadow-color);
--lm-button-primary-outline-color-focus: var(--lm-button-outline-color-focus);
--dm-button-primary-text-color: var(--text-color-on-primary-color-bg);
--dm-button-primary-bg-color: var(--primary-color);
--dm-button-primary-bg-image: none;
--dm-button-primary-border-color: var(--primary-color);
--dm-button-primary-box-shadow: var(--dm-button-box-shadow);
--dm-button-primary-text-color-hover: var(--dm-button-primary-text-color);
--dm-button-primary-bg-color-hover: var(--primary-color-light);
--dm-button-primary-bg-image-hover: none;
--dm-button-primary-border-color-hover: var(--primary-color-light);
--dm-button-primary-box-shadow-hover: var(--dm-button-primary-box-shadow);
--dm-button-primary-text-color-focus: var(--dm-button-primary-text-color);
--dm-button-primary-bg-color-focus: var(--dm-button-primary-bg-color);
--dm-button-primary-bg-image-focus: var(--dm-button-primary-bg-image);
--dm-button-primary-border-color-focus: var(--dm-button-primary-border-color);
--dm-button-primary-box-shadow-focus: 0 0 0 0.3rem var(--primary-box-shadow-color);
--dm-button-primary-outline-color-focus: var(--dm-button-outline-color-focus);
/* Success button */
--lm-button-success-text-color: var(--text-color-on-success-color-bg);
--lm-button-success-bg-color: var(--success-color);
--lm-button-success-bg-image: none;
--lm-button-success-border-color: var(--success-color);
--lm-button-success-box-shadow: var(--lm-button-box-shadow);
--lm-button-success-text-color-hover: var(--lm-button-success-text-color);
--lm-button-success-bg-color-hover: var(--success-color-light);
--lm-button-success-bg-image-hover: none;
--lm-button-success-border-color-hover: var(--success-color-light);
--lm-button-success-box-shadow-hover: var(--lm-button-success-box-shadow);
--lm-button-success-text-color-focus: var(--lm-button-success-text-color);
--lm-button-success-bg-color-focus: var(--lm-button-success-bg-color);
--lm-button-success-bg-image-focus: var(--lm-button-success-bg-image);
--lm-button-success-border-color-focus: var(--lm-button-success-border-color);
--lm-button-success-box-shadow-focus: 0 0 0 0.3rem var(--success-box-shadow-color);
--lm-button-success-outline-color-focus: var(--lm-button-outline-color-focus);
--dm-button-success-text-color: var(--text-color-on-success-color-bg);
--dm-button-success-bg-color: var(--success-color);
--dm-button-success-bg-image: none;
--dm-button-success-border-color: var(--success-color);
--dm-button-success-box-shadow: var(--dm-button-box-shadow);
--dm-button-success-text-color-hover: var(--dm-button-success-text-color);
--dm-button-success-bg-color-hover: var(--success-color-light);
--dm-button-success-bg-image-hover: none;
--dm-button-success-border-color-hover: var(--success-color-light);
--dm-button-success-box-shadow-hover: var(--dm-button-success-box-shadow);
--dm-button-success-text-color-focus: var(--dm-button-success-text-color);
--dm-button-success-bg-color-focus: var(--dm-button-success-bg-color);
--dm-button-success-bg-image-focus: var(--dm-button-success-bg-image);
--dm-button-success-border-color-focus: var(--dm-button-success-border-color);
--dm-button-success-box-shadow-focus: 0 0 0 0.3rem var(--success-box-shadow-color);
--dm-button-success-outline-color-focus: var(--dm-button-outline-color-focus);
/* Secondary button */
--lm-button-secondary-text-color: var(--text-color-on-secondary-color-bg);
--lm-button-secondary-bg-color: var(--secondary-color);
--lm-button-secondary-bg-image: none;
--lm-button-secondary-border-color: var(--secondary-color);
--lm-button-secondary-box-shadow: var(--lm-button-box-shadow);
--lm-button-secondary-text-color-hover: var(--lm-button-secondary-text-color);
--lm-button-secondary-bg-color-hover: var(--secondary-color-light);
--lm-button-secondary-bg-image-hover: none;
--lm-button-secondary-border-color-hover: var(--secondary-color-light);
--lm-button-secondary-box-shadow-hover: var(--lm-button-secondary-box-shadow);
--lm-button-secondary-text-color-focus: var(--lm-button-secondary-text-color);
--lm-button-secondary-bg-color-focus: var(--lm-button-secondary-bg-color);
--lm-button-secondary-bg-image-focus: var(--lm-button-secondary-bg-image);
--lm-button-secondary-border-color-focus: var(--lm-button-secondary-border-color);
--lm-button-secondary-box-shadow-focus: 0 0 0 0.3rem var(--secondary-box-shadow-color);
--lm-button-secondary-outline-color-focus: var(--lm-button-outline-color-focus);
--dm-button-secondary-text-color: var(--text-color-on-secondary-color-bg);
--dm-button-secondary-bg-color: var(--secondary-color);
--dm-button-secondary-bg-image: none;
--dm-button-secondary-border-color: var(--secondary-color);
--dm-button-secondary-box-shadow: var(--dm-button-box-shadow);
--dm-button-secondary-text-color-hover: var(--dm-button-secondary-text-color);
--dm-button-secondary-bg-color-hover: var(--secondary-color-light);
--dm-button-secondary-bg-image-hover: none;
--dm-button-secondary-border-color-hover: var(--secondary-color-light);
--dm-button-secondary-box-shadow-hover: var(--dm-button-secondary-box-shadow);
--dm-button-secondary-text-color-focus: var(--dm-button-secondary-text-color);
--dm-button-secondary-bg-color-focus: var(--dm-button-secondary-bg-color);
--dm-button-secondary-bg-image-focus: var(--dm-button-secondary-bg-image);
--dm-button-secondary-border-color-focus: var(--dm-button-secondary-border-color);
--dm-button-secondary-box-shadow-focus: 0 0 0 0.3rem var(--secondary-box-shadow-color);
--dm-button-secondary-outline-color-focus: var(--dm-button-outline-color-focus);
/* Danger button */
--lm-button-danger-text-color: var(--text-color-on-danger-color-bg);
--lm-button-danger-bg-color: var(--danger-color);
--lm-button-danger-bg-image: none;
--lm-button-danger-border-color: var(--danger-color);
--lm-button-danger-box-shadow: var(--lm-button-box-shadow);
--lm-button-danger-text-color-hover: var(--lm-button-danger-text-color);
--lm-button-danger-bg-color-hover: var(--danger-color-light);
--lm-button-danger-bg-image-hover: none;
--lm-button-danger-border-color-hover: var(--danger-color-light);
--lm-button-danger-box-shadow-hover: var(--lm-button-danger-box-shadow);
--lm-button-danger-text-color-focus: var(--lm-button-danger-text-color);
--lm-button-danger-bg-color-focus: var(--lm-button-danger-bg-color);
--lm-button-danger-bg-image-focus: var(--lm-button-danger-bg-image);
--lm-button-danger-border-color-focus: var(--lm-button-danger-border-color);
--lm-button-danger-box-shadow-focus: 0 0 0 0.3rem var(--danger-box-shadow-color);
--lm-button-danger-outline-color-focus: var(--lm-button-outline-color-focus);
--dm-button-danger-text-color: var(--text-color-on-danger-color-bg);
--dm-button-danger-bg-color: var(--danger-color);
--dm-button-danger-bg-image: none;
--dm-button-danger-border-color: var(--danger-color);
--dm-button-danger-box-shadow: var(--dm-button-box-shadow);
--dm-button-danger-text-color-hover: var(--dm-button-danger-text-color);
--dm-button-danger-bg-color-hover: var(--danger-color-light);
--dm-button-danger-bg-image-hover: none;
--dm-button-danger-border-color-hover: var(--danger-color-light);
--dm-button-danger-box-shadow-hover: var(--dm-button-danger-box-shadow);
--dm-button-danger-text-color-focus: var(--dm-button-danger-text-color);
--dm-button-danger-bg-color-focus: var(--dm-button-danger-bg-color);
--dm-button-danger-bg-image-focus: var(--dm-button-danger-bg-image);
--dm-button-danger-border-color-focus: var(--dm-button-danger-border-color);
--dm-button-danger-box-shadow-focus: 0 0 0 0.3rem var(--danger-box-shadow-color);
--dm-button-danger-outline-color-focus: var(--dm-button-outline-color-focus);
/* Rounded button */
--button-rounded-border-radius: var(--button-height);
--small-button-rounded-border-radius: var(--small-button-height);
--large-button-rounded-border-radius: var(--large-button-height);
/*
---------------------------------------------------------------------------
10. Code [hmv-10]
---------------------------------------------------------------------------
*/
--code-font-size: 1.2rem;
--code-line-height: var(--base-line-height);
--code-padding: 0.1rem 0.5rem;
--code-margin: 0 0.1rem;
--code-border-width: var(--base-border-width);
--code-border-radius: 0.2rem;
--lm-code-text-color: var(--lm-base-text-color);
--lm-code-bg-color: var(--gray-color-light);
--lm-code-border-color: rgba(0, 0, 0, 0.05);
--dm-code-text-color: var(--dm-base-text-color);
--dm-code-bg-color: rgba(0, 0, 0, 0.1);
--dm-code-border-color: rgba(0, 0, 0, 0.15);
/* Keyboard input */
--kbd-font-size: var(--code-font-size);
--kbd-line-height: var(--code-line-height);
--kbd-padding: var(--code-padding);
--kbd-margin: var(--code-mar