打开/关闭菜单
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

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

模板页面
棍牧典
棍牧典留言 | 贡献 ([IPE-NEXT] Quick edit)
第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:16px;
 
   background:linear-gradient(135deg,#3e83ff 0%,var(--color-surface-2) 100%);
  /* --- 修改核心:去除圆角和渐变,改为边框风格 --- */
   box-shadow:0 6px 18px rgba(0,0,0,.15);
   border-radius: 0; /* 移除圆角,回归直角 */
   overflow:hidden;
   background: var(--color-surface-2); /* 改为纯色背景,不要渐变 */
  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{
 
   max-width:200px;
.banner-left img {
   height:auto;
   max-width: 200px;
   height: auto;
  /* 图片也可以加个边框呼应整体风格(可选) */
  /* border: 2px solid var(--color-base); */
}
}
.banner-right{
 
   flex:1;
.banner-right {
   text-align:right;
   flex: 1;
  /* color:#0d1b3d; */
   text-align: right;
}
}
.title {
.title {
    color: var(--color-base);
  color: var(--color-base);
  font-weight: 700; /* 加粗标题,增加力量感 */
  letter-spacing: -0.02em; /* 稍微收紧字间距,更现代 */
}
}
.subtitle{
 
   font-size:20px;
.subtitle {
   margin:.3em 0 1.5em;
   font-size: 20px;
   color:var(--color-base);
   margin: .3em 0 1.5em;
   color: var(--color-base);
  opacity: 0.8; /* 用透明度区分层级,而不是颜色 */
}
}
.divider{
 
   height:1px;
.divider {
   background:rgba(255,255,255,.6);
   height: 1px;
   margin-bottom:1.2em;
  /* 修改:去除半透明白色,改为实色,以匹配纯色背景 */
   background: var(--color-base);
  opacity: 0.2; /*以此控制线条轻重*/
   margin-bottom: 1.2em;
}
}
.count{
 
   font-size:16px;
.count {
   margin:0;
   font-size: 16px;
   margin: 0;
  font-family: monospace; /* 数字使用等宽字体,增加一种“数据感/机械感” */
}
}
/* ≤600 px 时纵向布局 */
/* ≤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;
   }
   }
}
}

2025年12月5日 (五) 12:11的版本

/* ===== Banner 样式 (去伪存真版) ===== */
.main-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 32px;
  
  /* --- 修改核心:去除圆角和渐变,改为边框风格 --- */
  border-radius: 0; /* 移除圆角,回归直角 */
  background: var(--color-surface-2); /* 改为纯色背景,不要渐变 */
  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 {
  max-width: 200px;
  height: auto;
  /* 图片也可以加个边框呼应整体风格(可选) */
  /* border: 2px solid var(--color-base); */
}

.banner-right {
  flex: 1;
  text-align: right;
}

.title {
  color: var(--color-base);
  font-weight: 700; /* 加粗标题,增加力量感 */
  letter-spacing: -0.02em; /* 稍微收紧字间距,更现代 */
}

.subtitle {
  font-size: 20px;
  margin: .3em 0 1.5em;
  color: var(--color-base);
  opacity: 0.8; /* 用透明度区分层级,而不是颜色 */
}

.divider {
  height: 1px;
  /* 修改:去除半透明白色,改为实色,以匹配纯色背景 */
  background: var(--color-base); 
  opacity: 0.2; /*以此控制线条轻重*/
  margin-bottom: 1.2em;
}

.count {
  font-size: 16px;
  margin: 0;
  font-family: monospace; /* 数字使用等宽字体,增加一种“数据感/机械感” */
}

/* ≤600 px 时纵向布局 */
@media(max-width: 600px) {
  .main-banner {
    flex-direction: column;
    text-align: center;
    /* 移动端可以取消硬阴影,防止占地太大 */
    box-shadow: none; 
  }
  .banner-right {
    text-align: center;
  }
  .divider {
    width: 80%;
    margin: 12px auto;
  }
}