diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 133ca484..7cde58bf 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -90,7 +90,7 @@ FixIt/ 2. **Mixin 使用**: 提高代码复用性 ```scss - @include border-radius($global-border-radius); + @include border-radius; @include transition(all 0.2s ease); @include blur; ``` diff --git a/apps/test/content/posts/exact-color-match-test.md b/apps/test/content/posts/color-preview-test.md similarity index 71% rename from apps/test/content/posts/exact-color-match-test.md rename to apps/test/content/posts/color-preview-test.md index e0b155b9..c1734d1e 100644 --- a/apps/test/content/posts/exact-color-match-test.md +++ b/apps/test/content/posts/color-preview-test.md @@ -1,5 +1,5 @@ --- -title: Exact Color Match Test +title: Color Preview Test date: 2025-08-17T17:20:00+08:00 collections: - Tests @@ -9,6 +9,10 @@ tags: - Color Preview --- +This post is a test post to preview the color syntax in Markdown. + + + ## 📝 Syntax | Color | Syntax | Example | Output | @@ -32,6 +36,17 @@ Pure color values (no leading/trailing characters): - `hsl(240, 100%, 50%)` - `hsl(120, 100%, 50%)` +Theme colors: + +| Type | Light | Dark | +| :-------: | :-------: | :-------: | +| Primary | `#1677ff` | `#0069fc` | +| Secondary | `#8b949e` | `#7d8792` | +| Success | `#52c41a` | `#49ad17` | +| Info | `#13c2c2` | `#11abab` | +| Warning | `#faad14` | `#efa105` | +| Danger | `#ff4d4f` | `#ff3436` | + ## ❌ Regular Code With leading or trailing characters: diff --git a/apps/test/content/posts/tabs-comprehensive-test.md b/apps/test/content/posts/tabs-comprehensive-test.md index 5adbd7e8..8d2ab0ba 100644 --- a/apps/test/content/posts/tabs-comprehensive-test.md +++ b/apps/test/content/posts/tabs-comprehensive-test.md @@ -2,7 +2,6 @@ title: Tabs Comprehensive Test Cases date: 2025-09-09T10:00:00+08:00 collections: - - Tests categories: - Shortcodes diff --git a/apps/test/content/posts/task-list-test.md b/apps/test/content/posts/task-list-test.md new file mode 100644 index 00000000..e69ec023 --- /dev/null +++ b/apps/test/content/posts/task-list-test.md @@ -0,0 +1,50 @@ +--- +title: Task List Rendering Test +date: 2026-02-28T08:54:02+08:00 +collections: + - Tests +categories: + - Markdown +tags: + - Task List +--- + +This post tests the rendering of task lists in Markdown. + + + +## Basic Task Lists + +- [ ] Unchecked Task +- [x] Checked Task +- Regular list item + +## Nested Task Lists (Bug Fix Verification) + +- [ ] Parent Task 1 + - [ ] Child Task 1.1 + - [x] Child Task 1.2 + - Regular list item +- [x] Parent Task 2 + - [ ] Child Task 2.1 + - [ ] Grandchild Task 2.1.1 + - [x] Grandchild Task 2.1.2 + +## Extended Task Lists (Custom Icons) + +- [-] Cancelled Task +- [/] In Progress Task +- [<] Scheduled Task +- [>] Rescheduled Task +- [!] Important Task +- [?] Question Task +- Regular list item + +## Mixed Content in List Items + +- [ ] Task with **bold** and _italic_ text +- [x] Task with `inline code` +- [ ] Task with [some link](https://github.com/hugo-fixit/FixIt) +- [ ] Multi-line task + that spans across multiple lines + and still renders correctly as a single list item. diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss index 5fbe2fe1..052d5365 100644 --- a/assets/css/_core/_base.scss +++ b/assets/css/_core/_base.scss @@ -1,14 +1,14 @@ @import "../../lib/normalize/normalize"; html { - font-family: $global-font-family; - font-weight: $global-font-weight; + font-family: fixit-var(global-font-family); + font-weight: fixit-var(global-font-weight); font-display: swap; - font-size: $global-font-size; - line-height: $global-line-height; + font-size: fixit-var(global-font-size); + line-height: fixit-var(global-line-height); width: 100%; scroll-behavior: smooth; - overflow: overlay; + overflow: auto; } @media screen and (prefers-reduced-motion: reduce) { @@ -18,22 +18,18 @@ html { } ::selection { - background-color: $selection-color; - - [data-theme='dark'] & { - background-color: $selection-color-dark; - } + background-color: fixit-var(selection-color); } body { - background-color: var(#{$rootPrefix}global-background-color); - color: var(#{$rootPrefix}global-font-color); + background-color: fixit-var(global-background-color); + color: fixit-var(global-font-color); @include overflow-wrap(break-word); } iframe { border: 0; - @include border-radius($global-border-radius); + @include border-radius; } [role='button'] { @@ -53,9 +49,11 @@ img { object-fit: cover; } -img,video { +img, +video { max-width: 100%; height: auto; + @include border-radius; } dialog { @@ -73,21 +71,14 @@ details { %code { padding: 0.2em 0.4em; margin: 0; - font-size: $code-font-size; - line-height: $code-font-size; - font-family: $code-font-family; - color: $code-color; - background-color: var(#{$rootPrefix}code-inline-background-color); + font-size: fixit-var(code-font-size); + line-height: fixit-var(code-font-size); + font-family: fixit-var(code-font-family); + color: fixit-var(code-color); + background-color: fixit-var(code-inline-background-color); text-decoration: inherit; - @include border-radius($global-border-radius); + @include border-radius; @include overflow-wrap(break-word); - @include line-break(auto); - - [data-theme='dark'] & { - color: $code-color-dark; - } } @include link(true, true); - -@import '../_widgets'; diff --git a/assets/css/_core/_common.scss b/assets/css/_core/_common.scss index e9e4fd7e..85bc87d8 100644 --- a/assets/css/_core/_common.scss +++ b/assets/css/_core/_common.scss @@ -41,7 +41,7 @@ @each $color, $value in $theme-colors { .text-#{$color} { - color: var(#{$rootPrefix}#{$color}) !important; + color: fixit-var(#{$color}) !important; } } @@ -54,3 +54,7 @@ .variant-numeric { font-variant-numeric: tabular-nums lining-nums; } + +.rounded-full { + @include border-radius(full); +} diff --git a/assets/css/_core/_index.scss b/assets/css/_core/_index.scss new file mode 100644 index 00000000..ebc5a7bd --- /dev/null +++ b/assets/css/_core/_index.scss @@ -0,0 +1,6 @@ +@import "_mixin"; +@import "_base"; +@import "_common"; +@import "_root"; +@import "_layout"; +@import '_widgets'; diff --git a/assets/css/_core/_breadcrumb.scss b/assets/css/_core/_layout/_breadcrumb.scss similarity index 66% rename from assets/css/_core/_breadcrumb.scss rename to assets/css/_core/_layout/_breadcrumb.scss index e7493bc1..32b01540 100644 --- a/assets/css/_core/_breadcrumb.scss +++ b/assets/css/_core/_layout/_breadcrumb.scss @@ -1,10 +1,10 @@ .breadcrumb-container { padding-inline: 1rem; font-size: 0.75rem; - background-color: var(#{$rootPrefix}global-background-color); + background-color: fixit-var(global-background-color); display: flex; gap: 0.5rem; - @include z-index(1); + @include z-index(sticky); @extend .print-d-none; &:has(~ main[data-reverse]) { @@ -20,7 +20,7 @@ &.sticky { position: sticky; - top: $header-height; + top: fixit-var(header-height); } .breadcrumb { @@ -29,13 +29,9 @@ padding: 0.5rem 0; margin: 0 auto; list-style: none; - border-bottom: 1px inset $global-border-color; + border-bottom: 1px inset fixit-var(global-border-color); @extend %page-style; - [data-theme='dark'] & { - border-bottom-color: $global-border-color-dark; - } - .breadcrumb-item { display: flex; @@ -43,11 +39,11 @@ content: attr(data-separator); display: inline-block; padding-inline: 0.5rem; - color: var(#{$rootPrefix}global-font-secondary-color); + color: fixit-var(global-placeholder-color); } &.active { - color: var(#{$rootPrefix}secondary); + color: fixit-var(secondary); } } } diff --git a/assets/css/_core/_footer.scss b/assets/css/_core/_layout/_footer.scss similarity index 74% rename from assets/css/_core/_footer.scss rename to assets/css/_core/_layout/_footer.scss index 6c97bb53..62ee7aa1 100644 --- a/assets/css/_core/_footer.scss +++ b/assets/css/_core/_layout/_footer.scss @@ -24,10 +24,6 @@ footer { color: #dc143c; animation: icon-animate 1.33s ease-in-out infinite; } - - .run-times { - font-variant-numeric: tabular-nums lining-nums; - } } } @@ -37,23 +33,23 @@ footer { @keyframes icon-animate { 0%, 100% { - @include transform(scale(1)); + transform: scale(1); } 10%, 30% { - @include transform(scale(0.9)); + transform: scale(0.9); } 20%, 40%, 60%, 80% { - @include transform(scale(1.1)); + transform: scale(1.1); } 50%, 70% { - @include transform(scale(1.1)); + transform: scale(1.1); } } diff --git a/assets/css/_core/_header.scss b/assets/css/_core/_layout/_header.scss similarity index 61% rename from assets/css/_core/_header.scss rename to assets/css/_core/_layout/_header.scss index 7553be2d..6eb539d9 100644 --- a/assets/css/_core/_header.scss +++ b/assets/css/_core/_layout/_header.scss @@ -1,19 +1,15 @@ header { width: 100%; - background-color: $header-background-color; - @include z-index(2); - @include transition(box-shadow 0.3s ease); + background-color: fixit-var(header-background-color); + @include z-index(fixed); + transition: box-shadow 0.3s ease; @extend .print-d-none; - [data-theme='dark'] & { - background-color: $header-background-color-dark; - } - &:hover { - @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.1)); + box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.1); - [data-theme='dark'] & { - @include box-shadow(0 0 1.5rem 0 rgba(255, 255, 255, 0.1)); + [data-theme=dark] & { + box-shadow: 0 0 1.5rem 0 rgba(255, 255, 255, 0.1); } } } @@ -27,22 +23,22 @@ header { } .header-title { - font-size: $header-title-font-size; - font-family: $header-title-font-family; + font-size: fixit-var(header-title-font-size); + font-family: fixit-var(header-title-font-family); font-weight: bold; margin-right: 0.5rem; min-width: 10%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - @include flex(10); + flex: 10; .logo { min-height: 1.5em; height: 1.5em; width: auto; vertical-align: top; - transform: translateY(calc(#{$header-height} / 2 - 50%)); + transform: translateY(calc(#{fixit-var(header-height)} / 2 - 50%)); } .header-title-text { @@ -64,11 +60,7 @@ header { list-style: none; margin: 0.25rem 0.5rem; height: 1px; - background-color: $menu-border-color; - - [data-theme='dark'] & { - background-color: $menu-border-color-dark; - } + background-color: fixit-var(menu-border-color); } .menu-item { @@ -77,7 +69,7 @@ header { .dropdown-icon { margin-left: 0.25rem; font-size: .875em; - color: var(#{$rootPrefix}global-font-color); + color: fixit-var(global-font-color); &.open::before { content: "\f078"; @@ -88,11 +80,7 @@ header { >.menu-link, >.nested-item>.menu-link { font-weight: bold; - color: $menu-active-color; - - [data-theme='dark'] & { - color: $menu-active-color-dark; - } + color: fixit-var(menu-active-color); } } @@ -101,12 +89,12 @@ header { } .menu-link i { - @include transform(perspective(1rem)); - @include transition(transform 0.4s ease); + transform: perspective(1rem); + transition: transform 0.4s ease; } .menu-link:hover i { - @include transform(perspective(1rem) translateZ(0.2rem)); + transform: perspective(1rem) translateZ(0.2rem); } } } @@ -119,12 +107,12 @@ header { box-sizing: border-box; height: 2.5rem; width: 1.25rem; - @include border-radius(0.5rem); border: none; outline: none; background-color: transparent; vertical-align: baseline !important; - @include transition(width 0.3s ease); + transition: width 0.3s ease; + @include border-radius(0.5rem); } @include placeholder(transparent); @@ -156,23 +144,15 @@ header { .open &, &.mobile { input { - color: var(#{$rootPrefix}global-font-color); - background-color: $search-background-color; + color: fixit-var(global-font-color); + background-color: fixit-var(search-background-color); padding: 0 2rem 0 2rem; } - [data-theme='dark'] & { - input { - background-color: $search-background-color-dark; - } - - @include placeholder($global-font-secondary-color-dark); - } - - @include placeholder($global-font-secondary-color); + @include placeholder; .search-button { - color: var(#{$rootPrefix}global-font-secondary-color); + color: fixit-var(global-placeholder-color); } .search-clear:hover { @@ -187,8 +167,8 @@ header { .theme-switch { i { - @include transform(rotate(225deg)); - @include transition(all 0.4s ease); + transform: rotate(225deg); + transition: all 0.4s ease; } } @@ -196,8 +176,8 @@ header { display: block; position: sticky; top: 0; - height: $header-height; - line-height: $header-height; + height: fixit-var(header-height); + line-height: fixit-var(header-height); box-sizing: border-box; [data-header-desktop='normal'] & { @@ -211,11 +191,11 @@ header { .header-wrapper { // use css native function to calculate max value - padding: 0 2rem 0 MAX(10vh, $header-height); + padding: 0 2rem 0 MAX(10vh, fixit-var(header-height)); height: 100%; &[data-github-corner='right'] { - padding-right: $header-height; + padding-right: fixit-var(header-height); } .header-title { @@ -231,15 +211,15 @@ header { > .menu-item { &:hover .sub-menu { display: block; - @include transform(translateX(-0.5rem)); + transform: translateX(-0.5rem); } &.theme-switch { &:hover i { - @include transform(rotate(45deg)); + transform: rotate(45deg); } } &.language-switch:hover .sub-menu { - @include transform(translateX(calc(1.75rem - 100%))); + transform: translateX(calc(1.75rem - 100%)); } } @@ -250,11 +230,7 @@ header { width: 0; margin: 0.125rem 0.25rem; padding: 0; - border-left: 1px dashed lighten($global-font-secondary-color, 15%); - - [data-theme='dark'] & { - border-left-color: darken($global-font-secondary-color-dark, 15%); - } + border-left: 1px dashed fixit-var(global-border-color); } } @@ -263,24 +239,22 @@ header { margin: 0; padding: 0.25rem 0; display: none; - top: calc(#{$header-height} - 0.75rem); - border-radius: $global-border-radius; - border: 1px solid $menu-border-color; - background-color: $header-background-color; + top: calc(#{fixit-var(header-height)} - 0.75rem); + border: 1px solid fixit-var(menu-border-color); + background-color: fixit-var(header-background-color); max-height: 60vh; overflow-y: auto; - @include transition(box-shadow 0.3s ease); - @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.1)); + @include border-radius; + transition: box-shadow 0.3s ease; + box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.1); - [data-theme='dark'] & { - background-color: $header-background-color-dark; - border-color: $menu-border-color-dark; - @include box-shadow(0 0 1.5rem 0 rgba(255, 255, 255, 0.1)); + [data-theme=dark] & { + box-shadow: 0 0 1.5rem 0 rgba(255, 255, 255, 0.1); } .menu-item { - height: $submenu-height; - line-height: $submenu-height; + height: fixit-var(submenu-height); + line-height: fixit-var(submenu-height); max-width: 15rem; white-space: nowrap; text-overflow: ellipsis; @@ -301,8 +275,8 @@ header { display: none; position: sticky; top: 0; - min-height: $header-height; - line-height: $header-height; + min-height: fixit-var(header-height); + line-height: fixit-var(header-height); [data-header-mobile='normal'] & { position: static; @@ -315,7 +289,7 @@ header { .header-wrapper { padding: 0 1rem; font-size: 1.125rem; - @include transition(margin-top 0.3s ease); + transition: margin-top 0.3s ease; .header-title { max-width: 80%; @@ -328,15 +302,11 @@ header { .menu-toggle { span { display: block; - background: $global-font-color; + background-color: fixit-var(global-font-color); width: 20px; height: 2px; - @include border-radius(3px); - @include transition(all 0.3s ease-in-out); - - [data-theme='dark'] & { - background: $global-font-color-dark; - } + @include border-radius(full); + transition: all 0.3s ease-in-out; } span:not(:last-child) { @@ -345,7 +315,7 @@ header { &.active { span:nth-child(1) { - @include transform(translateY(8px) rotate(45deg)); + transform: translateY(8px) rotate(45deg); } span:nth-child(2) { @@ -353,25 +323,23 @@ header { } span:nth-child(3) { - @include transform(translateY(-8px) rotate(-45deg)); + transform: translateY(-8px) rotate(-45deg); } } } } .menu { - background: $header-background-color; - border-top: 2px solid $global-border-color; + background-color: fixit-var(header-background-color); + border-top: 2px solid fixit-var(global-border-color); display: none; - overflow-y: overlay; + overflow-y: auto; max-height: 70vh; - @include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1)); + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1); @include scrollbar-width(none, 0); - [data-theme='dark'] & { - background: $header-background-color-dark; - border-top-color: $global-border-color-dark; - @include box-shadow(0 0.125rem 0.25rem rgba(255, 255, 255, 0.1)); + [data-theme=dark] & { + box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1); } .search-wrapper { @@ -379,16 +347,12 @@ header { justify-content: space-between; align-items: center; box-sizing: border-box; - padding: ($header-height - 2.5rem) / 2 1rem; + padding: 0.5rem 1rem; line-height: 2.5rem; position: sticky; top: 0; - background-color: $header-background-color; - @include z-index(0, 50); - - [data-theme='dark'] & { - background-color: $header-background-color-dark; - } + background-color: fixit-var(header-background-color); + @include z-index(sticky); } .search { @@ -421,10 +385,10 @@ header { padding: 0 1rem; &:not(.menu-system):hover { - background-color: lighten($global-font-secondary-color, 24%); + background-color: #f2f2f3; - [data-theme='dark'] & { - background-color: darken($global-font-secondary-color-dark, 24%); + [data-theme=dark] & { + background-color: #535355; } } @@ -433,7 +397,7 @@ header { white-space: nowrap; text-overflow: ellipsis; overflow-x: hidden; - @include flex(4); + flex: 4; } & .nested-item { @@ -455,11 +419,7 @@ header { bottom: 0; line-height: 2.5rem; padding: 0 1rem; - background-color: $header-background-color; - - [data-theme='dark'] & { - background-color: $header-background-color-dark; - } + background-color: fixit-var(header-background-color); .menu-system-item { padding-inline: 0.5rem; @@ -488,10 +448,10 @@ header { } .menu-item:hover { - background-color: lighten($global-font-secondary-color, 20%); + background-color: #e7e7ea; - [data-theme='dark'] & { - background-color: darken($global-font-secondary-color-dark, 20%); + [data-theme=dark] & { + background-color: #5d5d5f; } } } @@ -504,7 +464,7 @@ header { &.open { .header-wrapper { - margin-top: -$header-height; + margin-top: calc(#{fixit-var(header-height)} * -1); } .menu { @@ -524,12 +484,12 @@ header { .search-dropdown { position: fixed; - top: $header-height; - @include z-index(2); - @include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1)); + 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'] & { - @include box-shadow(0 0.125rem 0.25rem rgba(255, 255, 255, 0.1)); + [data-theme=dark] & { + box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1); } &.desktop { @@ -544,11 +504,12 @@ header { .dropdown-menu { right: 0 !important; - background-color: var(#{$rootPrefix}global-background-color); + background-color: fixit-var(global-background-color); .suggestions { overflow-y: auto; - max-height: calc(100vh - #{$header-height}); + // 41px is the height of the search-footer + max-height: calc(100dvh - #{fixit-var(header-height)} - 41px); .suggestion { padding: 0.75rem 1rem; @@ -567,33 +528,30 @@ header { font-size: 0.875rem; float: right; text-align: right; - color: var(#{$rootPrefix}global-font-secondary-color); + color: fixit-var(secondary); } .suggestion-context { + display: -webkit-box; line-height: 1.25rem; - @include box(vertical); + -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; + color: fixit-var(global-placeholder-color); @include overflow-wrap(break-word); - color: var(#{$rootPrefix}global-font-secondary-color); } em { font-style: normal; - background-color: $selection-color; - - [data-theme='dark'] & { - background-color: $selection-color-dark; - } + background-color: fixit-var(selection-color); } &.cursor { background: darken($code-background-color, 5%); - [data-theme='dark'] & { + [data-theme=dark] & { background: lighten($code-background-color-dark, 5%); } } @@ -611,7 +569,7 @@ header { .search-query { font-weight: bold; - [data-theme='dark'] & { + [data-theme=dark] & { color: #ddd; } } @@ -621,8 +579,7 @@ header { padding: 0.5rem 1rem; float: right; font-size: 0.8rem; - color: var(#{$rootPrefix}global-font-secondary-color); - + color: fixit-var(secondary); @include link(false, false); a { diff --git a/assets/css/_core/_layout.scss b/assets/css/_core/_layout/_index.scss similarity index 87% rename from assets/css/_core/_layout.scss rename to assets/css/_core/_layout/_index.scss index 0aae4690..190c484e 100644 --- a/assets/css/_core/_layout.scss +++ b/assets/css/_core/_layout/_index.scss @@ -36,7 +36,7 @@ } } -@import "_header"; -@import "_breadcrumb"; -@import "_footer"; -@import "_pagination"; +@import "header"; +@import "breadcrumb"; +@import "footer"; +@import "pagination"; diff --git a/assets/css/_core/_pagination.scss b/assets/css/_core/_layout/_pagination.scss similarity index 59% rename from assets/css/_core/_pagination.scss rename to assets/css/_core/_layout/_pagination.scss index f8374748..c7623a02 100644 --- a/assets/css/_core/_pagination.scss +++ b/assets/css/_core/_layout/_pagination.scss @@ -10,16 +10,12 @@ a { font-size: 0.8rem; - color: $pagination-link-color; + color: fixit-var(pagination-link-color); letter-spacing: 0.1rem; font-weight: 700; padding: 5px 5px; text-decoration: none; - @include transition(0.3s); - - [data-theme='dark'] & { - color: $pagination-link-color-dark; - } + transition: 0.3s; } li { @@ -34,11 +30,7 @@ } &:hover a { - color: $pagination-link-hover-color; - } - - [data-theme='dark'] &:hover a { - color: $pagination-link-hover-color-dark; + color: fixit-var(pagination-link-hover-color); } &::before, @@ -47,14 +39,9 @@ content: ''; width: 0; height: 3px; - background: $pagination-link-hover-color; - @include transition(0.3s); + background: fixit-var(pagination-link-hover-color); bottom: 0px; - } - - [data-theme='dark'] &::before, - [data-theme='dark'] &::after { - background: $pagination-link-hover-color-dark; + transition: 0.3s; } &::before { @@ -74,11 +61,7 @@ &.active { a { - color: $pagination-link-hover-color; - } - - [data-theme='dark'] & a { - color: $pagination-link-hover-color-dark; + color: fixit-var(pagination-link-hover-color); } &::before, diff --git a/assets/css/_mixin/_blur.scss b/assets/css/_core/_mixin/_blur.scss similarity index 69% rename from assets/css/_mixin/_blur.scss rename to assets/css/_core/_mixin/_blur.scss index 91147da3..1272fc9f 100644 --- a/assets/css/_mixin/_blur.scss +++ b/assets/css/_core/_mixin/_blur.scss @@ -1,6 +1,6 @@ @mixin blur { // TODO refactor blur with backdrop-filter .blur & { - @include filter(blur(1.5px)); + filter: blur(1.5px); } } diff --git a/assets/css/_core/_mixin/_border-radius.scss b/assets/css/_core/_mixin/_border-radius.scss new file mode 100644 index 00000000..dcc71518 --- /dev/null +++ b/assets/css/_core/_mixin/_border-radius.scss @@ -0,0 +1,26 @@ +/// Mixin to set border-radius +/// @param {String|Number|List} $value - The value of the border-radius, position (top, bottom, left, right) or keyword (full) +/// @param {Number} $radius - The radius of the border (only for position) +/// @example +/// @include border-radius; +/// @include border-radius(full); +/// @include border-radius(top); +/// @include border-radius(top, 10px); +/// @include border-radius(10px 20px 10px 20px); +@mixin border-radius($value: fixit-var(global-border-radius), $radius: null) { + $r: if($radius, $radius, fixit-var(global-border-radius)); + + @if $value == full { + border-radius: calc(infinity * 1px); + } @else if $value == top { + border-radius: $r $r 0 0; + } @else if $value == bottom { + border-radius: 0 0 $r $r; + } @else if $value == left { + border-radius: $r 0 0 $r; + } @else if $value == right { + border-radius: 0 $r $r 0; + } @else { + border-radius: $value; + } +} diff --git a/assets/css/_core/_mixin/_compatibility.scss b/assets/css/_core/_mixin/_compatibility.scss new file mode 100644 index 00000000..a535643b --- /dev/null +++ b/assets/css/_core/_mixin/_compatibility.scss @@ -0,0 +1,33 @@ +@mixin placeholder($color: fixit-var(global-placeholder-color)) { + input::-webkit-input-placeholder { + color: $color; + } + + input:-moz-placeholder { + color: $color; + } + + input::-moz-placeholder { + color: $color; + } + + input:-ms-input-placeholder { + color: $color; + } + + input::placeholder { + color: $color; + } +} + +// TODO Superseded by text-wrap: wrap; in modern browsers +@mixin overflow-wrap($value) { + word-wrap: $value; + overflow-wrap: $value; +} + +@mixin user-select($value) { + -webkit-user-select: $value !important; + -moz-user-select: $value !important; + user-select: $value !important; +} diff --git a/assets/css/_mixin/_index.scss b/assets/css/_core/_mixin/_index.scss similarity index 72% rename from assets/css/_mixin/_index.scss rename to assets/css/_core/_mixin/_index.scss index 04e21077..46e6e920 100644 --- a/assets/css/_mixin/_index.scss +++ b/assets/css/_core/_mixin/_index.scss @@ -1,4 +1,6 @@ +@import 'theme-vars'; @import 'blur'; +@import 'border-radius'; @import 'compatibility'; @import 'link'; @import 'loading'; diff --git a/assets/css/_mixin/_link.scss b/assets/css/_core/_mixin/_link.scss similarity index 70% rename from assets/css/_mixin/_link.scss rename to assets/css/_core/_mixin/_link.scss index 425c6d17..9bf5020f 100644 --- a/assets/css/_mixin/_link.scss +++ b/assets/css/_core/_mixin/_link.scss @@ -1,10 +1,7 @@ -/** - * Link mixin - * @param {Boolean} $light use global link color - * @param {Boolean} $dark use global link color dark - * @param {String} $decoration text-decoration, default none - * TODO refactor to use CSS variables - */ +/// Link mixin +/// @param {Boolean} $light use global link color +/// @param {Boolean} $dark use global link color dark +/// @param {String} $decoration text-decoration, default none @mixin link($light, $dark, $decoration: none) { a, a::before, @@ -19,7 +16,7 @@ color: $single-link-color; } - [data-theme='dark'] & { + [data-theme=dark] & { @if $dark { color: $global-link-color-dark; } @@ -40,7 +37,7 @@ color: $single-link-hover-color; } - [data-theme='dark'] & { + [data-theme=dark] & { @if $dark { color: $global-link-hover-color-dark; } diff --git a/assets/css/_mixin/_loading.scss b/assets/css/_core/_mixin/_loading.scss similarity index 77% rename from assets/css/_mixin/_loading.scss rename to assets/css/_core/_mixin/_loading.scss index 53685cff..34a7d18a 100644 --- a/assets/css/_mixin/_loading.scss +++ b/assets/css/_core/_mixin/_loading.scss @@ -9,7 +9,7 @@ backdrop-filter: blur(1rem); background-position: center; background-repeat: no-repeat; - background-image: var(#{$rootPrefix}loading-img); + background-image: fixit-var(loading-img); background-size: 60px; - @include z-index(0, 10); + @include z-index(loading); } diff --git a/assets/css/_core/_mixin/_scrollbar-width.scss b/assets/css/_core/_mixin/_scrollbar-width.scss new file mode 100644 index 00000000..8dd309ba --- /dev/null +++ b/assets/css/_core/_mixin/_scrollbar-width.scss @@ -0,0 +1,6 @@ +@mixin scrollbar-width($width: thin, $widthLegacy: 12px) { + @include set-fixit-vars(( + scrollbar-width: $width, + scrollbar-width-legacy: $widthLegacy, + )); +} diff --git a/assets/css/_core/_mixin/_theme-vars.scss b/assets/css/_core/_mixin/_theme-vars.scss new file mode 100644 index 00000000..dd8c5431 --- /dev/null +++ b/assets/css/_core/_mixin/_theme-vars.scss @@ -0,0 +1,80 @@ +// ======================================== +// Theme Variable Mixins and Functions +// ======================================== + +/// Get CSS variable with prefix +/// @param {String} $name - CSS variable name (without prefix) +/// @param {*} $fallback - Optional fallback value +/// @return {String} - Complete CSS variable reference +/// @example +/// color: fixit-var(global-font-color); +/// background: fixit-var(custom-bg, #fff); +@function fixit-var($name, $fallback: null) { + @if $fallback { + @return var(#{$rootPrefix}#{$name}, #{$fallback}); + } @else { + @return var(#{$rootPrefix}#{$name}); + } +} + +/// Set a single CSS variable +/// @param {String} $name - CSS variable name (without prefix) +/// @param {*} $value - Variable value +/// @example +/// @include set-fixit-var(custom-color, #ff0000); +@mixin set-fixit-var($name, $value) { + #{$rootPrefix}#{$name}: #{$value}; +} + +/// Batch set CSS variables +/// @param {Map} $vars - Variable map, key is CSS variable name (without prefix), value is variable value +/// @example +/// @include set-fixit-vars(( +/// custom-color: #ff0000, +/// custom-bg: #00ff00, +/// )); +@mixin set-fixit-vars($vars) { + @each $name, $value in $vars { + #{$rootPrefix}#{$name}: #{$value}; + } +} + +/// 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 theme + @at-root [data-theme=dark] { + @each $name, $value in $theme-colors { + #{$rootPrefix}#{$name}: #{darken($value, 5%)}; + } + } +} + +/// Define dual-theme variables (generate definitions for both light and dark simultaneously) +/// @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) + @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)}; + } + } +} diff --git a/assets/css/_core/_mixin/_z-index.scss b/assets/css/_core/_mixin/_z-index.scss new file mode 100644 index 00000000..78f014cc --- /dev/null +++ b/assets/css/_core/_mixin/_z-index.scss @@ -0,0 +1,25 @@ +$z-indexes: ( + "hide": -1, + "auto": auto, + "base": 1, + "loading": 10, + "sticky": 100, + "fixed": 200 +) !default; + +/// Mixin to set z-index +/// @param {String|Number} $key - The key of the z-index map or a raw number +/// @param {Number} $diff - The difference to add to the z-index +/// @example +/// @include z-index(base); +/// @include z-index(base, 1); +@mixin z-index($key, $diff: 0) { + $z-index: map-get($z-indexes, $key); + + @if $z-index { + z-index: $z-index + $diff; + } @else { + @warn "Unknown z-index key: `#{$key}`."; + z-index: $key + $diff; + } +} diff --git a/assets/css/_core/_root.scss b/assets/css/_core/_root.scss index 91f3bea4..ba5e6494 100644 --- a/assets/css/_core/_root.scss +++ b/assets/css/_core/_root.scss @@ -1,69 +1,134 @@ -:root { - // Note: Custom variable values only support SassScript inside `#{}`. - // TODO migrate SCSS variables to CSS variables +// ================================================================================ +// 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; - // Global colors variables - #{$rootPrefix}global-background-color: #{$global-background-color}; - #{$rootPrefix}global-font-color: #{$global-font-color}; - #{$rootPrefix}global-font-secondary-color: #{$global-font-secondary-color}; - #{$rootPrefix}global-border-color: #{$global-border-color}; - #{$rootPrefix}global-link-color: #{$global-link-color}; - #{$rootPrefix}global-link-hover-color: #{$global-link-hover-color}; + // ---------------------------------------- + // 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, - // Scroll margin top and Stack sticky top related - #{$rootPrefix}scroll-mt: calc(#{$header-height} + #{$global-scroll-margin-top}); + // 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, - // Set breadcrumb height to 0px if breadcrumb is disabled - #{$rootPrefix}breadcrumb-height: 0px; + // 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, - // hr / divider style - #{$rootPrefix}hr-background-color: #{darken($global-border-color, 5%)}; - #{$rootPrefix}hr-active-color: #{lighten($single-link-hover-color, 4%)}; - #{$rootPrefix}divider-edge-weak: linear-gradient(to right, transparent, var(#{$rootPrefix}divider-bg, #d0d0d5), transparent); + // 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 related variables - #{$rootPrefix}scrollbar-thumb-color: #{$scrollbar-color}; - #{$rootPrefix}scrollbar-thumb-hover-color: #{$scrollbar-hover-color}; - #{$rootPrefix}scrollbar-track-color: transparent; - #{$rootPrefix}scrollbar-width: thin; - #{$rootPrefix}scrollbar-width-legacy: 12px; + // Scrollbar + scrollbar-track-color: transparent, + scrollbar-width: thin, + scrollbar-width-legacy: 12px, - // Code related variables - #{$rootPrefix}code-inline-background-color: rgba(175, 184, 193, 0.2); - #{$rootPrefix}code-block-background-color: #{$code-background-color}; - #{$rootPrefix}code-header-color: #{$code-header-color}; - #{$rootPrefix}code-header-background-color: #{darken($code-background-color, 5%)}; - #{$rootPrefix}code-highlight-color: #{$code-highlight-color}; - #{$rootPrefix}gist-meta-background-color: #{darken($code-background-color, 5%)}; - - // Theme colors variables - @each $color, $value in $theme-colors { - #{$rootPrefix}#{$color}: #{$value}; - } + // 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)}), + )); } -// Dark theme -[data-theme=dark] { - #{$rootPrefix}global-background-color: #{$global-background-color-dark}; - #{$rootPrefix}global-font-color: #{$global-font-color-dark}; - #{$rootPrefix}global-font-secondary-color: #{$global-font-secondary-color-dark}; - #{$rootPrefix}global-border-color: #{$global-border-color-dark}; - #{$rootPrefix}global-link-color: #{$global-link-color-dark}; - #{$rootPrefix}global-link-hover-color: #{$global-link-hover-color-dark}; +// ---------------------------------------- +// Theme-Dependent Color Variables +// ---------------------------------------- - #{$rootPrefix}hr-background-color: #{lighten($global-border-color-dark, 5%)}; - #{$rootPrefix}hr-active-color: #{darken($global-link-hover-color-dark, 4%)}; +// Theme colors variables +@include set-theme-colors; - #{$rootPrefix}code-inline-background-color: rgba(99, 110, 123, 0.4); - #{$rootPrefix}code-block-background-color: #{$code-background-color-dark}; - #{$rootPrefix}code-header-color: #{$code-header-color-dark}; - #{$rootPrefix}code-header-background-color: #{darken($code-background-color-dark, 5%)}; - #{$rootPrefix}code-highlight-color: #{$code-highlight-color-dark}; - #{$rootPrefix}gist-meta-background-color: #{darken($code-background-color-dark, 5%)}; +// 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), - @each $color, $value in $theme-colors { - #{$rootPrefix}#{$color}: #{darken($value, 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), +)); diff --git a/assets/css/_widgets/_cookieconsent.scss b/assets/css/_core/_widgets/_cookieconsent.scss similarity index 50% rename from assets/css/_widgets/_cookieconsent.scss rename to assets/css/_core/_widgets/_cookieconsent.scss index 58ad5802..98db597b 100644 --- a/assets/css/_widgets/_cookieconsent.scss +++ b/assets/css/_core/_widgets/_cookieconsent.scss @@ -1,13 +1,13 @@ .cc-window.cc-banner { .cc-btn { - color: var(#{$rootPrefix}global-font-color); - background-color: var(#{$rootPrefix}global-background-color); + color: fixit-var(global-font-color); + background-color: fixit-var(global-background-color); &:hover, &:focus { background-color: #ccc; - [data-theme='dark'] & { + [data-theme=dark] & { background-color: #444; } } diff --git a/assets/css/_core/_widgets/_details.scss b/assets/css/_core/_widgets/_details.scss new file mode 100644 index 00000000..c3b0b26b --- /dev/null +++ b/assets/css/_core/_widgets/_details.scss @@ -0,0 +1,47 @@ +.details { + > .details-summary { + transition: border-radius 0.2s ease 0.2s; + @include border-radius; + + &:hover { + cursor: pointer; + } + + i.details-icon { + color: fixit-var(secondary); + transition: all 0.2s ease; + + &:hover { + color: fixit-var(global-font-color); + } + } + } + + > .details-content { + height: 0; + overflow-y: hidden; + transition: height 0.5s ease-out; + } + + &.open { + > .details-summary { + transition: border-radius 0s; + @include border-radius(top); + + i.details-icon { + transform: rotate(90deg); + } + } + + > .details-content { + height: auto; + @include border-radius(bottom); + } + } + + &.disabled { + > .details-summary { + cursor: default; + } + } +} diff --git a/assets/css/_core/_widgets/_fixed-button.scss b/assets/css/_core/_widgets/_fixed-button.scss new file mode 100644 index 00000000..0d6930c5 --- /dev/null +++ b/assets/css/_core/_widgets/_fixed-button.scss @@ -0,0 +1,83 @@ +.fixed-buttons { + position: fixed; + right: 1.5rem; + bottom: 1.5rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + @include z-index(fixed, -10); +} + +.fixed-button { + font-size: 1rem; + line-height: 1.5rem; + padding: 0.5rem 0.625rem; + color: fixit-var(secondary); + background-color: darken($header-background-color, 4%); + transition: color 0.4s ease; + @include border-radius(full); + @include blur; + @extend .print-d-none; + + [data-theme=dark] & { + background-color: darken($header-background-color-dark, 4%); + } + + &:hover, + &:active { + color: fixit-var(global-font-color); + cursor: pointer; + } + + &:active, + &:focus, + &:hover { + outline: none; + } +} + +.back-to-top { + overflow: hidden; + position: relative; + @include set-fixit-vars(( + // Ring stroke width + b2t-stroke: 0.5rem, + // Progress color + b2t-prog: fixit-var(success), + // 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; + top: 0; + left: 0; + width: 100%; + height: 100%; + // Rotate to start from top + transform: rotate(-90deg); + } + + .bg { + fill: none; + stroke: fixit-var(global-border-color); + stroke-width: fixit-var(b2t-stroke); + } + + // Progress ring + .progress { + fill: none; + stroke: fixit-var(b2t-prog); + stroke-width: fixit-var(b2t-stroke); + stroke-linecap: round; + stroke-dasharray: fixit-var(b2t-dasharray); + stroke-dashoffset: calc(#{fixit-var(b2t-dasharray)} * (1 - #{fixit-var(b2t-progress, 0)} / 100)); + transition: stroke-dashoffset .1s linear; + } +} diff --git a/assets/css/_core/_widgets/_github-corner.scss b/assets/css/_core/_widgets/_github-corner.scss new file mode 100644 index 00000000..9e263828 --- /dev/null +++ b/assets/css/_core/_widgets/_github-corner.scss @@ -0,0 +1,42 @@ +@keyframes octocat-wave { + 0%, + 100% { + transform: rotate(0); + } + 20%, + 60% { + transform: rotate(-25deg); + } + 40%, + 80% { + transform: rotate(10deg); + } +} + +.github-corner { + position: fixed; + top: 0; + @include z-index(fixed); + @extend .print-d-none; + + :hover .octo-arm { + animation: octocat-wave 560ms ease-in-out; + } + svg { + width: fixit-var(header-height); + height: fixit-var(header-height); + border: 0; + color: fixit-var(github-corner-color); + fill: fixit-var(github-corner-fill); + } + &.left { + left: 0; + + svg { + transform: scale(-1, 1); + } + } + &.right { + right: 0; + } +} diff --git a/assets/css/_widgets/_icon.scss b/assets/css/_core/_widgets/_icon.scss similarity index 100% rename from assets/css/_widgets/_icon.scss rename to assets/css/_core/_widgets/_icon.scss diff --git a/assets/css/_widgets/_index.scss b/assets/css/_core/_widgets/_index.scss similarity index 94% rename from assets/css/_widgets/_index.scss rename to assets/css/_core/_widgets/_index.scss index b5cc4a76..ba3172db 100644 --- a/assets/css/_widgets/_index.scss +++ b/assets/css/_core/_widgets/_index.scss @@ -3,7 +3,6 @@ @import 'fixed-button'; @import 'github-corner'; @import 'icon'; -@import 'img'; @import 'mask'; @import 'noscript-warning'; @import 'post-chat'; diff --git a/assets/css/_widgets/_mask.scss b/assets/css/_core/_widgets/_mask.scss similarity index 80% rename from assets/css/_widgets/_mask.scss rename to assets/css/_core/_widgets/_mask.scss index eae738cc..a37d63a6 100644 --- a/assets/css/_widgets/_mask.scss +++ b/assets/css/_core/_widgets/_mask.scss @@ -7,10 +7,10 @@ width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); - @include z-index(0, -1); + @include z-index(hide); .blur & { - @include z-index(1); + @include z-index(fixed, -1); background-color: rgba(0, 0, 0, 0.25); } } diff --git a/assets/css/_widgets/_noscript-warning.scss b/assets/css/_core/_widgets/_noscript-warning.scss similarity index 50% rename from assets/css/_widgets/_noscript-warning.scss rename to assets/css/_core/_widgets/_noscript-warning.scss index d924b7a4..b549f908 100644 --- a/assets/css/_widgets/_noscript-warning.scss +++ b/assets/css/_core/_widgets/_noscript-warning.scss @@ -1,5 +1,5 @@ .noscript-warning { - background-color: var(#{$rootPrefix}danger); + background-color: fixit-var(danger); color: white; font-size: 1rem; font-weight: bold; @@ -8,9 +8,5 @@ left: 0; bottom: 0; width: 100%; - @include z-index(2); - - [data-theme='dark'] & { - background-color: var(#{$rootPrefix}danger-dark); - } + @include z-index(fixed); } diff --git a/assets/css/_widgets/_post-chat.scss b/assets/css/_core/_widgets/_post-chat.scss similarity index 100% rename from assets/css/_widgets/_post-chat.scss rename to assets/css/_core/_widgets/_post-chat.scss diff --git a/assets/css/_core/_widgets/_reading-progress.scss b/assets/css/_core/_widgets/_reading-progress.scss new file mode 100644 index 00000000..46aff29d --- /dev/null +++ b/assets/css/_core/_widgets/_reading-progress.scss @@ -0,0 +1,12 @@ +.reading-progress-bar { + height: fixit-var(progress-h, 2px); + width: fixit-var(progress, 0); + background-color: fixit-var(bg-progress, fixit-var(success)); + position: fixed; + @include z-index(fixed); + @extend .print-d-none; + + [data-theme=dark] & { + background-color: fixit-var(bg-progress-dark, fixit-var(global-font-color)); + } +} diff --git a/assets/css/_core/_widgets/_scrollbar.scss b/assets/css/_core/_widgets/_scrollbar.scss new file mode 100644 index 00000000..2fdf32e4 --- /dev/null +++ b/assets/css/_core/_widgets/_scrollbar.scss @@ -0,0 +1,36 @@ +/* Modern browsers with `scrollbar-*` support (high priority) */ +@supports (scrollbar-width: auto) { + * { + scrollbar-color: fixit-var(scrollbar-thumb-color) fixit-var(scrollbar-track-color);; + scrollbar-width: fixit-var(scrollbar-width); + } +} + +/* Legacy browsers with `::-webkit-scrollbar-*` support */ +::-webkit-scrollbar { + height: fixit-var(scrollbar-width-legacy); + width: fixit-var(scrollbar-width-legacy); + overflow: visible; +} +::-webkit-scrollbar-button { + height: 0; + width: 0; +} +::-webkit-scrollbar-corner { + background-color: fixit-var(scrollbar-track-color); +} +::-webkit-scrollbar-thumb { + background-color: fixit-var(scrollbar-thumb-color); + &:hover { + background-color: fixit-var(scrollbar-thumb-hover-color); + } +} +::-webkit-scrollbar-track { + background-color: fixit-var(scrollbar-track-color); +} +::-webkit-scrollbar-thumb, +::-webkit-scrollbar-track { + background-clip: padding-box; + border: 3px solid transparent; + @include border-radius(full); +} diff --git a/assets/css/_widgets/_typeit.scss b/assets/css/_core/_widgets/_typeit.scss similarity index 65% rename from assets/css/_widgets/_typeit.scss rename to assets/css/_core/_widgets/_typeit.scss index 26b3d257..b3bff6be 100644 --- a/assets/css/_widgets/_typeit.scss +++ b/assets/css/_core/_widgets/_typeit.scss @@ -2,12 +2,12 @@ .highlight { padding: 0.375rem; font-size: 0.875rem; - font-family: $code-font-family; + font-family: fixit-var(code-font-family); font-weight: bold; word-break: break-all; white-space: pre-wrap; } - --ti-cursor-font-family: #{$global-font-family}; + --ti-cursor-font-family: fixit-var(global-font-family); --ti-cursor-transform: translateX(0); } diff --git a/assets/css/_maps/_colors.scss b/assets/css/_maps/_colors.scss index 28af46c4..a8b25a60 100644 --- a/assets/css/_maps/_colors.scss +++ b/assets/css/_maps/_colors.scss @@ -1,17 +1,9 @@ -// Theme colors -$primary: #1772ee !default; -$secondary: #919191 !default; -$success: #13ce66 !default; -$info: #0dcaf0 !default; -$warning: #ffba00 !default; -$danger: #ff4949 !default; - // Theme colors map $theme-colors: ( - 'primary': $primary, - 'secondary': $secondary, - 'success': $success, - 'info': $info, - 'warning': $warning, - 'danger': $danger + 'primary': #1677ff, + 'secondary': #8b949e, + 'success': #52c41a, + 'info': #13c2c2, + 'warning': #faad14, + 'danger': #ff4d4f ) !default; diff --git a/assets/css/_maps/_index.scss b/assets/css/_maps/_index.scss new file mode 100644 index 00000000..c7d05a1f --- /dev/null +++ b/assets/css/_maps/_index.scss @@ -0,0 +1,5 @@ +@import 'admonition'; +@import 'alert'; +@import 'code-type'; +@import 'colors'; +@import 'utilities'; diff --git a/assets/css/_mixin/_compatibility.scss b/assets/css/_mixin/_compatibility.scss deleted file mode 100644 index a75af355..00000000 --- a/assets/css/_mixin/_compatibility.scss +++ /dev/null @@ -1,108 +0,0 @@ -@mixin border-radius($value) { - -webkit-border-radius: $value; - -moz-border-radius: $value; - border-radius: $value; -} - -@mixin box-shadow($values...) { - -webkit-box-shadow: $values; - box-shadow: $values; -} - -@mixin transition($values...) { - -webkit-transition: $values; - -moz-transition: $values; - -o-transition: $values; - transition: $values; -} - -@mixin transform($value) { - -webkit-transform: $value; - -ms-transform: $value; - -o-transform: $value; - transform: $value; -} - -@mixin filter($value) { - -webkit-filter: $value; - filter: $value; -} - -@mixin flex($value) { - -webkit-flex: $value; - flex: $value; -} - -@mixin box($orient) { - display: -moz-box; - display: -webkit-box; - display: box; - - -webkit-box-orient: $orient; - -moz-box-orient: $orient; - box-orient: $orient; -} - -@mixin placeholder($color) { - input::-webkit-input-placeholder { - color: $color; - } - - input:-moz-placeholder { - color: $color; - } - - input::-moz-placeholder { - color: $color; - } - - input:-ms-input-placeholder { - color: $color; - } - - input::placeholder { - color: $color; - } -} - -@mixin max-content($property) { - #{$property}: -webkit-max-content; - #{$property}: -moz-max-content; - #{$property}: intrinsic; - #{$property}: max-content; -} - -@mixin tab-size($value) { - -moz-tab-size: $value; - -o-tab-size: $value; - tab-size: $value; -} - -@mixin appearance($value) { - -moz-appearance: $value; - -webkit-appearance: $value; -} - -// TODO Superseded by text-wrap: wrap; in modern browsers -@mixin overflow-wrap($value) { - word-wrap: $value; - overflow-wrap: $value; -} - -@mixin line-break($value) { - -webkit-line-break: $value; - -ms-line-break: $value; - line-break: $value; -} - -@mixin object-fit($value) { - -o-object-fit: $value; - object-fit: $value; - font-family: 'object-fit: #{$value};'; -} - -@mixin user-select($value) { - -webkit-user-select: $value !important; - -moz-user-select: $value !important; - user-select: $value !important; -} diff --git a/assets/css/_mixin/_scrollbar-width.scss b/assets/css/_mixin/_scrollbar-width.scss deleted file mode 100644 index a4f4296b..00000000 --- a/assets/css/_mixin/_scrollbar-width.scss +++ /dev/null @@ -1,4 +0,0 @@ -@mixin scrollbar-width($width: thin, $widthLegacy: 12px) { - #{$rootPrefix}scrollbar-width: #{$width}; - #{$rootPrefix}scrollbar-width-legacy: #{$widthLegacy}; -} diff --git a/assets/css/_mixin/_z-index.scss b/assets/css/_mixin/_z-index.scss deleted file mode 100644 index b9641ff5..00000000 --- a/assets/css/_mixin/_z-index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin z-index($level, $diff: 0) { - z-index: ($level * 100) + $diff; -} diff --git a/assets/css/_page/_404.scss b/assets/css/_page/_404.scss index 774c7dd2..0e7281ab 100644 --- a/assets/css/_page/_404.scss +++ b/assets/css/_page/_404.scss @@ -1,6 +1,6 @@ #content-404 { font-size: 1.8rem; line-height: 3rem; - @include transform(translateY(30vh)); text-align: center; + transform: translateY(30vh); } diff --git a/assets/css/_page/_archive/_tags.scss b/assets/css/_page/_archive/_tags.scss index 9f3aa1ba..0e5c8d9a 100644 --- a/assets/css/_page/_archive/_tags.scss +++ b/assets/css/_page/_archive/_tags.scss @@ -1,55 +1,60 @@ -.tag-cloud-tags { +.tags { margin: 10px 0; - a { + .tag-item { display: inline-block; position: relative; margin: 5px 10px; + transition: all ease-out 0.3s; @include overflow-wrap(break-word); - @include transition(all ease-out 0.3s); &:active, &:focus, &:hover { - @include transform(scale(1.2)); + transform: scale(1.2); sup { - color: var(#{$rootPrefix}global-font-color); - @include transition(all ease-out 0.3s); + color: fixit-var(global-font-color); + transition: all ease-out 0.3s; } } sup { - color: var(#{$rootPrefix}global-font-secondary-color); + color: fixit-var(secondary); } } } -@for $grade from 0 through 10 { - $tag-cloud-color: mix($tag-cloud-end, $tag-cloud-start, $grade * 10); - $tag-cloud-color-dark: mix($tag-cloud-end-dark, $tag-cloud-start-dark, $grade * 10); +.tag-cloud-tags { + text-align: center; - .tag-cloud-#{$grade} { - color: $tag-cloud-color; - font-size: var(--tag-font); - margin: 10px !important; + .tag-item { + color: fixit-var(tag-cloud-color); + font-size: fixit-var(tag-cloud-font); + margin: 10px; &:active, &:focus, &:hover { - color: var(#{$rootPrefix}global-link-hover-color) !important; + color: fixit-var(global-link-hover-color); sup { opacity: 1; } } - [data-theme='dark'] & { - color: $tag-cloud-color-dark; - } - sup { opacity: 0; } + + @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)); + } + } + } } } diff --git a/assets/css/_page/_archive/_terms.scss b/assets/css/_page/_archive/_terms.scss index 9b43890f..27d17b61 100644 --- a/assets/css/_page/_archive/_terms.scss +++ b/assets/css/_page/_archive/_terms.scss @@ -33,8 +33,8 @@ margin-bottom: 0.75rem; } - span { - float: right; + .more-post { + text-align: right; padding-right: 1rem; } } @@ -59,11 +59,7 @@ .archive-item-date { text-align: right; - color: var(#{$rootPrefix}global-font-secondary-color); + color: fixit-var(secondary); white-space: nowrap; - font-variant-numeric: tabular-nums lining-nums; -} - -.more-post { - text-align: right; + @extend .variant-numeric; } diff --git a/assets/css/_page/_home.scss b/assets/css/_page/_home.scss index dd760e09..af879f54 100644 --- a/assets/css/_page/_home.scss +++ b/assets/css/_page/_home.scss @@ -10,17 +10,17 @@ width: 8rem; height: auto; margin: 0 auto; - @include border-radius(100%); - @include box-shadow(0 0 0 0.3618em rgba(0, 0, 0, 0.05)); - @include transition(all 0.4s ease); + 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'] & { - @include box-shadow(0 0 0 0.3618em rgba(255, 255, 255, 0.05)); + [data-theme=dark] & { + box-shadow: 0 0 0 0.3618em rgba(255, 255, 255, 0.05); } &:hover { position: relative; - @include transform(translateY(-0.75rem)); + transform: translateY(-0.75rem); } } } @@ -62,7 +62,7 @@ font-weight: normal; margin: 0; padding: 0.5rem; - color: var(#{$rootPrefix}global-font-secondary-color); + color: fixit-var(secondary); } } } @@ -78,18 +78,18 @@ .summary { padding-block: 1rem; - color: var(#{$rootPrefix}global-font-color); + color: fixit-var(global-font-color); &:not(:last-of-type)::after { content: ''; position: absolute; width: 100%; - padding: 2px; + padding: 1.5px; transform: translateY(18px); background: repeating-linear-gradient( 135deg, - var(#{$rootPrefix}hr-background-color) 0px, - var(#{$rootPrefix}hr-background-color) 4px, + fixit-var(global-border-color) 0px, + fixit-var(global-border-color) 4px, transparent 4px, transparent 8px ); @@ -105,7 +105,7 @@ aspect-ratio: auto 1000 / 420; position: relative; margin: 0.6rem auto; - @include transition(transform 0.4s ease); + transition: transform 0.4s ease; img { position: absolute; @@ -113,11 +113,11 @@ height: 100%; left: 0; top: 0; - @include object-fit(cover); + object-fit: cover; } &:hover { - @include transform(scale(1.01)); + transform: scale(1.01); } } @@ -129,12 +129,12 @@ .content { margin-top: 0.3rem; - color: var(#{$rootPrefix}global-font-secondary-color); + color: fixit-var(global-placeholder-color); @include link(false, true); b, strong { - color: var(#{$rootPrefix}global-font-secondary-color); + color: fixit-var(global-placeholder-color); } } diff --git a/assets/css/_page/_index.scss b/assets/css/_page/_index.scss index 8df67ed5..6ad05cc7 100644 --- a/assets/css/_page/_index.scss +++ b/assets/css/_page/_index.scss @@ -4,7 +4,7 @@ .content { [id] { - scroll-margin-top: var(#{$rootPrefix}scroll-mt); + scroll-margin-top: fixit-var(scroll-mt); } } @@ -17,3 +17,5 @@ @import 'home'; @import '404'; @import 'offline'; +@import "media"; +@import "patch"; diff --git a/assets/css/_core/_media.scss b/assets/css/_page/_media.scss similarity index 90% rename from assets/css/_core/_media.scss rename to assets/css/_page/_media.scss index 5140d85e..cee39090 100644 --- a/assets/css/_core/_media.scss +++ b/assets/css/_page/_media.scss @@ -140,12 +140,12 @@ } // adjust the scroll margin top of the content anchors on the page body:not([data-header-desktop='auto']) &+.fi-container .content [id] { - scroll-margin-top: calc(var(#{$rootPrefix}scroll-mt) + var(#{$rootPrefix}breadcrumb-height)); + scroll-margin-top: calc(#{fixit-var(scroll-mt)} + #{fixit-var(breadcrumb-height)}); } } [data-header-desktop='normal'] .page .content [id] { - #{$rootPrefix}scroll-mt: #{$global-scroll-margin-top}; + @include set-fixit-var(scroll-mt, fixit-var(global-scroll-margin-top)); } [data-header-desktop='normal'] { #toc-auto, @@ -155,7 +155,7 @@ } [data-header-desktop='sticky'] { .page .content .highlight.code-block .code-header { - top: calc(#{$header-height} + var(#{$rootPrefix}breadcrumb-height)); + top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)}); } } } @@ -179,12 +179,12 @@ } // adjust the scroll margin top of the content anchors on the page body:not([data-header-mobile='auto']) &+.fi-container .content [id] { - scroll-margin-top: calc(var(#{$rootPrefix}scroll-mt) + var(#{$rootPrefix}breadcrumb-height)); + scroll-margin-top: calc(#{fixit-var(scroll-mt)} + #{fixit-var(breadcrumb-height)}); } } [data-header-mobile='normal'] .page .content [id] { - #{$rootPrefix}scroll-mt: #{$global-scroll-margin-top}; + @include set-fixit-var(scroll-mt, fixit-var(global-scroll-margin-top)); } [data-header-mobile='normal'] { #toc-auto, @@ -194,7 +194,7 @@ } [data-header-mobile='sticky'] { .page .content .highlight.code-block .code-header { - top: calc(#{$header-height} + var(#{$rootPrefix}breadcrumb-height)); + top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)}); } } @@ -225,7 +225,7 @@ // 确保打印时没有 scrollbar :root { - #{$rootPrefix}scrollbar-width: none !important; + @include set-fixit-var(scrollbar-width, none !important); } *::-webkit-scrollbar { diff --git a/assets/css/_page/_offline.scss b/assets/css/_page/_offline.scss index e954b0e9..b9cdad0b 100644 --- a/assets/css/_page/_offline.scss +++ b/assets/css/_page/_offline.scss @@ -1,10 +1,11 @@ #content-offline { - @include transform(translateY(30vh)); text-align: center; + transform: translateY(30vh); .offline-title { font-size: 3.6rem; } + .offline-subtitle { margin: 0.4rem 0; font-size: 1rem; @@ -13,6 +14,7 @@ line-height: 100%; color: #57606a; } + .error-text { font-size: 1.2rem; } diff --git a/assets/css/_core/_patch.scss b/assets/css/_page/_patch.scss similarity index 90% rename from assets/css/_core/_patch.scss rename to assets/css/_page/_patch.scss index 505d28b8..b24b3267 100644 --- a/assets/css/_core/_patch.scss +++ b/assets/css/_page/_patch.scss @@ -2,15 +2,15 @@ @keyframes #{$prefix}pulse { from { - @include transform(scale3d(1, 1, 1)); + transform: scale3d(1, 1, 1); } 50% { - @include transform(scale3d(1.05, 1.05, 1.05)); + transform: scale3d(1.05, 1.05, 1.05); } to { - @include transform(scale3d(1, 1, 1)); + transform: scale3d(1, 1, 1); } } diff --git a/assets/css/_page/_single/_alert.scss b/assets/css/_page/_single/_alert.scss index 2aa54fba..314a3a76 100644 --- a/assets/css/_page/_single/_alert.scss +++ b/assets/css/_page/_single/_alert.scss @@ -2,7 +2,7 @@ padding: 0.5rem 1rem; margin-block: 1rem; color: inherit; - border-left: 0.25em solid var(#{$rootPrefix}alert-border-color); + border-left: 0.25em solid fixit-var(alert-border-color); > :first-child { margin-top: 0; @@ -17,7 +17,7 @@ align-items: center; line-height: 1; margin-bottom: 1rem; - color: var(#{$rootPrefix}alert-color); + color: fixit-var(alert-color); > svg.icon { width: initial; @@ -28,16 +28,20 @@ @each $type, $item in $alert-color-map { &.alert-#{$type} { - #{$rootPrefix}alert-border-color: #{map-get($item, border-color)}; - #{$rootPrefix}alert-color: #{map-get($item, color)}; + @include set-fixit-vars(( + alert-border-color: map-get($item, border-color), + alert-color: map-get($item, color) + )); } } - [data-theme='dark'] & { + [data-theme=dark] & { @each $type, $item in $alert-color-map-dark { &.alert-#{$type} { - #{$rootPrefix}alert-border-color: #{map-get($item, border-color)}; - #{$rootPrefix}alert-color: #{map-get($item, color)}; + @include set-fixit-vars(( + alert-border-color: map-get($item, border-color), + alert-color: map-get($item, color) + )); } } } diff --git a/assets/css/_page/_single/_code-syntax/_github-dark-dimmed.scss b/assets/css/_page/_single/_code-syntax/_github-dark-dimmed.scss index 12891478..6b6eb6dd 100644 --- a/assets/css/_page/_single/_code-syntax/_github-dark-dimmed.scss +++ b/assets/css/_page/_single/_code-syntax/_github-dark-dimmed.scss @@ -1,79 +1,79 @@ -/** - * GitHub Dark Dimmed - * Copyright (c) 2012 - current GitHub, Inc. - * Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE) - * Maintained by @Lruihao for FixIt theme - * Created on 2022-03-01 - * Updated on 2024-07-14 - */ +/// GitHub Dark Dimmed +/// copyright (c) 2012 - current GitHub, Inc. +/// Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE) +/// Maintained by @Lruihao for FixIt theme +/// Created on 2022-03-01 +/// Updated on 2026-02-03 & { - // Blob colors - #{$rootPrefix}color-blob-num: #778491; - #{$rootPrefix}color-blob-code-inner: #c5d1de; - // Syntax colors - #{$rootPrefix}color-prettylights-syntax-comment: #768390; - #{$rootPrefix}color-prettylights-syntax-constant: #6cb6ff; - #{$rootPrefix}color-prettylights-syntax-constant-other-reference-link: #96d0ff; - #{$rootPrefix}color-prettylights-syntax-entity: #dcbdfb; - #{$rootPrefix}color-prettylights-syntax-storage-modifier-import: #adbac7; - #{$rootPrefix}color-prettylights-syntax-entity-tag: #8ddb8c; - #{$rootPrefix}color-prettylights-syntax-keyword: #f47067; - #{$rootPrefix}color-prettylights-syntax-string: #96d0ff; - #{$rootPrefix}color-prettylights-syntax-variable: #f69d50; - #{$rootPrefix}color-prettylights-syntax-brackethighlighter-unmatched: #e5534b; - #{$rootPrefix}color-prettylights-syntax-brackethighlighter-angle: #768390; - #{$rootPrefix}color-prettylights-syntax-invalid-illegal-text: #cdd9e5; - #{$rootPrefix}color-prettylights-syntax-invalid-illegal-bg: #922323; - #{$rootPrefix}color-prettylights-syntax-carriage-return-text: #cdd9e5; - #{$rootPrefix}color-prettylights-syntax-carriage-return-bg: #ad2e2c; - #{$rootPrefix}color-prettylights-syntax-string-regexp: #8ddb8c; - #{$rootPrefix}color-prettylights-syntax-markup-list: #eac55f; - #{$rootPrefix}color-prettylights-syntax-markup-heading: #316dca; - #{$rootPrefix}color-prettylights-syntax-markup-italic: #adbac7; - #{$rootPrefix}color-prettylights-syntax-markup-bold: #adbac7; - #{$rootPrefix}color-prettylights-syntax-markup-deleted-text: #ffd8d3; - #{$rootPrefix}color-prettylights-syntax-markup-deleted-bg: #78191b; - #{$rootPrefix}color-prettylights-syntax-markup-inserted-text: #b4f1b4; - #{$rootPrefix}color-prettylights-syntax-markup-inserted-bg: #1b4721; - #{$rootPrefix}color-prettylights-syntax-markup-changed-text: #ffddb0; - #{$rootPrefix}color-prettylights-syntax-markup-changed-bg: #682d0f; - #{$rootPrefix}color-prettylights-syntax-markup-ignored-text: #adbac7; - #{$rootPrefix}color-prettylights-syntax-markup-ignored-bg: #255ab2; - #{$rootPrefix}color-prettylights-syntax-meta-diff-range: #dcbdfb; - #{$rootPrefix}color-prettylights-syntax-sublimelinter-gutter-mark: #545d68; + @include set-fixit-vars(( + // Blob colors + color-blob-num: #778491, + color-blob-code-inner: #c5d1de, + // Syntax colors + color-prettylights-syntax-comment: #768390, + color-prettylights-syntax-constant: #6cb6ff, + color-prettylights-syntax-constant-other-reference-link: #96d0ff, + color-prettylights-syntax-entity: #dcbdfb, + color-prettylights-syntax-storage-modifier-import: #adbac7, + color-prettylights-syntax-entity-tag: #8ddb8c, + color-prettylights-syntax-keyword: #f47067, + color-prettylights-syntax-string: #96d0ff, + color-prettylights-syntax-variable: #f69d50, + color-prettylights-syntax-brackethighlighter-unmatched: #e5534b, + color-prettylights-syntax-brackethighlighter-angle: #768390, + color-prettylights-syntax-invalid-illegal-text: #cdd9e5, + color-prettylights-syntax-invalid-illegal-bg: #922323, + color-prettylights-syntax-carriage-return-text: #cdd9e5, + color-prettylights-syntax-carriage-return-bg: #ad2e2c, + color-prettylights-syntax-string-regexp: #8ddb8c, + color-prettylights-syntax-markup-list: #eac55f, + color-prettylights-syntax-markup-heading: #316dca, + color-prettylights-syntax-markup-italic: #adbac7, + color-prettylights-syntax-markup-bold: #adbac7, + color-prettylights-syntax-markup-deleted-text: #ffd8d3, + color-prettylights-syntax-markup-deleted-bg: #78191b, + color-prettylights-syntax-markup-inserted-text: #b4f1b4, + color-prettylights-syntax-markup-inserted-bg: #1b4721, + color-prettylights-syntax-markup-changed-text: #ffddb0, + color-prettylights-syntax-markup-changed-bg: #682d0f, + color-prettylights-syntax-markup-ignored-text: #adbac7, + color-prettylights-syntax-markup-ignored-bg: #255ab2, + color-prettylights-syntax-meta-diff-range: #dcbdfb, + color-prettylights-syntax-sublimelinter-gutter-mark: #545d68, + )); .blob-num { - color: var(#{$rootPrefix}color-blob-num); + color: fixit-var(color-blob-num); } .blob-code-inner { - color: var(#{$rootPrefix}color-blob-code-inner); + color: fixit-var(color-blob-code-inner); } .pl-c /* comment, punctuation.definition.comment, string.comment */ { - color: var(#{$rootPrefix}color-prettylights-syntax-comment); + color: fixit-var(color-prettylights-syntax-comment); } .pl-c1 /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header, meta.output */, .pl-s .pl-v /* string variable */ { - color: var(#{$rootPrefix}color-prettylights-syntax-constant); + color: fixit-var(color-prettylights-syntax-constant); } .pl-e /* entity */, .pl-en /* entity.name */ { - color: var(#{$rootPrefix}color-prettylights-syntax-entity); + color: fixit-var(color-prettylights-syntax-entity); } .pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */, .pl-s .pl-s1 /* string source */ { - color: var(#{$rootPrefix}color-prettylights-syntax-storage-modifier-import); + color: fixit-var(color-prettylights-syntax-storage-modifier-import); } .pl-ent /* entity.name.tag, markup.quote */ { - color: var(#{$rootPrefix}color-prettylights-syntax-entity-tag); + color: fixit-var(color-prettylights-syntax-entity-tag); } .pl-k /* keyword, storage, storage.type */ { - color: var(#{$rootPrefix}color-prettylights-syntax-keyword); + color: fixit-var(color-prettylights-syntax-keyword); } .pl-s /* string */, @@ -83,26 +83,26 @@ .pl-sr .pl-cce /* string.regexp constant.character.escape */, .pl-sr .pl-sre /* string.regexp source.ruby.embedded */, .pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ { - color: var(#{$rootPrefix}color-prettylights-syntax-string); + color: fixit-var(color-prettylights-syntax-string); } .pl-v /* variable */, .pl-smw /* sublimelinter.mark.warning */ { - color: var(#{$rootPrefix}color-prettylights-syntax-variable); + color: fixit-var(color-prettylights-syntax-variable); } .pl-bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ { - color: var(#{$rootPrefix}color-prettylights-syntax-brackethighlighter-unmatched); + color: fixit-var(color-prettylights-syntax-brackethighlighter-unmatched); } .pl-ii /* invalid.illegal */ { - color: var(#{$rootPrefix}color-prettylights-syntax-invalid-illegal-text); - background-color: var(#{$rootPrefix}color-prettylights-syntax-invalid-illegal-bg); + color: fixit-var(color-prettylights-syntax-invalid-illegal-text); + background-color: fixit-var(color-prettylights-syntax-invalid-illegal-bg); } .pl-c2 /* carriage-return */ { - color: var(#{$rootPrefix}color-prettylights-syntax-carriage-return-text); - background-color: var(#{$rootPrefix}color-prettylights-syntax-carriage-return-bg); + color: fixit-var(color-prettylights-syntax-carriage-return-text); + background-color: fixit-var(color-prettylights-syntax-carriage-return-bg); } .pl-c2::before /* carriage-return */ { @@ -111,65 +111,65 @@ .pl-sr .pl-cce /* string.regexp constant.character.escape */ { font-weight: bold; - color: var(#{$rootPrefix}color-prettylights-syntax-string-regexp); + color: fixit-var(color-prettylights-syntax-string-regexp); } .pl-ml /* markup.list */ { - color: var(#{$rootPrefix}color-prettylights-syntax-markup-list); + color: fixit-var(color-prettylights-syntax-markup-list); } .pl-mh /* markup.heading */, .pl-mh .pl-en /* markup.heading entity.name */, .pl-ms /* meta.separator */ { font-weight: bold; - color: var(#{$rootPrefix}color-prettylights-syntax-markup-heading); + color: fixit-var(color-prettylights-syntax-markup-heading); } .pl-mi /* markup.italic */ { font-style: italic; - color: var(#{$rootPrefix}color-prettylights-syntax-markup-italic); + color: fixit-var(color-prettylights-syntax-markup-italic); } .pl-mb /* markup.bold */ { font-weight: bold; - color: var(#{$rootPrefix}color-prettylights-syntax-markup-bold); + color: fixit-var(color-prettylights-syntax-markup-bold); } .pl-md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ { - color: var(#{$rootPrefix}color-prettylights-syntax-markup-deleted-text); - background-color: var(#{$rootPrefix}color-prettylights-syntax-markup-deleted-bg); + color: fixit-var(color-prettylights-syntax-markup-deleted-text); + background-color: fixit-var(color-prettylights-syntax-markup-deleted-bg); } .pl-mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ { - color: var(#{$rootPrefix}color-prettylights-syntax-markup-inserted-text); - background-color: var(#{$rootPrefix}color-prettylights-syntax-markup-inserted-bg); + color: fixit-var(color-prettylights-syntax-markup-inserted-text); + background-color: fixit-var(color-prettylights-syntax-markup-inserted-bg); } .pl-mc /* markup.changed, punctuation.definition.changed */ { - color: var(#{$rootPrefix}color-prettylights-syntax-markup-changed-text); - background-color: var(#{$rootPrefix}color-prettylights-syntax-markup-changed-bg); + color: fixit-var(color-prettylights-syntax-markup-changed-text); + background-color: fixit-var(color-prettylights-syntax-markup-changed-bg); } .pl-mi2 /* markup.ignored, markup.untracked */ { - color: var(#{$rootPrefix}color-prettylights-syntax-markup-ignored-text); - background-color: var(#{$rootPrefix}color-prettylights-syntax-markup-ignored-bg); + color: fixit-var(color-prettylights-syntax-markup-ignored-text); + background-color: fixit-var(color-prettylights-syntax-markup-ignored-bg); } .pl-mdr /* meta.diff.range */ { font-weight: bold; - color: var(#{$rootPrefix}color-prettylights-syntax-meta-diff-range); + color: fixit-var(color-prettylights-syntax-meta-diff-range); } .pl-ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ { - color: var(#{$rootPrefix}color-prettylights-syntax-brackethighlighter-angle); + color: fixit-var(color-prettylights-syntax-brackethighlighter-angle); } .pl-sg /* sublimelinter.gutter-mark */ { - color: var(#{$rootPrefix}color-prettylights-syntax-sublimelinter-gutter-mark); + color: fixit-var(color-prettylights-syntax-sublimelinter-gutter-mark); } .pl-corl /* constant.other.reference.link, string.other.link */ { text-decoration: underline; - color: var(#{$rootPrefix}color-prettylights-syntax-constant-other-reference-link); + color: fixit-var(color-prettylights-syntax-constant-other-reference-link); } } diff --git a/assets/css/_page/_single/_code-syntax/_index.scss b/assets/css/_page/_single/_code-syntax/_index.scss index b2ec6e22..00088764 100644 --- a/assets/css/_page/_single/_code-syntax/_index.scss +++ b/assets/css/_page/_single/_code-syntax/_index.scss @@ -17,13 +17,13 @@ /* LineHighlight */ .hl { display: block; - background-color: var(#{$rootPrefix}code-highlight-color); - box-shadow: -0.75rem 0 0 var(#{$rootPrefix}code-highlight-color), 0.75rem 0 0 var(#{$rootPrefix}code-highlight-color); + background-color: fixit-var(code-highlight-color); + box-shadow: -0.75rem 0 0 fixit-var(code-highlight-color), 0.75rem 0 0 fixit-var(code-highlight-color); } @import 'light'; - [data-theme='dark'] & { + [data-theme=dark] & { @import 'dark'; } } diff --git a/assets/css/_page/_single/_code.scss b/assets/css/_page/_single/_code.scss index 81f919d3..4fb7d5a2 100644 --- a/assets/css/_page/_single/_code.scss +++ b/assets/css/_page/_single/_code.scss @@ -9,11 +9,11 @@ pre { line-height: 1.45em; padding: 0.5rem 0.75rem; overflow: auto; - font-size: $code-block-font-size; - font-family: $code-font-family; - background-color: var(#{$rootPrefix}code-block-background-color); - @include border-radius($global-border-radius); - @include tab-size(4); + font-size: fixit-var(code-block-font-size); + font-family: fixit-var(code-font-family); + background-color: fixit-var(code-block-background-color); + tab-size: 4; + @include border-radius; + pre { margin-top: 0.5rem; @@ -24,10 +24,10 @@ pre { background-color: transparent; font-size: inherit; line-height: inherit; + min-width: max-content; @include border-radius(0); - @include max-content(min-width); - [data-theme='dark'] & { + [data-theme=dark] & { background-color: transparent; } } @@ -41,9 +41,9 @@ pre { .highlight, .gist { - font-size: $code-block-font-size; - font-family: $code-font-family; - #{$rootPrefix}scrollbar-thumb-color: inherit; + font-size: fixit-var(code-block-font-size); + font-family: fixit-var(code-font-family); + @include set-fixit-var(scrollbar-thumb-color, inherit); table { width: 100%; @@ -66,13 +66,13 @@ pre { .highlight { margin: 0.5rem 0; position: relative; - @include border-radius($global-border-radius); + @include border-radius; // lineNumbersInTable=true > div.chroma { position: relative; - background-color: var(#{$rootPrefix}code-block-background-color); - @include border-radius($global-border-radius); + background-color: fixit-var(code-block-background-color); + @include border-radius; &:is(pre):has(.ln) { padding: 0.5rem; @@ -81,8 +81,8 @@ pre { .lntable { overflow: auto; display: block; - background-color: var(#{$rootPrefix}code-block-background-color); - @include border-radius($global-border-radius); + background-color: fixit-var(code-block-background-color); + @include border-radius; td { vertical-align: top; @@ -120,7 +120,7 @@ pre { // Line numbers .lnt, .ln { - color: var(#{$rootPrefix}global-font-secondary-color); + color: fixit-var(secondary); @include user-select(none); } @@ -136,24 +136,26 @@ pre { overflow: hidden; height: auto; position: relative; - counter-reset: codeNos calc(var(#{$rootPrefix}line-start) - 1); - @include border-radius($global-border-radius); - @include transition(height 0.5s ease-out); - @include border-radius($global-border-radius); + counter-reset: codeNos calc(#{fixit-var(line-start)} - 1); + transition: height 0.5s ease-out; + @include border-radius; + @include border-radius; // attr() for arbitrary properties is currently only supported in Chromium-based browsers (see https://caniuse.com/css3-attr); // non-supporting browsers fall back to values set via Hugo templating in render-codeblock.html - #{$rootPrefix}max-shown-lines: attr(data-max number, 10); - #{$rootPrefix}line-start: attr(data-line-start number, 1); - #{$rootPrefix}line-digit: attr(data-line-digit number, 1); + @include set-fixit-vars(( + max-shown-lines: attr(data-max number, 10), + line-start: attr(data-line-start number, 1), + line-digit: attr(data-line-digit number, 1), + )); } // code preview &:has(.code-expand-btn):not(.is-expanded, .is-collapsed) { .code-wrapper { - height: calc(1.45em * var(#{$rootPrefix}max-shown-lines) + var(#{$rootPrefix}code-expand-offset, 0.5rem)); + height: calc(1.45em * #{fixit-var(max-shown-lines)} + #{fixit-var(code-expand-offset, 0.5rem)}); } &[data-mode='mac'] .code-wrapper { - #{$rootPrefix}code-expand-offset: 1.875rem + 0.5rem; + @include set-fixit-var(code-expand-offset, 1.875rem + 0.5rem); } } @@ -163,22 +165,22 @@ pre { align-items: center; box-sizing: border-box; width: 100%; - font-family: $global-font-family; + font-family: fixit-var(global-font-family); font-weight: bold; line-height: 1.4em; - color: var(#{$rootPrefix}code-header-color); - background-color: var(#{$rootPrefix}code-header-background-color); + color: fixit-var(code-header-color); + background-color: fixit-var(code-header-background-color); position: sticky; - top: var(#{$rootPrefix}breadcrumb-height); - @include z-index(0, 1); - @include border-radius($global-border-radius $global-border-radius 0 0); - @include transition(border-radius 0s); + top: fixit-var(breadcrumb-height); + transition: border-radius 0s; + @include z-index(base); + @include border-radius(top); + .code-wrapper { - @include border-radius(0 0 $global-border-radius $global-border-radius); + @include border-radius(bottom); > pre.chroma { - @include border-radius(0 0 $global-border-radius $global-border-radius); + @include border-radius(bottom); } } @@ -192,7 +194,7 @@ pre { &::after { padding-left: 0.2rem; - content: attr(data-name, var(#{$rootPrefix}code-type, 'Code')); + content: attr(data-name, fixit-var(code-type, 'Code')); } // filename for code block @@ -202,20 +204,20 @@ pre { .arrow { padding: 0 0.2rem; - @include transition(transform 0.2s ease); + transition: transform 0.2s ease; } .title-inner { position: absolute; left: 50%; transform: translateX(-50%); - background-color: var(#{$rootPrefix}code-header-background-color); + background-color: fixit-var(code-header-background-color); padding-inline: 1em; max-width: calc(100% - 200px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - @include z-index(0, 2); + @include z-index(base, 1); } } @@ -232,12 +234,13 @@ pre { .copy-btn[data-copied] .fa-clone { --fa: "\f00c"; font-weight: 900; - color: var(#{$rootPrefix}global-link-hover-color); + color: fixit-var(global-link-hover-color); } @each $type, $text in $code-type-map { &.language-#{to-lower-case($type)} { - #{$rootPrefix}code-type: $text; + // e.g., --fi-code-type: "JavaScript"; + @include set-fixit-var(code-type, '"#{$text}"'); } } } @@ -246,7 +249,7 @@ pre { &:not(.line-nos-hidden) .line-nos-btn, .code-header [role='button']:hover, &:has([contenteditable='true']) .edit-btn { - color: var(#{$rootPrefix}global-link-hover-color); + color: fixit-var(global-link-hover-color); } .code-expand-btn { @@ -261,10 +264,10 @@ pre { rgba($code-background-color, 0.9) 60%, $code-background-color 100% ); - @include z-index(0, 1); - @include border-radius(0 0 $global-border-radius $global-border-radius); + @include z-index(base); + @include border-radius(bottom); - [data-theme='dark'] & { + [data-theme=dark] & { background: linear-gradient( 180deg, rgba($code-background-color-dark, 0) 0%, @@ -279,7 +282,7 @@ pre { animation-duration: 1.5s; animation-iteration-count: infinite; animation-delay: 0.3s; - @include transition(transform 0.2s ease); + transition: transform 0.2s ease; } } @@ -290,12 +293,12 @@ pre { // classic mode code block collapsed &.is-collapsed { .code-header { - #{$rootPrefix}code-header-background-color: #{darken($code-background-color, 6%)}; - @include border-radius($global-border-radius); - @include transition(border-radius 0.2s ease 0.2s); + 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'] & { - #{$rootPrefix}code-header-background-color: #{darken($code-background-color-dark, 6%)}; + [data-theme=dark] & { + @include set-fixit-var(code-header-background-color, darken($code-background-color-dark, 6%)); } + .code-wrapper { @@ -304,7 +307,7 @@ pre { } .arrow { - @include transform(rotate(-90deg)); + transform: rotate(-90deg); } .ellipses-btn { @@ -392,11 +395,11 @@ pre { content: counter(codeNos); white-space: nowrap; text-align: right; - min-width: calc(var(#{$rootPrefix}line-digit) * 1ch); + min-width: calc(#{fixit-var(line-digit)} * 1ch); padding-inline: 0.75rem; flex-shrink: 0; - color: var(#{$rootPrefix}global-font-secondary-color); - background-color: var(#{$rootPrefix}code-block-background-color); + color: fixit-var(secondary); + background-color: fixit-var(code-block-background-color); } // highlight for line numbers @@ -424,7 +427,7 @@ pre { &:not([data-mode='classic']) { border: 1px solid darken($code-background-color, 3%); - [data-theme='dark'] & { + [data-theme=dark] & { border-color: darken($code-background-color-dark, 3%); } } @@ -434,20 +437,22 @@ pre { padding-top: 1.875rem; &::after { - background: var(#{$rootPrefix}mac-red, #fc625d); - box-shadow: 20px 0 var(#{$rootPrefix}mac-yellow, #fdbc40), 40px 0 var(#{$rootPrefix}mac-green, #35cd4b); + background: fixit-var(mac-red, #fc625d); + box-shadow: 20px 0 fixit-var(mac-yellow, #fdbc40), 40px 0 fixit-var(mac-green, #35cd4b); left: 8px; top: 8px; position: absolute; - border-radius: 50%; content: ' '; height: 12px; width: 12px; + @include border-radius(full); - [data-theme='dark'] & { - #{$rootPrefix}mac-red-dark: #ff5f56; - #{$rootPrefix}mac-yellow-dark: #febc2e; - #{$rootPrefix}mac-green-dark: #28c840; + [data-theme=dark] & { + @include set-fixit-vars(( + mac-red: #ff5f56, + mac-yellow: #febc2e, + mac-green: #28c840, + )); } } } @@ -465,8 +470,8 @@ pre { // gist shortcode .gist { - background-color: var(#{$rootPrefix}code-block-background-color); - @include border-radius($global-border-radius $global-border-radius 0 0); + background-color: fixit-var(code-block-background-color); + @include border-radius(top); .gist-file, .gist-data, @@ -487,8 +492,8 @@ pre { td.blob-num { position: sticky; left: 0; - background-color: var(#{$rootPrefix}code-block-background-color); - @include z-index(0, 1); + background-color: fixit-var(code-block-background-color); + @include z-index(base); } td.blob-code { @@ -501,11 +506,11 @@ pre { .gist-meta { padding: 0.4rem 0.8rem; @include link(false, false); - @include border-radius(0 0 $global-border-radius $global-border-radius); - background-color: var(#{$rootPrefix}gist-meta-background-color); + @include border-radius(bottom); + background-color: fixit-var(gist-meta-background-color); } - [data-theme='dark'] & { + [data-theme=dark] & { @import './_code-syntax/github-dark-dimmed'; } } diff --git a/assets/css/_page/_single/_collections.scss b/assets/css/_page/_single/_collections.scss index b4374dfc..1df99def 100644 --- a/assets/css/_page/_single/_collections.scss +++ b/assets/css/_page/_single/_collections.scss @@ -5,11 +5,11 @@ margin-block: 1rem; padding: 1rem 1.25rem; position: relative; - @include border-radius($global-border-radius * 1.5); + @include border-radius(0.5rem); @include user-select(none); @extend .print-d-none; - [data-theme='dark'] & { + [data-theme=dark] & { background-color: lighten($global-background-color-dark, 3%); } @@ -22,7 +22,7 @@ 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'] & { + [data-theme=dark] & { background: linear-gradient( to bottom, rgba(255, 255, 255, 0.03), @@ -51,7 +51,7 @@ font-weight: 500; display: flex; align-items: center; - @include transition(all 0.3s ease-out); + transition: all 0.3s ease-out; &:only-child { max-width: 100%; @@ -73,11 +73,11 @@ } &[rel='prev']:hover { - @include transform(translateX(-4px)); + transform: translateX(-4px); } &[rel='next']:hover { - @include transform(translateX(4px)); + transform: translateX(4px); } } } @@ -86,7 +86,7 @@ // Collection aside container .aside-collection { position: sticky; - top: calc(#{$header-height} + var(#{$rootPrefix}breadcrumb-height)); + top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)}); box-sizing: border-box; @include overflow-wrap(break-word); @include blur; @@ -103,7 +103,7 @@ .collection-summary { background-color: darken($global-background-color, 4%); - [data-theme='dark'] & { + [data-theme=dark] & { background-color: lighten($global-background-color-dark, 4%); } } @@ -116,7 +116,7 @@ padding: 0.2em 0.5em; background-color: darken($global-background-color, 3%); - [data-theme='dark'] & { + [data-theme=dark] & { background-color: lighten($global-background-color-dark, 3%); } @@ -127,7 +127,7 @@ .collection-name { flex-grow: 1; font-weight: bold; - font-size: $collection-title-font-size; + font-size: fixit-var(collection-title-font-size); &::before { content: attr(title) '・'; @@ -136,7 +136,7 @@ .collection-count { flex-shrink: 0; - color: var(#{$rootPrefix}secondary); + color: fixit-var(secondary); } .details-icon { @@ -147,10 +147,10 @@ } .collection-content { - font-size: $collection-list-font-size; + font-size: fixit-var(collection-list-font-size); background-color: darken($global-background-color, 2%); - [data-theme='dark'] & { + [data-theme=dark] & { background-color: lighten($global-background-color-dark, 2%); } @@ -171,27 +171,15 @@ margin-right: 0.5em; position: relative; bottom: 2px; - color: $single-link-color; - - [data-theme='dark'] & { - color: $single-link-color-dark; - } + color: fixit-var(single-link-color); } .collection-item > .active { font-weight: bold; - color: $single-link-color; - - [data-theme='dark'] & { - color: $single-link-color-dark; - } + color: fixit-var(single-link-color); &::before { - color: $single-link-hover-color; - - [data-theme='dark'] & { - color: $single-link-hover-color-dark; - } + color: fixit-var(single-link-hover-color); } } } @@ -203,19 +191,19 @@ gap: 0.5em; background-color: darken($global-background-color, 3%); - [data-theme='dark'] & { + [data-theme=dark] & { background-color: lighten($global-background-color-dark, 3%); } a.collection-nav-item { padding-inline: 2px; - border-radius: 50%; - @include transition(background-color 0.3s ease-out); + @include border-radius(full); + transition: background-color 0.3s ease-out; &:hover { background-color: darken($global-background-color, 10%); - [data-theme='dark'] & { + [data-theme=dark] & { background-color: lighten($global-background-color-dark, 10%); } } diff --git a/assets/css/_page/_single/_color-preview.scss b/assets/css/_page/_single/_color-preview.scss index 8dacb549..bde5196e 100644 --- a/assets/css/_page/_single/_color-preview.scss +++ b/assets/css/_page/_single/_color-preview.scss @@ -1,22 +1,22 @@ // Color preview styles for inline code .color-code { position: relative; - #{$rootPrefix}color-code-size: 0.64em; + @include set-fixit-var(color-code-size, 0.64em); .color-preview { display: inline-block; - width: var(#{$rootPrefix}color-code-size); - height: var(#{$rootPrefix}color-code-size); - border-radius: 50%; + width: fixit-var(color-code-size); + height: fixit-var(color-code-size); + @include border-radius(full); margin-right: 0.25em; vertical-align: middle; border: 1px solid; - border-color: var(#{$rootPrefix}color-preview-border-color, #d1d9e0b3); + border-color: fixit-var(color-preview-border-color, #d1d9e0b3); pointer-events: none; transform: translateY(-1px); - [data-theme='dark'] & { - #{$rootPrefix}color-preview-border-color: #3d444db3; + [data-theme=dark] & { + @include set-fixit-var(color-preview-border-color, #3d444db3); } } } diff --git a/assets/css/_page/_single/_diagram-copy-btn.scss b/assets/css/_page/_single/_diagram-copy-btn.scss index 091da3e3..53d1ca9e 100644 --- a/assets/css/_page/_single/_diagram-copy-btn.scss +++ b/assets/css/_page/_single/_diagram-copy-btn.scss @@ -15,30 +15,36 @@ padding: 0.5rem; user-select: none; border: 1px solid; - border-radius: 6px; - color: var(#{$rootPrefix}dcb-color, #25292e); - border-color: var(#{$rootPrefix}dcb-border-color, #d1d9e0); - background-color: var(#{$rootPrefix}dcb-background-color, #f6f8fa); - box-shadow: var(#{$rootPrefix}dcb-box-shadow, 0px 1px 0px 0px #1f23280a); + 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); transition-duration: 0.1s; transition-property: color, background-color, box-shadow, border-color; - @include z-index(0, 1); + @include border-radius; + @include z-index(base); @extend .print-d-none; - [data-theme='dark'] & { - #{$rootPrefix}dcb-color: #d1d7e0; - #{$rootPrefix}dcb-border-color: #3d444d; - #{$rootPrefix}dcb-background-color: #2a313c; - #{$rootPrefix}dcb-box-shadow: 0px 0px 0px 0px #000000; + [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 { - #{$rootPrefix}dcb-border-color: #d1d9e0; - #{$rootPrefix}dcb-background-color: #eff2f5; + @include set-fixit-vars(( + dcb-border-color: #d1d9e0, + dcb-background-color: #eff2f5, + )); - [data-theme='dark'] & { - #{$rootPrefix}dcb-border-color: #3d444d; - #{$rootPrefix}dcb-background-color: #2f3742; + [data-theme=dark] & { + @include set-fixit-vars(( + dcb-border-color: #3d444d, + dcb-background-color: #2f3742, + )); } } @@ -50,7 +56,7 @@ .fa-clone { --fa: '\f00c'; --fa-style: 900; - color: var(#{$rootPrefix}global-link-hover-color); + color: fixit-var(global-link-hover-color); } } } diff --git a/assets/css/_page/_single/_fixit-decryptor.scss b/assets/css/_page/_single/_fixit-decryptor.scss index f91e7b55..699fc9dd 100644 --- a/assets/css/_page/_single/_fixit-decryptor.scss +++ b/assets/css/_page/_single/_fixit-decryptor.scss @@ -1,7 +1,7 @@ .fixit-decryptor-container { - font-family: $global-font-family; + font-family: fixit-var(global-font-family); text-align: center; - margin-block: var(#{$rootPrefix}decryptor-margin-block); + margin-block: fixit-var(decryptor-margin-block); .fixit-decryptor-loading { vertical-align: middle; @@ -13,29 +13,24 @@ display: none; box-sizing: border-box; outline: none; - color: var(#{$rootPrefix}global-font-color); - border: 1px solid darken($global-border-color, 15%); - border-radius: $global-border-radius; - @include transition(all 0.1s ease-out); - box-shadow: 0px 0px 5px 0px darken($global-border-color, 15%); + color: fixit-var(global-font-color); + border: 1px solid fixit-var(global-border-color); + box-shadow: 0px 0px 5px 0px fixit-var(global-border-color); + @include border-radius; + transition: all 0.1s ease-out; &:active, &:focus, &:hover { color: darken($global-link-hover-color, 6%); - border-color: var(#{$rootPrefix}global-link-hover-color); + border-color: fixit-var(global-link-hover-color); box-shadow: 0px 0px 5px 0px lighten($global-link-hover-color, 20%); - [data-theme='dark'] & { + [data-theme=dark] & { color: lighten($global-link-hover-color-dark, 6%); box-shadow: 0px 0px 5px 0px darken($global-link-hover-color-dark, 20%); } } - - [data-theme='dark'] & { - border-color: lighten($global-border-color-dark, 15%); - box-shadow: 0px 0px 5px 0px lighten($global-border-color-dark, 15%); - } } .fixit-decryptor-input { @@ -43,20 +38,15 @@ height: 3rem; padding-left: 1rem; padding-right: 1rem; - background-color: var(#{$rootPrefix}global-background-color); + background-color: fixit-var(global-background-color); } .fixit-decryptor-btn, .fixit-encryptor-btn { cursor: pointer; - @include transition(all 0.1s ease-out); padding: 0.8rem 1rem; - - background-color: $header-background-color; - - [data-theme='dark'] & { - background-color: $header-background-color-dark; - } + background-color: fixit-var(global-background-color); + transition: all 0.1s ease-out; } .fixit-encryptor-btn { @@ -84,7 +74,7 @@ fixit-encryptor { // fixit-encryptor for for the encrypted pages article fixit-encryptor { .fixit-decryptor-container { - #{$rootPrefix}decryptor-margin-block: 2rem; + @include set-fixit-var(decryptor-margin-block, 2rem); } &.decrypted > .fixit-decryptor-container { .fixit-decryptor-loading, @@ -102,7 +92,7 @@ article fixit-encryptor { // fixit-encryptor shortcodes #content fixit-encryptor { .fixit-decryptor-container { - #{$rootPrefix}decryptor-margin-block: 1rem; + @include set-fixit-var(decryptor-margin-block, 1rem); } &.decrypted > .fixit-decryptor-container { display: none; diff --git a/assets/css/_page/_single/_footer.scss b/assets/css/_page/_single/_footer.scss index e7647158..e12d05c7 100644 --- a/assets/css/_page/_single/_footer.scss +++ b/assets/css/_page/_single/_footer.scss @@ -6,27 +6,23 @@ } .post-info { - border-bottom: 1px solid $global-border-color; + border-bottom: 1px solid fixit-var(global-border-color); padding: 0.3rem 0; - [data-theme='dark'] & { - border-bottom: 1px solid $global-border-color-dark; - } - .post-info-line { display: flex; justify-content: space-between; .post-info-mod { font-size: 0.8em; - color: var(#{$rootPrefix}global-font-secondary-color); + color: fixit-var(secondary); @include link(false, false); } .post-info-license { font-size: 0.8em; - color: var(#{$rootPrefix}global-font-secondary-color); + color: fixit-var(secondary); @include link(false, false); } @@ -90,18 +86,18 @@ flex: 1; font-size: 1rem; font-weight: 600; - @include transition(all 0.3s ease-out); + transition: all 0.3s ease-out; &[rel='next'] { text-align: right; } &[rel='prev']:hover { - @include transform(translateX(-4px)); + transform: translateX(-4px); } &[rel='next']:hover { - @include transform(translateX(4px)); + transform: translateX(4px); } } } diff --git a/assets/css/_page/_single/_index.scss b/assets/css/_page/_single/_index.scss index 05860d1c..2598c908 100644 --- a/assets/css/_page/_single/_index.scss +++ b/assets/css/_page/_single/_index.scss @@ -17,14 +17,14 @@ width: max-content; transform: rotate(30deg); margin-right: 0.25em; - color: var(#{$rootPrefix}danger); + color: fixit-var(danger); } .icon-repost { display: inline-block; width: max-content; margin-right: 0.25em; - color: var(#{$rootPrefix}success); + color: fixit-var(success); } } @@ -37,7 +37,7 @@ .post-meta { font-size: 0.875rem; - color: var(#{$rootPrefix}global-font-secondary-color); + color: fixit-var(secondary); .comment-visitors, .comment-count { @@ -56,16 +56,12 @@ img.avatar { width: 1.3rem; height: 1.3rem; - border-radius: 50%; vertical-align: text-bottom; - border: 0.25px solid $global-border-color; + border: 0.25px solid fixit-var(global-border-color); box-sizing: border-box; object-position: center; - @include object-fit(cover); - - [data-theme='dark'] & { - border-color: $global-border-color-dark; - } + @include border-radius(full); + object-fit: cover; } } } @@ -89,14 +85,14 @@ text-align: center; font-size: 15px; padding: 5px; - color: var(#{$rootPrefix}global-font-secondary-color); + color: fixit-var(global-placeholder-color); } hr { position: relative; height: 1em; margin-block: 1em; - background: linear-gradient(to right, var(#{$rootPrefix}hr-background-color) 50%, transparent 50%); + background-image: linear-gradient(to right, fixit-var(global-border-color) 50%, transparent 50%); background-size: 10px 2px; background-position: center; background-repeat: repeat-x; @@ -111,8 +107,8 @@ left: 5%; top: 50%; transform: translateY(-50%); - z-index: 1; - color: var(#{$rootPrefix}hr-active-color); + @include z-index(base); + color: fixit-var(hr-active-color); font-size: 20px; line-height: 1; transition: left 1s ease-in-out, color 0.3s ease, border-color 0.3s ease; @@ -133,7 +129,7 @@ > h2 { font-size: 1.5em; padding-bottom: 0.3em; - border-bottom: 1px solid $global-border-color; + border-bottom: 1px solid fixit-var(global-border-color); } > h3 { @@ -159,7 +155,7 @@ margin-top: 1.5rem; margin-bottom: 1rem; - [data-theme='dark'] & { + [data-theme=dark] & { font-weight: bolder; } @@ -192,7 +188,7 @@ strong { font-weight: bold; - [data-theme='dark'] & { + [data-theme=dark] & { color: #ddd; } } @@ -203,60 +199,62 @@ white-space: normal; @include overflow-wrap(break-word); - [data-theme='dark'] & b, - [data-theme='dark'] & strong { - color: $single-link-color-dark; + b, + strong { + [data-theme=dark] & { + color: inherit; + } } } - [data-theme='dark'] a:hover b, - [data-theme='dark'] a:hover strong { - color: $single-link-hover-color-dark; - } - - ul, - ol, - dl { + > ul, + > ol, + > dl { margin-block: 0.5em; } - ul { - list-style-type: disc; + ol ol, + ol ul, + ul ol, + ul ul { + padding-left: 20px; + } - // Task lists - li[data-task] { - list-style: none; - margin-left: -1.5rem; - } + li::marker { + color: fixit-var(secondary); + } + li:hover::marker { + color: fixit-var(single-link-hover-color); } // Task lists li[data-task] { - color: var(#{$rootPrefix}task-color); + list-style: none; + color: fixit-var(task-color); .checkbox-icon { - margin-right: 0.25em; - color: var(#{$rootPrefix}checkbox-color); + margin: 0 .25em 0 -1.5em; + color: fixit-var(checkbox-color); } } li[data-task='x'], li[data-task='-'] { - #{$rootPrefix}task-color: var(#{$rootPrefix}secondary); text-decoration: line-through rgba(145, 145, 145, 0.6); + @include set-fixit-var(task-color, fixit-var(secondary)); } li[data-task='x'] { - #{$rootPrefix}checkbox-color: var(#{$rootPrefix}primary); + @include set-fixit-var(checkbox-color, fixit-var(primary)); } li[data-task='-'] { opacity: 0.6; } li[data-task='/'] { - #{$rootPrefix}task-color: var(#{$rootPrefix}success); + @include set-fixit-var(task-color, fixit-var(success)); } li[data-task='!'] { - #{$rootPrefix}checkbox-color: var(#{$rootPrefix}danger); + @include set-fixit-var(checkbox-color, fixit-var(danger)); } li[data-task='?'] { - #{$rootPrefix}checkbox-color: var(#{$rootPrefix}warning); + @include set-fixit-var(checkbox-color, fixit-var(warning)); } dl { @@ -269,23 +267,25 @@ } ruby { - background-color: var(#{$rootPrefix}code-block-background-color); + background-color: fixit-var(code-block-background-color); rt { - color: var(#{$rootPrefix}global-font-secondary-color); + color: fixit-var(secondary); } } mark { padding: 0.14em 0.28em; - background-color: var(#{$rootPrefix}mark-background-color, mark); - color: var(#{$rootPrefix}mark-color, marktext); - @include border-radius($global-border-radius); + background-color: fixit-var(mark-background-color, mark); + color: fixit-var(mark-color, marktext); + @include border-radius; @each $color, $value in $theme-colors { &.mark-#{$color} { - #{$rootPrefix}mark-color: #fff; - #{$rootPrefix}mark-background-color: var(#{$rootPrefix}#{$color}); + @include set-fixit-vars(( + mark-color: #fff, + mark-background-color: fixit-var(#{$color}), + )); } } } @@ -293,37 +293,25 @@ .table-wrapper { position: relative; overflow-x: auto; - #{$rootPrefix}scrollbar-thumb-color: #{$table-background-color}; - - [data-theme='dark'] & { - #{$rootPrefix}scrollbar-thumb-color: #{$table-background-color-dark}; - } + @include set-fixit-var(scrollbar-thumb-color, fixit-var(table-background-color)); > table { width: 100%; max-width: 100%; margin: 0.625rem 0; border-spacing: 0; - background: $table-background-color; + background: fixit-var(table-background-color); border-collapse: collapse; - [data-theme='dark'] & { - background: $table-background-color-dark; - } - thead { - background: $table-thead-color; - - [data-theme='dark'] & { - background-color: $table-thead-color-dark; - } + background: fixit-var(table-thead-color); } &:not([class]) tbody { & tr:nth-child(odd) { background: darken($table-background-color, 2.25%); - [data-theme='dark'] & { + [data-theme=dark] & { background-color: lighten($table-background-color-dark, 2.75%); } } @@ -331,7 +319,7 @@ & tr:hover { background: darken($table-background-color, 4.5%); - [data-theme='dark'] & { + [data-theme=dark] & { background-color: lighten($table-background-color-dark, 5.5%); } } @@ -342,7 +330,7 @@ padding: 0.3rem 1rem; border: 1px solid darken($table-thead-color, 2%); - [data-theme='dark'] & { + [data-theme=dark] & { border-color: darken($table-thead-color-dark, 2%); } } @@ -384,8 +372,8 @@ blockquote { display: block; - border-left: 0.25em solid $global-border-color; - color: $blockquote-color; + border-left: 0.25em solid fixit-var(global-border-color); + color: fixit-var(blockquote-color); padding: 0 1em; margin: 1rem 0; @@ -398,11 +386,6 @@ margin-inline-start: 0.25em; } - [data-theme='dark'] & { - color: $blockquote-color-dark; - border-left-color: $global-border-color-dark; - } - @include link(false, true); } @@ -410,10 +393,10 @@ padding: 2px 4px; background-color: rgba(238, 238, 238, 0.7); color: #555555; - border-radius: 4px; cursor: pointer; + @include border-radius(0.25rem); - [data-theme='dark'] & { + [data-theme=dark] & { background-color: rgba(56, 139, 253, 0.1); color: #58a6ff; } @@ -424,7 +407,12 @@ .footnotes { font-size: 0.75rem; white-space: normal; - color: darken($global-font-secondary-color, 5%); + color: #a3a3ae; + @include link(false, true); + + [data-theme=dark] & { + color: #9d9d9f; + } ol { margin-block: 1em; @@ -432,7 +420,7 @@ } hr { - background-color: var(#{$rootPrefix}hr-background-color); + background-color: fixit-var(global-border-color); height: 1px; margin-block: 1em; } @@ -446,12 +434,6 @@ text-decoration: underline; } - @include link(false, true); - - [data-theme='dark'] & { - color: lighten($global-font-secondary-color-dark, 5%); - } - p { margin: 0.25rem 0; } @@ -460,19 +442,13 @@ kbd { display: inline-block; padding: 0 0.25rem; - background-color: var(#{$rootPrefix}global-background-color); - border: 1px solid $global-border-color; + background-color: fixit-var(global-background-color); + border: 1px solid fixit-var(global-border-color); font-size: 0.8rem; - font-family: $code-font-family; - color: $code-color; - @include border-radius($global-border-radius); - @include box-shadow(inset 0 -1px 0 $global-border-color); - - [data-theme='dark'] & { - border: 1px solid $global-border-color-dark; - color: $code-color-dark; - @include box-shadow(inset 0 -1px 0 $global-border-color-dark); - } + font-family: fixit-var(code-font-family); + color: fixit-var(code-color); + box-shadow: inset 0 -1px 0 fixit-var(global-border-color); + @include border-radius; } // KaTeX styles @@ -485,7 +461,7 @@ padding: 0.14em 0.28em; background-color: mark; cursor: help; - @include border-radius($global-border-radius); + @include border-radius; } // MathJax styles diff --git a/assets/css/_page/_single/_related.scss b/assets/css/_page/_single/_related.scss index 751ca3cc..45e5fff5 100644 --- a/assets/css/_page/_single/_related.scss +++ b/assets/css/_page/_single/_related.scss @@ -5,7 +5,7 @@ display: block; border: 0; padding-top: 1px; - background: var(#{$rootPrefix}divider-edge-weak); + background: fixit-var(divider-edge-weak); margin-block: 1rem 0.5rem; } @@ -25,12 +25,12 @@ .related-title { font-weight: bold; - font-size: $related-title-font-size; + font-size: fixit-var(related-title-font-size); } .related-count { flex-shrink: 0; - color: var(#{$rootPrefix}secondary); + color: fixit-var(secondary); } .details-icon { @@ -41,7 +41,7 @@ } .related-content { - font-size: $related-list-font-size; + font-size: fixit-var(related-list-font-size); .related-list { margin: 0; @@ -60,14 +60,8 @@ margin-right: 0.5em; position: relative; bottom: 2px; - color: $single-link-color; - - [data-theme='dark'] & { - color: $single-link-color-dark; - } + color: fixit-var(single-link-color); } } } } - - diff --git a/assets/css/_page/_single/_reward.scss b/assets/css/_page/_single/_reward.scss index d44c7071..bda337b9 100644 --- a/assets/css/_page/_single/_reward.scss +++ b/assets/css/_page/_single/_reward.scss @@ -29,7 +29,7 @@ } &:hover span[data-animation] { - animation: var(--animation-reward, jackInTheBox) 0.8s infinite linear; + animation: fixit-var(animation-reward, jackInTheBox) 0.8s infinite linear; // The animation may affect :hover of img in dark mode pointer-events: none; } @@ -38,7 +38,7 @@ display: inline-block; margin: 0.8em 2em 0; max-width: 100%; - width: $reward-img-width; + width: fixit-var(reward-img-width); } } @@ -49,13 +49,13 @@ left: 50%; transform: translate(-50%, -50%); padding: 1rem; - background-color: var(#{$rootPrefix}global-background-color); - @include z-index(2); - @include border-radius($global-border-radius); - @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.2)); + 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'] & { - @include box-shadow(0 0 1.5rem 0 rgba(255, 255, 255, 0.2)); + [data-theme=dark] & { + box-shadow: 0 0 1.5rem 0 rgba(255, 255, 255, 0.2); } } } @@ -65,30 +65,23 @@ box-sizing: border-box; cursor: pointer; outline: none; - color: lighten($reward-color, 5%); + color: fixit-var(reward-color, lighten($reward-color, 5%)); border: 2px solid lighten($reward-color, 10%); - border-radius: $global-border-radius; padding: 0.6rem 1rem; - background-color: var(#{$rootPrefix}global-background-color); + background-color: fixit-var(global-background-color); vertical-align: text-top; line-height: 1rem; - @include transition(all 0.3s ease-out); + @include border-radius; + transition: all 0.3s ease-out; &:active, &:hover { color: #ffffff; - border-color: $reward-color; - background-color: $reward-color; - - [data-theme='dark'] & { - color: #ffffff; - border-color: $reward-color-dark; - background-color: $reward-color-dark; - } + border-color: fixit-var(reward-color); + background-color: fixit-var(reward-color); } - [data-theme='dark'] & { - color: $reward-color; + [data-theme=dark] & { border-color: lighten($reward-color, 5%); } } diff --git a/assets/css/_page/_single/_shortcodes/_admonition.scss b/assets/css/_page/_single/_shortcodes/_admonition.scss index f7a39d26..2ee501d3 100644 --- a/assets/css/_page/_single/_shortcodes/_admonition.scss +++ b/assets/css/_page/_single/_shortcodes/_admonition.scss @@ -4,12 +4,12 @@ padding: 0 0.75rem; border-left: .25rem solid; overflow: hidden; - background-color: var(#{$rootPrefix}admonition-bg-color); - border-left-color: var(#{$rootPrefix}admonition-color); - @include border-radius($global-border-radius); + background-color: fixit-var(admonition-bg-color); + border-left-color: fixit-var(admonition-color); + @include border-radius; .admonition-title { - font-weight: var(#{$rootPrefix}admonition-title-font-weight, bold); + font-weight: fixit-var(admonition-title-font-weight, bold); margin: 0 -0.75rem; padding: 0.25rem 1.8rem; border-bottom: 1px solid; @@ -20,14 +20,14 @@ font-weight: bolder; text-shadow: 0 0.05rem 0.05rem rgba(0, 0, 0, 0.2); - [data-theme='dark'] & { + [data-theme=dark] & { text-shadow: 0 0.05rem 0.05rem rgba(255, 255, 255, 0.2); } } // title-only admonition without content &:not(:has(+ .details-content)) { - #{$rootPrefix}admonition-title-font-weight: normal; + @include set-fixit-var(admonition-title-font-weight, normal); padding: 0.75rem 1rem 0.75rem 2.2rem; border: 0; @@ -39,17 +39,17 @@ } > .admonition-title { - border-bottom-color: var(#{$rootPrefix}admonition-bg-color); - background-color: var(#{$rootPrefix}admonition-bg-color-collapsed); - @include transition(all 0.2s ease); + border-bottom-color: fixit-var(admonition-bg-color); + background-color: fixit-var(admonition-bg-color-collapsed); + transition: all 0.2s ease; i.icon { - color: var(#{$rootPrefix}admonition-color); + color: fixit-var(admonition-color); } } &.open > .admonition-title { - background-color: var(#{$rootPrefix}admonition-bg-color); + background-color: fixit-var(admonition-bg-color); } .admonition-content { @@ -81,17 +81,21 @@ } // default admonition type is note - #{$rootPrefix}admonition-color: #{map-get(map-get($admonition-color-map, note), color)}; - #{$rootPrefix}admonition-bg-color: #{map-get(map-get($admonition-color-map, note), bg-color)}; - #{$rootPrefix}admonition-bg-color-collapsed: #{opacify(map-get(map-get($admonition-color-map, note), bg-color), 0.15)}; + @include set-fixit-vars(( + admonition-color: map-get(map-get($admonition-color-map, note), color), + admonition-bg-color: map-get(map-get($admonition-color-map, note), bg-color), + admonition-bg-color-collapsed: opacify(map-get(map-get($admonition-color-map, note), bg-color), 0.15), + )); // set color for each admonition type @each $type, $item in $admonition-color-map { @if $type != 'note' { &.#{$type} { - #{$rootPrefix}admonition-color: #{map-get($item, color)}; - #{$rootPrefix}admonition-bg-color: #{map-get($item, bg-color)}; - #{$rootPrefix}admonition-bg-color-collapsed: #{opacify(map-get($item, bg-color), 0.15)}; + @include set-fixit-vars(( + admonition-color: map-get($item, color), + admonition-bg-color: map-get($item, bg-color), + admonition-bg-color-collapsed: opacify(map-get($item, bg-color), 0.15), + )); } } } @@ -102,7 +106,7 @@ // content-only admonition without title &:not(:has(.admonition-title)) { - border: 1px solid var(#{$rootPrefix}admonition-bg-color); + border: 1px solid fixit-var(admonition-bg-color); .admonition-content { padding: 0.75rem 0.25rem; diff --git a/assets/css/_page/_single/_shortcodes/_cardlink.scss b/assets/css/_page/_single/_shortcodes/_cardlink.scss index 48863858..a938d276 100644 --- a/assets/css/_page/_single/_shortcodes/_cardlink.scss +++ b/assets/css/_page/_single/_shortcodes/_cardlink.scss @@ -1,8 +1,5 @@ -/** - * Card link style - * @author @Lruihao https://lruihao.cn - */ - +/// Card link style +/// @author @Lruihao https://lruihao.cn .card-link { position: relative; display: block; @@ -23,7 +20,7 @@ bottom: 0.75rem; left: 0; right: 0; - background-image: var(#{$rootPrefix}logo-img); + background-image: fixit-var(logo-img); background-repeat: no-repeat; filter: blur(0.5rem); opacity: 0.5; @@ -53,7 +50,7 @@ font-size: 1rem; font-weight: 500; line-height: 1.25; - color: var(#{$rootPrefix}global-font-color); + color: fixit-var(global-font-color); } &meta { @@ -61,7 +58,7 @@ align-items: center; margin-top: 0.25rem; font-size: 0.825rem; - color: var(#{$rootPrefix}global-font-secondary-color); + color: fixit-var(secondary); } &icon-link { @@ -98,10 +95,10 @@ flex-shrink: 0; margin-left: 0.25rem; object-fit: cover; - border-radius: 50%; + @include border-radius(full); } - [data-theme='dark'] & { + [data-theme=dark] & { &content { background-color: rgba(61, 62, 65, 0.88); } diff --git a/assets/css/_page/_single/_shortcodes/_center-quote.scss b/assets/css/_page/_single/_shortcodes/_center-quote.scss index 9ab79dd5..0209785b 100644 --- a/assets/css/_page/_single/_shortcodes/_center-quote.scss +++ b/assets/css/_page/_single/_shortcodes/_center-quote.scss @@ -16,28 +16,20 @@ blockquote.blockquote-center { } &::before { - border-top: 1px solid $global-border-color; + border-top: 1px solid fixit-var(global-border-color); text-align: left; top: -20px; font-family: var(--fa-family-classic); font-weight: 900; content: '\f10d'; - - [data-theme='dark'] & { - border-top-color: $global-border-color-dark; - } } &::after { - border-bottom: 1px solid $global-border-color; + border-bottom: 1px solid fixit-var(global-border-color); bottom: -20px; text-align: right; font-family: var(--fa-family-classic); font-weight: 900; content: '\f10e'; - - [data-theme='dark'] & { - border-bottom-color: $global-border-color-dark; - } } } diff --git a/assets/css/_page/_single/_shortcodes/_file-tree.scss b/assets/css/_page/_single/_shortcodes/_file-tree.scss index afad55f1..f38cc973 100644 --- a/assets/css/_page/_single/_shortcodes/_file-tree.scss +++ b/assets/css/_page/_single/_shortcodes/_file-tree.scss @@ -1,17 +1,17 @@ .file-tree-wrapper { - border: 1px solid var(#{$rootPrefix}global-border-color); + border: 1px solid fixit-var(global-border-color); padding: 0.5rem; font-size: 0.8rem; line-height: 1; margin-block: 0.5rem; - @include border-radius($global-border-radius); - @include transition(box-shadow 0.2s ease); + @include border-radius; + transition: box-shadow 0.2s ease; &:hover { - @include box-shadow(0 2px 8px rgba(0, 0, 0, 0.1)); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - [data-theme='dark'] & { - @include box-shadow(0 2px 8px rgba(255, 255, 255, 0.1)); + [data-theme=dark] & { + box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1); } } @@ -28,7 +28,7 @@ cursor: pointer; font-weight: bold; - [data-theme='dark'] & { + [data-theme=dark] & { color: #ddd; } @@ -47,8 +47,8 @@ position: relative; gap: 0.25rem; padding: 0.25rem 0.5rem; - @include border-radius($global-border-radius); - @include transition(all 0.15s ease); + transition: all 0.15s ease; + @include border-radius; .file-tree-icon { width: 1rem; @@ -57,7 +57,7 @@ } &.is-highlighted { - color: var(#{$rootPrefix}global-link-hover-color); + color: fixit-var(global-link-hover-color); } } } @@ -75,7 +75,7 @@ translate: 0 -50%; width: 0.75rem; height: 1px; - background-color: var(#{$rootPrefix}secondary); + background-color: fixit-var(secondary); } } } @@ -92,8 +92,8 @@ bottom: 0.625rem; left: calc(1rem - 0.5px); width: 1px; - background-color: var(#{$rootPrefix}secondary); - height: var(#{$rootPrefix}file-tree-line-height); + background-color: fixit-var(secondary); + height: fixit-var(file-tree-line-height); } } diff --git a/assets/css/_page/_single/_shortcodes/_instagram.scss b/assets/css/_page/_single/_shortcodes/_instagram.scss index 87df594f..9ab1dc8b 100644 --- a/assets/css/_page/_single/_shortcodes/_instagram.scss +++ b/assets/css/_page/_single/_shortcodes/_instagram.scss @@ -1,5 +1,5 @@ iframe.instagram-media { - [data-theme='dark'] & { + [data-theme=dark] & { border: none !important; } } diff --git a/assets/css/_page/_single/_shortcodes/_mapbox.scss b/assets/css/_page/_single/_shortcodes/_mapbox.scss index 4148521d..8ea75dc2 100644 --- a/assets/css/_page/_single/_shortcodes/_mapbox.scss +++ b/assets/css/_page/_single/_shortcodes/_mapbox.scss @@ -1,5 +1,5 @@ .mapbox { margin: 0.5rem 0; padding: 0.5rem 0; - @include border-radius($global-border-radius); + @include border-radius; } diff --git a/assets/css/_page/_single/_shortcodes/_mermaid.scss b/assets/css/_page/_single/_shortcodes/_mermaid.scss index 83875aae..39d3f3f7 100644 --- a/assets/css/_page/_single/_shortcodes/_mermaid.scss +++ b/assets/css/_page/_single/_shortcodes/_mermaid.scss @@ -21,7 +21,7 @@ } .mermaid { - [data-theme='dark'] & { + [data-theme=dark] & { height: 0; padding: 0; } @@ -31,7 +31,7 @@ height: 0; padding: 0; - [data-theme='dark'] & { + [data-theme=dark] & { height: auto; padding: 0.5rem 0.75rem; } diff --git a/assets/css/_page/_single/_shortcodes/_tabs.scss b/assets/css/_page/_single/_shortcodes/_tabs.scss index 576c0b64..1a916e8f 100644 --- a/assets/css/_page/_single/_shortcodes/_tabs.scss +++ b/assets/css/_page/_single/_shortcodes/_tabs.scss @@ -34,12 +34,12 @@ tab-container { display: block; border: none; color: inherit; - background: transparent; + background-color: transparent; font-size: 0.9em; font-weight: 500; cursor: pointer; flex-shrink: 0; - @include transition(all 0.3s ease); + transition: all 0.3s ease; } > .tab-panel { @@ -111,13 +111,13 @@ tab-container { // ======================================== &[type='underline'] { > .tab-button { - #{$rootPrefix}tab-button-border-color: transparent; + @include set-fixit-var(tab-button-border-color, transparent); @include tab-button-size(0); &[aria-selected='true'], &[aria-selected='false']:hover { - color: var(#{$rootPrefix}primary); - #{$rootPrefix}tab-button-border-color: var(#{$rootPrefix}primary); + color: fixit-var(primary); + @include set-fixit-var(tab-button-border-color, fixit-var(primary)); } &[aria-selected='false']:hover { @@ -149,50 +149,50 @@ tab-container { // Top placement &[placement='top'] { &::part(tablist-tab-wrapper) { - border-bottom: 2px solid var(#{$rootPrefix}global-border-color); + border-bottom: 2px solid fixit-var(global-border-color); } > .tab-button { translate: 0 2px; - border-bottom: 2px solid var(#{$rootPrefix}tab-button-border-color); + border-bottom: 2px solid fixit-var(tab-button-border-color); } } // Bottom placement &[placement='bottom'] { &::part(tablist-tab-wrapper) { - border-top: 2px solid var(#{$rootPrefix}global-border-color); + border-top: 2px solid fixit-var(global-border-color); } > .tab-button { translate: 0 -2px; - border-top: 2px solid var(#{$rootPrefix}tab-button-border-color); + border-top: 2px solid fixit-var(tab-button-border-color); } } // Left placement &[placement='left'] { &::part(tablist-tab-wrapper) { - border-right: 2px solid var(#{$rootPrefix}global-border-color); + border-right: 2px solid fixit-var(global-border-color); } > .tab-button { text-align: right; translate: 2px 0; - border-right: 2px solid var(#{$rootPrefix}tab-button-border-color); + border-right: 2px solid fixit-var(tab-button-border-color); } } // Right placement &[placement='right'] { &::part(tablist-tab-wrapper) { - border-left: 2px solid var(#{$rootPrefix}global-border-color); + border-left: 2px solid fixit-var(global-border-color); } > .tab-button { text-align: left; translate: -2px 0; - border-left: 2px solid var(#{$rootPrefix}tab-button-border-color); + border-left: 2px solid fixit-var(tab-button-border-color); } } } @@ -203,26 +203,26 @@ tab-container { // ======================================== &[type='pill'] { > .tab-button { - background: var(#{$rootPrefix}code-inline-background-color); + background-color: fixit-var(code-inline-background-color); @include tab-button-size; - @include border-radius(2em); + @include border-radius(full); &[aria-selected='true'] { color: #ffffff; - background: var(#{$rootPrefix}primary); - @include box-shadow(0 0.125rem 0.5rem rgba(0, 0, 0, 0.3)); + background-color: fixit-var(primary); + box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3); - [data-theme='dark'] & { - background: var(#{$rootPrefix}primary); - @include box-shadow(0 0.125rem 0.5rem rgba(255, 255, 255, 0.3)); + [data-theme=dark] & { + background-color: fixit-var(primary); + box-shadow: 0 0.125rem 0.5rem rgba(255, 255, 255, 0.3); } } &[aria-selected='false']:hover { - background: rgba(175, 184, 193, 0.4); + background-color: rgba(175, 184, 193, 0.4); - [data-theme='dark'] & { - background: rgba(99, 110, 123, 0.6); + [data-theme=dark] & { + background-color: rgba(99, 110, 123, 0.6); } } } @@ -305,22 +305,22 @@ tab-container { } > .tab-button { - border: 1px solid var(#{$rootPrefix}global-border-color); - background-color: var(#{$rootPrefix}code-block-background-color); + border: 1px solid fixit-var(global-border-color); + background-color: fixit-var(code-block-background-color); @include tab-button-size(1.5rem); &[aria-selected='true'], &[aria-selected='false']:hover { - background-color: var(#{$rootPrefix}global-background-color); - color: var(#{$rootPrefix}global-link-color); - z-index: 1; + background-color: fixit-var(global-background-color); + color: fixit-var(global-link-color); + @include z-index(base); } } > .tab-panel { padding: 0.75rem; - background-color: var(#{$rootPrefix}global-background-color); - border: 1px solid var(#{$rootPrefix}global-border-color); + background-color: fixit-var(global-background-color); + border: 1px solid fixit-var(global-border-color); } &[placement='top'], @@ -334,13 +334,13 @@ tab-container { &:first-of-type { position: sticky; left: 0; - z-index: 2; + @include z-index(base, 1); } &:last-of-type { position: sticky; right: 0; - z-index: 2; + @include z-index(base, 1); } } } @@ -348,84 +348,84 @@ tab-container { // Top placement &[placement='top'] { &::part(tablist-tab-wrapper) { - border-bottom: 1px solid var(#{$rootPrefix}global-border-color); + border-bottom: 1px solid fixit-var(global-border-color); } > .tab-button { translate: 0 1px; - @include border-radius($global-border-radius $global-border-radius 0 0); + @include border-radius(top); &[aria-selected='true'] { - border-bottom-color: var(#{$rootPrefix}global-background-color); + border-bottom-color: fixit-var(global-background-color); } } > .tab-panel { border-top: none; - @include border-radius(0 0 $global-border-radius $global-border-radius); + @include border-radius(bottom); } } // Bottom placement &[placement='bottom'] { &::part(tablist-tab-wrapper) { - border-top: 1px solid var(#{$rootPrefix}global-border-color); + border-top: 1px solid fixit-var(global-border-color); } > .tab-button { translate: 0 -1px; - @include border-radius(0 0 $global-border-radius $global-border-radius); + @include border-radius(bottom); &[aria-selected='true'] { - border-top-color: var(#{$rootPrefix}global-background-color); + border-top-color: fixit-var(global-background-color); } } > .tab-panel { border-bottom: none; - @include border-radius($global-border-radius $global-border-radius 0 0); + @include border-radius(top); } } // Left placement &[placement='left'] { &::part(tablist-tab-wrapper) { - border-right: 1px solid var(#{$rootPrefix}global-border-color); + border-right: 1px solid fixit-var(global-border-color); } > .tab-button { translate: 1px 0; - @include border-radius($global-border-radius 0 0 $global-border-radius); + @include border-radius(left); &[aria-selected='true'] { - border-right-color: var(#{$rootPrefix}global-background-color); + border-right-color: fixit-var(global-background-color); } } > .tab-panel { border-left: none; - @include border-radius(0 $global-border-radius $global-border-radius 0); + @include border-radius(right); } } // Right placement &[placement='right'] { &::part(tablist-tab-wrapper) { - border-left: 1px solid var(#{$rootPrefix}global-border-color); + border-left: 1px solid fixit-var(global-border-color); } > .tab-button { translate: -1px 0; - @include border-radius(0 $global-border-radius $global-border-radius 0); + @include border-radius(right); &[aria-selected='true'] { - border-left-color: var(#{$rootPrefix}global-background-color); + border-left-color: fixit-var(global-background-color); } } > .tab-panel { border-right: none; - @include border-radius($global-border-radius 0 0 $global-border-radius); + @include border-radius(left); } } } @@ -442,12 +442,8 @@ tab-container { &::part(tablist-tab-wrapper) { padding: 0.25rem; - background: $code-background-color; - @include border-radius($global-border-radius); - - [data-theme='dark'] & { - background: $code-background-color-dark; - } + background-color: fixit-var(code-block-background-color); + @include border-radius; } &::part(tablist) { @@ -459,7 +455,7 @@ tab-container { flex-grow: 1; @include tab-button-size; - @include border-radius($global-border-radius); + @include border-radius; &[aria-selected='true'], &:hover { @@ -467,11 +463,11 @@ tab-container { } &[aria-selected='true'] { - background-color: var(#{$rootPrefix}global-background-color); - @include box-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1)); + background-color: fixit-var(global-background-color); + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1); - [data-theme='dark'] & { - @include box-shadow(0 0.125rem 0.25rem rgba(255, 255, 255, 0.1)); + [data-theme=dark] & { + box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1); } } } diff --git a/assets/css/_page/_single/_shortcodes/_timeline.scss b/assets/css/_page/_single/_shortcodes/_timeline.scss index a26f1bc6..4ce643fe 100644 --- a/assets/css/_page/_single/_shortcodes/_timeline.scss +++ b/assets/css/_page/_single/_shortcodes/_timeline.scss @@ -3,28 +3,30 @@ ul.#{$prefix}timeline { box-sizing: border-box; overflow: auto; margin: 1rem auto; - --timeline-color: #{darken($global-border-color, 5%)}; - --timeline-circle-color: #FF735A; - --timeline-circle-size: 10px; - --timeline-width: 2px; + @include set-fixit-vars(( + timeline-color: fixit-var(global-border-color), + timeline-circle-color: #FF735A, + timeline-circle-size: 10px, + timeline-width: 2px, + )); &[data-animation] { .#{$prefix}timeline-item::before { - border-color: var(--timeline-color); + border-color: fixit-var(timeline-color); animation-name: border-color-fade; animation-duration: 2s; animation-iteration-count: infinite; - animation-delay: calc(var(--timeline-index) * 0.3s); + animation-delay: calc(#{fixit-var(timeline-index)} * 0.3s); @keyframes border-color-fade { 0% { - border-color: var(--timeline-color); + border-color: fixit-var(timeline-color); } 50% { - border-color: var(--timeline-circle-color); + border-color: fixit-var(timeline-circle-color); } 100% { - border-color: var(--timeline-color); + border-color: fixit-var(timeline-color); } } } @@ -36,14 +38,14 @@ ul.#{$prefix}timeline { @each $color, $value in $theme-colors { &[data-type='#{$color}'] { - --timeline-circle-color: var(#{$rootPrefix}#{$color}); + @include set-fixit-var(timeline-circle-color, fixit-var(#{$color})); } } .#{$prefix}timeline-item__timestamp { font-size: 0.8125rem; line-height: 1; - color: var(#{$rootPrefix}secondary); + color: fixit-var(secondary); &.is-top { margin-bottom: 0.25rem; @@ -59,7 +61,7 @@ ul.#{$prefix}timeline { } &[data-node='dot']::before { - background-color: var(--timeline-circle-color) !important; + background-color: fixit-var(timeline-circle-color) !important; } &[data-size='small']::before { transform: scale(0.8) translateY(-50%); @@ -74,31 +76,27 @@ ul.#{$prefix}timeline { top: 1.25rem; transform: translateY(-50%); left: 0; - width: var(--timeline-circle-size); - height: var(--timeline-circle-size); - font-size: var(--timeline-circle-size); - line-height: var(--timeline-circle-size); + 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; - border-radius: 50%; - border-width: var(--timeline-width); + @include border-radius(full); + border-width: fixit-var(timeline-width); border-style: solid; - border-color: var(--timeline-circle-color); - background-color: var(#{$rootPrefix}global-background-color); + border-color: fixit-var(timeline-circle-color); + background-color: fixit-var(global-background-color); color: transparent; - z-index: 1; + @include z-index(base); } &::after { content: ''; position: absolute; top: 0; - left: calc(var(--timeline-circle-size) / 2 + var(--timeline-width) / 2); - width: var(--timeline-width); + left: calc(#{fixit-var(timeline-circle-size)} / 2 + #{fixit-var(timeline-width)} / 2); + width: fixit-var(timeline-width); height: 100%; - background-color: var(--timeline-color); - } - - [data-theme='dark'] & { - --timeline-color: #{darken($global-border-color, 50%)}; + background-color: fixit-var(timeline-color); } } } diff --git a/assets/css/_page/_single/_toc.scss b/assets/css/_page/_single/_toc.scss index d03e2ffa..07ac80ec 100644 --- a/assets/css/_page/_single/_toc.scss +++ b/assets/css/_page/_single/_toc.scss @@ -1,13 +1,13 @@ // Common styles for all TOC types .toc { .toc-title { - font-size: $toc-title-font-size; + font-size: fixit-var(toc-title-font-size); font-weight: bold; text-transform: uppercase; } .toc-content { - font-size: $toc-content-font-size; + font-size: fixit-var(toc-content-font-size); code { @extend %code; @@ -25,11 +25,7 @@ margin-right: 0.5em; position: relative; bottom: 2px; - color: $single-link-color; - - [data-theme='dark'] & { - color: $single-link-color-dark; - } + color: fixit-var(single-link-color); } ul { @@ -46,20 +42,16 @@ } li:has(> a:hover)::marker { - color: $single-link-color; - - [data-theme='dark'] & { - color: $single-link-color-dark; - } + color: fixit-var(single-link-color); } } } ruby { - background-color: var(#{$rootPrefix}code-block-background-color); + background-color: fixit-var(code-block-background-color); rt { - color: var(#{$rootPrefix}global-font-secondary-color); + color: fixit-var(secondary); } } } @@ -70,11 +62,7 @@ .toc-content { li.has-active { &::marker { - color: $single-link-color; - - [data-theme='dark'] & { - color: $single-link-color-dark; - } + color: fixit-var(single-link-color); } &:has(> .active)::marker { @@ -82,21 +70,13 @@ } > a { - color: $single-link-color; - - [data-theme='dark'] & { - color: $single-link-color-dark; - } + color: fixit-var(single-link-color); } } ul { a.active::before { - color: $single-link-hover-color; - - [data-theme='dark'] & { - color: $single-link-hover-color-dark; - } + color: fixit-var(single-link-hover-color); } } @@ -109,7 +89,7 @@ #toc-auto { display: block; position: sticky; - top: calc(#{$header-height} + var(#{$rootPrefix}breadcrumb-height)); + top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)}); box-sizing: border-box; visibility: hidden; @include overflow-wrap(break-word); @@ -117,7 +97,7 @@ @extend .print-d-none; [data-header-desktop='normal'] & { - #{$rootPrefix}scroll-mt: #{$global-scroll-margin-top}; + @include set-fixit-var(scroll-mt, fixit-var(global-scroll-margin-top)); } .toc-title { @@ -131,27 +111,23 @@ margin-right: 0.5em; position: relative; bottom: 2px; - color: $global-border-color; - - [data-theme='dark'] & { - color: $global-border-color-dark; - } + color: fixit-var(global-border-color); } i.toc-icon { - @include transition(transform 0.2s ease); + transition: transform 0.2s ease; } } &.toc-hidden i.toc-icon { - @include transform(rotate(-90deg)); - @include transition(transform 0.2s ease); + transform: rotate(-90deg); + transition: transform 0.2s ease; } .toc-content { overflow-y: scroll; - // TODO 这里计算错误，待重构 - max-height: calc(100vh - #{2 * $header-height}); + // TODO 这里计算错误，待重构使用 JS 计算 + max-height: calc(100vh - #{2 * #{fixit-var(header-height)}}); @include scrollbar-width(none, 0); &.always-active ul, @@ -196,11 +172,11 @@ justify-content: space-between; line-height: 2em; padding: 0 0.75em; - background-color: var(#{$rootPrefix}code-header-background-color); + background-color: fixit-var(code-header-background-color); } .toc-content { - background-color: var(#{$rootPrefix}code-block-background-color); + background-color: fixit-var(code-block-background-color); > nav { > ul { @@ -210,11 +186,7 @@ font-weight: bold; &::before { - color: $single-link-hover-color; - - [data-theme='dark'] & { - color: $single-link-hover-color-dark; - } + color: fixit-var(single-link-hover-color); } } } @@ -232,10 +204,10 @@ &:not(.open) { .toc-title { - #{$rootPrefix}code-header-background-color: #{darken($code-background-color, 6%)}; + @include set-fixit-var(code-header-background-color, darken($code-background-color, 6%)); - [data-theme='dark'] & { - #{$rootPrefix}code-header-background-color: #{darken($code-background-color-dark, 6%)}; + [data-theme=dark] & { + @include set-fixit-var(code-header-background-color, darken($code-background-color-dark, 6%)); } } } @@ -255,21 +227,21 @@ max-height: 100%; margin-right: 0; border: none; - border-left: 1px solid var(#{$rootPrefix}global-border-color); - background-color: var(#{$rootPrefix}global-background-color); + border-left: 1px solid fixit-var(global-border-color); + background-color: fixit-var(global-background-color); .toc { max-width: 100%; margin-inline: 1rem; .toc-title { - font-size: $toc-title-font-size * 1.5; - line-height: $toc-title-font-size * 2; - margin-block: $toc-title-font-size; + font-size: calc(#{fixit-var(toc-title-font-size)} * 1.5); + line-height: calc(#{fixit-var(toc-title-font-size)} * 2); + margin-block: fixit-var(toc-title-font-size); } .toc-content { - font-size: max($toc-content-font-size, 1rem); + font-size: MAX(fixit-var(toc-content-font-size), 1rem); nav { max-height: calc(100dvh - 5rem); diff --git a/assets/css/_page/_special/_friends.scss b/assets/css/_page/_special/_friends.scss index 12bcbe68..c8dc8294 100644 --- a/assets/css/_page/_special/_friends.scss +++ b/assets/css/_page/_special/_friends.scss @@ -23,19 +23,19 @@ background: rgba(255, 255, 255, 0.3); box-sizing: border-box; box-shadow: 3px 3px 5px #aaa; - @include border-radius($global-border-radius); border: none; transition-duration: 0.3s; margin-bottom: 1rem; display: flex; flex-direction: column; justify-content: space-between; + @include border-radius; } .friend-link:hover { background: #fff; - @include transform(scale(1.03)); box-shadow: 0 0 3px #aaa; + transform: scale(1.03); } .friend-avatar { @@ -43,9 +43,9 @@ object-position: center; width: 100% !important; height: 150px !important; - @include border-radius($global-border-radius); margin: 0; padding: 0; + @include border-radius; } .friend-nickname { diff --git a/assets/css/_page/_special/_search.scss b/assets/css/_page/_special/_search.scss index 1f65f8e3..a0e49625 100644 --- a/assets/css/_page/_special/_search.scss +++ b/assets/css/_page/_special/_search.scss @@ -1,12 +1,42 @@ // Style of layout search -// TODO Adapting to dark mode, maybe use css variables - .special.search { // Google CSE .gcse-searchbox:empty, .gcse-searchresults:empty { display: none; } + + // search box + #___gcse_0 { + margin-bottom: 0.5rem; + + form.gsc-search-box { + max-width: 100%; + margin: 0; + + .gsc-input-box { + [data-theme=dark] & { + border-color: #c2c2c2; + } + input { + background-color: #fff; + } + } + + } + } + + #___gcse_0, + #___gcse_1 { + [data-theme=dark] & { + filter: invert(1) hue-rotate(0.5turn); + } + } + #___gcse_1 img { + [data-theme=dark] & { + filter: invert(1) hue-rotate(0.5turn) opacity(0.75); + } + } // Bing CSE (Unsupported) } diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss index ccc12d6c..93238591 100644 --- a/assets/css/_variables.scss +++ b/assets/css/_variables.scss @@ -1,11 +1,12 @@ -// ============================== -// Variables -// TODO refactor variables -// ============================== +// ========================================================================== +// 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: --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; @@ -14,7 +15,7 @@ $global-font-weight: 400 !default; $global-line-height: 1.5rem !default; // scroll-margin-top of content anchor -$global-scroll-margin-top: 0.5rem; +$global-scroll-margin-top: 0.5rem !default; // Radius of the border $global-border-radius: 5px !default; @@ -27,9 +28,9 @@ $global-background-color-dark: #292a2e !default; $global-font-color: #161209 !default; $global-font-color-dark: #b1b1ba !default; -// Color of the secondary text -$global-font-secondary-color: #b1b1ba !default; -$global-font-secondary-color-dark: #909092 !default; +// Color of the placeholder +$global-placeholder-color: #b1b1ba !default; +$global-placeholder-color-dark: #909092 !default; // Color of the link $global-link-color: #161209 !default; @@ -40,11 +41,8 @@ $global-link-hover-color: #2983bb !default; // 潮蓝 $global-link-hover-color-dark: #fff !default; // Color of the border -// TODO refactor border colors -// $global-border-color: #e3e3e3 !default; -// $global-border-color-dark: #434343 !default; -$global-border-color: #f0f0f0 !default; -$global-border-color-dark: #363636 !default; +$global-border-color: #e3e3e3 !default; +$global-border-color-dark: #717171 !default; // ========== Global ========== // // ========== Scrollbar ========== // @@ -78,8 +76,8 @@ $menu-active-color: #161209 !default; $menu-active-color-dark: #fff !default; // Border color of the menu item -$menu-border-color: darken($global-border-color, 5%) !default; -$menu-border-color-dark: lighten($global-border-color-dark, 5%) !default; +$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; @@ -91,10 +89,10 @@ $search-background-color-dark: #363636 !default; // ========== Tag Cloud ========== // // Color range of tag cloud -$tag-cloud-start: $global-font-secondary-color!default; -$tag-cloud-end: $global-font-color!default; -$tag-cloud-start-dark: $global-font-secondary-color-dark!default; -$tag-cloud-end-dark: $global-font-color-dark!default; +$tag-cloud-start: #b1b1ba !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 ========== // @@ -184,8 +182,4 @@ $github-corner-fill: $header-background-color-dark !default; $github-corner-fill-dark: $header-background-color !default; // ========== GitHub Corners ========== // -@import '_maps/admonition'; -@import '_maps/alert'; -@import '_maps/code-type'; -@import '_maps/colors'; -@import '_maps/utilities'; +@import '_maps'; diff --git a/assets/css/_widgets/_details.scss b/assets/css/_widgets/_details.scss deleted file mode 100644 index 47fbe418..00000000 --- a/assets/css/_widgets/_details.scss +++ /dev/null @@ -1,47 +0,0 @@ -.details { - > .details-summary { - @include border-radius($global-border-radius); - @include transition(border-radius 0.2s ease 0.2s); - - &:hover { - cursor: pointer; - } - - i.details-icon { - color: var(#{$rootPrefix}global-font-secondary-color); - @include transition(all 0.2s ease); - - &:hover { - color: var(#{$rootPrefix}global-font-color); - } - } - } - - > .details-content { - height: 0; - overflow-y: hidden; - @include transition(height 0.5s ease-out); - } - - &.open { - > .details-summary { - @include border-radius($global-border-radius $global-border-radius 0 0); - @include transition(border-radius 0s); - - i.details-icon { - @include transform(rotate(90deg)); - } - } - - > .details-content { - height: auto; - @include border-radius(0 0 $global-border-radius $global-border-radius); - } - } - - &.disabled { - > .details-summary { - cursor: default; - } - } -} diff --git a/assets/css/_widgets/_fixed-button.scss b/assets/css/_widgets/_fixed-button.scss deleted file mode 100644 index 081b1792..00000000 --- a/assets/css/_widgets/_fixed-button.scss +++ /dev/null @@ -1,86 +0,0 @@ -.fixed-buttons { - position: fixed; - right: 1.5rem; - bottom: 1.5rem; - display: flex; - flex-direction: column; - gap: 0.5rem; - @include z-index(1); -} - -.fixed-button { - font-size: 1rem; - line-height: 1.5rem; - padding: 0.5rem 0.625rem; - // TODO - color: darken($global-font-secondary-color, 10%); - background-color: $header-background-color; - @include border-radius(1.25rem); - @include transition(color 0.4s ease); - @include blur; - @extend .print-d-none; - - [data-theme='dark'] & { - color: $global-font-secondary-color-dark; - background-color: $header-background-color-dark; - } - - &:hover, - &:active { - color: var(#{$rootPrefix}global-font-color); - cursor: pointer; - } - - &:active, - &:focus, - &:hover { - outline: none; - } -} - -.back-to-top { - overflow: hidden; - position: relative; - // Ring stroke width - #{$rootPrefix}b2t-stroke: 0.5rem; - // Ring background color - #{$rootPrefix}b2t-bg: #{$global-border-color}; - // Progress color - #{$rootPrefix}b2t-prog: var(#{$rootPrefix}success); - // dasharray = circumference = 2πr - // dashoffset = circumference * (1 - scrollPercent / 100) - #{$rootPrefix}b2t-dasharray: 314.15; - - [data-theme='dark'] & { - #{$rootPrefix}b2t-bg: #{$global-border-color-dark}; - #{$rootPrefix}b2t-prog: #{$global-font-color-dark}; - } - - // SVG circular progress ring - svg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - // Rotate to start from top - transform: rotate(-90deg); - } - - .bg { - fill: none; - stroke: var(#{$rootPrefix}b2t-bg); - stroke-width: var(#{$rootPrefix}b2t-stroke); - } - - // Progress ring - .progress { - fill: none; - stroke: var(#{$rootPrefix}b2t-prog); - stroke-width: var(#{$rootPrefix}b2t-stroke); - stroke-linecap: round; - stroke-dasharray: var(#{$rootPrefix}b2t-dasharray); - stroke-dashoffset: calc(var(#{$rootPrefix}b2t-dasharray) * (1 - var(#{$rootPrefix}b2t-progress, 0) / 100)); - transition: stroke-dashoffset .1s linear; - } -} diff --git a/assets/css/_widgets/_github-corner.scss b/assets/css/_widgets/_github-corner.scss deleted file mode 100644 index 17b7afd8..00000000 --- a/assets/css/_widgets/_github-corner.scss +++ /dev/null @@ -1,47 +0,0 @@ -@keyframes octocat-wave { - 0%, - 100% { - @include transform(rotate(0)); - } - 20%, - 60% { - @include transform(rotate(-25deg)); - } - 40%, - 80% { - @include transform(rotate(10deg)); - } -} - -.github-corner { - position: fixed; - top: 0; - @include z-index(2); - @extend .print-d-none; - - :hover .octo-arm { - animation: octocat-wave 560ms ease-in-out; - } - svg { - width: $header-height; - height: $header-height; - border: 0; - color: $github-corner-color; - fill: $github-corner-fill; - - [data-theme='dark'] & { - color: $github-corner-color-dark; - fill: $github-corner-fill-dark; - } - } - &.left { - left: 0; - - svg { - @include transform(scale(-1, 1)); - } - } - &.right { - right: 0; - } -} diff --git a/assets/css/_widgets/_img.scss b/assets/css/_widgets/_img.scss deleted file mode 100644 index cd3b3edb..00000000 --- a/assets/css/_widgets/_img.scss +++ /dev/null @@ -1,3 +0,0 @@ -img { - @include border-radius($global-border-radius/2); -} diff --git a/assets/css/_widgets/_reading-progress.scss b/assets/css/_widgets/_reading-progress.scss deleted file mode 100644 index f132c1f7..00000000 --- a/assets/css/_widgets/_reading-progress.scss +++ /dev/null @@ -1,12 +0,0 @@ -.reading-progress-bar { - height: var(--progress-h, 2px); - width: var(--progress, 0); - background-color: var(--bg-progress, var(#{$rootPrefix}success)); - position: fixed; - @include z-index(2); - @extend .print-d-none; - - [data-theme="dark"] & { - background-color: var(--bg-progress-dark, #{$global-font-color-dark}); - } -} diff --git a/assets/css/_widgets/_scrollbar.scss b/assets/css/_widgets/_scrollbar.scss deleted file mode 100644 index c7bbac59..00000000 --- a/assets/css/_widgets/_scrollbar.scss +++ /dev/null @@ -1,36 +0,0 @@ -/* Modern browsers with `scrollbar-*` support (high priority) */ -@supports (scrollbar-width: auto) { - * { - scrollbar-color: var(#{$rootPrefix}scrollbar-thumb-color) var(#{$rootPrefix}scrollbar-track-color);; - scrollbar-width: var(#{$rootPrefix}scrollbar-width); - } -} - -/* Legacy browsers with `::-webkit-scrollbar-*` support */ -::-webkit-scrollbar { - height: var(#{$rootPrefix}scrollbar-width-legacy); - width: var(#{$rootPrefix}scrollbar-width-legacy); - overflow: visible; -} -::-webkit-scrollbar-button { - height: 0; - width: 0; -} -::-webkit-scrollbar-corner { - background-color: var(#{$rootPrefix}scrollbar-track-color); -} -::-webkit-scrollbar-thumb { - background-color: var(#{$rootPrefix}scrollbar-thumb-color); - &:hover { - background-color: var(#{$rootPrefix}scrollbar-thumb-hover-color); - } -} -::-webkit-scrollbar-track { - background-color: var(#{$rootPrefix}scrollbar-track-color); -} -::-webkit-scrollbar-thumb, -::-webkit-scrollbar-track { - background-clip: padding-box; - border: 3px solid transparent; - border-radius: 100px; -} diff --git a/assets/css/style.scss b/assets/css/style.scss index df502419..158f948c 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -2,12 +2,6 @@ @import "_variables"; @import "_override"; -@import "_mixin/index"; -@import "_core/root"; -@import "_core/base"; -@import "_core/layout"; -@import "_core/common"; +@import "_core"; @import "_page"; -@import "_core/media"; -@import "_core/patch"; @import "_custom"; diff --git a/assets/js/theme.js b/assets/js/theme.js index a3e7068a..e46511dd 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -1282,7 +1282,7 @@ class FixIt { const contentHeight = document.body.scrollHeight - window.innerHeight; const scrollPercent = Math.max(Math.min(100 * Math.max(this.newScrollTop, 0) / contentHeight, 100), 0); if ($readingProgressBar) { - $readingProgressBar.style.setProperty('--progress', `${scrollPercent.toFixed(2)}%`); + $readingProgressBar.style.setProperty('--fi-progress', `${scrollPercent.toFixed(2)}%`); } // whether to show back to top button if ($backToTop) { diff --git a/assets/lib/aplayer/dark.scss b/assets/lib/aplayer/dark.scss index 9cf993eb..55e2bd00 100644 --- a/assets/lib/aplayer/dark.scss +++ b/assets/lib/aplayer/dark.scss @@ -1,4 +1,4 @@ -[data-theme='dark'] .aplayer { +[data-theme=dark] .aplayer { background: #212121; &.aplayer-withlist { diff --git a/assets/lib/valine/valine.scss b/assets/lib/valine/valine.scss index d9124ac5..38ab73b5 100644 --- a/assets/lib/valine/valine.scss +++ b/assets/lib/valine/valine.scss @@ -17,18 +17,6 @@ $code-background-color-dark: #272C34 !default; overflow-wrap: $value; } -@mixin line-break($value) { - -webkit-line-break: $value; - -ms-line-break: $value; - line-break: $value; -} - -@mixin tab-size($value) { - -moz-tab-size: $value; - -o-tab-size: $value; - tab-size: $value; -} - .v[data-class=v] { .vcount { z-index: 60; @@ -46,22 +34,21 @@ $code-background-color-dark: #272C34 !default; blockquote { border-color: $border-color; - [data-theme='dark'] & { + [data-theme=dark] & { border-color: $border-color-dark; } } code, pre, pre code { font-size: 90%; - @include overflow-wrap(break-word); - @include line-break(auto); - @include tab-size(4); + tab-size: 4; color: $code-color; - background: $code-background-color; + background-color: $code-background-color; + @include overflow-wrap(break-word); - [data-theme='dark'] & { + [data-theme=dark] & { color: $code-color-dark; - background: $code-background-color-dark; + background-color: $code-background-color-dark; } } -} \ No newline at end of file +} diff --git a/layouts/_partials/footer.html b/layouts/_partials/footer.html index 5e0cd289..862501fb 100644 --- a/layouts/_partials/footer.html +++ b/layouts/_partials/footer.html @@ -62,7 +62,7 @@ {{- $siteTimeIcon := printf (cond .Animate "%v animate-icon" "%v") .Icon -}} {{- dict "Class" $siteTimeIcon | partial "plugin/icon.html" -}} {{- with .Pre -}}{{ . }}{{- end -}} - {{- printf `%v` (T "footer.siteRunning") | safeHTML -}} + {{- printf `%v` (T "footer.siteRunning") | safeHTML -}} {{- end -}} {{- end -}} diff --git a/layouts/_partials/function/task-lists.html b/layouts/_partials/function/task-lists.html index 62b99659..a1530760 100644 --- a/layouts/_partials/function/task-lists.html +++ b/layouts/_partials/function/task-lists.html @@ -28,10 +28,10 @@ */ -}} {{- $icon := dict "Class" (add "checkbox-icon " (index $iconMap " ")) | partial "plugin/icon.html" -}} {{- $label := T (printf "taskList.%v" " ") -}} -{{- $content := replaceRE `
  • (\n

    )* (.+?)(

    \n)*
    • ` (printf `
  • $1%s$2$3
    • ` $label $icon) . -}} +{{- $content := replaceRE `(?s)
  • ((\n

    )*)` (printf `

  • $1%s` $label $icon) . -}} {{- $label := T (printf "taskList.%v" "x") -}} {{- $icon := dict "Class" (add "checkbox-icon " (index $iconMap "x")) | partial "plugin/icon.html" -}} -{{- $content = replaceRE `
  • (\n

    )* (.+?)(

    \n)*
    • ` (printf `
  • $1%s$2$3
    • ` $label $icon) $content -}} +{{- $content = replaceRE `(?s)
  • ((\n

    )*)` (printf `

  • $1%s` $label $icon) $content -}} {{- /* The extended syntax is compatible with Obsidian. @@ -49,7 +49,7 @@ {{- $sign := htmlEscape . -}} {{- $originSign := replace . "\\" "" -}} {{- $label := (T (printf "taskList.%v" $originSign)) | default (T (printf "taskList.%v" " ")) -}} - {{- $content = replaceRE (printf `
  • (\n

    )*\[%s\] (.+?)(

    \n)*
    • ` $sign) (printf `
  • $1%s$2$3
    • ` $originSign $label $icon) $content -}} + {{- $content = replaceRE (printf `(?s)
  • ((\n

    )*)\[%s\]` $sign) (printf `

  • $1%s` $originSign $label $icon) $content -}} {{- end -}} {{- return $content -}} diff --git a/layouts/_partials/widgets.html b/layouts/_partials/widgets.html index a7a30ef2..90a577c1 100644 --- a/layouts/_partials/widgets.html +++ b/layouts/_partials/widgets.html @@ -50,16 +50,16 @@ {{- with $readingProgress -}} {{- $style := printf "%v: 0;%v: 0;" (.Start | default "left") (.Position | default "top") -}} {{- if .Height | and (ne .Height "2px") -}} - {{- $style = printf "%v--progress-h: %v;" $style .Height -}} + {{- $style = printf "%v--fi-progress-h: %v;" $style .Height -}} {{- end -}} {{- if .Reversed -}} - {{- $style = printf "%v%v" $style "width: calc(100% - var(--progress));" -}} + {{- $style = printf "%v%v" $style "width: calc(100% - var(--fi-progress));" -}} {{- end -}} {{- if .Light -}} - {{- $style = printf "%v--bg-progress: %v;" $style .Light -}} + {{- $style = printf "%v--fi-bg-progress: %v;" $style .Light -}} {{- end -}} {{- if .Dark -}} - {{- $style = printf "%v--bg-progress-dark: %v;" $style .Dark -}} + {{- $style = printf "%v--fi-bg-progress-dark: %v;" $style .Dark -}} {{- end -}}
    {{- end -}} diff --git a/layouts/tags.html b/layouts/tags.html index 777842cf..6ecb3644 100644 --- a/layouts/tags.html +++ b/layouts/tags.html @@ -1,7 +1,7 @@ {{- /* Tags Page */ -}} {{- $tagCloud := .Site.Params.tagcloud -}} -
    +
    {{- /* Tags Cloud */ -}} {{- if $tagCloud.enable -}} {{- $tags := cond (eq $tagCloud.orderby "name") $.Site.Taxonomies.tags.Alphabetical $.Site.Taxonomies.tags.ByCount -}} @@ -11,11 +11,11 @@ {{- range $tags -}} {{- $grade := math.Min (math.Floor (div (sub .Count 1) $baseGrade)) 10 -}} {{- $fontSize := add $minFont (mul $grade $baseFont) -}} - {{ .Page.LinkTitle }} {{ .Count }} + {{ .Page.LinkTitle }} {{ .Count }} {{- end -}} {{- else -}} {{- range $.Site.Taxonomies.tags.ByCount -}} - {{ .Page.LinkTitle }} {{ .Count }} + {{ .Page.LinkTitle }} {{ .Count }} {{- end -}} {{- end -}}
    diff --git a/layouts/taxonomies.html b/layouts/taxonomies.html index 4c1133fb..e8c06344 100644 --- a/layouts/taxonomies.html +++ b/layouts/taxonomies.html @@ -30,9 +30,9 @@ {{- end -}} {{- if gt (len $pages) 5 -}} - +
    {{ T "pagination.more" }} >> - +
    {{- end -}}