Spitfire/Search
Spitfire/Search
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

css formatting
Some checks failed
Run Integration Tests / test (push) Failing after 37s
Details

Browse source
This commit is contained in:
partisan 2025-06-16 11:26:26 +02:00
parent 70abf0a2bd
commit ec8ab05349
16 changed files with 152 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

9
static/css/style-fixedwidth.css
View file

@ -1,7 +1,10 @@
/* Ensure the body width is fixed and prevents resizing by the user */
body {
overflow-x: hidden; /* Prevent horizontal scrolling by user */
width: 100vw; /* Fix the width of the viewport */
max-width: 100vw; /* Prevent page from extending wider than the viewport */
overflow-x: hidden;
/* Prevent horizontal scrolling by user */
width: 100vw;
/* Fix the width of the viewport */
max-width: 100vw;
/* Prevent page from extending wider than the viewport */
box-sizing: border-box;
}

26
static/css/style-imageloading.css
View file

@ -3,12 +3,10 @@
position: relative;
overflow: hidden;
background-color: var(--snip-background);
background-image: linear-gradient(
90deg,
background-image: linear-gradient(90deg,
rgba(255, 255, 255, 0) 25%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0) 75%
);
rgba(255, 255, 255, 0) 75%);
background-size: 200% 100%;
animation: image-wave 2s infinite linear;
}
@ -33,12 +31,10 @@
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
background: linear-gradient(90deg,
transparent 25%,
rgba(255, 255, 255, 0.25) 50%,
transparent 75%
);
transparent 75%);
background-size: 200% 100%;
animation: title-wave 2.5s infinite linear;
}
@ -46,18 +42,24 @@
/* Animations */
@keyframes image-wave {
0% {
background-position: -100% 0; /* Start off-screen left */
background-position: -100% 0;
/* Start off-screen left */
}
100% {
background-position: 100% 0; /* End off-screen right */
background-position: 100% 0;
/* End off-screen right */
}
}
@keyframes title-wave {
0% {
background-position: -100% 0; /* Start off-screen left */
background-position: -100% 0;
/* Start off-screen left */
}
100% {
background-position: 100% 0; /* End off-screen right */
background-position: 100% 0;
/* End off-screen right */
}
}

24
static/css/style-imageviewer.css
View file

@ -3,10 +3,13 @@
position: fixed;
top: 105px;
right: 0;
width: 33%; /* Occupies the right space for the viewer */
height: calc(100% - 105px); /* Adjust height */
width: 33%;
/* Occupies the right space for the viewer */
height: calc(100% - 105px);
/* Adjust height */
z-index: 999;
display: none; /* Initially hidden */
display: none;
/* Initially hidden */
/* Added transition for opening animation */
/* transform: translateX(100%);
@ -18,8 +21,10 @@
position: fixed;
top: 105px;
right: 0;
width: 33%; /* Match the width of the overlay */
height: calc(100% - 105px); /* Adjust height */
width: 33%;
/* Match the width of the overlay */
height: calc(100% - 105px);
/* Adjust height */
background: var(--search-bg);
padding: 20px;
box-sizing: border-box;
@ -58,7 +63,8 @@
display: flex;
flex-direction: row;
align-items: center;
gap: 5px; /* Add spacing between buttons */
gap: 5px;
/* Add spacing between buttons */
}
#viewer-close-button,
@ -86,7 +92,8 @@
/* Adjust the images container when the viewer is visible */
.images {
margin-right: 33%; /* Reserve space for the image viewer */
margin-right: 33%;
/* Reserve space for the image viewer */
}
/* Clickable Elements */
@ -179,6 +186,7 @@
}
.images {
margin-right: 0; /* No reserved space on smaller screens */
margin-right: 0;
/* No reserved space on smaller screens */
}
}

3
static/css/style-loadingcircle.css
View file

