chore: Change spaces indent back to 2

This commit is contained in:
Vĩnh Phước
2025-03-08 15:57:53 +07:00
parent 2cff086048
commit c51feb34c3
8 changed files with 195 additions and 196 deletions

View File

@@ -1,23 +1,23 @@
:root { :root {
--accent: #23b0ff; --accent: #23b0ff;
--accent-contrast-color: black; --accent-contrast-color: black;
--article-link-color: var(inherit); --article-link-color: var(inherit);
--background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%);
--border-color: rgba(255, 255, 255, 0.1); --border-color: rgba(255, 255, 255, 0.1);
--color: white; --color: white;
// Use in code syntax highlighting // Use in code syntax highlighting
--syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%);
--syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
--syntax-punctuation-color: white; --syntax-punctuation-color: white;
--syntax-value-color: color-mix(in srgb, var(--accent), white); --syntax-value-color: color-mix(in srgb, var(--accent), white);
--syntax-comment-color: rgba(255, 255, 255, 0.3); --syntax-comment-color: rgba(255, 255, 255, 0.3);
--syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
--syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4); --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
--syntax-line-highlight-color: hsl(24, 20%, 95%); --syntax-line-highlight-color: hsl(24, 20%, 95%);
--syntax-line-highlight-box-shadow: white; --syntax-line-highlight-box-shadow: white;
--syntax-code-border-color: rgba(255, 255, 255, 0.1); --syntax-code-border-color: rgba(255, 255, 255, 0.1);
--syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2);
--syntax-code-copy-button-color: #bbb; --syntax-code-copy-button-color: #bbb;
--syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2);
} }

View File

@@ -1,23 +1,23 @@
:root { :root {
--accent: #78e2a0; --accent: #78e2a0;
--accent-contrast-color: black; --accent-contrast-color: black;
--article-link-color: var(inherit); --article-link-color: var(inherit);
--background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%);
--border-color: rgba(255, 255, 255, 0.1); --border-color: rgba(255, 255, 255, 0.1);
--color: white; --color: white;
// Use in code syntax highlighting // Use in code syntax highlighting
--syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%);
--syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
--syntax-value-color: color-mix(in srgb, var(--accent), white); --syntax-value-color: color-mix(in srgb, var(--accent), white);
--syntax-punctuation-color: white; --syntax-punctuation-color: white;
--syntax-comment-color: rgba(255, 255, 255, 0.3); --syntax-comment-color: rgba(255, 255, 255, 0.3);
--syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
--syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4); --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
--syntax-line-highlight-color: hsl(24, 20%, 95%); --syntax-line-highlight-color: hsl(24, 20%, 95%);
--syntax-line-highlight-box-shadow: white; --syntax-line-highlight-box-shadow: white;
--syntax-code-border-color: rgba(255, 255, 255, 0.1); --syntax-code-border-color: rgba(255, 255, 255, 0.1);
--syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2);
--syntax-code-copy-button-color: #bbb; --syntax-code-copy-button-color: #bbb;
--syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2);
} }

View File

@@ -1,23 +1,23 @@
:root { :root {
--accent: #ffa86a; --accent: #ffa86a;
--accent-contrast-color: black; --accent-contrast-color: black;
--article-link-color: var(inherit); --article-link-color: var(inherit);
--background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%);
--border-color: rgba(255, 255, 255, 0.1); --border-color: rgba(255, 255, 255, 0.1);
--color: white; --color: white;
// Use in code syntax highlighting // Use in code syntax highlighting
--syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%);
--syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
--syntax-value-color: color-mix(in srgb, var(--accent), white); --syntax-value-color: color-mix(in srgb, var(--accent), white);
--syntax-punctuation-color: white; --syntax-punctuation-color: white;
--syntax-comment-color: rgba(255, 255, 255, 0.3); --syntax-comment-color: rgba(255, 255, 255, 0.3);
--syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
--syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4); --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
--syntax-line-highlight-color: hsl(24, 20%, 95%); --syntax-line-highlight-color: hsl(24, 20%, 95%);
--syntax-line-highlight-box-shadow: white; --syntax-line-highlight-box-shadow: white;
--syntax-code-border-color: rgba(255, 255, 255, 0.1); --syntax-code-border-color: rgba(255, 255, 255, 0.1);
--syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2);
--syntax-code-copy-button-color: #bbb; --syntax-code-copy-button-color: #bbb;
--syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2);
} }

View File

