fix moderation collapsibles & do a consistency pass (#7330)

* fix moderation collapsibles & do a consistency pass

* extract tech review sources

* improve buttons

* buttn

* improve markdown styling

* fix nested details

* save filters + fix reports reloading

* prepr
This commit is contained in:
Prospector
2026-08-27 18:46:13 +00:00
committed by GitHub
parent 263aaedc8f
commit ffd864a9e2
69 changed files with 3573 additions and 3088 deletions
+2
View File
@@ -20,6 +20,7 @@ import _ArrowLeftIcon from './icons/arrow-left.svg?component'
import _ArrowLeftRightIcon from './icons/arrow-left-right.svg?component'
import _ArrowUpIcon from './icons/arrow-up.svg?component'
import _ArrowUpDownIcon from './icons/arrow-up-down.svg?component'
import _ArrowUpFromLineIcon from './icons/arrow-up-from-line.svg?component'
import _ArrowUpRightIcon from './icons/arrow-up-right.svg?component'
import _ArrowUpZAIcon from './icons/arrow-up-z-a.svg?component'
import _AsteriskIcon from './icons/asterisk.svg?component'
@@ -477,6 +478,7 @@ export const ArrowLeftIcon = _ArrowLeftIcon
export const ArrowLeftRightIcon = _ArrowLeftRightIcon
export const ArrowUpIcon = _ArrowUpIcon
export const ArrowUpDownIcon = _ArrowUpDownIcon
export const ArrowUpFromLineIcon = _ArrowUpFromLineIcon
export const ArrowUpRightIcon = _ArrowUpRightIcon
export const ArrowUpZAIcon = _ArrowUpZAIcon
export const AsteriskIcon = _AsteriskIcon
@@ -0,0 +1,17 @@
<!-- @license lucide-static v0.562.0 - ISC -->
<svg
class="lucide lucide-arrow-up-from-line"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m18 9-6-6-6 6" />
<path d="M12 3v14" />
<path d="M5 21h14" />
</svg>

After

Width:  |  Height:  |  Size: 375 B

+69 -22
View File
@@ -850,7 +850,8 @@ a:not(.no-click-animation),
h1,
h2,
h3 {
h3,
h4 {
color: var(--color-contrast);
}
@@ -860,6 +861,10 @@ a:not(.no-click-animation),
border-bottom: 1px solid var(--color-divider);
}
h4 {
@apply mt-5 mb-3;
}
h1,
h2,
h3,
@@ -916,13 +921,12 @@ a:not(.no-click-animation),
}
pre {
@apply bg-surface-2 rounded-xl p-4 border border-solid border-surface-5;
margin-top: 1rem;
padding: 14px;
border-radius: var(--radius-sm);
background-color: var(--color-button-bg);
overflow-x: auto;
code {
@apply bg-transparent border-0;
font-size: 80%;
padding: 0;
border-radius: 0;
@@ -930,6 +934,7 @@ a:not(.no-click-animation),
}
code {
@apply bg-surface-3 rounded-md p-4 border border-solid border-surface-5;
padding: 0.2em 0.4em;
font-size: 80%;
border-radius: var(--radius-sm);
@@ -983,38 +988,80 @@ a:not(.no-click-animation),
}
details {
border: 0.15rem solid var(--color-button-bg);
border-radius: var(--radius-sm);
padding: 0.5rem 0.5rem 0;
@apply border border-solid border-surface-5 bg-surface-3 rounded-xl p-2;
display: grid;
grid-template-rows: min-content 0fr;
transition: grid-template-rows 0.3s var(--ease-out-expo);
overflow: clip;
summary {
font-weight: bold;
margin: -0.5rem -0.5rem 0;
padding: 0.5rem 0.8rem;
@apply bg-surface-4 hover:bg-surface-5 p-2 flex items-center gap-1 text-contrast -m-2 border border-solid border-transparent;
font-weight: 600;
cursor: pointer;
background-color: var(--color-button-bg);
border-radius: var(--radius-xs);
list-style: none;
&:hover {
filter: brightness(0.85);
&::-webkit-details-marker {
display: none;
}
&::marker {
content: none;
}
&::before {
@apply text-primary;
content: '';
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
background-color: currentColor;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19 9L12 16L5 9' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center / contain no-repeat;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19 9L12 16L5 9' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center / contain no-repeat;
transition: transform 0.3s ease-in-out;
}
}
> :nth-child(2) {
@apply mt-5;
}
> :nth-child(n + 2) {
@apply mx-1;
}
> :last-child:not(summary) {
@apply mb-1;
}
&::details-content {
min-height: 0;
overflow: hidden;
transition: content-visibility 0.3s allow-discrete;
}
&[open] {
padding: 0.5rem;
grid-template-rows: min-content 1fr;
summary {
margin-bottom: 0.5rem;
border-radius: var(--radius-xs) var(--radius-xs) 0 0;
> summary {
@apply border-b-surface-5;
&::before {
transform: rotate(180deg);
}
}
}
> :last-child:not(summary) {
margin-bottom: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
transition: none;
> details:not([open]) summary {
margin: -0.5em -0.5em 0;
border-radius: var(--radius-xs);
summary,
summary::before,
&::details-content {
transition: none;
}
}
}