页面样式
This commit is contained in:
@@ -401,11 +401,8 @@
|
||||
position: sticky;
|
||||
top: 90px;
|
||||
display: grid;
|
||||
max-height: calc(100vh - 110px);
|
||||
align-content: start;
|
||||
gap: 20px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.article-author-card {
|
||||
|
||||
@@ -137,68 +137,47 @@
|
||||
position: relative;
|
||||
margin: 0 0 30px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(133, 162, 153, 0.34);
|
||||
border-radius: 8px;
|
||||
padding: 34px 20px 16px;
|
||||
border: 1px solid rgba(15, 118, 110, 0.16);
|
||||
border-radius: 14px;
|
||||
padding: 20px 22px 22px;
|
||||
background:
|
||||
radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.8), transparent 32%),
|
||||
linear-gradient(135deg, rgba(250, 252, 247, 0.88), rgba(228, 240, 234, 0.78)),
|
||||
rgba(245, 250, 246, 0.78);
|
||||
radial-gradient(circle at 100% 0%, rgba(62, 184, 190, 0.12), transparent 40%),
|
||||
linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(239, 248, 245, 0.82));
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9),
|
||||
0 14px 34px rgba(58, 51, 38, 0.1);
|
||||
backdrop-filter: blur(18px) saturate(145%);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(145%);
|
||||
0 10px 28px rgba(35, 71, 66, 0.08);
|
||||
}
|
||||
|
||||
.article-summary-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 25px;
|
||||
border-bottom: 1px solid rgba(133, 162, 153, 0.18);
|
||||
background: rgba(255, 255, 255, 0.28);
|
||||
width: 3px;
|
||||
background: linear-gradient(180deg, var(--accent), rgba(62, 184, 190, 0.26));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.article-summary-dots {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 16px;
|
||||
.article-summary-header {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.article-summary-dots span {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.article-summary-dots span:nth-child(1) {
|
||||
background: #ff6b63;
|
||||
}
|
||||
|
||||
.article-summary-dots span:nth-child(2) {
|
||||
background: #ffc247;
|
||||
}
|
||||
|
||||
.article-summary-dots span:nth-child(3) {
|
||||
background: #4ecb71;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
.article-summary-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
color: #59615f;
|
||||
color: #465552;
|
||||
font-family: "LXGW WenKai", "霞鹜文楷", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.9;
|
||||
line-height: 1.8;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.article-summary-caret {
|
||||
@@ -211,33 +190,36 @@
|
||||
animation: summary-caret-blink 0.9s steps(1) infinite;
|
||||
}
|
||||
|
||||
.article-summary-footer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-top: 24px;
|
||||
color: rgba(85, 95, 94, 0.56);
|
||||
font-family: "JetBrains Mono", Consolas, "Microsoft YaHei", monospace;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.article-summary-brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #376d67;
|
||||
font-family: "JetBrains Mono", Consolas, "Microsoft YaHei", monospace;
|
||||
font-size: 0.86rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.article-summary-brand span {
|
||||
color: rgba(15, 118, 110, 0.56);
|
||||
font-size: 1.05rem;
|
||||
.article-summary-icon {
|
||||
display: inline-flex;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #2f9f96, #5dbcc0);
|
||||
box-shadow: 0 5px 12px rgba(47, 159, 150, 0.2);
|
||||
}
|
||||
|
||||
.article-summary-model {
|
||||
border: 1px solid rgba(15, 118, 110, 0.14);
|
||||
border-radius: 999px;
|
||||
padding: 4px 9px;
|
||||
color: rgba(55, 109, 103, 0.72);
|
||||
font: 700 0.7rem/1.2 "JetBrains Mono", Consolas, monospace;
|
||||
letter-spacing: 0.06em;
|
||||
background: rgba(255, 255, 255, 0.56);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -630,9 +612,9 @@
|
||||
margin: 1.25em 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(15, 118, 110, 0.16);
|
||||
border-radius: 8px;
|
||||
background: rgba(22, 31, 36, 0.96);
|
||||
box-shadow: 0 14px 32px rgba(44, 55, 63, 0.12);
|
||||
border-radius: 12px;
|
||||
background: #172126;
|
||||
box-shadow: 0 10px 28px rgba(25, 38, 44, 0.16);
|
||||
}
|
||||
|
||||
.prose .code-block pre::-webkit-scrollbar,
|
||||
@@ -663,9 +645,10 @@
|
||||
}
|
||||
|
||||
.prose .code-block pre {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
max-height: none;
|
||||
padding: 44px 18px 18px;
|
||||
padding: 16px 18px 18px;
|
||||
background: transparent;
|
||||
white-space: normal !important;
|
||||
word-wrap: normal !important;
|
||||
@@ -745,19 +728,16 @@
|
||||
}
|
||||
|
||||
.code-block-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
min-height: 42px;
|
||||
min-height: 44px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
padding: 8px 10px 8px 16px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
|
||||
padding: 7px 9px 7px 15px;
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -809,8 +789,8 @@
|
||||
justify-content: center;
|
||||
min-height: 30px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 8px;
|
||||
padding: 5px 9px;
|
||||
border-radius: 7px;
|
||||
padding: 6px 10px;
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
font: 700 0.78rem/1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
|
||||
@@ -152,6 +152,20 @@
|
||||
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .article-summary-content {
|
||||
color: rgba(229, 239, 241, 0.86);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .article-summary-brand {
|
||||
color: rgba(166, 226, 217, 0.9);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .article-summary-model {
|
||||
border-color: rgba(139, 224, 213, 0.2);
|
||||
color: rgba(181, 229, 222, 0.72);
|
||||
background: rgba(139, 224, 213, 0.08);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .prose :not(pre) > code {
|
||||
border-color: rgba(139, 224, 213, 0.3);
|
||||
color: var(--accent);
|
||||
|
||||
@@ -390,13 +390,8 @@
|
||||
}
|
||||
|
||||
.article-summary-card {
|
||||
padding: 34px 16px 16px;
|
||||
}
|
||||
|
||||
.article-summary-footer {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
border-radius: 12px;
|
||||
padding: 17px 16px 18px;
|
||||
}
|
||||
|
||||
.prose .code-block,
|
||||
@@ -406,8 +401,24 @@
|
||||
}
|
||||
|
||||
.prose .code-block pre {
|
||||
padding-right: 16px;
|
||||
padding-left: 16px;
|
||||
padding: 14px 13px 16px;
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
.code-block-header {
|
||||
min-height: 42px;
|
||||
padding: 6px 7px 6px 12px;
|
||||
}
|
||||
|
||||
.code-block-toolbar {
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.code-block-copy,
|
||||
.code-block-toggle {
|
||||
min-height: 29px;
|
||||
padding: 5px 8px;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.prose table {
|
||||
|
||||
Reference in New Issue
Block a user