/* ===================================================================== LifeAtlas · GBA 像素主题（经典宝可梦 火红/叶绿 风格） --------------------------------------------------------------------- 本文件只负责在 时生效的覆盖层， 原现代风格（styles.css）保持不变，两套主题可随时切换。 数字/英文使用 Press Start 2P 像素字体；中文保持清晰粗体。 ===================================================================== */ [data-theme='pixel'] { --px-bg: #a9cf9d; /* 绿野背景 */ --px-window: #f8f0dc; /* 米色对话框 */ --px-window2: #eee2c0; /* 米色内嵌面板 */ --px-field: #fdfae8; /* 输入框底 */ --px-border: #3c3c34; /* 深色外框 */ --px-border-soft: #6e6549; --px-light: #fff8e0; /* 浮雕高光 */ --px-shadow: #99895f; /* 浮雕暗部 */ --px-text: #232018; --px-muted: #7a6f52; --px-green: #3c8a3c; --px-green-d: #1f5a24; --px-red: #d0483c; --px-red-d: #6f2018; --px-red-l: #f4a89c; --px-gold: #f8d878; --px-blue: #5a88d8; --px-blue-d: #2c4a8a; } /* ---------- 背景 / 基础 ---------- */ [data-theme='pixel'] body { background: var(--px-bg); background-image: linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px); background-size: 22px 22px; color: var(--px-text); } [data-theme='pixel'] body::before { display: none; /* 关掉现代风的噪点滤镜 */ } [data-theme='pixel'] ::selection { background: var(--px-gold); color: var(--px-text); } /* 像素滚动条 */ [data-theme='pixel'] ::-webkit-scrollbar { width: 14px; height: 14px; } [data-theme='pixel'] ::-webkit-scrollbar-track { background: #d8cfa8; border: 2px solid var(--px-border); } [data-theme='pixel'] ::-webkit-scrollbar-thumb { background: #7ac958; border: 2px solid var(--px-border); } [data-theme='pixel'] ::-webkit-scrollbar-thumb:hover { background: var(--px-green-d); } /* ---------- 按钮：立体浮雕 ---------- */ [data-theme='pixel'] .primary, [data-theme='pixel'] .secondary, [data-theme='pixel'] .danger, [data-theme='pixel'] .ghost, [data-theme='pixel'] .generate, [data-theme='pixel'] .download { border-radius: 0; border: 2px solid var(--px-border); font-weight: 700; letter-spacing: 0.03em; } [data-theme='pixel'] .primary { background: var(--px-red); color: #fff; box-shadow: inset -3px -3px 0 var(--px-red-d), inset 3px 3px 0 var(--px-red-l); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35); } [data-theme='pixel'] .primary:hover { background: #d85a4c; transform: translateY(-1px); filter: none; box-shadow: inset -3px -3px 0 var(--px-red-d), inset 3px 3px 0 var(--px-red-l); } [data-theme='pixel'] .primary:active { transform: translateY(1px); box-shadow: inset 3px 3px 0 var(--px-red-d), inset -3px -3px 0 var(--px-red-l); } [data-theme='pixel'] .primary:disabled { opacity: 0.45; box-shadow: none; border-color: var(--px-border-soft); } [data-theme='pixel'] .secondary { background: var(--px-window2); color: var(--px-text); box-shadow: inset -3px -3px 0 var(--px-shadow), inset 3px 3px 0 var(--px-light); } [data-theme='pixel'] .secondary:hover { border-color: var(--px-green); background: #f4ead0; } [data-theme='pixel'] .secondary:active { transform: translateY(1px); box-shadow: inset 3px 3px 0 var(--px-shadow), inset -3px -3px 0 var(--px-light); } [data-theme='pixel'] .danger { background: #f0d8c8; color: var(--px-red-d); box-shadow: inset -3px -3px 0 var(--px-shadow), inset 3px 3px 0 var(--px-light); } [data-theme='pixel'] .danger:active { transform: translateY(1px); box-shadow: inset 3px 3px 0 var(--px-shadow), inset -3px -3px 0 var(--px-light); } [data-theme='pixel'] .ghost { background: var(--px-window2); color: var(--px-text); box-shadow: inset -2px -2px 0 var(--px-shadow), inset 2px 2px 0 var(--px-light); } [data-theme='pixel'] .ghost:hover { background: #f4ead0; border-color: var(--px-border); } [data-theme='pixel'] .ghost:active { box-shadow: inset 2px 2px 0 var(--px-shadow), inset -2px -2px 0 var(--px-light); } /* ---------- 顶部导航：GBA 蓝绿渐变条 ---------- */ [data-theme='pixel'] .topbar { background: linear-gradient(#7ac958, #2f8a3a 55%, #1c5a28); border-bottom: 3px solid var(--px-border); backdrop-filter: none; -webkit-backdrop-filter: none; } [data-theme='pixel'] .brand-mark { border-radius: 0; border: 2px solid var(--px-border); background-image: url("data:image/svg+xml;utf8,"); background-size: 100% 100%; background-position: center; font-size: 0; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.45), inset -2px -2px 0 rgba(0, 0, 0, 0.35); } [data-theme='pixel'] .brand strong { font-family: 'Press Start 2P', monospace; font-size: 13px; letter-spacing: 0; color: #fff; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); } [data-theme='pixel'] .brand span { color: rgba(255, 255, 255, 0.85); } [data-theme='pixel'] .nav-link { color: rgba(255, 255, 255, 0.9); border-radius: 0; } [data-theme='pixel'] .nav-link:hover { background: rgba(0, 0, 0, 0.18); color: #fff; } [data-theme='pixel'] .nav-link.active { background: var(--px-gold); color: var(--px-text); box-shadow: inset -2px -2px 0 var(--px-shadow), inset 2px 2px 0 #fff; font-weight: 800; } [data-theme='pixel'] .nav-link.nav-import { background: var(--px-red); color: #fff; border: 2px solid var(--px-border); box-shadow: inset -2px -2px 0 var(--px-red-d), inset 2px 2px 0 var(--px-red-l); } [data-theme='pixel'] .nav-link.nav-import:hover { background: #d85a4c; } [data-theme='pixel'] .top-note { color: #fff; } [data-theme='pixel'] .user-menu-btn { border-radius: 0; color: #fff; } [data-theme='pixel'] .user-menu-btn:hover { background: rgba(0, 0, 0, 0.18); } [data-theme='pixel'] .user-menu-btn .caret { border-top-color: #fff; } [data-theme='pixel'] .user-menu-dropdown { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window); box-shadow: inset 2px 2px 0 var(--px-light), inset -2px -2px 0 var(--px-shadow), 4px 4px 0 rgba(0, 0, 0, 0.25); } [data-theme='pixel'] .user-menu-link { border-radius: 0; color: var(--px-text); } [data-theme='pixel'] .user-menu-link:hover { background: var(--px-green); color: #fff; } [data-theme='pixel'] .user-menu-logout { color: var(--px-red); } [data-theme='pixel'] .user-menu-logout:hover { background: var(--px-red); color: #fff; } [data-theme='pixel'] .top-note .ghost { background: rgba(255, 255, 255, 0.16); color: #fff; border: 2px solid var(--px-border); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.25), inset 2px 2px 0 rgba(255, 255, 255, 0.25); } [data-theme='pixel'] .top-note .ghost:hover { background: rgba(255, 255, 255, 0.3); } [data-theme='pixel'] .status-dot { border-radius: 0; background: var(--px-gold); border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: none; animation: none; } /* ---------- 输入框 ---------- */ [data-theme='pixel'] input[type='text'], [data-theme='pixel'] input[type='search'], [data-theme='pixel'] input[type='password'], [data-theme='pixel'] input[type='date'], [data-theme='pixel'] input[type='datetime-local'], [data-theme='pixel'] input[type='number'], [data-theme='pixel'] input:not([type]), [data-theme='pixel'] select { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-field); color: var(--px-text); box-shadow: inset 2px 2px 0 #e6dcb8; } [data-theme='pixel'] input:focus, [data-theme='pixel'] select:focus { border-color: var(--px-green-d); box-shadow: inset 2px 2px 0 #e6dcb8, 0 0 0 2px var(--px-gold); } /* ---------- 页头 ---------- */ [data-theme='pixel'] .eyebrow { border-radius: 0; background: var(--px-gold); color: var(--px-text); border: 2px solid var(--px-border); letter-spacing: 0.12em; box-shadow: inset -2px -2px 0 var(--px-shadow), inset 2px 2px 0 #fff; } [data-theme='pixel'] .page-head .sub, [data-theme='pixel'] .back-link { color: var(--px-muted); } [data-theme='pixel'] .back-link:hover { color: var(--px-text); } /* ---------- 统计卡 ---------- */ [data-theme='pixel'] .stat-card { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window); box-shadow: inset 2px 2px 0 var(--px-light), inset -2px -2px 0 var(--px-shadow); } [data-theme='pixel'] .stat-card:hover { transform: translateY(-1px); box-shadow: inset 2px 2px 0 var(--px-light), inset -2px -2px 0 var(--px-shadow), 0 4px 0 rgba(0, 0, 0, 0.25); } [data-theme='pixel'] .stat-value { font-family: inherit; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--px-text); } [data-theme='pixel'] .stat-value small { font-size: 13px; font-weight: 700; color: var(--px-muted); } [data-theme='pixel'] .stat-label { color: var(--px-muted); font-size: 11px; } /* ---------- 卡片 / 面板：米色双边框窗口 ---------- */ [data-theme='pixel'] .card { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window); box-shadow: inset 2px 2px 0 var(--px-light), inset -2px -2px 0 var(--px-shadow), 4px 4px 0 rgba(0, 0, 0, 0.22); } [data-theme='pixel'] .card h2 { color: var(--px-green-d); } [data-theme='pixel'] .card.collapsible { padding: 0; } [data-theme='pixel'] .card.collapsible summary::after { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window2); color: var(--px-muted); } /* 行卡片 / 行条目 */ [data-theme='pixel'] .row-card, [data-theme='pixel'] .act-row, [data-theme='pixel'] .ms-chip, [data-theme='pixel'] .lit-row, [data-theme='pixel'] .poi-item, [data-theme='pixel'] .job-hist-row, [data-theme='pixel'] .cat-card { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-field); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.6), inset -2px -2px 0 rgba(0, 0, 0, 0.08); } [data-theme='pixel'] .row-card:hover, [data-theme='pixel'] .act-row:hover, [data-theme='pixel'] .ms-chip:hover, [data-theme='pixel'] .lit-row:hover, [data-theme='pixel'] .poi-item:hover, [data-theme='pixel'] .job-hist-row:hover, [data-theme='pixel'] .cat-card:hover { border-color: var(--px-green); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.6), inset -2px -2px 0 rgba(0, 0, 0, 0.08), 0 0 0 2px var(--px-gold); transform: translateY(-1px); } [data-theme='pixel'] .row-main span, [data-theme='pixel'] .poi-item-main span { color: var(--px-muted); } [data-theme='pixel'] .row-meta { font-family: inherit; font-size: 12px; line-height: 1.5; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--px-text); } [data-theme='pixel'] .more-link { color: var(--px-green-d); } [data-theme='pixel'] .more-link:hover { color: var(--px-text); } /* ---------- 空状态 ---------- */ [data-theme='pixel'] .empty-cta { border: 2px dashed var(--px-border-soft); border-radius: 0; background: var(--px-window); } [data-theme='pixel'] .empty-cta-mark { border-radius: 0; background: var(--px-window2); border: 2px solid var(--px-border); box-shadow: inset 2px 2px 0 var(--px-light), inset -2px -2px 0 var(--px-shadow); color: var(--px-green-d); } [data-theme='pixel'] .empty-cta p { color: var(--px-muted); } /* ---------- 活动表格 ---------- */ [data-theme='pixel'] .act-head { color: var(--px-muted); letter-spacing: 0.06em; } [data-theme='pixel'] .act-date, [data-theme='pixel'] .act-dist, [data-theme='pixel'] .act-dur, [data-theme='pixel'] .act-ascent, [data-theme='pixel'] .act-sport { font-family: inherit; font-size: 12px; line-height: 1.5; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } [data-theme='pixel'] .act-dur, [data-theme='pixel'] .act-dist { color: var(--px-text); font-weight: 700; } [data-theme='pixel'] .act-date { color: var(--px-muted); } /* ---------- 视图切换（方块 / 条形） ---------- */ [data-theme='pixel'] .view-switch { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window2); } [data-theme='pixel'] .view-btn { border-radius: 0; background: var(--px-window2); color: var(--px-muted); } [data-theme='pixel'] .view-btn + .view-btn { border-left: 2px solid var(--px-border); } [data-theme='pixel'] .view-btn:hover { color: var(--px-text); } [data-theme='pixel'] .view-btn.active { background: var(--px-gold); color: var(--px-text); box-shadow: inset -2px -2px 0 var(--px-shadow), inset 2px 2px 0 #fff; } /* ---------- 活动卡片网格 ---------- */ [data-theme='pixel'] .act-card { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window); box-shadow: inset 2px 2px 0 var(--px-light), inset -2px -2px 0 var(--px-shadow); } [data-theme='pixel'] .act-card:hover { border-color: var(--px-border); transform: translateY(-1px); box-shadow: inset 2px 2px 0 var(--px-light), inset -2px -2px 0 var(--px-shadow), 0 4px 0 rgba(0, 0, 0, 0.25); } [data-theme='pixel'] .act-card-icon { border-radius: 0; background: var(--px-gold); border: 2px solid var(--px-border); color: var(--px-text); box-shadow: inset -2px -2px 0 var(--px-shadow), inset 2px 2px 0 #fff; } [data-theme='pixel'] .act-card-meta { color: var(--px-muted); } [data-theme='pixel'] .act-card-stats { border-top: 2px solid var(--px-border-soft); } [data-theme='pixel'] .act-card-stats b { font-family: inherit; font-size: 13px; line-height: 1.5; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; } [data-theme='pixel'] .act-card-stats b small { font-size: 9px; color: var(--px-muted); margin-left: 3px; } [data-theme='pixel'] .act-card-stats span { color: var(--px-muted); } [data-theme='pixel'] .act-map { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.3); } /* ---------- 里程碑 ---------- */ [data-theme='pixel'] .ms-card { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window); box-shadow: inset 2px 2px 0 var(--px-light), inset -2px -2px 0 var(--px-shadow); } [data-theme='pixel'] .ms-card:hover { transform: translateY(-1px); box-shadow: inset 2px 2px 0 var(--px-light), inset -2px -2px 0 var(--px-shadow), 0 4px 0 rgba(0, 0, 0, 0.25); } [data-theme='pixel'] .ms-badge { border-radius: 0; background: var(--px-green); border: 2px solid var(--px-border); box-shadow: inset -2px -2px 0 var(--px-green-d), inset 2px 2px 0 #a0e890; color: #fff; } [data-theme='pixel'] .ms-desc { color: var(--px-muted); } [data-theme='pixel'] .ms-date { font-family: inherit; font-size: 12px; line-height: 1.5; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--px-muted); } [data-theme='pixel'] .ms-tag { border-radius: 0; border: 2px solid var(--px-border); } [data-theme='pixel'] .ms-tag-hist { background: #e0e0c8; color: #5a5440; } [data-theme='pixel'] .ms-tag-dyn { background: var(--px-gold); color: var(--px-text); } /* ---------- 成就图鉴（里程碑） ---------- */ [data-theme='pixel'] .ms-group { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window); box-shadow: inset 2px 2px 0 var(--px-light), inset -2px -2px 0 var(--px-shadow); } [data-theme='pixel'] .ms-group-label { color: var(--px-green-d); } [data-theme='pixel'] .ms-group-val { color: var(--px-green-d); font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } [data-theme='pixel'] .ms-tile { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window2); color: var(--px-muted); box-shadow: inset 2px 2px 0 var(--px-light), inset -2px -2px 0 var(--px-shadow); } [data-theme='pixel'] .ms-tile.achieved { background: #eef0c0; color: var(--px-text); border-color: var(--px-green-d); } [data-theme='pixel'] .ms-tile-check { color: var(--px-green-d); } [data-theme='pixel'] .ms-tile-progress { border-radius: 0; border: 1px solid var(--px-border); background: #d8cfa8; } [data-theme='pixel'] .ms-tile-progress i { border-radius: 0; background: linear-gradient(#8ad868, var(--px-green) 55%, var(--px-green-d)); } /* ---------- 活动详情 ---------- */ [data-theme='pixel'] .stat-list div { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window2); } [data-theme='pixel'] .stat-list strong { font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; } [data-theme='pixel'] .stat-list span { color: var(--px-muted); } [data-theme='pixel'] .raw-info { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window2); } [data-theme='pixel'] .raw-info summary::before { color: var(--px-green-d); } [data-theme='pixel'] .raw-info strong { color: var(--px-muted); } [data-theme='pixel'] .field-label { color: var(--px-muted); } [data-theme='pixel'] .danger-confirm { border: 2px dashed var(--px-red); border-radius: 0; background: #f8e8d8; } [data-theme='pixel'] .danger-confirm label, [data-theme='pixel'] .danger-zone p { color: var(--px-muted); } [data-theme='pixel'] .badge-archived { border-radius: 0; border: 2px solid #9a9480; background: #e8e0c8; color: #5a5440; } /* ---------- 地图卡片（地图本体保持真实） ---------- */ [data-theme='pixel'] .map-card, [data-theme='pixel'] .city-map-card, [data-theme='pixel'] .poi-map-card { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window); box-shadow: inset 2px 2px 0 var(--px-light), inset -2px -2px 0 var(--px-shadow); } [data-theme='pixel'] .detail-map, [data-theme='pixel'] .cities-map, [data-theme='pixel'] .poi-map { border-radius: 0; border: 2px solid var(--px-border); } [data-theme='pixel'] .maplibregl-ctrl button { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window2); color: var(--px-text); box-shadow: inset -2px -2px 0 var(--px-shadow), inset 2px 2px 0 var(--px-light); } [data-theme='pixel'] .map-mode-bar { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window2); box-shadow: inset -2px -2px 0 var(--px-shadow), inset 2px 2px 0 var(--px-light); } [data-theme='pixel'] .map-mode-btn { color: var(--px-muted); } [data-theme='pixel'] .map-mode-btn:hover { color: var(--px-text); } [data-theme='pixel'] .map-mode-btn + .map-mode-btn { border-left: 2px solid var(--px-border); } [data-theme='pixel'] .map-mode-btn.active { background: var(--px-green); color: #fff; } /* ---------- 视频工作室 ---------- */ [data-theme='pixel'] .video-frame { border-radius: 0; border: 3px solid var(--px-border); box-shadow: inset 0 0 0 2px #2a362c, 6px 6px 0 rgba(0, 0, 0, 0.3); } [data-theme='pixel'] .metrics strong { font-family: inherit; font-size: 18px; font-weight: 800; line-height: 1.35; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } [data-theme='pixel'] .metrics strong small { font-size: 11px; } [data-theme='pixel'] .metrics.secondary strong { font-size: 10px; } [data-theme='pixel'] .metrics span { letter-spacing: 0.1em; } [data-theme='pixel'] .control-panel { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window); box-shadow: inset 2px 2px 0 var(--px-light), inset -2px -2px 0 var(--px-shadow), 4px 4px 0 rgba(0, 0, 0, 0.22); } [data-theme='pixel'] .settings-block { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window2); box-shadow: inset 2px 2px 0 var(--px-light), inset -2px -2px 0 var(--px-shadow); } [data-theme='pixel'] .settings-block h2 { color: var(--px-green-d); } [data-theme='pixel'] .settings-block label { color: var(--px-muted); } [data-theme='pixel'] .segmented span, [data-theme='pixel'] .choice-grid span, [data-theme='pixel'] .toggle-list label { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-field); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.06); } [data-theme='pixel'] .segmented input:checked + span, [data-theme='pixel'] .choice-grid input:checked + span { background: var(--px-gold); color: var(--px-text); border-color: var(--px-border); box-shadow: inset 2px 2px 0 var(--px-shadow), inset -2px -2px 0 var(--px-light); } [data-theme='pixel'] .swatch { border-radius: 0; border: 2px solid var(--px-border); } [data-theme='pixel'] .auto-camera, [data-theme='pixel'] .tuning-grid label, [data-theme='pixel'] .color-row { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window2); } [data-theme='pixel'] .auto-camera strong, [data-theme='pixel'] .tuning-grid label { color: var(--px-text); } [data-theme='pixel'] .auto-camera small, [data-theme='pixel'] .tuning-grid output { color: var(--px-muted); } [data-theme='pixel'] .tuning-grid output { color: var(--px-green-d); } [data-theme='pixel'] .generate { background: var(--px-red); color: #fff; box-shadow: inset -3px -3px 0 var(--px-red-d), inset 3px 3px 0 var(--px-red-l); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35); } [data-theme='pixel'] .generate:hover { background: #d85a4c; } [data-theme='pixel'] .generate:active { box-shadow: inset 3px 3px 0 var(--px-red-d), inset -3px -3px 0 var(--px-red-l); transform: translateY(1px); } [data-theme='pixel'] .field-note { color: var(--px-green-d); } [data-theme='pixel'] .job-panel { border-radius: 0; border: 2px solid var(--px-green-d); background: #e6f2e0; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.5), inset -2px -2px 0 rgba(0, 0, 0, 0.06); } [data-theme='pixel'] .job-head span { color: var(--px-green-d); } [data-theme='pixel'] .progress { border-radius: 0; border: 2px solid var(--px-border); background: #d8cfa8; height: 13px; } [data-theme='pixel'] .progress i { border-radius: 0; background: linear-gradient(#8ad868, var(--px-green) 55%, var(--px-green-d)); } [data-theme='pixel'] .download { border-radius: 0; background: var(--px-blue); color: #fff; border: 2px solid var(--px-border); box-shadow: inset -2px -2px 0 var(--px-blue-d), inset 2px 2px 0 #a8c8f0; } [data-theme='pixel'] .job-history h3 { color: var(--px-muted); } [data-theme='pixel'] .job-panel pre { border-radius: 0; border: 2px solid var(--px-border); background: #10201a; } [data-theme='pixel'] .job-result video, [data-theme='pixel'] .video-modal video { border-radius: 0; border: 2px solid var(--px-border); } /* ---------- 弹窗 / toast ---------- */ [data-theme='pixel'] .modal-mask { background: rgba(16, 20, 16, 0.62); } [data-theme='pixel'] .modal-card { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window); box-shadow: inset 2px 2px 0 var(--px-light), inset -2px -2px 0 var(--px-shadow), 6px 6px 0 rgba(0, 0, 0, 0.3); } [data-theme='pixel'] .modal-card h2 { color: var(--px-green-d); } [data-theme='pixel'] .modal-sub { color: var(--px-muted); } [data-theme='pixel'] #toast { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window); box-shadow: inset 2px 2px 0 var(--px-light), inset -2px -2px 0 var(--px-shadow), 4px 4px 0 rgba(0, 0, 0, 0.3); } [data-theme='pixel'] #toast.error { border-color: var(--px-red); color: var(--px-red-d); } [data-theme='pixel'] #toast.warn { border-color: var(--px-green); color: var(--px-green-d); } /* ---------- 城市手动添加弹窗 ---------- */ [data-theme='pixel'] .manual-hint { border-radius: 0; border: 2px dashed var(--px-green-d); background: var(--px-window2); color: var(--px-text); } [data-theme='pixel'] .manual-map { border-radius: 0; border: 2px solid var(--px-border); } [data-theme='pixel'] .manual-result { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window2); } [data-theme='pixel'] .manual-result-btn { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-field); color: var(--px-text); } [data-theme='pixel'] .manual-result-btn:hover { border-color: var(--px-green); } /* ---------- 分类卡片 ---------- */ [data-theme='pixel'] .cat-head { color: var(--px-muted); } [data-theme='pixel'] .cat-cell b { font-family: inherit; font-size: 15px; font-weight: 800; line-height: 1.4; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; } [data-theme='pixel'] .cat-cell small { color: var(--px-muted); } /* ---------- 城市 ---------- */ [data-theme='pixel'] .filter-chip { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-gold); color: var(--px-text); box-shadow: inset -2px -2px 0 var(--px-shadow), inset 2px 2px 0 #fff; } [data-theme='pixel'] .chip-clear { color: var(--px-text); } [data-theme='pixel'] .lit-prov { color: var(--px-green-d); } [data-theme='pixel'] .lit-name em { color: var(--px-muted); } [data-theme='pixel'] .lit-row b { font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--px-text); } /* ---------- 兴趣点 ---------- */ [data-theme='pixel'] .poi-hint { border-radius: 0; border: 2px solid var(--px-border); background: rgba(16, 20, 16, 0.88); } [data-theme='pixel'] .poi-hint .ghost { border-radius: 0; border: 2px solid rgba(255, 255, 255, 0.5); background: transparent; } [data-theme='pixel'] .poi-info { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window); box-shadow: inset 2px 2px 0 var(--px-light), inset -2px -2px 0 var(--px-shadow); } [data-theme='pixel'] .poi-info p { color: var(--px-muted); } [data-theme='pixel'] .poi-marker { filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.3)); } [data-theme='pixel'] .poi-visited-tag { border-radius: 0; border: 2px solid var(--px-green-d); background: var(--px-gold); color: var(--px-text); } [data-theme='pixel'] .poi-dot { border-radius: 0; border: 2px solid var(--px-border); box-shadow: none; } [data-theme='pixel'] .poi-item-act { color: var(--px-muted); } /* ---------- 登录页 ---------- */ [data-theme='pixel'] .login-card { border-radius: 0; border: 2px solid var(--px-border); background: var(--px-window); box-shadow: inset 2px 2px 0 var(--px-light), inset -2px -2px 0 var(--px-shadow), 6px 6px 0 rgba(0, 0, 0, 0.3); } [data-theme='pixel'] .login-sub, [data-theme='pixel'] .login-hint { color: var(--px-muted); } [data-theme='pixel'] .login-hint { border-top: 2px solid var(--px-border-soft); } [data-theme='pixel'] .form-error { border-radius: 0; border: 2px solid var(--px-red); background: #f8e0d8; color: var(--px-red-d); } /* 登录页的主题切换按钮：固定在右上角（两套主题通用定位） */ .login-wrap .theme-toggle { position: absolute; top: 18px; right: 18px; z-index: 2; } /* ---------- 底部精灵栏（仅像素主题） ---------- */ #pxSprites { display: none; } [data-theme='pixel'] #pxSprites { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; pointer-events: none; } [data-theme='pixel'] .px-sprite-row { display: flex; justify-content: center; align-items: flex-end; gap: 36px; padding-bottom: 2px; } [data-theme='pixel'] .px-sprite { width: 34px; height: 34px; image-rendering: pixelated; image-rendering: crisp-edges; animation: px-dance 3s ease-in-out infinite; } [data-theme='pixel'] .px-sprite:nth-child(2n) { animation-delay: -0.7s; } [data-theme='pixel'] .px-sprite:nth-child(3n) { animation-delay: -1.4s; } [data-theme='pixel'] .px-ground { height: 5px; border-top: 2px solid #3c3c34; background: repeating-linear-gradient(90deg, #6a7a62 0 6px, #55644e 6px 12px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18); } @keyframes px-dance { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(3px, -3px); } 40% { transform: translate(6px, 0); } 60% { transform: translate(3px, -3px); } 80% { transform: translate(0, 0); } } /* 底部留出空间，避免被精灵栏遮挡 */ [data-theme='pixel'] .app-main { padding-bottom: 60px; } [data-theme='pixel'] .login-wrap { padding-bottom: 60px; }