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
197 lines
6.3 KiB
SCSS
197 lines
6.3 KiB
SCSS
// ==========================================================================
|
|
// SCSS Variables
|
|
// Note: These SCSS variables are now also defined as CSS custom properties
|
|
// in _core/_root.scss for runtime theme switching and runtime customization.
|
|
// ==========================================================================
|
|
|
|
// ========== Global ========== //
|
|
$prefix: fi- !default;
|
|
$rootPrefix: --#{$prefix} !default;
|
|
|
|
// Font and Line Height
|
|
$global-font-family: system-ui, -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei UI, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif !default;
|
|
$global-font-size: 16px !default;
|
|
$global-font-weight: 400 !default;
|
|
$global-line-height: 1.5rem !default;
|
|
|
|
// Radius of the border
|
|
$global-border-radius: 5px !default;
|
|
|
|
// Color of the background
|
|
$global-background-color: #ffffff !default;
|
|
$global-background-color-dark: #1f252d !default;
|
|
|
|
// Color of the text
|
|
$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 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: $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: #d7dee4 !default;
|
|
$global-border-color-dark: #383f47 !default;
|
|
// ========== Global ========== //
|
|
|
|
// ========== Scrollbar ========== //
|
|
// Color of the scrollbar
|
|
$scrollbar-color: #a6a6a6 !default;
|
|
|
|
// Color of the hover scrollbar
|
|
$scrollbar-hover-color: #7d7d7d !default;
|
|
// ========== Scrollbar ========== //
|
|
|
|
// ========== Selection ========== //
|
|
// Color of the selected text
|
|
$selection-color: rgba(53, 166, 247, 0.25) !default;
|
|
$selection-color-dark: rgba(50, 112, 194, 0.4) !default;
|
|
// ========== Selection ========== //
|
|
|
|
// ========== Header ========== //
|
|
// Height of the header
|
|
$header-height: 3.5rem !default;
|
|
|
|
// Color of the header background
|
|
$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: $global-link-color !default;
|
|
$menu-active-color-dark: #fff !default;
|
|
|
|
// Border color of the menu item
|
|
$menu-border-color: #3c3c3c1f !default;
|
|
$menu-border-color-dark: #5454547a !default;
|
|
|
|
// Height of the submenu item of desktop header
|
|
$submenu-height: $header-height * 0.5 !default;
|
|
|
|
// Color of the search background
|
|
$search-background-color: #e9eaed !default;
|
|
$search-background-color-dark: #202833 !default;
|
|
// ========== Header ========== //
|
|
|
|
// ========== Tag Cloud ========== //
|
|
// Color range of tag cloud
|
|
$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;
|
|
// ========== Tag Cloud ========== //
|
|
|
|
// ========== Single Content ========== //
|
|
// Font size of the TOC
|
|
$toc-title-font-size: 1rem !default;
|
|
$toc-content-font-size: 0.875rem !default;
|
|
|
|
// Font size of the Collection List
|
|
$collection-title-font-size: 1rem !default;
|
|
$collection-list-font-size: 0.875rem !default;
|
|
|
|
// Font size of the Related Content List
|
|
$related-title-font-size: 1rem !default;
|
|
$related-list-font-size: 0.875rem !default;
|
|
|
|
// Color of the single link
|
|
$single-link-color: #2376b7 !default; // 花青
|
|
$single-link-color-dark: #1781b5 !default; // 釉蓝
|
|
|
|
// Color of the hover single link
|
|
$single-link-hover-color: #ea517f !default; // 莲瓣红
|
|
$single-link-hover-color-dark: #cc5595 !default; // 龙须红
|
|
|
|
// Color of the table background
|
|
$table-background-color: #f9fbfe !default;
|
|
$table-background-color-dark: #26303a !default;
|
|
|
|
// Color of the table thead
|
|
$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;
|
|
$blockquote-color-dark: #9ba3aa !default;
|
|
|
|
// Color of reward
|
|
$reward-color: tomato !default;
|
|
$reward-color-dark: darken($reward-color, 5%) !default;
|
|
|
|
// Width of reward image
|
|
$reward-img-width: 180px !default;
|
|
// ========== Single Content ========== //
|
|
|
|
// ========== Pagination ========== //
|
|
// Color of the link in pagination
|
|
$pagination-link-color: #bfbfbf !default;
|
|
$pagination-link-color-dark: $global-font-color-dark !default;
|
|
|
|
// Color of the hover link in pagination
|
|
$pagination-link-hover-color: #000 !default;
|
|
$pagination-link-hover-color-dark: #fff !default;
|
|
// ========== Pagination ========== //
|
|
|
|
// ========== Code ========== //
|
|
// Color of the code
|
|
$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: #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: #fff2b8 !default;
|
|
$code-highlight-color-dark: rgba(191, 144, 32, 0.28) !default;
|
|
|
|
// Font size of the code
|
|
$code-font-size: 0.875em !default;
|
|
$code-block-font-size: 0.875rem !default;
|
|
|
|
// Font family of the code
|
|
$code-font-family: Source Code Pro, Menlo, Consolas, Monaco, monospace, $global-font-family !default;
|
|
// ========== Code ========== //
|
|
|
|
// ========== GitHub Corners ========== //
|
|
// Color of the GitHub Corners
|
|
$github-corner-color: white !default;
|
|
$github-corner-color-dark: black !default;
|
|
|
|
// Color of the GitHub Corners background
|
|
$github-corner-fill: $header-background-color-dark !default;
|
|
$github-corner-fill-dark: $header-background-color !default;
|
|
// ========== GitHub Corners ========== //
|
|
|
|
@import '_maps';
|