diff --git a/package-lock.json b/package-lock.json index a2d8885..fb04bcd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "steamworks.js": "^0.3.2" }, "devDependencies": { - "electron": "^39.2.7", + "electron": "^40.0.0", "electron-builder": "^23.0.0", "electron-nightly": "^39.0.0-nightly.20250811" } @@ -1407,15 +1407,15 @@ } }, "node_modules/electron": { - "version": "39.2.7", - "resolved": "https://registry.npmjs.org/electron/-/electron-39.2.7.tgz", - "integrity": "sha512-KU0uFS6LSTh4aOIC3miolcbizOFP7N1M46VTYVfqIgFiuA2ilfNaOHLDS9tCMvwwHRowAsvqBrh9NgMXcTOHCQ==", + "version": "40.0.0", + "resolved": "https://registry.npmjs.org/electron/-/electron-40.0.0.tgz", + "integrity": "sha512-UyBy5yJ0/wm4gNugCtNPjvddjAknMTuXR2aCHioXicH7aKRKGDBPp4xqTEi/doVcB3R+MN3wfU9o8d/9pwgK2A==", "dev": true, "hasInstallScript": true, "license": "MIT", "dependencies": { "@electron/get": "^2.0.0", - "@types/node": "^22.7.7", + "@types/node": "^24.9.0", "extract-zip": "^2.0.1" }, "bin": { @@ -1693,6 +1693,23 @@ "node": ">= 10.0.0" } }, + "node_modules/electron/node_modules/@types/node": { + "version": "24.10.9", + "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.9.tgz", + "integrity": "sha512-ne4A0IpG3+2ETuREInjPNhUGis1SFjv1d5asp8MzEAGtOZeTeHVDOYqOgqfhvseqg/iXty2hjBf1zAOb7RNiNw==", + "dev": true, + "license": "MIT", + "dependencies": { + "undici-types": "~7.16.0" + } + }, + "node_modules/electron/node_modules/undici-types": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz", + "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==", + "dev": true, + "license": "MIT" + }, "node_modules/emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", diff --git a/package.json b/package.json index f415f41..c5cdedb 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "steamworks.js": "^0.3.2" }, "devDependencies": { - "electron": "^39.2.7", + "electron": "^40.0.0", "electron-builder": "^23.0.0", "electron-nightly": "^39.0.0-nightly.20250811" }, diff --git a/renderer/settings.css b/renderer/settings.css index 4e931b2..e69ad31 100644 --- a/renderer/settings.css +++ b/renderer/settings.css @@ -14,16 +14,19 @@ .plugin-authors .muted { opacity:.7; margin-right: 6px; } :root { --bg: #121418; - --dark-blue: #0B1C2B; - --dark-purple: #1B1035; + --gradient-end: #1B1035; + --surface: rgba(255, 255, 255, 0.06); + --surface-hover: rgba(255, 255, 255, 0.10); --primary: #7B2EFF; + --primary-hover: #9654FF; --accent: #00C6FF; --text: #E0E0E0; - --surface-1: rgba(255, 255, 255, 0.04); - --surface-2: rgba(255, 255, 255, 0.06); - --card-border: rgba(255, 255, 255, 0.10); - --ring: 0 0 0 3px rgba(123, 46, 255, 0.35); - --glow: 0 8px 30px rgba(123, 46, 255, 0.25), 0 2px 10px rgba(0, 198, 255, 0.15); + --text-secondary: #B8B8C0; + --text-muted: #8f8f9d; + --border: rgba(255, 255, 255, 0.12); + --border-subtle: rgba(255, 255, 255, 0.06); + --ring: 0 0 0 2px rgba(123, 46, 255, 0.4); + --glow-subtle: 0 4px 20px rgba(123, 46, 255, 0.15); } /* Load InterVariable */ @@ -35,15 +38,14 @@ } body { - /* Nebula gradient background with subtle radial glow */ - background: - radial-gradient(1200px 600px at 10% -10%, rgba(0, 198, 255, 0.15), transparent 60%), - radial-gradient(1000px 500px at 110% 10%, rgba(123, 46, 255, 0.2), transparent 60%), - linear-gradient(145deg, var(--bg) 0%, var(--dark-purple) 100%); + background: + radial-gradient(800px 400px at 10% 0%, rgba(123, 46, 255, 0.08), transparent 60%), + radial-gradient(800px 400px at 100% 20%, rgba(0, 198, 255, 0.06), transparent 60%), + linear-gradient(180deg, var(--bg), var(--gradient-end)); color: var(--text); - font-family: 'InterVariable', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + font-family: 'InterVariable', system-ui, -apple-system, 'Segoe UI', 'Roboto', sans-serif; margin: 0; - padding: 2rem; + padding: 0; display: flex; justify-content: center; align-items: flex-start; @@ -53,47 +55,39 @@ body { .container { position: relative; - background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 85%, #000 15%), color-mix(in srgb, var(--dark-purple, var(--bg)) 80%, #000 20%)); - backdrop-filter: blur(14px) saturate(120%); - -webkit-backdrop-filter: blur(14px) saturate(120%); + background: var(--bg); padding: 0; - border-radius: 18px; - border: 1px solid var(--card-border); - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); - max-width: 1200px; + border-radius: 0; + border: none; + box-shadow: none; + max-width: 100vw; width: 100%; display: flex; overflow: hidden; - max-height: calc(100vh - 4rem); + height: 100vh; } /* Subtle animated sheen around the container */ -.container::before { - content: ''; - position: absolute; - inset: -1px; - border-radius: inherit; - background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 25%, transparent), color-mix(in srgb, var(--accent) 18%, transparent) 40%, transparent 60%); - filter: blur(20px); - z-index: 0; - pointer-events: none; -} + /* Sidebar + content layout */ .sidebar { - width: 280px; - background: linear-gradient(180deg, color-mix(in srgb, var(--text) 6%, transparent), color-mix(in srgb, var(--text) 4%, transparent)); - border-right: 1px solid rgba(255,255,255,0.08); - padding: 1.25rem 1rem; + width: 260px; + background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); + border-right: 1px solid var(--border); + padding: 1.5rem 0; position: relative; z-index: 1; + overflow-y: auto; } .sidebar h1 { - font-size: 1.1rem; - margin: 0 0 1rem 0; + font-size: 1.35rem; + font-weight: 300; + margin: 0 0 1.5rem 0; + padding: 0 1rem; color: var(--primary); - letter-spacing: 0.4px; + letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; @@ -102,58 +96,50 @@ body { .tabs { display: flex; flex-direction: column; - gap: 4px; + gap: 2px; } .tab-link { text-align: left; - background: linear-gradient(180deg, transparent, transparent); - color: var(--text); - border: 1px solid transparent; - border-radius: 10px; - padding: 10px 12px 10px 14px; + background: transparent; + color: var(--text-secondary); + border: none; + border-radius: 4px; + padding: 10px 1rem; + margin: 0; cursor: pointer; - transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease; - font-size: 14px; + transition: background 0.15s ease, color 0.15s ease; + font-size: 15px; + font-weight: 400; font-family: inherit; width: 100%; position: relative; z-index: 1; + border-left: 3px solid transparent; } .tab-link:hover { - background: rgba(255,255,255,0.06); - border-color: rgba(255,255,255,0.08); + background: var(--surface); + color: var(--text); } .tab-link.active { - background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--accent) 14%, transparent)); + background: linear-gradient(90deg, rgba(123, 46, 255, 0.12), rgba(0, 198, 255, 0.08)); color: var(--text); - border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); - box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent); + border-left-color: var(--primary); + font-weight: 500; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -/* Left accent bar */ -.tab-link.active::before { - content: ''; - position: absolute; - left: -1px; - top: 8px; - bottom: 8px; - width: 3px; - border-radius: 2px; - background: linear-gradient(180deg, var(--accent), var(--primary)); -} + .content { flex: 1; - padding: 1.25rem 1.5rem 2rem 1.5rem; + padding: 2rem 3rem; overflow: auto; position: relative; z-index: 1; - background: - radial-gradient(800px 300px at 60% -10%, rgba(0, 198, 255, 0.10), transparent 50%), - radial-gradient(700px 260px at 20% -20%, rgba(123, 46, 255, 0.18), transparent 50%); + background: var(--bg); } .tab-panel { @@ -164,92 +150,112 @@ body { display: block; } -h1 { - font-size: 1.5rem; - margin-bottom: 1.5rem; - color: var(--primary); -} + .setting-group { display: flex; flex-direction: column; - gap: 0.6rem; - margin-bottom: 1rem; + gap: 0.75rem; + margin-bottom: 1.5rem; + background: var(--surface); + border: 1px solid var(--border); + border-radius: 8px; + padding: 1rem 1.25rem; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } label { - font-weight: bold; - margin-bottom: 0.5rem; + font-weight: 400; + margin-bottom: 0.35rem; + color: var(--text); + font-size: 15px; } -input { - padding: 0.6rem; - font-size: 1rem; - border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); - border-radius: 10px; - margin-bottom: 0.75rem; - background-color: color-mix(in srgb, var(--bg) 82%, #000 18%); +input[type="text"], +input[type="file"] { + padding: 0.5rem 0.65rem; + font-size: 14px; + border: 1px solid var(--border); + border-radius: 6px; + margin-bottom: 0.5rem; + background-color: var(--surface); color: var(--text); outline: none; + transition: all 0.15s ease; } -input:focus { +input[type="text"]:focus, +input[type="file"]:focus { box-shadow: var(--ring); - border-color: color-mix(in srgb, var(--primary) 50%, transparent); + border-color: var(--primary); + background-color: var(--surface-hover); +} + +select { + padding: 0.5rem 0.65rem; + font-size: 14px; + border: 1px solid var(--border); + border-radius: 6px; + background-color: var(--surface); + color: var(--text); + outline: none; + transition: all 0.15s ease; +} + +select:focus { + box-shadow: var(--ring); + border-color: var(--primary); + background-color: var(--surface-hover); } button { - padding: 0.65rem 0.9rem; - font-size: 0.95rem; - background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 90%, var(--accent) 10%), color-mix(in srgb, var(--primary) 80%, #000 20%)); + padding: 0.5rem 1rem; + font-size: 14px; + background: var(--surface); color: var(--text); - border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent); - border-radius: 10px; + border: 1px solid var(--border); + border-radius: 6px; cursor: pointer; - transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s ease, filter 0.2s ease; + font-weight: 400; + transition: all 0.15s ease; } button:hover { - filter: brightness(1.03) saturate(1.05); - box-shadow: var(--glow); + background: var(--surface-hover); + box-shadow: var(--glow-subtle); } -button:active { - transform: translateY(1px); -} + /* Primary button style (e.g., Big Picture Mode) */ .primary-btn { display: inline-flex; align-items: center; gap: 8px; - padding: 12px 24px; - font-size: 1rem; - font-weight: 600; - background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 60%, #000 40%) 50%, var(--accent) 100%); - background-size: 200% 100%; + padding: 0.5rem 1rem; + font-size: 14px; + font-weight: 500; + background: linear-gradient(135deg, var(--primary), var(--accent)); color: var(--text); - border: 1px solid rgba(255,255,255,0.15); - border-radius: 12px; + border: 1px solid var(--primary); + border-radius: 6px; cursor: pointer; - transition: all 0.3s ease; - box-shadow: 0 4px 20px color-mix(in srgb, var(--primary) 30%, transparent); + transition: all 0.15s ease; + box-shadow: var(--glow-subtle); } .primary-btn:hover { - background-position: 100% 0; - box-shadow: 0 6px 30px color-mix(in srgb, var(--primary) 45%, transparent), 0 0 20px color-mix(in srgb, var(--accent) 20%, transparent); - transform: translateY(-2px); + background: linear-gradient(135deg, var(--primary-hover), var(--accent)); + box-shadow: 0 4px 24px rgba(123, 46, 255, 0.25); + transform: translateY(-1px); } -.primary-btn:active { - transform: translateY(0); - box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 30%, transparent); -} + .note { - font-size: 0.8rem; - color: color-mix(in srgb, var(--text) 70%, transparent); - margin-top: 1rem; + font-size: 13px; + color: var(--text-muted); + margin-top: 0.35rem; + line-height: 1.5; } .status { @@ -259,14 +265,14 @@ button:active { transform: translateX(-50%); display: flex; align-items: center; - gap: 0.5rem; - background-color: color-mix(in srgb, var(--bg) 82%, #000 18%); + gap: 0.75rem; + background-color: var(--surface); color: var(--text); - padding: 0.8rem 1.2rem; - border-radius: 12px; - border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); - box-shadow: 0 8px 30px rgba(0,0,0,0.5); - font-size: 1rem; + padding: 0.75rem 1.25rem; + border-radius: 6px; + border: 1px solid var(--border); + box-shadow: 0 4px 12px rgba(0,0,0,0.4); + font-size: 14px; z-index: 1000; } @@ -298,95 +304,187 @@ button:active { box-sizing: border-box; } +.setting-group .setting-row button, +.setting-group .setting-row input, +.setting-group .setting-row select { + width: auto; +} + +/* Inline layout helpers (Firefox-like settings rows) */ +.setting-row { + display: flex; + align-items: center; + gap: 12px; + flex-wrap: wrap; +} + +.setting-row label { + margin-bottom: 0; +} + +.setting-row .note { + margin: 0; +} + +.label-min { + min-width: 100px; +} + +.setting-row button, +.setting-row input, +.setting-row select { + width: auto; + min-width: 160px; +} + +.setting-row select { + flex: 1 1 220px; +} + +.button-row { + display: flex; + gap: 10px; + align-items: center; + flex-wrap: wrap; +} + +.stack { + display: flex; + flex-direction: column; + gap: 10px; +} + +.range-row { + display: flex; + align-items: center; + gap: 12px; +} + +.range-row input[type="range"] { + flex: 1 1 auto; + min-width: 160px; +} + +.range-row .range-value { + min-width: 56px; + text-align: right; + font-weight: 600; + color: color-mix(in srgb, var(--text) 85%, transparent); +} + +.settings-fieldset { + border: 1px solid var(--border); + border-radius: 6px; + padding: 1rem; + background: rgba(123, 46, 255, 0.03); +} + +.settings-fieldset legend { + padding: 0 0.5rem; + font-size: 14px; + font-weight: 500; + color: var(--primary); +} + /* Cards (customization groups) */ .customization-group { - background: linear-gradient(180deg, var(--surface-1, color-mix(in srgb, var(--bg) 85%, #000 15%)), var(--surface-2, color-mix(in srgb, var(--bg) 78%, #000 22%))); - border: 1px solid var(--card-border); - border-radius: 14px; - padding: 14px 16px 16px 16px; - box-shadow: 0 6px 24px rgba(0,0,0,0.25); - margin-bottom: 20px; + background: var(--surface); + border: 1px solid var(--border); + border-radius: 8px; + padding: 1rem 1.25rem; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + margin-bottom: 1.5rem; } .customization-group > h3 { - margin: 0 0 10px 0; + margin: 0 0 0.75rem 0; position: relative; - padding-left: 10px; + padding-left: 0; + font-size: 1.1rem; + font-weight: 600; + color: var(--primary); } -.customization-group > h3::before { - content: ''; - position: absolute; - left: 0; - top: 50%; - transform: translateY(-50%); - width: 4px; - height: 18px; - border-radius: 2px; - background: linear-gradient(180deg, var(--accent), var(--primary)); + + +.setting-group > h3 { + margin: 0 0 0.75rem 0; + font-size: 1.1rem; + font-weight: 600; + position: relative; + padding-left: 0; + color: var(--primary); } + + /* Section titles */ h2 { - display: inline-flex; - align-items: center; - gap: 10px; - font-size: 1.2rem; - margin: 0 0 12px 0; + display: block; + font-size: 1.5rem; + font-weight: 300; + margin: 0 0 1.5rem 0; + color: var(--text); + letter-spacing: -0.01em; + position: relative; + padding-bottom: 0.75rem; } h2::after { content: ''; - flex: 1 1 auto; - height: 1px; - background: linear-gradient(90deg, rgba(255,255,255,0.15), transparent); + position: absolute; + bottom: 0; + left: 0; + width: 60px; + height: 3px; + background: linear-gradient(90deg, var(--primary), var(--accent)); + border-radius: 2px; } + + /* Theming: theme selector buttons override */ .theme-selector { display: grid; - grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); - gap: 16px; - padding: 10px 0; - background: linear-gradient(180deg, var(--surface-1, color-mix(in srgb, var(--bg) 85%, #000 15%)), var(--surface-2, color-mix(in srgb, var(--bg) 78%, #000 22%))); - border: 1px solid var(--card-border); - border-radius: 12px; - padding: 12px; + grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); + gap: 12px; + padding: 0; + background: transparent; + border: none; + border-radius: 0; } .theme-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; - padding: 12px 8px; - border: 1px solid rgba(255,255,255,0.10) !important; - border-radius: 12px !important; - background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)) !important; + padding: 10px 8px; + border: 2px solid var(--border) !important; + border-radius: 8px !important; + background: var(--surface) !important; color: var(--text); text-align: center; - font-size: 0.85rem; + font-size: 13px; min-height: 90px; + font-weight: 400; +} +.theme-btn:hover { + background: var(--surface-hover) !important; + border-color: var(--text-muted) !important; } -.theme-btn:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.25); } .theme-btn.active { - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), var(--glow); + border-color: var(--primary) !important; + box-shadow: 0 0 0 2px var(--primary), var(--glow-subtle); + background: linear-gradient(180deg, rgba(123, 46, 255, 0.08), rgba(0, 198, 255, 0.05)) !important; } .theme-preview { - width: 60px; - height: 40px; - border-radius: 6px !important; - border: 1px solid rgba(255, 255, 255, 0.2); + width: 64px; + height: 42px; + border-radius: 4px !important; + border: 1px solid var(--border); position: relative; overflow: hidden; } -.theme-preview::after { - content: ''; - position: absolute; - inset: 0; - border: 1px solid rgba(0, 0, 0, 0.1); - border-radius: 6px; - pointer-events: none; -} .custom-theme-btn { border-style: dashed !important; opacity: 0.95; } .custom-theme-btn:hover { opacity: 1; } @@ -394,66 +492,86 @@ h2::after { input[type="range"] { -webkit-appearance: none; appearance: none; - height: 6px; - background: linear-gradient(90deg, rgba(123,46,255,0.6), rgba(0,198,255,0.6)); - border-radius: 999px; + height: 4px; + background: linear-gradient(90deg, var(--primary), var(--accent)); + border-radius: 2px; outline: none; - border: 1px solid rgba(255,255,255,0.15); + border: none; + cursor: pointer; + opacity: 0.8; +} + +input[type="range"]:hover { + opacity: 1; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; - width: 18px; - height: 18px; + width: 16px; + height: 16px; border-radius: 50%; - background: #fff; - border: 2px solid rgba(123,46,255,0.9); - box-shadow: 0 2px 10px rgba(123,46,255,0.35); + background: var(--primary); + border: 2px solid #fff; + box-shadow: 0 1px 3px rgba(0,0,0,0.3); + cursor: pointer; } input[type="range"]::-moz-range-thumb { - width: 18px; - height: 18px; + width: 16px; + height: 16px; border-radius: 50%; - background: #fff; - border: 2px solid rgba(123,46,255,0.9); - box-shadow: 0 2px 10px rgba(123,46,255,0.35); + background: var(--primary); + border: 2px solid #fff; + box-shadow: 0 1px 3px rgba(0,0,0,0.3); + cursor: pointer; } /* Checkboxes/radios */ input[type="checkbox"], input[type="radio"] { - accent-color: #8a4dff; + accent-color: var(--primary); + width: 16px; + height: 16px; + margin-right: 8px; } /* Layout & logo options */ .layout-options { display: flex; flex-direction: column; gap: 10px; } -.layout-options label { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px; border-radius: 6px; transition: background 0.2s ease; } -.layout-options label:hover { background: rgba(255,255,255,0.05); } +.layout-options label { + display: flex; + align-items: center; + gap: 8px; + cursor: pointer; + padding: 8px; + border-radius: 4px; + transition: background 0.15s ease; +} +.layout-options label:hover { background: var(--surface); } .logo-options { display: flex; flex-direction: column; gap: 12px; } .logo-options label { display: flex; align-items: center; gap: 8px; } .logo-options input[type="text"] { flex: 1; } /* Color customization controls */ .color-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; } -.color-group { display: flex; flex-direction: column; gap: 5px; } -.color-group label { font-size: 0.9rem; color: var(--text); opacity: 0.9; } +.color-group { display: flex; flex-direction: column; gap: 8px; } +.color-group label { font-size: 14px; color: var(--text-secondary); font-weight: 500; } input[type="color"] { width: 100%; height: 40px; padding: 0; - border: 1px solid rgba(255,255,255,0.2); - border-radius: 8px; + border: 1px solid var(--border); + border-radius: 4px; background: transparent; cursor: pointer; } /* Preview area */ .preview-container { - background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.03)) !important; - border-radius: 14px !important; - border: 1px solid var(--card-border) !important; - box-shadow: 0 10px 30px rgba(0,0,0,0.3); + background: var(--surface) !important; + border-radius: 8px !important; + border: 1px solid var(--border) !important; + box-shadow: none; + overflow: hidden; } .preview-home { display: flex; @@ -462,9 +580,9 @@ input[type="color"] { gap: 15px; padding: 20px; background: var(--bg); - border-radius: 8px; + border-radius: 4px; min-height: 200px; - border: 1px dashed rgba(255,255,255,0.12); + border: 1px dashed var(--border); } .preview-text { letter-spacing: 0.3px; } .preview-logo { font-size: 1.5rem; font-weight: 700; color: var(--primary); } @@ -481,76 +599,122 @@ input[type="color"] { } #search-history-list li, #site-history-list li { list-style: none; - padding: 8px 10px; - background: rgba(255,255,255,0.03); - border: 1px solid rgba(255,255,255,0.08); - border-radius: 10px; + padding: 10px 12px; + background: var(--surface); + border: 1px solid var(--border); + border-radius: 4px; + font-size: 14px; } #site-history-list a { - color: var(--accent); + color: var(--primary); text-decoration: none; } -#site-history-list a:hover { text-decoration: underline; } +#site-history-list a:hover { + text-decoration: underline; + color: var(--primary-hover); +} /* About buttons */ .github-btn, .help-btn { display: inline-flex; align-items: center; gap: 8px; - padding: 8px 12px; - background: var(--accent); + padding: 0.5rem 1rem; + background: var(--surface); color: var(--text); - border: 1px solid rgba(255,255,255,0.08) !important; - border-radius: 10px !important; + border: 1px solid var(--border) !important; + border-radius: 4px !important; text-decoration: none; cursor: pointer; - transition: transform 0.08s ease, box-shadow 0.2s ease, filter 0.2s ease; - box-shadow: 0 6px 18px rgba(0,0,0,0.25); + transition: background 0.15s ease; + font-size: 14px; +} +.github-btn:hover, .help-btn:hover { + background: var(--surface-hover); +} +.github-btn svg, .help-btn svg { + width: 16px; + height: 16px; + fill: currentColor; } -.github-btn:hover, .help-btn:hover { filter: brightness(1.03) saturate(1.05); box-shadow: var(--glow); } -.github-btn:active, .help-btn:active { transform: translateY(1px); } .about-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* Debug info */ .debug-info { - background: rgba(0,0,0,0.35) !important; - border: 1px solid rgba(255,255,255,0.1); - border-radius: 10px; + background: var(--surface); + border: 1px solid var(--border); + border-radius: 4px; + padding: 12px; + font-size: 13px; + line-height: 1.6; + color: var(--text-secondary); + font-family: 'Consolas', 'Monaco', monospace; } /* General lists inside cards */ .customization-group ul { list-style: none; padding: 0; margin: 0; } -.customization-group ul li { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06); } +.customization-group ul li { + padding: 10px 0; + border-bottom: 1px solid var(--border-subtle); + font-size: 14px; + line-height: 1.5; +} .customization-group ul li:last-child { border-bottom: none; } /* Theme management buttons */ .theme-management { display: flex; flex-wrap: wrap; gap: 10px; } -#reset-to-default { background: linear-gradient(180deg, #e53e3e, #c53030); } +#reset-to-default { + background: #d41b2c; + border-color: #d41b2c; + color: white; +} +#reset-to-default:hover { + background: #a4161a; + border-color: #a4161a; +} /* Scrollbar styling (Chromium) */ -*::-webkit-scrollbar { height: 10px; width: 10px; } -*::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 999px; } -*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(123,46,255,0.7), rgba(0,198,255,0.7)); border-radius: 999px; } -*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(123,46,255,0.9), rgba(0,198,255,0.9)); } +*::-webkit-scrollbar { height: 12px; width: 12px; } +*::-webkit-scrollbar-track { background: var(--bg); } +*::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, var(--primary), var(--accent)); + border-radius: 6px; + border: 2px solid var(--bg); +} +*::-webkit-scrollbar-thumb:hover { + background: linear-gradient(180deg, var(--primary-hover), var(--accent)); +} /* small-screen adjustments */ -@media (max-width: 480px) { - .container { +@media (max-width: 768px) { + body { padding: 0; - border-radius: 12px; - box-shadow: 0 0 8px rgba(0,0,0,0.35); + } + .container { flex-direction: column; max-width: 100%; + height: 100vh; + border-radius: 0; } .sidebar { width: 100%; border-right: none; - border-bottom: 1px solid rgba(255,255,255,0.08); - padding-bottom: 0.5rem; + border-bottom: 1px solid var(--border); + padding: 1rem; } - .tabs { flex-direction: row; flex-wrap: wrap; gap: 6px; } - .tab-link { flex: 1 1 auto; } - h1 { + .tabs { + flex-direction: row; + flex-wrap: wrap; + gap: 6px; + } + .tab-link { + flex: 1 1 auto; + min-width: 120px; + } + .content { + padding: 1.5rem 1rem; + } + h2 { font-size: 1.25rem; } } diff --git a/renderer/settings.html b/renderer/settings.html index 1da9c3a..08c156d 100644 --- a/renderer/settings.html +++ b/renderer/settings.html @@ -24,17 +24,20 @@

