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-left: var(--space-sm);
margin-right: var(--space-sm); margin-right: var(--space-sm);
width: 32px; width: 32px;
flex-shrink: 0;
} }
.avatar { .avatar {

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

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

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

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