andrew
0a26ecccd5
Introduces optional 'categories' and 'authors' fields to plugin manifests, updates plugin-manager.js to normalize and expose these fields, and enhances the settings UI to display plugin tags and authors. Also updates documentation and an example plugin manifest to demonstrate the new fields.
524 lines
14 KiB
CSS
524 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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|