WebsiteTemplate/search/theme.css

/* Custom SearXNG theme matching home page colors */

/* Light theme colors */
:root:not(.theme-dark):not(.theme-black) {
    --fraggle-bg: #f7f8f7;
    --fraggle-bg-body: #f7f8f7;
    --fraggle-text-primary: #2a3826;
    --fraggle-text-secondary: #62696D;
    --fraggle-border: #904b59;
    --fraggle-hover: #7d9b8f;
    --fraggle-shadow: rgba(42, 56, 38, 0.27);
}

/* Dark theme colors */
.theme-dark,
.theme-black {
    --fraggle-bg: #0C1012;
    --fraggle-bg-body: #1F282E;
    --fraggle-text-primary: #59C99C;
    --fraggle-text-secondary: #A5A9AB;
    --fraggle-border: #326B78;
    --fraggle-hover: #326B78;
    --fraggle-shadow: rgba(53, 62, 67, 0.27);
}

/* Load font for ASCII art */
@font-face {
    font-family: GohuFont14NerdFont;
    src: url('/GohuFont14NerdFontMono-Regular.ttf');
}

/* Override SearXNG background colors */
body,
html {
    background-color: var(--fraggle-bg-body) !important;
    color: var(--fraggle-text-primary) !important;
    font-family: GohuFont14NerdFont, monospace !important;
}

/* Main container */
#main_results,
#main_index {
    background-color: var(--fraggle-bg-body) !important;
}

/* Search input - reduced borders */
#q,
input[type="text"],
input[type="search"] {
    background-color: var(--fraggle-bg) !important;
    color: var(--fraggle-text-primary) !important;
    border: 2px solid var(--fraggle-border) !important;
    box-shadow: 3px 3px 1px 1px var(--fraggle-shadow) !important;
    border-radius: 8px !important;
}

#q:focus,
input[type="text"]:focus,
input[type="search"]:focus {
    border-color: var(--fraggle-border) !important;
    outline: none !important;
}

/* Buttons - no borders, no shadows */
button,
input[type="submit"],
.btn,
button[type="button"],
button[type="submit"] {
    background-color: transparent !important;
    color: var(--fraggle-text-primary) !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-radius: 0 !important;
}

/* Search form buttons specifically - no borders, no shadows */
#search_form button,
#search button,
.search_box button,
button[aria-label*="clear"],
button[aria-label*="Clear"],
button[aria-label*="search"],
button[aria-label*="Search"],
#clear_search,
#send_search,
button#clear_search,
button#send_search,
button[type="reset"],
button[type="submit"][id*="search"] {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
}

button:hover,
input[type="submit"]:hover,
.btn:hover {
    box-shadow: none !important;
    text-shadow: none !important;
}

button:hover,
input[type="submit"]:hover,
.btn:hover {
    color: var(--fraggle-hover) !important;
    border-color: var(--fraggle-hover) !important;
}

/* Links */
a {
    color: var(--fraggle-text-primary) !important;
}

a:hover {
    color: var(--fraggle-hover) !important;
}

a:visited {
    color: var(--fraggle-text-primary) !important;
}

/* Result cards - minimal borders */
.result,
.result-default {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: var(--fraggle-text-primary) !important;
    padding: 10px 0 !important;
    margin-bottom: 15px !important;
}

.result:hover {
    box-shadow: none !important;
    background-color: transparent !important;
}

.result h3 a {
    color: var(--fraggle-text-primary) !important;
}

.result h3 a:hover {
    color: var(--fraggle-hover) !important;
}

.result .content {
    color: var(--fraggle-text-primary) !important;
}

.result .url {
    color: var(--fraggle-text-secondary) !important;
}

/* Navigation */
nav,
#links_on_top {
    background-color: transparent !important;
}

nav a,
#links_on_top a {
    color: var(--fraggle-text-primary) !important;
}

nav a:hover,
#links_on_top a:hover {
    color: var(--fraggle-hover) !important;
}

/* Search form */
#search_form,
#search {
    background-color: transparent !important;
}

/* Categories and filters - no borders */
.category,
.tab {
    background-color: transparent !important;
    color: var(--fraggle-text-primary) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.category:hover,
.tab:hover,
.category.selected,
.tab.selected {
    background-color: transparent !important;
    color: var(--fraggle-hover) !important;
    border: none !important;
}

/* Preferences page - no borders */
fieldset {
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
}

legend {
    color: var(--fraggle-text-primary) !important;
}

select,
input[type="text"],
input[type="checkbox"] {
    background-color: var(--fraggle-bg) !important;
    color: var(--fraggle-text-primary) !important;
    border: 1px solid var(--fraggle-border) !important;
    border-radius: 4px !important;
}

/* Logo and branding */
.logo {
    filter: none !important;
}

.theme-dark .logo,
.theme-black .logo {
    filter: brightness(0) saturate(100%) invert(77%) sepia(15%) saturate(1200%) hue-rotate(120deg) brightness(95%) contrast(85%) !important;
}

/* Text colors */
h1, h2, h3, h4, h5, h6 {
    color: var(--fraggle-text-primary) !important;
}

p {
    color: var(--fraggle-text-primary) !important;
}

/* Name div styling (ASCII art logo replacement) */
.name {
    font-size: 20px !important;
    text-align: center !important;
    white-space: pre !important;
    color: var(--fraggle-text-primary) !important;
    font-family: GohuFont14NerdFont, monospace !important;
    margin: 20px 0 !important;
    line-height: 1.2 !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* Hide SearXNG logo */
#search_logo,
#search_logo svg,
#search_logo img,
.logo,
.logo img,
a[href="/"] img.logo,
a#search_logo {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Remove SearXNG default theme colors */
.theme-light,
.theme-auto {
    --color-base-background: var(--fraggle-bg-body) !important;
    --color-base-foreground: var(--fraggle-text-primary) !important;
}

.theme-dark,
.theme-black {
    --color-base-background: var(--fraggle-bg-body) !important;
    --color-base-foreground: var(--fraggle-text-primary) !important;
}