agnes/cheesy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: 🎨 update styles with font, sleeker emoji picker and improved sizing

Browse source
This commit is contained in:
m5ka 2024-03-26 22:41:39 +00:00
parent 1797ca34ec
commit 4d46e4e254
1 changed files with 29 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
moku/static/css/moku.css
View file

@ -1,3 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Solway:wght@400;700&display=swap');
:root { :root {
--tangerine: #F7A278; --tangerine: #F7A278;
--orange: #c94c10; --orange: #c94c10;
@ -6,7 +8,12 @@
--charcoal: #626262; --charcoal: #626262;
--emoji-picker-rounding: 6px; --emoji-picker-rounding: 6px;
--emoji-picker-label: #774519;
--emoji-picker-marker: #b9712f;
--image-max-size: 324px; --image-max-size: 324px;
--font-family: 'Solway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
} }
*, *::before, *::after { *, *::before, *::after {
@ -28,7 +35,7 @@ body {
max-width: 768px; max-width: 768px;
margin-inline: auto; margin-inline: auto;
padding: 2.4rem 1.2rem; padding: 2.4rem 1.2rem;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family: var(--font-family);
} }
.mt { .mt {
@ -74,6 +81,7 @@ button.logout {
font-size: 1.6rem; font-size: 1.6rem;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
font-family: var(--font-family);
} }
a, button.logout { a, button.logout {
@ -191,8 +199,9 @@ form input[type=password],
form input[type=email], form input[type=email],
form textarea, form textarea,
form select { form select {
padding: .2rem; padding: .4rem .2rem;
font-size: 1.6rem; font-size: 1.4rem;
font-family: var(--font-family);
border: 1px solid var(--charcoal); border: 1px solid var(--charcoal);
border-radius: 3px; border-radius: 3px;
background: var(--champagne); background: var(--champagne);
@ -209,7 +218,6 @@ form select:focus {
form .emoji-picker { form .emoji-picker {
display: grid; display: grid;
row-gap: .2rem;
margin-block-end: .8rem; margin-block-end: .8rem;
} }
@ -225,17 +233,33 @@ form .emoji-picker details:last-of-type:not([open]) summary {
form .emoji-picker details summary { form .emoji-picker details summary {
background: var(--dusty-champagne); background: var(--dusty-champagne);
color: var(--emoji-picker-label);
font-size: 1.4rem; font-size: 1.4rem;
font-weight: bold;
padding: .4rem .6rem; padding: .4rem .6rem;
user-select: none; user-select: none;
cursor: default; cursor: default;
} }
form .emoji-picker details summary::marker {
color: var(--emoji-picker-marker);
}
form .emoji-picker ul { form .emoji-picker ul {
display: grid; display: grid;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);
column-gap: .2rem; column-gap: .2rem;
row-gap: .2rem; row-gap: .2rem;
justify-items: center;
border: solid var(--dusty-champagne);
border-width: 0 2px 0 2px;
padding: .4rem;
}
form .emoji-picker details:last-of-type[open] ul {
border-width: 0 2px 2px 2px;
border-bottom-right-radius: var(--emoji-picker-rounding);
border-bottom-left-radius: var(--emoji-picker-rounding);
} }
form .emoji-picker ul li label { form .emoji-picker ul li label {
@ -248,7 +272,7 @@ form .emoji-picker ul li input[type=radio] {
form .emoji-picker ul li input[type=radio]:checked + label { form .emoji-picker ul li input[type=radio]:checked + label {
outline: 3px solid var(--tangerine); outline: 3px solid var(--tangerine);
border-radius: 50%; border-radius: 4px;
} }
form button[type=submit]:not(.logout) { form button[type=submit]:not(.logout) {