alamin/websurfx
alamin/websurfx
0
0
Fork 0
mirror of https://github.com/neon-mmd/websurfx.git synced 2024-12-22 12:28: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-stretch: 0% 200%;
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: 2px solid transparent;
border: none;
transition: .1s;
transition: 0.1s;
gap: 0;
background-color: var(--color-six);
color: var(--background-color);
@ -102,10 +103,10 @@ button {
}
.search_bar button img {
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.search_bar button:active {
@ -248,7 +249,6 @@ button {
/* styles for the footer and header */
header {
width: 100%;
background: var(--background-color);
@ -336,7 +336,7 @@ footer div {
.results_aggregated {
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: space-between;
margin: 2rem 0;
content-visibility: auto;
}
@ -709,7 +709,8 @@ footer div {
}
.settings_container .user_interface select,
.settings_container .general select {
.settings_container .general select,
.settings_container .general form input {
margin: 0.7rem 0;
width: 20rem;
background-color: var(--color-one);
@ -721,6 +722,38 @@ footer div {
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 .general option:hover {
background-color: var(--color-one);
@ -793,7 +826,7 @@ footer div {
left: 0.4rem;
bottom: 0.4rem;
background-color: var(--background-color);
transition: .2s;
transition: 0.2s;
}
input:checked + .slider {
@ -817,7 +850,7 @@ input:checked + .slider::before {
border-radius: 50%;
}
@media screen and (width <= 1136px) {
@media screen and (width <=1136px) {
.hero-text-container {
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 {
width: clamp(200px, 290px, 815px);
}
@ -851,7 +884,7 @@ input:checked + .slider::before {
.features {
grid-template-columns: 1fr;
}
.feature-list {
padding: 35px 0;
}