* { margin: 0; padding: 0; box-sizing: border-box; } /* Keyboard focus: hidden by default, visible only when navigating by keyboard */ *:focus { outline: none; } *:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; border-radius: 2px; } /* ========== THEME VARIABLES ========== */ /* Fallback/default theme variables. Guarantees a VISIBLE background even when carries no (or an undefined) theme class — e.g. a legacy saved state that references "theme-a" which has no CSS rule. Without this, `body{background: var(--body-bg)}` resolves to an invalid value and the page renders blank white. Theme-specific rules (body.theme-b/c/w/a) below override these. */ :root { --body-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); --body-bg-attachment: fixed; --body-overlay: none; } /* Dark theme 鈥?deep navy with 3D depth */ body.theme-b { --body-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); --body-bg-attachment: fixed; --body-overlay: none; --text-main: #e8e8f0; --text-dim: #8892b0; --panel-bg: rgba(26,26,46,1); --panel-blur: blur(20px); --panel-border: rgba(255,255,255,0.08); --input-bg: rgba(255,255,255,0.08); --input-border: rgba(255,255,255,0.35); --btn-bg: rgba(255,255,255,0.04); --btn-hover-bg: rgba(255,255,255,0.1); --btn-border: rgba(255,255,255,0.08); --favicon-bg: rgba(255,255,255,0.06); --card-hover-bg: rgba(255,255,255,0.06); --context-bg: rgba(26,26,46,0.95); --context-border: rgba(129,140,248,0.2); --scrollbar-color: rgba(129,140,248,0.15); --scrollbar-hover: rgba(129,140,248,0.3); --scrollbar-bg: transparent; --text-mid: rgba(232,228,216,0.55); --sep-color: rgba(255,255,255,0.08); --card-bg: rgba(255,255,255,0.04); --context-item-hover: rgba(255,255,255,0.08); --badge-color: rgba(148,163,184,0.3); --banner-bg: rgba(26,26,46,0.9); --banner-text: #e8e8f0; --engine-baidu: rgba(59,130,246,0.12); --engine-google: rgba(16,185,129,0.12); --engine-bing: rgba(99,102,241,0.12); --engine-github: rgba(148,163,184,0.12); } /* Eye-care theme 鈥?warm dark with reduced blue light */ body.theme-c { --body-bg: linear-gradient(135deg, #1c1c16 0%, #2a2418 50%, #1a1c10 100%); --body-bg-attachment: fixed; --body-overlay: none; --text-main: #e8e4d8; --text-dim: rgba(232,228,216,0.5); --text-mid: rgba(232,228,216,0.7); --panel-bg: rgba(40,38,28,1); --panel-blur: blur(20px); --panel-border: rgba(180,160,120,0.12); --card-bg: rgba(60,56,40,0.4); --card-hover-bg: rgba(80,76,56,0.5); --favicon-bg: rgba(60,56,40,0.35); --input-bg: rgba(40,38,28,0.5); --input-border: rgba(180,160,120,0.15); --btn-bg: rgba(40,38,28,0.45); --btn-hover-bg: rgba(60,56,40,0.55); --btn-border: rgba(180,160,120,0.12); --context-bg: rgba(28,26,18,0.96); --context-border: rgba(180,160,120,0.15); --sep-color: rgba(180,160,120,0.15); --scrollbar-color: rgba(180,160,120,0.2); --scrollbar-hover: rgba(180,160,120,0.4); --scrollbar-bg: transparent; } /* Warm theme 鈥?soft cream/parchment, easy on the eyes (no harsh white) */ body.theme-w { --body-bg: #f5ede0; --body-bg-attachment: scroll; --body-overlay: none; --text-main: #3d2f1f; --text-dim: #8b7355; --text-mid: #6b5a44; --panel-bg: #faf3e6; --panel-blur: none; --panel-border: #d9c9a8; --card-bg: #f9f1e0; --card-hover-bg: #f0e4ce; --favicon-bg: #ede0c4; --input-bg: #f9f1e0; --input-border: #d9c9a8; --btn-bg: #faf3e6; --btn-hover-bg: #f0e4ce; --btn-border: #d9c9a8; --context-bg: #faf3e6; --context-border: #d9c9a8; --sep-color: #d9c9a8; --scrollbar-color: #d9c9a8; --scrollbar-hover: #b8a484; --scrollbar-bg: #f5ede0; } /* Light theme (a) — clean blue-gray with a CLEARLY visible background (not blank white). Previously this theme had no CSS rule at all, so users whose saved state referenced "theme-a" fell back to no --body-bg and rendered a white screen. */ body.theme-a { --body-bg: linear-gradient(135deg, #eef2f7 0%, #e3e9f2 50%, #eef2f7 100%); --body-bg-attachment: fixed; --body-overlay: none; --text-main: #1f2937; --text-dim: #64748b; --text-mid: #475569; --panel-bg: rgba(255,255,255,1); --panel-blur: blur(20px); --panel-border: rgba(15,23,42,0.08); --card-bg: rgba(255,255,255,0.6); --card-hover-bg: rgba(255,255,255,0.92); --favicon-bg: #e8edf5; --input-bg: rgba(255,255,255,0.7); --input-border: rgba(15,23,42,0.12); --btn-bg: rgba(255,255,255,0.7); --btn-hover-bg: rgba(255,255,255,0.95); --btn-border: rgba(15,23,42,0.1); --context-bg: rgba(255,255,255,0.95); --context-border: rgba(15,23,42,0.1); --sep-color: rgba(15,23,42,0.1); --scrollbar-color: rgba(100,116,139,0.3); --scrollbar-hover: rgba(100,116,139,0.55); --scrollbar-bg: #eef2f7; } /* ========== BASE ========== */ body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; height: 100vh; overflow: hidden; background: var(--body-bg); background-attachment: var(--body-bg-attachment); color: var(--text-main); position: relative; transition: background 0.4s, color 0.3s; } /* Transitions only on interactive elements 鈥?not all children */ .interactive-element, .link-card, .link-card *, .engine-btn, .engine-btn *, .setting-btn, .setting-btn *, .quick-link-item, .quick-link-item *, .recent-item, .recent-item *, .context-menu-item, .context-menu-item *, .category-title, .category-title *, .favicon-box, .favicon-box *, .favicon-circle, .favicon-circle *, .search-box, .search-box *, .modal-btn, .modal-btn *, .bg-preset, .bg-preset *, .color-swatch, .color-swatch *, .cat-list-item, .cat-list-item *, input[type="range"], input[type="range"] * { transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, color 0.2s; } body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--body-overlay); pointer-events: none; z-index: 0; } /* Tech scan line effect */ /* Background image layer: should sit above body gradient but below content */ #bgLayer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; background-size: cover; background-position: center center; background-repeat: no-repeat; } #bgVideoLayer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none; } /* When a background image/video is active, make body gradient transparent and reduce panel opacity so the wallpaper is visible behind content */ body.has-bg-image, body.has-bg-video { background: transparent !important; } body.has-bg-image .left-panel, body.has-bg-image .right-panel, body.has-bg-image .main-area, body.has-bg-video .left-panel, body.has-bg-video .right-panel, body.has-bg-video .main-area { background: transparent !important; border: none !important; } body.has-bg-image .left-panel, body.has-bg-video .left-panel { --panel-alpha: calc(var(--op-qa-panel-bg, 0.18) * var(--global-block-opacity, 1)); } body.has-bg-image .right-panel, body.has-bg-video .right-panel { --panel-alpha: calc(var(--op-recent-panel-bg, 0.18) * var(--global-block-opacity, 1)); } body.has-bg-image .main-area, body.has-bg-video .main-area { --panel-alpha: calc(var(--op-main-area, 0.18) * var(--global-block-opacity, 1)); } body.has-bg-image .top-info-bar, body.has-bg-video .top-info-bar { background: transparent !important; border: none !important; --panel-alpha: calc(var(--op-top-info-bar, 0.22) * var(--global-block-opacity, 1)); } body.has-bg-image .search-box, body.has-bg-video .search-box { background: #ffffff !important; border: 0.5px solid rgba(0,0,0,0.08) !important; } body.has-bg-image .category-title, body.has-bg-video .category-title { --panel-alpha: calc(var(--op-category-title, 0.10) * var(--global-block-opacity, 1)); } body.has-bg-image .quick-link-item, body.has-bg-video .quick-link-item { opacity: calc(var(--op-quick-link-item, 0.80) * var(--global-block-opacity, 1)); } body.has-bg-image .recent-item, body.has-bg-video .recent-item { opacity: calc(var(--op-recent-item, 0.80) * var(--global-block-opacity, 1)); } /* Make panel title backgrounds transparent when wallpaper is active — they inherit glass from the parent panel's ::before */ body.has-bg-image .left-panel .panel-title, body.has-bg-image .right-panel .panel-title, body.has-bg-video .left-panel .panel-title, body.has-bg-video .right-panel .panel-title { background: transparent !important; } /* The panel title wrapper (.panel-title-bar) has an inline background; make it transparent on wallpaper too */ body.has-bg-image .left-panel .panel-title-bar, body.has-bg-image .right-panel .panel-title-bar, body.has-bg-video .left-panel .panel-title-bar, body.has-bg-video .right-panel .panel-title-bar { background: transparent !important; } /* Light themes keep the same transparent-panel approach; ::before provides the overlay via --panel-bg */ body.theme-w.has-bg-image .left-panel, body.theme-w.has-bg-image .right-panel, body.theme-w.has-bg-image .main-area, body.theme-w.has-bg-video .left-panel, body.theme-w.has-bg-video .right-panel, body.theme-w.has-bg-video .main-area { background: transparent !important; border: none !important; } body.theme-w.has-bg-image .top-info-bar, body.theme-w.has-bg-video .top-info-bar { background: transparent !important; border: none !important; } body.theme-w.has-bg-image .search-box, body.theme-w.has-bg-video .search-box { background: #ffffff !important; border: 0.5px solid rgba(0,0,0,0.08) !important; } /* Theme-specific panel title transparent background */ body.theme-w.has-bg-image .left-panel .panel-title, body.theme-w.has-bg-image .right-panel .panel-title, body.theme-w.has-bg-video .left-panel .panel-title, body.theme-w.has-bg-video .right-panel .panel-title { background: transparent !important; } body.theme-w.has-bg-image .left-panel .panel-title-bar, body.theme-w.has-bg-image .right-panel .panel-title-bar, body.theme-w.has-bg-video .left-panel .panel-title-bar, body.theme-w.has-bg-video .right-panel .panel-title-bar { background: transparent !important; } /* Ensure readability: slightly stronger text shadow / contrast on wallpaper */ body.has-bg-image .link-card, body.has-bg-video .link-card, body.has-bg-image .quick-link-item, body.has-bg-video .quick-link-item { text-shadow: 0 1px 2px rgba(0,0,0,0.35); } body.theme-w.has-bg-image .link-card, body.theme-w.has-bg-video .link-card { text-shadow: 0 1px 2px rgba(255,255,255,0.6); } .tb-theme-dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; cursor: pointer; border: 1.5px solid transparent; vertical-align: middle; margin: 0 2px; transition: transform 0.2s, border-color 0.2s; } .tb-theme-dot:hover { transform: scale(1.25); } .tb-theme-dot.active { border-color: var(--text-main); transform: scale(1.2); } #langToggle { transition: opacity 0.15s; } #langToggle:hover { opacity: 0.85 !important; } /* ========== DESIGN BADGE ========== */ .design-badge { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-25deg); font-size: 100px; font-weight: 900; color: var(--badge-color); pointer-events: none; z-index: 0; letter-spacing: 20px; white-space: nowrap; font-family: sans-serif; } /* ========== PREVIEW BANNER ========== */ .preview-banner { position: fixed; top: 0; left: 0; right: 0; background: var(--banner-bg); backdrop-filter: blur(10px); color: var(--banner-text); text-align: center; padding: 3px; font-size: 10px; font-weight: 500; z-index: 999; letter-spacing: 1px; } /* ========== TOP INFO BAR ========== */ .top-info-bar { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 14px; background: var(--panel-bg); backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur); border-bottom: 0.5px solid var(--panel-border); padding: 8px 0; font-size: 14px; z-index: 100; white-space: nowrap; overflow: hidden; } .top-info-bar-inner { width: 100%; /* Full-width bar: left group aligns with the content area via --top-bar-pad (computed by JS to match .content-area's left edge), while the right group (margin-left:auto) reaches the BROWSER'S far-right edge — NOT a centered max-width box. Do NOT re-add max-width/margin:auto here; that reintroduces the gap the user reported ("登录/注册不在最右边"). */ padding-left: var(--top-bar-pad, 70px); padding-right: 16px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; min-height: 36px; } /* Push the theme/RSS/lang/login group to the far-right edge of the bar. Uses flexbox margin-left:auto (NOT absolute positioning) so it never depends on a containing-block / position:relative chain and cannot revert. */ .top-right-group { margin-left: auto; flex-shrink: 0; } .top-info-bar::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,0.08) 50%, transparent 80%); } .top-info-bar .weather-group { display: flex; align-items: center; gap: 4px; cursor: pointer; padding: 2px 6px; border-radius: 6px; transition: background 0.2s; } .top-info-bar .weather-group:hover { background: var(--card-hover-bg); } .top-info-bar .weather-text { font-weight: 500; } .top-info-bar .weather-edit { font-size: 10px; opacity: 0.4; } .top-info-bar .sep { width: 1px; height: 16px; background: var(--sep-color); border-radius: 1px; } .top-info-bar .time-display { font-weight: 500; font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: 1px; } .top-info-bar .date-display { opacity: 0.65; font-size: 13px; font-weight: 400; } /* ===== Top-bar slots: keep a fixed position even when hidden ===== weather/time slots are wrapped in .top-slot. When hidden we add .slot-hidden: inner content becomes visibility:hidden (reserves its layout width so the bar never shifts) and pointer-events:none (inert). Right-clicking the empty (still space-occupying) slot shows a tiny in-place menu to restore it — no ghost icon, no jump to a settings panel. This replaces the old display:none that collapsed the slot. */ .top-info-bar .top-slot { display: inline-flex; align-items: center; position: relative; flex-shrink: 0; } .top-info-bar .top-slot.slot-hidden > .weather-group, .top-info-bar .top-slot.slot-hidden > .time-display, .top-info-bar .top-slot.slot-hidden > .date-display, .top-info-bar .top-slot.slot-hidden > .sep { visibility: hidden; pointer-events: none; } /* ========== NEW WINDOW HINT ========== */ .new-window-hint { position: fixed; top: 44px; left: 50%; transform: translateX(-50%); background: var(--context-bg); backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur); border: 0.5px solid var(--context-border); border-radius: 10px; padding: 6px 16px; font-size: 11px; color: var(--text-mid); z-index: 998; display: flex; align-items: center; gap: 8px; } /* ========== SEARCH MODULE ========== */ .search-module { display: flex; align-items: center; justify-content: center; margin: 4px auto 0; width: min(92vw, 1000px); min-width: 360px; max-width: 1000px; gap: 12px; } .search-box { position: relative; flex: 1; min-width: 0; flex-shrink: 1; display: flex; align-items: center; background: #ffffff; backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur); border: 0.5px solid rgba(0,0,0,0.08); border-radius: 18px; padding: 10px 20px; gap: 10px; height: 44px; max-height: 44px; overflow: visible; transition: border-color 0.3s, box-shadow 0.3s; } .search-box:focus-within { border-color: rgba(59,130,246,0.4); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); } /* The magnifier doubles as the search-box drag handle (see initPanelDrag 'search'). */ .search-box .search-icon { font-size: 22px; opacity: 0.45; color: #1f2937; cursor: grab; } .search-box .search-icon:active { cursor: grabbing; } .search-box .search-input-placeholder { flex: 1; background: none; border: none; outline: none; color: #4b5563; font-size: 17px; font-family: inherit; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-box .search-input-placeholder::placeholder { color: #9ca3af; } /* Force solid white search box in all states (Google/Baidu style) */ .search-box, body.theme-b .search-box, body.theme-c .search-box, body.theme-w .search-box, body.has-bg-image .search-box, body.has-bg-video .search-box, body.glass-off .search-box, body.glass-off.theme-b .search-box, body.glass-off.has-bg-image .search-box { background: #ffffff !important; border: 0.5px solid rgba(0,0,0,0.08) !important; } .search-box::before { background: transparent !important; opacity: 0 !important; } .search-box .search-icon { color: #1f2937 !important; } .search-box .search-input-placeholder { color: #4b5563 !important; } /* Auto-fill: main area expands when side panels hidden */ .content-area.auto-fill .main-area { flex: 1; } .search-box .search-input-placeholder[data-empty="1"]::before { content: attr(data-placeholder); color: var(--text-dim); opacity: 0.5; pointer-events: none; } .engine-btns { display: flex; gap: 6px; align-items: center; flex-shrink: 0; } .engine-btn { padding: 10px 18px; border-radius: 12px; border: 0.5px solid var(--btn-border); background: var(--btn-bg); color: var(--text-main); font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all 0.2s; white-space: nowrap; } /* Active/default engine button */ .engine-btn:has(span) { border-color: #818cf8 !important; background: rgba(129,140,248,0.18) !important; box-shadow: 0 0 8px rgba(129,140,248,0.15); } .engine-btn:hover { background: var(--btn-hover-bg); border-color: var(--text-dim); transform: translateY(-1px); } .engine-btn.engine-baidu { background: var(--engine-baidu); border-color: rgba(59,130,246,0.3); } .engine-btn.engine-google { background: var(--engine-google); border-color: rgba(16,185,129,0.3); } .engine-btn.engine-bing { background: var(--engine-bing); border-color: rgba(99,102,241,0.3); } .engine-btn.engine-github { background: var(--engine-github); border-color: rgba(156,163,175,0.3); } .engine-add { width: 36px; height: 36px; border-radius: 10px; border: 1px dashed var(--btn-border); background: transparent; color: var(--text-dim); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .engine-add:hover { background: var(--btn-hover-bg); color: var(--text-main); } /* ========== CONTENT AREA ========== */ /* Content area - wider to reduce edge gap */ .content-area { display: flex; gap: 0; width: 92vw; max-width: 1600px; margin: 0 auto; min-height: auto; min-width: 600px; overflow: visible; align-items: flex-start; } .left-panel { margin-right: 12px; display: flex; flex-direction: column; } .right-panel { margin-left: 12px; } .main-area { margin: 0 12px; } .main-area::-webkit-scrollbar { display: none; } .main-area::-webkit-scrollbar-thumb { background: transparent; } .main-area::-webkit-scrollbar-track { background: transparent; } .content-area.panel-right { flex-direction: row-reverse; } /* Right panel - recent visits */ .right-panel { width: 170px; flex-shrink: 0; min-height: 200px; background: var(--panel-bg); backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur); border: 0.5px solid var(--panel-border); border-radius: 16px; padding: 16px 12px; position: sticky; top: 0; max-height: calc(100vh - 200px); overflow-y: auto; scrollbar-width: none; } /* Todo & Calendar widget tabs (Pro-gated right panel) */ .todo-tab { flex: 1; font-size: 13px; padding: 5px 0; border: 0.5px solid var(--panel-border); background: transparent; color: var(--text-main); border-radius: 6px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .todo-tab-active { background: rgba(251,191,36,.15); color: #fbbf24; border-color: rgba(251,191,36,.3); } .todo-tab:hover:not(.todo-tab-active) { background: rgba(251,191,36,.08); } /* Widget panel title bar — warm accent to match todo tab aesthetic */ #rssWidgetPanel > .panel-title-bar:first-child, #todoWidgetPanel > .panel-title-bar:first-child { background: linear-gradient(135deg, rgba(251,191,36,.08), rgba(251,191,36,.04)); border: 0.5px solid rgba(251,191,36,.12); } /* ===== Global golden title hue ===== Apply the todo panel's warm yellow backdrop to every section header (left "常用访问" bar, right "最近访问" bar, and category titles) so all titles share one consistent tone. The title-bar wrappers carry an inline background, so !important is required to override it. Wallpaper themes still win (their body.has-bg-* rules have higher specificity + !important). */ .left-panel .panel-title-bar, .right-panel .panel-title-bar { background: linear-gradient(135deg, rgba(251,191,36,.13), rgba(251,191,36,.05)) !important; border: 0.5px solid rgba(251,191,36,.18); } .right-panel::-webkit-scrollbar { display: none; } .right-panel .panel-title { font-size: 12px; color: var(--text-dim); font-weight: 600; margin-bottom: 8px; padding: 6px 10px; background: var(--card-hover-bg); border-radius: 8px; } .right-panel .recent-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 12px; color: var(--text-dim); transition: all 0.15s; } .right-panel .recent-item:hover { background: var(--card-hover-bg); color: var(--text-main); } .right-panel .recent-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0; } .right-panel .recent-item .link-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .left-panel { width: 170px; flex-shrink: 0; background: var(--panel-bg); backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur); border: 0.5px solid var(--panel-border); border-radius: 16px; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; max-height: calc(100vh - 12vh - 130px); overflow-y: auto; scrollbar-width: none; } .left-panel::after { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); border-radius: 1px; } .left-panel::-webkit-scrollbar { display: none; } .left-panel .panel-title { font-size: 12px; color: var(--text-dim); font-weight: 600; margin-bottom: 8px; padding: 6px 10px; background: var(--card-hover-bg); border-radius: 8px; } .quick-link-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: grab; transition: all 0.15s; position: relative; } .quick-link-item:active { cursor: grabbing; } .quick-link-item:hover { background: var(--card-hover-bg); } .quick-link-item:hover .favicon-circle { background: var(--card-bg) !important; transform: scale(1.15); } .quick-link-item:active { transform: scale(0.97); } .quick-link-item .favicon-circle { background: var(--card-bg) !important; width: 28px; height: 28px; border-radius: 7px; background: var(--favicon-bg); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; transition: transform 0.2s; overflow: hidden; } .quick-link-item .favicon-circle img { width: 28px; height: 28px; object-fit: contain; border-radius: 7px; } .quick-link-item .link-name { font-size: 13px; color: var(--text-main); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .quick-link-item .link-action { opacity: 0; font-size: 14px; color: var(--text-dim); transition: opacity 0.15s; cursor: pointer; } .quick-link-item:hover .link-action { opacity: 1; } .quick-link-add { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 8px 8px 8px; border-radius: 10px; border: 1px dashed var(--panel-border); color: var(--text-dim); font-size: 11px; cursor: pointer; margin-top: auto; transition: all 0.2s; } .quick-link-add:hover { background: var(--btn-hover-bg); color: var(--text-main); } .main-area { flex: 1; min-width: 0; background: var(--panel-bg); backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur); border: 0.5px solid var(--panel-border); border-radius: 16px; padding: 18px 16px 30px; position: relative; z-index: 1; overflow-y: auto; max-height: calc(100vh - 12vh - 130px); scrollbar-width: none; } .left-panel, .right-panel { position: relative; z-index: 50; } /* RSS / Todo widgets: floating overlays (position:fixed) so they overlay the page and never squeeze the main body when shown. Overrides the .right-panel relative positioning via the higher-specificity id selector. */ #rssWidgetPanel, #todoWidgetPanel { position: fixed; top: 56px; width: 240px; max-height: calc(100vh - 80px); overflow-y: auto; margin: 0; z-index: 110; } /* Widget content — readable base size (overrides inline 10-11px) */ #rssWidgetPanel { font-size: 13px; } #rssWidgetPanel #rssWidgetContent { font-size: 13px; } #todoWidgetPanel { font-size: 13px; } #todoWidgetPanel #todoList { font-size: 13px; } #todoWidgetPanel #todoCalGrid { font-size: 13px; } .category-section { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; overflow: hidden; } .category-section.hidden-cat { opacity: 0; max-height: 0; margin-bottom: 0; pointer-events: none; visibility: hidden; overflow: hidden !important; } .category-section.hidden-cat::before { display: none; } .category-title { display: block; width: var(--cat-title-width, 65px); flex-shrink: 0; transition: width 0.2s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 36px; line-height: 36px; font-size: 15px; font-weight: 700; color: var(--text-main); padding: 0 12px; border-radius: 8px; background: transparent; border: none; border-left: 4px solid rgba(251,191,36,0.5); flex-shrink: 0; cursor: context-menu; user-select: none; letter-spacing: 0.5px; transition: background 0.2s; /* Use a pseudo-element tooltip instead of overflowing the element */ position: relative; } .category-title:hover { background: var(--panel-bg); backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur); border-radius: 8px; z-index: 10; } body.theme-b .category-title { border-left-color: rgba(251,191,36,0.85); box-shadow: 0 2px 12px rgba(251,191,36,0.1); } .link-cards { display: flex; flex-wrap: wrap; gap: 6px; min-height: 44px; border-radius: 8px; transition: background 0.15s, box-shadow 0.15s; } .link-cards:empty { min-height: 44px; } .link-cards.drag-over-empty { background: rgba(99,102,241,0.1); box-shadow: inset 0 0 0 2px dashed rgba(99,102,241,0.4); } /* ===== Favorite Links module (常用链接) — 样式对齐 Dev 分类行 ===== */ .fav-module { margin: 10px 0; padding: 12px 18px; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 18px; box-shadow: 0 6px 22px rgba(0,0,0,0.18); backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur); text-align: center; } .fav-title { display: none; } .fav-title::before { content: ''; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--accent-color); margin: 0 auto 10px; } .fav-cards { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 44px; border-radius: 8px; transition: background 0.15s, box-shadow 0.15s; } .fav-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 68px; padding: 8px 4px 6px; border-radius: 14px; background: var(--card-bg); cursor: pointer; transition: all 0.2s; color: var(--text-muted); font-size: 22px; } .fav-add:hover { background: var(--card-hover-bg); color: var(--accent-color); transform: translateY(-2px); } .fav-add-plus { line-height: 1; } .fav-add-label { font-size: 12px; } /* .fav-card 基础/hover/3D/dragging 已与 .link-card 合并（见上）。此处仅补回 fav-card 内部 favicon/label 的尺寸覆盖，使常用链接视觉与主体卡片一致 */ .fav-card .favicon-box img { width: 40px; height: 40px; object-fit: contain; border-radius: 12px; } .fav-card .link-label { font-size: 12px; color: var(--text-mid); text-align: center; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62px; opacity: calc(var(--op-link-label, 1) * var(--global-block-opacity, 1)); } /* Category password protection */ .category-section { position: relative; } .cat-lock-overlay { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(0,0,0,0.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; transition: opacity 0.15s; } .cat-lock-hint { font-size: 12px; color: var(--text-main); opacity: 0.9; padding: 6px 12px; border-radius: 6px; background: var(--card-bg); border: 0.5px solid var(--panel-border); pointer-events: none; } .cat-lock-icon { margin-left: 4px; font-size: 12px; opacity: 0.7; vertical-align: middle; } /* Empty-state placeholders */ .cat-empty { flex: 1 1 100%; display: flex; align-items: center; min-height: 36px; box-sizing: border-box; padding: 6px 12px; border-radius: 10px; font-size: 12px; color: var(--text-dim); background: var(--card-bg); border: 1px dashed var(--panel-border); user-select: none; } .qa-empty, .recent-empty { padding: 10px 12px; margin: 4px 0; border-radius: 10px; font-size: 12px; color: var(--text-dim); text-align: center; background: var(--card-bg); border: 1px dashed var(--panel-border); user-select: none; } .link-card, .fav-card { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 68px; padding: 8px 4px 6px; border-radius: 14px; background: var(--card-bg); cursor: pointer; transition: all 0.2s; position: relative; } .link-card:hover, .fav-card:hover { background: var(--card-hover-bg); transform: translateY(-2px); } .link-card.dragging, .fav-card.dragging { opacity: 0.4; transform: scale(0.95); } .link-card, .fav-card { transition: transform 0.2s, margin 0.2s, border-color 0.15s; } /* ========== THEME: 3D 绔嬩綋 ========== */ body.theme-b .link-card, body.theme-b .fav-card { perspective: 600px; } body.theme-b .link-card:hover, body.theme-b .fav-card:hover { transform: translateY(-4px) rotateX(3deg) rotateY(-2deg); } body.theme-b .link-card:hover .link-label { transform: translateZ(4px); } body.theme-b .quick-link-item { perspective: 400px; } body.theme-b .quick-link-item.dragging { opacity: 0.4; transform: scale(0.96); } body.theme-b .quick-link-item:hover { transform: translateX(4px) rotateY(-1deg); } body.theme-b .search-box { background: #ffffff; box-shadow: 0 4px 16px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(0,0,0,0.06); } body.theme-b .search-box:focus-within { box-shadow: 0 12px 32px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(59,130,246,0.2); } body.theme-b .search-box .search-icon { color: #1f2937; } body.theme-b .engine-btn { box-shadow: 0 2px 6px rgba(0,0,0,0.08); } body.theme-b .engine-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); } body.theme-b .left-panel, body.theme-b .top-info-bar { box-shadow: 0 8px 32px rgba(0,0,0,0.1); } body.theme-b .setting-btn:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.14); } body.theme-b .category-title { box-shadow: 0 2px 8px rgba(0,0,0,0.06); } /* ========== Favicon Box (base styles) ========== */ .favicon-box { background: var(--card-bg) !important; width: 46px; height: 46px; border-radius: 12px; background: var(--favicon-bg); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; transition: all 0.2s; overflow: hidden; } .link-card .favicon-box img { width: 46px; height: 46px; object-fit: contain; border-radius: 12px; } .link-card .link-label { font-size: 12px; color: var(--text-mid); text-align: center; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62px; } /* ========== CONTEXT MENU ========== */ .context-menu { position: fixed; background: var(--context-bg); backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur); border: 0.5px solid var(--context-border); border-radius: 12px; padding: 6px; min-width: 190px; z-index: 1000; display: none; box-shadow: 0 8px 32px rgba(0,0,0,0.3); } .context-menu.show { display: block; } .context-menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--text-main); transition: all 0.15s; } .context-menu-item:hover { background: var(--context-item-hover); } .context-menu-item .menu-icon { font-size: 14px; width: 18px; text-align: center; } .context-menu-item .menu-shortcut { color: var(--text-dim); font-size: 11px; margin-left: auto; } .menu-check { color: #10b981; font-weight: bold; margin-left: auto; font-size: 12px; } .context-menu .menu-divider { height: 1px; background: var(--context-border); margin: 4px 8px; } /* ========== SETTINGS PANEL ========== */ .settings-panel { position: fixed; bottom: 20px; right: 20px; display: flex; gap: 8px; z-index: 300; max-width: calc(100vw - 40px); flex-wrap: wrap; justify-content: flex-end; /* Prevent layout collapse: always horizontal row, never column stack */ flex-direction: row !important; align-items: center !important; /* Guard against re-parenting or CSS reset breaking fixed position */ left: auto !important; top: auto !important; transform: none !important; } .setting-btn { width: auto; min-width: 56px; height: 38px; border-radius: 10px; padding: 6px 14px; border: 0.5px solid var(--btn-border); background: var(--btn-bg); backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur); display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: all 0.2s; color: var(--text-main); white-space: nowrap; position: relative; } .setting-btn:hover { background: var(--btn-hover-bg); border-color: var(--text-dim); transform: translateY(-2px); } .setting-btn:hover .btn-tooltip { display: block; } .setting-btn.panel-active .btn-tooltip { display: none !important; } .setting-btn:active { transform: translateY(0) scale(0.95); } .setting-btn .btn-icon { font-size: 15px; } .setting-btn .btn-label { font-size: 12px; opacity: 0.8; } /* Button hover tooltips */ .btn-tooltip { display: none; position: absolute; bottom: 110%; right: 0; background: var(--context-bg); backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur); border: 0.5px solid var(--context-border); border-radius: 10px; padding: 10px 14px; min-width: 240px; z-index: 250; white-space: normal; pointer-events: none; } .btn-tooltip h4 { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-main); } .btn-tooltip ul { list-style: none; padding: 0; margin: 0; } .btn-tooltip ul li { font-size: 11px; color: var(--text-dim); padding: 2px 0; display: flex; align-items: center; gap: 6px; } .btn-tooltip ul li::before { content: '鈥?; color: var(--text-mid); font-size: 14px; } /* ========== OPACITY PANEL ========== */ .opacity-panel { position: fixed; bottom: 90px; right: 20px; background: var(--context-bg); backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur); border: 0.5px solid var(--context-border); border-radius: 16px; padding: 12px 16px; min-width: 260px; z-index: 400; display: none; max-height: none; overflow-y: visible; } .opacity-panel.show { display: block !important; } .opacity-panel h3 { font-size: 13px; font-weight: 600; color: var(--text-main); margin-bottom: 10px; } /* One-line layout: label + range + value on same row */ .opacity-inline { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: nowrap; } .opacity-inline .op-inline-label { width: 130px; font-size: 12px; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; } .opacity-inline .op-inline-range { flex: 1; min-width: 0; } .opacity-inline .op-inline-val { width: 45px; text-align: right; font-size: 12px; color: var(--text-mid); white-space: nowrap; flex-shrink: 0; } .opacity-group { margin-bottom: 10px; } .opacity-group:last-child { margin-bottom: 0; } .opacity-group label { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; white-space: nowrap; flex-wrap: nowrap; } .opacity-group label .val, .opacity-panel .val { color: var(--text-main); font-weight: 500; font-size: 11px; } .opacity-group input[type="range"] { width: 100%; height: 4px; -webkit-appearance: none; appearance: none; background: var(--sep-color); border-radius: 2px; outline: none; cursor: pointer; } .opacity-group input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--text-main); cursor: pointer; border: 2px solid var(--panel-border); } /* ========== BG COLOR PALETTE ========== */ .bg-color-palette { position: fixed; bottom: 90px; right: 20px; background: var(--context-bg); backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur); border: 0.5px solid var(--context-border); border-radius: 16px; padding: 16px 20px; min-width: 260px; z-index: 200; display: none; } .bg-color-palette.show { display: block; } .bg-color-palette h3 { font-size: 13px; font-weight: 600; color: var(--text-main); margin-bottom: 4px; } .bg-color-palette .subtitle { font-size: 10px; color: var(--text-dim); margin-bottom: 12px; } .color-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .color-swatch { width: 36px; height: 36px; border-radius: 10px; cursor: pointer; border: 2px solid transparent; transition: all 0.2s; position: relative; opacity: 1 !important; } .color-swatch:hover { transform: scale(1.15); } .color-swatch.active { border-color: var(--text-main); box-shadow: 0 0 0 2px var(--panel-border); } .color-swatch.gradient-purple { background: linear-gradient(135deg, #667eea, #764ba2, #f093fb); } .color-swatch.gradient-ocean { background: linear-gradient(135deg, #0ea5e9, #06b6d4, #14b8a6); } .color-swatch.gradient-sunset { background: linear-gradient(135deg, #f97316, #ef4444, #ec4899); } .color-swatch.gradient-forest { background: linear-gradient(135deg, #166534, #15803d, #22c55e); } .color-swatch.gradient-midnight { background: linear-gradient(135deg, #0f172a, #1e293b, #334155); } .color-swatch.gradient-sakura { background: linear-gradient(135deg, #fdf2f8, #fbcfe8, #f9a8d4); } .color-swatch.gradient-neon { background: linear-gradient(135deg, #0a0e17, #00e5ff, #0a0e17); } .color-swatch.solid-black { background: #0a0a0a; } .color-swatch.solid-white { background: #f5f5f5; border: 1px solid #ddd; } .color-swatch.solid-navy { background: #1a1a2e; } .color-swatch.solid-warm { background: #fdf6e8; border: 1px solid #e0d5c1; } .color-swatch.solid-gray { background: #f0ede6; border: 1px solid #d4d0c4; } .custom-color-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .custom-color-row span { font-size: 11px; color: var(--text-dim); } .custom-color-row input[type="color"] { width: 32px; height: 32px; border: 1px solid var(--panel-border); border-radius: 8px; cursor: pointer; background: none; padding: 2px; } .custom-color-row input[type="text"] { flex: 1; background: var(--input-bg); border: 0.5px solid var(--input-border); border-radius: 8px; padding: 6px 10px; font-size: 12px; color: var(--text-main); font-family: inherit; outline: none; } .reset-color-btn { display: inline-block; margin-top: 10px; padding: 5px 12px; border-radius: 6px; border: 1.5px solid #818cf8; background: rgba(129,140,248,0.15); font-size: 11px; color: #c7d2fe; font-weight: 600; cursor: pointer; transition: all 0.15s; text-align: center; } .reset-color-btn:hover { background: rgba(129,140,248,0.3); color: #e0e7ff; border-color: #a5b4fc; transform: translateY(-1px); } /* Highlighted context menu items (鎭㈠/鎭㈠榛樿/鎭㈠榛樿璁剧疆) */ .context-menu-item.highlight-reset { color: #c7d2fe !important; border: 1px solid rgba(129,140,248,0.3); background: rgba(129,140,248,0.1); border-radius: 8px; margin: 2px 0; } .context-menu-item.highlight-reset:hover { background: rgba(129,140,248,0.25) !important; border-color: #818cf8; } /* Background active indicator 鈥?shows 鉁?褰撳墠 badge before reset button */ .opacity-group.bg-active > div:first-child::after { content: "鉁?褰撳墠"; font-size: 9px; color: #4ade80; background: rgba(74,222,128,0.12); padding: 1px 6px; border-radius: 4px; white-space: nowrap; margin-left: auto; margin-right: 4px; order: 1; } /* ========== MODALS ========== */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: transparent; z-index: 500; display: none; align-items: center; justify-content: center; } .modal-overlay.show { display: flex; } /* Fade in after content is populated (50ms delay avoids white flash) */ .modal-dialog { animation: modalFadeIn 0.05s ease-in; } @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } .modal-dialog { background: var(--context-bg); backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur); border: 0.5px solid var(--context-border); border-radius: 16px; padding: 24px; min-width: 400px; max-width: 480px; max-height: 80vh; overflow-y: auto; } .modal-dialog h3 { font-size: 15px; font-weight: 600; color: var(--text-main); margin-bottom: 20px; } .modal-dialog label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; font-weight: 500; } .modal-dialog input[type="text"], .modal-dialog input[type="url"], .modal-dialog select { width: 100%; background: var(--input-bg); border: 0.5px solid var(--input-border); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--text-main); font-family: inherit; outline: none; margin-bottom: 16px; } .modal-dialog input:focus, .modal-dialog select:focus { border-color: var(--text-mid); } .modal-dialog .form-row { display: flex; gap: 10px; margin-bottom: 16px; } .modal-dialog .form-row > * { flex: 1; margin-bottom: 0; } /* ===== Tools (工具箱) ===== */ /* 与 .content-area 对齐：同宽(92vw/1600)同居中，紧贴搜索框下方，消除与导航/资讯 tab 的顶距/宽度不一致 */ .tools-area { width: 92vw; max-width: 1600px; margin: 0 auto; padding: 0 12px 48px; } .tools-head { margin-bottom: 22px; } .tools-head h2 { font-size: 22px; font-weight: 700; color: var(--text-main); margin: 0 0 6px; } .tools-head p { font-size: 13px; color: var(--text-dim); margin: 0; } /* 工具箱子 tab：程序员 / 办公 */ .tools-tabs { display: flex; gap: 10px; margin: 5px 0 5px; flex-wrap: wrap; justify-content: center; } .tool-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 22px; border-radius: 999px; cursor: pointer; font-size: 15px; font-weight: 700; font-family: inherit; letter-spacing: .5px; background: var(--context-bg); border: 0.5px solid var(--context-border); color: var(--text-mid); transition: all .12s ease; } .tool-tab:hover { border-color: var(--accent, #3b82f6); color: var(--accent, #3b82f6); } .tool-tab.active { background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff; border-color: transparent; box-shadow: 0 4px 16px rgba(59,130,246,.45); } .tool-tab .tool-svg { width: 16px; height: 16px; } .tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } .tool-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; cursor: pointer; background: var(--context-bg); border: 0.5px solid var(--context-border); border-radius: 14px; padding: 16px; color: var(--text-main); transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; } .tool-card:hover { transform: translateY(-2px); border-color: var(--text-mid); box-shadow: 0 6px 18px rgba(0,0,0,.12); } .tool-card-icon { color: var(--text-mid); display: inline-flex; align-items: center; justify-content: center; padding: 9px; border-radius: 12px; margin-bottom: 2px; } .tool-card-icon .tool-svg { width: 22px; height: 22px; } .tool-card-title { font-size: 14px; font-weight: 600; color: var(--text-main); } .tool-card-desc { font-size: 12px; color: var(--text-dim); line-height: 1.4; } /* modal 内工具布局 */ .tool-body { width: 100%; } .tool-body label { display: block; font-size: 12px; color: var(--text-dim); margin: 12px 0 6px; font-weight: 500; } .tool-ta, .tool-input, .tool-select { width: 100%; box-sizing: border-box; background: var(--input-bg); border: 0.5px solid var(--input-border); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--text-main); font-family: inherit; outline: none; margin-bottom: 4px; } .tool-ta { min-height: 96px; resize: vertical; line-height: 1.5; } .tool-ta:focus, .tool-input:focus, .tool-select:focus { border-color: var(--text-mid); } .tool-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; } .tool-btn { background: var(--text-mid); color: #fff; border: none; border-radius: 9px; padding: 8px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: opacity .12s ease; } .tool-btn:hover { opacity: .85; } .tool-result { margin-top: 12px; } .tool-result pre { background: var(--input-bg); border: 0.5px solid var(--input-border); border-radius: 10px; padding: 12px; font-size: 12.5px; line-height: 1.6; color: var(--text-main); white-space: pre-wrap; word-break: break-all; max-height: 320px; overflow: auto; } .tool-err { color: #e5484d !important; } .tool-ok { color: #2fa66d !important; } .tool-color { width: 100%; height: 38px; border: 0.5px solid var(--input-border); border-radius: 10px; background: var(--input-bg); cursor: pointer; margin-bottom: 10px; } .tool-swatch { height: 40px; border-radius: 10px; border: 0.5px solid var(--input-border); margin: 4px 0 10px; } .tool-qr { display: flex; justify-content: center; margin-top: 14px; } .tool-qr svg { width: 220px; height: 220px; background: #fff; border-radius: 8px; padding: 8px; } .tool-md-preview { margin-top: 12px; padding: 12px; border: 0.5px solid var(--input-border); border-radius: 10px; background: var(--input-bg); color: var(--text-main); font-size: 13px; line-height: 1.7; max-height: 340px; overflow: auto; } .tool-md-preview h1, .tool-md-preview h2, .tool-md-preview h3 { margin: 8px 0; color: var(--text-main); } .tool-md-preview code { background: rgba(127,127,127,.18); padding: 1px 5px; border-radius: 5px; } .tool-md-preview pre { background: rgba(127,127,127,.18); padding: 10px; border-radius: 8px; overflow: auto; } .tool-file { width: 100%; margin-bottom: 10px; color: var(--text-main); } .tool-chk { width: 16px; height: 16px; vertical-align: middle; } .tool-chk-wrap, .tool-chk-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-mid); margin-right: 12px; } .tool-diff { margin-top: 12px; border: 0.5px solid var(--input-border); border-radius: 10px; overflow: auto; max-height: 340px; font-family: monospace; font-size: 12px; } .tool-diff > div { padding: 2px 10px; white-space: pre-wrap; word-break: break-all; } .tool-diff .diff-same { color: var(--text-dim); } .tool-diff .diff-del { color: #e5484d; background: rgba(229,72,77,.08); } .tool-diff .diff-add { color: #2fa66d; background: rgba(47,166,109,.08); } /* 工具箱分组 + 新增办公/PDF 工具 */ .tool-group-title { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--text-main); margin: 18px 0 6px; padding-bottom: 6px; border-bottom: 0.5px solid var(--input-border); } .tool-status { font-size: 12px; color: var(--text-dim); margin: 8px 0; min-height: 16px; } .xlsx-preview, .docx-preview { margin-top: 12px; border: 0.5px solid var(--input-border); border-radius: 10px; background: var(--input-bg); color: var(--text-main); font-size: 13px; line-height: 1.7; max-height: 360px; overflow: auto; padding: 12px; } .xlsx-preview table, .docx-preview table { border-collapse: collapse; width: 100%; } .xlsx-preview th, .xlsx-preview td, .docx-preview td { border: 0.5px solid var(--input-border); padding: 4px 8px; } .xlsx-sheets { color: var(--text-mid); margin: 0 0 8px; } .docx-preview h1, .docx-preview h2, .docx-preview h3 { color: var(--text-main); margin: 8px 0; } .pdf-thumbs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; } .pdf-thumb { display: flex; flex-direction: column; align-items: center; gap: 6px; } .pdf-thumb img { max-width: 140px; border: 0.5px solid var(--input-border); border-radius: 6px; } .mermaid-out { margin-top: 12px; text-align: center; overflow: auto; max-height: 420px; } .mermaid-out svg { max-width: 100%; height: auto; } .barcode-holder { margin-top: 12px; padding: 14px; background: #fff; border-radius: 10px; display: inline-block; } .barcode-svg { display: block; max-width: 100%; } .mindmap-out { margin-top: 12px; padding: 12px; border: 0.5px solid var(--input-border); border-radius: 10px; background: var(--input-bg); max-height: 420px; overflow: auto; } .mm-list { list-style: none; padding-left: 22px; margin: 4px 0; } .mm-list .mm-list { border-left: 1px solid var(--input-border); } .mm-node { display: inline-block; padding: 4px 10px; margin: 3px 0; background: var(--text-mid); color: #fff; border-radius: 8px; font-size: 12px; } .epub-viewer { margin-top: 12px; border: 0.5px solid var(--input-border); border-radius: 10px; background: #f5f5f5; overflow: hidden; min-height: 200px; } .epub-viewer iframe { border: none; width: 100%; height: 480px; background: #fff; } .epub-nav { display: flex; gap: 8px; margin-top: 10px; } /* 计算器 */ .calc-wrap { max-width: 280px; } .calc-display { width: 100%; box-sizing: border-box; text-align: right; font-size: 22px; font-weight: 600; background: var(--input-bg); border: 0.5px solid var(--input-border); border-radius: 10px; padding: 12px 14px; color: var(--text-main); margin-bottom: 10px; min-height: 26px; word-break: break-all; } .calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .calc-key { padding: 12px 0; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; background: var(--context-bg); border: 0.5px solid var(--context-border); border-radius: 10px; color: var(--text-main); transition: all .1s ease; } .calc-key:hover { border-color: var(--text-mid); } .calc-key.op { background: var(--text-mid); color: #fff; border-color: var(--text-mid); } .calc-key.eq { background: #2fa66d; color: #fff; border-color: #2fa66d; } .calc-key:active { transform: scale(.96); } /* 待办 + 番茄钟 */ .todo-add { display: flex; gap: 8px; margin-bottom: 12px; } .todo-add .tool-input { margin-bottom: 0; } .todo-list { list-style: none; padding: 0; margin: 0 0 14px; max-height: 240px; overflow: auto; } .todo-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: var(--input-bg); border: 0.5px solid var(--input-border); margin-bottom: 6px; font-size: 13px; color: var(--text-main); } .todo-item.done .todo-text { text-decoration: line-through; color: var(--text-dim); } .todo-item .todo-text { flex: 1; cursor: pointer; word-break: break-all; } .todo-del { cursor: pointer; color: var(--text-dim); border: none; background: none; font-size: 15px; padding: 0 4px; } .todo-del:hover { color: #e5484d; } .pomo-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; padding-top: 14px; border-top: 0.5px solid var(--input-border); } .pomo-time { font-size: 40px; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; } .pomo-row { display: flex; gap: 8px; } .pomo-ring { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); } .pomo-ring.on { background: #e5484d; } /* 朗读 */ .tts-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .tts-rate { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--text-dim); } .tts-rate input { flex: 1; } /* 图片压缩 */ .img-preview { margin-top: 12px; display: flex; gap: 12px; flex-wrap: wrap; } .img-preview figure { margin: 0; text-align: center; } .img-preview img { max-width: 140px; max-height: 140px; border-radius: 8px; border: 0.5px solid var(--input-border); } .img-preview figcaption { font-size: 11px; color: var(--text-dim); margin-top: 4px; } /* 表格转换 */ .table-tabs { display: flex; gap: 6px; margin: 8px 0 12px; } .table-tab { padding: 6px 12px; border-radius: 8px; font-size: 12px; cursor: pointer; font-family: inherit; background: var(--context-bg); border: 0.5px solid var(--context-border); color: var(--text-mid); } .table-tab.active { background: var(--text-mid); color: #fff; border-color: var(--text-mid); } .table-out { margin-top: 10px; } .modal-dialog .favicon-preview { width: 48px; height: 48px; border-radius: 12px; background: var(--favicon-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .modal-dialog .favicon-preview img { width: 32px; height: 32px; border-radius: 6px; } .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; } .modal-btn { padding: 8px 20px; border-radius: 10px; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all 0.15s; border: 0.5px solid var(--btn-border); background: var(--btn-bg); color: var(--text-main); } .modal-btn:hover { background: var(--btn-hover-bg); } .modal-btn.primary { background: rgba(99,102,241,0.22); border-color: rgba(129,140,248,0.85); color: #c7d2fe; font-weight: 700; box-shadow: 0 0 0 1px rgba(129,140,248,0.35), 0 2px 10px rgba(99,102,241,0.18); } .modal-btn.primary:hover { background: rgba(99,102,241,0.34); } .section-label { display: block; font-size: 13px; font-weight: 700; color: #818cf8; margin: 12px 0 8px; padding-bottom: 4px; border-bottom: 1px solid rgba(129,140,248,0.2); letter-spacing: 0.3px; } .modal-btn.danger { color: #f87171; border-color: rgba(248,113,113,0.3); } .modal-btn.danger:hover { background: rgba(248,113,113,0.1); } /* Category list in modal */ .cat-list { margin-bottom: 16px; } .cat-list-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--favicon-bg); margin-bottom: 6px; } .cat-list-item .cat-drag { cursor: grab; color: var(--text-dim); font-size: 14px; } .cat-list-item .cat-name { flex: 1; font-size: 13px; color: var(--text-main); } .cat-list-item .cat-actions { display: flex; gap: 6px; } .cat-list-item .cat-act-btn { width: 26px; height: 26px; border-radius: 6px; border: 0.5px solid var(--btn-border); background: transparent; color: var(--text-dim); cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .cat-list-item .cat-act-btn:hover { background: var(--btn-hover-bg); } .cat-list-item .cat-check { width: 16px; height: 16px; accent-color: #6366f1; cursor: pointer; flex-shrink: 0; } .cat-list-item.dragging { opacity: 0.4; transform: scale(0.96); } .cat-list-item.drag-over { border: 1px dashed var(--text-mid); background: var(--card-hover-bg); } /* Category section drag (dragging entire category block) */ .category-section.cat-section-dragging { opacity: 0.5; transform: scale(0.98); background: var(--card-hover-bg, rgba(255,255,255,0.06)); border-radius: 10px; box-shadow: 0 0 0 1.5px var(--accent, #818cf8); } .category-title[draggable="true"]:hover { opacity: 0.7; } .cat-list-item .cat-add-btn { width: 26px; height: 26px; border-radius: 6px; border: 0.5px dashed var(--btn-border); background: transparent; color: var(--text-dim); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .cat-list-item .cat-add-btn:hover { background: var(--btn-hover-bg); color: var(--text-main); } /* Background presets in modal */ .bg-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .bg-preset { width: 60px; height: 40px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: all 0.15s; background-size: cover; background-position: center; } .bg-preset:hover { transform: scale(1.08); } .bg-preset.active { border-color: var(--text-main); } /* Engine edit hint on context menu for engines */ .engine-btns .engine-btn { position: relative; } /* Favicon error fallback */ .favicon-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: 700; color: var(--text-mid); } /* ========== FONT COLOR PALETTE ========== */ .font-color-palette { position: fixed; bottom: 90px; right: 80px; background: var(--context-bg); backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur); border: 0.5px solid var(--context-border); border-radius: 16px; padding: 16px 20px; min-width: 260px; z-index: 200; display: none; } .font-color-palette.show { display: block; } .font-color-palette h3 { font-size: 13px; font-weight: 600; color: var(--text-main); margin-bottom: 4px; } .font-color-palette .subtitle { font-size: 10px; color: var(--text-dim); margin-bottom: 12px; } /* ========== FAVICON COLORS PER THEME ========== */ /* Element opacity from appearance panel 鈥?multiplied by global block opacity */ .link-card .link-label { opacity: calc(var(--op-link-label, 1) * var(--global-block-opacity, 1)); } .category-section { opacity: calc(var(--op-category-section, 1) * var(--global-block-opacity, 1)); } .category-title { opacity: calc(var(--op-category-title, 1) * var(--global-block-opacity, 1)); } .category-section .link-cards { opacity: calc(var(--op-link-cards-area, 1) * var(--global-block-opacity, 1)); } .quick-link-item { opacity: calc(var(--op-quick-link-item, 1) * var(--global-block-opacity, 1)); } .recent-item { opacity: calc(var(--op-recent-item, 1) * var(--global-block-opacity, 1)); } /* Block-level panel opacity 鈥?only affects the glass ::before background, NOT content */ .left-panel { --panel-alpha: calc(var(--op-qa-panel-bg, 1) * var(--global-block-opacity, 1)); } .left-panel .panel-title { opacity: calc(var(--op-left-panel-title, 1) * var(--global-block-opacity, 1)); } #recentVisitsPanel { --panel-alpha: calc(var(--op-recent-panel-bg, 1) * var(--global-block-opacity, 1)); } #recentVisitsPanel .panel-title { opacity: calc(var(--op-right-panel-title, 1) * var(--global-block-opacity, 1)); } /* Main area opacity 鈥?only background */ .main-area { --panel-alpha: calc(var(--op-main-area, 1) * var(--global-block-opacity, 1)); } /* Settings panel opacity */ .settings-panel { opacity: calc(var(--op-settings-panel, 1) * var(--global-block-opacity, 1)); } .setting-btn { opacity: calc(var(--op-setting-btn, 1) * var(--global-block-opacity, 1)); } /* Top bar opacity 鈥?only background */ .top-info-bar { --panel-alpha: calc(var(--op-top-info-bar, 1) * var(--global-block-opacity, 1)); } .top-info-bar-inner { opacity: var(--global-block-opacity, 1); } #siteTitle { opacity: calc(var(--op-top-title, 1) * var(--global-block-opacity, 1)); } .top-info-bar .weather-group { opacity: calc(var(--op-top-weather, 1) * var(--global-block-opacity, 1)); } .top-info-bar .time-display, .top-info-bar .date-display, .top-info-bar .sep { opacity: calc(var(--op-top-time, 1) * var(--global-block-opacity, 1)); } span[id^="siteLink"] { opacity: calc(var(--op-top-nav-links, 1) * var(--global-block-opacity, 1)) !important; } #dailyQuote { opacity: calc(var(--op-top-quote, 1) * var(--global-block-opacity, 1)); } .quote-wrapper #dailyQuote { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* Theme switcher */ /* Search area 鈥?opacity only affects background ::before layer */ .search-box { --panel-alpha: calc(var(--op-search-box, 1) * var(--global-block-opacity, 1)); } .search-module { } /* opacity moved to ::before via --panel-alpha */ /* 主界面：搜索框与下方常用链接(fav-module)紧贴——强制归零 layout 面板的 contentTop 内联 margin-bottom（不影响 news 模式） */ body:not(.news-mode) .search-module { margin-bottom: 0 !important; } .engine-btns { opacity: var(--global-block-opacity, 1); } /* Search area text opacity */ .search-input-placeholder, .engine-btn { opacity: calc(var(--op-search-placeholder, 1) * var(--global-block-opacity, 1)); } .quick-link-add { display: flex; flex-direction: row; align-items: center; gap: 6px; width: 68px; padding: 8px 4px 6px; border-radius: 14px; cursor: pointer; transition: all 0.2s; position: relative; background: var(--card-bg); border: none; color: var(--text-dim); font-size: 12px; } .quick-link-add:hover { background: var(--card-hover-bg); transform: translateY(-2px); } /* Weather/time/date with individual opacity sliders */ .weather-group { opacity: calc(var(--op-top-weather, 1) * var(--global-block-opacity, 1)); } .time-display { opacity: calc(var(--op-top-time, 1) * var(--global-block-opacity, 1)); } .date-display { opacity: calc(var(--op-top-time, 1) * var(--global-block-opacity, 1)); } .back-to-top { position: fixed; bottom: 60px; right: 20px; width: 36px; height: 36px; border-radius: 50%; border: 0.5px solid var(--panel-border); background: var(--panel-bg); backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur); color: var(--text-dim); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .back-to-top.show { opacity: 0.7; pointer-events: auto; } .back-to-top:hover { opacity: 1; color: var(--text-main); } /* Toast notifications */ .toast-container { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; align-items: center; } .toast { background: var(--panel-bg); backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur); border: 0.5px solid var(--panel-border); border-radius: 10px; padding: 8px 16px; font-size: 12px; color: var(--text-main); opacity: 0; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s; pointer-events: none; } .toast.show { opacity: 1; transform: translateY(0); } .toast { display: flex; align-items: center; gap: 12px; pointer-events: auto; } .toast-action { background: var(--btn-bg, #6366f1); color: #fff; border: none; border-radius: 8px; padding: 4px 12px; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; } .toast-action:hover { background: var(--btn-hover-bg, #4f46e5); } .drag-indicator { height:28px; margin:2px 0; border-radius:6px; background:rgba(129,140,248,0.15); border:1px dashed #818cf8; transition:all 0.15s; pointer-events:none; display:none; } /* ===== Batch select mode ===== */ .batch-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 9998; display: none; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--panel-bg, #fff); border: 1px solid var(--panel-border, #e2e8f0); box-shadow: 0 8px 24px rgba(0,0,0,.18); } .batch-count { font-size: 12px; color: var(--text-dim, #94a3b8); min-width: 64px; } .batch-btn { font-size: 12px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--panel-border, #e2e8f0); background: var(--btn-bg, #6366f1); color: #fff; cursor: pointer; white-space: nowrap; } .batch-btn:hover { background: var(--btn-hover-bg, #4f46e5); } .batch-btn.danger { background: #ef4444; } .batch-btn.danger:hover { background: #dc2626; } body.batch-select .link-card { cursor: pointer; position: relative; outline: 2px solid transparent; transition: outline-color .15s; } body.batch-select .link-card:hover { outline-color: var(--btn-bg, #6366f1); } body.batch-select .link-card.selected { outline-color: #6366f1; background: rgba(99,102,241,.12); } .batch-check { position: absolute; top: 6px; left: 6px; width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--panel-border, #cbd5e1); background: #fff; box-sizing: border-box; pointer-events: none; } body.batch-select .link-card.selected .batch-check { background: #6366f1; border-color: #6366f1; } body.batch-select .link-card.selected .batch-check::after { content: '✓'; position: absolute; top: -3px; left: 2px; font-size: 13px; color: #fff; font-weight: 700; } /* ===== Batch edit: spacer + confirm dialog ===== */ .batch-spacer { width: 1px; height: 24px; background: var(--panel-border, #e2e8f0); margin: 0 4px; } .batch-btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; } .batch-confirm-dlg { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; pointer-events: none; } .batch-confirm-dlg.show { opacity: 1; pointer-events: auto; } .batch-confirm-bg { position: absolute; inset: 0; background: rgba(0,0,0,.45); } .batch-confirm-box { position: relative; z-index: 1; min-width: 300px; max-width: 400px; background: var(--panel-bg, #fff); border: 1px solid var(--panel-border, #e2e8f0); border-radius: 16px; padding: 24px 20px 18px; box-shadow: 0 12px 40px rgba(0,0,0,.25); transform: translateY(10px); transition: transform .25s; } .batch-confirm-dlg.show .batch-confirm-box { transform: translateY(0); } .batch-confirm-title { font-size: 16px; font-weight: 700; color: var(--text-main, #1e293b); margin-bottom: 8px; } .batch-confirm-msg { font-size: 13.5px; line-height: 1.6; color: var(--text-mid, #64748b); margin-bottom: 18px; } .batch-confirm-btns { display: flex; gap: 10px; justify-content: flex-end; } .batch-confirm-btns button { padding: 7px 18px; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--panel-border, #e2e8f0); background: transparent; color: var(--text-mid, #64748b); transition: all .15s; } .batch-confirm-btns button:hover { background: var(--card-hover-bg, rgba(99,102,241,.08)); color: var(--text-main, #1e293b); } .batch-confirm-btns .danger { background: #ef4444; border-color: #ef4444; color: #fff; } .batch-confirm-btns .danger:hover { background: #dc2626; } /* ===== Language popover ===== */ .lang-popover { position: fixed; z-index: 9999; min-width: 120px; background: var(--panel-bg); backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur); border: 0.5px solid var(--panel-border); border-radius: 10px; padding: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); } .lang-popover-grid { display: flex; flex-direction: column; gap: 2px; } .lang-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; cursor: pointer; transition: background 0.1s; font-size: 12px; color: var(--text-main); white-space: nowrap; } .lang-item:hover { background: var(--card-hover-bg); } .lang-item.lang-active { background: rgba(129,140,248,0.15); color: #818cf8; } .lang-flag { font-size: 14px; line-height: 1; } .lang-name { font-size: 12px; } /* Custom dialog */ .custom-dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2000; display: none; align-items: center; justify-content: center; } .custom-dialog-overlay.show { display: flex !important; } .custom-dialog { background: var(--panel-bg); backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur); border: 0.5px solid var(--panel-border); border-radius: 14px; padding: 20px; min-width: 320px; max-width: 420px; box-shadow: 0 16px 48px rgba(0,0,0,0.4); } .custom-dialog-title { font-size: 15px; font-weight: 600; color: var(--text-main); margin-bottom: 14px; } .custom-dialog-body { display: flex; flex-direction: column; gap: 10px; } .custom-dialog-body label { font-size: 12px; color: var(--text-dim); font-weight: 500; } .custom-dialog-body input { background: var(--input-bg); border: 0.5px solid var(--input-border); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--text-main); font-family: inherit; outline: none; } .custom-dialog-body input:focus { border-color: #818cf8; } /* Select dropdown styling - prevent white flash */ select { color: var(--text-main) !important; background: var(--input-bg) !important; border-color: var(--panel-border) !important; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px !important; transition: none !important; } select option { color: #e0e0e0; background: #1e1e30 !important; } select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--text-main); } select:focus { border-color: #818cf8 !important; outline: none; } select option:hover, select option:checked { background: #818cf8 !important; color: #fff !important; } select:active, select:focus-within { background: var(--input-bg) !important; color: var(--text-main) !important; } .custom-dialog-body select { color: var(--text-main) !important; background: var(--input-bg) !important; border-color: var(--panel-border) !important; } /* Custom div-based select dropdown (replaces native