68 lines
2.4 KiB
SCSS
68 lines
2.4 KiB
SCSS
// Root CSS variables
|
|
|
|
:root,
|
|
[data-bs-theme="light"] {
|
|
|
|
// Link color
|
|
--#{$prefix}link-color: var(--#{$prefix}info);
|
|
--#{$prefix}link-color-rgb: var(--#{$prefix}info-rgb);
|
|
--#{$prefix}link-hover-color: var(--#{$prefix}info);
|
|
--#{$prefix}link-hover-color-rgb: var(--#{$prefix}info-rgb);
|
|
--#{$prefix}component-hover-color: #{$component-hover-color};
|
|
|
|
// Common component colors
|
|
--#{$prefix}component-color: #{$component-color};
|
|
--#{$prefix}component-hover-color: #{$component-hover-color};
|
|
--#{$prefix}component-hover-bg: #{$component-hover-bg};
|
|
--#{$prefix}component-active-color: #{$component-active-color};
|
|
--#{$prefix}component-active-bg: #{$component-active-bg};
|
|
--#{$prefix}component-disabled-color: #{$component-disabled-color};
|
|
|
|
// User selection color
|
|
--#{$prefix}user-selection-color: #{$user-selection-color};
|
|
|
|
// Add xs and xxxl border-radius
|
|
--#{$prefix}border-radius-xs: #{$border-radius-xs};
|
|
--#{$prefix}border-radius-xxxl: #{$border-radius-xxxl};
|
|
|
|
// Add underline thickness global variable
|
|
--#{$prefix}underline-thickness: #{$underline-thickness};
|
|
|
|
// Plyr video player main accent color
|
|
--plyr-color-main: var(--#{$prefix}primary);
|
|
}
|
|
|
|
|
|
// Dark mode overrides
|
|
|
|
@if $enable-dark-mode {
|
|
@include color-mode(dark, true) {
|
|
|
|
// Link color
|
|
--#{$prefix}link-color: var(--#{$prefix}info);
|
|
--#{$prefix}link-color-rgb: var(--#{$prefix}info-rgb);
|
|
--#{$prefix}link-hover-color: var(--#{$prefix}info);
|
|
--#{$prefix}link-hover-color-rgb: var(--#{$prefix}info-rgb);
|
|
|
|
// Common component colors
|
|
--#{$prefix}component-color: #{$component-color-dark};
|
|
--#{$prefix}component-hover-color: #{$component-hover-color-dark};
|
|
--#{$prefix}component-hover-bg: #{$component-hover-bg-dark};
|
|
--#{$prefix}component-active-color: #{$component-active-color-dark};
|
|
--#{$prefix}component-active-bg: #{$component-active-bg-dark};
|
|
--#{$prefix}component-disabled-color: #{$component-disabled-color-dark};
|
|
|
|
// User selection color
|
|
--#{$prefix}user-selection-color-dark: #{$user-selection-color-dark};
|
|
|
|
// Focus styles
|
|
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity-dark};
|
|
--#{$prefix}focus-ring-color: #{$focus-ring-color-dark};
|
|
|
|
// Box shadow
|
|
--#{$prefix}box-shadow: #{$box-shadow-dark};
|
|
--#{$prefix}box-shadow-sm: #{$box-shadow-sm-dark};
|
|
--#{$prefix}box-shadow-lg: #{$box-shadow-lg-dark};
|
|
}
|
|
}
|