User:弃权者/Template:少女前线邮件/styles.css

.gfl-mail {
  --color-surface-0: var(--background-body, #0d0e12);
  --color-surface-1: var(--background-surface, #14161d);
  --color-surface-2: color-mix(in srgb, var(--color-base, #d0d4e8) 8%, var(--background-surface, #14161d));
  --color-surface-3: var(--border-color, #252840);
  --color-surface-4: var(--border-color, #2e3250);
  --color-base: var(--color-base, #d0d4e8);
  --color-emphasized: var(--color-emphasized, #eef0f8);
  --color-subtle: var(--color-subtle, #7a7f9a);
  --color-link: var(--color-primary, #6c8fc7);
  --border-radius: var(--border-radius, 4px);
}

.gfl-mail {
  position: relative;
  height: auto;
  overflow: visible;
  font-family: 'Roboto', 'Noto Sans JP', 'Microsoft YaHei', sans-serif;
  font-size: 13px;
  color: var(--color-base);
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gfl-list {
  width: 100%;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-3);
  border-radius: 6px;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease,
              visibility 0s 0s;
}

.gfl-mail.view-detail .gfl-list {
  transform: translateX(-30px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease,
              visibility 0s 0.3s;
}

.gfl-list-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-surface-3);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-subtle);
  letter-spacing: .04em;
  background: var(--color-surface-1);
  text-transform: uppercase;
}

.gfl-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-surface-2);
  cursor: pointer;
  transition: background .15s;
  background: var(--color-surface-1);
}

.gfl-item:last-child {
  border-bottom: none;
}

.gfl-item:hover {
  background: var(--color-surface-2);
}

.gfl-icon {
  width: 36px;
  height: 36px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-surface-3);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  color: var(--color-subtle);
}

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

.gfl-subject {
  color: var(--color-emphasized);
  font-size: 13px;
  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: 11px;
  color: var(--color-subtle);
  flex-shrink: 0;
}

.gfl-chevron {
  font-size: 14px;
  color: var(--color-surface-4);
  flex-shrink: 0;
}

.gfl-item:hover .gfl-chevron {
  color: var(--color-subtle);
}

/* ---------- 详情部分 ---------- */
.gfl-detail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-3);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: visible;
  box-sizing: border-box;
  opacity: 0;
  transform: translateX(30px);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease,
              visibility 0s 0.3s;
}

.gfl-detail.is-open {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease,
              visibility 0s 0s;
}

/* 关键：标题栏不创建层叠上下文，让立绘能盖住它 */
.gfl-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-surface-1);
  border-bottom: 1px solid var(--color-surface-3);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  flex-shrink: 0;
  position: relative;
  z-index: 0;                          /* 低层级 */
  isolation: auto;                     /* 不创建新的层叠上下文 */
}

.gfl-back-btn {
  background: var(--color-surface-2);
  border: 1px solid var(--color-surface-3);
  border-radius: var(--border-radius);
  color: var(--color-base);
  cursor: pointer;
  padding: 4px 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background .15s;
  flex-shrink: 0;
  position: relative;
  z-index: 20;                         /* 确保返回按钮可点击 */
}

.gfl-back-btn:hover {
  background: var(--color-surface-3);
}

.gfl-detail-icon {
  width: 28px;
  height: 28px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-surface-3);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--color-subtle);
  flex-shrink: 0;
  position: relative;
  z-index: 20;
}

.gfl-detail-title-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 20;
}

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

.gfl-detail-body-wrap {
  flex: 1;
  display: flex;
  position: relative;
  overflow: visible;                   /* 允许立绘溢出 */
  min-height: 0;
  z-index: 0;                          /* 低层级 */
}

.gfl-detail-body {
  flex: 1;
  padding: 20px 18px;
  overflow-y: auto;
  background: var(--color-surface-0);
  min-width: 0;
  position: relative;
  z-index: 2;                          /* 正文在立绘下方 */
  padding-right: 230px;
}

.gfl-date-row {
  font-size: 11px;
  color: var(--color-subtle);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-surface-2);
}

.gfl-content {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--color-base);
}

/* ---------- 立绘部分 ---------- */
.gfl-char {
  position: absolute;
  top: 55px;
  right: -60px;
  width: 375px;
  bottom: 0;
  z-index: 10;                         /* 高于标题栏(0)和正文(2) */
  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;
}