mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-09-03 20:22:41 +00:00
Cell
164a699701
* refactor(styles): unify theme properties and update color variables across stylesheets * Implement theme mode support with light-dark color adjustments across stylesheets - Added color-scheme support in _root.scss for light and dark modes. - Replaced theme property mixins with light-dark function in various widget styles including _cell-tooltip.scss, _cookieconsent.scss, _fixed-button.scss, and others. - Updated alert styles in _alert.scss to use light-dark for border and text colors. - Refactored code syntax highlighting in _code.scss and _code-syntax/_index.scss to utilize light-dark for background gradients. - Enhanced search input styles in _search.scss to adapt to theme mode. - Modified theme switching logic in color-scheme.js and theme.js to support new theme mode structure. - Adjusted APlayer and Valine styles to accommodate dark mode using new theme variables. * feat(shortcode): add auto-dark shortcode for dark mode adaptation * refactor(styles): update theme colors and improve box-shadow properties for better visual consistency * feat(header): add scroll-state container queries and enhance header shadow effects * feat(styles): enhance scroll behavior with overscroll-behavior adjustments for better UX * feat(styles): update code&table styles and colors for improved visual consistency * feat(styles): update color variables and improve font styling for better visual hierarchy
40 lines
849 B
SCSS
40 lines
849 B
SCSS
.alert {
|
|
padding: 0.5rem 1rem;
|
|
margin-block: 1rem;
|
|
color: inherit;
|
|
border-left: 0.25em solid fixit-var(alert-border-color);
|
|
|
|
> :first-child {
|
|
margin-top: 0;
|
|
}
|
|
> :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.alert-title {
|
|
display: flex;
|
|
font-weight: 500;
|
|
align-items: center;
|
|
line-height: 1;
|
|
margin-bottom: 1rem;
|
|
color: fixit-var(alert-color);
|
|
|
|
> svg.icon {
|
|
width: initial;
|
|
height: initial;
|
|
margin-right: 0.5rem;
|
|
}
|
|
}
|
|
|
|
@each $type, $item in $alert-color-map {
|
|
$dark-item: map-get($alert-color-map-dark, $type);
|
|
|
|
&.alert-#{$type} {
|
|
@include set-fixit-vars((
|
|
alert-border-color: light-dark(map-get($item, border-color), map-get($dark-item, border-color)),
|
|
alert-color: light-dark(map-get($item, color), map-get($dark-item, color))
|
|
));
|
|
}
|
|
}
|
|
}
|