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

refactor: reorganize CSS structure and standardize CSS variable usage for improved maintainability (#690)

Browse Source 
* refactor: CSS variables to use fixit-var for consistency across styles

* refactor: reorganize CSS structure and consolidate imports for improved maintainability

* refactor: unify CSS variable usage and improve structure across stylesheets

* refactor: standardize CSS variable usage for layout

* refactor: standardize CSS variable usage for archive and special pages

* refactor: standardize CSS variable usage for single page

* refactor: standardize CSS variable usage for widgets

* refactor(css): refactors the border-radius mixin and adds the .rounded-full utility class

* refactor: standardize z-index usage across components

* refactor(css): removes deprecated compatibility mixins and replaces them with native CSS properties

* feat: unify color variable naming and update theme color values

- Rename `global-font-secondary-color` to `global-placeholder-color` for more accurate description of its purpose
- Update multiple style references to use the new `secondary` theme color variable
- Update theme color mapping to the new color values ​​for improved visual consistency
- Fixed the use of search box placeholder colors and removed hard-coded transparency values
- Added color preview test documentation for easier verification of color rendering
- Cleaned up some duplicate dark mode styles and replaced them with unified CSS variables

* refactor: remove the `hr-background-color` variable and uses `global-border-color` uniformly

* feat(CSE): add dark theme style to Google CSE search box and results container

* fix(task-lists): fixed styling and rendering issues with nested task lists
This commit is contained in:
Cell
2026-02-28 17:24:10 +08:00
committed by GitHub
parent 175cf888d5
commit 3926cc0220
87 changed files with 1364 additions and 1346 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/copilot-instructions.md
+1 -1
View File
@@ -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;
```
apps/test/content/posts/exact-color-match-test.md → apps/test/content/posts/color-preview-test.md
+16 -1
View File
@@ -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.
<!--more-->
## 📝 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:
apps/test/content/posts/tabs-comprehensive-test.md
-1
View File
@@ -2,7 +2,6 @@
title: Tabs Comprehensive Test Cases
date: 2025-09-09T10:00:00+08:00
collections:
- Tests
categories:
- Shortcodes
apps/test/content/posts/task-list-test.md
+50
View File
@@ -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.
<!--more-->
## 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.
assets/css/_core/_base.scss
+18 -27
View File
@@ -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';
assets/css/_core/_common.scss
+5 -1
View File
@@ -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);
}
assets/css/_core/_index.scss
+6
View File
@@ -0,0 +1,6 @@
@import "_mixin";
@import "_base";
@import "_common";
@import "_root";
@import "_layout";
@import '_widgets';
assets/css/_core/_breadcrumb.scss → assets/css/_core/_layout/_breadcrumb.scss
+6 -10
View File
@@ -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);
}
}
}
assets/css/_core/_footer.scss → assets/css/_core/_layout/_footer.scss
+4 -8
View File
@@ -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);
}
}
assets/css/_core/_header.scss → assets/css/_core/_layout/_header.scss
+84 -127
View File
@@ -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 {
assets/css/_core/_layout.scss → assets/css/_core/_layout/_index.scss
+4 -4
View File
@@ -36,7 +36,7 @@
}
}
@import "_header";
@import "_breadcrumb";
@import "_footer";
@import "_pagination";
@import "header";
@import "breadcrumb";
@import "footer";
@import "pagination";
assets/css/_core/_pagination.scss → assets/css/_core/_layout/_pagination.scss
+6 -23
View File
@@ -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,
assets/css/_mixin/_blur.scss → assets/css/_core/_mixin/_blur.scss
+1 -1
View File
@@ -1,6 +1,6 @@
@mixin blur {
// TODO refactor blur with backdrop-filter
.blur & {
@include filter(blur(1.5px));
filter: blur(1.5px);
}
}
assets/css/_core/_mixin/_border-radius.scss
+26
View File
@@ -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;
}
}
assets/css/_core/_mixin/_compatibility.scss
+33
View File
@@ -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;
}
assets/css/_mixin/_index.scss → assets/css/_core/_mixin/_index.scss
+2
View File
@@ -1,4 +1,6 @@
@import 'theme-vars';
@import 'blur';
@import 'border-radius';
@import 'compatibility';
@import 'link';
@import 'loading';
assets/css/_mixin/_link.scss → assets/css/_core/_mixin/_link.scss
+6 -9
View File
@@ -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;
}
assets/css/_mixin/_loading.scss → assets/css/_core/_mixin/_loading.scss
+2 -2
View File
@@ -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);
}
assets/css/_core/_mixin/_scrollbar-width.scss
+6
View File
@@ -0,0 +1,6 @@
@mixin scrollbar-width($width: thin, $widthLegacy: 12px) {
@include set-fixit-vars((
scrollbar-width: $width,
scrollbar-width-legacy: $widthLegacy,
));
}
assets/css/_core/_mixin/_theme-vars.scss
+80
View File
@@ -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)};
}
}
}
assets/css/_core/_mixin/_z-index.scss
+25
View File
@@ -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;
}
}
assets/css/_core/_root.scss
+121 -56
View File
@@ -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),
));
assets/css/_widgets/_cookieconsent.scss → assets/css/_core/_widgets/_cookieconsent.scss
+3 -3
View File
@@ -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;
}
}
assets/css/_core/_widgets/_details.scss
+47
View File
@@ -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;
}
}
}
assets/css/_core/_widgets/_fixed-button.scss
+83
View File
@@ -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;
}
}
assets/css/_core/_widgets/_github-corner.scss
+42
View File
@@ -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;
}
}
assets/css/_widgets/_icon.scss → assets/css/_core/_widgets/_icon.scss
View File
assets/css/_widgets/_index.scss → assets/css/_core/_widgets/_index.scss
-1
View File
@@ -3,7 +3,6 @@
@import 'fixed-button';
@import 'github-corner';
@import 'icon';
@import 'img';
@import 'mask';
@import 'noscript-warning';
@import 'post-chat';
assets/css/_widgets/_mask.scss → assets/css/_core/_widgets/_mask.scss
+2 -2
View File
@@ -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);
}
}
assets/css/_widgets/_noscript-warning.scss → assets/css/_core/_widgets/_noscript-warning.scss
+2 -6
View File
@@ -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);
}
assets/css/_widgets/_post-chat.scss → assets/css/_core/_widgets/_post-chat.scss
View File
assets/css/_core/_widgets/_reading-progress.scss
+12
View File
@@ -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));
}
}
assets/css/_core/_widgets/_scrollbar.scss
+36
View File
@@ -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);
}
assets/css/_widgets/_typeit.scss → assets/css/_core/_widgets/_typeit.scss
+2 -2
View File
@@ -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);
}
assets/css/_maps/_colors.scss
+6 -14
View File
@@ -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;
assets/css/_maps/_index.scss
+5
View File
@@ -0,0 +1,5 @@
@import 'admonition';
@import 'alert';
@import 'code-type';
@import 'colors';
@import 'utilities';
assets/css/_mixin/_compatibility.scss
-108
View File
@@ -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;
}
assets/css/_mixin/_scrollbar-width.scss
-4
View File
@@ -1,4 +0,0 @@
@mixin scrollbar-width($width: thin, $widthLegacy: 12px) {
#{$rootPrefix}scrollbar-width: #{$width};
#{$rootPrefix}scrollbar-width-legacy: #{$widthLegacy};
}
assets/css/_mixin/_z-index.scss
-3
View File
@@ -1,3 +0,0 @@
@mixin z-index($level, $diff: 0) {
z-index: ($level * 100) + $diff;
}
assets/css/_page/_404.scss
+1 -1
View File
@@ -1,6 +1,6 @@
#content-404 {
font-size: 1.8rem;
line-height: 3rem;
@include transform(translateY(30vh));
text-align: center;
transform: translateY(30vh);
}
assets/css/_page/_archive/_tags.scss
+24 -19
View File
@@ -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));
}
}
}
}
}
assets/css/_page/_archive/_terms.scss
+4 -8
View File
@@ -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;
}
assets/css/_page/_home.scss
+16 -16
View File
@@ -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);
}
}
assets/css/_page/_index.scss
+3 -1
View File
@@ -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";
assets/css/_core/_media.scss → assets/css/_page/_media.scss
+7 -7
View File
@@ -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 {
assets/css/_page/_offline.scss
+3 -1
View File
@@ -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;
}
assets/css/_core/_patch.scss → assets/css/_page/_patch.scss
+3 -3
View File
@@ -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);
}
}
assets/css/_page/_single/_alert.scss
+11 -7
View File
@@ -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)
));
}
}
}
assets/css/_page/_single/_code-syntax/_github-dark-dimmed.scss
+74 -74
View File
@@ -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);
}
}
assets/css/_page/_single/_code-syntax/_index.scss
+3 -3
View File
@@ -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';
}
}
assets/css/_page/_single/_code.scss
+74 -69
View File
@@ -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';
}
}
assets/css/_page/_single/_collections.scss
+20 -32
View File
@@ -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%);
}
}
assets/css/_page/_single/_color-preview.scss
+7 -7
View File
@@ -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);
}
}
}
assets/css/_page/_single/_diagram-copy-btn.scss
+23 -17
View File
@@ -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);
}
}
}
assets/css/_page/_single/_fixit-decryptor.scss
+14 -24
View File
@@ -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;
assets/css/_page/_single/_footer.scss
+6 -10
View File
@@ -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);
}
}
}
assets/css/_page/_single/_index.scss
+74 -98
View File
@@ -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
assets/css/_page/_single/_related.scss
+5 -11
View File
@@ -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);
}
}
}
}
assets/css/_page/_single/_reward.scss
+15 -22
View File
@@ -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%);
}
}
assets/css/_page/_single/_shortcodes/_admonition.scss
+22 -18
View File
@@ -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;
assets/css/_page/_single/_shortcodes/_cardlink.scss
+7 -10
View File
@@ -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);
}
assets/css/_page/_single/_shortcodes/_center-quote.scss
+2 -10
View File
@@ -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;
}
}
}
assets/css/_page/_single/_shortcodes/_file-tree.scss
+13 -13
View File
@@ -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);
}
}
assets/css/_page/_single/_shortcodes/_instagram.scss
+1 -1
View File
@@ -1,5 +1,5 @@
iframe.instagram-media {
[data-theme='dark'] & {
[data-theme=dark] & {
border: none !important;
}
}
assets/css/_page/_single/_shortcodes/_mapbox.scss
+1 -1
View File
@@ -1,5 +1,5 @@
.mapbox {
margin: 0.5rem 0;
padding: 0.5rem 0;
@include border-radius($global-border-radius);
@include border-radius;
}
assets/css/_page/_single/_shortcodes/_mermaid.scss
+2 -2
View File
@@ -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;
}
assets/css/_page/_single/_shortcodes/_tabs.scss
+55 -59
View File
@@ -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);
}
}
}
assets/css/_page/_single/_shortcodes/_timeline.scss
+26 -28
View File
@@ -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);
}
}
}
assets/css/_page/_single/_toc.scss
+29 -57
View File
@@ -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);
assets/css/_page/_special/_friends.scss
+3 -3
View File
@@ -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 {
assets/css/_page/_special/_search.scss
+32 -2
View File
@@ -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)
}
assets/css/_variables.scss
+19 -25
View File
@@ -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';
assets/css/_widgets/_details.scss
-47
View File
@@ -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;
}
}
}
assets/css/_widgets/_fixed-button.scss
-86
View File
@@ -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;
}
}
assets/css/_widgets/_github-corner.scss
-47
View File
@@ -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;
}
}
assets/css/_widgets/_img.scss
-3
View File
@@ -1,3 +0,0 @@
img {
@include border-radius($global-border-radius/2);
}
assets/css/_widgets/_reading-progress.scss
-12
View File
@@ -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});
}
}
assets/css/_widgets/_scrollbar.scss
-36
View File
@@ -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;
}
assets/css/style.scss
+1 -7
View File
@@ -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";
assets/js/theme.js
+1 -1
View File
@@ -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) {
assets/lib/aplayer/dark.scss
Vendored
+1 -1
View File
@@ -1,4 +1,4 @@
[data-theme='dark'] .aplayer {
[data-theme=dark] .aplayer {
background: #212121;
&.aplayer-withlist {
assets/lib/valine/valine.scss
Vendored
+7 -20
View File
@@ -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;
}
}
}
}
layouts/_partials/footer.html
+1 -1
View File
@@ -62,7 +62,7 @@
{{- $siteTimeIcon := printf (cond .Animate "%v animate-icon" "%v") .Icon -}}
{{- dict "Class" $siteTimeIcon | partial "plugin/icon.html" -}}
{{- with .Pre -}}<span class="ms-1 d-none">{{ . }}</span>{{- end -}}
{{- printf `<span class="run-times ms-1">%v</span>` (T "footer.siteRunning") | safeHTML -}}
{{- printf `<span class="run-times variant-numeric ms-1">%v</span>` (T "footer.siteRunning") | safeHTML -}}
</span>
{{- end -}}
{{- end -}}
layouts/_partials/function/task-lists.html
+3 -3
View File
@@ -28,10 +28,10 @@
*/ -}}
{{- $icon := dict "Class" (add "checkbox-icon " (index $iconMap " ")) | partial "plugin/icon.html" -}}
{{- $label := T (printf "taskList.%v" " ") -}}
{{- $content := replaceRE `<li>(\n<p>)*<input disabled="" type="checkbox"> (.+?)(</p>\n)*</li>` (printf `<li data-task=" " title=%q>$1%s$2$3</li>` $label $icon) . -}}
{{- $content := replaceRE `(?s)<li>((\n<p>)*)<input disabled="" type="checkbox">` (printf `<li data-task=" " title=%q>$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 `<li>(\n<p>)*<input checked="" disabled="" type="checkbox"> (.+?)(</p>\n)*</li>` (printf `<li data-task="x" title=%q>$1%s$2$3</li>` $label $icon) $content -}}
{{- $content = replaceRE `(?s)<li>((\n<p>)*)<input checked="" disabled="" type="checkbox">` (printf `<li data-task="x" title=%q>$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 `<li>(\n<p>)*\[%s\] (.+?)(</p>\n)*</li>` $sign) (printf `<li data-task=%q title=%q>$1%s$2$3</li>` $originSign $label $icon) $content -}}
{{- $content = replaceRE (printf `(?s)<li>((\n<p>)*)\[%s\]` $sign) (printf `<li data-task=%q title=%q>$1%s` $originSign $label $icon) $content -}}
{{- end -}}
{{- return $content -}}
layouts/_partials/widgets.html
+4 -4
View File
@@ -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 -}}
<div class="reading-progress-bar" {{ printf `style="%v"` $style | safeHTMLAttr }}></div>
{{- end -}}
layouts/tags.html
+3 -3
View File
@@ -1,7 +1,7 @@
{{- /* Tags Page */ -}}
{{- $tagCloud := .Site.Params.tagcloud -}}
<div class="tag-cloud-tags{{ with $tagCloud.enable }} text-center{{ end }}">
<div class="tags{{ with $tagCloud.enable }} tag-cloud-tags{{ end }}">
{{- /* 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) -}}
<a href='{{ partial "function/escapeurl.html" .Page.RelPermalink }}' class="tag-cloud-{{ $grade }}" style="--tag-font: {{ $fontSize }}px">{{ .Page.LinkTitle }} <sup>{{ .Count }}</sup></a>
<a href='{{ partial "function/escapeurl.html" .Page.RelPermalink }}' class="tag-item" data-grade="{{ $grade }}" style="--fi-tag-cloud-font: {{ $fontSize }}px">{{ .Page.LinkTitle }} <sup>{{ .Count }}</sup></a>
{{- end -}}
{{- else -}}
{{- range $.Site.Taxonomies.tags.ByCount -}}
<a href='{{ partial "function/escapeurl.html" .Page.RelPermalink }}'>{{ .Page.LinkTitle }} <sup>{{ .Count }}</sup></a>
<a href='{{ partial "function/escapeurl.html" .Page.RelPermalink }}' class="tag-item">{{ .Page.LinkTitle }} <sup>{{ .Count }}</sup></a>
{{- end -}}
{{- end -}}
</div>
layouts/taxonomies.html
+2 -2
View File
@@ -30,9 +30,9 @@
</article>
{{- end -}}
{{- if gt (len $pages) 5 -}}
<span class="more-post">
<div class="more-post">
<a href='{{ partial "function/escapeurl.html" .RelPermalink }}' class="more-single-link">{{ T "pagination.more" }} >></a>
</span>
</div>
{{- end -}}
</div>
</div>