andrew
5c837aecd8
Introduces a new Big Picture Mode with a controller-friendly, console-style UI optimized for Steam Deck and handheld devices. Adds new renderer files (HTML, CSS, JS) for the mode, updates main and preload scripts to support window management and IPC for Big Picture Mode, and documents features and usage in BIG_PICTURE_MODE.md. Updates settings and navigation to allow launching and exiting Big Picture Mode.
553 lines
14 KiB
CSS
553 lines
14 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, rgba(20, 14, 40, 0.6), rgba(16, 10, 28, 0.6));
|
|
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, rgba(123,46,255,0.25), rgba(0,198,255,0.15) 40%, transparent 60%);
|
|
filter: blur(20px);
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Sidebar + content layout */
|
|
.sidebar {
|
|
width: 280px;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
|
|
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, rgba(123, 46, 255, 0.18), rgba(0, 198, 255, 0.10));
|
|
color: #fff;
|
|
border: 1px solid rgba(123,46,255,0.35);
|
|
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
|
|
}
|
|
|
|
/* 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 rgba(255,255,255,0.12);
|
|
border-radius: 10px;
|
|
margin-bottom: 0.75rem;
|
|
background-color: rgba(11, 28, 43, 0.6);
|
|
color: var(--text);
|
|
outline: none;
|
|
}
|
|
input:focus {
|
|
box-shadow: var(--ring);
|
|
border-color: rgba(123,46,255,0.5);
|
|
}
|
|
|
|
button {
|
|
padding: 0.65rem 0.9rem;
|
|
font-size: 0.95rem;
|
|
background: linear-gradient(180deg, rgba(123,46,255,0.95), rgba(90, 20, 220, 0.95));
|
|
color: #fff;
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
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, #7B2EFF 0%, #5a1fd4 50%, #00C6FF 100%);
|
|
background-size: 200% 100%;
|
|
color: #fff;
|
|
border: 1px solid rgba(255,255,255,0.15);
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 20px rgba(123, 46, 255, 0.3);
|
|
}
|
|
|
|
.primary-btn:hover {
|
|
background-position: 100% 0;
|
|
box-shadow: 0 6px 30px rgba(123, 46, 255, 0.45), 0 0 20px rgba(0, 198, 255, 0.2);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.primary-btn:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 2px 10px rgba(123, 46, 255, 0.3);
|
|
}
|
|
|
|
.note {
|
|
font-size: 0.8rem;
|
|
color: #aaa;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.status {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
background-color: rgba(18,20,24,0.8);
|
|
color: white;
|
|
padding: 0.8rem 1.2rem;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
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), var(--surface-2));
|
|
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;
|
|
}
|
|
.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: linear-gradient(180deg, rgba(123,46,255,0.95), rgba(90, 20, 220, 0.95));
|
|
color: #fff;
|
|
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;
|
|
}
|
|
}
|