hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix ui bugs

Browse source
This commit is contained in:
hippoz 2023-06-26 13:44:45 +03:00
parent 244deefa03
commit f79f51527b
Signed by: hippoz
GPG key ID: 56C4E02A85F2FBED
3 changed files with 15 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/components/Message.svelte
View file

@ -34,6 +34,7 @@ import { overlayStore, OverlayType, setMessageInputEvent } from "../stores";
margin-left: var(--space-sm);
margin-right: var(--space-sm);
width: 32px;
flex-shrink: 0;
}
.avatar {

6
frontend/src/components/overlays/Settings.svelte
View file

@ -112,10 +112,14 @@
.account-buttons {
margin-left: auto;
}
.settings-modal {
background-color: var(--background-color-1);
}
</style>
<div class="modal-backdrop" transition:maybeModalFade on:click="{ close }">
<div class="modal" class:large-settings="{ !$smallViewport }" transition:maybeModalScale on:click|stopPropagation>
<div class="modal settings-modal" class:large-settings="{ !$smallViewport }" transition:maybeModalScale on:click|stopPropagation>
<div class="modal-header">
<span class="h4">Settings</span>
</div>

16
frontend/src/styles/global.css
View file

@ -213,7 +213,7 @@ body {
.modal {
display: flex;
flex-direction: column;
background-color: var(--background-color-1);
background-color: var(--background-color-2);
border-radius: var(--radius-lg);
contain: content;
}
@ -231,7 +231,7 @@ body {
.modal-footer {
margin-top: auto;
padding: var(--space-md);
background-color: var(--background-color-0);
background-color: var(--background-color-1);
border-bottom-right-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-lg);
}
@ -244,10 +244,8 @@ body {
float: left;
}
@media screen and (min-width: 768px) {
.modal-backdrop-opaque .modal .modal-footer {
background-color: var(--background-color-1);
}
.modal-backdrop-opaque .modal .modal-footer {
background-color: var(--background-color-3);
}
@media screen and (max-width: 768px) {
@ -286,7 +284,7 @@ body {
}
.input {
background-color : var(--background-color-2);
background-color: var(--background-color-3);
border: none;
color: currentColor;
border-radius: var(--radius-md);
@ -542,6 +540,10 @@ body {
/* badges */
.user-badge {
background: none;
border: none;
font: inherit;
user-select: none;
display: inline-flex;
justify-content: center;
align-items: center;