0
0
mirror of https://github.com/neon-mmd/websurfx.git synced 2024-11-22 14:08:23 -05:00

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

This commit is contained in:
neon_arch 2024-11-02 21:49:12 +03:00
parent 276420175a
commit ba0431dc8d

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);
@ -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);
@ -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 {