mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-08-24 15:28:57 +00:00
refactor(UI/UX)!: refactor styles for theme support and enhance visual consistency (#722)
* 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
This commit is contained in:
Cell
Vendored
+50
-29
@@ -1,44 +1,55 @@
|
||||
[data-theme=dark] .aplayer {
|
||||
background: #212121;
|
||||
@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: #5c5c5c;
|
||||
border-bottom-color: $aplayer-border;
|
||||
}
|
||||
}
|
||||
|
||||
&.aplayer-fixed {
|
||||
.aplayer-list {
|
||||
border-color: #5c5c5c;
|
||||
border-color: $aplayer-border;
|
||||
}
|
||||
}
|
||||
|
||||
.aplayer-body {
|
||||
background-color: #212121;
|
||||
background-color: $aplayer-bg;
|
||||
}
|
||||
|
||||
.aplayer-info {
|
||||
border-top-color: #212121;
|
||||
border-top-color: $aplayer-border;
|
||||
}
|
||||
|
||||
.aplayer-info {
|
||||
.aplayer-music {
|
||||
.aplayer-title {
|
||||
color: #fff;
|
||||
color: $aplayer-text;
|
||||
}
|
||||
|
||||
.aplayer-author {
|
||||
color: #fff;
|
||||
color: $aplayer-text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.aplayer-controller {
|
||||
.aplayer-time {
|
||||
color: #eee;
|
||||
color: $aplayer-text-secondary;
|
||||
|
||||
.aplayer-icon {
|
||||
path {
|
||||
fill: #eee;
|
||||
fill: $aplayer-text-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -46,59 +57,69 @@
|
||||
}
|
||||
|
||||
.aplayer-list {
|
||||
background-color: #212121;
|
||||
background-color: $aplayer-bg;
|
||||
|
||||
li {
|
||||
color: #fff;
|
||||
border-top-color: #666;
|
||||
color: $aplayer-text;
|
||||
border-top-color: $aplayer-border;
|
||||
|
||||
&:hover {
|
||||
background: #4e4e4e;
|
||||
background: $aplayer-bg-hover;
|
||||
}
|
||||
|
||||
&.aplayer-list-light {
|
||||
background: #6c6c6c;
|
||||
background: $aplayer-bg-active;
|
||||
}
|
||||
|
||||
.aplayer-list-index {
|
||||
color: #ddd;
|
||||
color: $aplayer-text-muted;
|
||||
}
|
||||
|
||||
.aplayer-list-author {
|
||||
color: #ddd;
|
||||
color: $aplayer-text-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aplayer-lrc {
|
||||
text-shadow: -1px -1px 0 #666;
|
||||
text-shadow: -1px -1px 0 $aplayer-shadow;
|
||||
|
||||
&:before {
|
||||
background: -moz-linear-gradient(top, rgba(33,33,33,1) 0%, rgba(33,33,33,0) 100%);
|
||||
background: -webkit-linear-gradient(top, rgba(33,33,33,1) 0%,rgba(33,33,33,0) 100%);
|
||||
background: linear-gradient(to bottom, rgba(33,33,33,1) 0%,rgba(33,33,33,0) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#00212121',GradientType=0 );
|
||||
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(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);
|
||||
background: -webkit-linear-gradient(top, rgba(33,33,33,0) 0%,rgba(33,33,33,0.8) 100%);
|
||||
background: linear-gradient(to bottom, rgba(33,33,33,0) 0%,rgba(33,33,33,0.8) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00212121', endColorstr='#cc212121',GradientType=0 );
|
||||
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: #fff;
|
||||
color: $aplayer-text;
|
||||
}
|
||||
}
|
||||
|
||||
.aplayer-miniswitcher {
|
||||
background: #484848;
|
||||
background: $aplayer-switcher-bg;
|
||||
|
||||
.aplayer-icon {
|
||||
path {
|
||||
fill: #eee;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
Vendored
+7
-16
@@ -1,7 +1,7 @@
|
||||
// ========== Global ========== //
|
||||
// Color of the border
|
||||
$border-color: #f0f0f0;
|
||||
$border-color-dark: #363636;
|
||||
$border-color: #d7dee4;
|
||||
$border-color-dark: #383f47;
|
||||
|
||||
// ========== Code ========== //
|
||||
// Color of the code
|
||||
@@ -9,8 +9,8 @@ $code-color: #E74C3C !default;
|
||||
$code-color-dark: #E5BF78 !default;
|
||||
|
||||
// Color of the code background
|
||||
$code-background-color: #f5f5f5 !default;
|
||||
$code-background-color-dark: #272C34 !default;
|
||||
$code-background-color: #f4f6f8 !default;
|
||||
$code-background-color-dark: #2d333B !default;
|
||||
|
||||
@mixin overflow-wrap($value) {
|
||||
word-wrap: $value;
|
||||
@@ -32,23 +32,14 @@ $code-background-color-dark: #272C34 !default;
|
||||
.vcards .vcard .vh,
|
||||
.vcards .vcard .vquote,
|
||||
blockquote {
|
||||
border-color: $border-color;
|
||||
|
||||
[data-theme=dark] & {
|
||||
border-color: $border-color-dark;
|
||||
}
|
||||
border-color: light-dark($border-color, $border-color-dark);
|
||||
}
|
||||
|
||||
code, pre, pre code {
|
||||
font-size: 90%;
|
||||
tab-size: 4;
|
||||
color: $code-color;
|
||||
background-color: $code-background-color;
|
||||
color: light-dark($code-color, $code-color-dark);
|
||||
background-color: light-dark($code-background-color, $code-background-color-dark);
|
||||
@include overflow-wrap(break-word);
|
||||
|
||||
[data-theme=dark] & {
|
||||
color: $code-color-dark;
|
||||
background-color: $code-background-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user