General

+
- - +

Data Management

+

Clear all cookies, cache, and browsing data stored locally on this device.

+
+ +
-

Settings are stored locally on this device.

-

🎮 Big Picture Mode

+

Big Picture Mode

A controller-friendly UI designed for Steam Deck and handheld devices.

-
+
@@ -43,21 +46,25 @@
-

Weather

-
- Temperature units - - - +

Weather Display

+

Choose how temperature is displayed on the Home page weather card.

+
+ Temperature units + + +
-

Affects the weather card on the Home page.

-
Loading debug info...
+ +
+

System Information

+
Loading debug info...
+
-

🎨 Appearance

+

Appearance

Theme Presets

@@ -120,12 +127,10 @@

Display Scale

-
-
- - 100% -
-

Adjust the default display scale (zoom) when opening the browser. Requires reload to take effect.

+

Adjust the default zoom level when opening the browser. Changes require a reload to take effect.

+
+ + 100%
@@ -214,7 +219,7 @@

Site History

    -
    +
    @@ -225,7 +230,7 @@

    Plugins

    -
    +
    Changes to renderer preloads may require app restart.
    @@ -273,7 +278,7 @@

    Security Updates

    Nebula Browser is distributed via Steam, but the Electron runtime can be updated separately for security patches and performance improvements.

    -
    +