voidarc/omnisearch
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

added styling bcs better

Browse Source
This commit is contained in:
voidarc
2026-03-24 18:14:06 +00:00
parent bcee71cbbb
commit 48faeb3e01
5 changed files with 479 additions and 454 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,3 +1,4 @@
/bin /bin
/obj /obj
config.ini config.ini
.session

580
static/main.css
View File

@@ -1,36 +1,43 @@
@import url("https://cdn.jsdelivr.net/npm/@catppuccin/palette/css/catppuccin.css");
:root { :root {
--bg-main: #ffffff; --bg-main: var(--ctp-latte-base);
--bg-card: #f8f9fa; --bg-card: var(--ctp-latte-overlay0);
--border: #e0e0e0; --border: var(--ctp-latte-overlay2);
--text-primary: #1a1a1a; --text-primary: var(--ctp-latte-text);
--text-secondary: #5f6368; --text-secondary: var(--ctp-latte-subtext0);
--text-muted: #757575; --text-muted: var(--ctp-latte-overlay1);
--accent: #202124; --accent: var(--ctp-latte-mauve);
--accent-glow: rgba(0,0,0,0.05); --accent-glow: rgba(0, 0, 0, 0.05);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--bg-main: #121212; --bg-main: var(--ctp-mocha-base);
--bg-card: #1e1e1e; --bg-card: var(--ctp-mocha-surface1);
--border: #333333; --border: var(--ctp-mocha-overlay2);
--text-primary: #ffffff; --text-primary: var(--ctp-mocha-text);
--text-secondary: #a0a0a0; --text-secondary: var(--ctp-mocha-subtext0);
--text-muted: #d1d1d1; --text-muted: var(--ctp-mocha-subtext1);
--accent: #e2e2e2; --accent: var(--ctp-mocha-mauve);
--accent-glow: rgba(255,255,255,0.1); --accent-glow: rgba(0, 0, 0, 0.05);
} }
} }
*, *::before, *::after { *,
*::before,
*::after {
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
background-color:var(--bg-main); background-color: var(--bg-main);
color:var(--text-primary); color: var(--text-primary);
font-family:system-ui,-apple-system,sans-serif; font-family:
margin:0; system-ui,
padding:0; -apple-system,
sans-serif;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
@@ -38,13 +45,22 @@ img[src=""] {
display: none; display: none;
} }
#header-icon {
text-decoration: none;
color: var(--text-primary);
}
.view-home { .view-home {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 100vh; min-height: 100vh;
padding: 20px; padding: 20px;
background: radial-gradient(circle at top right, var(--bg-card) 0%, var(--bg-main) 100%); background: radial-gradient(
circle at top right,
var(--accent) 0%,
var(--bg-main) 100%
);
} }
.view-home .container { .view-home .container {
@@ -57,10 +73,10 @@ img[src=""] {
} }
.view-home .hero-logo { .view-home .hero-logo {
font-size:4.5rem; font-size: 4.5rem;
margin-bottom:30px; margin-bottom: 30px;
letter-spacing:-3px; letter-spacing: -3px;
font-weight:800; font-weight: 800;
} }
.view-home .search-input-wrapper { .view-home .search-input-wrapper {
width: 100%; width: 100%;
@@ -68,63 +84,65 @@ img[src=""] {
} }
.view-home .search-box { .view-home .search-box {
font-size:1.1rem; font-size: 1.1rem;
padding:16px 28px; padding: 16px 28px;
box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06); box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
} }
.view-home .buttons { .view-home .buttons {
display:flex; display: flex;
gap:12px; gap: 12px;
justify-content:center; justify-content: center;
} }
.view-home button { .view-home button {
padding:10px 24px; padding: 10px 24px;
border-radius:8px; border-radius: 8px;
font-weight:600; font-weight: 600;
font-size:0.9rem; font-size: 0.9rem;
cursor:pointer; cursor: pointer;
transition:all 0.2s; transition: all 0.2s;
border:1px solid transparent; border: 1px solid transparent;
touch-action:manipulation; touch-action: manipulation;
} }
.view-home .btn-primary { .view-home .btn-primary {
background:var(--accent); background: var(--accent);
color:var(--bg-main); color: var(--bg-main);
} }
.view-home .btn-primary:hover { .view-home .btn-primary:hover {
filter:brightness(1.1); filter: brightness(1.1);
transform:translateY(-1px); transform: translateY(-1px);
} }
.view-home .btn-secondary { .view-home .btn-secondary {
background:var(--bg-card); background: var(--bg-card);
color:var(--text-primary); color: var(--text-primary);
border-color:var(--border); border-color: var(--border);
} }
.view-home .btn-secondary:hover { .view-home .btn-secondary:hover {
background:var(--border); background: var(--border);
border-color:var(--text-secondary); border-color: var(--text-secondary);
} }
header { header {
display:flex; display: flex;
align-items:center; align-items: center;
gap:20px; gap: 20px;
padding:15px 60px; padding: 15px 60px;
border-bottom:1px solid var(--border); border-bottom: 1px solid var(--border);
background:var(--bg-main); background: var(--bg-main);
} }
.search-form { .search-form {
flex-grow:1; flex-grow: 1;
max-width:600px; max-width: 600px;
} }
h1 { h1 {
font-size:1.5rem; font-size: 1.5rem;
margin:0; margin: 0;
letter-spacing:-1px; letter-spacing: -1px;
white-space:nowrap; white-space: nowrap;
} }
h1 span { h1 span {
color:var(--accent); color: var(--accent);
} }
.search-box { .search-box {
width: 100%; width: 100%;
@@ -134,73 +152,77 @@ h1 span {
background: var(--bg-card); background: var(--bg-card);
color: var(--text-primary); color: var(--text-primary);
outline: none; outline: none;
transition: border-color 0.2s, box-shadow 0.2s; transition:
border-color 0.2s,
box-shadow 0.2s;
} }
.search-box:focus { .search-box:focus {
border-color:var(--accent); border-color: var(--accent);
box-shadow:0 0 0 4px var(--accent-glow); box-shadow: 0 0 0 4px var(--accent-glow);
} }
.nav-tabs { .nav-tabs {
padding:0 60px; padding: 0 60px;
border-bottom:1px solid var(--border); border-bottom: 1px solid var(--border);
background:var(--bg-main); background: var(--bg-main);
} }
.nav-container { .nav-container {
display:flex; display: flex;
gap:30px; gap: 30px;
max-width:1200px; max-width: 1200px;
} }
.nav-tabs a { .nav-tabs a {
padding:14px 0; padding: 14px 0;
color:var(--text-secondary); color: var(--text-secondary);
text-decoration:none; text-decoration: none;
font-size:0.9rem; font-size: 0.9rem;
font-weight:500; font-weight: 500;
border-bottom:2px solid transparent; border-bottom: 2px solid transparent;
transition:color 0.2s; transition: color 0.2s;
touch-action: manipulation; touch-action: manipulation;
} }
.nav-tabs a:hover { .nav-tabs a:hover {
color:var(--text-primary); color: var(--text-primary);
} }
.nav-tabs a.active { .nav-tabs a.active {
color:var(--accent); color: var(--accent);
border-bottom-color:var(--accent); border-bottom-color: var(--accent);
} }
.image-results-container { .image-results-container {
padding:30px 60px; padding: 30px 60px;
} }
.image-grid { .image-grid {
display:grid; display: grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap:24px; gap: 24px;
max-width:1600px; max-width: 1600px;
margin:0 auto; margin: 0 auto;
} }
.image-card { .image-card {
background:var(--bg-card); background: var(--bg-card);
border-radius:12px; border-radius: 12px;
overflow:hidden; overflow: hidden;
border:1px solid var(--border); border: 1px solid var(--border);
transition:transform 0.2s ease,border-color 0.2s; transition:
transform 0.2s ease,
border-color 0.2s;
} }
.image-card:hover { .image-card:hover {
transform:translateY(-4px); transform: translateY(-4px);
border-color:var(--accent); border-color: var(--accent);
} }
.image-wrapper { .image-wrapper {
position:relative; position: relative;
aspect-ratio:4/3; aspect-ratio: 4/3;
background:#000; background: #000;
overflow:hidden; overflow: hidden;
} }
.image-wrapper img { .image-wrapper img {
width:100%; width: 100%;
height:100%; height: 100%;
object-fit:cover; object-fit: cover;
display:block; display: block;
transition:opacity 0.3s; transition: opacity 0.3s;
} }
.image-overlay { .image-overlay {
position: absolute; position: absolute;
@@ -214,134 +236,135 @@ h1 span {
pointer-events: none; pointer-events: none;
} }
.image-card:hover .image-overlay { .image-card:hover .image-overlay {
opacity:1; opacity: 1;
pointer-events: auto; pointer-events: auto;
} }
.overlay-buttons { .overlay-buttons {
display:flex; display: flex;
flex-direction:column; flex-direction: column;
gap:10px; gap: 10px;
width:70%; width: 70%;
} }
.overlay-btn { .overlay-btn {
padding:8px 16px; padding: 8px 16px;
border-radius:20px; border-radius: 20px;
font-size:0.8rem; font-size: 0.8rem;
font-weight:700; font-weight: 700;
text-decoration:none; text-decoration: none;
text-align:center; text-align: center;
transition:filter 0.2s; transition: filter 0.2s;
touch-action: manipulation; touch-action: manipulation;
} }
.overlay-btn:hover { .overlay-btn:hover {
filter:brightness(1.1); filter: brightness(1.1);
} }
.overlay-btn.primary { .overlay-btn.primary {
background:var(--accent); background: var(--accent);
color:var(--bg-main); color: var(--bg-main);
} }
.overlay-btn.secondary { .overlay-btn.secondary {
background:rgba(255,255,255,0.1); background: rgba(255, 255, 255, 0.1);
color:white; color: white;
backdrop-filter:blur(4px); backdrop-filter: blur(4px);
border:1px solid rgba(255,255,255,0.2); border: 1px solid rgba(255, 255, 255, 0.2);
} }
.image-info { .image-info {
padding:12px; padding: 12px;
} }
.image-caption { .image-caption {
display:block; display: block;
font-size:0.85rem; font-size: 0.85rem;
color:var(--text-primary); color: var(--text-primary);
white-space:nowrap; white-space: nowrap;
overflow:hidden; overflow: hidden;
text-overflow:ellipsis; text-overflow: ellipsis;
margin-bottom:4px; margin-bottom: 4px;
} }
.image-source { .image-source {
display:block; display: block;
font-size:0.75rem; font-size: 0.75rem;
color:var(--text-secondary); color: var(--text-secondary);
white-space:nowrap; white-space: nowrap;
overflow:hidden; overflow: hidden;
text-overflow:ellipsis; text-overflow: ellipsis;
} }
.content-layout { .content-layout {
display:grid; display: grid;
grid-template-columns:140px minmax(0,700px) 450px; grid-template-columns: 140px minmax(0, 700px) 450px;
gap:60px; gap: 60px;
padding:30px 60px; padding: 30px 60px;
} }
.results-container { .results-container {
grid-column:2; grid-column: 2;
} }
.engine-warning-list { .engine-warning-list {
display:flex; display: flex;
flex-direction:column; flex-direction: column;
gap:12px; gap: 12px;
margin-bottom:24px; margin-bottom: 24px;
} }
.engine-warning { .engine-warning {
background:var(--bg-card); background: var(--bg-card);
border:1px solid var(--border); border: 1px solid var(--border);
border-radius:12px; border-radius: 12px;
padding:14px 16px; padding: 14px 16px;
} }
.engine-warning-title { .engine-warning-title {
display:block; display: block;
font-size:0.95rem; font-size: 0.95rem;
font-weight:700; font-weight: 700;
margin-bottom:4px; margin-bottom: 4px;
} }
.engine-warning-copy { .engine-warning-copy {
color:var(--text-muted); color: var(--text-muted);
line-height:1.5; line-height: 1.5;
margin:0; margin: 0;
} }
.result { .result {
margin-bottom:32px; margin-bottom: 32px;
} }
.result > a { .result > a {
color:var(--accent); color: var(--accent);
text-decoration:none; text-decoration: none;
font-size:1.25rem; font-size: 1.25rem;
display:inline-block; display: inline-block;
margin-bottom:4px; margin-bottom: 4px;
} }
.url { .url {
color:var(--text-secondary); color: var(--text-secondary);
font-size:0.85rem; font-size: 0.85rem;
display:block; display: block;
margin-bottom:4px; margin-bottom: 4px;
} }
.desc { .desc {
color:var(--text-muted); color: var(--text-muted);
line-height:1.6; line-height: 1.6;
margin:0; margin: 0;
} }
.cached { .cached {
color: var(--text-secondary); color: var(--text-secondary);
font-size:0.85rem; font-size: 0.85rem;
display:inline-block; display: inline-block;
text-decoration: underline; text-decoration: underline;
} }
.infobox { .infobox {
grid-column:3; grid-column: 3;
background:var(--bg-card); background: var(--bg-card);
border:1px solid var(--border); border: 1px solid var(--border);
border-radius:12px; border-radius: 12px;
align-self:start; align-self: start;
margin-bottom: 10px; margin-bottom: 10px;
} }
.infobox-header { .infobox-header {
padding:20px; padding: 20px;
border-bottom:1px solid var(--border); border-bottom: 1px solid var(--border);
} }
.infobox-title { .infobox-title {
font-size:1.5rem; font-size: 1.5rem;
font-weight:600; font-weight: 600;
margin:0; margin: 0;
} .infobox-content { }
.infobox-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
@@ -357,25 +380,26 @@ h1 span {
.read-more:hover { .read-more:hover {
text-decoration: underline; text-decoration: underline;
} .infobox-main { }
display:flex; .infobox-main {
gap:15px; display: flex;
padding:20px; gap: 15px;
padding: 20px;
} }
.infobox-image { .infobox-image {
width:120px; width: 120px;
height:120px; height: 120px;
min-width:120px; min-width: 120px;
border-radius:8px; border-radius: 8px;
border:1px solid var(--border); border: 1px solid var(--border);
object-fit:cover; object-fit: cover;
} }
.infobox-summary { .infobox-summary {
display: block; display: block;
font-size:0.95rem; font-size: 0.95rem;
line-height:1.5; line-height: 1.5;
color:var(--text-muted); color: var(--text-muted);
margin:0; margin: 0;
} }
.pagination { .pagination {
@@ -405,7 +429,6 @@ h1 span {
border-color: var(--text-secondary); border-color: var(--text-secondary);
} }
.pagination-current { .pagination-current {
background: var(--bg-card); background: var(--bg-card);
color: var(--text-primary); color: var(--text-primary);
@@ -424,181 +447,182 @@ h1 span {
border-color: var(--text-secondary); border-color: var(--text-secondary);
} }
@media (max-width: 1200px) {
@media (max-width:1200px) {
.content-layout { .content-layout {
grid-template-columns:1fr; grid-template-columns: 1fr;
padding:20px 30px; padding: 20px 30px;
gap:20px; gap: 20px;
} }
.results-container,.infobox-sidebar { .results-container,
grid-column:1; .infobox-sidebar {
max-width:100%; grid-column: 1;
max-width: 100%;
} }
.infobox-sidebar { .infobox-sidebar {
order:-1; order: -1;
} }
.nav-tabs,.image-results-container { .nav-tabs,
padding:0 30px; .image-results-container {
padding: 0 30px;
} }
header { header {
padding:15px 30px; padding: 15px 30px;
} }
} }
@media (max-width:768px) { @media (max-width: 768px) {
header { header {
flex-direction:column; flex-direction: column;
gap:12px; gap: 12px;
padding:12px 16px; padding: 12px 16px;
text-align:center; text-align: center;
} }
h1 { h1 {
font-size:1.3rem; font-size: 1.3rem;
} }
.search-form { .search-form {
width:100%; width: 100%;
max-width:100%; max-width: 100%;
} }
.search-form .search-box { .search-form .search-box {
width:100%; width: 100%;
} }
.nav-tabs { .nav-tabs {
overflow-x:auto; overflow-x: auto;
-webkit-overflow-scrolling:touch; -webkit-overflow-scrolling: touch;
padding:0 16px; padding: 0 16px;
} }
.nav-container { .nav-container {
gap:24px; gap: 24px;
min-width:max-content; min-width: max-content;
} }
.nav-tabs a { .nav-tabs a {
padding:12px 0; padding: 12px 0;
font-size:0.95rem; font-size: 0.95rem;
} }
.content-layout { .content-layout {
padding:16px; padding: 16px;
gap:16px; gap: 16px;
} }
.result { .result {
margin-bottom:24px; margin-bottom: 24px;
} }
.engine-warning { .engine-warning {
padding:12px 14px; padding: 12px 14px;
} }
.result > a { .result > a {
font-size:1.1rem; font-size: 1.1rem;
word-break:break-word; word-break: break-word;
} }
.url { .url {
font-size:0.8rem; font-size: 0.8rem;
word-break:break-all; word-break: break-all;
} }
.desc { .desc {
font-size:0.9rem; font-size: 0.9rem;
} }
.cached { .cached {
font-size:0.8rem; font-size: 0.8rem;
} }
.infobox { .infobox {
margin-bottom:16px; margin-bottom: 16px;
} }
.infobox-header { .infobox-header {
padding:16px; padding: 16px;
} }
.infobox-title { .infobox-title {
font-size:1.2rem; font-size: 1.2rem;
} }
.infobox-main { .infobox-main {
flex-direction:column; flex-direction: column;
padding:16px; padding: 16px;
gap:12px; gap: 12px;
} }
.infobox-image { .infobox-image {
width:100%; width: 100%;
height:auto; height: auto;
min-width:unset; min-width: unset;
max-width:200px; max-width: 200px;
} }
.image-results-container { .image-results-container {
padding:16px; padding: 16px;
} }
.pagination { .pagination {
flex-wrap:wrap; flex-wrap: wrap;
gap:8px; gap: 8px;
padding:0 8px; padding: 0 8px;
} }
.pagination-btn { .pagination-btn {
padding:10px 14px; padding: 10px 14px;
font-size:0.85rem; font-size: 0.85rem;
} }
.view-home { .view-home {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transform: translateY(-5vh); transform: translateY(-5vh);
padding:20px 16px; padding: 20px 16px;
min-height: 100vh; min-height: 100vh;
} }
.view-home .container { .view-home .container {
padding:0; padding: 0;
width:100%; width: 100%;
max-width:580px; max-width: 580px;
} }
.view-home .hero-logo { .view-home .hero-logo {
font-size:3rem; font-size: 3rem;
margin-bottom:24px; margin-bottom: 24px;
} }
.view-home .search-input-wrapper { .view-home .search-input-wrapper {
margin-bottom:16px; margin-bottom: 16px;
} }
.view-home .search-box { .view-home .search-box {
width:100%; width: 100%;
font-size:1rem; font-size: 1rem;
padding:14px 20px; padding: 14px 20px;
} }
.view-home .buttons { .view-home .buttons {
gap:10px; gap: 10px;
} }
.view-home button { .view-home button {
padding:12px 20px; padding: 12px 20px;
} }
} }
@media (max-width:600px) { @media (max-width: 600px) {
header { header {
padding:12px 12px; padding: 12px 12px;
} }
.search-box { .search-box {
font-size:0.95rem; font-size: 0.95rem;
} }
.view-home .search-box { .view-home .search-box {
width:100%; width: 100%;
} }
.view-home { .view-home {
padding:20px 16px; padding: 20px 16px;
} }
.image-grid { .image-grid {
grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap:10px; gap: 10px;
} }
.image-card { .image-card {
border-radius:8px; border-radius: 8px;
} }
.image-info { .image-info {
padding:8px 10px; padding: 8px 10px;
} }
.image-caption { .image-caption {
font-size:0.8rem; font-size: 0.8rem;
} }
.image-source { .image-source {
font-size:0.7rem; font-size: 0.7rem;
} }
.overlay-buttons { .overlay-buttons {
width:80%; width: 80%;
} }
.overlay-btn { .overlay-btn {
padding:6px 12px; padding: 6px 12px;
font-size:0.75rem; font-size: 0.75rem;
} }
} }

2
templates/home.html
View File

@@ -18,7 +18,7 @@
<div class="view-home"> <div class="view-home">
<div class="container"> <div class="container">
<h1 class="hero-logo"> <h1 class="hero-logo">
Omni<span>Search</span> <span>Void</span>arc
</h1> </h1>
<form action="/search" class="home-search-form"> <form action="/search" class="home-search-form">
<div class="search-input-wrapper"> <div class="search-input-wrapper">

2
templates/images.html
View File

@@ -14,7 +14,7 @@
<body class="images-view"> <body class="images-view">
<header> <header>
<h1> <h1>
Omni<span>Search</span> <a id="header-icon" href="/"><span>Void</span>arc</a>
</h1> </h1>
<form action="/images" method="GET" class="search-form"> <form action="/images" method="GET" class="search-form">
<input name="q" autocomplete="off"="text" class="search-box" placeholder="Search for images..." <input name="q" autocomplete="off"="text" class="search-box" placeholder="Search for images..."

2
templates/results.html
View File

@@ -17,7 +17,7 @@
<body class="results-view"> <body class="results-view">
<header> <header>
<h1> <h1>
Omni<span>Search</span> <a id="header-icon" href="/"><span>Void</span>arc</a>
</h1> </h1>
<form action="/search" method="GET" class="search-form"> <form action="/search" method="GET" class="search-form">
<input name="q" type="text" class="search-box" autocomplete="off" placeholder="Search the web..." <input name="q" type="text" class="search-box" autocomplete="off" placeholder="Search the web..."