blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-08-24 15:28:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(UI/UX)!: refactor styles for theme support and enhance visual consistency (#722)

Browse Source 
* 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
2026-03-29 21:50:35 +08:00
parent e0a0086f03
commit 164a699701
53 changed files with 604 additions and 604 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/_core/_base.scss
+2
View File
@@ -9,6 +9,8 @@ html {
width: 100%;
scroll-behavior: smooth;
overflow: auto;
container-type: scroll-state;
container-name: scroller;
@include media('reduce-motion') {
scroll-behavior: auto;
assets/css/_core/_common.scss
+1 -1
View File
@@ -61,7 +61,7 @@
// auto adapt to dark mode by inverting the color and hue
.auto-dark-mode {
[data-theme=dark] & {
@include dark-mode {
filter: invert(1) hue-rotate(0.5turn);
}
}
assets/css/_core/_layout/_breadcrumb.scss
+2 -2
View File
@@ -69,11 +69,11 @@
content: attr(data-separator);
display: inline-block;
padding-inline: 0.5rem;
color: fixit-var(global-placeholder-color);
color: fixit-var(global-border-color);
}
&.active {
color: fixit-var(secondary);
color: fixit-var(global-font-secondary-color);
}
}
}
assets/css/_core/_layout/_footer.scss
+9 -1
View File
@@ -19,8 +19,16 @@ footer {
margin-right: 0.25rem;
}
.hugo-icon,
.fixit-icon,
.animate-icon {
color: #dc143c;
@include dark-mode {
filter: invert(1) hue-rotate(0.5turn) opacity(0.6);
}
}
.animate-icon {
color: light-dark(#e01846, #ff5f7a);
animation: icon-animate 1.33s ease-in-out infinite;
}
}
assets/css/_core/_layout/_header.scss
+71 -85
View File
@@ -1,23 +1,25 @@
$header-box-shadow: 0 0 1.5rem 0 light-dark(rgba(0, 0, 0, 0.125), rgba(255, 255, 255, 0.125));
header {
width: 100%;
transition: box-shadow 0.3s ease;
background-color: fixit-var(header-background-color);
@include z-index(fixed);
&.blur {
backdrop-filter: saturate(1.2) blur(10px);
background-size: 4px 4px;
background-image: radial-gradient(transparent 1px, fixit-var(header-background-color) 1px);
}
&:not(.blur) {
background-color: fixit-var(header-background-color);
}
&:hover {
box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.125);
box-shadow: $header-box-shadow;
}
[data-theme=dark] & {
box-shadow: 0 0 1.5rem 0 rgba(255, 255, 255, 0.125);
@include scroll-state-query('scroller scroll-state(scrollable: top)') {
box-shadow: $header-box-shadow;
}
&.blur {
@include scroll-state-query('scroller scroll-state(scrollable: top)', '&') {
background-color: transparent;
backdrop-filter: saturate(1.2) blur(10px);
background-size: 4px 4px;
background-image: radial-gradient(transparent 1px, fixit-var(header-background-color) 1px);
}
}
@@ -191,10 +193,8 @@ header {
padding: 0 2rem 0 2rem;
}
@include placeholder;
.search-button {
color: fixit-var(global-placeholder-color);
color: fixit-var(global-font-tertiary-color);
}
.search-clear:hover {
@@ -204,14 +204,28 @@ header {
.search-toggle:hover {
cursor: default;
}
@include placeholder;
}
}
.theme-switch {
i {
transform: rotate(225deg);
transition: all 0.4s ease;
display: inline-block;
transform: rotate(225deg) scale(1);
transform-origin: center;
@include theme-switch-mode('auto');
@include theme-switch-mode('light', '\f185');
@include theme-switch-mode('dark', '\f186');
@include media('reduce-motion') {
animation: none !important;
}
}
@include theme-switch-keyframes('auto', 180deg, 0.9, 0.7, 60%, 245deg, 1.08);
@include theme-switch-keyframes('light', 140deg, 0.82, 0.55, 55%, 250deg, 1.12);
@include theme-switch-keyframes('dark', 310deg, 0.86, 0.55, 55%, 205deg, 1.08);
}
#header-desktop {
@@ -248,18 +262,12 @@ header {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
float: right;
> .menu-item {
&:hover .sub-menu {
display: block;
transform: translateX(-0.5rem);
}
&.theme-switch {
&:hover i {
transform: rotate(45deg);
}
}
&.language-switch:hover .sub-menu {
transform: translateX(calc(1.75rem - 100%));
}
@@ -270,9 +278,9 @@ header {
&.delimiter {
width: 0;
margin: 0.125rem 0.25rem;
margin: 18.5px 0.5rem;
padding: 0;
border-left: 1px dashed fixit-var(global-border-color-weight);
border-left: 1.5px solid fixit-var(global-border-color);
}
}
@@ -286,13 +294,10 @@ header {
background-color: fixit-var(header-background-color);
max-height: 60vh;
overflow-y: auto;
@include border-radius;
overscroll-behavior: contain;
transition: box-shadow 0.3s ease;
box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.1);
[data-theme=dark] & {
box-shadow: 0 0 1.5rem 0 rgba(255, 255, 255, 0.1);
}
@include border-radius;
box-shadow: 0 0 1.5rem 0 light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
.menu-item {
height: fixit-var(submenu-height);
@@ -387,13 +392,10 @@ header {
border-top: 2px solid fixit-var(global-border-color-light);
display: none;
overflow-y: auto;
overscroll-behavior: contain;
max-height: 70vh;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
@include scrollbar-width(none, 0);
[data-theme=dark] & {
box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1);
}
box-shadow: 0 0.125rem 0.25rem light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
.search-wrapper {
display: flex;
@@ -438,11 +440,7 @@ header {
padding: 0 1rem;
&:not(.menu-system):hover {
background-color: #f2f2f3;
[data-theme=dark] & {
background-color: #535355;
}
background-color: light-dark(#f2f2f3, #535355);
}
.menu-link {
@@ -501,11 +499,7 @@ header {
}
.menu-item:hover {
background-color: #e7e7ea;
[data-theme=dark] & {
background-color: #5d5d5f;
}
background-color: light-dark(#e7e7ea, #5d5d5f);
}
}
@@ -544,10 +538,7 @@ header {
top: fixit-var(header-height);
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
@include z-index(fixed);
[data-theme=dark] & {
box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1);
}
box-shadow: 0 0.125rem 0.25rem light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
&.desktop {
right: 2rem;
@@ -569,27 +560,34 @@ header {
.suggestions {
overflow-y: auto;
// 41px is the height of the search-footer
max-height: calc(100dvh - #{fixit-var(header-height)} - 41px);
overscroll-behavior: contain;
// 40px is the height of the search-footer
max-height: calc(100dvh - #{fixit-var(header-height)} - 40px);
.suggestion {
padding: 0.75rem 1rem;
.suggestion-title {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1rem;
font-weight: bold;
max-width: 75%;
}
> :first-child {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.25rem;
margin-bottom: 0.5rem;
.suggestion-date {
font-size: 0.875rem;
float: right;
text-align: right;
color: fixit-var(secondary);
> a {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1rem;
font-weight: bold;
}
.suggestion-date {
font-size: 0.875rem;
flex-shrink: 0;
color: fixit-var(global-font-tertiary-color);
}
}
.suggestion-context {
@@ -600,7 +598,7 @@ header {
line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
color: fixit-var(global-placeholder-color);
color: fixit-var(global-font-secondary-color);
@include overflow-wrap(break-word);
}
@@ -610,11 +608,7 @@ header {
}
&.cursor {
background: darken($code-background-color, 5%);
[data-theme=dark] & {
background: lighten($code-background-color-dark, 5%);
}
background-color: fixit-var(code-block-background-color);
}
&:hover {
@@ -628,24 +622,16 @@ header {
text-align: center;
.search-query {
font-weight: bold;
[data-theme=dark] & {
color: #ddd;
}
@include bold-dark;
}
}
.search-footer {
padding: 0.5rem 1rem;
float: right;
font-size: 0.8rem;
color: fixit-var(secondary);
font-size: 0.875rem;
text-align: right;
color: fixit-var(global-font-secondary-color);
@include link(false, false);
a {
font-size: 1rem;
}
}
}
}
assets/css/_core/_layout/_index.scss
+2 -2
View File
@@ -22,11 +22,11 @@
}
}
&.fi-container {
&.#{$prefix}container {
display: flex;
align-items: flex-start;
justify-content: center;
padding-inline: 1rem;
padding-inline: 0.5rem;
&[data-reverse] {
flex-direction: row-reverse;
assets/css/_core/_mixin/_bold-dark.scss
+10
View File
@@ -0,0 +1,10 @@
/// Make text bold and apply an extra text color in dark mode.
/// The light theme keeps its original inherited color.
/// @param {Color} $color - Bold text color used in dark mode
@mixin bold-dark($color: #ddd) {
font-weight: bold;
@include dark-mode {
color: $color;
}
}
assets/css/_core/_mixin/_compatibility.scss
+31 -1
View File
@@ -1,4 +1,4 @@
@mixin placeholder($color: fixit-var(global-placeholder-color)) {
@mixin placeholder($color: fixit-var(global-font-tertiary-color)) {
input::-webkit-input-placeholder {
color: $color;
}
@@ -31,3 +31,33 @@
-moz-user-select: $value !important;
user-select: $value !important;
}
/// Apply styles only when scroll-state container queries are supported.
/// Unsupported browsers skip the container branch, and can optionally reuse
/// the same styles through a fallback selector.
/// @param {String} $container-query - Full container query string
/// @param {String|null} $fallback-selector - Optional selector used as a fallback
/// @example
/// @include scroll-state-query('scroller scroll-state(scrollable: top)') {
/// box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
/// }
/// @include scroll-state-query('scroller scroll-state(scrollable: top)', '&') {
/// backdrop-filter: saturate(1.2) blur(10px);
/// }
@mixin scroll-state-query($container-query, $fallback-selector: null) {
@supports (container-type: scroll-state) {
@container #{$container-query} {
@content;
}
}
// Fallback for browsers that do not support scroll-state container queries, such as Safari and Firefox.
// https://caniuse.com/mdn-css_properties_container-type_scroll-state
@if $fallback-selector != null {
@supports not (container-type: scroll-state) {
#{$fallback-selector} {
@content;
}
}
}
}
assets/css/_core/_mixin/_index.scss
+2
View File
@@ -1,3 +1,4 @@
@import 'bold-dark';
@import 'border-radius';
@import 'box-shadow';
@import 'compatibility';
@@ -6,5 +7,6 @@
@import 'media';
@import 'scrollbar-width';
@import 'sticky-top';
@import 'theme-switch';
@import 'theme-vars';
@import 'z-index';
assets/css/_core/_mixin/_link.scss
+7 -35
View File
@@ -3,48 +3,20 @@
/// @param {Boolean} $dark use global link color dark
/// @param {String} $decoration text-decoration, default none
@mixin link($light, $dark, $decoration: none) {
$link-color-light: if($light, $global-link-color, $single-link-color);
$link-color-dark: if($dark, $global-link-color-dark, $single-link-color-dark);
$link-hover-color-light: if($light, $global-link-hover-color, $single-link-hover-color);
$link-hover-color-dark: if($dark, $global-link-hover-color-dark, $single-link-hover-color-dark);
a,
a::before,
a::after {
text-decoration: $decoration;
@if $light {
color: $global-link-color;
}
@else {
color: $single-link-color;
}
[data-theme=dark] & {
@if $dark {
color: $global-link-color-dark;
}
@else {
color: $single-link-color-dark;
}
}
color: light-dark($link-color-light, $link-color-dark);
}
a:active,
a:hover {
@if $light {
color: $global-link-hover-color;
}
@else {
color: $single-link-hover-color;
}
[data-theme=dark] & {
@if $dark {
color: $global-link-hover-color-dark;
}
@else {
color: $single-link-hover-color-dark;
}
}
color: light-dark($link-hover-color-light, $link-hover-color-dark);
}
}
assets/css/_core/_mixin/_theme-switch.scss
+48
View File
@@ -0,0 +1,48 @@
// Shared defaults for theme-switch icon motion.
// Keep them overridable so other entries can reuse the same mixin with different pacing.
$theme-switch-animation-duration: 0.5s !default;
$theme-switch-animation-easing: cubic-bezier(0.22, 1, 0.36, 1) !default;
/// Bind a theme mode selector to an icon glyph and its matching animation.
/// @param {String} $mode - Theme mode name: auto | light | dark
/// @param {String|null} $icon - Optional Font Awesome glyph code assigned to --fa
/// @example
/// @include theme-switch-mode('auto');
/// @include theme-switch-mode('light', '\f185');
@mixin theme-switch-mode($mode, $icon: null) {
[data-theme-mode='#{$mode}'] & {
@if $icon != null {
--fa: '#{$icon}';
}
animation: #{$prefix}theme-switch-#{$mode} $theme-switch-animation-duration $theme-switch-animation-easing;
}
}
/// Generate one theme-switch keyframes block from a compact parameter list.
/// The final state is intentionally shared so all modes settle on the same resting pose.
/// @param {String} $name - Animation suffix used in the generated keyframes name
/// @param {Angle} $from-rotate - Initial rotation angle
/// @param {Number} $from-scale - Initial icon scale
/// @param {Number} $from-opacity - Initial icon opacity
/// @param {String} $mid-step - Intermediate keyframe percentage such as 55% or 60%
/// @param {Angle} $mid-rotate - Intermediate rotation angle
/// @param {Number} $mid-scale - Intermediate icon scale
@mixin theme-switch-keyframes($name, $from-rotate, $from-scale, $from-opacity, $mid-step, $mid-rotate, $mid-scale) {
@keyframes #{$prefix}theme-switch-#{$name} {
0% {
transform: rotate($from-rotate) scale($from-scale);
opacity: $from-opacity;
}
#{$mid-step} {
transform: rotate($mid-rotate) scale($mid-scale);
opacity: 1;
}
100% {
transform: rotate(225deg) scale(1);
opacity: 1;
}
}
}
assets/css/_core/_mixin/_theme-vars.scss
+21 -33
View File
@@ -39,55 +39,43 @@
}
}
/// Batch set theme color variables using global $theme-colors
/// Generates light theme (in :root) and dark theme ([data-theme=dark]) variables
@mixin set-theme-colors() {
// Light theme (in :root)
@at-root :root {
@each $name, $value in $theme-colors {
#{$rootPrefix}#{$name}: #{$value};
}
/// Dark mode content wrapper
/// - Explicit dark mode: [data-theme-mode='dark']
/// - Auto mode with system dark preference: [data-theme-mode='auto'] + prefers-color-scheme
@mixin dark-mode {
[data-theme-mode='dark'] & {
@content;
}
// Dark theme
@at-root [data-theme=dark] {
@each $name, $value in $theme-colors {
#{$rootPrefix}#{$name}: #{darken($value, 5%)};
@media (prefers-color-scheme: dark) {
:root[data-theme-mode='auto'] & {
@content;
}
}
}
/// Define a single theme variable (generate definitions for both light and dark)
/// @param {String} $name - CSS variable name (without prefix)
/// @param {Map} $vars -- Variable map, key is CSS variable name, value is Map(light: $light-val, dark: $dark-val)
/// @example
/// @include define-theme-var(header-background-color, (light: rgba($header-background-color, 0.7), dark: rgba($header-background-color-dark, 0.5)));
@mixin define-theme-var($name, $vars) {
#{$rootPrefix}#{$name}: #{map-get($vars, light)};
[data-theme=dark] & {
#{$rootPrefix}#{$name}: #{map-get($vars, dark)};
/// Batch set theme color variables using global $theme-colors
/// Values are emitted via light-dark() and switched by CSS color-scheme.
@mixin set-theme-colors() {
// Light/Dark in one declaration (driven by color-scheme)
@at-root :root {
@each $name, $value in $theme-colors {
#{$rootPrefix}#{$name}: light-dark(#{$value}, #{darken($value, 5%)});
}
}
}
}
/// Define dual-theme variables (generate definitions for both light and dark simultaneously)
/// Define dual-theme variables with light-dark()
/// @param {Map} $vars - Variable map, key is CSS variable name, value is Map(light: $light-val, dark: $dark-val)
/// @example
/// @include define-theme-vars((
/// global-background-color: (light: $global-background-color, dark: $global-background-color-dark)
/// ));
@mixin define-theme-vars($vars) {
// Light theme (in :root)
// Light/Dark in one declaration (driven by color-scheme)
@at-root :root {
@each $name, $values in $vars {
#{$rootPrefix}#{$name}: #{map-get($values, light)};
}
}
// Dark theme
@at-root [data-theme=dark] {
@each $name, $values in $vars {
#{$rootPrefix}#{$name}: #{map-get($values, dark)};
#{$rootPrefix}#{$name}: light-dark(#{map-get($values, light)}, #{map-get($values, dark)});
}
}
}
assets/css/_core/_root.scss
+12 -2
View File
@@ -16,6 +16,15 @@
:root {
interpolate-size: allow-keywords;
color-scheme: light dark;
&[data-theme-mode='light'] {
color-scheme: light;
}
&[data-theme-mode='dark'] {
color-scheme: dark;
}
// ----------------------------------------
// Theme-Independent Variables
@@ -79,7 +88,7 @@
global-background-color: (light: $global-background-color, dark: $global-background-color-dark),
global-font-color: (light: $global-font-color, dark: $global-font-color-dark),
global-font-secondary-color: (light: $global-font-secondary-color, dark: $global-font-secondary-color-dark),
global-placeholder-color: (light: $global-placeholder-color, dark: $global-placeholder-color-dark),
global-font-tertiary-color: (light: $global-font-tertiary-color, dark: $global-font-tertiary-color-dark),
global-link-color: (light: $global-link-color, dark: $global-link-color-dark),
global-link-hover-color: (light: $global-link-hover-color, dark: $global-link-hover-color-dark),
global-border-color: (light: $global-border-color, dark: $global-border-color-dark),
@@ -117,6 +126,7 @@
single-link-hover-color: (light: $single-link-hover-color, dark: $single-link-hover-color-dark),
table-background-color: (light: $table-background-color, dark: $table-background-color-dark),
table-thead-color: (light: $table-thead-color, dark: $table-thead-color-dark),
table-border-color: (light: $table-border-color, dark: $table-border-color-dark),
blockquote-color: (light: $blockquote-color, dark: $blockquote-color-dark),
reward-color: (light: $reward-color, dark: $reward-color-dark),
@@ -128,7 +138,7 @@
code-inline-background-color: (light: rgba(175, 184, 193, 0.2), dark: rgba(99, 110, 123, 0.4)),
code-block-background-color: (light: $code-background-color, dark: $code-background-color-dark),
code-header-color: (light: $code-header-color, dark: $code-header-color-dark),
code-header-background-color: (light: darken($code-background-color, 5%), dark: darken($code-background-color-dark, 5%)),
code-header-background-color: (light: $code-header-background-color, dark: $code-header-background-color-dark),
code-highlight-color: (light: $code-highlight-color, dark: $code-highlight-color-dark),
gist-meta-background-color: (light: darken($code-background-color, 5%), dark: darken($code-background-color-dark, 5%)),
));
assets/css/_core/_widgets/_cell-tooltip.scss
+2 -7
View File
@@ -1,11 +1,6 @@
body {
.cell-tooltip {
--tooltip-bg: #ffffff;
--tooltip-color: #0f172a;
[data-theme=dark] & {
--tooltip-bg: #39393c;
--tooltip-color: #e2e2e6;
}
--tooltip-bg: light-dark(#ffffff, #39393c);
--tooltip-color: light-dark(#0f172a, #e2e2e6);
}
}
assets/css/_core/_widgets/_cookieconsent.scss
+1 -5
View File
@@ -5,11 +5,7 @@
&:hover,
&:focus {
background-color: #ccc;
[data-theme=dark] & {
background-color: #444;
}
background-color: light-dark(#ccc, #444);
}
}
}
assets/css/_core/_widgets/_details.scss
+1 -1
View File
@@ -8,7 +8,7 @@
}
i.details-icon {
color: fixit-var(secondary);
color: fixit-var(global-font-secondary-color);
transition: all 0.2s ease;
&:hover {
assets/css/_core/_widgets/_fixed-button.scss
+3 -11
View File
@@ -12,14 +12,10 @@
font-size: 1rem;
line-height: 1.5rem;
padding: 0.5rem 0.625rem;
color: fixit-var(secondary);
background-color: #f1f1f1;
color: fixit-var(global-font-secondary-color);
transition: color 0.4s ease;
@include border-radius(full);
[data-theme=dark] & {
background-color: #1e1e1f;
}
background-color: light-dark(#f1f1f1, #1e1e1f);
&:hover,
&:active {
@@ -45,16 +41,12 @@
// Ring stroke width
b2t-stroke: 0.5rem,
// Progress color
b2t-prog: fixit-var(success),
b2t-prog: light-dark(fixit-var(success), fixit-var(global-font-color)),
// dasharray = circumference = 2πr
// dashoffset = circumference * (1 - scrollPercent / 100)
b2t-dasharray: 314.15
));
[data-theme=dark] & {
@include set-fixit-var(b2t-prog, fixit-var(global-font-color));
}
// SVG circular progress ring
svg {
position: absolute;
assets/css/_core/_widgets/_reading-progress.scss
+4 -5
View File
@@ -1,14 +1,13 @@
.reading-progress-bar {
height: fixit-var(progress-h, 2px);
width: fixit-var(progress, 0);
background-color: fixit-var(bg-progress, fixit-var(success));
background-color: light-dark(
fixit-var(bg-progress, fixit-var(success)),
fixit-var(bg-progress-dark, fixit-var(global-font-color))
);
position: fixed;
@include z-index(fixed);
[data-theme=dark] & {
background-color: fixit-var(bg-progress-dark, fixit-var(global-font-color));
}
@include media('print') {
display: none !important;
}
assets/css/_page/_archive/_tags.scss
+8 -6
View File
@@ -20,7 +20,7 @@
}
sup {
color: fixit-var(secondary);
color: fixit-var(global-font-secondary-color);
}
}
}
@@ -49,11 +49,13 @@
@for $grade from 0 through 10 {
&[data-grade="#{$grade}"] {
@include set-fixit-var(tag-cloud-color, mix($tag-cloud-end, $tag-cloud-start, $grade * 10));
[data-theme=dark] & {
@include set-fixit-var(tag-cloud-color, mix($tag-cloud-end-dark, $tag-cloud-start-dark, $grade * 10));
}
@include set-fixit-var(
tag-cloud-color,
light-dark(
mix($tag-cloud-end, $tag-cloud-start, $grade * 10),
mix($tag-cloud-end-dark, $tag-cloud-start-dark, $grade * 10)
)
);
}
}
}
assets/css/_page/_archive/_terms.scss
+1 -1
View File
@@ -63,7 +63,7 @@
.archive-item-date {
text-align: right;
color: fixit-var(secondary);
color: fixit-var(global-font-secondary-color);
white-space: nowrap;
@extend .variant-numeric;
}
assets/css/_page/_home.scss
+5 -10
View File
@@ -10,13 +10,9 @@
width: 8rem;
height: auto;
margin: 0 auto;
box-shadow: 0 0 0 0.3618em rgba(0, 0, 0, 0.05);
transition: all 0.4s ease;
@include border-radius(full);
[data-theme=dark] & {
box-shadow: 0 0 0 0.3618em rgba(255, 255, 255, 0.05);
}
box-shadow: 0 0 0 0.3618em light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
&:hover {
position: relative;
@@ -62,7 +58,7 @@
font-weight: normal;
margin: 0;
padding: 0.5rem;
color: fixit-var(secondary);
color: fixit-var(global-font-secondary-color);
}
}
}
@@ -77,6 +73,7 @@
}
.summary {
position: relative;
padding-block: 1rem;
color: fixit-var(global-font-color);
@@ -129,12 +126,12 @@
.content {
margin-top: 0.3rem;
color: fixit-var(global-placeholder-color);
color: fixit-var(global-font-tertiary-color);
@include link(false, true);
b,
strong {
color: fixit-var(global-placeholder-color);
color: fixit-var(global-font-tertiary-color);
}
}
@@ -144,12 +141,10 @@
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
@include link(false, false);
.post-tags {
padding: 0;
@include link(true, true);
.post-tag:not(:last-child)::after {
assets/css/_page/_index.scss
-1
View File
@@ -1,5 +1,4 @@
.page {
position: relative;
padding-inline: 0.5rem;
@extend %page-style;
assets/css/_page/_single/_alert.scss
+4 -13
View File
@@ -27,22 +27,13 @@
}
@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: map-get($item, border-color),
alert-color: map-get($item, color)
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))
));
}
}
[data-theme=dark] & {
@each $type, $item in $alert-color-map-dark {
&.alert-#{$type} {
@include set-fixit-vars((
alert-border-color: map-get($item, border-color),
alert-color: map-get($item, color)
));
}
}
}
}
assets/css/_page/_single/_code-syntax/_index.scss
+1 -1
View File
@@ -23,7 +23,7 @@
@import 'light';
[data-theme=dark] & {
@include dark-mode {
@import 'dark';
}
}
assets/css/_page/_single/_code.scss
+29 -35
View File
@@ -26,10 +26,6 @@ pre {
line-height: inherit;
min-width: max-content;
@include border-radius(0);
[data-theme=dark] & {
background-color: transparent;
}
}
img {
@@ -80,6 +76,7 @@ pre {
.lntable {
overflow: auto;
overscroll-behavior-x: none;
display: block;
background-color: fixit-var(code-block-background-color);
@include border-radius;
@@ -120,7 +117,7 @@ pre {
// Line numbers
.lnt,
.ln {
color: fixit-var(secondary);
color: fixit-var(global-font-secondary-color);
@include user-select(none);
}
@@ -321,22 +318,13 @@ pre {
bottom: 0;
background: linear-gradient(
180deg,
rgba($code-background-color, 0) 0%,
rgba($code-background-color, 0.9) 60%,
$code-background-color 100%
light-dark(rgba($code-background-color, 0), rgba($code-background-color-dark, 0)) 0%,
light-dark(rgba($code-background-color, 0.9), rgba($code-background-color-dark, 0.9)) 60%,
light-dark($code-background-color, $code-background-color-dark) 100%
);
@include z-index(base);
@include border-radius(bottom);
[data-theme=dark] & {
background: linear-gradient(
180deg,
rgba($code-background-color-dark, 0) 0%,
rgba($code-background-color-dark, 0.9) 60%,
$code-background-color-dark 100%
);
}
.fa-angles-down {
opacity: 0;
animation-name: fadeOutDown;
@@ -355,12 +343,11 @@ pre {
&.is-collapsed {
.code-header {
transition: border-radius 0.2s ease 0.2s;
@include set-fixit-var(code-header-background-color, darken($code-background-color, 6%));
@include border-radius;
[data-theme=dark] & {
@include set-fixit-var(code-header-background-color, darken($code-background-color-dark, 6%));
}
@include set-fixit-var(
code-header-background-color,
light-dark(darken($code-header-background-color, 1%), darken($code-header-background-color-dark, 1%))
);
+ .code-wrapper {
height: 0;
@@ -413,8 +400,18 @@ pre {
&.line-nos-hidden {
> .chroma .lntable {
width: 100%;
display: table;
overscroll-behavior-x: contain;
> tbody {
display: table;
width: 100%;
}
.lntd:last-child {
width: 100%;
}
}
.lntd:first-child,
.ln {
display: none;
@@ -459,7 +456,7 @@ pre {
min-width: calc(#{fixit-var(line-digit)} * 1ch);
padding-inline: 0.75rem;
flex-shrink: 0;
color: fixit-var(secondary);
color: fixit-var(global-font-secondary-color);
background-color: fixit-var(code-block-background-color);
}
@@ -478,7 +475,7 @@ pre {
// when line numbers shown
&:not(.line-nos-hidden) {
.lntd:last-child pre.chroma,
.lntd:last-child pre.chroma:not([contenteditable='true']),
.code-wrapper > pre.chroma:not(:has(.ln)) {
padding-left: 0;
}
@@ -486,11 +483,7 @@ pre {
// add border for non-classic mode
&:not([data-mode='classic']) {
border: 1px solid darken($code-background-color, 3%);
[data-theme=dark] & {
border-color: darken($code-background-color-dark, 3%);
}
border: 1px solid fixit-var(global-border-color-light);
}
&[data-mode='mac'] {
@@ -508,7 +501,7 @@ pre {
width: 12px;
@include border-radius(full);
[data-theme=dark] & {
@include dark-mode {
@include set-fixit-vars((
mac-red: #ff5f56,
mac-yellow: #febc2e,
@@ -571,7 +564,7 @@ pre {
background-color: fixit-var(gist-meta-background-color);
}
[data-theme=dark] & {
@include dark-mode {
@import './_code-syntax/github-dark-dimmed';
}
}
@@ -580,7 +573,7 @@ pre {
.code-tabs {
margin: 0.5rem 0;
background-color: fixit-var(code-block-background-color);
border: 1px solid fixit-var(global-border-color);
border: 1px solid fixit-var(global-border-color-light);
@include border-radius;
&[data-shadow='always'] {
@@ -610,6 +603,7 @@ pre {
color: fixit-var(code-header-color);
background-color: fixit-var(code-header-background-color);
position: sticky;
border-bottom: 1px solid fixit-var(global-border-color);
@include z-index(base, 1);
@include border-radius(top);
@include sticky-top-offset;
@@ -630,7 +624,7 @@ pre {
padding: 0.4rem 0.8rem;
cursor: pointer;
font-weight: bold;
color: fixit-var(secondary);
color: fixit-var(global-font-secondary-color);
white-space: nowrap;
@include user-select(none);
@include border-radius;
@@ -654,7 +648,7 @@ pre {
translate: 2px 2px;
width: calc(anchor-size(width) - 0.25rem);
height: calc(anchor-size(height) - 0.25rem);
box-shadow: inset 0 0 1rem 0.25rem color-mix(in srgb, fixit-var(secondary) 30%, transparent);
box-shadow: inset 0 0 1rem 0.25rem color-mix(in srgb, fixit-var(global-font-secondary-color) 30%, transparent);
pointer-events: none;
transition: 0.3s ease-in-out;
@include border-radius;
assets/css/_page/_single/_collections.scss
+15 -42
View File
@@ -1,16 +1,12 @@
// Collection Navigation
.collection-card {
font-size: 0.875rem;
background-color: darken($global-background-color, 3%);
margin-block: 1rem;
padding: 1rem 1.25rem;
position: relative;
@include border-radius(0.5rem);
@include user-select(none);
[data-theme=dark] & {
background-color: lighten($global-background-color-dark, 3%);
}
background-color: light-dark(darken($global-background-color, 4%), lighten($global-background-color-dark, 4%));
&:has(.collection-nav-item:nth-child(2))::before {
content: '';
@@ -19,16 +15,12 @@
bottom: 0.75rem;
width: 1px;
height: 2rem;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.03) 100%);
[data-theme=dark] & {
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.03),
rgba(255, 255, 255, 0.05) 50%,
rgba(255, 255, 255, 0.03) 100%
);
}
background: linear-gradient(
to bottom,
light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)),
light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08)) 50%,
light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)) 100%
);
}
.collection-title {
@@ -107,11 +99,7 @@
&.open {
.collection-summary {
background-color: darken($global-background-color, 4%);
[data-theme=dark] & {
background-color: lighten($global-background-color-dark, 4%);
}
background-color: light-dark(darken($global-background-color, 5%), lighten($global-background-color-dark, 5%));
}
}
@@ -120,12 +108,8 @@
align-items: baseline;
gap: 0.25em;
padding: 0.2em 0.5em;
background-color: darken($global-background-color, 3%);
background-color: light-dark(darken($global-background-color, 5%), lighten($global-background-color-dark, 5%));
[data-theme=dark] & {
background-color: lighten($global-background-color-dark, 3%);
}
> i.fa-layer-group {
flex-shrink: 0;
}
@@ -142,7 +126,7 @@
.collection-count {
flex-shrink: 0;
color: fixit-var(secondary);
color: fixit-var(global-font-secondary-color);
}
.details-icon {
@@ -154,11 +138,7 @@
.collection-content {
font-size: fixit-var(collection-list-font-size);
background-color: darken($global-background-color, 2%);
[data-theme=dark] & {
background-color: lighten($global-background-color-dark, 2%);
}
background-color: light-dark(darken($global-background-color, 3%), lighten($global-background-color-dark, 3%));
.collection-list {
margin: 0;
@@ -166,7 +146,8 @@
padding-block: 0.4em;
text-indent: -0.8em;
list-style: none;
overflow-y: scroll;
overflow-y: auto;
overscroll-behavior: contain;
max-height: 60vh;
@include scrollbar-width(none, 0);
@@ -195,11 +176,7 @@
align-items: center;
justify-content: center;
gap: 0.5em;
background-color: darken($global-background-color, 3%);
[data-theme=dark] & {
background-color: lighten($global-background-color-dark, 3%);
}
background-color: light-dark(darken($global-background-color, 5%), lighten($global-background-color-dark, 5%));
a.collection-nav-item {
padding-inline: 2px;
@@ -207,11 +184,7 @@
transition: background-color 0.3s ease-out;
&:hover {
background-color: darken($global-background-color, 10%);
[data-theme=dark] & {
background-color: lighten($global-background-color-dark, 10%);
}
background-color: light-dark(darken($global-background-color, 10%), lighten($global-background-color-dark, 10%));
}
}
assets/css/_page/_single/_color-preview.scss
+1 -5
View File
@@ -11,12 +11,8 @@
margin-right: 0.25em;
vertical-align: middle;
border: 1px solid;
border-color: fixit-var(color-preview-border-color, #d1d9e0b3);
pointer-events: none;
transform: translateY(-1px);
[data-theme=dark] & {
@include set-fixit-var(color-preview-border-color, #3d444db3);
}
border-color: light-dark(#d1d9e0b3, #3d444db3);
}
}
assets/css/_page/_single/_diagram-copy-btn.scss
+4 -24
View File
@@ -14,35 +14,15 @@
line-height: 1;
padding: 0.5rem;
border: 1px solid;
color: fixit-var(dcb-color, #25292e);
border-color: fixit-var(dcb-border-color, #d1d9e0);
background-color: fixit-var(dcb-background-color, #f6f8fa);
box-shadow: fixit-var(dcb-box-shadow, 0px 1px 0px 0px #1f23280a);
color: light-dark(#25292e, #d1d7e0);
border-color: light-dark(#d1d9e0, #3d444d);
background-color: light-dark(#f6f8fa, #2a313c);
@include user-select(none);
@include border-radius;
@include z-index(base);
[data-theme=dark] & {
@include set-fixit-vars((
dcb-color: #d1d7e0,
dcb-border-color: #3d444d,
dcb-background-color: #2a313c,
dcb-box-shadow: 0px 0px 0px 0px #000000,
));
}
&:hover {
@include set-fixit-vars((
dcb-border-color: #d1d9e0,
dcb-background-color: #eff2f5,
));
[data-theme=dark] & {
@include set-fixit-vars((
dcb-border-color: #3d444d,
dcb-background-color: #2f3742,
));
}
background-color: light-dark(darken(#f6f8fa, 3%), darken(#2a313c, 3%));
}
.fa-clone {
assets/css/_page/_single/_fixit-decryptor.scss
+5 -7
View File
@@ -22,14 +22,12 @@
&:active,
&:focus,
&:hover {
color: darken($global-link-hover-color, 6%);
color: light-dark(darken($global-link-hover-color, 6%), lighten($global-link-hover-color-dark, 6%));
border-color: fixit-var(global-link-hover-color);
box-shadow: 0px 0px 5px 0px lighten($global-link-hover-color, 20%);
[data-theme=dark] & {
color: lighten($global-link-hover-color-dark, 6%);
box-shadow: 0px 0px 5px 0px darken($global-link-hover-color-dark, 20%);
}
box-shadow: 0px 0px 5px 0px light-dark(
lighten($global-link-hover-color, 20%),
darken($global-link-hover-color-dark, 20%)
);
}
}
assets/css/_page/_single/_footer.scss
+3 -3
View File
@@ -15,14 +15,14 @@
.post-info-mod {
font-size: 0.8em;
color: fixit-var(secondary);
color: fixit-var(global-font-secondary-color);
@include link(false, false);
}
.post-info-license {
font-size: 0.8em;
color: fixit-var(secondary);
color: fixit-var(global-font-secondary-color);
@include link(false, false);
}
@@ -37,7 +37,7 @@
content: '|';
margin-left: 0.25rem;
margin-right: 0.25rem;
color: fixit-var(secondary);
color: fixit-var(global-font-secondary-color);
}
}
assets/css/_page/_single/_index.scss
+33 -48
View File
@@ -45,7 +45,7 @@
.post-meta {
font-size: 0.875rem;
color: fixit-var(secondary);
color: fixit-var(global-font-secondary-color);
span {
display: inline-block;
@@ -95,9 +95,10 @@
content: attr(data-end-flag);
display: block;
text-align: center;
font-size: 15px;
padding: 5px;
color: fixit-var(global-placeholder-color);
font-size: 0.875em;
padding: 0.25rem;
color: fixit-var(global-font-tertiary-color);
opacity: 0.8;
}
hr {
@@ -167,10 +168,7 @@
line-height: 1.25;
margin-top: 1.5rem;
margin-bottom: 1rem;
[data-theme=dark] & {
font-weight: bolder;
}
font-weight: light-dark(bold, bolder);
&:hover,
&:target {
@@ -199,11 +197,7 @@
b,
strong {
font-weight: bold;
[data-theme=dark] & {
color: #ddd;
}
@include bold-dark;
}
@include link(false, false);
@@ -214,9 +208,7 @@
b,
strong {
[data-theme=dark] & {
color: inherit;
}
color: inherit;
}
}
@@ -234,7 +226,7 @@
}
li::marker {
color: fixit-var(secondary);
color: fixit-var(global-font-secondary-color);
}
li:hover::marker {
color: fixit-var(single-link-hover-color);
@@ -251,7 +243,7 @@
}
}
li[data-task='x'] {
@include set-fixit-var(checkbox-color, fixit-var(secondary));
@include set-fixit-var(checkbox-color, fixit-var(global-font-secondary-color));
.checkbox-icon {
opacity: 0.6;
@@ -260,7 +252,7 @@
li[data-task='-'] {
opacity: 0.6;
text-decoration: line-through rgba(145, 145, 145, 0.6);
@include set-fixit-var(task-color, fixit-var(secondary));
@include set-fixit-var(task-color, fixit-var(global-font-secondary-color));
}
li[data-task='/'] {
@include set-fixit-var(task-color, fixit-var(success));
@@ -285,7 +277,7 @@
background-color: fixit-var(code-block-background-color);
rt {
color: fixit-var(secondary);
color: fixit-var(global-font-secondary-color);
}
}
@@ -308,15 +300,20 @@
.table-wrapper {
position: relative;
overflow-x: auto;
overflow-y: hidden;
margin: 0.5rem 0;
background: fixit-var(table-background-color);
border: 1px solid fixit-var(table-border-color);
@include border-radius;
@include set-fixit-var(scrollbar-thumb-color, fixit-var(table-background-color));
> table {
width: 100%;
max-width: 100%;
margin: 0.625rem 0;
margin: 0;
border-spacing: 0;
background: fixit-var(table-background-color);
border-collapse: collapse;
border-collapse: separate;
thead {
background: fixit-var(table-thead-color);
@@ -324,30 +321,27 @@
&:not([class]) tbody {
& tr:nth-child(odd) {
background: darken($table-background-color, 2.25%);
[data-theme=dark] & {
background-color: lighten($table-background-color-dark, 2.75%);
}
background: light-dark(darken($table-background-color, 2.25%), lighten($table-background-color-dark, 2.75%));
}
& tr:hover {
background: darken($table-background-color, 4.5%);
[data-theme=dark] & {
background-color: lighten($table-background-color-dark, 5.5%);
}
background: light-dark(darken($table-background-color, 4.5%), lighten($table-background-color-dark, 5.5%));
}
}
th,
td {
padding: 0.3rem 1rem;
border: 1px solid darken($table-thead-color, 2%);
border-right: 1px solid fixit-var(table-border-color);
border-bottom: 1px solid fixit-var(table-border-color);
}
[data-theme=dark] & {
border-color: darken($table-thead-color-dark, 2%);
}
tr > :last-child {
border-right: none;
}
> :last-child > tr:last-child > * {
border-bottom: none;
}
}
}
@@ -406,29 +400,20 @@
sup[id^='fnref']:has(.footnote-ref) {
padding: 2px 4px;
background-color: rgba(238, 238, 238, 0.7);
color: #555555;
background-color: light-dark(rgba(238, 238, 238, 0.7), rgba(56, 139, 253, 0.1));
color: light-dark(#555555, #58a6ff);
cursor: pointer;
@include border-radius(0.25rem);
[data-theme=dark] & {
background-color: rgba(56, 139, 253, 0.1);
color: #58a6ff;
}
@include link(true, false);
}
.footnotes {
font-size: 0.75rem;
white-space: normal;
color: #a3a3ae;
color: light-dark(#a3a3ae, #9d9d9f);
@include link(false, true);
[data-theme=dark] & {
color: #9d9d9f;
}
ol {
margin-block: 1em;
padding-left: 1rem;
assets/css/_page/_single/_related.scss
+3 -2
View File
@@ -30,7 +30,7 @@
.related-count {
flex-shrink: 0;
color: fixit-var(secondary);
color: fixit-var(global-font-secondary-color);
}
.details-icon {
@@ -49,7 +49,8 @@
padding-block: 0.4em;
text-indent: -0.8em;
list-style: none;
overflow-y: scroll;
overflow-y: auto;
overscroll-behavior: contain;
max-height: 60vh;
@include scrollbar-width(none, 0);
assets/css/_page/_single/_reward.scss
+3 -11
View File
@@ -51,11 +51,7 @@
background-color: fixit-var(global-background-color);
@include z-index(fixed);
@include border-radius;
box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.2);
[data-theme=dark] & {
box-shadow: 0 0 1.5rem 0 rgba(255, 255, 255, 0.2);
}
box-shadow: 0 0 1.5rem 0 light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
}
}
@@ -65,13 +61,13 @@
cursor: pointer;
outline: none;
color: fixit-var(reward-color, lighten($reward-color, 5%));
border: 2px solid lighten($reward-color, 10%);
border: 2px solid light-dark(lighten($reward-color, 10%), lighten($reward-color, 5%));
padding: 0.6rem 1rem;
background-color: fixit-var(global-background-color);
vertical-align: text-top;
line-height: 1rem;
@include border-radius;
transition: all 0.3s ease-out;
@include border-radius;
&:active,
&:hover {
@@ -79,10 +75,6 @@
border-color: fixit-var(reward-color);
background-color: fixit-var(reward-color);
}
[data-theme=dark] & {
border-color: lighten($reward-color, 5%);
}
}
@include media('print') {
assets/css/_page/_single/_shortcodes/_admonition.scss
+1 -5
View File
@@ -18,11 +18,7 @@
strong {
font-weight: bolder;
text-shadow: 0 0.05rem 0.05rem rgba(0, 0, 0, 0.2);
[data-theme=dark] & {
text-shadow: 0 0.05rem 0.05rem rgba(255, 255, 255, 0.2);
}
text-shadow: light-dark(0 0.05rem 0.05rem rgba(0, 0, 0, 0.2), 0 0.05rem 0.05rem rgba(255, 255, 255, 0.2));
}
// title-only admonition without content
assets/css/_page/_single/_shortcodes/_cardlink.scss
+2 -8
View File
@@ -34,7 +34,7 @@
align-items: center;
justify-content: space-between;
padding: 0.75rem;
background-color: rgba(245, 245, 245, 0.88);
background-color: light-dark(rgba(245, 245, 245, 0.88), rgba(61, 62, 65, 0.88));
}
&text {
@@ -58,7 +58,7 @@
align-items: center;
margin-top: 0.25rem;
font-size: 0.825rem;
color: fixit-var(secondary);
color: fixit-var(global-font-secondary-color);
}
&icon-link {
@@ -97,10 +97,4 @@
object-fit: cover;
@include border-radius(full);
}
[data-theme=dark] & {
&content {
background-color: rgba(61, 62, 65, 0.88);
}
}
}
assets/css/_page/_single/_shortcodes/_file-tree.scss
+4 -12
View File
@@ -8,11 +8,7 @@
transition: box-shadow 0.2s ease;
&:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
[data-theme=dark] & {
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}
box-shadow: 0 2px 8px light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
}
ul.file-tree {
@@ -26,11 +22,7 @@
&.file-tree-folder {
> .file-tree-toggle {
cursor: pointer;
font-weight: bold;
[data-theme=dark] & {
color: #ddd;
}
@include bold-dark;
&:hover {
i,
@@ -79,7 +71,7 @@
translate: 0 -50%;
width: 0.75rem;
height: 1px;
background-color: fixit-var(secondary);
background-color: fixit-var(global-font-secondary-color);
}
}
}
@@ -96,7 +88,7 @@
bottom: 0.625rem;
left: calc(1rem - 0.5px);
width: 1px;
background-color: fixit-var(secondary);
background-color: fixit-var(global-font-secondary-color);
height: fixit-var(file-tree-line-height);
}
}
assets/css/_page/_single/_shortcodes/_instagram.scss
+1 -1
View File
@@ -1,5 +1,5 @@
iframe.instagram-media {
[data-theme=dark] & {
@include dark-mode {
border: none !important;
}
}
assets/css/_page/_single/_shortcodes/_mermaid.scss
+2 -2
View File
@@ -21,7 +21,7 @@
}
.mermaid {
[data-theme=dark] & {
@include dark-mode {
height: 0;
padding: 0;
}
@@ -31,7 +31,7 @@
height: 0;
padding: 0;
[data-theme=dark] & {
@include dark-mode {
height: auto;
padding: 0.5rem 0.75rem;
}
assets/css/_page/_single/_shortcodes/_tabs.scss
+19 -25
View File
@@ -246,19 +246,11 @@ tab-container {
color: #ffffff;
background-color: fixit-var(primary);
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
[data-theme=dark] & {
background-color: fixit-var(primary);
box-shadow: 0 0.125rem 0.5rem rgba(255, 255, 255, 0.3);
}
box-shadow: 0 0.125rem 0.5rem light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3));
}
&[aria-selected='false']:hover {
background-color: rgba(175, 184, 193, 0.4);
[data-theme=dark] & {
background-color: rgba(99, 110, 123, 0.6);
}
background-color: light-dark(rgba(175, 184, 193, 0.4), rgba(99, 110, 123, 0.6));
}
}
@@ -476,6 +468,7 @@ tab-container {
}
&::part(tablist-tab-wrapper) {
position: relative;
padding: 0.25rem;
background-color: fixit-var(code-block-background-color);
@include border-radius;
@@ -490,7 +483,6 @@ tab-container {
font-weight: 400;
flex-grow: 1;
@include z-index(base);
@include tab-button-size;
@include border-radius;
@@ -500,27 +492,33 @@ tab-container {
}
&[aria-selected='true'] {
anchor-name: #{$rootPrefix}tab-segment-active;
background-color: transparent;
box-shadow: none;
}
}
&:not(:has(> .tab-button:hover)) > .tab-button[aria-selected='true'],
> .tab-button:hover {
anchor-name: #{$rootPrefix}tab-segment-active;
}
// Sliding active indicator via anchor positioning
&::part(tablist-tab-wrapper)::before {
content: '';
position: absolute;
pointer-events: none;
position-anchor: #{$rootPrefix}tab-segment-active;
inset: anchor(inside);
top: anchor(top);
left: anchor(left);
width: anchor-size(width);
height: anchor-size(height);
background-color: fixit-var(global-background-color);
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
transition: all 0.15s ease, top, bottom 0s;
transition:
top 0.3s ease,
left 0.3s ease,
width 0.3s ease,
height 0.3s ease;
box-shadow: 0 0.125rem 0.25rem light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
@include border-radius;
[data-theme=dark] & {
box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1);
}
}
}
}
@@ -623,11 +621,7 @@ tab-container .tab-panel:not([hidden]) {
> .tab-button {
&[aria-selected='true'] {
background-color: fixit-var(global-background-color);
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
[data-theme=dark] & {
box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1);
}
box-shadow: 0 0.125rem 0.25rem light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
}
}
}
assets/css/_page/_single/_shortcodes/_timeline.scss
+5 -5
View File
@@ -45,7 +45,7 @@ ul.#{$prefix}timeline {
.#{$prefix}timeline-item__timestamp {
font-size: 0.8125rem;
line-height: 1;
color: fixit-var(secondary);
color: fixit-var(global-font-secondary-color);
&.is-top {
margin-bottom: 0.25rem;
@@ -76,17 +76,17 @@ ul.#{$prefix}timeline {
top: 1.25rem;
transform: translateY(-50%);
left: 0;
text-align: center;
border-style: solid;
color: transparent;
width: fixit-var(timeline-circle-size);
height: fixit-var(timeline-circle-size);
font-size: fixit-var(timeline-circle-size);
line-height: fixit-var(timeline-circle-size);
text-align: center;
@include border-radius(full);
border-width: fixit-var(timeline-width);
border-style: solid;
border-color: fixit-var(timeline-circle-color);
background-color: fixit-var(global-background-color);
color: transparent;
@include border-radius(full);
@include z-index(base);
}
&::after {
assets/css/_page/_single/_toc.scss
+7 -7
View File
@@ -51,7 +51,7 @@
background-color: fixit-var(code-block-background-color);
rt {
color: fixit-var(secondary);
color: fixit-var(global-font-secondary-color);
}
}
}
@@ -120,7 +120,8 @@
}
.toc-content {
overflow-y: scroll;
overflow-y: auto;
overscroll-behavior: contain;
// TODO 这里计算错误，待重构使用 JS 计算
max-height: calc(100vh - #{2 * #{fixit-var(header-height)}});
@include scrollbar-width(none, 0);
@@ -203,11 +204,10 @@
&:not(.open) {
.toc-title {
@include set-fixit-var(code-header-background-color, darken($code-background-color, 6%));
[data-theme=dark] & {
@include set-fixit-var(code-header-background-color, darken($code-background-color-dark, 6%));
}
@include set-fixit-var(
code-header-background-color,
light-dark(darken($code-header-background-color, 1%), darken($code-header-background-color-dark, 1%))
);
}
}
assets/css/_page/_special/_search.scss
+3 -3
View File
@@ -15,7 +15,7 @@
margin: 0;
.gsc-input-box {
[data-theme=dark] & {
@include dark-mode {
border-color: #c2c2c2;
}
input {
@@ -28,12 +28,12 @@
#___gcse_0,
#___gcse_1 {
[data-theme=dark] & {
@include dark-mode {
filter: invert(1) hue-rotate(0.5turn);
}
}
#___gcse_1 img {
[data-theme=dark] & {
@include dark-mode {
filter: invert(1) hue-rotate(0.5turn) opacity(0.75);
}
}
assets/css/_variables.scss
+39 -29
View File
@@ -19,31 +19,31 @@ $global-border-radius: 5px !default;
// Color of the background
$global-background-color: #ffffff !default;
$global-background-color-dark: #292a2e !default;
$global-background-color-dark: #1f252d !default;
// Color of the text
$global-font-color: #161209 !default;
$global-font-color-dark: #b1b1ba !default;
$global-font-color: #1f2328 !default;
$global-font-color-dark: #b3bdcb !default;
// Color of the secondary text
$global-font-secondary-color: #8b949e !default;
$global-font-secondary-color-dark: #7d8792 !default;
// Color of the placeholder
$global-placeholder-color: #b1b1ba !default;
$global-placeholder-color-dark: #909092 !default;
// Color of the tertiary text
$global-font-tertiary-color: lighten($global-font-secondary-color, 12%) !default;
$global-font-tertiary-color-dark: darken($global-font-secondary-color-dark, 12%) !default;
// Color of the link
$global-link-color: #161209 !default;
$global-link-color-dark: #b1b1ba !default;
$global-link-color-dark: $global-font-color-dark !default;
// Color of the hover link
$global-link-hover-color: #2983bb !default; // 潮蓝
$global-link-hover-color-dark: #fff !default;
// Color of the border
$global-border-color: #e3e3e3 !default;
$global-border-color-dark: #454545 !default;
$global-border-color: #d7dee4 !default;
$global-border-color-dark: #383f47 !default;
// ========== Global ========== //
// ========== Scrollbar ========== //
@@ -65,15 +65,15 @@ $selection-color-dark: rgba(50, 112, 194, 0.4) !default;
$header-height: 3.5rem !default;
// Color of the header background
$header-background-color: #f7f7f8 !default;
$header-background-color-dark: #252627 !default;
$header-background-color: #f6f8fa !default;
$header-background-color-dark: #151b23 !default;
// Font style of the header title
$header-title-font-family: $global-font-family !default;
$header-title-font-size: 1.375rem !default;
// Color of the active menu item
$menu-active-color: #161209 !default;
$menu-active-color: $global-link-color !default;
$menu-active-color-dark: #fff !default;
// Border color of the menu item
@@ -84,13 +84,13 @@ $menu-border-color-dark: #5454547a !default;
$submenu-height: $header-height * 0.5 !default;
// Color of the search background
$search-background-color: #e9e9e9 !default;
$search-background-color-dark: #363636 !default;
$search-background-color: #e9eaed !default;
$search-background-color-dark: #202833 !default;
// ========== Header ========== //
// ========== Tag Cloud ========== //
// Color range of tag cloud
$tag-cloud-start: #b1b1ba !default;
$tag-cloud-start: $global-font-color-dark !default;
$tag-cloud-end: $global-font-color !default;
$tag-cloud-start-dark: #909092 !default;
$tag-cloud-end-dark: $global-font-color-dark !default;
@@ -118,12 +118,16 @@ $single-link-hover-color: #ea517f !default; // 莲瓣红
$single-link-hover-color-dark: #cc5595 !default; // 龙须红
// Color of the table background
$table-background-color: #fff !default;
$table-background-color-dark: #272c34 !default;
$table-background-color: #f9fbfe !default;
$table-background-color-dark: #26303a !default;
// Color of the table thead
$table-thead-color: #ededed !default;
$table-thead-color-dark: #20252b !default;
$table-thead-color: #e3ebf4 !default;
$table-thead-color-dark: #3a4653 !default;
// Color of the table border
$table-border-color: #d4dee8 !default;
$table-border-color-dark: #4b5867 !default;
// Color of the blockquote
$blockquote-color: #697681 !default;
@@ -140,7 +144,7 @@ $reward-img-width: 180px !default;
// ========== Pagination ========== //
// Color of the link in pagination
$pagination-link-color: #bfbfbf !default;
$pagination-link-color-dark: #b1b1ba !default;
$pagination-link-color-dark: $global-font-color-dark !default;
// Color of the hover link in pagination
$pagination-link-hover-color: #000 !default;
@@ -149,21 +153,27 @@ $pagination-link-hover-color-dark: #fff !default;
// ========== Code ========== //
// Color of the code
$code-color: #24292f !default;
$code-color-dark: #adbac7 !default;
$code-color: #26323d !default;
$code-color-dark: #c5d1dc !default;
// Color of the code header text
$code-header-color: #70808f !default;
$code-header-color-dark: #99a7b5 !default;
// Color of the code header background
$code-header-background-color: #dde6ef !default;
$code-header-background-color-dark: #161f28 !default;
// Color of the code background
$code-background-color: #f4f6f8 !default;
$code-background-color-dark: #2d333b !default;
$code-background-color: #f3f7fb !default;
$code-background-color-dark: #2a333d !default;
// Color of the code error
$code-error-color: #dc3545 !default;
// Color of the highlight code
$code-highlight-color: #fff8c5 !default;
$code-highlight-color-dark: rgba(174, 124, 20, 0.15) !default;
$code-header-color: #7d7d7d !default;
$code-header-color-dark: #b1b0b0 !default;
$code-highlight-color: #fff2b8 !default;
$code-highlight-color-dark: rgba(191, 144, 32, 0.28) !default;
// Font size of the code
$code-font-size: 0.875em !default;