t/tetratto
1
0
Fork 0
Code Issues Pull requests Projects Releases 8 Packages Wiki Activity Actions

add: ability to convert existing communities into forums

Browse source
This commit is contained in:
trisua 2025-08-05 22:36:25 -04:00
parent 3958d5eaef
commit 2407e6b213
8 changed files with 125 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

36
crates/app/src/public/css/root.css
View file

@ -5,22 +5,26 @@
--hue: 16;
--sat: 6%;
--lit: 0%;
--color-surface: hsl(var(--hue), var(--sat), calc(97% - var(--lit)));
--color-lowered: hsl(var(--hue), var(--sat), calc(94% - var(--lit)));
--color-raised: hsl(var(--hue), var(--sat), calc(99% - var(--lit)));
--color-surface: hsl(var(--hue), var(--sat), calc(94% - var(--lit)));
--color-lowered: hsl(var(--hue), var(--sat), calc(90% - var(--lit)));
--color-raised: hsl(var(--hue), var(--sat), calc(97% - var(--lit)));
--color-super-lowered: hsl(var(--hue), var(--sat), calc(85% - var(--lit)));
--color-super-raised: hsl(var(--hue), var(--sat), calc(100% - var(--lit)));
--color-text: hsl(0, 0%, 0%);
--color-super-raised: hsl(var(--hue), var(--sat), calc(99% - var(--lit)));
--color-text: hsl(0, 0%, 9%);
--color-text-raised: var(--color-text);
--color-text-lowered: var(--color-text);
--color-primary: hsl(330, 18%, 26%);
--color-primary-lowered: hsl(330, 18%, 21%);
--color-text-primary: hsl(0, 0%, 100%);
--color-text-primary: hsl(0, 0%, 91%);
--color-secondary: hsl(6, 18%, 66%);
--color-secondary-lowered: hsl(6, 18%, 61%);
--color-text-secondary: hsl(0, 0%, 0%);
--color-secondary: hsl(277, 27%, 70%);
--color-secondary-lowered: hsl(277, 27%, 65%);
--color-text-secondary: hsl(0, 0%, 9%);
--color-accent: hsl(237, 27%, 28%);
--color-accent-lowered: hsl(237, 27%, 23%);
--color-text-accent: hsl(0, 0%, 91%);
--color-link: #2949b2;
--color-shadow: rgba(0, 0, 0, 0.08);
@ -54,15 +58,19 @@
--color-raised: hsl(var(--hue), var(--sat), calc(2% + var(--lit)));
--color-super-lowered: hsl(var(--hue), var(--sat), calc(12% + var(--lit)));
--color-super-raised: hsl(var(--hue), var(--sat), calc(4% + var(--lit)));
--color-text: hsl(0, 0%, 95%);
--color-text: hsl(0, 0%, 91%);
--color-primary: hsl(331, 18%, 74%);
--color-primary-lowered: hsl(331, 18%, 69%);
--color-text-primary: hsl(0, 0%, 0%);
--color-text-primary: hsl(0, 0%, 9%);
--color-secondary: hsl(6, 18%, 34%);
--color-secondary-lowered: hsl(6, 18%, 29%);
--color-text-secondary: hsl(0, 0%, 100%);
--color-secondary: hsl(277, 27%, 30%);
--color-secondary-lowered: hsl(277, 27%, 25%);
--color-text-secondary: hsl(0, 0%, 91%);
--color-accent: hsl(237, 27%, 72%);
--color-accent-lowered: hsl(237, 27%, 67%);
--color-text-accent: hsl(0, 0%, 9%);
--color-link: #93c5fd;
--color-red: hsl(0, 94%, 82%);

26
crates/app/src/public/css/style.css
View file

@ -370,7 +370,17 @@ button.secondary,
.button.secondary {
background: var(--color-secondary);
color: var(--color-text-secondary);
font-weight: 500;
}
button.accent:hover,
.button.accent:hover {
background: var(--color-accent-lowered);
}
button.accent,
.button.accent {
background: var(--color-accent);
color: var(--color-text-accent);
}
button.secondary:hover,
@ -861,18 +871,19 @@ dialog {
display: none;
background: var(--color-surface);
border: solid 1px var(--color-super-lowered) !important;
border-radius: var(--radius);
max-width: 100%;
border-radius: calc(var(--radius) * 2);
max-width: 95%;
border-style: none;
margin: auto;
color: var(--color-text);
animation: popin ease-in-out 1 0.1s forwards running;
animation: popin ease-in-out 1 0.15s forwards running;
}
dialog .inner {
padding: var(--pad-4);
width: 25rem;
max-width: 100%;
font-weight: 500;
}
dialog .inner hr:not(.flipped):last-of-type {
@ -891,6 +902,11 @@ dialog[open] {
dialog::backdrop {
background: hsla(0, 0%, 0%, 50%);
backdrop-filter: blur(5px);
animation: fadein ease-in-out 1 0.1s forwards running;
}
dialog:is(.dark *)::backdrop {
background: hsla(0, 0%, 100%, 15%);
}
/* dropdown */
@ -905,7 +921,7 @@ dialog::backdrop {
background: var(--color-raised);
/* border: solid 1px var(--color-super-lowered); */
z-index: 2;
border-radius: var(--radius);
border-radius: calc(var(--radius) * 2);
top: calc(100% + 5px);
right: 0;
width: max-content;