@@ -1,23 +1,23 @@
:root { :root {
--accent: #1d1e28; --accent: #1d1e28;
--accent-contrast-color: white; --accent-contrast-color: white;
--article-link-color: var(inherit); --article-link-color: var(inherit);
--background: color-mix(in srgb, var(--accent) 2%, #fefcfa 98%); --background: color-mix(in srgb, var(--accent) 2%, #fefcfa 98%);
--border-color: rgba(0, 0, 0, 0.1); --border-color: rgba(0, 0, 0, 0.1);
--color: black; --color: black;
// Use in code syntax highlighting // Use in code syntax highlighting
--syntax-func-color: color-mix(in srgb, var(--accent) 70%, #000 30%); --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #000 30%);
--syntax-var-color: color-mix(in srgb, var(--accent) 90%, #000); --syntax-var-color: color-mix(in srgb, var(--accent) 90%, #000);
--syntax-value-color: color-mix(in srgb, var(--accent), black); --syntax-value-color: color-mix(in srgb, var(--accent), black);
--syntax-punctuation-color: black; --syntax-punctuation-color: black;
--syntax-comment-color: rgba(0, 0, 0, 0.3); --syntax-comment-color: rgba(0, 0, 0, 0.3);
--syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #000 10%); --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #000 10%);
--syntax-line-highlight-background-color: hsla(336, 20%, 50%, 0.4); --syntax-line-highlight-background-color: hsla(336, 20%, 50%, 0.4);
--syntax-line-highlight-color: hsl(336, 20%, 95%); --syntax-line-highlight-color: hsl(336, 20%, 95%);
--syntax-line-highlight-box-shadow: black; --syntax-line-highlight-box-shadow: black;
--syntax-code-border-color: rgba(0, 0, 0, 0.1); --syntax-code-border-color: rgba(0, 0, 0, 0.1);
--syntax-code-copy-button-background: hsla(360, 0%, 87.8%, 0.2); --syntax-code-copy-button-background: hsla(360, 0%, 87.8%, 0.2);
--syntax-code-copy-button-color: #444; --syntax-code-copy-button-color: #444;
--syntax-code-copy-button-box-shadow-color: rgba(255, 255, 255, 0.2); --syntax-code-copy-button-box-shadow-color: rgba(255, 255, 255, 0.2);
} }

View File

@@ -1,23 +1,23 @@
:root { :root {
--accent: #ee72f1; --accent: #ee72f1;
--accent-contrast-color: black; --accent-contrast-color: black;
--article-link-color: var(inherit); --article-link-color: var(inherit);
--background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%);
--border-color: rgba(255, 255, 255, 0.1); --border-color: rgba(255, 255, 255, 0.1);
--color: white; --color: white;
// Use in code syntax highlighting // Use in code syntax highlighting
--syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%);
--syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
--syntax-value-color: color-mix(in srgb, var(--accent), white); --syntax-value-color: color-mix(in srgb, var(--accent), white);
--syntax-punctuation-color: white; --syntax-punctuation-color: white;
--syntax-comment-color: rgba(255, 255, 255, 0.3); --syntax-comment-color: rgba(255, 255, 255, 0.3);
--syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
--syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4); --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
--syntax-line-highlight-color: hsl(24, 20%, 95%); --syntax-line-highlight-color: hsl(24, 20%, 95%);
--syntax-line-highlight-box-shadow: white; --syntax-line-highlight-box-shadow: white;
--syntax-code-border-color: rgba(255, 255, 255, 0.1); --syntax-code-border-color: rgba(255, 255, 255, 0.1);
--syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2);
--syntax-code-copy-button-color: #bbb; --syntax-code-copy-button-color: #bbb;
--syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2);
} }

View File

@@ -1,23 +1,23 @@
:root { :root {
--accent: #ff6266; --accent: #ff6266;
--accent-contrast-color: black; --accent-contrast-color: black;
--article-link-color: var(inherit); --article-link-color: var(inherit);
--background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%); --background: color-mix(in srgb, var(--accent) 2%, #1d1e28 98%);
--border-color: rgba(255, 255, 255, 0.1); --border-color: rgba(255, 255, 255, 0.1);
--color: white; --color: white;
// Use in code syntax highlighting // Use in code syntax highlighting
--syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%);
--syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent); --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
--syntax-value-color: color-mix(in srgb, var(--accent), white); --syntax-value-color: color-mix(in srgb, var(--accent), white);
--syntax-punctuation-color: white; --syntax-punctuation-color: white;
--syntax-comment-color: rgba(255, 255, 255, 0.3); --syntax-comment-color: rgba(255, 255, 255, 0.3);
--syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%); --syntax-line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
--syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4); --syntax-line-highlight-background-color: hsla(24, 20%, 50%, 0.4);
--syntax-line-highlight-color: hsl(24, 20%, 95%); --syntax-line-highlight-color: hsl(24, 20%, 95%);
--syntax-line-highlight-box-shadow: white; --syntax-line-highlight-box-shadow: white;
--syntax-code-border-color: rgba(255, 255, 255, 0.1); --syntax-code-border-color: rgba(255, 255, 255, 0.1);
--syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2); --syntax-code-copy-button-background: hsla(0, 0%, 87.8%, 0.2);
--syntax-code-copy-button-color: #bbb; --syntax-code-copy-button-color: #bbb;
--syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2); --syntax-code-copy-button-box-shadow-color: rgba(0, 0, 0, 0.2);
} }

View File

