Search/static/css/style.css
partisan 5032173609
Some checks failed
Run Integration Tests / test (push) Failing after 41s
Added default globe.svg for invalid favicons
2025-05-30 23:14:49 +02:00

1857 lines
35 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

.highlight {
color: var(--highlight);
font-weight: bold;
font-style: normal;
}
.material-icons-round {
font-family: 'Material Icons Round' !important;
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
#search-wrapper-ico,
#clearSearch {
background: none;
border: none;
color: var(--fg);
position: absolute;
top: 9px;
right: 10px;
cursor: pointer;
}
#search-wrapper-ico:hover,
#clearSearch:hover {
transition: all .3s ease;
color: var(--font-fg);
}
#sub-search-wrapper-ico {
background: none;
border: none;
cursor: pointer;
font-size: 17px;
/* will be set to 17px if icon pack can be loaded. */
padding-right: 0px;
margin-right: 0px;
}
#clearSearch {
right: 40px;
visibility: hidden;
}
.fetched_dif_videos {
margin-top: 110px !important;
}
.fetched_dif_files{
margin-top: 10px !important;
}
.fetched_dif_images {
margin-top: 10px ;
}
.fetched_img {
margin-left: 1.2% !important;
left: 0px !important;
}
.clean {
margin-top: 30px;
max-width: 775px;
}
.prev-next {
left: 175px;
position: relative;
max-width: 600px;
}
.prev-img {
left: 0px !important;
margin-left: 1.2% !important;
}
.prev-next button:hover {
border: 1px solid #5f6368;
cursor: pointer;
}
.prev-next button {
color: var(--font-fg);
background-color: var(--button);
font-size: 14px;
border: 1px solid var(--border);
border-radius: 4px;
padding: 7px 10px 7px 10px;
margin: 0px 10px 18px 0px;
}
body {
margin: 0;
}
html {
background-color: var(--html-bg);
font-family: 'Inter', Arial, Helvetica, sans-serif;
font-size: 16px;
}
#info_font {
font-size: 15px;
}
.calc {
height: fit-content;
width: fit-content;
position: relative;
left: 175px;
border: 1px solid var(--snip-border);
background-color: var(--snip-background);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.calc-btn-style {
background-color: var(--html-bg) !important;
}
.calc-input {
width: 90%;
height: 10%;
background-color: var(--search-bg);
border: 1px solid var(--snip-border);
border-radius: 8px;
padding: 15px;
margin-top: 8px;
text-align: right;
max-width: 48em;
line-height: 1.58;
font-size: 22px;
color: var(--fg);
letter-spacing: normal;
overflow: hidden;
}
.calc-btn {
max-width: 48em;
line-height: 50px;
font-size: 22px;
color: var(--fg);
letter-spacing: normal;
border-radius: 8px;
background-color: var(--search-bg);
border: 1px solid var(--snip-border);
height: 50px;
margin: auto;
margin: 4px;
width: 80px;
text-align: center;
}
.calc-btn-2 {
max-width: 48em;
line-height: 50px;
font-size: 22px;
color: var(--fff);
letter-spacing: normal;
border-radius: 8px;
background-color: var(--font-fg);
height: 50px;
margin: auto;
margin: 4px;
width: 80px;
text-align: center;
}
.calc-btns {
display: grid;
grid-template-columns: repeat(4, 90px);
width: 100%;
justify-content: center;
padding: 4px;
}
.calc-pos-absolute {
position: absolute;
margin-top: 60px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.prev_calculation {
opacity: 0.5;
font-size: 14px;
}
.emoji-code {
font-family: Arial, Helvetica, sans-serif;
}
/* container */
.images {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.image {
flex: 1 1 auto;
padding: .5rem .5rem 2rem .5rem;
margin: .25rem;
border-radius: 12px;
height: 10rem;
max-width: 20rem;
min-width: 3rem;
transition: outline 0.3s ease, transform 0.3s ease;
}
.image_selected {
outline: 1px solid var(--border);
transform: scale(1.05);
}
.image>a {
position: relative;
text-decoration: none;
}
.image .resolution {
position: absolute;
opacity: 0;
top: calc(100% - 25px);
left: 5px;
font-size: 12px;
background-color: var(--view-image-color);
color: var(--fg);
border-radius: 4px;
height: 18px;
display: flex;
align-items: center;
transition: .3s;
padding: 0 2px;
}
.image img {
transition: .3s;
}
.resolution {
transition: .3s !important;
}
.image:hover .resolution {
opacity: 1;
}
.image:hover img {
box-shadow: 0 14px 28px var(--view-image-color);
}
.img_title {
display: block;
position: absolute;
width: 100%;
font-size: .9rem;
color: var(--fg);
padding: .5rem 0 0 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.img_title {
color: var(--font-fg);
}
.image img {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
object-fit: cover;
display: block;
border-radius: 12px;
box-sizing: border-box;
border: 1px solid var(--border);
}
.btn-nostyle {
font-family: 'Inter', Arial, Helvetica, sans-serif !important;
background-color: inherit;
border: none;
padding: 0px;
width: fit-content;
}
.view-image {
background-color: var(--view-image-color);
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
.view-image img {
max-width: 100%;
max-height: 427px;
}
.image_view a {
text-decoration: none;
color: var(--link);
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.image_view a:hover {
text-decoration: underline;
}
.image_view p {
margin-left: 20px;
margin-right: 20px;
display: block;
}
.image_view a {
display: block;
}
hr {
border: 0;
border-top: 1px solid var(--border);
margin: 0;
padding: 0;
}
.image_hide {
display: none !important;
}
.image_show {
display: block !important;
}
.icon_visibility {
visibility: visible;
}
.stats {
color: var(--green);
max-width: 48em;
line-height: 1.25rem;
margin-bottom: 1px;
font-size: 13px;
}
.publish__info {
color: var(--publish-info);
max-width: 48em;
line-height: 1.25rem;
font-size: 13px;
}
.results .video_title {
font-size: 16px;
}
/*
this is so stupid, separate css into general style and per result page css style to avoid this
.video_title h3 {
margin-top: 0px !important;
} */
.video_title a {
color: var(--link);
text-decoration: none;
}
.video_title a:hover {
color: var(--link);
text-decoration: underline;
}
.video-results-margin {
margin-bottom: 0px !important;
}
.video__img__results img {
width: 254px;
height: 143px;
object-fit: cover;
border-radius: 5px;
}
.video__img__results {
position: relative;
left: 175px;
max-width: 600px;
}
.video__results {
margin-bottom: 1.5em;
display: flex;
margin-top: 1px;
max-width: 600px;
}
.video__results .results h3 {
margin-left: 14px;
}
.video__results .results p {
margin-left: 14px;
}
.video__results .results {
margin-top: 0px;
}
.duration {
position: absolute;
color: #fff;
font-size: 12px;
font-weight: 500;
padding: .5em;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 4px 8px;
margin-top: -28px !important;
line-height: 1.3;
letter-spacing: -0.4px;
bottom: 6px;
right: 2px;
border-radius: 3px;
backdrop-filter: blur(2px);
}
.pipe {
font-size: 0.7em;
}
.wrapper {
margin: 0 auto;
background: var(--search-bg-input);
border-radius: 22px;
position: relative;
width: 100%;
max-width: 600px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
z-index: 2;
border: 1px solid var(--search-bg-input-border);
}
.wrapper input {
padding: 10px;
}
.wrapper-results {
margin: 0 auto;
background: var(--search-bg-input);
border-radius: 22px;
position: absolute;
width: 628px;
overflow: hidden;
margin-top: 0px;
top: 18px;
left: 170px;
z-index: 2;
border: 1px solid var(--search-bg-input-border);
}
.wrapper-results:hover,
.wrapper-results:focus-within,
.wrapper:hover,
.wrapper:focus-within {
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
#theme,
#safe,
#open-new-tab,
#domain,
#javascript-setting,
#ux_lang {
border-radius: 4px;
padding: 6px;
font-size: 15px;
border: 1px solid var(--border);
color: var(--font-fg);
width: 160px;
background: var(--button);
float: right;
transition: all .3s ease;
}
#theme:hover,
#safe:hover,
#open-new-tab:hover,
#domain:hover,
#javascript-setting:hover,
#ux_lang:hover {
border: 1px solid #5f6368;
cursor: pointer;
}
.domain {
margin-top: 10px;
border: 1px solid var(--button);
border-radius: 4px;
padding: 6px;
font-size: 15px;
color: var(--font-fg);
width: 90%;
background: var(--button);
}
.save {
border-radius: 4px;
padding: 6px;
font-size: 15px;
border: 1px solid var(--border);
color: var(--font-fg);
width: 160px;
background: var(--button);
float: right;
transition: all .3s ease;
}
.save:hover {
border: 1px solid #5f6368;
cursor: pointer;
}
.settings-row2 {
border-bottom: 1px solid var(--html-bg) !important;
}
.font-hide {
color: var(--html-bg);
}
.settings-nav {
max-width: 100%;
height: 50px;
background-color: var(--search-bg);
border-bottom: 1px solid var(--border);
padding: 10px;
}
.settings {
background-color: var(--html-bg);
border-radius: 8px;
max-width: 820px;
height: 100%;
padding: 10px;
margin-left: 170px;
margin-top: 20px;
padding-bottom: 100px;
}
.settings-row {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 2px;
padding-left: 10px;
padding-right: 10px;
border-bottom: 1px solid var(--border);
}
.settings-row select,
.settings-row button {
width: 160px;
height: 40px;
margin: 0;
}
.kno_wiki {
display: none;
}
.kno_wiki_show {
display: initial !important;
border-radius: 6px;
}
.open-in-new-tab * {
display: inline-block;
}
.results_settings {
color: var(--fg);
left: 175px;
position: relative;
font-size: 15px;
margin-bottom: 10px;
max-width: 580px;
margin-top: 110px;
display: flex;
}
.results-settings,
.results-save,
.torrent-settings,
.torrent-sort-save,
.torrent-cat {
border-radius: 4px;
width: 164px;
margin-right: 10px;
padding: 6px;
font-size: 14px;
border: 1px solid var(--html-bg);
color: var(--highlight);
background: var(--html-bg);
cursor: pointer;
transition: all .3s ease;
text-align: left;
}
.torrent-cat {
margin-top: 110px;
}
.torrent-cat:hover,
.torrent-settings:hover,
.torrent-sort-save:hover {
color: var(--font-fg);
transition: all .3s ease;
}
.torrent-settings,
.torrent-sort-save {
width: fit-content;
}
form.torrent-sort {
position: relative;
left: 175px;
max-width: fit-content;
}
.results-settings:hover,
.results-save:hover {
color: var(--font-fg);
transition: all .3s ease;
}
.settings-results-link {
position: absolute;
color: var(--fg);
text-decoration: none;
}
.settings-results-link,
.settings-icon-link {
color: var(--fg);
text-decoration: none;
}
.settings-results-link {
margin-left: 24px;
display: block;
margin-top: 1px;
}
.wrapper-results input {
padding: 10px;
}
.autocomplete {
padding: 0px;
}
.autocomplete ul {
margin: 0;
padding: 0;
}
.autocomplete ul li {
list-style: none;
opacity: 0;
display: none;
padding: 8px 12px;
}
.wrapper-searching .autocomplete ul li {
opacity: 1;
display: block;
text-align: left;
}
.wrapper-searching .autocomplete {
padding-top: 10px;
padding-bottom: 10px;
color: var(--font-fg);
}
.autocomplete ul li:hover {
cursor: pointer;
background: var(--search-select);
}
.selected {
background: var(--search-select);
}
.hide {
display: none;
}
input,
button {
outline: none;
}
.search-container {
text-align: center;
margin-top: 10%;
}
.search-container h1 {
font-size: 70px;
color: var(--font-fg);
font-family: 'Inter';
}
.X {
color: var(--font-fg);
}
.search-container input {
width: 90%;
color: var(--font-fg);
background-color: var(--search-bg-input);
font-size: inherit;
font-family: sans-serif;
border: none;
margin-right: 100%;
margin-left: 3px;
}
h3 {
color: var(--link);
text-decoration: none;
}
h3:hover {
text-decoration: underline;
}
p {
color: var(--fg);
max-width: 48em;
line-height: 1.58;
font-size: 14px;
}
.check {
display: flex;
position: relative;
left: 175px;
width: 600px;
word-wrap: break-word;
font-size: 15px;
max-width: 48em;
line-height: 1.58;
}
.check p,
.check h3 {
font-size: 16px;
margin-bottom: 2px;
margin-top: 2px;
}
.check p {
color: #ff7769;
}
.check a {
color: var(--link);
text-decoration: none;
}
.check h3 {
margin-left: 4px;
font-style: italic;
}
.check a:hover {
text-decoration: underline;
}
.torrent h3 {
font-size: 16px !important;
}
.seeders {
color: #31b06e;
}
.leechers {
color: #b0316e;
}
.logo-container {
color: var(--font-fg);
line-height: 0;
text-align: center;
}
.logo-container svg {
vertical-align: middle;
margin: 0 auto;
width: 110px;
height: 40px;
}
.results-search-container {
background-color: var(--search-bg);
width: 100%;
border-bottom: 1px solid var(--border);
position: fixed;
z-index: 999;
top: 0;
}
.footer {
box-sizing: border-box;
width: 100%;
background-color: var(--footer-bg);
color: var(--footer-font);
position: relative;
bottom: 0;
padding-left: 10px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
border-top: 1px solid var(--border);
}
#search_footer {
position: fixed;
}
.footer a,
.footer a:hover,
.footer a:visited {
text-decoration: none;
color: var(--footer-font);
}
.footer a {
text-decoration: none;
color: var(--footer-font);
font-size: 15px;
padding-left: 15px;
padding-right: 15px;
}
.footer a:hover {
text-decoration: underline;
}
.results-search-container input {
width: 90%;
color: var(--font-fg);
background-color: var(--search-bg-input);
font-size: inherit;
font-family: sans-serif;
border: none;
margin-right: 100%;
margin-left: 3px;
}
.results {
position: relative;
left: 175px;
margin-top: 18px;
max-width: 600px;
word-wrap: break-word;
margin-bottom: 35px;
}
.result_sublink {
position: relative;
left: 175px;
margin-top: 10px;
max-width: 600px;
word-wrap: break-word;
}
.sublinks {
position: relative;
left: 14px;
max-width: 600px;
word-wrap: break-word;
}
.search-button-wrapper button:hover {
border: 1px solid #5f6368;
cursor: pointer;
}
.search-button-wrapper button {
color: var(--font-fg);
background-color: var(--button);
font-size: 14px;
border: 1px solid var(--border);
border-radius: 4px;
padding: 13px 10px 13px 10px;
margin: 70px 60px 0px 60px;
}
.no-decoration {
text-decoration: none;
color: var(--font-fg);
font-family: 'Inter';
background-color: var(--search-bg);
}
.no-decoration:hover {
text-decoration: none;
}
.js-enabled {
display: none;
}
.logomobile {
position: absolute;
margin-top: 0px;
top: 20px;
left: 28px;
}
.sub-search-button-wrapper button {
border: none;
background-color: inherit;
font-size: 14px;
font-family: 'Inter';
margin-right: 14px;
color: var(--search-button);
margin-top: 72px;
padding-bottom: 11px;
max-width: 48em;
}
.sub-search-button-wrapper button:hover {
color: #8ab4f8;
}
.search-active {
color: var(--font-fg) !important;
}
.search-container-results-btn {
display: flex;
color: var(--font-fg);
}
.search-container-results-btn:hover button {
transition: all 0.3s ease;
color: var(--font-fg);
}
.sub-search-button-wrapper img {
vertical-align: middle;
margin-right: 5px;
width: 20px;
}
.sub-search-button-wrapper {
margin-left: 175px;
margin-bottom: 6px;
height: 98px;
display: flex;
}
:root {
/*--search-bg-input: #1a1a1a; /* Example background color */
--search-bg-input-border: #2a2a2a; /* Visible border color */
color-scheme: dark;
}
.fetched {
color: var(--fg);
left: 175px;
position: relative;
font-size: 14px;
margin-bottom: 10px;
max-width: 580px;
margin-top: -2px;
}
.link {
color: var(--link);
}
.results a:visited h3,
.result_sublink a:visited h3 {
color: var(--link-visited);
}
.results h3,
.result_sublink h3 {
margin-top: 4px;
margin-bottom: 2px;
font-size: 20px;
font-weight: 400;
line-height: 1.3;
letter-spacing: -0.4px;
}
.results p,
.result_sublink p {
margin-top: 0px;
color: var(--font-fg);
}
.results a,
.results a:hover,
.results a:visited,
.result_sublink a,
.result_sublink a:hover,
.result_sublink a:visited {
text-decoration: none;
/* color: #ebecf7; */
font-size: 14px;
}
#link,
#link:hover,
#link:visited {
display: block;
text-decoration: none;
color: var(--fg);
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.snip {
padding: 17px;
border: 1px solid var(--snip-border);
width: 440px;
border-radius: 8px;
background: var(--snip-background);
color: var(--fg);
margin-left: 840px;
margin-top: 0px;
position: absolute;
max-width: 48em;
line-height: 1.58;
font-size: 14px;
letter-spacing: normal;
}
.snip_title {
margin-top: 0;
margin-bottom: 0;
color: var(--highlight);
font-weight: bold;
font-style: normal;
max-width: 48em;
line-height: 1.58;
font-size: 22px;
}
.wiki_known_for {
margin: 0px;
font-weight: normal;
margin-bottom: 10px;
}
.snip img {
float: right;
max-width: 30%;
max-height: 150px;
padding-bottom: 10px;
margin-left: 10px;
}
.snip .wiki_link {
margin-top: 10px;
text-decoration: none;
color: var(--link);
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.snip a:hover {
text-decoration: underline;
}
.snip .about {
font-size: 18px;
margin-top: 10px;
margin-bottom: 5px;
}
.factpoint {
color: var(--fg);
font-weight: bold;
vertical-align: text-top;
text-align: left;
padding-right: 14px;
}
.fact a {
color: var(--link);
text-decoration: none;
}
.fact a:visited {
color: var(--link-visited);
}
.snipp {
padding: 10px;
border-bottom: 1px solid var(--border);
width: 500px;
background: inherit;
color: var(--fg);
margin-left: 170px;
margin-top: 0px;
position: relative;
line-height: 1.58;
font-size: 16px;
float: none;
max-width: 48em;
}
.snipp a {
display: block;
margin-top: 10px;
text-decoration: none;
color: var(--link);
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.snipp a:hover {
text-decoration: underline;
}
.clickable {
cursor: pointer;
}
.no-results-found {
border-radius: 8px;
position: relative;
border: 1px solid var(--snip-border);
color: var(--fg);
width: 530px;
padding: 15px;
margin-top: 10px;
font-size: 14px;
line-height: 1.58;
letter-spacing: normal;
}
.no-results-found-offset {
margin-left: 175px;
}
/* MAP */
.message {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
padding: 10px;
background-color: var(--search-bg);
border: 1px solid var(--border);
border-radius: 5px;
box-shadow: 0 0 10px var(--box-shadow);
z-index: 1000;
width: auto;
max-width: 80%;
text-align: center;
color: var(--text-color);
}
/* Map container */
#map {
height: calc(100% - 60px);
width: 100%;
top: 60px;
}
/* Leaflet control buttons */
.leaflet-control-locate,
.leaflet-control-layers-toggle {
background-color: var(--button) !important;
border: 1px solid var(--border) !important;
color: var(--fg) !important;
}
.leaflet-bar a,
.leaflet-bar a:hover {
background-color: var(--button) !important;
border: 1px solid var(--border) !important;
color: var(--fg) !important;
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: var(--html-bg) !important;
color: var(--text-color) !important;
border: 1px solid var(--border) !important;
}
.leaflet-popup-content-wrapper a {
color: var(--link) !important;
}
.leaflet-popup-content-wrapper a:hover {
text-decoration: underline;
}
/* Leaflet control buttons */
.leaflet-control-locate,
.leaflet-control-layers-toggle {
background-color: var(--button) !important;
border: 1px solid var(--border) !important;
color: var(--fg) !important;
}
.leaflet-bar a,
.leaflet-bar a:hover {
background-color: var(--button) !important;
border: 1px solid var(--border) !important;
color: var(--fg) !important;
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: var(--html-bg) !important;
color: var(--text-color) !important;
border: 1px solid var(--border) !important;
}
.leaflet-popup-content-wrapper a {
color: var(--link) !important;
}
.leaflet-popup-content-wrapper a:hover {
text-decoration: underline;
}
/* Leaflet attribution control */
.leaflet-control-attribution {
background: var(--button) !important;
border: 1px solid var(--border) !important;
color: var(--fg) !important;
}
.leaflet-control-attribution a {
color: var(--link) !important;
}
.leaflet-control-attribution a:hover {
text-decoration: underline !important;
}
/* Leaflet scale control */
.leaflet-control-scale {
background: var(--button) !important;
border: 1px solid var(--border) !important;
color: var(--fg) !important;
text-shadow: 1px 1px 2px var(--border) !important; /* Adjust text shadow */
}
.leaflet-control-scale-line {
background: var(--button) !important;
border: 1px solid var(--border) !important;
color: var(--fg) !important;
text-shadow: 1px 1px 2px var(--border) !important; /* Adjust text shadow */
}
/* Favicon styling */
.result_header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.favicon-container {
display: flex;
align-items: center;
justify-content: center;
height: 18px;
border-radius: 8%;
flex-shrink: 0;
}
.favicon {
width: 16px;
height: 16px;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}
/* Result link styling */
.result-link {
color: var(--fg);
font-size: 14px;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.result-link:hover {
text-decoration: underline;
}
/* Result item spacing */
.result_item {
margin-bottom: 1.5rem;
}
.result-title h3 {
margin: 4px 0;
font-weight: 400;
}
.single-line-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
.clamp-3-lines {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
/* Standard syntax (future support) */
line-clamp: 3;
box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5; /* adjust if needed */
max-height: calc(1.5em * 3); /* 3 lines */
}
.result-description {
margin: 4px 0 0 0;
color: var(--font-fg);
line-height: 1.4;
}
.results br {
display: none;
}
.result-url {
font-size: 14px;
color: var(--fg);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
.result-domain {
color: var(--fg);
font-weight: 600;
opacity: 0.85;
}
.result-path {
color: var(--font-fg);
font-weight: 500;
opacity: 0.8;
}
/*
.result-path::before {
content: "";
margin: 0 4px;
opacity: 0.6;
} */
body, h1, p, a, input, button {
color: var(--text-color); /* Applies the text color based on theme */
background-color: var(--background-color); /* Applies the background color based on theme */
}
@media only screen and (max-width: 1320px) {
.snip {
margin-left: 780px;
}
}
@media only screen and (max-width: 1220px) {
.snip {
position: relative;
float: none;
margin-left: 170px;
}
}
@media only screen and (max-width: 880px) {
.settings-icon-link-search {
margin-top: -15px !important;
}
.snip,
.no-results-found {
position: relative;
float: none;
max-width: 86%;
margin-left: 10px;
width: auto;
font-size: 13px;
}
.calc {
left: 20px;
}
.results h3,
.result_sublink h3 {
font-size: 16px;
}
#link,
#link:hover,
#link:visited {
font-size: 13px;
}
.sub-search-button-wrapper {
height: 77px;
}
.snip a {
font-size: 13px;
}
.snip_title {
font-size: 16px;
}
.settings {
max-width: 100%;
margin-left: 0px;
overflow-x: hidden;
background: inherit;
margin-top: 10px;
border-radius: 0px;
margin-bottom: 70px;
border-left: none;
border-right: none;
}
#theme {
margin-right: 0px;
}
.footer {
padding-left: 10px;
}
.footer a {
margin-left: -13px;
font-size: 14px;
padding-right: 10px;
}
.wrapper {
width: 86%;
position: absolute;
float: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
display: block;
margin-top: 0px;
top: 110px;
left: 4px;
}
.wrapper input {
padding: 10px;
max-width: 92%;
}
.wrapper-results {
width: 90%;
position: absolute;
float: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
display: block;
margin-top: 0px;
top: 50px;
left: 18px;
}
.wrapper-results input {
padding: 9px;
max-width: 92%;
}
.check {
left: 20px;
max-width: 90%;
}
.snipp {
position: relative;
float: none;
max-width: 90%;
margin-left: 10px;
width: auto;
font-size: 16px;
}
p {
font-size: 13px;
line-height: normal;
}
html {
font-size: 14px;
}
h3 {
font-size: 18px;
}
.sublinks {
max-width: 90%;
}
.results-search-container {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.results-search-container input {
width: 84%;
margin-right: 100%;
margin-left: 3px;
}
.image_view {
width: 100%;
height: 77%;
margin-top: -33px;
margin-right: 0%;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
.view-image img {
max-height: 250px;
}
.images {
margin-right: 1.2% !important;
}
.image {
max-width: 100%;
}
.logomobile {
position: relative;
float: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 10px;
display: block;
margin-top: 0px;
top: -5px; /* how ? why ? I dont even wanna know */
left: 0px;
}
.logo-container svg {
width: 100px;
height: 35px;
}
.mobile-none {
display: none;
}
.sub-search-button-wrapper {
margin: 0;
padding: 0;
display: flex;
align-items: baseline;
justify-content: center;
}
.fetched_tor {
margin-top: 135px !important;
}
.sub-search-button-wrapper img {
margin: 0;
padding: 0;
}
.sub-search-button-wrapper button {
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
font-size: 14px;
margin-top: 46px;
padding-bottom: 5px;
}
.save {
margin-left: 28px;
}
.results {
left: 20px;
max-width: 90%;
}
.prev-next {
left: 20px;
max-width: 90%;
}
.video__img__results img {
width: 127px;
height: 71.5px;
}
.video__img__results {
left: 20px;
max-width: 90%;
}
.video__results {
max-width: 90%;
}
.result_sublink {
left: 20px;
max-width: 90%;
}
.fetched {
left: 20px;
max-width: 90%;
font-size: 13px;
margin-top: -2px;
}
.fetched_img {
margin-top: 25px !important;
margin-left: 1.2% !important;
left: 0px !important;
}
.fetched_vid {
margin-top: 25px !important;
}
.fetched_dif_videos {
margin-top: 135px !important;
}
.fetched_dif_files{
margin-top: 25px !important;
}
.fetched_dif_images {
margin-top: 25px;
}
.results_settings {
left: 20px;
font-size: 13px;
margin-top: 140px;
}
.video_title {
font-size: 14px !important;
}
form.torrent-sort {
margin-top: 35px;
left: 20px;
}
#search-wrapper-ico {
top: 5px;
}
.search-container h1 {
font-size: 55px;
margin-bottom: 70px;
margin-top: 15px;
}
.search-container {
position: absolute;
width: 100%;
text-align: center;
}
.search-container input {
width: 84%;
margin-right: 100%;
margin-left: 3px;
}
.search-button-wrapper button {
display: none;
}
.icon-button {
margin-top: 30px;
}
.icon-button button {
margin-top: 30px;
}
.icon-button p {
margin-top: 30px;
}
#clearSearch {
top: 6px;
}
}
@media only screen and (max-width: 470px) {
.sub-search-button-wrapper {
display: flex;
flex-direction: row;
justify-content: flex-start;
overflow-x: auto;
white-space: nowrap;
padding-left: 10px;
padding-right: 10px;
position: relative;
scroll-behavior: smooth;
scrollbar-width: none; /* Hide scrollbar for Firefox */
}
/* Hide scrollbar for Webkit-based browsers (e.g., Chrome, Safari) */
.sub-search-button-wrapper::-webkit-scrollbar {
display: none;
}
/* Gradient as a fixed visual indicator */
.sub-search-button-wrapper::after {
content: ''; /* Adds a gradient or fade effect as a scroll indicator */
position: fixed; /* Ensure it doesn't move with scrolling */
top: 90px;
right: 0;
height: 40px;
width: 20px;
background: linear-gradient(to left, var(--html-bg), rgba(255, 255, 255, 0)); /* Adjust colors */
pointer-events: none; /* Prevent interaction */
z-index: 1; /* Ensure it is above the scrollable content */
}
/* Hide gradient when fully scrolled */
.sub-search-button-wrapper:has(.search-container-results-btn:last-child:in-view)::after {
display: none;
}
}
/* This is really bad */
@media only screen and (max-width: 400px) {
.icon-button {
padding: 5%
}
.results_settings {
display: flex; /* Enable flexbox */
flex-wrap: wrap; /* Allow elements to wrap onto new lines when necessary */
}
}
/* Ensuring dark theme compliance */
@media (prefers-color-scheme: dark) {
.leaflet-control-locate,
.leaflet-control-layers-toggle,
.leaflet-bar a,
.leaflet-bar a:hover,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip,
.leaflet-control-attribution,
.leaflet-control-scale,
.leaflet-control-scale-line {
background-color: var(--button) !important;
border: 1px solid var(--border) !important;
color: var(--fg) !important;
text-shadow: 1px 1px 2px var(--background-color) !important; /* Dark theme shadow adjustment */
}
.leaflet-control-attribution a {
color: var(--link) !important;
}
}
.favicon.globe-fallback {
color: var(--font-fg);
}