User:弃权者/Template:少女前线邮件/styles.css：修订间差异

2026年5月21日 (四) 07:35的版本

/* ===== 主题变量 ===== */
.gfl-mail {
  --gfl-bg-0:       var(--background-body,    #0d0e12);
  --gfl-bg-1:       var(--background-surface, #14161d);
  --gfl-bg-2:       var(--background-hover,   #1c1f2b);
  --gfl-border-1:   var(--border-color,       #252840);
  --gfl-border-2:   var(--border-color-hover, #2e3250);
  --gfl-text:       var(--color-base,         #d0d4e8);
  --gfl-text-em:    var(--color-emphasized,   #eef0f8);
  --gfl-text-sub:   var(--color-subtle,       #7a7f9a);
  --gfl-radius:     var(--border-radius,      4px);
  --gfl-font-body:  14px;
  --gfl-font-meta:  12px;
  --gfl-font-label: 11.5px;
}

.skin-citizen-light .gfl-mail,
body.skin-citizen-light .gfl-mail {
  --gfl-bg-0:     #ffffff;
  --gfl-bg-1:     #f4f5f8;
  --gfl-bg-2:     #eaecf2;
  --gfl-border-1: #d0d3e0;
  --gfl-border-2: #b8bcd0;
  --gfl-text:     #2c2f3e;
  --gfl-text-em:  #14161d;
  --gfl-text-sub: #6b7080;
}

@media (prefers-color-scheme: light) {
  .gfl-mail {
    --gfl-bg-0:     #ffffff;
    --gfl-bg-1:     #f4f5f8;
    --gfl-bg-2:     #eaecf2;
    --gfl-border-1: #d0d3e0;
    --gfl-border-2: #b8bcd0;
    --gfl-text:     #2c2f3e;
    --gfl-text-em:  #14161d;
    --gfl-text-sub: #6b7080;
  }
}

/* ===== 外壳：固定高度，内部绝对定位切换 ===== */
.gfl-mail {
  position: relative;
  /* 默认高度，模板调用时可通过 style 参数覆盖 */
  height: var(--gfl-height, 480px);
  overflow: hidden;           /* 裁掉切换动画溢出 */
  font-family: 'Roboto', 'Noto Sans JP', 'Microsoft YaHei', sans-serif;
  font-size: var(--gfl-font-body);
  color: var(--gfl-text);
}

/* 让立绘可以从顶部溢出到外壳上方 */
.gfl-mail {
  overflow-x: hidden;
  overflow-y: visible;        /* 立绘向上溢出时可见 */
}

/* ===== 列表面板 ===== */
.gfl-list {
  position: absolute;
  inset: 0;
  background: var(--gfl-bg-0);
  border: 1px solid var(--gfl-border-1);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity .25s ease,
              transform .25s cubic-bezier(.4,0,.2,1),
              visibility 0s 0s;
}

/* 列表内容区可滚动 */
.gfl-list-items {
  flex: 1;
  overflow-y: auto;
}

.gfl-mail.view-detail .gfl-list {
  opacity: 0;
  transform: translateX(-24px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease,
              transform .25s cubic-bezier(.4,0,.2,1),
              visibility 0s .25s;
}

.gfl-list-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--gfl-border-1);
  font-size: var(--gfl-font-label);
  font-weight: 600;
  color: var(--gfl-text-sub);
  letter-spacing: .06em;
  background: var(--gfl-bg-1);
  text-transform: uppercase;
  flex-shrink: 0;
}

.gfl-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--gfl-bg-2);
  cursor: pointer;
  transition: background .12s;
  background: var(--gfl-bg-1);
}
.gfl-item:last-child { border-bottom: none; }
.gfl-item:hover      { background: var(--gfl-bg-2); }

.gfl-icon {
  width: 38px;
  height: 38px;
  background: var(--gfl-bg-2);
  border: 1px solid var(--gfl-border-1);
  border-radius: var(--gfl-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 17px;
  color: var(--gfl-text-sub);
}

.gfl-meta { flex: 1; min-width: 0; }

.gfl-subject {
  color: var(--gfl-text-em);
  font-size: var(--gfl-font-body);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.gfl-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.gfl-date {
  font-size: var(--gfl-font-meta);
  color: var(--gfl-text-sub);
  flex-shrink: 0;
}

.gfl-chevron {
  font-size: 16px;
  color: var(--gfl-border-2);
  flex-shrink: 0;
  transition: color .12s;
}
.gfl-item:hover .gfl-chevron { color: var(--gfl-text-sub); }

/* ===== 详情面板 ===== */
.gfl-detail {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--gfl-bg-0);
  border: 1px solid var(--gfl-border-1);
  border-radius: 6px;
  /* overflow: visible 让立绘溢出 */
  overflow: visible;
  opacity: 0;
  transform: translateX(24px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease,
              transform .25s cubic-bezier(.4,0,.2,1),
              visibility 0s .25s;
}

.gfl-detail.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .25s ease,
              transform .25s cubic-bezier(.4,0,.2,1),
              visibility 0s 0s;
}

.gfl-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--gfl-bg-1);
  border-bottom: 1px solid var(--gfl-border-1);
  border-radius: 5px 5px 0 0;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.gfl-back-btn {
  background: var(--gfl-bg-2);
  border: 1px solid var(--gfl-border-1);
  border-radius: var(--gfl-radius);
  color: var(--gfl-text);
  cursor: pointer;
  padding: 5px 12px;
  font-size: var(--gfl-font-meta);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background .12s;
  flex-shrink: 0;
  position: relative;
  z-index: 20;
}
.gfl-back-btn:hover { background: var(--gfl-border-1); }

.gfl-detail-icon {
  width: 30px;
  height: 30px;
  background: var(--gfl-bg-2);
  border: 1px solid var(--gfl-border-1);
  border-radius: var(--gfl-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--gfl-text-sub);
  flex-shrink: 0;
}

.gfl-detail-title-wrap {
  flex: 1;
  min-width: 0;
}

.gfl-detail-subject {
  font-size: 15px;
  font-weight: 500;
  color: var(--gfl-text-em);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* ===== 正文 + 立绘区域 ===== */
.gfl-detail-body-wrap {
  flex: 1;
  position: relative;
  overflow: visible;          /* 立绘可以溢出到外壳顶部 */
  min-height: 0;
}

/* 正文区：独立滚动，右侧留白给立绘 */
.gfl-detail-body {
  position: absolute;
  inset: 0;
  padding: 18px 230px 18px 20px;
  overflow-y: auto;
  background: var(--gfl-bg-0);
  z-index: 2;
}

.gfl-date-row {
  font-size: var(--gfl-font-meta);
  color: var(--gfl-text-sub);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gfl-bg-2);
}

.gfl-content {
  font-size: var(--gfl-font-body);
  line-height: 1.9;
  color: var(--gfl-text);
}

/* ===== 立绘 ===== */
.gfl-char {
  position: absolute;
  top: -60px;                 /* 允许立绘超出顶部 */
  right: -60px;
  width: 375px;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: visible;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
}

.gfl-char img,
.gfl-char a img {
  width: 350px !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  display: block;
  flex-shrink: 0;
}

.gfl-char-placeholder { display: none; }