kamen
/
graphicek
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved styling of modals and buttons

This commit is contained in:
Jan Zípek 2022-08-28 20:14:30 +02:00
parent 3c96bfa73e
commit 4b0220027e
Signed by: kamen
GPG Key ID: A17882625B33AC31
3 changed files with 48 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
client/src/assets/components/_button.scss
View File

@ -8,24 +8,29 @@ button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
}
button > .svg-icon { &:hover {
display: flex; background-color: var(--button-hover-bg-color);
align-items: center; color: var(--button-hover-fg-color);
margin-top: 1px; }
margin-right: 0.2rem;
}
button:hover { &.icon {
background-color: var(--button-hover-bg-color); padding: 0.25rem;
color: var(--button-hover-fg-color);
}
button.icon { > .svg-icon {
padding: 0.25rem; margin-right: 0;
} }
}
button.icon > .svg-icon { &.cancel {
margin-right: 0; background-color: var(--button-cancel-bg-color);
color: var(--button-cancel-fg-color);
}
> .svg-icon {
display: flex;
align-items: center;
margin-top: 1px;
margin-right: 0.2rem;
}
} }

20
client/src/assets/components/_modal.scss
View File

@ -17,11 +17,23 @@
&.confirm { &.confirm {
background-color: var(--confirm-overlay-bg-color); background-color: var(--confirm-overlay-bg-color);
.inner {
width: 25rem;
}
.actions {
margin-top: 1rem;
> button {
margin-left: 0.5rem;
}
}
} }
.inner { .inner {
background-color: var(--box-bg-color); background-color: var(--modal-bg-color);
color: var(--box-fg-color); color: var(--modal-fg-color);
margin-top: 5vh; margin-top: 5vh;
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
border-radius: 0.5rem; border-radius: 0.5rem;
@ -40,6 +52,10 @@
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
button {
padding: 0.5rem 1rem;
}
.remove { .remove {
margin-right: auto; margin-right: auto;
background-color: var(--button-remove-bg-color); background-color: var(--button-remove-bg-color);

11
client/src/assets/style.scss
View File

@ -20,8 +20,10 @@
--box-action-fg-color: #666; --box-action-fg-color: #666;
--box-preview-bg-color: #3988ff; --box-preview-bg-color: #3988ff;
--box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1); --box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
--modal-overlay-bg-color: rgba(0, 0, 0, 0.5); --modal-overlay-bg-color: rgba(0, 0, 0, 0.3);
--confirm-overlay-bg-color: rgba(0, 0, 0, 0.8); --modal-bg-color: #222;
--modal-fg-color: #eee;
--confirm-overlay-bg-color: rgba(0, 0, 0, 0.5);
--graph-axis-fg-color: #777; --graph-axis-fg-color: #777;
--graph-grid-color: rgb(238, 238, 238); --graph-grid-color: rgb(238, 238, 238);
--link-fg-color: #3988ff; --link-fg-color: #3988ff;
@ -37,13 +39,16 @@
--header-spacer-color: #333; --header-spacer-color: #333;
--header-shadow: none; --header-shadow: none;
--box-bg-color: #111; --box-bg-color: #111;
--modal-bg-color: #222;
--box-fg-color: #eee; --box-fg-color: #eee;
--box-shadow: none; --box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.3);
--graph-axis-fg-color: #666; --graph-axis-fg-color: #666;
--graph-grid-color: rgb(25, 25, 25); --graph-grid-color: rgb(25, 25, 25);
--button-bg-color: #0b3c9f; --button-bg-color: #0b3c9f;
--button-fg-color: #eee; --button-fg-color: #eee;
--button-cancel-fg-color: #ccc; --button-cancel-fg-color: #ccc;
--modal-overlay-bg-color: rgba(128, 128, 128, 0.3);
--confirm-overlay-bg-color: rgba(128, 128, 128, 0.5);
} }
select, select,