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

.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:  auto;
  --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;
  height:auto;
  font-size: var(--gfl-font-body);
  overflow: visible;
}

.gfl-mail-wrap {
  overflow-x: hidden;
}

.gfl-list {
  position: relative;
  width: 100%;
  background: var(--color-surface-2);
  border: 1px solid var(--gfl-border-1);
  border-radius: 6px;
  overflow: visible;
  display: block;
  flex-direction: column;
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity .25s ease,
              transform .25s cubic-bezier(.4,0,.2,1),
              visibility 0s 0s;
  clip-path: inset(0 round 6px);
}


.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;
  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(--color-surface-1);
}
.gfl-item:last-child { border-bottom: none; }
.gfl-item:hover      { background: var(--gfl-bg-2); }

.gfl-icon {
  width: 38px;
  height: 38px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gfl-detail-icon {
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gfl-icon::before {
  width: 36px;
  height: 32px;
}

.gfl-detail-icon::before {
  width: 22px;
  height: 20px;
}

.gfl-icon,
.gfl-detail-icon {
  background: none;
  border: none;
}

.gfl-icon::before,
.gfl-detail-icon::before {
  content: '';
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7f9a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpolyline points='3,5 12,13 21,5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.skin-citizen-light .gfl-icon::before,
.skin-citizen-light .gfl-detail-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7080' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpolyline points='3,5 12,13 21,5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: light) {
  .gfl-icon::before,
  .gfl-detail-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7080' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpolyline points='3,5 12,13 21,5'/%3E%3C/svg%3E");
  }
}
.gfl-meta { flex: 1; min-width: 0; }

.gfl-subject {
  font-size: 15px;
  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);
  flex-shrink: 0;
}

.gfl-chevron {
  font-size: 16px;
  flex-shrink: 0;
  transition: color .12s;
}

.gfl-detail {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-1);
  border: 1px solid var(--gfl-border-1);
  border-radius: 6px;
  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(--color-surface-2);
  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(--color-surface-1);
  border: 1px solid var(--gfl-border-1);
  border-radius: var(--gfl-radius);
  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-time {
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.gfl-detail-title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
}

.gfl-detail-title-wrap:hover {
  overflow-x: auto;
}

.gfl-detail-subject {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}


.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(--color-surface-1);
  z-index: 2;
}

.gfl-date-row {
  font-size: var(--gfl-font-meta);
  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;
  white-space: pre-wrap;
}

/* ===== 立绘 ===== */
.gfl-char {
  position: absolute;
  top: 0px;
  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; }

@media (max-width: 600px) {
  .gfl-char {
    display: none;
  }

  .gfl-detail-body {
    padding-right: 20px;
  }
}
.gfl-char figure {
  margin: 0;
  padding: 0;
}

.gfl-char figcaption {
  display: none;
}