Andrew Zambazos
fbd8a555ec
Replace inline SVG markup with external icon files using CSS mask-based rendering. This approach reduces HTML duplication, enables dynamic color tinting via currentColor, and improves maintainability by centralizing icon definitions. Updates favicon rendering in chrome.js, icon styling in CSS files, and converts icon elements across 404, insecure, and settings pages. Also updates settings page favicon and GitHub link URL.
805 lines
17 KiB
CSS
805 lines
17 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/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: var(--primary);
|
|
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: var(--primary-hover);
|
|
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);
|
|
}
|
|
|
|
/* Zoom controls */
|
|
.zoom-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.zoom-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 1px solid var(--border);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
border-radius: 6px;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.zoom-btn:hover {
|
|
background: var(--surface-hover);
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.zoom-btn:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.zoom-value {
|
|
flex: 1;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
text-align: center;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.zoom-presets {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.zoom-preset-btn {
|
|
padding: 10px 16px;
|
|
border: 1px solid var(--border);
|
|
background: var(--surface);
|
|
color: var(--text-secondary);
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.zoom-preset-btn:hover {
|
|
background: var(--surface-hover);
|
|
border-color: var(--primary);
|
|
color: var(--text);
|
|
}
|
|
|
|
.zoom-preset-btn.active {
|
|
background: var(--primary);
|
|
border-color: var(--primary);
|
|
color: white;
|
|
box-shadow: var(--glow-subtle);
|
|
}
|
|
|
|
.zoom-preset-btn:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.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 .btn-icon, .help-btn .btn-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
display: inline-block;
|
|
background-color: currentColor;
|
|
-webkit-mask: var(--btn-icon-mask) center / contain no-repeat;
|
|
mask: var(--btn-icon-mask) center / contain no-repeat;
|
|
}
|
|
.btn-icon-github { --btn-icon-mask: url("../assets/icons/github.svg"); }
|
|
.btn-icon-help { --btn-icon-mask: url("../assets/icons/help.svg"); }
|
|
.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;
|
|
}
|
|
}
|