alamin/websurfx
alamin/websurfx
0
0
Fork 0
mirror of https://github.com/neon-mmd/websurfx.git synced 2024-11-22 22:18:23 -05:00
Code Issues Releases Activity

major visual revamp

Browse Source
This commit is contained in:
cybrejon 2023-12-08 21:28:31 +08:00
parent 0f855e3b6e
commit 551044cca0
1 changed files with 109 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
public/static/themes/simple.css
View File

@ -1,4 +1,5 @@
/* @import url('./catppuccin-mocha.css'); */ /* @import url('./catppuccin-mocha.css'); */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&display=swap');
* { * {
padding: 0; padding: 0;
@ -16,7 +17,13 @@ body {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
background: var(--color-one); font-family: 'Rubik', sans-serif;
background-color: var(--background-color);
}
/* enforce font for buttons */
button {
font-family: 'Rubik', sans-serif;
} }
/* styles for the index page */ /* styles for the index page */
@ -29,46 +36,71 @@ body {
align-items: center; align-items: center;
} }
.search-container div { .search-container svg {
display: flex; color: var(--logo-color);
} }
.websurfx-logo { .search-container div {
width: clamp(12rem, 40rem, 48rem); display: flex;
} }
/* styles for the search box and search button */ /* styles for the search box and search button */
.search_bar { .search_bar {
display: flex; display: flex;
gap: 10px;
align-items: center;
} }
.search_bar input { .search_bar input {
padding: 1rem; border-radius: 6px;
padding: 2.6rem 2.2rem;
width: 50rem; width: 50rem;
height: 3rem; height: 3rem;
outline: none; outline: none;
border: none; border: none;
box-shadow: rgb(0 0 0 / 1); box-shadow: rgb(0 0 0 / 1);
background: var(--foreground-color); background-color: var(--color-one);
color: var(--foreground-color);
outline-offset: 3px;
font-size: 1.6rem;
}
.search_bar input:focus {
outline: 2px solid var(--foreground-color);
}
.search_bar input::placeholder {
color: var(--foreground-color);
opacity: 1; /* Firefox */
}
.search_bar input::-ms-input-placeholder { /* Edge 12 -18 */
color: var(--foreground-color);
} }
.search_bar button { .search_bar button {
padding: 1rem; padding: 2.6rem 3.2rem;
border-radius: 0; border-radius: 6px;
height: 3rem; height: 3rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
outline: none; outline-offset: 3px;
outline: 2px solid transparent;
border: none; border: none;
transition: .1s;
gap: 0; gap: 0;
background: var(--background-color); background-color: var(--color-six);
color: var(--color-three); color: var(--background-color);
font-weight: 600; font-weight: 600;
letter-spacing: 0.1rem; letter-spacing: 0.1rem;
} }
.search_bar button:active {
outline: 2px solid var(--color-three);
}
.search_bar button:active, .search_bar button:active,
.search_bar button:hover { .search_bar button:hover {
filter: brightness(1.2); filter: brightness(1.2);
@ -85,13 +117,19 @@ body {
width: 20rem; width: 20rem;
background-color: var(--color-one); background-color: var(--color-one);
color: var(--foreground-color); color: var(--foreground-color);
padding: 1rem 2rem; padding: 1.2rem 2rem;
border-radius: 0.5rem; border-radius: 0.5rem;
outline: none; outline-offset: 3px;
outline: 2px solid transparent;
border: none; border: none;
text-transform: capitalize; text-transform: capitalize;
} }
.search_area .search_options select:active,
.search_area .search_options select:hover {
outline: 2px solid var(--color-three);
}
.search_area .search_options option:hover { .search_area .search_options option:hover {
background-color: var(--color-one); background-color: var(--color-one);
} }
@ -204,12 +242,17 @@ footer {
width: 100%; width: 100%;
background: var(--background-color); background: var(--background-color);
display: flex; display: flex;
padding: 1rem;
align-items: center; align-items: center;
} }
header { header {
justify-content: space-between; justify-content: space-between;
padding: 2rem 3rem;
}
footer {
padding: 1.7rem 1.7rem 4rem 1.7rem;
gap: 1.8rem;
} }
header h1 a { header h1 a {
@ -217,7 +260,6 @@ header h1 a {
text-decoration: none; text-decoration: none;
color: var(--foreground-color); color: var(--foreground-color);
letter-spacing: 0.1rem; letter-spacing: 0.1rem;
margin-left: 1rem;
} }
header ul, header ul,
@ -271,6 +313,11 @@ footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
gap: 1rem;
}
.result {
gap: 1rem;
} }
.results .search_bar { .results .search_bar {
@ -292,10 +339,10 @@ footer {
} }
.results_aggregated .result h1 a { .results_aggregated .result h1 a {
font-size: 1.5rem; font-size: 1.7rem;
font-weight: normal;
color: var(--color-two); color: var(--color-two);
text-decoration: none; text-decoration: none;
letter-spacing: 0.1rem;
} }
.results_aggregated .result h1 a:hover { .results_aggregated .result h1 a:hover {
@ -308,14 +355,15 @@ footer {
.results_aggregated .result small { .results_aggregated .result small {
color: var(--color-three); color: var(--color-three);
font-size: 1.1rem; font-size: 1.3rem;
word-wrap: break-word; word-wrap: break-word;
line-break: anywhere; line-break: anywhere;
} }
.results_aggregated .result p { .results_aggregated .result p {
color: var(--foreground-color); color: var(--foreground-color);
font-size: 1.2rem; font-size: 1.4rem;
line-height: 2.4rem;
margin-top: 0.3rem; margin-top: 0.3rem;
word-wrap: break-word; word-wrap: break-word;
line-break: anywhere; line-break: anywhere;
@ -445,6 +493,7 @@ footer {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
width: 80dvw; width: 80dvw;
margin: 5rem 0;
} }
.settings h1 { .settings h1 {
@ -452,11 +501,20 @@ footer {
font-size: 2.5rem; font-size: 2.5rem;
} }
.settings > h1 {
margin-bottom: 4rem;
margin-left: 2rem;
}
.settings hr { .settings hr {
border-color: var(--color-three); border-color: var(--color-three);
margin: 0.3rem 0 1rem; margin: 0.3rem 0 1rem;
} }
.settings > hr {
margin-left: 2rem;
}
.settings_container .sidebar { .settings_container .sidebar {
width: 30%; width: 30%;
cursor: pointer; cursor: pointer;
@ -467,7 +525,6 @@ footer {
margin-left: -0.7rem; margin-left: -0.7rem;
padding: 0.7rem; padding: 0.7rem;
border-radius: 5px; border-radius: 5px;
font-weight: bold;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
color: var(--foreground-color); color: var(--foreground-color);
text-transform: capitalize; text-transform: capitalize;
@ -475,18 +532,30 @@ footer {
} }
.settings_container .sidebar .btn { .settings_container .sidebar .btn {
padding: 0.5rem; padding: 2rem;
border-radius: 0.5rem; border-radius: 0.5rem;
outline-offset: 3px;
outline: 2px solid transparent;
}
.settings_container .sidebar .btn:active {
outline: 2px solid var(--color-two);
}
.settings_container .sidebar .btn:not(.active):hover {
color: var(--color-two);
} }
.settings_container .sidebar .btn.active { .settings_container .sidebar .btn.active {
background-color: var(--color-two); background-color: var(--color-two);
color: var(--background-color);
} }
.settings_container .main_container { .settings_container .main_container {
width: 70%; width: 70%;
border-left: 1.5px solid var(--color-three); border-left: 1.5px solid var(--color-three);
padding-left: 3rem; padding-left: 3rem;
border: none;
} }
.settings_container .tab { .settings_container .tab {
@ -495,6 +564,7 @@ footer {
.settings_container .tab.active { .settings_container .tab.active {
display: flex; display: flex;
gap: 1.2rem;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
} }
@ -542,7 +612,7 @@ footer {
.settings_container .general select { .settings_container .general select {
margin: 0.7rem 0; margin: 0.7rem 0;
width: 20rem; width: 20rem;
background-color: var(--background-color); background-color: var(--color-one);
color: var(--foreground-color); color: var(--foreground-color);
padding: 1rem 2rem; padding: 1rem 2rem;
border-radius: 0.5rem; border-radius: 0.5rem;
@ -560,16 +630,19 @@ footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
gap: 1rem;
padding: 1rem 0; padding: 1rem 0;
margin-bottom: 2rem;
gap: 2rem;
} }
.settings_container .engines .toggle_btn { .settings_container .engines .toggle_btn {
color: var(--foreground-color); color: var(--foreground-color);
font-size: 1.5rem; font-size: 1.5rem;
display: flex; display: flex;
gap: 0.5rem;
align-items: center; align-items: center;
border-radius: 100px;
gap: 1.5rem;
letter-spacing: 1px;
} }
.settings_container .engines hr { .settings_container .engines hr {
@ -602,8 +675,14 @@ footer {
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
inset: 0; inset: 0;
background-color: var(--background-color); background-color: var(--foreground-color);
transition: 0.4s; transition: 0.2s;
outline-offset: 3px;
outline: 2px solid transparent;
}
.slider:active {
outline: 2px solid var(--foreground-color);
} }
.slider::before { .slider::before {
@ -613,8 +692,8 @@ footer {
width: 2.6rem; width: 2.6rem;
left: 0.4rem; left: 0.4rem;
bottom: 0.4rem; bottom: 0.4rem;
background-color: var(--foreground-color); background-color: var(--background-color);
transition: 0.4s; transition: .2s;
} }
input:checked + .slider { input:checked + .slider {