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

general visual improvements

Browse source
This commit is contained in:
hippoz 2022-09-20 01:35:54 +03:00
parent f3221321d8
commit 10d25445c5
Signed by: hippoz
GPG key ID: 7C52899193467641
4 changed files with 21 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
frontend/public/global.css
View file

@ -59,6 +59,7 @@
--radius-unit: 0.5em; --radius-unit: 0.5em;
--radius-xxs: calc(0.25 * var(--radius-unit)); --radius-xxs: calc(0.25 * var(--radius-unit));
--radius-xs: calc(0.5 * var(--radius-unit)); --radius-xs: calc(0.5 * var(--radius-unit));
--radius-xsplus: calc(0.65 * var(--radius-unit));
--radius-sm: calc(0.75 * var(--radius-unit)); --radius-sm: calc(0.75 * var(--radius-unit));
--radius-norm: var(--radius-unit); --radius-norm: var(--radius-unit);
--radius-md: calc(1.25 * var(--radius-unit)); --radius-md: calc(1.25 * var(--radius-unit));
@ -154,7 +155,7 @@ body {
.modal { .modal {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--background-color-2); background-color: var(--background-color-1);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: var(--space-md); padding: var(--space-md);
} }
@ -196,7 +197,7 @@ body {
} }
.input { .input {
background-color : var(--background-color-3); background-color : var(--background-color-2);
border: none; border: none;
color: currentColor; color: currentColor;
border-radius: var(--radius-md); border-radius: var(--radius-md);
@ -206,24 +207,28 @@ body {
} }
.input::placeholder { .input::placeholder {
color: var(--foreground-color-3); color: var(--foreground-color-2);
} }
/* button */ /* button */
.button { .button {
color: var(--foreground-color-1); color: var(--foreground-color-1);
background-color: var(--background-color-2); background: none;
text-align: center; text-align: center;
border: none; border: none;
padding: var(--space-sm); padding: var(--space-xsplus);
border-radius: var(--radius-md); border-radius: var(--radius-xl);
font: inherit; font: inherit;
max-height: 3em;
/* TODO: inefficient */
display: flex;
justify-content: center;
align-items: center;
} }
.button:hover { .button:hover {
background-color: var(--background-color-3); background-color: var(--background-color-2);
} }
.button-accent { .button-accent {

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

@ -163,6 +163,7 @@
padding: 12px; padding: 12px;
aspect-ratio: 1; aspect-ratio: 1;
flex-shrink: 0; flex-shrink: 0;
color: var(--colored-element-text-color);
} }
.invisible { .invisible {

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

@ -66,16 +66,10 @@
align-items: center; align-items: center;
justify-content: left; justify-content: left;
padding: var(--space-md); padding: var(--space-md);
border-radius: var(--radius-norm);
background-color: var(--background-color-1);
} }
.selection-option { .selection-option.selected {
background-color: var(--background-color-1); background-color: var(--background-color-2);
}
.selection-option.selected, .selection-option:hover {
background-color: var(--background-color-3);
} }
.horizontal-selections { .horizontal-selections {

11
frontend/src/components/overlays/Toast.svelte
View file

@ -18,12 +18,11 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
padding: var(--space-sm); padding: var(--space-sm);
border-radius: var(--radius-md); border-radius: var(--radius-md);
box-shadow: 0px 4px 16px rgba(17,17,26,0.2), 0px 8px 32px rgba(17,17,26,0.2);
} }
</style> </style>
{#key message} <div class="toast" transition:maybeModalFly>
<div class="toast" transition:maybeModalFly> <span>{ message }</span>
<span>{ message }</span> <button class="icon-button icon-button-auto material-icons-outlined" on:click="{ close }">close</button>
<button class="icon-button icon-button-auto material-icons-outlined" on:click="{ close }">close</button> </div>
</div>
{/key}