@@ -17,7 +17,7 @@ code.language-scss,
.token.number, .token.number,
.token.inserted, .token.inserted,
.token.important { .token.important {
color: var(--syntax-value-color, color-mix(in srgb, var(--accent), white)) !important; color: var(--syntax-value-color, color-mix(in srgb, var(--accent), white)) !important;
} }
.token.tag-id, .token.tag-id,
@@ -34,7 +34,7 @@ code.language-scss,
.token.class-name, .token.class-name,
.token.constant, .token.constant,
.token.symbol { .token.symbol {
color: var(--syntax-var-color, color-mix(in srgb, var(--accent) 90%, transparent)) !important; color: var(--syntax-var-color, color-mix(in srgb, var(--accent) 90%, transparent)) !important;
} }
.token.property, .token.property,
@@ -42,112 +42,111 @@ code.language-scss,
.token.function-name, .token.function-name,
.token.deleted, .token.deleted,
code[class*="language-"], code[class*="language-"],
.command-line-prompt > span:before { .command-line-prompt>span:before {
color: var(--syntax-func-color, color-mix(in srgb, var(--accent) 70%, #999 30%)) !important; color: var(--syntax-func-color, color-mix(in srgb, var(--accent) 70%, #999 30%)) !important;
} }
.token.selector, .token.selector,
.token.tag, .token.tag,
.token.punctuation { .token.punctuation {
color: var(--syntax-punctuation-color); color: var(--syntax-punctuation-color);
} }
.token.comment, .token.comment,
.token.prolog, .token.prolog,
.token.doctype, .token.doctype,
.token.cdata { .token.cdata {
color: var(--syntax-comment-color) !important; color: var(--syntax-comment-color) !important;
} }
.token.namespace { .token.namespace {
opacity: 0.7 !important; opacity: 0.7 !important;
} }
pre[data-line] { pre[data-line] {
position: relative; position: relative;
} }
pre[class*="language-"] { pre[class*="language-"] {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: auto; overflow: auto;
} }
.line-highlight { .line-highlight {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
padding: 0; padding: 0;
margin: 0; margin: 0;
background: color-mix(in srgb, var(--syntax-line-highlight-mix), transparent 92%); background: color-mix(in srgb, var(--syntax-line-highlight-mix), transparent 92%);
pointer-events: none; pointer-events: none;
line-height: inherit; line-height: inherit;
white-space: pre; white-space: pre;
} }
.line-highlight:before, .line-highlight:before,
.line-highlight[data-end]:after { .line-highlight[data-end]:after {
content: attr(data-start); content: attr(data-start);
position: absolute; position: absolute;
/* top: .4em; */ left: 0.6em;
left: 0.6em; min-width: 1em;
min-width: 1em; padding: 0 0.5em;
padding: 0 0.5em; background-color: var(--syntax-line-highlight-background-color);
background-color: var(--syntax-line-highlight-background-color); color: var(--syntax-line-highlight-color);
color: var(--syntax-line-highlight-color); font: bold 65%/1.5 sans-serif;
font: bold 65%/1.5 sans-serif; text-align: center;
text-align: center; vertical-align: 0.3em;
vertical-align: 0.3em; border-radius: 999px;
border-radius: 999px; text-shadow: none;
text-shadow: none; box-shadow: 0 1px var(--syntax-line-highlight-box-shadow);
box-shadow: 0 1px var(--syntax-line-highlight-box-shadow);
} }
.line-highlight[data-end]:after { .line-highlight[data-end]:after {
content: attr(data-end); content: attr(data-end);
top: auto; top: auto;
bottom: 0.4em; bottom: 0.4em;
} }
.line-numbers .line-highlight:before, .line-numbers .line-highlight:before,
.line-numbers .line-highlight:after { .line-numbers .line-highlight:after {
content: none; content: none;
} }
.code-toolbar { .code-toolbar {
--code-margin: 40px; --code-margin: 40px;
position: relative; position: relative;
margin: var(--code-margin) 0; margin: var(--code-margin) 0;
padding: 20px; padding: 20px;
border: 1px solid var(--syntax-code-border-color); border: 1px solid var(--syntax-code-border-color);
+ .code-toolbar, +.code-toolbar,
+ .highlight, +.highlight,
+ .highlight .code-toolbar { +.highlight .code-toolbar {
border-top: 0; border-top: 0;
margin-top: calc(-1 * var(--code-margin)); margin-top: calc(-1 * var(--code-margin));
} }
pre, pre,
code { code {
border: none; border: none;
} }
code { code {
display: block; display: block;
color: inherit; color: inherit;
} }
> .toolbar { >.toolbar {
button { button {
font-size: 0.8em !important; font-size: 0.8em !important;
background: var(--syntax-code-copy-button-background) !important; background: var(--syntax-code-copy-button-background) !important;
color: var(--syntax-code-copy-button-color) !important; color: var(--syntax-code-copy-button-color) !important;
box-shadow: 0 2px 0 0 var(--syntax-code-copy-button-box-shadow-color) !important; box-shadow: 0 2px 0 0 var(--syntax-code-copy-button-box-shadow-color) !important;
border-radius: 0 !important; border-radius: 0 !important;
margin: 6px !important; margin: 6px !important;
padding: 10px !important; padding: 10px !important;
user-select: none; user-select: none;
}
} }
} }
}

View File

@@ -19,4 +19,4 @@
color: var(--accent); color: var(--accent);
} }
} }
} }