|
|
| (未显示同一用户的10个中间版本) |
| 第1行: |
第1行: |
| /* ===== 基础容器 ===== */
| |
| .gf-infobox { | | .gf-infobox { |
| float: right !important; | | float: right; |
| clear: right !important; | | clear: right; |
| margin: 1em 0 1em 1em !important; | | width: 280px; |
| border: 1px solid var(--border-color-base, #D0D0D0) !important; | | margin: 0 0 1em 1em; |
| width: 280px !important;
| | padding: 1px; |
| padding: 1px 4px !important;
| | border: 1px solid var(--border-color-base, #e0e0e0); |
| background-color: var(--background-color-base, #FAFAFA) !important; | | background-color: var(--background-color-base, #ffffff); |
| color: var(--color-base, #222222) !important; | | font-size: 90%; |
| font-size: 90% !important; | | line-height: 1.5; |
| | box-sizing: border-box; |
| | display: block; |
| | overflow: visible; |
| } | | } |
|
| |
|
| /* ===== 大标题(顶部标题栏) ===== */
| |
| .gf-infobox .gf-title { | | .gf-infobox .gf-title { |
| margin: 3px 0;
| | padding: 8px; |
| padding: 0.5em; | |
| background-color: var(--background-color-dark, #000000);
| |
| color: var(--color-inverted, #FFFFFF);
| |
| font-size: 120%; | | font-size: 120%; |
| font-weight: bold; | | font-weight: bold; |
| text-align: center; | | text-align: center; |
| | background-color: var(--background-color-neutral, #f8f9fa); |
| | border-bottom: 1px solid var(--border-color-base, #e0e0e0); |
| | } |
| | |
| | .gf-infobox .gf-section { |
| | padding: 4px; |
| | text-align: center; |
| | font-weight: bold; |
| | background-color: var(--background-color-neutral, #f8f9fa); |
| | border-bottom: 1px solid var(--border-color-base, #e0e0e0); |
| | border-top: 1px solid var(--border-color-base, #e0e0e0); |
| } | | } |
|
| |
|
| /* ===== 图片容器 ===== */
| |
| .gf-infobox .gf-image-container { | | .gf-infobox .gf-image-container { |
| margin: 3px 0;
| |
| text-align: center; | | text-align: center; |
| color: var(--color-subtle, #888888);
| | padding: 5px 0; |
| padding: 0; | |
| background-color: transparent;
| |
| } | | } |
|
| |
|
| .gf-infobox .infobox-image { | | .gf-infobox .infobox-image img { |
| max-width: 100%; | | max-width: 270px; |
| height: auto; | | height: auto; |
| } | | } |
|
| |
|
| /* ===== 子标题/分区标题(如"基础资料"、"亲属或相关人") ===== */
| | .gf-infobox .gf-table { |
| .gf-infobox .gf-section { | | display: table; |
| margin: 3px 0; | | width: 100%; |
| padding: 0.3em 0.5em; | | border-collapse: collapse; |
| background-color: var(--background-color-darker, #303030); | | margin: 0; |
| color: var(--color-inverted, #FFFFFF); | |
| font-weight: bold;
| |
| text-align: center;
| |
| } | | } |
|
| |
|
| /* ===== 双栏行容器 ===== */
| |
| .gf-infobox .gf-row { | | .gf-infobox .gf-row { |
| display: flex; | | display: table-row; |
| margin: 3px 0; | | } |
| background-color: transparent; | | |
| | .gf-infobox .gf-label, |
| | .gf-infobox .gf-value { |
| | display: table-cell; |
| | padding: 4px 6px; |
| | border-bottom: 1px solid var(--border-color-base, #f0f0f0); |
| | vertical-align: middle; |
| } | | } |
|
| |
|
| /* ===== 标签栏(左侧) ===== */
| |
| .gf-infobox .gf-label { | | .gf-infobox .gf-label { |
| display: flex; | | width: 70px; |
| 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; | | font-weight: bold; |
| text-align: center; | | text-align: center; |
| | background-color: var(--background-color-neutral, #fafafa); |
| | border-right: 1px solid var(--border-color-base, #e0e0e0); |
| | white-space: nowrap; |
| } | | } |
|
| |
|
| /* ===== 内容栏(右侧) ===== */
| |
| .gf-infobox .gf-value { | | .gf-infobox .gf-value { |
| padding: 2px 2px 2px 7px; | | word-break: break-word; |
| flex: 1;
| |
| background-color: transparent;
| |
| color: var(--color-base, #222222);
| |
| }
| |
| | |
| /* ===== 关联人物内容区 ===== */
| |
| .gf-infobox .gf-related {
| |
| padding: 2px 5px;
| |
| background-color: transparent;
| |
| color: var(--color-base, #222222);
| |
| } | | } |
|
| |
|
| /* ===== 暗色模式:系统偏好 ===== */
| | .gf-infobox .gf-value p { |
| @media (prefers-color-scheme: dark) {
| | display: inline !important; |
| .gf-infobox {
| | margin: 0 !important; |
| border-color: #555555 !important;
| | padding: 0 !important; |
| background-color: #1a1a1a !important;
| |
| color: #e0e0e0 !important;
| |
| }
| |
|
| |
| .gf-infobox .gf-title {
| |
| background-color: #111111 !important;
| |
| color: #ffffff !important;
| |
| }
| |
|
| |
| .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 皮肤类名 ===== */
| | .gf-infobox .gf-related { |
| .skin-citizen-dark .gf-infobox {
| | padding: 8px; |
| border-color: #555555 !important;
| | word-break: break-all; |
| 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 {
| | .gf-infobox .gf-related p { |
| color: #e0e0e0 !important; | | display: inline !important; |
| background-color: transparent !important; | | margin: 0 !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; }
| |