style(css): 优化about页面文本样式和主题适配
- 为夜间模式下的.card-label添加渐变文字效果 - 调整.bio-text的显示逻辑，移除折叠状态样式 - 为不同语言环境下的.bio-text设置特定排版样式 - 为夜间模式下的.bio-text添加动态渐变发光动画 - 为日间和夜间模式下的.mbti-desc添加对应渐变样式 - 移除已废弃的.bio-text.collapsed相关样式 - 移除冗余的MBTI相关样式定义 - 调整技术标签滚动遮罩的渐变范围
This commit is contained in:
hehh
138
css/about.css
138
css/about.css
@@ -514,21 +514,25 @@ body {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
[data-theme="night"] .card-label {
|
||||
background: linear-gradient(90deg, #4facfe 0%, #6c5ce7 50%, #4facfe 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.bio-text {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 7;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
font-size: 1rem;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 20px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.bio-text.collapsed {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 7;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-lang="en"] .bio-text.collapsed {
|
||||
[data-lang="en"] .bio-text {
|
||||
/* 英文渲染友好的格式，字间距行间距 样式*/
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
@@ -537,6 +541,32 @@ body {
|
||||
}
|
||||
|
||||
|
||||
[data-theme="night"] .bio-text {
|
||||
/* 时间窗口的波浪形渐变发光文字 */
|
||||
background: linear-gradient(90deg, #4facfe 0%, #6c5ce7 50%, #4facfe 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
text-shadow:
|
||||
0 0 10px rgba(108, 92, 231, 0.7),
|
||||
0 0 20px rgba(79, 172, 254, 0.5),
|
||||
0 0 30px rgba(108, 92, 231, 0.3);
|
||||
background-size: 200% auto;
|
||||
animation: waveGlow 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes waveGlow {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.link-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
@@ -626,6 +656,20 @@ body {
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
[data-theme="day"] .mbti-desc {
|
||||
background: linear-gradient(90deg, #6c5ce7 0%, #3b82f6 50%, #0ea5e9 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
[data-theme="night"] .mbti-desc {
|
||||
background: linear-gradient(90deg, #a162e8 0%, #8b5cf6 50%, #6c5ce7 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.mbti-tags {
|
||||
display: grid;
|
||||
gap: 1px;
|
||||
@@ -1699,25 +1743,13 @@ body {
|
||||
|
||||
.card-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: var(--text-tertiary);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.bio-text {
|
||||
font-size: 1rem;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 20px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.bio-text.collapsed {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
background: none;
|
||||
@@ -1765,65 +1797,6 @@ body {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* --- MBTI --- */
|
||||
.area-mbti {
|
||||
padding: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mbti-inner {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mbti-head {
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mbti-code {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 900;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.mbti-name {
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.mbti-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.mbti-desc {
|
||||
margin-left: 15px;
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.3;
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
.mbti-tags {
|
||||
display: grid;
|
||||
gap: 1px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 0.75rem;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* --- Mobile Social --- */
|
||||
.mobile-social {
|
||||
@@ -2716,11 +2689,10 @@ body {
|
||||
-webkit-mask-image: linear-gradient(
|
||||
to right,
|
||||
transparent 0%,
|
||||
black 10%,
|
||||
black 90%,
|
||||
black 20%,
|
||||
black 80%,
|
||||
transparent 100%
|
||||
);
|
||||
/* 行内滚动动画由 .tech-row 控制 */
|
||||
}
|
||||
.tech-row {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user