mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-08-24 15:28:57 +00:00
Cell
137 lines
6.3 KiB
SCSS
137 lines
6.3 KiB
SCSS
// ================================================================================
|
|
// CSS Custom Properties (CSS Variables)
|
|
// ================================================================================
|
|
// This file defines all CSS custom properties for the FixIt theme.
|
|
// Variables are organized into two main categories:
|
|
// 1. Theme-independent variables: fixed values (fonts, sizes, etc.)
|
|
// 2. Theme-dependent variables: color values that support light/dark themes
|
|
//
|
|
// Theme-dependent variables are further categorized into:
|
|
// - Core: Global layout and navigation colors
|
|
// - Page Content: Article and post content colors
|
|
// - Third-party: Extension and plugin colors
|
|
//
|
|
// These CSS variables enable runtime theme switching and customization.
|
|
// ================================================================================
|
|
|
|
:root {
|
|
interpolate-size: allow-keywords;
|
|
|
|
// ----------------------------------------
|
|
// Theme-Independent Variables
|
|
// ----------------------------------------
|
|
@include set-fixit-vars((
|
|
// Global Typography
|
|
global-font-family: $global-font-family,
|
|
global-font-size: $global-font-size,
|
|
global-font-weight: $global-font-weight,
|
|
global-line-height: $global-line-height,
|
|
global-scroll-margin-top: $global-scroll-margin-top,
|
|
global-border-radius: $global-border-radius,
|
|
|
|
// Header
|
|
header-height: $header-height,
|
|
header-title-font-family: $header-title-font-family,
|
|
header-title-font-size: $header-title-font-size,
|
|
submenu-height: $submenu-height,
|
|
|
|
// Single Content
|
|
toc-title-font-size: $toc-title-font-size,
|
|
toc-content-font-size: $toc-content-font-size,
|
|
collection-title-font-size: $collection-title-font-size,
|
|
collection-list-font-size: $collection-list-font-size,
|
|
related-title-font-size: $related-title-font-size,
|
|
related-list-font-size: $related-list-font-size,
|
|
reward-img-width: $reward-img-width,
|
|
|
|
// Code
|
|
code-font-size: $code-font-size,
|
|
code-block-font-size: $code-block-font-size,
|
|
code-font-family: $code-font-family,
|
|
code-error-color: $code-error-color,
|
|
|
|
// Scrollbar
|
|
scrollbar-track-color: transparent,
|
|
scrollbar-width: thin,
|
|
scrollbar-width-legacy: 12px,
|
|
|
|
// Other utilities
|
|
breadcrumb-height: 0px,
|
|
divider-edge-weak: linear-gradient(to right, transparent, fixit-var(divider-bg, #d0d0d5), transparent),
|
|
scroll-mt: calc(#{fixit-var(header-height)} + #{fixit-var(global-scroll-margin-top)}),
|
|
));
|
|
}
|
|
|
|
// ----------------------------------------
|
|
// Theme-Dependent Color Variables
|
|
// ----------------------------------------
|
|
|
|
// Theme colors variables
|
|
@include set-theme-colors;
|
|
|
|
// Core theme colors (global layout)
|
|
@include define-theme-vars((
|
|
// Global
|
|
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-placeholder-color: (light: $global-placeholder-color, dark: $global-placeholder-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),
|
|
global-border-color-light: (light: lighten($global-border-color, 5%), dark: darken($global-border-color-dark, 5%)),
|
|
global-border-color-weight: (light: darken($global-border-color, 5%), dark: lighten($global-border-color-dark, 5%)),
|
|
|
|
// Header
|
|
header-background-color: (light: $header-background-color, dark: $header-background-color-dark),
|
|
menu-active-color: (light: $menu-active-color, dark: $menu-active-color-dark),
|
|
menu-border-color: (light: $menu-border-color, dark: $menu-border-color-dark),
|
|
search-background-color: (light: $search-background-color, dark: $search-background-color-dark),
|
|
|
|
// Selection
|
|
selection-color: (light: $selection-color, dark: $selection-color-dark),
|
|
|
|
// Scrollbar
|
|
scrollbar-color: (light: $scrollbar-color, dark: $scrollbar-color),
|
|
scrollbar-hover-color: (light: $scrollbar-hover-color, dark: $scrollbar-hover-color),
|
|
scrollbar-thumb-color: (light: $scrollbar-color, dark: $scrollbar-color),
|
|
scrollbar-thumb-hover-color: (light: $scrollbar-hover-color, dark: $scrollbar-hover-color),
|
|
|
|
// Tag Cloud
|
|
tag-cloud-start: (light: $tag-cloud-start, dark: $tag-cloud-start-dark),
|
|
tag-cloud-end: (light: $tag-cloud-end, dark: $tag-cloud-end-dark),
|
|
|
|
// Pagination
|
|
pagination-link-color: (light: $pagination-link-color, dark: $pagination-link-color-dark),
|
|
pagination-link-hover-color: (light: $pagination-link-hover-color, dark: $pagination-link-hover-color-dark),
|
|
));
|
|
|
|
// Page content theme colors
|
|
@include define-theme-vars((
|
|
// Single Content
|
|
single-link-color: (light: $single-link-color, dark: $single-link-color-dark),
|
|
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),
|
|
blockquote-color: (light: $blockquote-color, dark: $blockquote-color-dark),
|
|
reward-color: (light: $reward-color, dark: $reward-color-dark),
|
|
|
|
// Divider
|
|
hr-active-color: (light: lighten($single-link-hover-color, 4%), dark: darken($global-link-hover-color-dark, 4%)),
|
|
|
|
// Code
|
|
code-color: (light: $code-color, dark: $code-color-dark),
|
|
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-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%)),
|
|
));
|
|
|
|
// Third-party component theme colors (extensions and plugins)
|
|
@include define-theme-vars((
|
|
// GitHub Corners
|
|
github-corner-color: (light: $github-corner-color, dark: $github-corner-color-dark),
|
|
github-corner-fill: (light: $github-corner-fill, dark: $github-corner-fill-dark),
|
|
));
|