/* 首页（控制面板组件版）轻卡片样式：参照新版首页（home-v2.css）改写三个组件的外观 * - 刷题中心（HomepagePractice）：卡片、视图切换、概览数字 + 热力图、近期刷过、提交记录 / 收藏夹列表 * - 每日一题 + 最新比赛（HomepageLatestTests，.lc2） * - 手机刷题 / 微信联系两行入口（HomepageBasic phone_practice，.hl-links） * 只覆盖外观，不改各组件脚本依赖的类名和结构。 */ #panel .practice-home-section, #panel .lc2, #panel .hl-links { --hl-ink: #141A26; --hl-ink-2: #4B5563; --hl-ink-3: #6B7280; --hl-ink-4: #9CA3AF; --hl-line: rgba(20, 26, 38, .08); --hl-line-2: rgba(20, 26, 38, .05); --hl-surface: #fff; --hl-hover: rgba(20, 26, 38, .04); --hl-chip: rgba(20, 26, 38, .05); --hl-accent: #2B7FFF; --hl-ok: #16A34A; } .theme--dark #panel .practice-home-section, .theme--dark #panel .lc2, .theme--dark #panel .hl-links { --hl-ink: #F2F3F5; --hl-ink-2: #C4C9D2; --hl-ink-3: #8F96A3; --hl-ink-4: #6B7280; --hl-line: rgba(255, 255, 255, .08); --hl-line-2: rgba(255, 255, 255, .05); --hl-surface: #1C1E24; --hl-hover: rgba(255, 255, 255, .05); --hl-chip: rgba(255, 255, 255, .06); --hl-accent: #4C93FF; --hl-ok: #3FB950; } /* ============ 卡片外壳：白底细描边、无阴影、无带底色的标题栏 ============ */ #panel .practice-home-section .cb-card.practice-card, #panel .section .cb-card.lc2 { background: var(--hl-surface); border: 1px solid var(--hl-line); border-radius: 16px; box-shadow: none; } #panel .practice-home-section .cb-card.practice-card > .cb-card-header { min-height: 0; padding: 22px var(--po-body-x, 28px) 0; background: transparent; border-bottom: 0; } #panel .practice-home-section .cb-card.practice-card .cb-card-header .cb-card-icon { display: none; } #panel .practice-home-section .cb-card.practice-card .cb-card-title { font-size: 16px; font-weight: 600; color: var(--hl-ink); } #panel .practice-home-section .practice-body { padding: var(--po-body-top, 20px) var(--po-body-x, 28px) var(--po-body-bottom, 26px) !important; } /* 视图切换：文字选项卡 + 选中项下方短横线（替换原来的胶囊滑块） */ #panel .practice-home-section .practice-view-switch { display: flex; gap: 4px; min-width: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; } #panel .practice-home-section .practice-view-switch::before { display: none; } #panel .practice-home-section .practice-view-switch-btn { position: relative; padding: 6px 12px 9px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--hl-ink-3); transition: color .15s ease, background-color .15s ease; } #panel .practice-home-section .practice-view-switch-btn::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0; transform: scaleX(.4); transition: opacity .15s ease, transform .18s ease; } #panel .practice-home-section .practice-view-switch-btn:hover, #panel .practice-home-section .practice-view-switch-btn:focus-visible { color: var(--hl-ink); background: var(--hl-hover); } #panel .practice-home-section .practice-view-switch-btn--active { color: var(--hl-ink); } #panel .practice-home-section .practice-view-switch-btn--active::after { opacity: 1; transform: none; } #panel .practice-home-section .practice-view-switch-btn:focus-visible { outline: 2px solid var(--hl-accent); outline-offset: 2px; } /* ============ 个人面板：概览数字 + 热力图，下面一排近期刷过 ============ */ #panel .practice-home-section .practice-layout.practice-layout--v2 { display: block; min-height: 0; } #panel .practice-overview { display: flex; flex-direction: column; gap: 18px; } #panel .practice-stats { display: flex; flex-wrap: wrap; gap: 12px var(--po-stats-gap, 44px); margin: 0; } #panel .practice-stats > div { margin: 0; } #panel .practice-stats dt { font-size: 12px; font-weight: 400; color: var(--hl-ink-3); } #panel .practice-stats dd { margin: 2px 0 0; font-size: var(--po-stats-size, 28px); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: var(--hl-ink); font-variant-numeric: tabular-nums; } #panel .practice-stats dd small { margin-left: 3px; font-size: 13px; font-weight: 400; color: var(--hl-ink-3); } #panel .practice-home-section .practice-section--heatmap { padding: 0; background: none; border: 0; box-shadow: none; } #panel .practice-home-section .practice-heatmap-wrap { padding: 0; background: none; border: 0; box-shadow: none; } #panel .practice-home-section .heatmap-months { margin-bottom: 6px; font-size: 11px; color: var(--hl-ink-4); } #panel .practice-home-section .heatmap-month-label { font-size: 11px; color: var(--hl-ink-4); } #panel .practice-home-section .heatmap-cell { border-radius: 3px; outline: 0; box-shadow: none; } #panel .practice-home-section .heatmap-cell:hover { transform: none; box-shadow: 0 0 0 1px var(--hl-ink-3); } #panel .practice-home-section .heatmap-cell[data-count="0"] { background: #EBEEF1; } #panel .practice-home-section .heatmap-cell.level-1 { background: #C9E7D3; } #panel .practice-home-section .heatmap-cell.level-2 { background: #92D0A9; } #panel .practice-home-section .heatmap-cell.level-3 { background: #55B27E; } #panel .practice-home-section .heatmap-cell.level-4 { background: #2F8F5B; } .theme--dark #panel .practice-home-section .heatmap-cell[data-count="0"] { background: #24272E; } .theme--dark #panel .practice-home-section .heatmap-cell.level-1 { background: #1E3B2B; } .theme--dark #panel .practice-home-section .heatmap-cell.level-2 { background: #22603F; } .theme--dark #panel .practice-home-section .heatmap-cell.level-3 { background: #2C8A55; } .theme--dark #panel .practice-home-section .heatmap-cell.level-4 { background: #3FB86E; } /* 不要「少 → 多」图例 */ #panel .practice-home-section .heatmap-legend, #panel .practice-home-section .practice-heatmap-legend { display: none !important; } #panel .practice-recent { margin-top: var(--po-recent-gap, 22px); padding-top: var(--po-recent-pad, 18px); border-top: 1px solid var(--hl-line-2); } #panel .practice-home-section .practice-recent .practice-section-label { display: block; margin: 0 0 10px; padding: 0; font-size: 13px; font-weight: 500; color: var(--hl-ink-3); } #panel .practice-home-section .practice-recent .practice-ps-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } #panel .practice-home-section .practice-recent .practice-ps-chip { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--hl-chip); box-shadow: none; color: var(--hl-ink); text-decoration: none; transition: background-color .15s ease, box-shadow .15s ease; } #panel .practice-home-section .practice-recent .practice-ps-chip:hover { background: var(--hl-hover); box-shadow: inset 0 0 0 1px var(--hl-line); transform: none; } #panel .practice-home-section .practice-recent .practice-ps-icon { width: 22px; height: 22px; flex: none; border-radius: 6px; object-fit: contain; } #panel .practice-home-section .practice-recent .practice-ps-icon--default { display: grid; place-items: center; background: var(--hl-surface); color: var(--hl-ink-3); } #panel .practice-home-section .practice-recent .practice-ps-icon--default svg { width: 14px; height: 14px; } #panel .practice-home-section .practice-recent .practice-ps-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--hl-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============ 提交记录 / 收藏夹：列表行 + 细分隔线 ============ */ #panel .practice-home-section .practice-section--favorites { padding: 0; background: none; border: 0; box-shadow: none; } #panel .practice-home-section .practice-sub-list, #panel .practice-home-section .practice-fav-list { border-top: 1px solid var(--hl-line-2); gap: 0; } #panel .practice-home-section .practice-sub-row, #panel .practice-home-section .practice-fav-row { margin: 0; padding: 11px 0; border: 0; border-bottom: 1px solid var(--hl-line-2); border-radius: 0; background: none; box-shadow: none; font-size: 14px; } #panel .practice-home-section .practice-sub-row:hover, #panel .practice-home-section .practice-fav-row:hover { background: none; box-shadow: none; transform: none; } #panel .practice-home-section .practice-sub-row--pad { border-bottom-color: transparent; } #panel .practice-home-section .practice-sub-status { font-size: 12px; font-weight: 600; } #panel .practice-home-section .practice-sub-title, #panel .practice-home-section .practice-fav-title { font-size: 14px; font-weight: 400; color: var(--hl-ink); } #panel .practice-home-section a.practice-sub-title:hover, #panel .practice-home-section .practice-fav-title:hover { color: var(--hl-accent); } #panel .practice-home-section .practice-sub-lang, #panel .practice-home-section .practice-sub-time { font-size: 12.5px; color: var(--hl-ink-3); font-variant-numeric: tabular-nums; } /* 收藏夹的标签 / 公司 / 难度统一成浅灰小标签，不再每种一个颜色 */ #panel .practice-home-section .practice-fav-chip, #panel .practice-home-section .practice-fav-co-chip { padding: 1px 7px; border: 0; border-radius: 999px; background: var(--hl-chip); color: var(--hl-ink-3); font-size: 11.5px; font-weight: 500; } #panel .practice-home-section .practice-fav-co-chip:hover { color: var(--hl-accent); background: var(--hl-chip); } #panel .practice-home-section .practice-fav-diff { border: 0 !important; background: var(--hl-chip) !important; font-size: 11.5px; font-weight: 600; } #panel .practice-home-section .practice-fav-diff--easy { color: #16A34A !important; } #panel .practice-home-section .practice-fav-diff--medium { color: #D97706 !important; } #panel .practice-home-section .practice-fav-diff--hard { color: #DC2626 !important; } #panel .practice-home-section .practice-fav-count { font-size: 13px; font-weight: 500; color: var(--hl-ink-3); background: none; padding: 0; } #panel .practice-home-section .practice-fav-head { padding: 0 0 12px; border: 0; } #panel .practice-home-section .practice-fav-dd-trigger { border-color: var(--hl-line); border-radius: 8px; box-shadow: none; font-weight: 500; } #panel .practice-home-section .practice-sub-foot { padding-top: 12px; border: 0; } #panel .practice-home-section .practice-sub-more { font-size: 13px; font-weight: 400; color: var(--hl-ink-3); } #panel .practice-home-section .practice-sub-more:hover { color: var(--hl-accent); } #panel .practice-home-section .practice-fav-page-btn { border: 1px solid var(--hl-line); border-radius: 8px; background: none; color: var(--hl-ink-2); font-weight: 500; } #panel .practice-home-section .practice-fav-page-btn:hover:not(:disabled) { border-color: var(--hl-line); background: var(--hl-hover); color: var(--hl-ink); } #panel .practice-home-section .practice-fav-page-indicator { font-weight: 400; color: var(--hl-ink-3); } #panel .practice-home-section .practice-fav-empty-hint { color: var(--hl-ink-3); } /* ============ 每日一题 + 最新比赛（同一张卡片，两部分） ============ */ #panel .lc2 { padding: 20px 22px 14px; } #panel .lc2-sec + .lc2-sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hl-line-2); } #panel .lc2-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } #panel .lc2-title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--hl-ink); } #panel .lc2-ic { width: 17px; height: 17px; flex: none; color: var(--hl-ink-2); } #panel .lc2-more { font-size: 13px; color: var(--hl-ink-3); text-decoration: none; } #panel .lc2-more:hover { color: var(--hl-accent); } #panel .lc2-daily { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; margin: 0 -10px; padding: 8px 10px; border-radius: 10px; color: inherit; text-decoration: none; transition: background-color .15s ease; } #panel .lc2-daily:hover { background: var(--hl-hover); } #panel .lc2-daily__title { font-size: 15px; font-weight: 500; color: var(--hl-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #panel .lc2-pid { margin-right: 8px; color: var(--hl-ink-4); font-variant-numeric: tabular-nums; } #panel .lc2-daily__meta { grid-row: 2; font-size: 12.5px; color: var(--hl-ink-3); } #panel .lc2-daily__state { grid-row: 1 / span 2; grid-column: 2; align-self: center; display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; color: var(--hl-ink-3); } #panel .lc2-daily__state svg { width: 14px; height: 14px; } #panel .lc2-daily__state.is-done { color: var(--hl-ok); } #panel .lc2-daily:hover .lc2-daily__state:not(.is-done) { color: var(--hl-accent); } #panel .lc2-empty { margin: 4px 0 0; font-size: 13px; color: var(--hl-ink-3); } /* 比赛列表：行 + 细分隔线（保留原有类名，倒计时脚本仍然生效） */ #panel .lc2 .cb-lc-body { padding: 0; } #panel .lc2 .cb-lc-list { display: block; gap: 0; } #panel .lc2 .cb-lc-row { display: block; margin: 0; padding: 11px 0; border: 0; border-top: 1px solid var(--hl-line-2); border-radius: 0; background: none; box-shadow: none; color: inherit; text-decoration: none; transform: none; } #panel .lc2 .cb-lc-row:first-child { border-top: 0; } #panel .lc2 .cb-lc-row:hover { background: none; box-shadow: none; transform: none; } #panel .lc2 .cb-lc-title { display: block; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--hl-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #panel .lc2 .cb-lc-row:hover .cb-lc-title { color: var(--hl-accent); } #panel .lc2 .cb-lc-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12.5px; color: var(--hl-ink-3); } #panel .lc2 .cb-lc-time { font-size: 12.5px; color: var(--hl-ink-3); } #panel .lc2 .cb-lc-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border: 0; border-radius: 999px; background: var(--hl-chip); color: var(--hl-ink-3); font-size: 11.5px; font-weight: 500; box-shadow: none; } #panel .lc2 .cb-lc-badge--registering, #panel .lc2 .cb-lc-badge--ongoing { background: rgba(43, 127, 255, .1); color: var(--hl-accent); } .theme--dark #panel .lc2 .cb-lc-badge--registering, .theme--dark #panel .lc2 .cb-lc-badge--ongoing { background: rgba(76, 147, 255, .14); } #panel .lc2 .cb-lc-empty { padding: 16px 0 8px; } /* ============ 手机刷题 / 微信联系：两行轻入口，不做卡片 ============ */ #panel .section.hl-links { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; background: none; box-shadow: none; } #panel .hl-linkrow { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 10px 10px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease; } #panel .hl-linkrow[hidden] { display: none; } #panel .hl-linkrow:hover { background: var(--hl-hover); } #panel .hl-linkrow:focus-visible { outline: 2px solid var(--hl-accent); outline-offset: 2px; } #panel .hl-linkrow__ic { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--hl-chip); color: var(--hl-ink-2); } #panel .hl-linkrow__ic svg { width: 17px; height: 17px; } #panel .hl-linkrow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; } #panel .hl-linkrow__text b { font-size: 14px; font-weight: 500; color: var(--hl-ink); } #panel .hl-linkrow__text small { font-size: 12px; color: var(--hl-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #panel .hl-linkrow__go { width: 16px; height: 16px; flex: none; color: var(--hl-ink-4); transition: transform .15s ease, color .15s ease; } #panel .hl-linkrow__go svg { width: 100%; height: 100%; display: block; } #panel .hl-linkrow:hover .hl-linkrow__go { color: var(--hl-ink); transform: translateX(2px); } @media (max-width: 720px) { #panel .practice-home-section .cb-card.practice-card > .cb-card-header { padding: 18px 16px 0; flex-direction: column; align-items: flex-start; } #panel .practice-home-section .practice-body { padding: 16px 16px 20px !important; } #panel .practice-stats { gap: 12px 28px; } #panel .practice-stats dd { font-size: 24px; } } @media (prefers-reduced-motion: reduce) { #panel .practice-home-section *, #panel .lc2 *, #panel .hl-links * { transition: none !important; } } /* ============ 概览一分为二：左侧数字 + 热力图，右侧最近提交（中间一条细竖线） ============ */ #panel .practice-overview.practice-overview--split { display: grid; grid-template-columns: minmax(0, var(--po-left, 1.05fr)) minmax(var(--po-right-min, 300px), 1fr); gap: 0; align-items: stretch; } #panel .practice-overview__main { min-width: 0; display: flex; flex-direction: column; gap: var(--po-main-gap, 18px); padding-right: var(--po-div-left, 32px); } #panel .practice-overview__subs { position: relative; min-width: 0; min-height: 0; padding-left: var(--po-div-right, 20px); border-left: 1px solid var(--hl-line-2); } /* 绝对定位：右栏不参与高度计算，高度完全由左侧决定；放不下的行由脚本隐藏 */ #panel .practice-subs__inner { position: absolute; top: 0; right: 0; bottom: 0; left: var(--po-div-right, 20px); display: flex; flex-direction: column; overflow: hidden; } #panel .practice-subs__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: var(--po-subs-head-gap, 6px); } #panel .practice-subs__title { margin: 0; font-size: 13px; font-weight: 500; color: var(--hl-ink-3); } #panel .practice-subs__more { font-size: 13px; color: var(--hl-ink-3); text-decoration: none; } #panel .practice-subs__more:hover { color: var(--hl-accent); } #panel .practice-subs__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hl-line-2); } #panel .practice-subs__row { display: flex; align-items: center; gap: var(--po-row-gap, 12px); margin: 0; padding: var(--po-row-pad, 14px) 0; border-bottom: 1px solid var(--hl-line-2); font-size: 14px; } #panel .practice-subs__row[hidden] { display: none; } /* 最后一条（含后面几条被隐藏时的最后一条可见行）不要分割线 */ #panel .practice-subs__row:last-child, #panel .practice-subs__row:has(+ .practice-subs__row[hidden]) { border-bottom: 0; } #panel .practice-subs__st { flex: none; width: var(--po-st-w, 56px); font-size: 12px; font-weight: 600; line-height: 1; color: var(--hl-ink-3); text-decoration: none; white-space: nowrap; } #panel .practice-subs__st--pass { color: #16A34A; } #panel .practice-subs__st--fail { color: #DC2626; } #panel .practice-subs__st--progress { color: #D97706; } .theme--dark #panel .practice-subs__st--pass { color: #3FB950; } .theme--dark #panel .practice-subs__st--fail { color: #F85149; } .theme--dark #panel .practice-subs__st--progress { color: #F0B43C; } #panel .practice-subs__name { flex: 1; min-width: 0; color: var(--hl-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #panel a.practice-subs__name:hover { color: var(--hl-accent); } #panel .practice-subs__meta { flex: none; font-size: 12.5px; color: var(--hl-ink-3); white-space: nowrap; } #panel .practice-subs__time { font-variant-numeric: tabular-nums; } #panel .practice-subs__empty { margin: 10px 0 0; font-size: 13px; color: var(--hl-ink-3); } @media (max-width: 900px) { #panel .practice-overview.practice-overview--split { grid-template-columns: minmax(0, 1fr); gap: 22px; } #panel .practice-overview__main { padding-right: 0; } #panel .practice-overview__subs { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--hl-line-2); } #panel .practice-subs__inner { position: static; } } @media (max-width: 560px) { #panel .practice-subs__row .practice-subs__meta:not(.practice-subs__time) { display: none; } } /* ============ 我的笔记（与最近提交同一套行样式） ============ */ #panel .practice-notes { display: flex; flex-direction: column; height: 100%; min-height: 0; } #panel .practice-notes .practice-subs__head { flex: none; } #panel .practice-notes__list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } #panel .practice-notes__list .practice-subs__row:last-child { border-bottom: 0; } #panel .practice-notes__kind { color: var(--hl-ink-3); font-weight: 500; } #panel .practice-notes__kind--problem { color: var(--hl-accent); } #panel .practice-notes__main { display: flex; align-items: baseline; gap: 10px; } #panel .practice-notes__title { flex: none; max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hl-ink); } #panel a.practice-notes__main:hover .practice-notes__title { color: var(--hl-accent); } #panel .practice-notes__ex { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--hl-ink-3); } #panel .practice-notes__foot { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 12px; } #panel .practice-notes__foot[hidden] { display: none; } #panel .practice-notes__empty { margin: 4px 0 0; font-size: 13px; color: var(--hl-ink-3); } @media (max-width: 640px) { #panel .practice-notes__ex { display: none; } #panel .practice-notes__title { max-width: none; flex: 1; } }