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

💄 feat(UI): provide a theme for the buttons (#427)

Browse Source
This commit is contained in:
neon_arch 2024-11-02 21:49:12 +03:00
parent 276420175a
commit ba0431dc8d
1 changed files with 46 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,8 @@
font-weight: 200 600; font-weight: 200 600;
font-stretch: 0% 200%; font-stretch: 0% 200%;
font-display: swap; font-display: swap;
src: url("https://fonts.gstatic.com/s/rubik/v28/iJWKBXyIfDnIV7nErXyi0A.woff2") format('woff2'); src: url('https://fonts.gstatic.com/s/rubik/v28/iJWKBXyIfDnIV7nErXyi0A.woff2')
format('woff2');
} }
* { * {
@ -92,7 +93,7 @@ button {
outline-offset: 3px; outline-offset: 3px;
outline: 2px solid transparent; outline: 2px solid transparent;
border: none; border: none;
transition: .1s; transition: 0.1s;
gap: 0; gap: 0;
background-color: var(--color-six); background-color: var(--color-six);
color: var(--background-color); color: var(--background-color);
@ -102,10 +103,10 @@ button {
} }
.search_bar button img { .search_bar button img {
position:absolute; position: absolute;
left:50%; left: 50%;
top:50%; top: 50%;
transform:translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.search_bar button:active { .search_bar button:active {
@ -248,7 +249,6 @@ button {
/* styles for the footer and header */ /* styles for the footer and header */
header { header {
width: 100%; width: 100%;
background: var(--background-color); background: var(--background-color);
@ -336,7 +336,7 @@ footer div {
.results_aggregated { .results_aggregated {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
margin: 2rem 0; margin: 2rem 0;
content-visibility: auto; content-visibility: auto;
} }
@ -709,7 +709,8 @@ footer div {
} }
.settings_container .user_interface select, .settings_container .user_interface select,
.settings_container .general select { .settings_container .general select,
.settings_container .general form input {
margin: 0.7rem 0; margin: 0.7rem 0;
width: 20rem; width: 20rem;
background-color: var(--color-one); background-color: var(--color-one);
@ -721,6 +722,38 @@ footer div {
text-transform: capitalize; text-transform: capitalize;
} }
.settings_container .general form input {
padding: 0rem;
width: 30rem;
text-align: center;
text-transform: none;
}
.settings_container .general form input::file-selector-button {
content: 'Browse';
padding: 1rem 2rem;
font-size: 1.5rem;
background: var(--color-three);
color: var(--background-color);
border-radius: 0.5rem;
border: 2px solid transparent;
font-weight: bold;
transition: all 0.1s ease-out;
cursor: pointer;
box-shadow: 5px 5px;
outline: none;
translate: -1rem 0rem;
}
.settings_container .general form input::file-selector-button:active {
box-shadow: none;
translate: 5px 5px;
}
.settings_container .general .export_btn {
margin-bottom: 1rem;
}
.settings_container .user_interface option:hover, .settings_container .user_interface option:hover,
.settings_container .general option:hover { .settings_container .general option:hover {
background-color: var(--color-one); background-color: var(--color-one);
@ -793,7 +826,7 @@ footer div {
left: 0.4rem; left: 0.4rem;
bottom: 0.4rem; bottom: 0.4rem;
background-color: var(--background-color); background-color: var(--background-color);
transition: .2s; transition: 0.2s;
} }
input:checked + .slider { input:checked + .slider {
@ -817,7 +850,7 @@ input:checked + .slider::before {
border-radius: 50%; border-radius: 50%;
} }
@media screen and (width <= 1136px) { @media screen and (width <=1136px) {
.hero-text-container { .hero-text-container {
width: unset; width: unset;
} }
@ -827,7 +860,7 @@ input:checked + .slider::before {
} }
} }
@media screen and (width <= 706px) { @media screen and (width <=706px) {
.about-container article .logo-container svg { .about-container article .logo-container svg {
width: clamp(200px, 290px, 815px); width: clamp(200px, 290px, 815px);
} }
@ -851,7 +884,7 @@ input:checked + .slider::before {
.features { .features {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.feature-list { .feature-list {
padding: 35px 0; padding: 35px 0;
} }