696 lines
18 KiB
CSS
696 lines
18 KiB
CSS
|
/* ═══════════════════════════════════════════════════════════════════
|
||
|
|
echo6 // searxng custom theme
|
||
|
|
═══════════════════════════════════════════════════════════════════
|
||
|
|
colors: cyan #28C0E8 / yellow #F0D848 (extracted from logo)
|
||
|
|
font: JetBrains Mono
|
||
|
|
aesthetic: cyberpunk — dark, sharp, clean, minimal glow
|
||
|
|
═══════════════════════════════════════════════════════════════════ */
|
||
|
|
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');
|
||
|
|
|
||
|
|
/* ─── css variables ─── */
|
||
|
|
:root {
|
||
|
|
/* echo6 brand */
|
||
|
|
--e6-cyan: #28C0E8;
|
||
|
|
--e6-cyan-light: #5DD4F5;
|
||
|
|
--e6-cyan-dim: rgba(40, 192, 232, 0.12);
|
||
|
|
--e6-yellow: #F0D848;
|
||
|
|
--e6-yellow-light: #F5E470;
|
||
|
|
--e6-yellow-dim: rgba(240, 216, 72, 0.1);
|
||
|
|
|
||
|
|
/* backgrounds */
|
||
|
|
--e6-bg: #0a0e17;
|
||
|
|
--e6-bg-card: #111827;
|
||
|
|
--e6-bg-hover: #1a2332;
|
||
|
|
--e6-bg-footer: #060a10;
|
||
|
|
|
||
|
|
/* borders */
|
||
|
|
--e6-border: #1e3a5f;
|
||
|
|
|
||
|
|
/* text */
|
||
|
|
--e6-text: #e0e6ed;
|
||
|
|
--e6-text-muted: #7a8ca0;
|
||
|
|
|
||
|
|
/* buttons */
|
||
|
|
--e6-btn-bg: #1a2332;
|
||
|
|
--e6-btn-hover: #243447;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ═══════════════════════════════════════════
|
||
|
|
1. global — font, background, text
|
||
|
|
═══════════════════════════════════════════ */
|
||
|
|
|
||
|
|
* {
|
||
|
|
font-family: 'JetBrains Mono', monospace !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
html, body {
|
||
|
|
background-color: var(--e6-bg) !important;
|
||
|
|
color: var(--e6-text) !important;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ═══════════════════════════════════════════
|
||
|
|
2. homepage — viewport lock, centering
|
||
|
|
═══════════════════════════════════════════
|
||
|
|
homepage only — no scroll, logo centered
|
||
|
|
at ~35-40% from top like google.com.
|
||
|
|
CC: replace selectors if actual DOM differs.
|
||
|
|
═══════════════════════════════════════════ */
|
||
|
|
|
||
|
|
/* lock homepage to viewport — no scrollbar */
|
||
|
|
html:has(body.index),
|
||
|
|
body.index {
|
||
|
|
height: 100vh !important;
|
||
|
|
overflow: hidden !important;
|
||
|
|
margin: 0 !important;
|
||
|
|
padding: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* center the main content area */
|
||
|
|
body.index main,
|
||
|
|
body.index #main_index,
|
||
|
|
body.index .search-margin {
|
||
|
|
display: flex !important;
|
||
|
|
flex-direction: column !important;
|
||
|
|
align-items: center !important;
|
||
|
|
justify-content: center !important;
|
||
|
|
height: calc(100vh - 80px) !important;
|
||
|
|
min-height: unset !important;
|
||
|
|
padding-bottom: 10vh !important;
|
||
|
|
margin: 0 !important;
|
||
|
|
overflow: hidden !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ═══════════════════════════════════════════
|
||
|
|
3. hide default searxng branding
|
||
|
|
═══════════════════════════════════════════
|
||
|
|
kill the giant "SearXNG" text behind the
|
||
|
|
logo. only the echo6 logo should show.
|
||
|
|
CC: inspect DOM and add the real selector
|
||
|
|
if these don't catch it.
|
||
|
|
═══════════════════════════════════════════ */
|
||
|
|
|
||
|
|
.searxng-wordmark,
|
||
|
|
#main-logo span,
|
||
|
|
.index h1,
|
||
|
|
h1.title,
|
||
|
|
.search-margin h1,
|
||
|
|
#main_index h1,
|
||
|
|
.index .title,
|
||
|
|
.title_h1 {
|
||
|
|
display: none !important;
|
||
|
|
visibility: hidden !important;
|
||
|
|
font-size: 0 !important;
|
||
|
|
color: transparent !important;
|
||
|
|
height: 0 !important;
|
||
|
|
overflow: hidden !important;
|
||
|
|
margin: 0 !important;
|
||
|
|
padding: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ═══════════════════════════════════════════
|
||
|
|
4. logo
|
||
|
|
═══════════════════════════════════════════ */
|
||
|
|
|
||
|
|
.logo img,
|
||
|
|
.search-margin img,
|
||
|
|
#main-logo img,
|
||
|
|
img[src*="searxng"] {
|
||
|
|
max-width: 270px;
|
||
|
|
height: auto;
|
||
|
|
display: block;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ═══════════════════════════════════════════
|
||
|
|
5. search bar — pill shape, subtle focus
|
||
|
|
═══════════════════════════════════════════ */
|
||
|
|
|
||
|
|
#search_form .search_box,
|
||
|
|
.search_box,
|
||
|
|
#q {
|
||
|
|
background-color: var(--e6-bg-card) !important;
|
||
|
|
border: 1px solid var(--e6-border) !important;
|
||
|
|
border-radius: 24px !important;
|
||
|
|
color: var(--e6-text) !important;
|
||
|
|
font-size: 16px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* focused state — subtle cyan border, barely-there shadow */
|
||
|
|
#search_form .search_box:focus-within,
|
||
|
|
.search_box:focus-within {
|
||
|
|
border-color: var(--e6-cyan) !important;
|
||
|
|
box-shadow: 0 0 6px var(--e6-cyan-dim) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#search_form input[type="text"],
|
||
|
|
#search_form input[type="search"],
|
||
|
|
#q {
|
||
|
|
font-family: 'JetBrains Mono', monospace !important;
|
||
|
|
font-size: 16px !important;
|
||
|
|
color: var(--e6-text) !important;
|
||
|
|
background: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* placeholder text */
|
||
|
|
#q::placeholder,
|
||
|
|
input[type="search"]::placeholder {
|
||
|
|
color: var(--e6-text-muted) !important;
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* search bar container width */
|
||
|
|
#search_form,
|
||
|
|
.search_box {
|
||
|
|
max-width: 584px !important;
|
||
|
|
margin-left: auto !important;
|
||
|
|
margin-right: auto !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ═══════════════════════════════════════════
|
||
|
|
6. search buttons
|
||
|
|
═══════════════════════════════════════════ */
|
||
|
|
|
||
|
|
#search_form button,
|
||
|
|
#search_form input[type="submit"],
|
||
|
|
.search_filters button,
|
||
|
|
.search_submit,
|
||
|
|
.search_box button {
|
||
|
|
background-color: var(--e6-btn-bg) !important;
|
||
|
|
border: 1px solid var(--e6-border) !important;
|
||
|
|
border-radius: 4px !important;
|
||
|
|
color: var(--e6-text) !important;
|
||
|
|
font-family: 'JetBrains Mono', monospace !important;
|
||
|
|
font-size: 14px !important;
|
||
|
|
cursor: pointer;
|
||
|
|
text-transform: lowercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
#search_form button:hover,
|
||
|
|
#search_form input[type="submit"]:hover,
|
||
|
|
.search_submit:hover,
|
||
|
|
.search_box button:hover {
|
||
|
|
background-color: var(--e6-btn-hover) !important;
|
||
|
|
border-color: var(--e6-cyan) !important;
|
||
|
|
color: var(--e6-text) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ═══════════════════════════════════════════
|
||
|
|
7. top navigation bar
|
||
|
|
═══════════════════════════════════════════
|
||
|
|
injected via template override.
|
||
|
|
styles the .//photos .//mail links, waffle
|
||
|
|
menu button, and login avatar.
|
||
|
|
═══════════════════════════════════════════ */
|
||
|
|
|
||
|
|
.echo6-nav {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
align-items: center;
|
||
|
|
padding: 10px 18px;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
z-index: 1000;
|
||
|
|
background-color: transparent;
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* .//photos and .//mail links */
|
||
|
|
.echo6-nav a.echo6-nav-link {
|
||
|
|
color: var(--e6-cyan) !important;
|
||
|
|
text-decoration: none;
|
||
|
|
font-size: 13px;
|
||
|
|
font-weight: 500;
|
||
|
|
letter-spacing: 0.03em;
|
||
|
|
text-transform: lowercase;
|
||
|
|
transition: color 0.15s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6-nav a.echo6-nav-link:hover {
|
||
|
|
color: var(--e6-cyan-light) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* waffle menu (⠿) button */
|
||
|
|
.echo6-waffle-btn {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 36px;
|
||
|
|
height: 36px;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: none;
|
||
|
|
background: transparent;
|
||
|
|
color: var(--e6-text-muted);
|
||
|
|
font-size: 20px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background-color 0.15s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6-waffle-btn:hover {
|
||
|
|
background-color: var(--e6-bg-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* login avatar button */
|
||
|
|
.echo6-login-btn {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: 1px solid var(--e6-border);
|
||
|
|
background: transparent;
|
||
|
|
color: var(--e6-text-muted);
|
||
|
|
cursor: pointer;
|
||
|
|
transition: border-color 0.15s ease;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6-login-btn:hover {
|
||
|
|
border-color: var(--e6-cyan);
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6-login-btn svg {
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
fill: var(--e6-text-muted);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ═══════════════════════════════════════════
|
||
|
|
8. waffle menu dropdown
|
||
|
|
═══════════════════════════════════════════ */
|
||
|
|
|
||
|
|
.echo6-waffle-menu {
|
||
|
|
display: none;
|
||
|
|
position: fixed;
|
||
|
|
top: 52px;
|
||
|
|
right: 70px;
|
||
|
|
z-index: 2000;
|
||
|
|
background-color: var(--e6-bg-card);
|
||
|
|
border: 1px solid var(--e6-border);
|
||
|
|
border-radius: 12px;
|
||
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
|
||
|
|
padding: 16px;
|
||
|
|
min-width: 280px;
|
||
|
|
animation: echo6FadeIn 0.15s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6-waffle-menu.active {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(3, 1fr);
|
||
|
|
gap: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6-waffle-menu a {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 12px 8px;
|
||
|
|
border-radius: 8px;
|
||
|
|
text-decoration: none;
|
||
|
|
color: var(--e6-text);
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 400;
|
||
|
|
text-transform: lowercase;
|
||
|
|
transition: background-color 0.15s ease;
|
||
|
|
gap: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6-waffle-menu a:hover {
|
||
|
|
background-color: var(--e6-bg-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6-waffle-menu a img {
|
||
|
|
width: 36px;
|
||
|
|
height: 36px;
|
||
|
|
border-radius: 6px;
|
||
|
|
object-fit: contain;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* emoji fallback icons in waffle menu */
|
||
|
|
.echo6-waffle-menu a .echo6-icon {
|
||
|
|
font-size: 28px;
|
||
|
|
line-height: 1;
|
||
|
|
height: 36px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes echo6FadeIn {
|
||
|
|
from { opacity: 0; transform: translateY(-4px); }
|
||
|
|
to { opacity: 1; transform: translateY(0); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* waffle menu overlay — click to close */
|
||
|
|
.echo6-waffle-overlay {
|
||
|
|
display: none;
|
||
|
|
position: fixed;
|
||
|
|
inset: 0;
|
||
|
|
z-index: 1999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6-waffle-overlay.active {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ═══════════════════════════════════════════
|
||
|
|
9. footer
|
||
|
|
═══════════════════════════════════════════ */
|
||
|
|
|
||
|
|
footer,
|
||
|
|
.footer,
|
||
|
|
#footer,
|
||
|
|
.searxng-footer {
|
||
|
|
background-color: var(--e6-bg-footer) !important;
|
||
|
|
border-top: 1px solid var(--e6-border) !important;
|
||
|
|
text-align: center;
|
||
|
|
padding: 12px 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer *,
|
||
|
|
.footer *,
|
||
|
|
#footer *,
|
||
|
|
.searxng-footer * {
|
||
|
|
font-size: 12px !important;
|
||
|
|
text-transform: lowercase;
|
||
|
|
color: var(--e6-text-muted) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer a,
|
||
|
|
.footer a,
|
||
|
|
#footer a,
|
||
|
|
.searxng-footer a {
|
||
|
|
color: var(--e6-text-muted) !important;
|
||
|
|
text-decoration: none;
|
||
|
|
transition: color 0.15s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer a:hover,
|
||
|
|
.footer a:hover,
|
||
|
|
#footer a:hover,
|
||
|
|
.searxng-footer a:hover {
|
||
|
|
color: var(--e6-cyan) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ═══════════════════════════════════════════
|
||
|
|
10. search results page
|
||
|
|
═══════════════════════════════════════════
|
||
|
|
results pages must scroll normally.
|
||
|
|
dark theme applied to result elements.
|
||
|
|
═══════════════════════════════════════════ */
|
||
|
|
|
||
|
|
/* allow scrolling on non-homepage */
|
||
|
|
html:not(:has(body.index)),
|
||
|
|
body:not(.index) {
|
||
|
|
height: auto !important;
|
||
|
|
overflow: auto !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* result links */
|
||
|
|
.result a,
|
||
|
|
.result-default a h3,
|
||
|
|
.result-title a {
|
||
|
|
color: var(--e6-cyan) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.result a:hover,
|
||
|
|
.result-default a:hover h3,
|
||
|
|
.result-title a:hover {
|
||
|
|
color: var(--e6-cyan-light) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.result a:visited,
|
||
|
|
.result-default a:visited h3 {
|
||
|
|
color: #8BA8C4 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* result URLs */
|
||
|
|
.result .url_wrapper,
|
||
|
|
.result .url,
|
||
|
|
.result-url {
|
||
|
|
color: var(--e6-text-muted) !important;
|
||
|
|
font-size: 13px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* result descriptions */
|
||
|
|
.result .content,
|
||
|
|
.result-content,
|
||
|
|
.result p {
|
||
|
|
color: var(--e6-text) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* result cards/containers */
|
||
|
|
.result,
|
||
|
|
.result-default {
|
||
|
|
background-color: transparent !important;
|
||
|
|
border-bottom: 1px solid var(--e6-border) !important;
|
||
|
|
padding: 14px 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* search categories/tabs bar */
|
||
|
|
.search_categories,
|
||
|
|
#categories,
|
||
|
|
.category {
|
||
|
|
background-color: var(--e6-bg) !important;
|
||
|
|
border-bottom: 1px solid var(--e6-border) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search_categories label,
|
||
|
|
.category a,
|
||
|
|
.category button {
|
||
|
|
color: var(--e6-text-muted) !important;
|
||
|
|
font-size: 13px !important;
|
||
|
|
text-transform: lowercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search_categories label:hover,
|
||
|
|
.category a:hover,
|
||
|
|
.category button:hover {
|
||
|
|
color: var(--e6-text) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* active category tab */
|
||
|
|
.search_categories label.active,
|
||
|
|
.category.active a,
|
||
|
|
.category.active button,
|
||
|
|
.search_categories input:checked + label {
|
||
|
|
color: var(--e6-cyan) !important;
|
||
|
|
border-bottom: 2px solid var(--e6-cyan) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* sidebar / infobox */
|
||
|
|
.infobox,
|
||
|
|
#sidebar {
|
||
|
|
background-color: var(--e6-bg-card) !important;
|
||
|
|
border: 1px solid var(--e6-border) !important;
|
||
|
|
border-radius: 8px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* pagination */
|
||
|
|
.pagination button,
|
||
|
|
.pagination a,
|
||
|
|
#pagination button {
|
||
|
|
background-color: var(--e6-btn-bg) !important;
|
||
|
|
border: 1px solid var(--e6-border) !important;
|
||
|
|
color: var(--e6-text) !important;
|
||
|
|
border-radius: 4px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination button:hover,
|
||
|
|
.pagination a:hover,
|
||
|
|
#pagination button:hover {
|
||
|
|
border-color: var(--e6-cyan) !important;
|
||
|
|
color: var(--e6-cyan) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* engine stats / result info */
|
||
|
|
.result_header,
|
||
|
|
.result-engines,
|
||
|
|
.engines {
|
||
|
|
color: var(--e6-text-muted) !important;
|
||
|
|
font-size: 11px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ═══════════════════════════════════════════
|
||
|
|
11. preferences page
|
||
|
|
═══════════════════════════════════════════ */
|
||
|
|
|
||
|
|
/* preferences containers */
|
||
|
|
.preferences,
|
||
|
|
.preferences fieldset,
|
||
|
|
.preferences form {
|
||
|
|
background-color: var(--e6-bg) !important;
|
||
|
|
color: var(--e6-text) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preferences fieldset {
|
||
|
|
border: 1px solid var(--e6-border) !important;
|
||
|
|
border-radius: 8px !important;
|
||
|
|
margin-bottom: 12px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preferences legend {
|
||
|
|
color: var(--e6-cyan) !important;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* select dropdowns and inputs in preferences */
|
||
|
|
.preferences select,
|
||
|
|
.preferences input[type="text"],
|
||
|
|
.preferences input[type="number"],
|
||
|
|
.preferences textarea {
|
||
|
|
background-color: var(--e6-bg-card) !important;
|
||
|
|
border: 1px solid var(--e6-border) !important;
|
||
|
|
color: var(--e6-text) !important;
|
||
|
|
border-radius: 4px !important;
|
||
|
|
font-family: 'JetBrains Mono', monospace !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preferences select:focus,
|
||
|
|
.preferences input:focus,
|
||
|
|
.preferences textarea:focus {
|
||
|
|
border-color: var(--e6-cyan) !important;
|
||
|
|
box-shadow: 0 0 6px var(--e6-cyan-dim) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* preferences save button */
|
||
|
|
.preferences input[type="submit"],
|
||
|
|
.preferences button[type="submit"] {
|
||
|
|
background-color: var(--e6-cyan) !important;
|
||
|
|
border: none !important;
|
||
|
|
color: var(--e6-bg) !important;
|
||
|
|
font-weight: 600;
|
||
|
|
border-radius: 4px !important;
|
||
|
|
cursor: pointer;
|
||
|
|
padding: 8px 24px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preferences input[type="submit"]:hover,
|
||
|
|
.preferences button[type="submit"]:hover {
|
||
|
|
background-color: var(--e6-cyan-light) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* engine toggle checkboxes */
|
||
|
|
.preferences input[type="checkbox"]:checked {
|
||
|
|
accent-color: var(--e6-cyan) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* preferences tab navigation */
|
||
|
|
.preferences .tabs a,
|
||
|
|
.preferences .nav a {
|
||
|
|
color: var(--e6-text-muted) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preferences .tabs a:hover,
|
||
|
|
.preferences .nav a:hover {
|
||
|
|
color: var(--e6-text) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preferences .tabs a.active,
|
||
|
|
.preferences .nav a.active {
|
||
|
|
color: var(--e6-cyan) !important;
|
||
|
|
border-bottom: 2px solid var(--e6-cyan) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ═══════════════════════════════════════════
|
||
|
|
12. scrollbar styling
|
||
|
|
═══════════════════════════════════════════ */
|
||
|
|
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar-track {
|
||
|
|
background: var(--e6-bg);
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background: var(--e6-border);
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar-thumb:hover {
|
||
|
|
background: #2a4a6f;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ═══════════════════════════════════════════
|
||
|
|
13. selection highlight
|
||
|
|
═══════════════════════════════════════════ */
|
||
|
|
|
||
|
|
::selection {
|
||
|
|
background-color: rgba(40, 192, 232, 0.25);
|
||
|
|
color: var(--e6-text);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ═══════════════════════════════════════════
|
||
|
|
14. responsive
|
||
|
|
═══════════════════════════════════════════ */
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.echo6-nav {
|
||
|
|
padding: 8px 12px;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6-nav a.echo6-nav-link {
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6-waffle-menu {
|
||
|
|
right: 12px;
|
||
|
|
left: 12px;
|
||
|
|
min-width: unset;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6-waffle-menu.active {
|
||
|
|
grid-template-columns: repeat(3, 1fr);
|
||
|
|
}
|
||
|
|
|
||
|
|
#search_form,
|
||
|
|
.search_box {
|
||
|
|
max-width: 100% !important;
|
||
|
|
margin-left: 12px !important;
|
||
|
|
margin-right: 12px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo img,
|
||
|
|
img[src*="searxng"] {
|
||
|
|
max-width: 200px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 480px) {
|
||
|
|
.echo6-waffle-menu.active {
|
||
|
|
grid-template-columns: repeat(2, 1fr);
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo6-nav a.echo6-nav-link {
|
||
|
|
font-size: 11px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ═══════════════════════════════════════════
|
||
|
|
end // echo6-custom.css
|
||
|
|
═══════════════════════════════════════════ */
|