Template:WelcomeHeader/styles.css：修订间差异
模板页面
更多操作
| （未显示1个用户的44个中间版本） | |||
| 第1行： | 第1行： | ||
/* ===== Banner | /* ===== Banner 样式 ===== */ | ||
.main-banner { | .main-banner{ | ||
display: flex; | display:flex; | ||
align-items: center; | align-items:center; | ||
gap: | gap:20px; | ||
padding: 32px | padding:24px 32px; | ||
border-radius:8.5px; | |||
background:linear-gradient(135deg,#3e83ff 0%,var(--color-surface-2) 100%); | |||
box-shadow:0 6px 18px rgba(0,0,0,.15); | |||
border-radius: | overflow:hidden; | ||
box-shadow: 0 | |||
overflow: hidden; | |||
} | } | ||
.banner-left img{ | |||
.banner-left img { | max-width:200px; | ||
max-width: | height:auto; | ||
height: auto | |||
} | } | ||
.banner-right{ | |||
.banner-right { | flex:1; | ||
flex: 1; | text-align:right; | ||
text-align: | /* color:#0d1b3d; */ | ||
} | } | ||
.title { | .title { | ||
color: var(--color-base); | |||
} | } | ||
.subtitle{ | |||
.subtitle { | font-size:20px; | ||
font-size: | margin:.3em 0 1.5em; | ||
margin: | color:var(--color-base); | ||
color: | |||
} | } | ||
.divider{ | |||
.divider { | height:1px; | ||
height: 1px; | background:rgba(255,255,255,.6); | ||
background: rgba( | margin-bottom:1.2em; | ||
margin-bottom: 1.2em | |||
} | } | ||
.count{ | |||
.count { | font-size:16px; | ||
font-size: | margin:0; | ||
margin: 0 | |||
} | } | ||
/* ≤600 px 时纵向布局 */ | /* ≤600 px 时纵向布局 */ | ||
@media(max-width: 600px){ | @media(max-width:600px){ | ||
.main-banner { | .main-banner{ | ||
flex-direction: column; | flex-direction:column; | ||
text-align: | text-align:center; | ||
} | } | ||
.banner-right { | .banner-right{ | ||
text-align: | text-align:center; | ||
} | } | ||
.divider { | .divider{ | ||
width: | width:80%; | ||
margin: | margin:12px auto; | ||
} | } | ||
} | } | ||
2026年1月13日 (二) 22:26的最新版本
/* ===== Banner 样式 ===== */
.main-banner{
display:flex;
align-items:center;
gap:20px;
padding:24px 32px;
border-radius:8.5px;
background:linear-gradient(135deg,#3e83ff 0%,var(--color-surface-2) 100%);
box-shadow:0 6px 18px rgba(0,0,0,.15);
overflow:hidden;
}
.banner-left img{
max-width:200px;
height:auto;
}
.banner-right{
flex:1;
text-align:right;
/* color:#0d1b3d; */
}
.title {
color: var(--color-base);
}
.subtitle{
font-size:20px;
margin:.3em 0 1.5em;
color:var(--color-base);
}
.divider{
height:1px;
background:rgba(255,255,255,.6);
margin-bottom:1.2em;
}
.count{
font-size:16px;
margin:0;
}
/* ≤600 px 时纵向布局 */
@media(max-width:600px){
.main-banner{
flex-direction:column;
text-align:center;
}
.banner-right{
text-align:center;
}
.divider{
width:80%;
margin:12px auto;
}
}