style: 优化 CSS 代码格式，增强可读性和一致性
This commit is contained in:
@@ -1,141 +1,166 @@
|
|||||||
@tailwind components;
|
@tailwind components;
|
||||||
|
|
||||||
@layer components {
|
@layer components {
|
||||||
.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,
|
||||||
@apply transition;
|
h2,
|
||||||
}
|
h3,
|
||||||
.card-shadow {
|
h4,
|
||||||
@apply drop-shadow-[0_2px_4px_rgba(0,0,0,0.005)]
|
h5,
|
||||||
}
|
h6,
|
||||||
.expand-animation {
|
p,
|
||||||
@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
|
a,
|
||||||
before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10
|
span,
|
||||||
}
|
li,
|
||||||
.link {
|
ul,
|
||||||
@apply transition rounded-md p-1 -m-1 expand-animation;
|
ol,
|
||||||
}
|
blockquote,
|
||||||
.link-lg {
|
code,
|
||||||
@apply transition rounded-md p-1.5 -m-1.5 expand-animation;
|
pre,
|
||||||
}
|
table,
|
||||||
.float-panel {
|
th,
|
||||||
@apply top-[5.25rem] rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition shadow-xl dark:shadow-none
|
td,
|
||||||
}
|
strong {
|
||||||
.float-panel-closed {
|
@apply transition;
|
||||||
@apply -translate-y-1 opacity-0 pointer-events-none
|
}
|
||||||
}
|
.card-shadow {
|
||||||
.search-panel mark {
|
@apply drop-shadow-[0_2px_4px_rgba(0,0,0,0.005)];
|
||||||
@apply bg-transparent text-[var(--primary)]
|
}
|
||||||
}
|
.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
|
||||||
|
before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10;
|
||||||
|
}
|
||||||
|
.link {
|
||||||
|
@apply transition rounded-md p-1 -m-1 expand-animation;
|
||||||
|
}
|
||||||
|
.link-lg {
|
||||||
|
@apply transition rounded-md p-1.5 -m-1.5 expand-animation;
|
||||||
|
}
|
||||||
|
.float-panel {
|
||||||
|
@apply top-[5.25rem] rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition shadow-xl dark:shadow-none;
|
||||||
|
}
|
||||||
|
.float-panel-closed {
|
||||||
|
@apply -translate-y-1 opacity-0 pointer-events-none;
|
||||||
|
}
|
||||||
|
.search-panel mark {
|
||||||
|
@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 {
|
|
||||||
@apply expand-animation;
|
|
||||||
&.current-theme-btn {
|
|
||||||
@apply before:scale-100 before:opacity-100 before:bg-[var(--btn-plain-bg-hover)] text-[var(--primary)]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.btn-regular {
|
&.scale-animation {
|
||||||
@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 expand-animation;
|
||||||
text-[var(--btn-content)] dark:text-white/75
|
&.current-theme-btn {
|
||||||
|
@apply before:scale-100 before:opacity-100 before:bg-[var(--btn-plain-bg-hover)] text-[var(--primary)];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
.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)]
|
||||||
|
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 {
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
}
|
}
|
||||||
.hide-scrollbar::-webkit-scrollbar {
|
.hide-scrollbar::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dash-line::before {
|
.dash-line::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 10%;
|
width: 10%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: calc(50% - 1px);
|
left: calc(50% - 1px);
|
||||||
border-left: 2px dashed var(--line-color);
|
border-left: 2px dashed var(--line-color);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsed {
|
.collapsed {
|
||||||
height: var(--collapsedHeight);
|
height: var(--collapsedHeight);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,120 +1,127 @@
|
|||||||
.custom-md {
|
.custom-md {
|
||||||
h1 {
|
h1 {
|
||||||
@apply text-3xl;
|
@apply text-3xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
.anchor {
|
||||||
|
@apply transition -m-0.5 ml-[0.2ch] p-0.5 select-none opacity-0 no-underline !important;
|
||||||
|
|
||||||
|
.anchor-icon {
|
||||||
|
@apply mx-[0.45ch] !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
&:hover {
|
||||||
.anchor {
|
.anchor {
|
||||||
@apply transition -m-0.5 ml-[0.2ch] p-0.5 select-none opacity-0 no-underline !important;
|
@apply opacity-100 !important;
|
||||||
|
}
|
||||||
.anchor-icon {
|
|
||||||
@apply mx-[0.45ch] !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.anchor {
|
|
||||||
@apply opacity-100 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
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,
|
||||||
@apply decoration-transparent;
|
&:active {
|
||||||
background: var(--btn-plain-bg-hover);
|
@apply decoration-transparent;
|
||||||
border-bottom: 1px dashed var(--link-hover);
|
background: var(--btn-plain-bg-hover);
|
||||||
text-decoration: none;
|
border-bottom: 1px dashed var(--link-hover);
|
||||||
}
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
@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;
|
||||||
|
&:before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
content: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
counter-reset: line;
|
||||||
@apply bg-[var(--inline-code-bg)] text-[var(--inline-code-color)] px-1 py-0.5 rounded-md overflow-hidden;
|
span.line {
|
||||||
|
&:before {
|
||||||
|
@apply text-white/25 mr-4 w-4 inline-block;
|
||||||
|
content: counter(line);
|
||||||
|
counter-increment: line;
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
&:last-child:empty,
|
||||||
|
&:last-child:has(> span:empty:only-child) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
font-family: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
|
.copy-btn {
|
||||||
&:before {
|
all: initial;
|
||||||
content:none;
|
@apply btn-regular-dark opacity-0 shadow-lg shadow-black/50 absolute active:scale-90 h-8 w-8 top-3 right-3 text-sm rounded-lg transition-all ease-in-out z-20 cursor-pointer;
|
||||||
}
|
}
|
||||||
&:after {
|
.frame:hover .copy-btn {
|
||||||
content:none;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
counter-reset: line;
|
.copy-btn-icon {
|
||||||
span.line {
|
@apply absolute top-1/2 left-1/2 transition -translate-x-1/2 -translate-y-1/2 w-4 h-4 fill-white pointer-events-none;
|
||||||
&:before {
|
}
|
||||||
@apply text-white/25 mr-4 w-4 inline-block;
|
.copy-btn .copy-icon {
|
||||||
content: counter(line);
|
@apply opacity-100 fill-white dark:fill-white/75;
|
||||||
counter-increment: line;
|
}
|
||||||
direction: rtl;
|
.copy-btn.success .copy-icon {
|
||||||
}
|
@apply opacity-0 fill-[var(--deep-text)];
|
||||||
&:last-child:empty, &:last-child:has(> span:empty:only-child) {
|
}
|
||||||
display: none;
|
.copy-btn .success-icon {
|
||||||
}
|
@apply opacity-0 fill-white;
|
||||||
}
|
}
|
||||||
|
.copy-btn.success .success-icon {
|
||||||
|
@apply opacity-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expressive-code {
|
||||||
|
@apply my-4;
|
||||||
|
::selection {
|
||||||
|
@apply bg-[var(--codeblock-selection)];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
li::marker {
|
||||||
|
@apply text-[var(--primary)];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
@apply not-italic border-transparent relative;
|
||||||
|
font-weight: inherit;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
@apply content-[''] absolute -left-1 block transition bg-[var(--btn-regular-bg)] h-full w-1 rounded-full;
|
||||||
}
|
}
|
||||||
|
|
||||||
.copy-btn {
|
/* Remove the double quotes from default styles */
|
||||||
all: initial;
|
p:before,
|
||||||
@apply btn-regular-dark opacity-0 shadow-lg shadow-black/50 absolute active:scale-90 h-8 w-8 top-3 right-3 text-sm rounded-lg transition-all ease-in-out z-20 cursor-pointer;
|
p:after {
|
||||||
}
|
@apply content-none;
|
||||||
.frame:hover .copy-btn {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.copy-btn-icon {
|
.katex-display-container {
|
||||||
@apply absolute top-1/2 left-1/2 transition -translate-x-1/2 -translate-y-1/2 w-4 h-4 fill-white pointer-events-none;
|
max-width: 100%;
|
||||||
}
|
overflow-x: auto;
|
||||||
.copy-btn .copy-icon {
|
margin: 1em 0;
|
||||||
@apply opacity-100 fill-white dark:fill-white/75;
|
}
|
||||||
}
|
|
||||||
.copy-btn.success .copy-icon {
|
|
||||||
@apply opacity-0 fill-[var(--deep-text)]
|
|
||||||
}
|
|
||||||
.copy-btn .success-icon {
|
|
||||||
@apply opacity-0 fill-white;
|
|
||||||
}
|
|
||||||
.copy-btn.success .success-icon {
|
|
||||||
@apply opacity-100
|
|
||||||
}
|
|
||||||
|
|
||||||
.expressive-code {
|
|
||||||
@apply my-4;
|
|
||||||
::selection {
|
|
||||||
@apply bg-[var(--codeblock-selection)];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
ul, ol {
|
|
||||||
li::marker {
|
|
||||||
@apply text-[var(--primary)];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
@apply not-italic border-transparent relative;
|
|
||||||
font-weight: inherit;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
@apply content-[''] absolute -left-1 block transition bg-[var(--btn-regular-bg)] h-full w-1 rounded-full;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Remove the double quotes from default styles */
|
|
||||||
p:before, p:after {
|
|
||||||
@apply content-none;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.katex-display-container {
|
|
||||||
max-width: 100%;
|
|
||||||
overflow-x: auto;
|
|
||||||
margin: 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user