Template:WelcomeHeader/styles.css:修订间差异
模板页面
更多操作
| 第1行: | 第1行: | ||
.main-banner { | .main-banner { | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
gap: 32px; | gap: 32px; | ||
padding: 32px 40px; | padding: 32px 40px; | ||
background: var(--color-surface-1); | background: var(--color-surface-1); | ||
border-radius: 2px; | border-radius: 2px; | ||
| 第30行: | 第27行: | ||
.title { | .title { | ||
color: #0f172a; | /*color: #0f172a; */ | ||
font-family: "Georgia", "Times New Roman", serif; | font-family: "Georgia", "Times New Roman", serif; | ||
font-weight: 600; | font-weight: 600; | ||
letter-spacing: 0.02em; | letter-spacing: 0.02em; | ||
line-height: 1.3; | line-height: 1.3; | ||
color: transparent; | |||
/*background-clip: text;*/ | |||
background-image: url('https://wiki.ottohub.cn/images/d/d9/Title_text_cover.png'); | |||
} | } | ||
2025年12月5日 (五) 12:38的版本
.main-banner {
display: flex;
align-items: center;
gap: 32px;
padding: 32px 40px;
background: var(--color-surface-1);
border-radius: 2px;
border-left: 5px solid #3e83ff;
border-top: 1px solid rgba(0,0,0,0.08);
border-right: 1px solid rgba(0,0,0,0.08);
border-bottom: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
overflow: hidden;
}
.banner-left img {
max-width: 180px;
height: auto;
filter: grayscale(100%);
}
.banner-right {
flex: 1;
text-align: left;
}
.title {
/*color: #0f172a; */
font-family: "Georgia", "Times New Roman", serif;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.3;
color: transparent;
/*background-clip: text;*/
background-image: url('https://wiki.ottohub.cn/images/d/d9/Title_text_cover.png');
}
.subtitle {
font-size: 18px;
margin: 0.5em 0 1.5em;
color: #475569;
font-weight: 400;
line-height: 1.6;
}
.divider {
height: 1px;
background: rgba(0,0,0,0.1);
margin-bottom: 1.2em;
width: 100%;
}
.count {
font-size: 14px;
margin: 0;
letter-spacing: 0.1em;
color: #64748b;
font-weight: 600;
}
.count span {
color: #3e83ff;
font-family: sans-serif;
font-weight: 700;
}
/* ≤600 px 时纵向布局 */
@media(max-width: 600px){
.main-banner {
flex-direction: column;
text-align: left;
border-left: 1px solid rgba(0,0,0,0.08);
border-top: 4px solid #3e83ff;
}
.banner-right {
text-align: left;
}
.divider {
width: 100%;
margin: 16px 0;
}
}