0
0
mirror of https://github.com/neon-mmd/websurfx.git synced 2024-12-23 04:48:21 -05:00
websurfx/public/static/themes/simple.css
2023-05-27 15:38:47 +00:00

304 lines
4.5 KiB
CSS

/* @import url('./catppuccin-mocha.css'); */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 100vh;
background: var(--1);
}
/* styles for the index page */
.search-container {
display: flex;
flex-direction: column;
gap: 5rem;
justify-content: center;
align-items: center;
}
.search-container div {
display: flex;
}
/* styles for the search box and search button */
.search_bar {
display: flex;
}
.search_bar input {
padding: 1rem;
width: 50rem;
height: 3rem;
outline: none;
border: none;
box-shadow: rgba(0, 0, 0, 1);
background: var(--fg);
}
.search_bar button {
padding: 1rem;
border-radius: 0;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
outline: none;
border: none;
gap: 0;
background: var(--bg);
color: var(--3);
font-weight: 600;
letter-spacing: 0.1rem;
}
.search_bar button:active,
.search_bar button:hover {
filter: brightness(1.2);
}
/* styles for the footer and header */
header {
background: var(--bg);
width: 100%;
display: flex;
justify-content: right;
align-items: center;
padding: 1rem;
}
header ul,
footer ul {
list-style: none;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 1.5rem;
gap: 2rem;
}
header ul li a,
footer ul li a,
header ul li a:visited,
footer ul li a:visited {
text-decoration: none;
color: var(--2);
text-transform: capitalize;
letter-spacing: 0.1rem;
}
header ul li a {
font-weight: 600;
}
header ul li a:hover,
footer ul li a:hover {
color: var(--5);
}
footer div span {
font-size: 1.5rem;
color: var(--4);
}
footer div {
display: flex;
gap: 1rem;
}
footer {
background: var(--bg);
width: 100%;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* Styles for the search page */
.results {
width: 90%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.results .search_bar {
margin: 1rem 0;
}
.results_aggregated {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 2rem 0;
}
.results_aggregated .result {
display: flex;
flex-direction: column;
margin-top: 1rem;
}
.results_aggregated .result h1 a {
font-size: 1.5rem;
color: var(--2);
text-decoration: none;
letter-spacing: 0.1rem;
}
.results_aggregated .result h1 a:hover {
color: var(--5);
}
.results_aggregated .result h1 a:visited {
color: var(--bg);
}
.results_aggregated .result small {
color: var(--3);
font-size: 1.1rem;
word-wrap: break-word;
line-break: anywhere;
}
.results_aggregated .result p {
color: var(--fg);
font-size: 1.2rem;
margin-top: 0.3rem;
word-wrap: break-word;
line-break: anywhere;
}
.results_aggregated .result .upstream_engines {
text-align: right;
font-size: 1.2rem;
padding: 1rem;
color: var(--5);
}
/* Styles for the 404 page */
.error_container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
gap: 5rem;
}
.error_container img {
width: 30%;
}
.error_content {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
}
.error_content h1,
.error_content h2 {
letter-spacing: 0.1rem;
}
.error_content h1 {
font-size: 3rem;
}
.error_content h2 {
font-size: 2rem;
}
.error_content p {
font-size: 1.2rem;
}
.error_content p a,
.error_content p a:visited {
color: var(--2);
text-decoration: none;
}
.error_content p a:hover {
color: var(--5);
}
.page_navigation {
padding: 0 0 2rem 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.page_navigation button {
background: var(--bg);
color: var(--fg);
padding: 1rem;
border-radius: 0.5rem;
outline: none;
border: none;
}
.page_navigation button:active {
filter: brightness(1.2);
}
/* Styles for the about page */
.about-container article{
font-size: 1.5rem;
color:var(--fg);
padding-bottom: 10px;
}
.about-container article h1{
color: var(--2);
font-size: 2.8rem;
}
.about-container article div{
padding-bottom: 15px;
}
.about-container a{
color:var(--3);
}
.about-container article h2{
color: var(--3);
font-size: 1.8rem;
padding-bottom: 10px;
}
.about-container p{
color:var(--fg);
font-size: 1.6rem;
padding-bottom: 10px;
}
.about-container h3{
font-size: 1.5rem;
}
.about-container {
width: 80%;
}