Template:WelcomeHeader/styles.css：修订间差异

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;
  }
}

@@ 第1行： / 第1行： @@
-/* ===== Banner 样式 (去伪存真版) ===== */
+/* ===== Banner 样式 ===== */
-.main-banner {
+.main-banner{
-   display: flex;
+   display:flex;
-   align-items: center;
+   align-items:center;
-   gap: 20px;
+   gap:20px;
-   padding: 24px 32px;
+   padding:24px 32px;
+   border-radius:8.5px;
-  /* --- 修改核心：去除圆角和渐变，改为边框风格 --- */
+   background:linear-gradient(135deg,#3e83ff 0%,var(--color-surface-2) 100%);
-   border-radius: 0; /* 移除圆角，回归直角 */
+   box-shadow:0 6px 18px rgba(0,0,0,.15);
-   background: var(--color-surface-2); /* 改为纯色背景，不要渐变 */
+   overflow:hidden;
-  border: 2px solid var(--color-base); /* 增加黑色(或主色)描边，强调结构 */
-   box-shadow: none; /* 移除模糊的阴影，更加干练 */
-  /* 如果想要一点立体感但不油腻，可以使用这种硬阴影（可选）： */
-  /* box-shadow: 4px 4px 0px rgba(0,0,0, 1); */
-   overflow: hidden;
-  position: relative; /* 为可能的装饰元素留位 */
 }
+.banner-left img{
-.banner-left img {
+   max-width:200px;
-   max-width: 200px;
+   height:auto;
-   height: auto;
-  /* 图片也可以加个边框呼应整体风格（可选） */
-  /* border: 2px solid var(--color-base); */
 }
+.banner-right{
-.banner-right {
+   flex:1;
-   flex: 1;
+   text-align:right;
-   text-align: right;
+  /* color:#0d1b3d; */
 }
 .title {
-  color: var(--color-base);
+    color: var(--color-base);
-  font-weight: 700; /* 加粗标题，增加力量感 */
-  letter-spacing: -0.02em; /* 稍微收紧字间距，更现代 */
 }
+.subtitle{
-.subtitle {
+   font-size:20px;
-   font-size: 20px;
+   margin:.3em 0 1.5em;
-   margin: .3em 0 1.5em;
+   color:var(--color-base);
-   color: var(--color-base);
-  opacity: 0.8; /* 用透明度区分层级，而不是颜色 */
 }
+.divider{
-.divider {
+   height:1px;
-   height: 1px;
+   background:rgba(255,255,255,.6);
-  /* 修改：去除半透明白色，改为实色，以匹配纯色背景 */
+   margin-bottom:1.2em;
-   background: var(--color-base);
-  opacity: 0.2; /*以此控制线条轻重*/
-   margin-bottom: 1.2em;
 }
+.count{
-.count {
+   font-size:16px;
-   font-size: 16px;
+   margin:0;
-   margin: 0;
-  font-family: monospace; /* 数字使用等宽字体，增加一种“数据感/机械感” */
 }
 /* ≤600 px 时纵向布局 */
-@media(max-width: 600px) {
+@media(max-width:600px){
-   .main-banner {
+   .main-banner{
-     flex-direction: column;
+     flex-direction:column;
-     text-align: center;
+     text-align:center;
-    /* 移动端可以取消硬阴影，防止占地太大 */
-    box-shadow: none;
    }
-   .banner-right {
+   .banner-right{
-     text-align: center;
+     text-align:center;
    }
-   .divider {
+   .divider{
-     width: 80%;
+     width:80%;
-     margin: 12px auto;
+     margin:12px auto;
    }
 }

琪露若​（留言 | 贡献）

2026年1月13日 (二) 22:26的最新版本

琪露若（留言 | 贡献）