@ -6,7 +6,8 @@
}
.favicon-wrapper.loading img {
visibility: hidden; /* hide placeholder */
visibility: hidden;
/* hide placeholder */
}
.favicon-wrapper.loading::after {

11
static/css/style-loadingindicator.css
View file

@ -24,21 +24,28 @@
}
@keyframes bounce {
0%, 100% {
0%,
100% {
transform: translateY(0);
}
30% {
transform: translateY(-10px);
}
50% {
transform: translateY(0);
}
70% {
transform: translateY(-5px);
}
85% {
transform: translateY(0);
}
95% {
transform: translateY(-2px);
}
@ -52,9 +59,11 @@
.dot:nth-child(2) {
animation-delay: 0.1s;
}
.dot:nth-child(3) {
animation-delay: 0.2s;
}
.dot:nth-child(4) {
animation-delay: 0.3s;
}

33
static/css/style-menu.css
View file

@ -165,37 +165,45 @@
/* Spacing & sizing */
padding: 32px;
max-width: 600px; /* Increased width */
max-height: 80vh; /* Optional: restrict height to 80% of viewport */
overflow-y: auto; /* Enable scrolling if content exceeds height */
max-width: 600px;
/* Increased width */
max-height: 80vh;
/* Optional: restrict height to 80% of viewport */
overflow-y: auto;
/* Enable scrolling if content exceeds height */
color: var(--font-fg);
}
#aboutQGatoModal #close-button {
position: absolute;
top: 12px;
right: 12px; /* Moved close button to top-right */
right: 12px;
/* Moved close button to top-right */
}
#aboutQGatoModal .modal-content {
text-align: center;
margin-top: 20px; /* Adjusted spacing */
margin-top: 20px;
/* Adjusted spacing */
}
/* Logo */
#aboutQGatoModal .modal-content img {
width: 100px; /* Increased logo size */
width: 100px;
/* Increased logo size */
margin-bottom: 16px;
}
/* Headings, paragraphs, etc. */
#aboutQGatoModal .modal-content h2 {
font-size: 2rem; /* Larger heading */
font-size: 2rem;
/* Larger heading */
margin: 8px 0;
}
#aboutQGatoModal .modal-content p {
font-size: 1.1rem; /* Larger paragraph text */
font-size: 1.1rem;
/* Larger paragraph text */
margin: 12px 0;
}
@ -213,8 +221,10 @@
color: var(--font-fg);
border: 1px solid var(--border);
border-radius: 6px;
padding: 12px 16px; /* Larger button padding */
font-size: 1rem; /* Larger button text */
padding: 12px 16px;
/* Larger button padding */
font-size: 1rem;
/* Larger button text */
cursor: pointer;
transition: border 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
@ -225,7 +235,8 @@
/* Close Button Style */
.cloase-btn {
font-size: 1.5rem; /* Larger close button */
font-size: 1.5rem;
/* Larger close button */
color: var(--search-button);
border-radius: 50%;
padding: 8px;

48
static/css/style-search.css
View file

@ -1,5 +1,6 @@
/* General Styles */
body, html {
body,
html {
margin: 0;
padding: 0;
background-color: var(--html-bg);
@ -8,7 +9,8 @@ body, html {
color: var(--text-color);
}
button, p {
button,
p {
font-family: 'Inter', Arial, Helvetica, sans-serif;
font-weight: 400;
}
@ -101,13 +103,15 @@ body.menu-open {
text-align: left;
width: 100%;
position: absolute;
left: -1px; /* this is so curesed */
left: -1px;
/* this is so curesed */
top: 100%;
background-color: var(--search-bg-input);
border-bottom-left-radius: 22px;
border-bottom-right-radius: 22px;
border: 1px solid var(--search-bg-input-border);
border-top: none; /* No top border to avoid double borders with the input */
border-top: none;
/* No top border to avoid double borders with the input */
z-index: 900;
}
@ -159,8 +163,10 @@ body.menu-open {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center; /* Center vertically */
height: 100vh; /* Make it full viewport height */
justify-content: center;
/* Center vertically */
height: 100vh;
/* Make it full viewport height */
}
/* Search Type Icons */
@ -171,7 +177,8 @@ body.menu-open {
margin-top: 30px;
gap: 20px;
/* Allow transform movement */
transition: transform 0.3s ease; /* Smooth movement when suggestions appear */
transition: transform 0.3s ease;
/* Smooth movement when suggestions appear */
position: relative;
}
@ -242,7 +249,8 @@ body.menu-open {
z-index: 999;
width: 50px;
height: 50px;
font-size: 36px; /* Not working */
font-size: 36px;
/* Not working */
}
.side-nav .closebtn:hover {
@ -259,11 +267,13 @@ body.menu-open {
right: 0;
background-color: var(--html-bg);
overflow-x: hidden;
transition: width 0.4s ease-in-out; /* Does this even change anything? cant really tell */
transition: width 0.4s ease-in-out;
/* Does this even change anything? cant really tell */
z-index: 1000;
box-shadow: -2px 0 5px rgba(0,0,0,0.5);
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
padding-top: 70px;
overflow-x: hidden; /* Prevents horizontal overflow */
overflow-x: hidden;
/* Prevents horizontal overflow */
}
.side-nav:hover .closebtn:hover {
@ -322,7 +332,7 @@ body.menu-open::before {
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
background: rgba(0, 0, 0, 0.5);
z-index: 998;
}
@ -337,11 +347,13 @@ body.menu-open::before {
.wrapper {
width: 90%;
}
.logo-container svg {
width: 75%;
max-width: 90%;
min-width: 25%;
}
.side-nav {
max-width: 90%;
}
@ -378,7 +390,8 @@ p {
line-height: 1.58;
}
input, button {
input,
button {
outline: none;
}
@ -387,11 +400,14 @@ body.menu-open {
}
/* Prevent horizontal scrolling on the page */
html, body {
overflow-x: hidden; /* Disables horizontal scrollbar */
html,
body {
overflow-x: hidden;
/* Disables horizontal scrollbar */
margin: 0;
padding: 0;
max-width: 100vw; /* Limits content to viewport width */
max-width: 100vw;
/* Limits content to viewport width */
}
/*

18
static/css/style-settings.css
View file

@ -16,7 +16,8 @@
width: 48%;
margin-bottom: 10px;
height: 150px;
position: relative; /* Make it possible to position the tooltip */
position: relative;
/* Make it possible to position the tooltip */
}
.theme-link img {
@ -33,12 +34,15 @@
} */
.theme-tooltip {
display: none; /* Hidden by default */
display: none;
/* Hidden by default */
position: absolute;
bottom: 10px; /* Position at the bottom of the image */
bottom: 10px;
/* Position at the bottom of the image */
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
background-color: rgba(0, 0, 0, 0.7);
/* Semi-transparent background */
color: #fff;
padding: 5px 10px;
border-radius: 4px;
@ -47,7 +51,8 @@
}
.theme-link:hover .theme-tooltip {
display: block; /* Show tooltip on hover */
display: block;
/* Show tooltip on hover */
}
.themes-settings-menu {
@ -75,7 +80,8 @@
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
box-sizing: border-box; /* Ensures consistent width with padding */
box-sizing: border-box;
/* Ensures consistent width with padding */
}
#searchLanguageSelect:hover,