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

本站正在进行早期测试,目前仍存在许多内容的缺失。

模板:Character section/styles.css

来自星砂岛百科
Sizau-bot留言 | 贡献2026年3月28日 (六) 15:57的版本 (同步 Character 域阅读体验与 Citizen 样式优化)
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
.char-section {
    margin: var(--space-sm, 8px) 0 var(--space-lg, 18px);
    color: var(--color-base, #202122);
    font-family: var(--font-family-base);
}

.char-section > h2:first-child {
    margin-bottom: var(--space-sm, 10px);
}

.char-tabber {
    margin: var(--space-sm, 8px) 0 var(--space-md, 12px);
}

.char-tabber .tabber__header,
.char-tabber .tabbernav {
    margin-bottom: var(--space-sm, 10px);
}

.char-empty {
    margin: var(--space-sm, 10px) 0;
    padding: var(--space-sm, 10px) var(--space-md, 12px);
    border: 1px dashed var(--border-color-base, #a2a9b1);
    border-radius: var(--border-radius-base, 8px);
    background: var(--color-surface-1, #f8f9fa);
    color: var(--color-subtle, #54595d);
    text-align: center;
    line-height: 1.6;
    font-size: var(--font-size-small, 0.875rem);
}

.char-note {
    margin: var(--space-sm, 10px) 0 var(--space-md, 12px);
    padding: var(--space-sm, 10px) var(--space-md, 12px);
    border-inline-start: 3px solid var(--border-color-interactive, #36c);
    border-radius: var(--border-radius-base, 8px);
    background: var(--color-surface-1, #f8f9fa);
    color: var(--color-base, #202122);
    line-height: 1.6;
    font-size: var(--font-size-small, 0.875rem);
}

.char-card,
.char-news-panel {
    margin: var(--space-sm, 10px) 0;
    padding: var(--space-md, 12px);
    border: 1px solid var(--border-color-base, #c8ccd1);
    border-radius: var(--border-radius-medium, 12px);
    background: var(--color-surface-0, #fff);
}

.char-card-title,
.char-chat-prompt,
.char-chat-subgroup,
.char-gift-subtitle,
.char-schedule-heading,
.char-news-label {
    color: var(--color-emphasized, #101418);
    font-size: var(--font-size-small, 0.875rem);
    font-weight: var(--font-weight-semi-bold, 600);
    line-height: 1.5;
}

.char-card-title {
    margin-bottom: var(--space-sm, 10px);
}

.char-chat-prompt {
    margin-bottom: var(--space-sm, 10px);
}

.char-chat-card + .char-chat-card,
.char-chat-group + .char-chat-group,
.char-chat-weekday + .char-chat-weekday,
.char-gift-block + .char-gift-block,
.char-schedule-group + .char-schedule-group {
    margin-top: var(--space-md, 14px);
}

.char-chat-reply + .char-chat-reply,
.char-gift-subblock + .char-gift-subblock {
    margin-top: var(--space-sm, 10px);
}

.char-chat-subgroup {
    margin: var(--space-sm, 10px) 0 var(--space-2xs, 6px);
}

.char-gift-items,
.char-gift-lines {
    margin-top: var(--space-2xs, 6px);
}

.char-table-wrap {
    margin: var(--space-sm, 10px) 0;
    overflow-x: auto;
}

.char-table-wrap table,
.char-table-wrap .wikitable {
    width: 100%;
    margin: 0;
}

.char-data-table {
    background: var(--color-surface-0, #fff);
    font-size: var(--font-size-small, 0.875rem);
}

.char-data-table th,
.char-data-table td {
    vertical-align: top;
    line-height: 1.6;
}

.char-news-panel {
    background: linear-gradient(
        180deg,
        var(--color-surface-0, #fff) 0%,
        var(--color-surface-1, #f8f9fa) 100%
    );
}

.char-news-identity {
    display: grid;
    gap: var(--space-xs, 8px);
}

.char-news-headline {
    display: grid;
    gap: var(--space-2xs, 4px);
}

.char-news-name {
    color: var(--color-emphasized, #101418);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
}

.char-news-signature {
    padding: var(--space-xs, 8px) var(--space-sm, 10px);
    border-radius: var(--border-radius-base, 8px);
    background: var(--color-surface-0, #fff);
    color: var(--color-subtle, #54595d);
    line-height: 1.7;
}

.char-news-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-sm, 10px);
    margin: var(--space-md, 12px) 0;
}

.char-news-metric {
    padding: var(--space-sm, 10px) var(--space-md, 12px);
    border: 1px solid var(--border-color-base, #c8ccd1);
    border-radius: var(--border-radius-base, 8px);
    background: var(--color-surface-0, #fff);
}

.char-news-metric-label {
    color: var(--color-subtle, #54595d);
    font-size: var(--font-size-small, 0.875rem);
}

.char-news-metric-value {
    margin-top: var(--space-2xs, 4px);
    color: var(--color-emphasized, #101418);
    font-size: 1.05rem;
    font-weight: 700;
}

.char-news-samples {
    margin-top: var(--space-md, 12px);
    padding-top: var(--space-sm, 10px);
    border-top: 1px solid var(--border-color-base, #c8ccd1);
}

.char-news-list {
    margin: var(--space-xs, 8px) 0 0 1.4em;
}

.char-news-list li + li {
    margin-top: var(--space-2xs, 6px);
}

.char-schedule-heading {
    margin: 0 0 var(--space-2xs, 6px);
}

.char-schedule-heading b {
    font-weight: inherit;
}

@media (max-width: 720px) {
    .char-card,
    .char-news-panel {
        padding: var(--space-sm, 10px);
    }

    .char-news-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* [[分类:模板样式]] */