/* * 旧时光俱乐部 —— 皮肤站全站手帐样式 * * 目的 * -------------------------------------------------------------------------- * 皮肤站（mc.oldtimes.club）原来是一套白底 Bootstrap/AdminLTE： * 白背景、灰卡片、蓝色按钮 —— 和 oldtimes.club 那本「深色手帐」完全两套语言。 * 登录页已经单独做过了（oldtimes-auth.css），这份把剩下的页面补齐： * 首页、皮肤库、用户中心、上传页等等。 * * 配色不另起一套 * -------------------------------------------------------------------------- * 直接用登录页那份令牌（--otm-paper / --otm-ink / --otm-grass ...）， * 保证两边是同一张纸、同一支笔。 * * 与 oldtimes-brand.css 的分工 * -------------------------------------------------------------------------- * oldtimes-brand.css 只管站名那根竖线的字体 * oldtimes-skin.css 其余全部（这份） * * 覆盖策略 * -------------------------------------------------------------------------- * AdminLTE 的规则优先级不低，而插件样式表排在主题样式表**前面** —— * 所以关键处一律 !important。这是这个站既有的做法（登录页那份也这么写）。 */ :root { --otm-workbench: #252421; --otm-workbench-line: rgba(255, 246, 232, .045); --otm-paper: #f7f3ea; --otm-paper-deep: #ebe3d4; --otm-ink: #2e2a26; --otm-ink-soft: #70675e; --otm-grass: #52a535; --otm-grass-dark: #2a641c; --otm-grass-light: #86d562; --otm-shadow: 0 2px 0 rgba(0, 0, 0, .34), 0 8px 18px -10px rgba(0, 0, 0, .55); } /* ========================================================================== 1 台面：深色工作台 + 淡格线 -------------------------------------------------------------------------- 登录页就是这么铺的，其余页面照抄 —— 这样从头到尾是一张桌子。 ========================================================================== */ body:not(.login-page) { background-color: var(--otm-workbench) !important; background-image: linear-gradient(90deg, var(--otm-workbench-line) 1px, transparent 1px), linear-gradient(180deg, var(--otm-workbench-line) 1px, transparent 1px) !important; background-size: 28px 28px !important; color: var(--otm-ink); font-family: "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; } /* 顶栏：压深一点，和台面区分开 */ .main-header.navbar { background-color: rgba(20, 19, 17, .96) !important; border-bottom: 1px solid rgba(0, 0, 0, .55); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .9); } /* 页脚 */ .main-footer { background-color: transparent !important; border-top: 1px dashed rgba(255, 246, 232, .12) !important; color: rgba(246, 232, 206, .55) !important; } .main-footer a { color: var(--otm-grass-light) !important; } /* ========================================================================== 2 纸：内容区就是那张纸 ========================================================================== */ .content-wrapper { background-color: transparent !important; } /* 面板 / 卡片 → 纸 */ .card, .box, .card-body, .box-body, .card-header, .box-header, .card-footer, .box-footer { background-color: var(--otm-paper) !important; color: var(--otm-ink) !important; } .card, .box { border: 1px solid rgba(0, 0, 0, .34) !important; border-radius: 2px !important; box-shadow: 12px 14px 0 rgba(0, 0, 0, .28) !important; overflow: visible; } .card-header, .box-header { border-bottom: 1px solid rgba(0, 0, 0, .14) !important; font-weight: 800; } /* 卡片顶上那道上沿胶带 —— 首页与登录页都用它，这里也补上 */ .card::before, .box::before { content: ""; position: absolute; top: -10px; left: 16px; right: 16px; height: 20px; background-image: repeating-linear-gradient( 90deg, var(--otm-grass-light) 0 18px, var(--otm-grass) 18px 36px, var(--otm-grass-dark) 36px 44px ); box-shadow: 0 4px 0 rgba(42, 100, 28, .4); pointer-events: none; } /* 卡片之间留出胶带的位置 */ .card, .box { margin-top: 14px; } /* ========================================================================== 3 文字 ========================================================================== */ .content-wrapper h1, .content-wrapper h2, .content-wrapper h3, .content-wrapper h4, .content-wrapper h5, .content-wrapper .content-header, .content-wrapper .card-title, .content-wrapper .box-title { color: var(--otm-ink) !important; } .content-wrapper .text-muted, .content-wrapper small, .content-wrapper .description-block > .description-text { color: var(--otm-ink-soft) !important; } .content-wrapper a:not(.btn):not(.nav-link):not(.navbar-brand) { color: var(--otm-grass-dark) !important; text-decoration: underline; text-decoration-color: rgba(42, 100, 28, .4); text-underline-offset: 3px; } /* 台面上的标题（不在纸里，比如「Skin Library」那行）写成浅色 */ .content-header h1, .content-header h2 { color: var(--otm-paper) !important; text-shadow: 3px 3px 0 rgba(0, 0, 0, .38); } /* 面包屑 */ .breadcrumb { background-color: rgba(252, 245, 241, .06) !important; border: 1px dashed rgba(255, 246, 232, .14); border-radius: 2px; } .breadcrumb-item, .breadcrumb-item a { color: var(--otm-grass-light) !important; } .breadcrumb-item.active { color: rgba(246, 232, 206, .7) !important; } /* ========================================================================== 4 按钮：纸签 ========================================================================== */ .btn { border-radius: 2px !important; font-weight: 700 !important; letter-spacing: .04em; text-shadow: none !important; } .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-secondary, .btn-default, .btn-outline-primary, .btn-outline-secondary { background-color: var(--otm-paper) !important; background-image: linear-gradient(180deg, #fdfbf6 0%, #efe8d9 100%) !important; border: 1px solid rgba(0, 0, 0, .3) !important; color: var(--otm-ink) !important; box-shadow: 0 3px 0 rgba(0, 0, 0, .34) !important; } /* 主操作：荧光笔压在字下面 —— 与网页端「上传」按钮同一套做法 */ .btn-primary::after, .btn-success::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 6px; height: 8px; z-index: -1; background: linear-gradient(90deg, rgba(108, 195, 73, .66), rgba(134, 213, 98, .46)); transform: rotate(-.8deg); pointer-events: none; } .btn-primary, .btn-success { position: relative; z-index: 0; } .btn:hover, .btn:focus { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(0, 0, 0, .36) !important; } .btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, .4) !important; } /* ========================================================================== 5 表单：纸上画的横线格 ========================================================================== */ .form-control, .custom-select, .input-group-text { background-color: #fffdf8 !important; background-image: repeating-linear-gradient( 180deg, transparent 0 25px, rgba(120, 100, 70, .1) 25px 26px ) !important; border: 1px solid rgba(0, 0, 0, .22) !important; border-radius: 2px !important; color: var(--otm-ink) !important; box-shadow: none !important; } .form-control:focus, .custom-select:focus { border-color: var(--otm-grass) !important; box-shadow: 0 0 0 3px rgba(108, 195, 73, .22) !important; } .form-control::placeholder { color: #91887f !important; } label { color: var(--otm-ink) !important; font-weight: 700; } /* ========================================================================== 6 表格 ========================================================================== */ .table { color: var(--otm-ink) !important; background-color: transparent !important; } .table thead th { border-bottom: 2px solid rgba(0, 0, 0, .18) !important; color: var(--otm-ink) !important; } .table td, .table th { border-color: rgba(0, 0, 0, .1) !important; } .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(120, 100, 70, .05) !important; } /* ========================================================================== 7 标签与徽章：小纸片 ========================================================================== */ .badge, .label { padding: 3px 8px !important; background-color: var(--otm-paper-deep) !important; border: 1px solid rgba(0, 0, 0, .22); border-radius: 2px !important; color: var(--otm-ink) !important; font-weight: 700 !important; box-shadow: 0 1px 0 rgba(0, 0, 0, .25); } /* ========================================================================== 8 皮肤库：一格一张白框相片 -------------------------------------------------------------------------- 原来每格是一块浅灰方块。改成白框 —— 与 oldtimes.club 美好瞬间页同一套做法： 四周留白、投一层软影、悬停抬起。 ========================================================================== */ .skin-card, .skin-card-wrapper, .skinlib-item, div[class*="skin"] > .card, .item { background-color: #fff !important; border: 1px solid rgba(0, 0, 0, .26) !important; border-radius: 2px !important; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .85), 0 2px 5px rgba(0, 0, 0, .35) !important; transition: transform .2s ease, box-shadow .2s ease; } .skin-card:hover, .skinlib-item:hover, .item:hover { transform: translateY(-4px) !important; box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .9), 0 4px 10px rgba(0, 0, 0, .4) !important; } /* 皮肤预览底：淡淡一层格，像方格纸 */ .skin-preview, .skin-card img, .skinlib-item img { background-color: #fbfaf7 !important; background-image: linear-gradient(90deg, rgba(120, 100, 70, .07) 1px, transparent 1px), linear-gradient(180deg, rgba(120, 100, 70, .07) 1px, transparent 1px); background-size: 10px 10px; image-rendering: pixelated; } /* ========================================================================== 9 分页与标签页 ========================================================================== */ .page-link { background-color: var(--otm-paper) !important; border: 1px solid rgba(0, 0, 0, .3) !important; color: var(--otm-ink) !important; border-radius: 2px !important; margin: 0 3px; box-shadow: 0 2px 0 rgba(0, 0, 0, .3); } .page-item.active .page-link { background-image: linear-gradient(180deg, rgba(134, 213, 98, .95), rgba(108, 195, 73, .95)) !important; border-color: var(--otm-grass-dark) !important; color: #1d2b14 !important; font-weight: 800; } .nav-tabs .nav-link { background-color: rgba(252, 245, 241, .06) !important; border: 1px solid rgba(255, 246, 232, .12) !important; border-radius: 2px 2px 0 0 !important; color: rgba(246, 232, 206, .8) !important; } .nav-tabs .nav-link.active { background-color: var(--otm-paper) !important; border-color: rgba(0, 0, 0, .3) !important; color: var(--otm-ink) !important; font-weight: 800; } /* ========================================================================== 10 下拉菜单 ========================================================================== */ .dropdown-menu { background-color: var(--otm-paper) !important; border: 1px solid rgba(0, 0, 0, .34) !important; border-radius: 2px !important; box-shadow: 8px 10px 0 rgba(0, 0, 0, .3) !important; } .dropdown-item { color: var(--otm-ink) !important; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--otm-paper-deep) !important; color: var(--otm-ink) !important; } .dropdown-divider { border-top-color: rgba(0, 0, 0, .14) !important; } /* ========================================================================== 11 弹窗 ========================================================================== */ .modal-content { background-color: var(--otm-paper) !important; border: 1px solid rgba(0, 0, 0, .4) !important; border-radius: 2px !important; box-shadow: 14px 16px 0 rgba(0, 0, 0, .35) !important; } .modal-header, .modal-footer { border-color: rgba(0, 0, 0, .14) !important; } /* ========================================================================== 12 无障碍：焦点可见 ========================================================================== */ .content-wrapper :focus-visible, .main-header :focus-visible { outline: 3px solid var(--otm-grass-light); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .btn, .skin-card, .skinlib-item, .item { transition: none !important; } } /* ========================================================================== 13 修正：胶带只贴最外那层纸 -------------------------------------------------------------------------- 上面第 2 节给所有 .card 都加了上沿胶带 —— 但皮肤库里**每一格皮肤本身也是 .card** （框架用 CSS-in-JS 生成的，类名带 css- 前缀），结果每一格都贴了一道， 满屏绿条纹，比原来还乱。 胶带是用来「固定这一页纸」的，一层就够；里面的小卡片不该再贴。 所以：带 css- 前缀的 .card 不贴胶带，改成白框相片 —— 与 oldtimes.club 美好瞬间页的相片卡同一套做法。 ========================================================================== */ .card[class*="css-"]::before, .box[class*="css-"]::before { content: none !important; display: none !important; } /* 皮肤格：白框相片 */ .card[class*="css-"] { margin-top: 0 !important; background-color: #fff !important; border: 1px solid rgba(0, 0, 0, .26) !important; border-radius: 2px !important; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .85), 0 2px 5px rgba(0, 0, 0, .35) !important; transform: rotate(var(--otm-rot, 0deg)); transition: transform .2s ease, box-shadow .2s ease !important; } /* 三张一组换一个角度 —— 与网页端相片卡同一套做法 */ .card[class*="css-"]:nth-of-type(3n+1) { --otm-rot: -.7deg; } .card[class*="css-"]:nth-of-type(3n+2) { --otm-rot: .55deg; } .card[class*="css-"]:nth-of-type(3n) { --otm-rot: -.3deg; } .card[class*="css-"]:hover { transform: rotate(0deg) translateY(-5px) !important; box-shadow: 0 20px 34px -16px rgba(0, 0, 0, .95), 0 5px 12px rgba(0, 0, 0, .45) !important; } /* 纸面下面那条页脚（名字 + 标签）也保持白，别和上面对不上 */ .card[class*="css-"] > .card-footer { background-color: transparent !important; border-top: 1px solid rgba(0, 0, 0, .1) !important; } /* ========================================================================== 14 修正：AdminLTE 的背景色工具类 -------------------------------------------------------------------------- 上面第 4 节按 .btn-primary / .btn-success 这些**语义类**覆盖按钮， 但站里实际用的是 AdminLTE 的**背景色工具类**： bg-* 是直接设 background-color 的，优先级不低于 .btn-success， 所以那排按钮一直是原来的绿色。 用 [class*="bg-"] 一次覆盖所有这类工具类 —— 以后换成 bg-navy、bg-maroon 也一样。 ========================================================================== */ .btn[class*="bg-"], .btn-group > .btn[class*="bg-"] { background-color: var(--otm-paper) !important; background-image: linear-gradient(180deg, #fdfbf6 0%, #efe8d9 100%) !important; border: 1px solid rgba(0, 0, 0, .3) !important; color: var(--otm-ink) !important; box-shadow: 0 3px 0 rgba(0, 0, 0, .34) !important; } /* 按钮组里首尾两端的圆角按纸签来 */ .btn-group > .btn:first-child { border-radius: 2px 0 0 2px !important; } .btn-group > .btn:last-child { border-radius: 0 2px 2px 0 !important; } /* 选中态：荧光笔 —— 与网页端选中的年份标签同一套做法 */ .btn[class*="bg-"].active, .btn[class*="bg-"]:active, .btn-group > .btn[class*="bg-"].active { background-image: linear-gradient(180deg, rgba(134, 213, 98, .95), rgba(108, 195, 73, .95)) !important; border-color: var(--otm-grass-dark) !important; color: #1d2b14 !important; font-weight: 800 !important; } /* ========================================================================== 15 描边按钮（首页那个 Register Now） -------------------------------------------------------------------------- 首页是整屏大图，上面只有一个按钮，用的是 .btn-outline-* —— 在照片底上是一条细白框，和手帐纸签不是一套。 一并做成纸签：米色纸、深墨字、投影。 ========================================================================== */ .btn[class*="btn-outline"] { background-color: var(--otm-paper) !important; background-image: linear-gradient(180deg, #fdfbf6 0%, #efe8d9 100%) !important; border: 1px solid rgba(0, 0, 0, .32) !important; color: var(--otm-ink) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 4px 0 rgba(0, 0, 0, .36), 0 12px 24px -12px rgba(0, 0, 0, .8) !important; } .btn[class*="btn-outline"]:hover, .btn[class*="btn-outline"]:focus { background-color: #fdfbf6 !important; color: var(--otm-ink) !important; transform: translateY(-2px); } /* ========================================================================== 16 控制台：左侧边栏 + 统计块 -------------------------------------------------------------------------- 反馈：登录后的控制台也要改成手帐。 侧栏原来是 AdminLTE 的深色菜单：条目是暗底浅字，当前项是一块**蓝色**高亮。 这里的做法和站点其它地方一致： · 侧栏本身是台面（比内容区更深），条目是**贴在台面上的纸签** · 当前项不涂蓝块，改用**荧光笔** —— 和网页端选中的年份标签同一招 · 分组标题（用户中心 / 浏览 / 管理）做成**小纸条** · 用户那块做成一张压着胶带的纸 注意：全部限定在 .main-sidebar 里 —— .nav-link 顶栏也在用， 不限定的话会把顶部导航一起带偏。 ========================================================================== */ /* 侧栏：台面 */ .main-sidebar { background-color: #1c1b19 !important; border-right: 1px solid rgba(0, 0, 0, .55) !important; box-shadow: 6px 0 20px -10px rgba(0, 0, 0, .9) !important; } /* 顶部那条站名：做成一条纸 */ .main-sidebar .brand-link { background-color: var(--otm-paper) !important; background-image: linear-gradient(180deg, #fdfbf6 0%, #efe8d9 100%) !important; border-bottom: 1px solid rgba(0, 0, 0, .35) !important; box-shadow: 0 4px 8px -4px rgba(0, 0, 0, .8) !important; } .main-sidebar .brand-link .brand-text { color: var(--otm-ink) !important; font-weight: 800 !important; letter-spacing: .02em; text-shadow: none !important; } /* 用户那块：一张纸 + 上沿胶带 */ .main-sidebar .user-panel { position: relative; margin: 14px 10px 6px; padding: 10px 12px; background-color: var(--otm-paper) !important; border: 1px solid rgba(0, 0, 0, .34); border-radius: 2px; box-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 10px 20px -12px rgba(0, 0, 0, .9); } .main-sidebar .user-panel::before { content: ""; position: absolute; top: -8px; left: 50%; width: 64px; height: 16px; transform: translateX(-50%) rotate(-2.4deg); background-image: repeating-linear-gradient( 90deg, rgba(134, 213, 98, .55) 0 9px, rgba(160, 224, 129, .38) 9px 18px ); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); pointer-events: none; } .main-sidebar .user-panel .info a, .main-sidebar .user-panel .info p, .main-sidebar .user-panel .info .d-block { color: var(--otm-ink) !important; font-weight: 700; } /* 分组标题（用户中心 / 浏览 / 管理）：小纸条 */ .main-sidebar .nav-header { display: inline-block; margin: 16px 0 8px 12px; padding: 2px 10px; background-color: var(--otm-paper) !important; border: 1px solid rgba(0, 0, 0, .3); border-radius: 2px; box-shadow: 0 2px 0 rgba(0, 0, 0, .34); color: var(--otm-ink) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .12em; text-transform: none !important; transform: rotate(-.9deg); } .main-sidebar .nav-header:nth-of-type(2n) { transform: rotate(.8deg); } /* 菜单项：纸签 */ .main-sidebar .nav-sidebar .nav-item > .nav-link { position: relative; z-index: 0; margin: 3px 8px; padding: 8px 12px; background-color: var(--otm-paper) !important; background-image: repeating-linear-gradient(180deg, rgba(120, 100, 70, .03) 0 1px, transparent 1px 3px), linear-gradient(180deg, #fdfbf6 0%, #efe8d9 100%) !important; border: 1px solid rgba(0, 0, 0, .28); border-radius: 2px; color: var(--otm-ink) !important; font-weight: 700; box-shadow: 0 2px 0 rgba(0, 0, 0, .34); transform: rotate(var(--otm-nav-rot, 0deg)); transition: transform .18s ease, box-shadow .18s ease; } /* 三张一组换角度 */ .main-sidebar .nav-sidebar .nav-item:nth-of-type(3n+1) > .nav-link { --otm-nav-rot: -.6deg; } .main-sidebar .nav-sidebar .nav-item:nth-of-type(3n+2) > .nav-link { --otm-nav-rot: .5deg; } .main-sidebar .nav-sidebar .nav-item:nth-of-type(3n) > .nav-link { --otm-nav-rot: -.25deg; } .main-sidebar .nav-sidebar .nav-item > .nav-link:hover, .main-sidebar .nav-sidebar .nav-item > .nav-link:focus { background-color: #fdfbf6 !important; color: var(--otm-ink) !important; transform: rotate(0deg) translateY(-2px); box-shadow: 0 4px 0 rgba(0, 0, 0, .36); } /* 当前项：荧光笔，不是蓝块 */ .main-sidebar .nav-sidebar .nav-item > .nav-link.active { background-color: var(--otm-paper) !important; background-image: linear-gradient(180deg, #fdfbf6 0%, #efe8d9 100%) !important; color: var(--otm-ink) !important; box-shadow: 0 2px 0 rgba(0, 0, 0, .34); } .main-sidebar .nav-sidebar .nav-item > .nav-link.active::after { content: ""; position: absolute; left: 30px; right: 10px; bottom: 5px; height: 11px; z-index: -1; background: linear-gradient(90deg, rgba(108, 195, 73, .72), rgba(134, 213, 98, .5)); transform: rotate(-.8deg); pointer-events: none; } /* 图标跟着墨色走 */ .main-sidebar .nav-sidebar .nav-link .nav-icon { color: var(--otm-ink-soft) !important; } .main-sidebar .nav-sidebar .nav-link.active .nav-icon { color: var(--otm-grass-dark) !important; } /* 徽章（比如那个 STAFF）已经由第 7 节做成纸片 */ /* ========================================================================== 17 统计块（使用情况那三块） -------------------------------------------------------------------------- 原来是绿 / 粉的实心大色块，非常跳。改成纸 + 一枚彩色的图标圆片 —— 数字仍要一眼看清，但整页回到同一张纸上。 ========================================================================== */ .small-box, .info-box { position: relative; background-color: var(--otm-paper) !important; background-image: repeating-linear-gradient(180deg, rgba(120, 100, 70, .03) 0 1px, transparent 1px 3px), linear-gradient(180deg, #fdfbf6 0%, #efe8d9 100%) !important; border: 1px solid rgba(0, 0, 0, .3) !important; border-radius: 2px !important; color: var(--otm-ink) !important; box-shadow: 0 4px 0 rgba(0, 0, 0, .34), 0 12px 24px -14px rgba(0, 0, 0, .85) !important; transform: rotate(var(--otm-rot, 0deg)); } .small-box:nth-of-type(3n+1), .info-box:nth-of-type(3n+1) { --otm-rot: -.6deg; } .small-box:nth-of-type(3n+2), .info-box:nth-of-type(3n+2) { --otm-rot: .45deg; } .small-box:nth-of-type(3n), .info-box:nth-of-type(3n) { --otm-rot: -.3deg; } .small-box:hover, .info-box:hover { transform: rotate(0deg) translateY(-3px); } /* 里面的字 */ .small-box .inner h3, .small-box .inner p, .info-box .info-box-text, .info-box .info-box-number { color: var(--otm-ink) !important; font-weight: 800; } /* 图标那一块：留一个小的彩色圆片，作为唯一的点缀 */ .small-box .icon, .info-box .info-box-icon { background-color: transparent !important; color: inherit !important; opacity: .9; } .small-box .icon > i, .info-box .info-box-icon > i { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background-color: rgba(108, 195, 73, .2); border: 1px solid rgba(42, 100, 28, .35); border-radius: 50%; color: var(--otm-grass-dark) !important; font-size: 20px; box-shadow: 0 2px 0 rgba(0, 0, 0, .2); } /* 底部的进度条也压成纸上的淡色 */ .small-box .progress, .small-box .small-box-footer { background-color: rgba(120, 100, 70, .12) !important; color: var(--otm-ink-soft) !important; } .small-box .progress .progress-bar { background-color: var(--otm-grass) !important; } /* 卡片里那条「签到」按钮已由第 4 节做成纸签 */ /* ========================================================================== 18 修正：顶栏里的字要浅色 -------------------------------------------------------------------------- 我在第 1 节把 body 的 color 设成了 --otm-ink（深墨）—— 那是**写在纸上**用的颜色。 但顶栏（.main-header）是深色的，它从 body 继承到深墨， 结果右上角那排（深色切换、通知、语言、头像）全成了**深色压在深色上**，糊成一片。 所以顶栏里的文字与图标要单独给浅色。 ========================================================================== */ .main-header.navbar, .main-header .nav-link, .main-header a, .main-header .navbar-nav .nav-link, .main-header .dropdown-toggle, .main-header .navbar-brand { color: rgba(246, 232, 206, .88) !important; } .main-header .nav-link:hover, .main-header .navbar-nav .nav-link:hover, .main-header a:hover { color: var(--otm-grass-light) !important; } /* 顶栏里的图标 */ .main-header .nav-link i, .main-header .nav-link .fas, .main-header .nav-link .far { color: inherit !important; } /* 顶栏里的头像框：加一圈纸边，和深底分开 */ .main-header .user-image, .main-header img.user-image { border: 2px solid rgba(246, 232, 206, .5) !important; border-radius: 2px !important; } /* 顶栏下拉（通知、语言）已是纸，里面字仍用墨色 —— 别被上面的浅色带跑 */ .main-header .dropdown-menu, .main-header .dropdown-menu .dropdown-item, .main-header .dropdown-menu a { color: var(--otm-ink) !important; } .main-header .dropdown-menu .dropdown-item:hover, .main-header .dropdown-menu a:hover { color: var(--otm-ink) !important; background-color: var(--otm-paper-deep) !important; } /* 顶栏里那条分隔线 */ .main-header .navbar-nav .nav-item { border-color: rgba(255, 246, 232, .12) !important; } /* ========================================================================== 19 修正：统计块的图标溢出 -------------------------------------------------------------------------- AdminLTE 给 .small-box .icon 设了 font-size: 70px， 而我第 17 节把里面的 做成 44px 的圆片 —— 字号没跟着改， 70px 的字形撑爆 44px 的圆，糊成一坨盖在数字上，整块就看不清了。 三处一起修： · 图标字号收到 20px，圆片才装得下 · 数字加大加黑，一眼能看清 · 每块按 .bg-* 给一个彩色圆片，四块颜色区分开 ========================================================================== */ .small-box .icon { font-size: 20px !important; opacity: 1 !important; top: 12px !important; right: 12px !important; } .small-box .icon > i, .info-box .info-box-icon > i { display: inline-flex !important; align-items: center; justify-content: center; width: 46px !important; height: 46px !important; font-size: 20px !important; /* 关键：把 70px 拉回来 */ line-height: 1 !important; border-radius: 50%; box-shadow: 0 2px 0 rgba(0, 0, 0, .22); } /* 数字与说明：加大加黑 */ .small-box .inner h3 { margin: 0 0 4px !important; font-size: 34px !important; font-weight: 900 !important; letter-spacing: .01em; color: var(--otm-ink) !important; text-shadow: none !important; } .small-box .inner p { margin: 0 0 10px !important; font-size: 14px !important; font-weight: 700 !important; color: var(--otm-ink-soft) !important; } /* 底部那条「用户管理 →」：纸上的浅色条，字要看得清 */ .small-box > .small-box-footer { display: block; padding: 7px 12px !important; background-color: rgba(120, 100, 70, .1) !important; border-top: 1px solid rgba(0, 0, 0, .12) !important; color: var(--otm-ink) !important; font-size: 13px !important; font-weight: 700 !important; text-align: right; } .small-box > .small-box-footer:hover { background-color: rgba(120, 100, 70, .18) !important; color: var(--otm-grass-dark) !important; } /* 每块按自己的 .bg-* 给圆片上色 —— 四块颜色区分开，但都压在同一张纸上 */ .small-box .icon > i { background-color: rgba(120, 100, 70, .14); color: var(--otm-ink-soft) !important; } .small-box.bg-info .icon > i { background-color: rgba(60, 140, 190, .22); color: #1d5a80 !important; } .small-box.bg-success .icon > i { background-color: rgba(108, 195, 73, .26); color: var(--otm-grass-dark) !important; } .small-box.bg-warning .icon > i { background-color: rgba(224, 178, 60, .28); color: #8a6410 !important; } .small-box.bg-danger .icon > i { background-color: rgba(196, 84, 84, .24); color: #8f2f2f !important; } .small-box.bg-primary .icon > i { background-color: rgba(90, 120, 200, .22); color: #33478f !important; } /* ========================================================================== 20 修正：左上角那块白方块 -------------------------------------------------------------------------- 我第 16 节给 .brand-link 铺了**整块米色纸** —— 想的是「站名写在一条纸上」。 但在深色页面上，左上角就出现了**一个突兀的白方块**， 旁边紧挨着深色顶栏，像页面缺了一块；☰ 还挤在里面。 问题是「整块铺纸」这个做法太重了。改成： · 那一块跟顶栏同色（不再是一块白） · 站名做成**一张小纸条**贴在上面 —— 是「贴了张名牌」，不是「缺了一块」 · ☰ 用浅色，和顶栏一致 ========================================================================== */ /* 那一块：与顶栏同色，不再铺满纸 */ .main-sidebar .brand-link, .main-header .brand-link { background-color: rgba(20, 19, 17, .96) !important; background-image: none !important; border-bottom: 1px solid rgba(0, 0, 0, .5) !important; box-shadow: none !important; } /* 站名：一张小纸条 */ .main-sidebar .brand-link .brand-text, .main-header .brand-link .brand-text { display: inline-block; padding: 3px 12px; background-color: var(--otm-paper); background-image: repeating-linear-gradient(180deg, rgba(120, 100, 70, .03) 0 1px, transparent 1px 3px), linear-gradient(180deg, #fdfbf6 0%, #efe8d9 100%); border: 1px solid rgba(0, 0, 0, .34); border-radius: 2px; color: var(--otm-ink) !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: .02em; text-shadow: none !important; box-shadow: 0 2px 0 rgba(0, 0, 0, .38); transform: rotate(-.7deg); } /* 站名纸条下沿压一道小胶带，像真的贴上去 */ .main-sidebar .brand-link .brand-text::before, .main-header .brand-link .brand-text::before { content: none; /* 纸条本身已经够小，再加胶带就碎了 */ } /* ☰ 等顶栏图标：浅色 */ .main-header .sidebar-toggle, .main-header .nav-link[data-widget="pushmenu"], .main-sidebar .brand-link { color: rgba(246, 232, 206, .85) !important; } .main-header .sidebar-toggle:hover { color: var(--otm-grass-light) !important; } /* 窄屏（侧栏收起）时，那一块是顶栏的一部分，不要有下边框 */ @media (max-width: 991.98px) { .main-header .brand-link { border-bottom: 0 !important; } } /* ========================================================================== 23 首页：只把「大图以下」做成主站那样 -------------------------------------------------------------------------- 上一版我把整屏大图本身也改成了相片，做过头了 —— 反馈是「太难看了」。 其实要的是主站首页那种结构： · 上面一张整屏大图（**不动**） · 图以下是深色手帐纸，标题写在一张纸卡片上，周围散着相片 所以这一节只碰 #intro（功能那节）与页脚，.hp-wrapper 与 .splash 一个字不改。 ========================================================================== */ /* 功能那节：白底 → 深色纸 */ #intro { position: relative; margin-top: 0; padding: 54px 0 60px !important; background-color: var(--otm-workbench) !important; background-image: linear-gradient(90deg, var(--otm-workbench-line) 1px, transparent 1px), linear-gradient(180deg, var(--otm-workbench-line) 1px, transparent 1px) !important; background-size: 28px 28px !important; border-top: 0 !important; } /* 那一节顶上压一道和纸胶带 —— 主站首页同一处也有一道 */ #intro::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 16px; background-image: repeating-linear-gradient( 90deg, rgba(108, 195, 73, .5) 0 14px, rgba(134, 213, 98, .34) 14px 28px ); box-shadow: 0 2px 6px rgba(0, 0, 0, .45); pointer-events: none; } /* 大标题：写在一张纸卡片上（主站首页那块「欢迎来到…」就是这个做法） */ #intro h1 { display: inline-block; margin: 0 0 26px !important; padding: 10px 34px 14px !important; background-color: var(--otm-paper) !important; background-image: repeating-linear-gradient(180deg, rgba(120, 100, 70, .03) 0 1px, transparent 1px 3px), linear-gradient(180deg, #fdfbf6 0%, #efe8d9 100%) !important; border: 1px solid rgba(0, 0, 0, .3) !important; border-radius: 2px !important; color: var(--otm-ink) !important; font-size: clamp(20px, 2.6vw, 30px) !important; font-weight: 800 !important; letter-spacing: .04em; text-shadow: none !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 6px 14px -6px rgba(0, 0, 0, .9), 0 2px 4px rgba(0, 0, 0, .4) !important; transform: rotate(-.5deg); } /* 三张「功能」小卡：各贴一张纸 + 上沿胶带 */ #intro .col-lg { position: relative; margin: 10px 8px 0; padding: 22px 18px 20px !important; background-color: var(--otm-paper) !important; background-image: repeating-linear-gradient(180deg, rgba(120, 100, 70, .03) 0 1px, transparent 1px 3px), linear-gradient(180deg, #fdfbf6 0%, #efe8d9 100%) !important; border: 1px solid rgba(0, 0, 0, .3); border-radius: 2px; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 6px 0 rgba(0, 0, 0, .3), 0 16px 30px -18px rgba(0, 0, 0, .95); transform: rotate(var(--otm-rot, 0deg)); transition: transform .2s ease; } #intro .col-lg:nth-child(3n+1) { --otm-rot: -.7deg; } #intro .col-lg:nth-child(3n+2) { --otm-rot: .6deg; } #intro .col-lg:nth-child(3n) { --otm-rot: -.35deg; } #intro .col-lg:hover { transform: rotate(0deg) translateY(-4px); } #intro .col-lg::before { content: ""; position: absolute; top: -9px; left: 50%; width: 64px; height: 18px; transform: translateX(-50%) rotate(-2.4deg); background-image: repeating-linear-gradient( 90deg, rgba(134, 213, 98, .55) 0 8px, rgba(160, 224, 129, .38) 8px 16px ); box-shadow: 0 2px 5px rgba(0, 0, 0, .45); pointer-events: none; } /* 卡片里的字：墨色写在纸上 */ #intro .col-lg h3 { margin: 10px 0 8px !important; color: var(--otm-ink) !important; font-size: 18px !important; font-weight: 800 !important; text-shadow: none !important; } #intro .col-lg p { color: var(--otm-ink-soft) !important; font-size: 14px !important; line-height: 1.7; } #intro .col-lg i { font-size: 42px !important; color: var(--otm-grass-dark) !important; } /* 页脚：深色实心 → 台面 + 纸签按钮 */ #footer-wrap { background-color: var(--otm-workbench) !important; background-image: linear-gradient(90deg, var(--otm-workbench-line) 1px, transparent 1px), linear-gradient(180deg, var(--otm-workbench-line) 1px, transparent 1px) !important; background-size: 28px 28px !important; border-top: 1px dashed rgba(255, 246, 232, .14) !important; color: rgba(246, 232, 206, .7) !important; } #footer-wrap a { color: var(--otm-grass-light) !important; } #footer-wrap .main-button { background-color: var(--otm-paper) !important; background-image: linear-gradient(180deg, #fdfbf6 0%, #efe8d9 100%) !important; border: 1px solid rgba(0, 0, 0, .32) !important; color: var(--otm-ink) !important; box-shadow: 0 4px 0 rgba(0, 0, 0, .38), 0 14px 24px -14px rgba(0, 0, 0, .9) !important; } #footer-wrap .main-button:hover { background-color: #fdfbf6 !important; color: var(--otm-ink) !important; } /* 版权那一条 */ #copyright, #copyright.with-intro, #copyright.without-intro { background-color: var(--otm-workbench) !important; color: rgba(246, 232, 206, .5) !important; border-top: 1px dashed rgba(255, 246, 232, .1) !important; } @media (max-width: 767.98px) { #intro { padding: 40px 0 40px !important; } #intro h1 { padding: 8px 18px 11px !important; } #intro .col-lg { margin: 10px 0; } } /* ========================================================================== 27 字体统一 + 深色底上的字加 MC 硬阴影 -------------------------------------------------------------------------- 需求：字体和主站统一，深色底上的字加 MC 那种硬阴影。 字体 主站用的是系统中文默认（macOS 上是 PingFang ✅ Windows 上是微软雅黑）， 这边原来写的是 "Noto Sans" —— 两边字形不一样。改成和主站同一套回退顺序。 阴影 MC 的硬阴影是 **1px 1px 0 / 2px 2px 0 纯色偏移**，不是模糊阴影 —— 像素风的东西模糊了就散了。 主站也是这么用的： 导航项 rgba(0,0,0,.55) 1px 1px 0 站名 rgba(0,0,0,.7) 2px 2px 0 **只加在深色底上的字**： 纸面（卡片）上的字是墨色写在米色纸上，再压一道黑阴影会发闷， 主站的做法也是这样 —— 相片说明、正文都没有阴影。 所以下面按「字所在的底」分组：底部深色 → 加；纸面 → 不加。 ========================================================================== */ /* -------------------------------------------------------------------------- 27.1 字体与主站统一 -------------------------------------------------------------------------- */ body, body:not(.login-page) { font-family: "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans", sans-serif !important; } h1, h2, h3, h4, h5, h6, .navbar-brand, .nav-link, .btn, .card-title, .box-title, .splash-head, .splash-subhead, .main-button, .small-box .inner h3 { font-family: "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans", sans-serif !important; } /* -------------------------------------------------------------------------- 27.2 深色底上的字：MC 硬阴影 -------------------------------------------------------------------------- */ /* 顶栏（深色） —— 与主站导航项同一档：1px 1px 0 */ .main-header.navbar, .main-header .nav-link, .main-header .navbar-brand, .main-header a, .navbar .nav-link { text-shadow: 1px 1px 0 rgba(0, 0, 0, .55) !important; } /* 工作台上的大标题（内容区顶部那行「Skin Library」）—— 与主站站名同一档：2px */ .content-header h1, .content-header h2, .content-header h3 { text-shadow: 2px 2px 0 rgba(0, 0, 0, .7), 0 4px 10px rgba(0, 0, 0, .35) !important; } /* 面包屑（深底） */ .breadcrumb, .breadcrumb-item, .breadcrumb-item a, .breadcrumb-item.active { text-shadow: 1px 1px 0 rgba(0, 0, 0, .5) !important; } /* 首页首屏：照片上的白字 —— 最需要阴影的地方 */ .hp-wrapper .splash-head { text-shadow: 2px 2px 0 rgba(0, 0, 0, .62), 0 6px 16px rgba(0, 0, 0, .35) !important; } .hp-wrapper .splash-subhead { text-shadow: 1px 1px 0 rgba(0, 0, 0, .55) !important; } .hp-wrapper .main-button { text-shadow: 1px 1px 0 rgba(0, 0, 0, .5) !important; } /* 首屏顶栏（浮在照片上，底不可靠）—— 也加上 */ .hp-wrapper .navbar .nav-link, .hp-wrapper .navbar .navbar-brand { text-shadow: 1px 1px 0 rgba(0, 0, 0, .6) !important; } /* 页脚（深底） */ #footer-wrap, #footer-wrap *, #copyright, #copyright * { text-shadow: 1px 1px 0 rgba(0, 0, 0, .5) !important; } /* 首页功能那节（深底） */ #intro h1, #intro h3, #intro p { text-shadow: 1px 1px 0 rgba(0, 0, 0, .5) !important; } /* 侧栏里那些**不在纸上**的字：分组标题之外的小字、页脚版权 */ .main-sidebar .nav-header { text-shadow: none !important; } /* 它在纸上了 */ /* 登录页本来就在深色台面上 —— 页头那行站名加一道 */ body.login-page .login-logo a { text-shadow: 2px 2px 0 rgba(0, 0, 0, .55) !important; } /* -------------------------------------------------------------------------- 27.3 明确不给阴影的：纸面上的字 -------------------------------------------------------------------------- 这些地方的字写在米色纸上，再加黑阴影会发闷 —— 主站同样没加。 写出来是为了**留下记录**：以后有人看到「别处都有阴影、这里没有」时， 知道这是有意的，而不是漏了。 -------------------------------------------------------------------------- */ .card, .card *, .box, .box *, .card-body, .card-body *, .small-box, .small-box *, .info-box, .info-box *, .main-sidebar .nav-sidebar .nav-link, .main-sidebar .nav-sidebar .nav-link *, .main-sidebar .user-panel *, .modal-content, .modal-content *, .dropdown-menu, .dropdown-menu *, .table, .table * { text-shadow: none !important; } /* ========================================================================== 28 首屏顶栏两项统一 + 按钮外框加阴影 -------------------------------------------------------------------------- 反馈两条： ① 「右上角没统一」 左上角站名（.navbar-brand）是 15px / 字重 800 / 白字 / 带阴影， 右上那三项（皮肤库、语言、用户）却是**更小、更细**的字 —— 同一条顶栏里两套字号字重，看着就是没做完。 统一成与站名同一档：同一字号、同一字重、同一道阴影。 ②「用户中心按钮的外框也加阴影」 原来按钮只有一圈 1px 白描边，**没有 box-shadow**， 于是它只是「一圈线」，不像一块能按下去的东西。 加一道 MC 那种硬阴影（和文字阴影同一套语言，不用模糊阴影）。 ========================================================================== */ /* -------------------------------------------------------------------------- 28.1 顶栏左右统一 -------------------------------------------------------------------------- */ .hp-wrapper .navbar .nav-link, .hp-wrapper .navbar .navbar-brand, .main-header .navbar .nav-link, .main-header .navbar .navbar-brand { font-size: 15px !important; font-weight: 800 !important; letter-spacing: .02em; text-shadow: 1px 1px 0 rgba(0, 0, 0, .6) !important; } /* 顶栏里的图标跟着同一档字重，别一粗一细 */ .hp-wrapper .navbar .nav-link i, .main-header .navbar .nav-link i { font-size: 14px !important; } /* 右上角之间留出均匀的间距，别挤在一起 */ .hp-wrapper .navbar-custom-menu .nav-item, .main-header .navbar-nav .nav-item { margin-left: 6px; } /* 语言那一项里的下拉箭头与文字同色同影 */ .hp-wrapper .navbar .dropdown-toggle, .main-header .navbar .dropdown-toggle { font-weight: 800 !important; } /* -------------------------------------------------------------------------- 28.2 首屏那个按钮：外框加硬阴影 -------------------------------------------------------------------------- 和文字阴影同一套语言 —— 纯色偏移，不用模糊。 另外给一点极淡的深色底：纯透明的话，框外的硬阴影会像一块悬空的暗色方块， 底下垫一点点深色，它才像一块牌子压在照片上。 -------------------------------------------------------------------------- */ .hp-wrapper .main-button { background-color: rgba(0, 0, 0, .22) !important; border: 1px solid rgba(255, 255, 255, .9) !important; box-shadow: 3px 3px 0 rgba(0, 0, 0, .5), 0 10px 24px -8px rgba(0, 0, 0, .55) !important; } .hp-wrapper .main-button:hover, .hp-wrapper .main-button:focus { background-color: rgba(0, 0, 0, .34) !important; box-shadow: 5px 5px 0 rgba(0, 0, 0, .55), 0 14px 30px -10px rgba(0, 0, 0, .6) !important; } .hp-wrapper .main-button:active { background-color: rgba(0, 0, 0, .45) !important; box-shadow: 1px 1px 0 rgba(0, 0, 0, .5), 0 4px 12px -4px rgba(0, 0, 0, .5) !important; } /* 非首屏页（皮肤库等）的按钮沿用同一套硬阴影，保持一致 */ #footer-wrap .main-button { box-shadow: 3px 3px 0 rgba(0, 0, 0, .5), 0 10px 24px -8px rgba(0, 0, 0, .5) !important; } /* ========================================================================== 29 修正：纸面上的字被加了黑阴影，糊得看不清 -------------------------------------------------------------------------- 反馈：这些阴影加的都要看不清字了（指向首页「优势」那节与「开始使用」按钮）。 是我第 27 节打偏了。当时的原则是「只给深色底上的字加阴影」， 但落笔时用了**父容器**去框范围： #intro h1 / #intro h3 / #intro p → 加 #footer-wrap, #footer-wrap * → 加 问题在于这两个父容器里**混着两种底**： 「优势」标题与三张功能卡 → 本身是**纸**（米色纸卡） 「开始使用」按钮 → 本身是**纸** 只有卡外的说明文字 → 才在深色台面上 纸上是**深字**，再压一道 rgba(0,0,0,.5) 的黑阴影， 等于深字压深影 —— 边缘糊成一团。 这一节把范围改**精确到元素本身**：凡是自己带纸底的，一律不加。 ========================================================================== */ /* 「优势」大标题在纸卡上 —— 去掉阴影 */ #intro h1, #intro > .container > .text-center > h1 { text-shadow: none !important; } /* 三张功能卡是纸卡，里面的字全都不加 */ #intro .col-lg, #intro .col-lg * { text-shadow: none !important; } /* 「开始使用」是纸按钮 —— 里面的字也不加 */ #footer-wrap .main-button, #footer-wrap .main-button * { text-shadow: none !important; } /* 版权那条在台面上、且没有纸底 —— 保留阴影 */ #copyright, #copyright * { text-shadow: 1px 1px 0 rgba(0, 0, 0, .5) !important; } /* 「开始使用」左边那段说明文字在台面上 —— 保留阴影（它没有纸底） */ #footer-wrap > .container > .row > .col-lg-6, #footer-wrap > .container > .row > .col-lg-6 * { text-shadow: 1px 1px 0 rgba(0, 0, 0, .5) !important; } /* ========================================================================== 29.1 复核：凡是自带纸底的元素，一律不给文字阴影 -------------------------------------------------------------------------- 这是本节的**总规则**，比上面逐条举例更可靠 —— 以后再加纸面元素（比如新的卡片类），只要命中这个列表就自动不会有阴影。 ========================================================================== */ #intro h1, #intro .col-lg, #intro .col-lg *, #footer-wrap .main-button, #footer-wrap .main-button *, .card, .card *, .box, .box *, .small-box, .small-box *, .info-box, .info-box *, .badge, .label, .table, .table *, .modal-content, .modal-content *, .dropdown-menu, .dropdown-menu *, .main-sidebar .nav-sidebar .nav-link, .main-sidebar .nav-sidebar .nav-link *, .main-sidebar .user-panel *, .nav-header, .page-link { text-shadow: none !important; } /* ========================================================================== 30 顶栏的字全部改成纯白 -------------------------------------------------------------------------- 反馈：这里的所有字都用纯白色。 现状是两档： 站名 #fff（纯白） 右上三项 rgba(255, 255, 255, .75) ← 七五折的白，在深色栏上看着发灰 同一条栏里两种白，也是「没统一」的一种。全部改成 #fff。 注意 :hover 也跟着改 —— 原来悬停会变草绿，那又跳出「都是白」这条规则了。 悬停改用**透明度不变、加一道更亮的阴影**来提示，颜色始终是白。 ========================================================================== */ .hp-wrapper .navbar .nav-link, .hp-wrapper .navbar .navbar-brand, .hp-wrapper .navbar .nav-item, .hp-wrapper .navbar .dropdown-toggle, .hp-wrapper .navbar .navbar-nav, .hp-wrapper .navbar a, .hp-wrapper .navbar i, .main-header.navbar, .main-header .navbar .nav-link, .main-header .navbar .navbar-brand, .main-header .navbar .nav-item, .main-header .navbar .dropdown-toggle, .main-header .navbar .navbar-nav, .main-header .navbar a, .main-header .navbar i { color: #ffffff !important; } /* 悬停：颜色仍是纯白，靠阴影变亮来提示 */ .hp-wrapper .navbar .nav-link:hover, .hp-wrapper .navbar .nav-link:focus, .hp-wrapper .navbar a:hover, .main-header .navbar .nav-link:hover, .main-header .navbar .nav-link:focus, .main-header .navbar a:hover { color: #ffffff !important; text-shadow: 2px 2px 0 rgba(0, 0, 0, .7) !important; } /* 顶栏里的下拉箭头、计数这类装饰也跟着白 */ .hp-wrapper .navbar .badge, .main-header .navbar .badge, .main-header .navbar .dropdown-toggle::after { color: #ffffff !important; border-top-color: #ffffff !important; } /* 头像旁边那个用户名（Yadiel_）也是纯白 */ .hp-wrapper .navbar .d-none.d-sm-inline, .main-header .navbar .d-none.d-sm-inline, .main-header .navbar .user-menu, .main-header .navbar .user-menu span { color: #ffffff !important; } /* 顶栏里的下拉菜单是纸面，里面的字仍用墨色 —— 别被上面的白带跑 */ .hp-wrapper .navbar .dropdown-menu, .hp-wrapper .navbar .dropdown-menu *, .main-header .navbar .dropdown-menu, .main-header .navbar .dropdown-menu * { color: #2e2a26 !important; } /* ========================================================================== 31 修正：站内页的顶栏没变白 -------------------------------------------------------------------------- 首页好了，站内页（皮肤库、控制台等）还是米色字。原因在选择器写法： 站内页的标记是