andrew
0eb9ec0c9a
Revamps the settings page with improved layout, modernized CSS, and enhanced accessibility, including new layout helpers, better grouping, and consistent styling. Updates Electron from v39.2.7 to v40.0.0 in dependencies. Adds dynamic theme application to the settings page, ensuring user-selected themes are reflected immediately.
721 lines
15 KiB
CSS
721 lines
15 KiB
CSS
/* existing styles */
|
|
|
|
/* Plugins panel */
|
|
.plugins-list { display: grid; gap: 10px; }
|
|
.plugin-item { display:flex; justify-content:space-between; align-items:center; border:1px solid rgba(255,255,255,0.12); padding:10px; border-radius:8px; background: rgba(255,255,255,0.03); }
|
|
.plugin-meta { display:flex; flex-direction:column; gap:2px; min-width:0; }
|
|
.plugin-title { font-weight:600; }
|
|
.plugin-desc { opacity:.8; font-size:.9em; }
|
|
.plugin-actions { display:flex; gap:8px; align-items:center; }
|
|
.plugin-actions .spacer { width:8px; }
|
|
.plugin-tags { display:flex; flex-wrap: wrap; gap:6px; margin-top: 4px; }
|
|
.plugin-tag { display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:.75em; opacity:.9; border:1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); }
|
|
.plugin-authors { margin-top: 4px; font-size:.85em; opacity:.85; }
|
|
.plugin-authors .muted { opacity:.7; margin-right: 6px; }
|
|
:root {
|
|
--bg: #121418;
|
|
--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;
|
|
--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 */
|
|
@font-face {
|
|
font-family: 'InterVariable';
|
|
src: url('../assets/images/fonts/InterVariable.ttf') format('truetype');
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
}
|
|
|
|
body {
|
|
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;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
min-height: 100vh;
|
|
overflow: auto;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
background: var(--bg);
|
|
padding: 0;
|
|
border-radius: 0;
|
|
border: none;
|
|
box-shadow: none;
|
|
max-width: 100vw;
|
|
width: 100%;
|
|
display: flex;
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
}
|
|
|
|
/* Subtle animated sheen around the container */
|
|
|
|
|
|
/* Sidebar + content layout */
|
|
.sidebar {
|
|
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.35rem;
|
|
font-weight: 300;
|
|
margin: 0 0 1.5rem 0;
|
|
padding: 0 1rem;
|
|
color: var(--primary);
|
|
letter-spacing: -0.01em;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.tab-link {
|
|
text-align: left;
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 10px 1rem;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
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: var(--surface);
|
|
color: var(--text);
|
|
}
|
|
|
|
.tab-link.active {
|
|
background: linear-gradient(90deg, rgba(123, 46, 255, 0.12), rgba(0, 198, 255, 0.08));
|
|
color: var(--text);
|
|
border-left-color: var(--primary);
|
|
font-weight: 500;
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
|
|
|
|
.content {
|
|
flex: 1;
|
|
padding: 2rem 3rem;
|
|
overflow: auto;
|
|
position: relative;
|
|
z-index: 1;
|
|
background: var(--bg);
|
|
}
|
|
|
|
.tab-panel {
|
|
display: none;
|
|
}
|
|
|
|
.tab-panel.active {
|
|
display: block;
|
|
}
|
|
|
|
|
|
|
|
.setting-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
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: 400;
|
|
margin-bottom: 0.35rem;
|
|
color: var(--text);
|
|
font-size: 15px;
|
|
}
|
|
|
|
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[type="text"]:focus,
|
|
input[type="file"]:focus {
|
|
box-shadow: var(--ring);
|
|
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.5rem 1rem;
|
|
font-size: 14px;
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-weight: 400;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
button:hover {
|
|
background: var(--surface-hover);
|
|
box-shadow: var(--glow-subtle);
|
|
}
|
|
|
|
|
|
|
|
/* Primary button style (e.g., Big Picture Mode) */
|
|
.primary-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0.5rem 1rem;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
background: linear-gradient(135deg, var(--primary), var(--accent));
|
|
color: var(--text);
|
|
border: 1px solid var(--primary);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
box-shadow: var(--glow-subtle);
|
|
}
|
|
|
|
.primary-btn:hover {
|
|
background: linear-gradient(135deg, var(--primary-hover), var(--accent));
|
|
box-shadow: 0 4px 24px rgba(123, 46, 255, 0.25);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
|
|
|
|
.note {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
margin-top: 0.35rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.status {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
background-color: var(--surface);
|
|
color: var(--text);
|
|
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;
|
|
}
|
|
|
|
.status.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.spinner {
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid transparent;
|
|
border-top: 2px solid white;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.setting-group input,
|
|
.setting-group button {
|
|
width: 100%;
|
|
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: 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 0.75rem 0;
|
|
position: relative;
|
|
padding-left: 0;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: 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: 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: '';
|
|
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(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: 10px 8px;
|
|
border: 2px solid var(--border) !important;
|
|
border-radius: 8px !important;
|
|
background: var(--surface) !important;
|
|
color: var(--text);
|
|
text-align: center;
|
|
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.active {
|
|
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: 64px;
|
|
height: 42px;
|
|
border-radius: 4px !important;
|
|
border: 1px solid var(--border);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.custom-theme-btn { border-style: dashed !important; opacity: 0.95; }
|
|
.custom-theme-btn:hover { opacity: 1; }
|
|
|
|
/* Range sliders */
|
|
input[type="range"] {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--primary), var(--accent));
|
|
border-radius: 2px;
|
|
outline: none;
|
|
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: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
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: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
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: 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: 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: 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 var(--border);
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Preview area */
|
|
.preview-container {
|
|
background: var(--surface) !important;
|
|
border-radius: 8px !important;
|
|
border: 1px solid var(--border) !important;
|
|
box-shadow: none;
|
|
overflow: hidden;
|
|
}
|
|
.preview-home {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding: 20px;
|
|
background: var(--bg);
|
|
border-radius: 4px;
|
|
min-height: 200px;
|
|
border: 1px dashed var(--border);
|
|
}
|
|
.preview-text { letter-spacing: 0.3px; }
|
|
.preview-logo { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
|
|
.preview-search { width: 60%; height: 40px; background: rgba(255,255,255,0.1); border-radius: 20px; border: 1px solid rgba(255,255,255,0.2); }
|
|
.preview-bookmarks { display: flex; gap: 10px; }
|
|
.preview-bookmark { width: 50px; height: 50px; background: var(--accent); border-radius: 8px; }
|
|
|
|
/* History lists */
|
|
#search-history-list, #site-history-list {
|
|
padding: 0;
|
|
margin: 6px 0 0 0;
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
#search-history-list li, #site-history-list li {
|
|
list-style: none;
|
|
padding: 10px 12px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
#site-history-list a {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
}
|
|
#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: 0.5rem 1rem;
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: 4px !important;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
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;
|
|
}
|
|
.about-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
|
|
|
|
/* Debug info */
|
|
.debug-info {
|
|
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: 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: #d41b2c;
|
|
border-color: #d41b2c;
|
|
color: white;
|
|
}
|
|
#reset-to-default:hover {
|
|
background: #a4161a;
|
|
border-color: #a4161a;
|
|
}
|
|
|
|
/* Scrollbar styling (Chromium) */
|
|
*::-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: 768px) {
|
|
body {
|
|
padding: 0;
|
|
}
|
|
.container {
|
|
flex-direction: column;
|
|
max-width: 100%;
|
|
height: 100vh;
|
|
border-radius: 0;
|
|
}
|
|
.sidebar {
|
|
width: 100%;
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 1rem;
|
|
}
|
|
.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;
|
|
}
|
|
}
|