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

add: forum threads ui

Browse source
This commit is contained in:
trisua 2025-08-05 16:33:53 -04:00
parent 155fe34c6e
commit 3958d5eaef
8 changed files with 260 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,6 @@
@import url("root.css");
/* media gallery */
.media_gallery {
display: grid;
grid-auto-columns: 1fr 1fr;
@ -312,7 +313,7 @@ button,
transition: background 0.15s;
width: max-content;
height: 32px;
padding: var(--pad-1) var(--pad-4);
padding: 0 var(--pad-4);
border-radius: var(--radius);
cursor: pointer;
display: flex;
@ -439,7 +440,6 @@ textarea,
select {
padding: 0.35rem var(--pad-3);
border-radius: var(--radius);
border: solid 1px var(--color-super-lowered);
outline: none;
transition: background 0.15s;
resize: vertical;
@ -447,8 +447,10 @@ select {
font-family: inherit;
font-size: 16px;
/* personality */
background: transparent;
color: inherit;
--background: var(--color-lowered);
border: solid 1px var(--background);
background: var(--background);
color: var(--color-text-lowered);
}
textarea {
@ -458,8 +460,7 @@ textarea {
input:focus,
textarea:focus,
select:focus {
background: var(--color-super-raised);
color: var(--color-text-raised);
border-color: var(--color-super-lowered);
}
.poll_bar {
@ -902,7 +903,7 @@ dialog::backdrop {
display: none;
position: absolute;
background: var(--color-raised);
border: solid 1px var(--color-super-lowered);
/* border: solid 1px var(--color-super-lowered); */
z-index: 2;
border-radius: var(--radius);
top: calc(100% + 5px);
@ -1404,3 +1405,55 @@ details.accordion .inner {
background-color: var(--color-primary) !important;
color: var(--color-text-primary) !important;
}
/* threads */
.squig {
--color: var(--color-super-lowered);
--background: var(--color-raised);
--size: 10px;
position: relative;
width: 100%;
height: 20px;
display: block;
}
.squig::before,
.squig::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
background-size: var(--size) 100%;
}
.squig::before {
top: -2px;
background-image:
linear-gradient(45deg, var(--color) 35%, transparent 0),
linear-gradient(-45deg, var(--color) 35%, transparent 0);
}
.squig::after {
top: 0px;
background-image:
linear-gradient(45deg, var(--background) 35%, transparent 0),
linear-gradient(-45deg, var(--background) 35%, transparent 0);
}
.thread {
--pad: 15px;
--squig-height: 20px;
position: relative;
padding-left: var(--pad);
}
.thread::before {
content: "";
position: absolute;
background: var(--color-super-lowered);
height: calc(100% - var(--squig-height));
width: 5px;
left: 0;
top: 0;
border-radius: var(--radius);
}