|
|
| 第1行： |
第1行： |
| /**
| |
| * Blockland Wiki Modern Aero UI
| |
| * 风格：Aero/Basic
| |
| * 功能：全局毛玻璃、改进动效、优化搜索栏、infobox美化、评论区美化、深色模式。
| |
| * 版本：1.5
| |
| */
| |
| /* =========================== */
| |
| /* --- 1. 全局去蓝配色基础 --- */
| |
| /* =========================== */
| |
| :root {
| |
| --color-surface-0: #fafafa;
| |
| --color-surface-1: #ffffff;
| |
| --color-base-0: #202122;
| |
| --color-heading: #000000;
| |
| }
| |
| html.skin-theme-clientpref-night {
| |
| --color-surface-0: #1a1b1c !important;
| |
| --color-surface-1: #242526 !important;
| |
| --color-base-0: #eaecf0 !important;
| |
| --color-heading: #ffffff !important;
| |
| background-color: #1a1b1c !important;
| |
| }
| |
| /* =========================== */
| |
| /* --- 2. 通用组件毛玻璃化 --- */
| |
| /* =========================== */
| |
| .citizen-menu__card,
| |
| #citizen-preferences__card,
| |
| .citizen-sticky-header-background,
| |
| .page-actions-more__card,
| |
| .citizen-dropdown .citizen-menu__card {
| |
| background-color: rgba(255, 255, 255, 0.2) !important;
| |
| backdrop-filter: blur(14px) saturate(100%) !important;
| |
| -webkit-backdrop-filter: blur(14px) saturate(100%) !important;
| |
| border: 1px solid rgba(128, 128, 128, 0.1) !important;
| |
| border-radius: 12px !important;
| |
| }
| |
| html.skin-theme-clientpref-night .citizen-menu__card,
| |
| html.skin-theme-clientpref-night #citizen-preferences__card,
| |
| html.skin-theme-clientpref-night .citizen-command-palette {
| |
| background-color: rgba(20, 20, 20, 0.3) !important;
| |
| border: 1px solid rgba(255, 255, 255, 0.1) !important;
| |
| }
| |
| /* =========================== */
| |
| /* --- 3. 搜索面板背景遮罩 --- */
| |
| /* =========================== */
| |
| .citizen-command-palette-backdrop {
| |
| background-color: rgba(0, 0, 0, 0.2) !important;
| |
| backdrop-filter: blur(8px) !important;
| |
| -webkit-backdrop-filter: blur(8px) !important;
| |
| z-index: 9999 !important;
| |
| animation: citizen-fade-in 0.3s ease forwards;
| |
| }
| |
| /* ======================= */
| |
| /* --- 4. 搜索面板主体 --- */
| |
| /* ======================= */
| |
| .citizen-command-palette {
| |
| position: fixed !important;
| |
| width: 1000px !important;
| |
| max-width: 92vw !important;
| |
| top: 50% !important;
| |
| left: 50% !important;
| |
| z-index: 10000 !important;
| |
| isolation: isolate !important;
| |
| background-color: rgba(255, 255, 255, 0.45) !important;
| |
| backdrop-filter: blur(25px) saturate(100%) !important;
| |
| -webkit-backdrop-filter: blur(25px) saturate(100%) !important;
| |
| border-radius: 24px !important;
| |
| border: 1px solid rgba(255, 255, 255, 0.5) !important;
| |
| box-shadow: 0 40px 100px rgba(0, 0, 0, 0.25) !important;
| |
| animation: citizen-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
| |
| transform-origin: center center !important;
| |
| }
| |
| /* ================================= */
| |
| /* --- 5. 列表项布局与全填充圆角 --- */
| |
| /* ================================= */
| |
| .citizen-command-palette-list {
| |
| padding: 8px 0 !important;
| |
| }
| |
| .citizen-command-palette-list-item {
| |
| margin: 0 12px 6px 12px !important;
| |
| border-radius: 12px !important;
| |
| overflow: hidden !important;
| |
| border: none !important;
| |
| display: block !important;
| |
| transition: background-color 0.2s ease !important;
| |
| }
| |
| .citizen-command-palette-list-item__content {
| |
| display: flex !important;
| |
| padding: 12px 16px !important;
| |
| width: 100% !important;
| |
| box-sizing: border-box !important;
| |
| background: transparent !important;
| |
| color: #202122 !important;
| |
| }
| |
| .citizen-command-palette-list-item__metadata {
| |
| display: none !important;
| |
| }
| |
| .citizen-command-palette-list-item:hover,
| |
| .citizen-command-palette-list-item[aria-selected="true"] {
| |
| background-color: rgba(0, 0, 0, 0.05) !important;
| |
| }
| |
| /* ========================= */
| |
| /* --- 6. 垃圾桶按钮优化 --- */
| |
| /* ========================= */
| |
| .citizen-command-palette-list-item__actions,
| |
| .citizen-command-palette-list-item__action {
| |
| background: transparent !important;
| |
| background-color: transparent !important;
| |
| border: none !important;
| |
| box-shadow: none !important;
| |
| min-width: 32px !important;
| |
| display: flex !important;
| |
| justify-content: center !important;
| |
| align-items: center !important;
| |
| margin-left: auto !important;
| |
| }
| |
| .citizen-command-palette-list-item__action svg {
| |
| fill: #202122 !important;
| |
| opacity: 0.85 !important;
| |
| transition: all 0.2s ease !important;
| |
| }
| |
| /* 悬停状态：浅粉色背景 + 变大红图标 */
| |
| .citizen-command-palette-list-item__action:hover {
| |
| background-color: rgba(255, 192, 203, 0.6) !important;
| |
| border-radius: 8px !important;
| |
| }
| |
| .citizen-command-palette-list-item__action:hover svg {
| |
| fill: #d33 !important;
| |
| opacity: 1 !important;
| |
| transform: scale(1.15) !important;
| |
| }
| |
| /* =========================== */
| |
| /* --- 7. 搜索框与底部清理 --- */
| |
| /* =========================== */
| |
| .citizen-command-palette__search,
| |
| .citizen-command-palette__results,
| |
| .citizen-command-palette__footer,
| |
| .cdx-text-input__input {
| |
| background: transparent !important;
| |
| border: none !important;
| |
| box-shadow: none !important;
| |
| }
| |
| /* --- 动画定义 --- */
| |
| @keyframes citizen-pop-in {
| |
| 0% { opacity: 0; transform: translate(-50%, -45%) scale(0.85); }
| |
| 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
| |
| }
| |
| @keyframes citizen-fade-in {
| |
| from { opacity: 0; }
| |
| to { opacity: 1; }
| |
| }
| |
| /* ======================= */
| |
| /* --- 8. 深色模式适配 --- */
| |
| /* ======================= */
| |
| @media (prefers-color-scheme: dark) {
| |
| :root {
| |
| --color-surface-0: #1a1b1c !important;
| |
| --color-surface-1: #202122 !important;
| |
| --color-base-0: #eaecf0 !important;
| |
| --color-heading: #ffffff !important;
| |
| }
| |
| }
| |
| html.skin-theme-clientpref-night {
| |
| --color-surface-0: #1a1b1c !important;
| |
| --color-surface-1: #202122 !important;
| |
| --color-base-0: #eaecf0 !important;
| |
| --color-heading: #ffffff !important;
| |
| background-color: #1a1b1c !important;
| |
| }
| |
| html.skin-theme-clientpref-night .citizen-command-palette,
| |
| html.skin-theme-clientpref-night .citizen-menu__card,
| |
| html.skin-theme-clientpref-night .page-actions-more__card {
| |
| background-color: rgba(30, 30, 30, 0.7) !important; /* 深色半透明 */
| |
| border: 1px solid rgba(255, 255, 255, 0.1) !important; /* 微亮边框线 */
| |
| backdrop-filter: blur(20px) saturate(150%) !important;
| |
| }
| |
| html.skin-theme-clientpref-night .citizen-command-palette-list-item:hover,
| |
| html.skin-theme-clientpref-night .citizen-command-palette-list-item[aria-selected="true"] {
| |
| background-color: rgba(255, 255, 255, 0.1) !important;
| |
| }
| |
| /* =============================== */
| |
| /* --- 9. 顶部UI去圆角嵌套直角 --- */
| |
| /* =============================== */
| |
| .citizen-sticky-header-background {
| |
| border-radius: 0 !important;
| |
| left: 0 !important;
| |
| right: 0 !important;
| |
| width: 100% !important;
| |
| top: 0 !important;
| |
| border: none !important;
| |
| border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
| |
| }
| |
| .citizen-sticky-header {
| |
| border-radius: 0 !important;
| |
| }
| |
| /* ================================================ */
| |
| /* --- 10. 能效模式适配：开启后关闭毛玻璃与动画 --- */
| |
| /* ================================================ */
| |
| /* 当 html 标签包含 performance-mode...-1 时，判定为能效模式开启。此时彻底干掉毛玻璃和动画。*/
| |
| html[class*="citizen-feature-performance-mode-clientpref-1"] {
| |
| --citizen-backdrop-filter: none !important;
| |
| }
| |
| html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-menu__card,
| |
| html[class*="citizen-feature-performance-mode-clientpref-1"] #citizen-preferences__card,
| |
| html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-sticky-header-background,
| |
| html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-command-palette,
| |
| html[class*="citizen-feature-performance-mode-clientpref-1"] .page-actions-more__card {
| |
| backdrop-filter: none !important;
| |
| -webkit-backdrop-filter: none !important;
| |
| background-color: var(--color-surface-1) !important;
| |
| animation: citizen-fade-in 0.1s ease forwards !important;
| |
| }
| |
| html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-command-palette {
| |
| transform: translate(-50%, -50%) scale(1) !important;
| |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
| |
| }
| |
| .page-首页 .banner-image {
| |
| --banner-image-url: url("https://cdn.jsdelivr.net/gh/KKBlockE/BlocklandPicturebed@main/main/d49dd42343ab1bfcf4efa67f62f4ecf8.png");
| |
| --banner-image-height: 70vh;
| |
| background-image: linear-gradient(to top, var(--color-surface-0) 15%, transparent 150%), var(--banner-image-url);
| |
| background-size: cover;
| |
| background-position: top;
| |
| height: var(--banner-image-height);
| |
| margin-bottom: calc(-1 * var(--banner-image-height));
| |
| }
| |
| /* =============================================== */
| |
| /* --- 11. 标签美化：能效模式改名 Aero / Basic --- */
| |
| /* =============================================== */
| |
| label[for="skin-client-pref-citizen-feature-performance-mode-value-1"],
| |
| label[for="skin-client-pref-citizen-feature-performance-mode-value-0"] {
| |
| color: transparent !important;
| |
| position: relative !important;
| |
| min-width: 80px !important;
| |
| text-align: center !important;
| |
| }
| |
| label[for="skin-client-pref-citizen-feature-performance-mode-value-0"]::after {
| |
| content: "Aero" !important;
| |
| position: absolute !important;
| |
| left: 50% !important;
| |
| top: 50% !important;
| |
| transform: translate(-50%, -50%) !important;
| |
| color: var(--color-base-0) !important;
| |
| font-size: 0.9rem !important;
| |
| font-weight: bold !important;
| |
| visibility: visible !important;
| |
| }
| |
|
| |
|
| /* 注入 Basic */
| |
| label[for="skin-client-pref-citizen-feature-performance-mode-value-1"]::after {
| |
| content: "Basic" !important;
| |
| position: absolute !important;
| |
| left: 50% !important;
| |
| top: 50% !important;
| |
| transform: translate(-50%, -50%) !important;
| |
| color: var(--color-base-0) !important;
| |
| font-size: 0.9rem !important;
| |
| font-weight: bold !important;
| |
| visibility: visible !important;
| |
| }
| |
| .citizen-menu #skin-client-pref-citizen-feature-performance-mode-group {
| |
| }
| |
| #citizen-preferences__card .mw-portlet.mw-portlet-performance-mode-group .citizen-menu__heading,
| |
| #citizen-preferences__card .citizen-menu:nth-last-child(1) .citizen-menu__heading {
| |
| font-size: 0 !important;
| |
| }
| |
| #citizen-preferences__card .mw-portlet.mw-portlet-performance-mode-group .citizen-menu__heading::before,
| |
| #citizen-preferences__card .citizen-menu:nth-last-child(1) .citizen-menu__heading::before {
| |
| content: "主题" !important;
| |
| font-size: 0.85rem !important;
| |
| font-weight: 500 !important;
| |
| letter-spacing: 0.1em !important;
| |
| text-transform: uppercase !important;
| |
| color: var(--color-primary) !important;
| |
| visibility: visible !important;
| |
| }
| |
| /* ======================== */
| |
| /* === 12. 首页专用样式 === */
| |
| /* ======================== */
| |
| /* 创建一个全宽容器的类，用于包裹Banner */
| |
| .full-width-banner {
| |
| width: 100vw; /* 视口宽度 */
| |
| position: relative;
| |
| left: 50%;
| |
| right: 50%;
| |
| margin-left: -50vw;
| |
| margin-right: -50vw;
| |
| overflow: hidden;
| |
| /* 下面是 Banner 的高度和背景设置 */
| |
| height: 400px; /* 你想要的高度 */
| |
| background-size: cover;
| |
| background-position: center;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| color: white; /* 文字颜色 */
| |
| text-shadow: 0 2px 10px rgba(0,0,0,0.7); /* 文字阴影，防止背景太亮看不清 */
| |
| z-index: 1; /* 确保不被底层遮挡 */
| |
| background-repeat: no-repeat; /* 防止图片重复 */
| |
| background-color: #2a2a2a; /* 给一个深灰色底，图片加载失败时保底 */
| |
| }
| |
| .banner-content {
| |
| max-width: 1200px; /* 内容最大宽度，保持中间对齐 */
| |
| padding: 20px;
| |
| text-align: center;
| |
| }
| |
| /* ============================================== */
| |
| /* --- 13. 搜索组件对齐：统一搜索框与按钮高度 --- */
| |
| /* ============================================== */
| |
| .page-特殊_搜索 .oo-ui-layout.oo-ui-labelElement.oo-ui-actionFieldLayout,
| |
| .page-特殊_搜索 .oo-ui-fieldLayout.oo-ui-labelElement,
| |
| .page-特殊_搜索 .mw-widgets-titleInputWidget,
| |
| .page-特殊_搜索 .mw-widget-searchInputWidget {
| |
| max-width: none !important;
| |
| width: 100% !important;
| |
| display: flex !important;
| |
| }
| |
| .page-特殊_搜索 .mw-search-form-wrapper,
| |
| .page-特殊_搜索 #mw-search-top-table,
| |
| .page-特殊_搜索 .oo-ui-fieldLayout-field {
| |
| width: 100% !important;
| |
| max-width: none !important;
| |
| }
| |
| .page-特殊_搜索 .oo-ui-actionFieldLayout-input {
| |
| flex: 1 1 auto !important;
| |
| width: 100% !important;
| |
| }
| |
| .page-特殊_搜索 .oo-ui-actionFieldLayout-input .oo-ui-inputWidget-input {
| |
| height: 48px !important;
| |
| width: 100% !important;
| |
| padding-left: 45px !important;
| |
| border-radius: 12px 0 0 12px !important;
| |
| box-sizing: border-box !important;
| |
| }
| |
| .page-特殊_搜索 .oo-ui-actionFieldLayout-button {
| |
| flex: 0 0 auto !important;
| |
| width: auto !important;
| |
| }
| |
| .page-特殊_搜索 .oo-ui-actionFieldLayout-button .oo-ui-buttonElement-button {
| |
| height: 48px !important;
| |
| min-width: 120px !important;
| |
| padding: 0 30px !important;
| |
| border-radius: 0 12px 12px 0 !important;
| |
| box-sizing: border-box !important;
| |
| }
| |
| /* =============================================== */
| |
| /* --- 14. 菜单重排：文字 > 宽度 > 纯黑 > 颜色 --- */
| |
| /* =============================================== */
| |
|
| |
| /* 激活容器布局 */
| |
| #citizen-preferences-content {
| |
| display: flex !important;
| |
| flex-direction: column !important;
| |
| }
| |
| /* 1. 文字 */
| |
| #skin-client-prefs-citizen-feature-custom-font-size {
| |
| order: 1 !important;
| |
| }
| |
| /* 2. 宽度 */
| |
| #skin-client-prefs-citizen-feature-custom-width {
| |
| order: 2 !important;
| |
| }
| |
| /* 3. 纯黑模式 (移动到颜色上方) */
| |
| #skin-client-prefs-citizen-feature-pure-black {
| |
| order: 3 !important;
| |
| }
| |
| /* 4. 颜色 (移动到纯黑下方) */
| |
| #skin-client-prefs-skin-theme {
| |
| order: 4 !important;
| |
| }
| |
| /* 5. 自动隐藏导航 */
| |
| #skin-client-prefs-citizen-feature-autohide-navigation {
| |
| order: 5 !important;
| |
| }
| |
| /* 6. 效能模式 (Aero/Basic) */
| |
| #skin-client-prefs-citizen-feature-performance-mode {
| |
| order: 6 !important;
| |
| }
| |
| /* ========================================== */
| |
| /* --- 15. Infobox 信息框 Aero & 深色适配 --- */
| |
| /* ========================================== */
| |
| .infobox {
| |
| background: var(--color-surface-1) !important;
| |
| color: var(--color-base-0) !important;
| |
| border: 1px solid rgba(128, 128, 128, 0.3) !important;
| |
| border-radius: 12px !important;
| |
| overflow: hidden !important;
| |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
| |
| backdrop-filter: blur(10px);
| |
| border-collapse: separate !important;
| |
| border-spacing: 0 !important;
| |
| }
| |
| .infobox th,
| |
| .infobox td {
| |
| background-color: transparent !important;
| |
| color: var(--color-base-0) !important;
| |
| padding: 8px 5px !important;
| |
| line-height: 1.4 !important;
| |
| border-top: none !important;
| |
| }
| |
| .infobox tr:not(:last-child) th,
| |
| .infobox tr:not(:last-child) td {
| |
| border-bottom: 1px solid rgba(128, 128, 128, 0.15) !important;
| |
| }
| |
| .infobox th[colspan="2"] {
| |
| background-color: var(--color-primary-opacity-10, rgba(54, 121, 204, 0.1)) !important;
| |
| color: var(--color-primary, #36c) !important;
| |
| }
| |
| .infobox th.fn {
| |
| padding: 15px 10px !important;
| |
| border-top: none !important;
| |
| }
| |
| .infobox td[colspan="2"] { padding: 10px 0 !important; }
| |
| .infobox th[scope="row"] { padding-right: 15px !important; min-width: 80px !important; }
| |
| .infobox tr:first-child th,
| |
| .infobox tr:first-child td {
| |
| border-top-left-radius: 12px !important;
| |
| border-top-right-radius: 12px !important;
| |
| }
| |
| html.skin-theme-clientpref-night .infobox {
| |
| background: rgba(30, 30, 30, 0.7) !important;
| |
| border: 1px solid rgba(255, 255, 255, 0.1) !important;
| |
| }
| |
| html.skin-theme-clientpref-night .infobox tr:not(:last-child) th,
| |
| html.skin-theme-clientpref-night .infobox tr:not(:last-child) td {
| |
| border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
| |
| }
| |
| .infobox .mw-file-description img { background: transparent !important; }
| |
| .infobox div[style*="font-size: 90%"] { margin-top: 5px !important; opacity: 0.8; }
| |
| /* ======================================== */
| |
| /* === 16. SocialProfile 现代化美化补丁 === */
| |
| /* ======================================== */
| |
| /* 1. 暴力重置最外层容器，把它变成一个大卡片 */
| |
| .profile-info,
| |
| #UserProfileMasthead {
| |
| display: block !important; /* 强制取消表格属性 */
| |
| background-color: var(--color-surface-2) !important;
| |
| border: 1px solid var(--border-color-base) !important;
| |
| border-radius: var(--border-radius-base) !important;
| |
| padding: 24px !important;
| |
| margin-bottom: 20px;
| |
| box-shadow: var(--box-shadow-card);
| |
| position: relative; /* 为绝对定位元素做参照 */
| |
| overflow: hidden; /* 防止圆角溢出 */
| |
| }
| |
| /* 2. 隐藏原本杂乱的表格结构，让内容“流”出来 */
| |
| .profile-info tbody,
| |
| .profile-info tr,
| |
| .profile-info td {
| |
| display: block !important;
| |
| border: none !important;
| |
| padding: 0 !important;
| |
| background: transparent !important;
| |
| width: auto !important; /* 取消表格宽度限制 */
| |
| }
| |
| /* 3. 专门修正左侧头像区域 */
| |
| .profile-info td:first-child {
| |
| float: left; /* 让头像浮动到左边 */
| |
| margin-right: 20px;
| |
| margin-bottom: 10px;
| |
| text-align: center;
| |
| }
| |
| /* 4. 头像美化 (变圆 + 边框) */
| |
| .profile-info img,
| |
| .user-profile-image img {
| |
| border-radius: 50% !important;
| |
| width: 100px !important; /* 强制固定头像大小 */
| |
| height: 100px !important;
| |
| object-fit: cover;
| |
| border: 3px solid var(--color-surface-1) !important;
| |
| box-shadow: 0 4px 8px rgba(0,0,0,0.1);
| |
| }
| |
| /* 5. 修正右侧内容区域 */
| |
| .profile-info td:last-child {
| |
| /* 这里放名字、链接和简介 */
| |
| padding-left: 0 !important;
| |
| }
| |
| /* 6. 用户名 (KK) 放大并加粗 */
| |
| .profile-name,
| |
| .user-profile-top-name,
| |
| .profile-info h1,
| |
| .profile-info font[size="6"] { /* 兼容老旧的 font 标签 */
| |
| font-size: 2rem !important;
| |
| font-weight: 800 !important;
| |
| color: var(--color-text-primary) !important;
| |
| font-family: var(--font-family-heading) !important;
| |
| line-height: 1.2;
| |
| display: block;
| |
| margin-bottom: 8px;
| |
| }
| |
| /* 7. 那一排操作链接 (编辑个人资料 | 上传头像...) */
| |
| .profile-links,
| |
| .profile-info a {
| |
| color: var(--color-text-secondary) !important;
| |
| font-size: 0.9rem;
| |
| text-decoration: none;
| |
| margin-right: 5px;
| |
| }
| |
| .profile-info a:hover {
| |
| color: var(--color-primary) !important;
| |
| text-decoration: underline;
| |
| }
| |
| /* 8. 简介文字 (大家好啊我是...) */
| |
| .profile-bio,
| |
| .user-profile-bio {
| |
| margin-top: 15px !important;
| |
| padding: 10px !important;
| |
| background: var(--color-surface-1) !important;
| |
| border-radius: var(--border-radius-small);
| |
| color: var(--color-text-primary);
| |
| line-height: 1.6;
| |
| clear: both; /* 确保在头像下方或者旁边 */
| |
| }
| |
| /* 9. !!! 重点修正：那个丑陋的橙色“使用社交用户页”按钮 !!! */
| |
| div[style*="background-color:#FFCE28"], /* 尝试捕捉那个写死颜色的 div */
| |
| .profile-switch-button,
| |
| input[type="button"][value*="社交"] {
| |
| background-color: var(--color-primary) !important;
| |
| color: var(--color-primary-text) !important;
| |
| border: none !important;
| |
| border-radius: 20px !important; /* 胶囊按钮 */
| |
| padding: 8px 16px !important;
| |
| font-weight: bold;
| |
| cursor: pointer;
| |
| box-shadow: 0 2px 4px rgba(0,0,0,0.2);
| |
| /* 如果它原来是绝对定位，我们要调整它 */
| |
| position: absolute !important;
| |
| top: 20px;
| |
| right: 20px;
| |
| }
| |
| /* 10. 顶部的小字统计 (766次编辑...) */
| |
| .profile-stats-top {
| |
| font-size: 0.85rem;
| |
| color: var(--color-text-faint);
| |
| margin-bottom: 5px;
| |
| }
| |
| /* ============================================ */
| |
| /* --- 17. Infobox 标题卡片化补丁 (与主体分离) --- */
| |
| /* ============================================ */
| |
| .infobox {
| |
| display: flex !important; /* 核心：将 table 改为 flex 布局 */
| |
| flex-direction: column !important; /* 让标题和主体纵向排列 */
| |
| border: none !important; /* 移除 table 最外层边框，防止包裹标题 */
| |
| background: transparent !important; /* 容器透明 */
| |
| box-shadow: none !important;
| |
| }
| |
|
| |
| /* 2. 重新定义标题卡片 */
| |
| .infobox .infobox-title {
| |
| display: block !important;
| |
| order: -1 !important; /* 确保标题在最上面 */
| |
| width: 100% !important; /* 填满父容器宽度 */
| |
| box-sizing: border-box !important;
| |
|
| |
| /* 分离感：制造向下间距 */
| |
| margin: 0 0 12px 0 !important;
| |
| padding: 16px 12px !important;
| |
|
| |
| /* 样式美化 */
| |
| border-radius: 12px !important; /* 完整的独立圆角 */
| |
| border: 1px solid rgba(128, 128, 128, 0.3) !important;
| |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
| |
|
| |
| /* 排版 */
| |
| text-align: center !important;
| |
| line-height: 1.5 !important;
| |
| font-size: 1.2rem !important;
| |
| }
| |
|
| |
| /* 3. 还原 Section 15 写死的主体样式 */
| |
| /* 因为父级改成了 flex，我们要确保 tbody 依然像个表格一样工作 */
| |
| .infobox tbody {
| |
| display: table !important;
| |
| width: 100% !important;
| |
| /* 继承你在 Section 15 设置的样式 */
| |
| border: 1px solid rgba(128, 128, 128, 0.3) !important;
| |
| border-radius: 12px !important;
| |
| overflow: hidden !important;
| |
| background: var(--color-surface-1) !important;
| |
| }
| |
|
| |
| /* 4. 处理图片和内部 span */
| |
| .infobox-title span {
| |
| display: block !important;
| |
| width: 100% !important;
| |
| }
| |
| /* ============================================ */
| |
| /* --- 18. 暗色模式下的 Infobox 标题自动变暗 --- */
| |
| /* ============================================ */
| |
|
| |
| html.skin-theme-clientpref-night .infobox .infobox-title {
| |
| /* 核心逻辑：使用滤镜降低亮度和饱和度 */
| |
| /* brightness(0.8) 让颜色变暗，contrast(1.2) 保持文字清晰度 */
| |
| filter: brightness(1) contrast(0.5) !important;
| |
|
| |
| /* 确保文字颜色在深色背景下依然可见 */
| |
| color: #ffffff !important;
| |
| text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
| |
|
| |
| /* 可选：增加半透明感，使其更好地融入暗色背景 */
| |
| opacity: 0.9;
| |
| }
| |
|
| |
| /* 如果标题是通过 background-color 属性设置的（针对 Inline Style） */
| |
| html.skin-theme-clientpref-night .infobox .infobox-title[style*="background"] {
| |
| /* 强行压低背景颜色的明度，但保留色相 */
| |
| background-blend-mode: multiply !important;
| |
| background-color: rgba(0, 0, 0, 0.4) !important;
| |
| }
| |
|
| |
| /* 适配能效模式（Basic）：如果关闭了滤镜，直接回退到深灰色 */
| |
| html[class*="citizen-feature-performance-mode-clientpref-1"].skin-theme-clientpref-night .infobox .infobox-title {
| |
| filter: none !important;
| |
| background-color: #2a2a2a !important;
| |
| color: #eaecf0 !important;
| |
| }
| |
| /* =========================================== */
| |
| /* --- 19. 通知中心 (Echo UI) 毛玻璃与动效 --- */
| |
| /* =========================================== */
| |
| .mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
| |
| animation: aero-basic-in 0.3s cubic-bezier(0.1, 0.9, 0.2, 1) forwards !important;
| |
| background: transparent !important;
| |
| border: none !important;
| |
| box-shadow: none !important;
| |
| }
| |
| .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup {
| |
| background-color: rgba(255, 255, 255, 0.85) !important;
| |
| border: 1px solid rgba(255, 255, 255, 0.9) !important;
| |
| border-radius: 16px !important;
| |
| box-shadow:
| |
| 0 8px 32px rgba(0, 0, 0, 0.12),
| |
| 0 1px 2px rgba(0, 0, 0, 0.05) !important;
| |
| overflow: hidden !important;
| |
| }
| |
| html.skin-theme-clientpref-night .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup {
| |
| background-color: rgba(30, 30, 30, 0.8) !important;
| |
| border: 1px solid rgba(255, 255, 255, 0.1) !important;
| |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
| |
| }
| |
| .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-head,
| |
| .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-body,
| |
| .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-footer,
| |
| .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-clippableElement-clippable,
| |
| .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .mw-echo-ui-notificationsListWidget,
| |
| .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .mw-echo-ui-placeholderItemWidget {
| |
| background: transparent !important;
| |
| background-color: transparent !important;
| |
| border-color: rgba(0, 0, 0, 0.05) !important;
| |
| }
| |
| .mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-buttonElement-button {
| |
| background-color: rgba(255, 255, 255, 0.5) !important;
| |
| border: 1px solid rgba(0, 0, 0, 0.1) !important;
| |
| border-radius: 8px !important;
| |
| transition: all 0.2s ease !important;
| |
| }
| |
| .mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-buttonElement-button:hover {
| |
| background-color: #ffffff !important;
| |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
| |
| }
| |
| @keyframes aero-basic-in {
| |
| from {
| |
| opacity: 0;
| |
| margin-top: -12px;
| |
| }
| |
| to {
| |
| opacity: 1;
| |
| margin-top: 0;
| |
| }
| |
| }
| |
| .mw-echo-ui-notificationItemWidget {
| |
| background: transparent !important;
| |
| transition: background 0.2s !important;
| |
| }
| |
| .mw-echo-ui-notificationItemWidget:hover {
| |
| background-color: rgba(0, 0, 0, 0.03) !important;
| |
| }
| |
| /* ============================================ */
| |
| /* --- 20. 首页专属：最后修改时间 Aero 挂件 --- */
| |
| /* ============================================ */
| |
| .page-首页 #citizen-sidebar-lastmod {
| |
| /* 彻底移除默认样式 */
| |
| background: none !important;
| |
| background-color: rgba(255, 255, 255, 0.25) !important;
| |
| border: none !important;
| |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
| |
|
| |
| /* 毛玻璃核心 */
| |
| backdrop-filter: blur(12px) saturate(100%) !important;
| |
| -webkit-backdrop-filter: blur(12px) saturate(100%) !important;
| |
|
| |
| /* 布局优化 */
| |
| border-radius: 12px !important;
| |
| padding: 12px !important;
| |
| margin-top: 15px !important;
| |
| width: fit-content !important;
| |
| }
| |
| html.skin-theme-clientpref-night.page-首页 #citizen-sidebar-lastmod {
| |
| background-color: rgba(30, 30, 30, 0.4) !important;
| |
| border: 1px solid rgba(255, 255, 255, 0.05) !important;
| |
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) !important;
| |
| }
| |
| .page-首页 #citizen-sidebar-lastmod .citizen-menu__heading {
| |
| padding: 0 !important;
| |
| margin: 0 0 6px 0 !important;
| |
| border: none !important;
| |
| background: none !important;
| |
| color: var(--color-primary, #36c) !important;
| |
| font-size: 0.75rem !important;
| |
| letter-spacing: 0.05em;
| |
| }
| |
| .page-首页 #citizen-sidebar-lastmod .citizen-menu__content-list {
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| list-style: none !important;
| |
| }
| |
| .page-首页 #citizen-sidebar-lastmod #citizen-lastmod-relative {
| |
| text-decoration: none !important;
| |
| color: var(--color-base-0) !important;
| |
| font-weight: 500;
| |
| }
| |
| .page-首页 #citizen-sidebar-lastmod::before,
| |
| .page-首页 #citizen-sidebar-lastmod::after {
| |
| display: none !important;
| |
| }
| |
