|
|
| (未显示同一用户的22个中间版本) |
| 第1行: |
第1行: |
| /* ===== 基础容器 ===== */
| | .infotemplatebox { |
| | float: right; |
| | width: 300px; |
| | margin: 0 0 1em 1em; |
| | background-color: var(--background-color-neutral-subtle, #f8f9fa); |
| | border: 1px solid var(--border-color-subtle, #c8ccd1); |
| | padding: 0; |
| | font-size: 0.9em; |
| | color: var(--color-base, #202122); |
| | box-sizing: border-box; |
| | } |
| | |
| .gf-infobox { | | .gf-infobox { |
| float: right !important; | | width: 100%; |
| clear: right !important;
| | border-collapse: collapse; |
| margin: 1em 0 1em 1em !important;
| | background-color: var(--background-color-base, #ffffff); |
| border: 1px solid var(--border-color-base, #D0D0D0) !important; | | margin: 0; |
| width: 280px !important;
| | table-layout: auto; |
| padding: 1px 4px !important;
| |
| background-color: var(--background-color-base, #FAFAFA) !important; | |
| color: var(--color-base, #222222) !important; | |
| font-size: 90% !important; | |
| } | | } |
| | | .gf-infobox > tbody > tr:first-child td { |
| /* ===== 大标题(顶部标题栏) ===== */
| | background-color: var(--background-color-neutral-subtle, #f8f9fa); |
| .gf-infobox .gf-title { | | color: var(--color-emphasized, #000000); |
| margin: 3px 0;
| |
| padding: 0.5em;
| |
| background-color: var(--background-color-dark, #000000); | |
| color: var(--color-inverted, #FFFFFF); | |
| font-size: 120%;
| |
| font-weight: bold; | | font-weight: bold; |
| | font-size: 1.1em; |
| | padding: 10px; |
| text-align: center; | | text-align: center; |
| | border-bottom: 1px solid var(--border-color-subtle, #c8ccd1); |
| | border-top: none !important; |
| } | | } |
|
| |
|
| /* ===== 图片容器 ===== */
| | .gf-infobox b, |
| .gf-infobox .gf-image-container { | | .gf-infobox strong { |
| margin: 3px 0; | | display: block; |
| text-align: center; | | text-align: center; |
| color: var(--color-subtle, #888888); | | padding: 4px 0; |
| padding: 0;
| | color: var(--color-base, #202122); |
| background-color: transparent;
| |
| } | | } |
|
| |
|
| .gf-infobox .infobox-image { | | .gf-infobox th { |
| max-width: 100%; | | background-color: var(--background-color-neutral-subtle, #f8f9fa); |
| height: auto; | | color: var(--color-base, #202122); |
| }
| | text-align: left; |
| | | padding: 6px 10px; |
| /* ===== 子标题/分区标题(如"基础资料"、"亲属或相关人") ===== */
| | white-space: nowrap; |
| .gf-infobox .gf-section {
| | border-bottom: 1px solid var(--border-color-subtle, #eaecf0); |
| margin: 3px 0; | |
| padding: 0.3em 0.5em; | |
| background-color: var(--background-color-darker, #303030); | |
| color: var(--color-inverted, #FFFFFF); | |
| font-weight: bold; | | font-weight: bold; |
| text-align: center; | | width: 1px; |
| } | | } |
|
| |
|
| /* ===== 双栏行容器 ===== */
| | .gf-infobox td { |
| .gf-infobox .gf-row { | | padding: 6px 10px; |
| display: flex; | | border-bottom: 1px solid var(--border-color-subtle, #eaecf0); |
| margin: 3px 0; | | color: var(--color-base, #202122); |
| background-color: transparent; | | vertical-align: middle; |
| | word-break: break-all; |
| } | | } |
|
| |
|
| /* ===== 标签栏(左侧) ===== */
| | .gf-infobox tr:nth-child(2) td { |
| .gf-infobox .gf-label { | |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| flex: 0 0 5em;
| |
| padding: 2px 5px;
| |
| background-color: var(--background-color-neutral, #454545);
| |
| color: var(--color-inverted, #FFFFFF);
| |
| font-weight: bold;
| |
| text-align: center; | | text-align: center; |
| | background-color: var(--background-color-base, #ffffff); |
| | padding: 12px 0; |
| | border-top: none; |
| } | | } |
|
| |
|
| /* ===== 内容栏(右侧) ===== */
| | .gf-infobox a { |
| .gf-infobox .gf-value { | | color: var(--color-link, #202122); |
| padding: 2px 2px 2px 7px;
| | text-decoration: none; |
| flex: 1;
| |
| background-color: transparent;
| |
| color: var(--color-base, #222222); | |
| } | | } |
|
| |
|
| /* ===== 关联人物内容区 ===== */
| | .gf-infobox a:hover { |
| .gf-infobox .gf-related { | | text-decoration: underline; |
| padding: 2px 5px; | |
| background-color: transparent;
| |
| color: var(--color-base, #222222);
| |
| } | | } |
|
| |
|
| /* ===== 暗色模式:系统偏好 ===== */
| | @media screen and (max-width: 768px) { |
| @media (prefers-color-scheme: dark) { | | .infotemplatebox { |
| | float: none; |
| | width: 100%; |
| | margin: 1em 0; |
| | display: block; |
| | } |
| | |
| .gf-infobox { | | .gf-infobox { |
| border-color: #555555 !important; | | display: table; |
| background-color: #1a1a1a !important; | | width: 100%; |
| color: #e0e0e0 !important;
| |
| } | | } |
|
| | |
| .gf-infobox .gf-title { | | .gf-infobox th, |
| background-color: #111111 !important;
| | .gf-infobox td { |
| color: #ffffff !important;
| | padding: 10px; |
| }
| | font-size: 1.1em; |
|
| |
| .gf-infobox .gf-image-container { | |
| color: #cccccc !important;
| |
| background-color: transparent !important;
| |
| }
| |
|
| |
| .gf-infobox .gf-section {
| |
| background-color: #2a2a2a !important; | |
| color: #ffffff !important; | |
| }
| |
|
| |
| .gf-infobox .gf-label {
| |
| background-color: #3a3a3a !important;
| |
| color: #ffffff !important;
| |
| }
| |
|
| |
| .gf-infobox .gf-value {
| |
| color: #e0e0e0 !important;
| |
| background-color: transparent !important;
| |
| } | | } |
|
| |
| .gf-infobox .gf-related {
| |
| color: #e0e0e0 !important;
| |
| background-color: transparent !important;
| |
| }
| |
|
| |
| /* 暗色模式下的链接颜色优化 */
| |
| .gf-infobox a {
| |
| color: #8cb4ff !important;
| |
| }
| |
|
| |
| .gf-infobox a:visited {
| |
| color: #b39ddb !important;
| |
| }
| |
|
| |
| .gf-infobox a:hover {
| |
| color: #aac8ff !important;
| |
| }
| |
|
| |
| /* 稀有度颜色在暗色模式下更亮 */
| |
| .gf-rarity-2 { color: #aaaaaa !important; }
| |
| .gf-rarity-3 { color: #6699cc !important; }
| |
| .gf-rarity-4 { color: #99aa66 !important; }
| |
| .gf-rarity-5 { color: #cc9933 !important; }
| |
| .gf-rarity-6 { color: #cc6644 !important; }
| |
| }
| |
|
| |
| /* ===== 暗色模式:Citizen 皮肤类名 ===== */
| |
| .skin-citizen-dark .gf-infobox {
| |
| border-color: #555555 !important;
| |
| background-color: #1a1a1a !important;
| |
| color: #e0e0e0 !important;
| |
| }
| |
|
| |
| .skin-citizen-dark .gf-infobox .gf-title {
| |
| background-color: #111111 !important;
| |
| color: #ffffff !important;
| |
| }
| |
|
| |
| .skin-citizen-dark .gf-infobox .gf-image-container {
| |
| color: #cccccc !important;
| |
| background-color: transparent !important;
| |
| }
| |
|
| |
| .skin-citizen-dark .gf-infobox .gf-section {
| |
| background-color: #2a2a2a !important;
| |
| color: #ffffff !important;
| |
| }
| |
|
| |
| .skin-citizen-dark .gf-infobox .gf-label {
| |
| background-color: #3a3a3a !important;
| |
| color: #ffffff !important;
| |
| }
| |
|
| |
| .skin-citizen-dark .gf-infobox .gf-value {
| |
| color: #e0e0e0 !important;
| |
| background-color: transparent !important;
| |
| }
| |
|
| |
| .skin-citizen-dark .gf-infobox .gf-related {
| |
| color: #e0e0e0 !important;
| |
| background-color: transparent !important;
| |
| }
| |
|
| |
| .skin-citizen-dark .gf-infobox a {
| |
| color: #8cb4ff !important;
| |
| }
| |
|
| |
| .skin-citizen-dark .gf-infobox a:visited {
| |
| color: #b39ddb !important;
| |
| }
| |
|
| |
| .skin-citizen-dark .gf-infobox a:hover {
| |
| color: #aac8ff !important;
| |
| }
| |
|
| |
| .skin-citizen-dark .gf-rarity-2 { color: #aaaaaa !important; }
| |
| .skin-citizen-dark .gf-rarity-3 { color: #6699cc !important; }
| |
| .skin-citizen-dark .gf-rarity-4 { color: #99aa66 !important; }
| |
| .skin-citizen-dark .gf-rarity-5 { color: #cc9933 !important; }
| |
| .skin-citizen-dark .gf-rarity-6 { color: #cc6644 !important; }
| |
|
| |
| /* ===== 暗色模式:Citizen 皮肤的 data-theme 属性 ===== */
| |
| [data-theme="dark"] .gf-infobox {
| |
| border-color: #555555 !important;
| |
| background-color: #1a1a1a !important;
| |
| color: #e0e0e0 !important;
| |
| }
| |
|
| |
| [data-theme="dark"] .gf-infobox .gf-title {
| |
| background-color: #111111 !important;
| |
| color: #ffffff !important;
| |
| }
| |
|
| |
| [data-theme="dark"] .gf-infobox .gf-image-container {
| |
| color: #cccccc !important;
| |
| background-color: transparent !important;
| |
| }
| |
|
| |
| [data-theme="dark"] .gf-infobox .gf-section {
| |
| background-color: #2a2a2a !important;
| |
| color: #ffffff !important;
| |
| }
| |
|
| |
| [data-theme="dark"] .gf-infobox .gf-label {
| |
| background-color: #3a3a3a !important;
| |
| color: #ffffff !important;
| |
| }
| |
|
| |
| [data-theme="dark"] .gf-infobox .gf-value {
| |
| color: #e0e0e0 !important;
| |
| background-color: transparent !important;
| |
| }
| |
|
| |
| [data-theme="dark"] .gf-infobox .gf-related {
| |
| color: #e0e0e0 !important;
| |
| background-color: transparent !important;
| |
| }
| |
|
| |
| [data-theme="dark"] .gf-infobox a {
| |
| color: #8cb4ff !important;
| |
| }
| |
|
| |
| [data-theme="dark"] .gf-infobox a:visited {
| |
| color: #b39ddb !important;
| |
| }
| |
|
| |
| [data-theme="dark"] .gf-infobox a:hover {
| |
| color: #aac8ff !important;
| |
| }
| |
|
| |
| [data-theme="dark"] .gf-rarity-2 { color: #aaaaaa !important; }
| |
| [data-theme="dark"] .gf-rarity-3 { color: #6699cc !important; }
| |
| [data-theme="dark"] .gf-rarity-4 { color: #99aa66 !important; }
| |
| [data-theme="dark"] .gf-rarity-5 { color: #cc9933 !important; }
| |
| [data-theme="dark"] .gf-rarity-6 { color: #cc6644 !important; }
| |
|
| |
| /* ===== 浅色模式:Citizen 皮肤类名 ===== */
| |
| .skin-citizen-light .gf-infobox {
| |
| border-color: #D0D0D0 !important;
| |
| background-color: #FAFAFA !important;
| |
| color: #222222 !important;
| |
| }
| |
|
| |
| .skin-citizen-light .gf-infobox .gf-title {
| |
| background-color: #000000 !important;
| |
| color: #FFFFFF !important;
| |
| }
| |
|
| |
| .skin-citizen-light .gf-infobox .gf-image-container {
| |
| color: #888888 !important;
| |
| background-color: transparent !important;
| |
| }
| |
|
| |
| .skin-citizen-light .gf-infobox .gf-section {
| |
| background-color: #303030 !important;
| |
| color: #FFFFFF !important;
| |
| }
| |
|
| |
| .skin-citizen-light .gf-infobox .gf-label {
| |
| background-color: #454545 !important;
| |
| color: #FFFFFF !important;
| |
| }
| |
|
| |
| .skin-citizen-light .gf-infobox .gf-value {
| |
| color: #222222 !important;
| |
| background-color: transparent !important;
| |
| }
| |
|
| |
| .skin-citizen-light .gf-infobox .gf-related {
| |
| color: #222222 !important;
| |
| background-color: transparent !important;
| |
| }
| |
|
| |
| .skin-citizen-light .gf-infobox a {
| |
| color: #0645ad !important;
| |
| }
| |
|
| |
| .skin-citizen-light .gf-infobox a:visited {
| |
| color: #0b0080 !important;
| |
| }
| |
|
| |
| .skin-citizen-light .gf-infobox a:hover {
| |
| color: #0645ad !important;
| |
| }
| |
|
| |
| .skin-citizen-light .gf-rarity-2 { color: #777777 !important; }
| |
| .skin-citizen-light .gf-rarity-3 { color: #33566f !important; }
| |
| .skin-citizen-light .gf-rarity-4 { color: #7b813f !important; }
| |
| .skin-citizen-light .gf-rarity-5 { color: #a7753b !important; }
| |
| .skin-citizen-light .gf-rarity-6 { color: #ad4229 !important; }
| |
|
| |
| /* ===== 浅色模式:data-theme 属性 ===== */
| |
| [data-theme="light"] .gf-infobox {
| |
| border-color: #D0D0D0 !important;
| |
| background-color: #FAFAFA !important;
| |
| color: #222222 !important;
| |
| }
| |
|
| |
| [data-theme="light"] .gf-infobox .gf-title {
| |
| background-color: #000000 !important;
| |
| color: #FFFFFF !important;
| |
| }
| |
|
| |
| [data-theme="light"] .gf-infobox .gf-image-container {
| |
| color: #888888 !important;
| |
| background-color: transparent !important;
| |
| }
| |
|
| |
| [data-theme="light"] .gf-infobox .gf-section {
| |
| background-color: #303030 !important;
| |
| color: #FFFFFF !important;
| |
| }
| |
|
| |
| [data-theme="light"] .gf-infobox .gf-label {
| |
| background-color: #454545 !important;
| |
| color: #FFFFFF !important;
| |
| }
| |
|
| |
| [data-theme="light"] .gf-infobox .gf-value {
| |
| color: #222222 !important;
| |
| background-color: transparent !important;
| |
| } | | } |
|
| |
| [data-theme="light"] .gf-infobox .gf-related {
| |
| color: #222222 !important;
| |
| background-color: transparent !important;
| |
| }
| |
|
| |
| [data-theme="light"] .gf-infobox a {
| |
| color: #0645ad !important;
| |
| }
| |
|
| |
| [data-theme="light"] .gf-infobox a:visited {
| |
| color: #0b0080 !important;
| |
| }
| |
|
| |
| [data-theme="light"] .gf-infobox a:hover {
| |
| color: #0645ad !important;
| |
| }
| |
|
| |
| [data-theme="light"] .gf-rarity-2 { color: #777777 !important; }
| |
| [data-theme="light"] .gf-rarity-3 { color: #33566f !important; }
| |
| [data-theme="light"] .gf-rarity-4 { color: #7b813f !important; }
| |
| [data-theme="light"] .gf-rarity-5 { color: #a7753b !important; }
| |
| [data-theme="light"] .gf-rarity-6 { color: #ad4229 !important; }
| |