meowrain/fuwari-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 优化 CSS 代码格式，增强可读性和一致性

Browse Source
This commit is contained in:
meowrain
2025-07-19 15:17:25 +08:00
parent 31741bba41
commit 995dbfcce6
2 changed files with 248 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/styles/main.css
View File

@@ -4,15 +4,33 @@
.card-base { .card-base {
@apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition; @apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition;
} }
h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong { h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
li,
ul,
ol,
blockquote,
code,
pre,
table,
th,
td,
strong {
@apply transition; @apply transition;
} }
.card-shadow { .card-shadow {
@apply drop-shadow-[0_2px_4px_rgba(0,0,0,0.005)] @apply drop-shadow-[0_2px_4px_rgba(0,0,0,0.005)];
} }
.expand-animation { .expand-animation {
@apply relative before:ease-out before:transition active:bg-none hover:before:bg-[var(--btn-plain-bg-hover)] active:before:bg-[var(--btn-plain-bg-active)] z-0 @apply relative before:ease-out before:transition active:bg-none hover:before:bg-[var(--btn-plain-bg-hover)] active:before:bg-[var(--btn-plain-bg-active)] z-0
before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10 before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10;
} }
.link { .link {
@apply transition rounded-md p-1 -m-1 expand-animation; @apply transition rounded-md p-1 -m-1 expand-animation;
@@ -21,52 +39,58 @@
@apply transition rounded-md p-1.5 -m-1.5 expand-animation; @apply transition rounded-md p-1.5 -m-1.5 expand-animation;
} }
.float-panel { .float-panel {
@apply top-[5.25rem] rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition shadow-xl dark:shadow-none @apply top-[5.25rem] rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition shadow-xl dark:shadow-none;
} }
.float-panel-closed { .float-panel-closed {
@apply -translate-y-1 opacity-0 pointer-events-none @apply -translate-y-1 opacity-0 pointer-events-none;
} }
.search-panel mark { .search-panel mark {
@apply bg-transparent text-[var(--primary)] @apply bg-transparent text-[var(--primary)];
} }
.btn-card { .btn-card {
@apply transition flex items-center justify-center bg-[var(--card-bg)] hover:bg-[var(--btn-card-bg-hover)] @apply transition flex items-center justify-center bg-[var(--card-bg)] hover:bg-[var(--btn-card-bg-hover)]
active:bg-[var(--btn-card-bg-active)] active:bg-[var(--btn-card-bg-active)];
} }
.btn-card.disabled { .btn-card.disabled {
@apply pointer-events-none text-black/10 dark:text-white/10 @apply pointer-events-none text-black/10 dark:text-white/10;
} }
.btn-plain { .btn-plain {
@apply transition relative flex items-center justify-center bg-none @apply transition relative flex items-center justify-center bg-none
text-black/75 hover:text-[var(--primary)] dark:text-white/75 dark:hover:text-[var(--primary)]; text-black/75 hover:text-[var(--primary)] dark:text-white/75 dark:hover:text-[var(--primary)];
&:not(.scale-animation) { &:not(.scale-animation) {
@apply hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] @apply hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)];
} }
&.scale-animation { &.scale-animation {
@apply expand-animation; @apply expand-animation;
&.current-theme-btn { &.current-theme-btn {
@apply before:scale-100 before:opacity-100 before:bg-[var(--btn-plain-bg-hover)] text-[var(--primary)] @apply before:scale-100 before:opacity-100 before:bg-[var(--btn-plain-bg-hover)] text-[var(--primary)];
} }
} }
} }
.btn-regular { .btn-regular {
@apply transition flex items-center justify-center bg-[var(--btn-regular-bg)] hover:bg-[var(--btn-regular-bg-hover)] active:bg-[var(--btn-regular-bg-active)] @apply transition flex items-center justify-center bg-[var(--btn-regular-bg)] hover:bg-[var(--btn-regular-bg-hover)] active:bg-[var(--btn-regular-bg-active)]
text-[var(--btn-content)] dark:text-white/75 text-[var(--btn-content)] dark:text-white/75;
} }
.link-underline { .link-underline {
@apply transition underline decoration-2 decoration-dashed decoration-[var(--link-underline)] @apply transition underline decoration-2 decoration-dashed decoration-[var(--link-underline)]
hover:decoration-[var(--link-hover)] active:decoration-[var(--link-active)] underline-offset-[0.25rem] hover:decoration-[var(--link-hover)] active:decoration-[var(--link-active)] underline-offset-[0.25rem];
} }
.toc-hide, .toc-hide,
.toc-not-ready { .toc-not-ready {
@apply opacity-0 pointer-events-none @apply opacity-0 pointer-events-none;
} }
#toc-inner-wrapper { #toc-inner-wrapper {
mask-image: linear-gradient(to bottom, transparent 0%, black 2rem, black calc(100% - 2rem), transparent 100%); mask-image: linear-gradient(
to bottom,
transparent 0%,
black 2rem,
black calc(100% - 2rem),
transparent 100%
);
} }
.hide-scrollbar { .hide-scrollbar {
@@ -78,46 +102,47 @@
} }
.text-90 { .text-90 {
@apply text-black/90 dark:text-white/90 @apply text-black/90 dark:text-white/90;
} }
.text-75 { .text-75 {
@apply text-black/75 dark:text-white/75 @apply text-black/75 dark:text-white/75;
} }
.text-50 { .text-50 {
@apply text-black/50 dark:text-white/50 @apply text-black/50 dark:text-white/50;
} }
.text-30 { .text-30 {
@apply text-black/30 dark:text-white/30 @apply text-black/30 dark:text-white/30;
} }
.text-25 { .text-25 {
@apply text-black/25 dark:text-white/25 @apply text-black/25 dark:text-white/25;
} }
.meta-icon { .meta-icon {
@apply w-8 h-8 transition rounded-md flex items-center justify-center bg-[var(--btn-regular-bg)] @apply w-8 h-8 transition rounded-md flex items-center justify-center bg-[var(--btn-regular-bg)]
text-[var(--btn-content)] mr-2 text-[var(--btn-content)] mr-2;
} }
.with-divider { .with-divider {
@apply before:content-['/'] before:ml-1.5 before:mr-1.5 before:text-[var(--meta-divider)] before:text-sm @apply before:content-['/'] before:ml-1.5 before:mr-1.5 before:text-[var(--meta-divider)] before:text-sm
before:font-medium before:first-of-type:hidden before:transition before:font-medium before:first-of-type:hidden before:transition;
} }
.btn-regular-dark { .btn-regular-dark {
@apply flex items-center justify-center @apply flex items-center justify-center
bg-[oklch(0.45_0.01_var(--hue))] hover:bg-[oklch(0.50_0.01_var(--hue))] active:bg-[oklch(0.55_0.01_var(--hue))] bg-[oklch(0.45_0.01_var(--hue))] hover:bg-[oklch(0.50_0.01_var(--hue))] active:bg-[oklch(0.55_0.01_var(--hue))]
dark:bg-[oklch(0.30_0.02_var(--hue))] dark:hover:bg-[oklch(0.35_0.03_var(--hue))] dark:active:bg-[oklch(0.40_0.03_var(--hue))] dark:bg-[oklch(0.30_0.02_var(--hue))] dark:hover:bg-[oklch(0.35_0.03_var(--hue))] dark:active:bg-[oklch(0.40_0.03_var(--hue))];
} }
.btn-regular-dark.success { .btn-regular-dark.success {
@apply bg-[oklch(0.75_0.14_var(--hue))] dark:bg-[oklch(0.75_0.14_var(--hue))] @apply bg-[oklch(0.75_0.14_var(--hue))] dark:bg-[oklch(0.75_0.14_var(--hue))];
} }
} }
.custom-md img, #post-cover img { .custom-md img,
@apply cursor-zoom-in #post-cover img {
@apply cursor-zoom-in;
} }
::selection { ::selection {
background-color: var(--selection-bg) background-color: var(--selection-bg);
} }
.dash-line { .dash-line {

35
src/styles/markdown.css
View File

@@ -3,7 +3,12 @@
@apply text-3xl; @apply text-3xl;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
.anchor { .anchor {
@apply transition -m-0.5 ml-[0.2ch] p-0.5 select-none opacity-0 no-underline !important; @apply transition -m-0.5 ml-[0.2ch] p-0.5 select-none opacity-0 no-underline !important;
@@ -20,12 +25,13 @@
} }
a:not(.no-styling) { a:not(.no-styling) {
@apply relative bg-none link font-medium text-[var(--primary)] @apply relative bg-none font-medium text-[var(--primary)] transition rounded-md p-1 -m-1
underline decoration-[var(--link-underline)] decoration-1 decoration-dashed underline-offset-4; underline decoration-[var(--link-underline)] decoration-1 decoration-dashed underline-offset-4;
box-decoration-break: clone; box-decoration-break: clone;
-webkit-box-decoration-break: clone; -webkit-box-decoration-break: clone;
&:hover, &:active { &:hover,
&:active {
@apply decoration-transparent; @apply decoration-transparent;
background: var(--btn-plain-bg-hover); background: var(--btn-plain-bg-hover);
border-bottom: 1px dashed var(--link-hover); border-bottom: 1px dashed var(--link-hover);
@@ -36,12 +42,13 @@
code { code {
@apply bg-[var(--inline-code-bg)] text-[var(--inline-code-color)] px-1 py-0.5 rounded-md overflow-hidden; @apply bg-[var(--inline-code-bg)] text-[var(--inline-code-color)] px-1 py-0.5 rounded-md overflow-hidden;
font-family: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; font-family: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo,
Monaco, Consolas, Liberation Mono, Courier New, monospace;
&:before { &:before {
content:none; content: none;
} }
&:after { &:after {
content:none; content: none;
} }
counter-reset: line; counter-reset: line;
@@ -52,7 +59,8 @@
counter-increment: line; counter-increment: line;
direction: rtl; direction: rtl;
} }
&:last-child:empty, &:last-child:has(> span:empty:only-child) { &:last-child:empty,
&:last-child:has(> span:empty:only-child) {
display: none; display: none;
} }
} }
@@ -73,13 +81,13 @@
@apply opacity-100 fill-white dark:fill-white/75; @apply opacity-100 fill-white dark:fill-white/75;
} }
.copy-btn.success .copy-icon { .copy-btn.success .copy-icon {
@apply opacity-0 fill-[var(--deep-text)] @apply opacity-0 fill-[var(--deep-text)];
} }
.copy-btn .success-icon { .copy-btn .success-icon {
@apply opacity-0 fill-white; @apply opacity-0 fill-white;
} }
.copy-btn.success .success-icon { .copy-btn.success .success-icon {
@apply opacity-100 @apply opacity-100;
} }
.expressive-code { .expressive-code {
@@ -89,8 +97,8 @@
} }
} }
ul,
ul, ol { ol {
li::marker { li::marker {
@apply text-[var(--primary)]; @apply text-[var(--primary)];
} }
@@ -105,10 +113,10 @@
} }
/* Remove the double quotes from default styles */ /* Remove the double quotes from default styles */
p:before, p:after { p:before,
p:after {
@apply content-none; @apply content-none;
} }
} }
.katex-display-container { .katex-display-container {
@@ -116,5 +124,4 @@
overflow-x: auto; overflow-x: auto;
margin: 1em 0; margin: 1em 0;
} }
} }