User:弃权者/Template:少女前线邮件/styles.css
来自OGAS数据中枢
更多操作
/* ===== 主题变量 ===== */
.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;
height:auto;
font-size: var(--gfl-font-body);
color: var(--gfl-text);
overflow: visible;
}
.gfl-mail-wrap {
overflow-x: hidden;
}
.gfl-list {
position: relative;
width: 100%;
background: var(--gfl-bg-0);
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;
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: 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 {
color: var(--gfl-text-em);
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);
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;
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-time {
font-size: 12px;
color: var(--gfl-text-sub);
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;
color: var(--gfl-text-em);
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(--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);
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;
}