Merge branch 'dev' into feature/callout-tailwind

This commit is contained in:
ZhenShuo Leo
2025-12-23 01:21:40 +08:00
58 changed files with 1719 additions and 923 deletions

View File

@@ -48,6 +48,7 @@
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
--blur-sm: 8px;
--blur-xl: 24px;
--blur-2xl: 40px;
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -522,6 +523,7 @@
border-top-width: 1px;
margin-top: 3em;
margin-bottom: 3em;
border: 0.8px solid rgba(var(--color-neutral-300), 1);
}
:where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 500;
@@ -618,7 +620,6 @@
color: var(--tw-prose-code);
font-weight: 600;
font-size: 0.875em;
background-color: rgba(var(--color-neutral-50), 1);
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
@@ -745,9 +746,9 @@
--tw-prose-bold: rgba(var(--color-neutral-900), 1);
--tw-prose-counters: rgba(var(--color-neutral-800), 1);
--tw-prose-bullets: rgba(var(--color-neutral-500), 1);
--tw-prose-hr: rgba(var(--color-neutral-200), 1);
--tw-prose-hr: oklch(92.8% 0.006 264.531);
--tw-prose-quotes: rgba(var(--color-neutral-700), 1);
--tw-prose-quote-borders: rgba(var(--color-primary-200), 1);
--tw-prose-quote-borders: rgba(var(--color-primary-500), 1);
--tw-prose-captions: rgba(var(--color-neutral-500), 1);
--tw-prose-kbd: oklch(21% 0.034 264.665);
--tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent);
@@ -763,9 +764,9 @@
--tw-prose-invert-bold: rgba(var(--color-neutral), 1);
--tw-prose-invert-counters: rgba(var(--color-neutral-400), 1);
--tw-prose-invert-bullets: rgba(var(--color-neutral-600), 1);
--tw-prose-invert-hr: rgba(var(--color-neutral-500), 1);
--tw-prose-invert-hr: oklch(37.3% 0.034 259.733);
--tw-prose-invert-quotes: rgba(var(--color-neutral-200), 1);
--tw-prose-invert-quote-borders: rgba(var(--color-primary-900), 1);
--tw-prose-invert-quote-borders: rgba(var(--color-primary-600), 1);
--tw-prose-invert-captions: rgba(var(--color-neutral-400), 1);
--tw-prose-invert-kbd: #fff;
--tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
@@ -1379,6 +1380,9 @@
.justify-center {
justify-content: center;
}
.gap-1 {
gap: calc(var(--spacing) * 1);
}
.gap-2 {
gap: calc(var(--spacing) * 2);
}
@@ -1506,6 +1510,10 @@
border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg);
}
.rounded-t-md {
border-top-left-radius: var(--radius-md);
border-top-right-radius: var(--radius-md);
}
.rounded-b-lg {
border-bottom-right-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-lg);
@@ -1623,8 +1631,8 @@
:where(mark):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
background-color: rgba(var(--color-primary-400), 1);
}
:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
background-color: rgba(var(--color-neutral-700), 1);
:where(code:not(pre code)):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
background-color: color-mix(in oklab, oklch(21% 0.006 285.885) 70%, transparent);
}
:where(a.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
text-decoration-color: rgba(var(--color-primary-400), 1);
@@ -1632,6 +1640,9 @@
:where(p.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
text-decoration-color: rgba(var(--color-primary-400), 1);
}
:where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border: 0.8px solid rgba(var(--color-neutral-500), 1);
}
}
.bg-\[\#6d6d6d\] {
background-color: #6d6d6d;
@@ -1654,6 +1665,12 @@
background-color: color-mix(in oklab, rgba(var(--color-neutral-100), 1) 50%, transparent);
}
}
.bg-neutral-100\/75 {
background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-100), 1), 1) 75%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, rgba(var(--color-neutral-100), 1) 75%, transparent);
}
}
.bg-neutral-300 {
background-color: rgba(var(--color-neutral-300), 1);
}
@@ -2201,6 +2218,11 @@
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.backdrop-blur-xl {
--tw-backdrop-blur: blur(var(--blur-xl));
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2442,6 +2464,13 @@
}
}
}
.hover\:bg-neutral-200 {
&:hover {
@media (hover: hover) {
background-color: rgba(var(--color-neutral-200), 1);
}
}
}
.hover\:bg-primary-100 {
&:hover {
@media (hover: hover) {
@@ -3086,8 +3115,8 @@
:where(mark):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
background-color: rgba(var(--color-primary-400), 1);
}
:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
background-color: rgba(var(--color-neutral-700), 1);
:where(code:not(pre code)):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
background-color: color-mix(in oklab, oklch(21% 0.006 285.885) 70%, transparent);
}
:where(a.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
text-decoration-color: rgba(var(--color-primary-400), 1);
@@ -3095,6 +3124,9 @@
:where(p.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
text-decoration-color: rgba(var(--color-primary-400), 1);
}
:where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border: 0.8px solid rgba(var(--color-neutral-500), 1);
}
}
}
.dark\:bg-neutral-400 {
@@ -3125,6 +3157,14 @@
}
}
}
.dark\:bg-neutral-800\/60 {
&:is(.dark *) {
background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-800), 1), 1) 60%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, rgba(var(--color-neutral-800), 1) 60%, transparent);
}
}
}
.dark\:bg-neutral-900\/50 {
&:is(.dark *) {
background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 50%, transparent);
@@ -3256,6 +3296,15 @@
}
}
}
.dark\:hover\:bg-neutral-700 {
&:is(.dark *) {
&:hover {
@media (hover: hover) {
background-color: rgba(var(--color-neutral-700), 1);
}
}
}
}
.dark\:hover\:bg-primary-400 {
&:is(.dark *) {
&:hover {
@@ -3315,16 +3364,36 @@
}
}
@layer utilities {
.prose .chroma {
position: static;
.highlight-wrapper {
position: relative;
z-index: 0;
display: block;
overflow: hidden;
border-radius: var(--radius-md);
background-color: rgba(var(--color-neutral-50), 1);
color: rgba(var(--color-neutral-700), 1);
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
}
.highlight-wrapper pre, .highlight-wrapper table, .highlight-wrapper div {
margin-top: 0;
margin-bottom: 0;
}
.highlight-wrapper:has(.codeblock-title) pre {
border-radius: 0;
}
.codeblock-title {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
border-color: rgba(var(--color-neutral-200), 1);
padding-inline: calc(var(--spacing) * 4);
padding-block: calc(var(--spacing) * 2);
&:is(.dark *) {
background-color: rgba(var(--color-neutral-700), 1);
border-color: rgba(var(--color-neutral-800), 1);
}
background-color: #fff;
&:is(.dark *) {
color: rgba(var(--color-neutral-200), 1);
background-color: #0d1117;
}
}
.chroma .lntd, .chroma .lntd pre {
@@ -3348,134 +3417,535 @@
margin-inline: calc(var(--spacing) * -4);
display: block;
width: auto;
background-color: rgba(var(--color-primary-100), 1);
padding-inline: calc(var(--spacing) * 4);
&:is(.dark *) {
background-color: rgba(var(--color-primary-900), 1);
}
}
.chroma .lntd .hl {
margin: calc(var(--spacing) * 0);
padding: calc(var(--spacing) * 0);
}
.chroma .lnt, .chroma .ln {
margin-right: 0.4em;
padding-inline: 0.4em;
padding-block: calc(var(--spacing) * 0);
color: rgba(var(--color-neutral-600), 1);
&:is(.dark *) {
color: rgba(var(--color-neutral-300), 1);
.chroma:not(:is(table *)) > code {
display: block;
min-width: max-content;
}
html:not(.dark) {
.bg {
background-color: #fff;
}
.chroma {
background-color: #fff;
}
.chroma .err {
color: #f6f8fa;
background-color: #82071e;
}
.chroma .lnlinks {
outline: none;
text-decoration: none;
color: inherit;
}
.chroma .lntd {
vertical-align: top;
padding: 0;
margin: 0;
border: 0;
}
.chroma .lntable {
border-spacing: 0;
}
.chroma .hl {
background-color: #e5e5e5;
}
.chroma .lnt {
white-space: pre;
-webkit-user-select: none;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: #7f7f7f;
}
.chroma .ln {
white-space: pre;
-webkit-user-select: none;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: #7f7f7f;
}
.chroma .line {
display: flex;
}
.chroma .k {
color: #cf222e;
}
.chroma .kc {
color: #cf222e;
}
.chroma .kd {
color: #cf222e;
}
.chroma .kn {
color: #cf222e;
}
.chroma .kp {
color: #cf222e;
}
.chroma .kr {
color: #cf222e;
}
.chroma .kt {
color: #cf222e;
}
.chroma .na {
color: #1f2328;
}
.chroma .nc {
color: #1f2328;
}
.chroma .no {
color: #0550ae;
}
.chroma .nd {
color: #0550ae;
}
.chroma .ni {
color: #6639ba;
}
.chroma .nl {
color: #900;
font-weight: bold;
}
.chroma .nn {
color: #24292e;
}
.chroma .nx {
color: #1f2328;
}
.chroma .nt {
color: #0550ae;
}
.chroma .nb {
color: #6639ba;
}
.chroma .bp {
color: #6a737d;
}
.chroma .nv {
color: #953800;
}
.chroma .vc {
color: #953800;
}
.chroma .vg {
color: #953800;
}
.chroma .vi {
color: #953800;
}
.chroma .vm {
color: #953800;
}
.chroma .nf {
color: #6639ba;
}
.chroma .fm {
color: #6639ba;
}
.chroma .s {
color: #0a3069;
}
.chroma .sa {
color: #0a3069;
}
.chroma .sb {
color: #0a3069;
}
.chroma .sc {
color: #0a3069;
}
.chroma .dl {
color: #0a3069;
}
.chroma .sd {
color: #0a3069;
}
.chroma .s2 {
color: #0a3069;
}
.chroma .se {
color: #0a3069;
}
.chroma .sh {
color: #0a3069;
}
.chroma .si {
color: #0a3069;
}
.chroma .sx {
color: #0a3069;
}
.chroma .sr {
color: #0a3069;
}
.chroma .s1 {
color: #0a3069;
}
.chroma .ss {
color: #032f62;
}
.chroma .m {
color: #0550ae;
}
.chroma .mb {
color: #0550ae;
}
.chroma .mf {
color: #0550ae;
}
.chroma .mh {
color: #0550ae;
}
.chroma .mi {
color: #0550ae;
}
.chroma .il {
color: #0550ae;
}
.chroma .mo {
color: #0550ae;
}
.chroma .o {
color: #0550ae;
}
.chroma .ow {
color: #0550ae;
}
.chroma .p {
color: #1f2328;
}
.chroma .c {
color: #57606a;
}
.chroma .ch {
color: #57606a;
}
.chroma .cm {
color: #57606a;
}
.chroma .c1 {
color: #57606a;
}
.chroma .cs {
color: #57606a;
}
.chroma .cp {
color: #57606a;
}
.chroma .cpf {
color: #57606a;
}
.chroma .gd {
color: #82071e;
background-color: #ffebe9;
}
.chroma .ge {
color: #1f2328;
}
.chroma .gi {
color: #116329;
background-color: #dafbe1;
}
.chroma .go {
color: #1f2328;
}
.chroma .gl {
text-decoration: underline;
}
.chroma .w {
color: #fff;
}
}
.chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .nc, .chroma .fm, .chroma .nn, .chroma .vc, .chroma .o {
color: rgba(var(--color-primary-600), 1);
&:is(.dark *) {
color: rgba(var(--color-primary-300), 1);
html.dark {
.bg {
color: #e6edf3;
background-color: #0d1117;
}
.chroma {
color: #e6edf3;
background-color: #0d1117;
}
.chroma .err {
color: #f85149;
}
.chroma .lnlinks {
outline: none;
text-decoration: none;
color: inherit;
}
.chroma .lntd {
vertical-align: top;
padding: 0;
margin: 0;
border: 0;
}
.chroma .lntable {
border-spacing: 0;
}
.chroma .hl {
background-color: #333;
}
.chroma .lnt {
white-space: pre;
-webkit-user-select: none;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: #737679;
}
.chroma .ln {
white-space: pre;
-webkit-user-select: none;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: #6e7681;
}
.chroma .line {
display: flex;
}
.chroma .k {
color: #ff7b72;
}
.chroma .kc {
color: #79c0ff;
}
.chroma .kd {
color: #ff7b72;
}
.chroma .kn {
color: #ff7b72;
}
.chroma .kp {
color: #79c0ff;
}
.chroma .kr {
color: #ff7b72;
}
.chroma .kt {
color: #ff7b72;
}
.chroma .nc {
color: #f0883e;
font-weight: bold;
}
.chroma .no {
color: #79c0ff;
font-weight: bold;
}
.chroma .nd {
color: #d2a8ff;
font-weight: bold;
}
.chroma .ni {
color: #ffa657;
}
.chroma .ne {
color: #f0883e;
font-weight: bold;
}
.chroma .nl {
color: #79c0ff;
font-weight: bold;
}
.chroma .nn {
color: #ff7b72;
}
.chroma .py {
color: #79c0ff;
}
.chroma .nt {
color: #7ee787;
}
.chroma .nv {
color: #79c0ff;
}
.chroma .vc {
color: #79c0ff;
}
.chroma .vg {
color: #79c0ff;
}
.chroma .vi {
color: #79c0ff;
}
.chroma .vm {
color: #79c0ff;
}
.chroma .nf {
color: #d2a8ff;
font-weight: bold;
}
.chroma .fm {
color: #d2a8ff;
font-weight: bold;
}
.chroma .l {
color: #a5d6ff;
}
.chroma .ld {
color: #79c0ff;
}
.chroma .s {
color: #a5d6ff;
}
.chroma .sa {
color: #79c0ff;
}
.chroma .sb {
color: #a5d6ff;
}
.chroma .sc {
color: #a5d6ff;
}
.chroma .dl {
color: #79c0ff;
}
.chroma .sd {
color: #a5d6ff;
}
.chroma .s2 {
color: #a5d6ff;
}
.chroma .se {
color: #79c0ff;
}
.chroma .sh {
color: #79c0ff;
}
.chroma .si {
color: #a5d6ff;
}
.chroma .sx {
color: #a5d6ff;
}
.chroma .sr {
color: #79c0ff;
}
.chroma .s1 {
color: #a5d6ff;
}
.chroma .ss {
color: #a5d6ff;
}
.chroma .m {
color: #a5d6ff;
}
.chroma .mb {
color: #a5d6ff;
}
.chroma .mf {
color: #a5d6ff;
}
.chroma .mh {
color: #a5d6ff;
}
.chroma .mi {
color: #a5d6ff;
}
.chroma .il {
color: #a5d6ff;
}
.chroma .mo {
color: #a5d6ff;
}
.chroma .o {
color: #ff7b72;
font-weight: bold;
}
.chroma .ow {
color: #ff7b72;
font-weight: bold;
}
.chroma .c {
color: #8b949e;
font-style: italic;
}
.chroma .ch {
color: #8b949e;
font-style: italic;
}
.chroma .cm {
color: #8b949e;
font-style: italic;
}
.chroma .c1 {
color: #8b949e;
font-style: italic;
}
.chroma .cs {
color: #8b949e;
font-weight: bold;
font-style: italic;
}
.chroma .cp {
color: #8b949e;
font-weight: bold;
font-style: italic;
}
.chroma .cpf {
color: #8b949e;
font-weight: bold;
font-style: italic;
}
.chroma .gd {
color: #ffa198;
background-color: #490202;
}
.chroma .ge {
font-style: italic;
}
.chroma .gr {
color: #ffa198;
}
.chroma .gh {
color: #79c0ff;
font-weight: bold;
}
.chroma .gi {
color: #56d364;
background-color: #0f5323;
}
.chroma .go {
color: #8b949e;
}
.chroma .gp {
color: #8b949e;
}
.chroma .gs {
font-weight: bold;
}
.chroma .gu {
color: #79c0ff;
}
.chroma .gt {
color: #ff7b72;
}
.chroma .gl {
text-decoration: underline;
}
.chroma .w {
color: #6e7681;
}
}
.chroma .kc {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
color: rgba(var(--color-secondary-400), 1);
&:is(.dark *) {
color: rgba(var(--color-secondary-500), 1);
}
}
@layer utilities {
.tab__button.tab--active {
border-bottom: 2px solid rgb(var(--color-primary-500));
}
.chroma .kt, .chroma .nv, .chroma .vi, .chroma .vm, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo {
color: rgba(var(--color-secondary-400), 1);
&:is(.dark *) {
color: rgba(var(--color-secondary-600), 1);
}
.tab__panel {
display: none;
}
.chroma .n, .chroma .nd, .chroma .ni, .chroma .nl {
color: rgba(var(--color-secondary-900), 1);
&:is(.dark *) {
color: rgba(var(--color-secondary-200), 1);
}
}
.chroma .na, .chroma .nb, .chroma .bp, .chroma .nx, .chroma .py, .chroma .nt {
color: rgba(var(--color-secondary-800), 1);
&:is(.dark *) {
color: rgba(var(--color-secondary-300), 1);
}
}
.chroma .no, .chroma .ne, .chroma .vg {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
color: rgba(var(--color-secondary-400), 1);
&:is(.dark *) {
color: rgba(var(--color-secondary-500), 1);
}
}
.chroma .nf {
color: rgba(var(--color-secondary-600), 1);
&:is(.dark *) {
color: rgba(var(--color-secondary-500), 1);
}
}
.chroma .l, .chroma .ld, .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .s1, .chroma .gi, .chroma .go, .chroma .gp {
color: rgba(var(--color-primary-800), 1);
&:is(.dark *) {
color: rgba(var(--color-primary-400), 1);
}
}
.chroma .se {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
color: rgba(var(--color-secondary-400), 1);
&:is(.dark *) {
color: rgba(var(--color-secondary-500), 1);
}
}
.chroma .sr, .chroma .ss {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
color: rgba(var(--color-primary-800), 1);
&:is(.dark *) {
color: rgba(var(--color-primary-400), 1);
}
}
.chroma .ow {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
color: rgba(var(--color-primary-400), 1);
&:is(.dark *) {
color: rgba(var(--color-primary-600), 1);
}
}
.chroma .c, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf {
color: rgba(var(--color-neutral-500), 1);
font-style: italic;
&:is(.dark *) {
color: rgba(var(--color-neutral-400), 1);
}
}
.chroma .ch {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
color: rgba(var(--color-neutral-500), 1);
font-style: italic;
&:is(.dark *) {
color: rgba(var(--color-neutral-400), 1);
}
}
.chroma .ge {
font-style: italic;
}
.chroma .gh {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
color: rgba(var(--color-neutral-500), 1);
}
.chroma .gs {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
}
.chroma .gu, .chroma .gt {
color: rgba(var(--color-neutral-500), 1);
}
.chroma .gl {
text-decoration-line: underline;
.tab__panel.tab--active {
display: block;
}
}
#zen-mode-button {
@@ -3717,6 +4187,9 @@ body.zen-mode-enable {
color: var(--adm-todo-text);
}
}
html.dark {
color-scheme: dark;
}
body a, body button {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3805,7 +4278,7 @@ button, [role="button"] {
font-weight: var(--font-weight-normal);
color: rgba(var(--color-neutral-700), 1);
&:is(.dark *) {
color: rgba(var(--color-neutral-400), 1);
color: rgba(var(--color-neutral-300), 1);
}
}
.toc ul > li {
@@ -3813,14 +4286,11 @@ button, [role="button"] {
margin-right: calc(var(--spacing) * 0);
}
}
.highlight-wrapper {
display: block;
}
.highlight {
position: relative;
z-index: 0;
}
.highlight:hover > .copy-button {
.highlight-wrapper:hover > .copy-button {
visibility: visible;
}
.copy-button {
@@ -3918,6 +4388,16 @@ pre {
.thumbnail-shadow {
box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
}
@media (width < 853px) {
.width-patch {
width: 90vw;
}
}
@media (width >= 853px) {
.width-patch {
width: 65ch;
}
}
.anchor {
display: block;
position: relative;

View File

@@ -1,8 +1,24 @@
/* -- Chroma Highlight -- */
/* Background */
.prose .chroma {
@apply static rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
/* margins for codeblock title */
.highlight-wrapper {
@apply block relative z-0 overflow-hidden shadow rounded-md;
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
}
.highlight-wrapper pre,
.highlight-wrapper table, .highlight-wrapper div {
margin-top: 0;
margin-bottom: 0;
}
.highlight-wrapper:has(.codeblock-title) pre {
@apply rounded-none;
}
.codeblock-title {
@apply px-4 py-2 border-b border-neutral-200 dark:border-neutral-800;
@apply bg-white dark:bg-[#0d1117];
}
/* LineTableTD */
@@ -19,208 +35,173 @@
/* LineHighlight */
.chroma .hl {
@apply block w-auto px-4 -mx-4 bg-primary-100 dark:bg-primary-900;
@apply block w-auto px-4 -mx-4;
}
.chroma .lntd .hl {
@apply p-0 m-0;
}
/* LineNumbersTable */
/* LineNumbers */
.chroma .lnt,
.chroma .ln {
@apply text-neutral-600 dark:text-neutral-300 mr-[0.4em] px-[0.4em] py-0;
/* linenos=inline */
.chroma:not(:is(table *)) > code {
display: block;
min-width: max-content;
}
/* Keyword */
/* KeywordDeclaration */
/* KeywordNamespace */
/* KeywordPseudo */
/* KeywordReserved */
/* NameClass */
/* NameFunctionMagic */
/* NameNamespace */
/* NameVariableClass */
/* Operator */
.chroma .k,
.chroma .kd,
.chroma .kn,
.chroma .kp,
.chroma .kr,
.chroma .nc,
.chroma .fm,
.chroma .nn,
.chroma .vc,
.chroma .o {
@apply text-primary-600 dark:text-primary-300;
}
html:not(.dark) {
/* Generated using: hugo gen chromastyles --style=github */
/* KeywordConstant */
.chroma .kc {
@apply font-semibold text-secondary-400 dark:text-secondary-500;
/* Background */ .bg { background-color:#fff; }
/* PreWrapper */ .chroma { background-color:#fff; }
/* Error */ .chroma .err { color:#f6f8fa;background-color:#82071e }
/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
/* LineTable */ .chroma .lntable { border-spacing:0; }
/* LineHighlight */ .chroma .hl { background-color:#e5e5e5 }
/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
/* Line */ .chroma .line { display:flex; }
/* Keyword */ .chroma .k { color:#cf222e }
/* KeywordConstant */ .chroma .kc { color:#cf222e }
/* KeywordDeclaration */ .chroma .kd { color:#cf222e }
/* KeywordNamespace */ .chroma .kn { color:#cf222e }
/* KeywordPseudo */ .chroma .kp { color:#cf222e }
/* KeywordReserved */ .chroma .kr { color:#cf222e }
/* KeywordType */ .chroma .kt { color:#cf222e }
/* NameAttribute */ .chroma .na { color:#1f2328 }
/* NameClass */ .chroma .nc { color:#1f2328 }
/* NameConstant */ .chroma .no { color:#0550ae }
/* NameDecorator */ .chroma .nd { color:#0550ae }
/* NameEntity */ .chroma .ni { color:#6639ba }
/* NameLabel */ .chroma .nl { color:#900;font-weight:bold }
/* NameNamespace */ .chroma .nn { color:#24292e }
/* NameOther */ .chroma .nx { color:#1f2328 }
/* NameTag */ .chroma .nt { color:#0550ae }
/* NameBuiltin */ .chroma .nb { color:#6639ba }
/* NameBuiltinPseudo */ .chroma .bp { color:#6a737d }
/* NameVariable */ .chroma .nv { color:#953800 }
/* NameVariableClass */ .chroma .vc { color:#953800 }
/* NameVariableGlobal */ .chroma .vg { color:#953800 }
/* NameVariableInstance */ .chroma .vi { color:#953800 }
/* NameVariableMagic */ .chroma .vm { color:#953800 }
/* NameFunction */ .chroma .nf { color:#6639ba }
/* NameFunctionMagic */ .chroma .fm { color:#6639ba }
/* LiteralString */ .chroma .s { color:#0a3069 }
/* LiteralStringAffix */ .chroma .sa { color:#0a3069 }
/* LiteralStringBacktick */ .chroma .sb { color:#0a3069 }
/* LiteralStringChar */ .chroma .sc { color:#0a3069 }
/* LiteralStringDelimiter */ .chroma .dl { color:#0a3069 }
/* LiteralStringDoc */ .chroma .sd { color:#0a3069 }
/* LiteralStringDouble */ .chroma .s2 { color:#0a3069 }
/* LiteralStringEscape */ .chroma .se { color:#0a3069 }
/* LiteralStringHeredoc */ .chroma .sh { color:#0a3069 }
/* LiteralStringInterpol */ .chroma .si { color:#0a3069 }
/* LiteralStringOther */ .chroma .sx { color:#0a3069 }
/* LiteralStringRegex */ .chroma .sr { color:#0a3069 }
/* LiteralStringSingle */ .chroma .s1 { color:#0a3069 }
/* LiteralStringSymbol */ .chroma .ss { color:#032f62 }
/* LiteralNumber */ .chroma .m { color:#0550ae }
/* LiteralNumberBin */ .chroma .mb { color:#0550ae }
/* LiteralNumberFloat */ .chroma .mf { color:#0550ae }
/* LiteralNumberHex */ .chroma .mh { color:#0550ae }
/* LiteralNumberInteger */ .chroma .mi { color:#0550ae }
/* LiteralNumberIntegerLong */ .chroma .il { color:#0550ae }
/* LiteralNumberOct */ .chroma .mo { color:#0550ae }
/* Operator */ .chroma .o { color:#0550ae }
/* OperatorWord */ .chroma .ow { color:#0550ae }
/* Punctuation */ .chroma .p { color:#1f2328 }
/* Comment */ .chroma .c { color:#57606a }
/* CommentHashbang */ .chroma .ch { color:#57606a }
/* CommentMultiline */ .chroma .cm { color:#57606a }
/* CommentSingle */ .chroma .c1 { color:#57606a }
/* CommentSpecial */ .chroma .cs { color:#57606a }
/* CommentPreproc */ .chroma .cp { color:#57606a }
/* CommentPreprocFile */ .chroma .cpf { color:#57606a }
/* GenericDeleted */ .chroma .gd { color:#82071e;background-color:#ffebe9 }
/* GenericEmph */ .chroma .ge { color:#1f2328 }
/* GenericInserted */ .chroma .gi { color:#116329;background-color:#dafbe1 }
/* GenericOutput */ .chroma .go { color:#1f2328 }
/* GenericUnderline */ .chroma .gl { text-decoration:underline }
/* TextWhitespace */ .chroma .w { color:#fff }
}
html.dark {
/* Generated using: hugo gen chromastyles --style=github-dark */
/* KeywordType */
/* NameVariable */
/* NameVariableInstance */
/* NameVariableMagic */
/* LiteralNumber */
/* LiteralNumberBin */
/* LiteralNumberFloat */
/* LiteralNumberHex */
/* LiteralNumberInteger */
/* LiteralNumberIntegerLong */
/* LiteralNumberOct */
.chroma .kt,
.chroma .nv,
.chroma .vi,
.chroma .vm,
.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .il,
.chroma .mo {
@apply text-secondary-400 dark:text-secondary-600;
}
/* Name */
/* NameDecorator */
/* NameEntity */
/* NameLabel */
.chroma .n,
.chroma .nd,
.chroma .ni,
.chroma .nl {
@apply text-secondary-900 dark:text-secondary-200;
}
/* NameAttribute */
/* NameBuiltin */
/* NameBuiltinPseudo */
/* NameOther */
/* NameProperty */
/* NameTag */
.chroma .na,
.chroma .nb,
.chroma .bp,
.chroma .nx,
.chroma .py,
.chroma .nt {
@apply text-secondary-800 dark:text-secondary-300;
}
/* NameConstant */
/* NameException */
/* NameVariableGlobal */
.chroma .no,
.chroma .ne,
.chroma .vg {
@apply font-semibold text-secondary-400 dark:text-secondary-500;
}
/* NameFunction */
.chroma .nf {
@apply text-secondary-600 dark:text-secondary-500;
}
/* Literal */
/* LiteralDate */
/* LiteralString */
/* LiteralStringAffix */
/* LiteralStringBacktick */
/* LiteralStringChar */
/* LiteralStringDelimiter */
/* LiteralStringDoc */
/* LiteralStringDouble */
/* LiteralStringHeredoc */
/* LiteralStringInterpol */
/* LiteralStringOther */
/* LiteralStringSingle */
/* GenericInserted */
/* GenericOutput */
/* GenericPrompt */
.chroma .l,
.chroma .ld,
.chroma .s,
.chroma .sa,
.chroma .sb,
.chroma .sc,
.chroma .dl,
.chroma .sd,
.chroma .s2,
.chroma .sh,
.chroma .si,
.chroma .sx,
.chroma .s1,
.chroma .gi,
.chroma .go,
.chroma .gp {
@apply text-primary-800 dark:text-primary-400;
}
/* LiteralStringEscape */
.chroma .se {
@apply font-semibold text-secondary-400 dark:text-secondary-500;
}
/* LiteralStringRegex */
/* LiteralStringSymbol */
.chroma .sr,
.chroma .ss {
@apply font-semibold text-primary-800 dark:text-primary-400;
}
/* OperatorWord */
.chroma .ow {
@apply font-semibold text-primary-400 dark:text-primary-600;
}
/* Comment */
/* CommentMultiline */
/* CommentSingle */
/* CommentSpecial */
/* CommentPreproc */
/* CommentPreprocFile */
.chroma .c,
.chroma .cm,
.chroma .c1,
.chroma .cs,
.chroma .cp,
.chroma .cpf {
@apply italic text-neutral-500 dark:text-neutral-400;
}
/* CommentHashbang */
.chroma .ch {
@apply italic font-semibold text-neutral-500 dark:text-neutral-400;
}
/* GenericEmph */
.chroma .ge {
@apply italic;
}
/* GenericHeading */
.chroma .gh {
@apply font-semibold text-neutral-500;
}
/* GenericStrong */
.chroma .gs {
@apply font-semibold;
}
/* GenericSubheading */
/* GenericTraceback */
.chroma .gu,
.chroma .gt {
@apply text-neutral-500;
}
/* GenericUnderline */
.chroma .gl {
@apply underline;
/* Background */ .bg { color:#e6edf3;background-color:#0d1117; }
/* PreWrapper */ .chroma { color:#e6edf3;background-color:#0d1117; }
/* Error */ .chroma .err { color:#f85149 }
/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
/* LineTable */ .chroma .lntable { border-spacing:0; }
/* LineHighlight */ .chroma .hl { background-color:#333 }
/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#737679 }
/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681 }
/* Line */ .chroma .line { display:flex; }
/* Keyword */ .chroma .k { color:#ff7b72 }
/* KeywordConstant */ .chroma .kc { color:#79c0ff }
/* KeywordDeclaration */ .chroma .kd { color:#ff7b72 }
/* KeywordNamespace */ .chroma .kn { color:#ff7b72 }
/* KeywordPseudo */ .chroma .kp { color:#79c0ff }
/* KeywordReserved */ .chroma .kr { color:#ff7b72 }
/* KeywordType */ .chroma .kt { color:#ff7b72 }
/* NameClass */ .chroma .nc { color:#f0883e;font-weight:bold }
/* NameConstant */ .chroma .no { color:#79c0ff;font-weight:bold }
/* NameDecorator */ .chroma .nd { color:#d2a8ff;font-weight:bold }
/* NameEntity */ .chroma .ni { color:#ffa657 }
/* NameException */ .chroma .ne { color:#f0883e;font-weight:bold }
/* NameLabel */ .chroma .nl { color:#79c0ff;font-weight:bold }
/* NameNamespace */ .chroma .nn { color:#ff7b72 }
/* NameProperty */ .chroma .py { color:#79c0ff }
/* NameTag */ .chroma .nt { color:#7ee787 }
/* NameVariable */ .chroma .nv { color:#79c0ff }
/* NameVariableClass */ .chroma .vc { color:#79c0ff }
/* NameVariableGlobal */ .chroma .vg { color:#79c0ff }
/* NameVariableInstance */ .chroma .vi { color:#79c0ff }
/* NameVariableMagic */ .chroma .vm { color:#79c0ff }
/* NameFunction */ .chroma .nf { color:#d2a8ff;font-weight:bold }
/* NameFunctionMagic */ .chroma .fm { color:#d2a8ff;font-weight:bold }
/* Literal */ .chroma .l { color:#a5d6ff }
/* LiteralDate */ .chroma .ld { color:#79c0ff }
/* LiteralString */ .chroma .s { color:#a5d6ff }
/* LiteralStringAffix */ .chroma .sa { color:#79c0ff }
/* LiteralStringBacktick */ .chroma .sb { color:#a5d6ff }
/* LiteralStringChar */ .chroma .sc { color:#a5d6ff }
/* LiteralStringDelimiter */ .chroma .dl { color:#79c0ff }
/* LiteralStringDoc */ .chroma .sd { color:#a5d6ff }
/* LiteralStringDouble */ .chroma .s2 { color:#a5d6ff }
/* LiteralStringEscape */ .chroma .se { color:#79c0ff }
/* LiteralStringHeredoc */ .chroma .sh { color:#79c0ff }
/* LiteralStringInterpol */ .chroma .si { color:#a5d6ff }
/* LiteralStringOther */ .chroma .sx { color:#a5d6ff }
/* LiteralStringRegex */ .chroma .sr { color:#79c0ff }
/* LiteralStringSingle */ .chroma .s1 { color:#a5d6ff }
/* LiteralStringSymbol */ .chroma .ss { color:#a5d6ff }
/* LiteralNumber */ .chroma .m { color:#a5d6ff }
/* LiteralNumberBin */ .chroma .mb { color:#a5d6ff }
/* LiteralNumberFloat */ .chroma .mf { color:#a5d6ff }
/* LiteralNumberHex */ .chroma .mh { color:#a5d6ff }
/* LiteralNumberInteger */ .chroma .mi { color:#a5d6ff }
/* LiteralNumberIntegerLong */ .chroma .il { color:#a5d6ff }
/* LiteralNumberOct */ .chroma .mo { color:#a5d6ff }
/* Operator */ .chroma .o { color:#ff7b72;font-weight:bold }
/* OperatorWord */ .chroma .ow { color:#ff7b72;font-weight:bold }
/* Comment */ .chroma .c { color:#8b949e;font-style:italic }
/* CommentHashbang */ .chroma .ch { color:#8b949e;font-style:italic }
/* CommentMultiline */ .chroma .cm { color:#8b949e;font-style:italic }
/* CommentSingle */ .chroma .c1 { color:#8b949e;font-style:italic }
/* CommentSpecial */ .chroma .cs { color:#8b949e;font-weight:bold;font-style:italic }
/* CommentPreproc */ .chroma .cp { color:#8b949e;font-weight:bold;font-style:italic }
/* CommentPreprocFile */ .chroma .cpf { color:#8b949e;font-weight:bold;font-style:italic }
/* GenericDeleted */ .chroma .gd { color:#ffa198;background-color:#490202 }
/* GenericEmph */ .chroma .ge { font-style:italic }
/* GenericError */ .chroma .gr { color:#ffa198 }
/* GenericHeading */ .chroma .gh { color:#79c0ff;font-weight:bold }
/* GenericInserted */ .chroma .gi { color:#56d364;background-color:#0f5323 }
/* GenericOutput */ .chroma .go { color:#8b949e }
/* GenericPrompt */ .chroma .gp { color:#8b949e }
/* GenericStrong */ .chroma .gs { font-weight:bold }
/* GenericSubheading */ .chroma .gu { color:#79c0ff }
/* GenericTraceback */ .chroma .gt { color:#ff7b72 }
/* GenericUnderline */ .chroma .gl { text-decoration:underline }
/* TextWhitespace */ .chroma .w { color:#6e7681 }
}

View File

@@ -0,0 +1,9 @@
.tab__button.tab--active {
border-bottom: 2px solid rgb(var(--color-primary-500));
}
.tab__panel {
display: none;
}
.tab__panel.tab--active {
display: block;
}

View File

@@ -4,10 +4,15 @@
@import "tailwindcss";
@import "./components/chroma.css" layer(utilities);
@import "./components/tabs.css" layer(utilities);
@import "./components/zen-mode.css";
@import "./components/a11y.css";
@import "./components/admonition.css" layer(components);
html.dark {
color-scheme: dark;
}
body a,
body button {
@apply transition-colors;
@@ -83,7 +88,7 @@ button,
}
.toc a {
@apply font-normal text-neutral-700 dark:text-neutral-400;
@apply font-normal text-neutral-700 dark:text-neutral-300;
}
.toc ul > li {
@@ -91,15 +96,11 @@ button,
}
/* Code Copy */
.highlight-wrapper {
@apply block;
}
.highlight {
@apply relative z-0;
}
.highlight:hover > .copy-button {
.highlight-wrapper:hover > .copy-button {
@apply visible;
}
@@ -199,6 +200,18 @@ pre {
box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
}
/* placeholder for gallery/carousel */
@variant max-md {
.width-patch {
width: 90vw;
}
}
@variant min-md {
.width-patch {
width: 65ch;
}
}
.anchor {
display: block;
position: relative;