andrew
26126982e2
Adds a frameless window with custom title bar controls for Windows, including minimize, maximize/restore, and close buttons. Refactors theme color application to use CSS variables and color-mix for improved consistency and dynamic theming across home, settings, and main UI. Updates renderer and styles to support the new title bar, platform detection, and improved color handling. No changes to lock files.
557 lines
16 KiB
CSS
557 lines
16 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;
|
|
--dark-blue: #0B1C2B;
|
|
--dark-purple: #1B1035;
|
|
--primary: #7B2EFF;
|
|
--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);
|
|
}
|
|
|
|
/* Load InterVariable */
|
|
@font-face {
|
|
font-family: 'InterVariable';
|
|
src: url('../assets/images/fonts/InterVariable.ttf') format('truetype');
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
}
|
|
|
|
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%);
|
|
color: var(--text);
|
|
font-family: 'InterVariable', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
|
margin: 0;
|
|
padding: 2rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
min-height: 100vh;
|
|
overflow: auto;
|
|
}
|
|
|
|
.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%);
|
|
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;
|
|
width: 100%;
|
|
display: flex;
|
|
overflow: hidden;
|
|
max-height: calc(100vh - 4rem);
|
|
}
|
|
|
|
/* 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;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sidebar h1 {
|
|
font-size: 1.1rem;
|
|
margin: 0 0 1rem 0;
|
|
color: var(--primary);
|
|
letter-spacing: 0.4px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.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;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.tab-link:hover {
|
|
background: rgba(255,255,255,0.06);
|
|
border-color: rgba(255,255,255,0.08);
|
|
}
|
|
|
|
.tab-link.active {
|
|
background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--accent) 14%, transparent));
|
|
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);
|
|
}
|
|
|
|
/* 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;
|
|
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%);
|
|
}
|
|
|
|
.tab-panel {
|
|
display: none;
|
|
}
|
|
|
|
.tab-panel.active {
|
|
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;
|
|
}
|
|
|
|
label {
|
|
font-weight: bold;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
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%);
|
|
color: var(--text);
|
|
outline: none;
|
|
}
|
|
input:focus {
|
|
box-shadow: var(--ring);
|
|
border-color: color-mix(in srgb, var(--primary) 50%, transparent);
|
|
}
|
|
|
|
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%));
|
|
color: var(--text);
|
|
border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s ease, filter 0.2s ease;
|
|
}
|
|
|
|
button:hover {
|
|
filter: brightness(1.03) saturate(1.05);
|
|
box-shadow: var(--glow);
|
|
}
|
|
|
|
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%;
|
|
color: var(--text);
|
|
border: 1px solid rgba(255,255,255,0.15);
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 20px color-mix(in srgb, var(--primary) 30%, transparent);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.status {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
background-color: color-mix(in srgb, var(--bg) 82%, #000 18%);
|
|
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;
|
|
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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.customization-group > h3 {
|
|
margin: 0 0 10px 0;
|
|
position: relative;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.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));
|
|
}
|
|
|
|
/* Section titles */
|
|
h2 {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 1.2rem;
|
|
margin: 0 0 12px 0;
|
|
}
|
|
|
|
h2::after {
|
|
content: '';
|
|
flex: 1 1 auto;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, rgba(255,255,255,0.15), transparent);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
.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;
|
|
color: var(--text);
|
|
text-align: center;
|
|
font-size: 0.85rem;
|
|
min-height: 90px;
|
|
}
|
|
.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);
|
|
}
|
|
.theme-preview {
|
|
width: 60px;
|
|
height: 40px;
|
|
border-radius: 6px !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
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; }
|
|
|
|
/* Range sliders */
|
|
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;
|
|
outline: none;
|
|
border: 1px solid rgba(255,255,255,0.15);
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
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);
|
|
}
|
|
|
|
input[type="range"]::-moz-range-thumb {
|
|
width: 18px;
|
|
height: 18px;
|
|
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);
|
|
}
|
|
|
|
/* Checkboxes/radios */
|
|
input[type="checkbox"], input[type="radio"] {
|
|
accent-color: #8a4dff;
|
|
}
|
|
|
|
/* 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); }
|
|
.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; }
|
|
input[type="color"] {
|
|
width: 100%;
|
|
height: 40px;
|
|
padding: 0;
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
border-radius: 8px;
|
|
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);
|
|
}
|
|
.preview-home {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding: 20px;
|
|
background: var(--bg);
|
|
border-radius: 8px;
|
|
min-height: 200px;
|
|
border: 1px dashed rgba(255,255,255,0.12);
|
|
}
|
|
.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: 8px 10px;
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 10px;
|
|
}
|
|
#site-history-list a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
#site-history-list a:hover { text-decoration: underline; }
|
|
|
|
/* About buttons */
|
|
.github-btn, .help-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
background: var(--accent);
|
|
color: var(--text);
|
|
border: 1px solid rgba(255,255,255,0.08) !important;
|
|
border-radius: 10px !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);
|
|
}
|
|
.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;
|
|
}
|
|
|
|
/* 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: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); }
|
|
|
|
/* 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)); }
|
|
|
|
/* small-screen adjustments */
|
|
@media (max-width: 480px) {
|
|
.container {
|
|
padding: 0;
|
|
border-radius: 12px;
|
|
box-shadow: 0 0 8px rgba(0,0,0,0.35);
|
|
flex-direction: column;
|
|
max-width: 100%;
|
|
}
|
|
.sidebar {
|
|
width: 100%;
|
|
border-right: none;
|
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
.tabs { flex-direction: row; flex-wrap: wrap; gap: 6px; }
|
|
.tab-link { flex: 1 1 auto; }
|
|
h1 {
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|