mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-08-24 15:28:57 +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
126 lines
2.7 KiB
SCSS
Vendored
126 lines
2.7 KiB
SCSS
Vendored
@mixin aplayer-dark-theme {
|
|
$aplayer-bg: #181f28;
|
|
$aplayer-bg-elevated: #1f2731;
|
|
$aplayer-bg-hover: #252f3a;
|
|
$aplayer-bg-active: #2b3642;
|
|
$aplayer-border: #313a45;
|
|
$aplayer-text: #d1d7e0;
|
|
$aplayer-text-secondary: #9aa5b1;
|
|
$aplayer-text-muted: #838d98;
|
|
$aplayer-shadow: #161b22;
|
|
$aplayer-switcher-bg: #232d39;
|
|
|
|
background: $aplayer-bg;
|
|
|
|
&.aplayer-withlist {
|
|
.aplayer-info {
|
|
border-bottom-color: $aplayer-border;
|
|
}
|
|
}
|
|
|
|
&.aplayer-fixed {
|
|
.aplayer-list {
|
|
border-color: $aplayer-border;
|
|
}
|
|
}
|
|
|
|
.aplayer-body {
|
|
background-color: $aplayer-bg;
|
|
}
|
|
|
|
.aplayer-info {
|
|
border-top-color: $aplayer-border;
|
|
}
|
|
|
|
.aplayer-info {
|
|
.aplayer-music {
|
|
.aplayer-title {
|
|
color: $aplayer-text;
|
|
}
|
|
|
|
.aplayer-author {
|
|
color: $aplayer-text-secondary;
|
|
}
|
|
}
|
|
|
|
.aplayer-controller {
|
|
.aplayer-time {
|
|
color: $aplayer-text-secondary;
|
|
|
|
.aplayer-icon {
|
|
path {
|
|
fill: $aplayer-text-secondary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.aplayer-list {
|
|
background-color: $aplayer-bg;
|
|
|
|
li {
|
|
color: $aplayer-text;
|
|
border-top-color: $aplayer-border;
|
|
|
|
&:hover {
|
|
background: $aplayer-bg-hover;
|
|
}
|
|
|
|
&.aplayer-list-light {
|
|
background: $aplayer-bg-active;
|
|
}
|
|
|
|
.aplayer-list-index {
|
|
color: $aplayer-text-muted;
|
|
}
|
|
|
|
.aplayer-list-author {
|
|
color: $aplayer-text-secondary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.aplayer-lrc {
|
|
text-shadow: -1px -1px 0 $aplayer-shadow;
|
|
|
|
&:before {
|
|
background: -moz-linear-gradient(top, rgba(24,31,40,1) 0%, rgba(24,31,40,0) 100%);
|
|
background: -webkit-linear-gradient(top, rgba(24,31,40,1) 0%, rgba(24,31,40,0) 100%);
|
|
background: linear-gradient(to bottom, rgba(24,31,40,1) 0%, rgba(24,31,40,0) 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#181f28', endColorstr='#00181f28',GradientType=0 );
|
|
}
|
|
|
|
&:after {
|
|
background: -moz-linear-gradient(top, rgba(24,31,40,0) 0%, rgba(24,31,40,0.9) 100%);
|
|
background: -webkit-linear-gradient(top, rgba(24,31,40,0) 0%, rgba(24,31,40,0.9) 100%);
|
|
background: linear-gradient(to bottom, rgba(24,31,40,0) 0%, rgba(24,31,40,0.9) 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00181f28', endColorstr='#e6181f28',GradientType=0 );
|
|
}
|
|
|
|
p {
|
|
color: $aplayer-text;
|
|
}
|
|
}
|
|
|
|
.aplayer-miniswitcher {
|
|
background: $aplayer-switcher-bg;
|
|
|
|
.aplayer-icon {
|
|
path {
|
|
fill: $aplayer-text-secondary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-theme-mode='dark'] .aplayer {
|
|
@include aplayer-dark-theme;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
[data-theme-mode='auto'] .aplayer {
|
|
@include aplayer-dark-theme;
|
|
}
|
|
}
|