feat(desktop): sticky diff headers

This commit is contained in:
Adam 2025-11-12 07:03:35 -06:00
commit 0ccb26df94
No known key found for this signature in database
GPG key ID: 9CB48779AF150E75
3 changed files with 53 additions and 30 deletions

View file

@ -12,9 +12,6 @@
align-items: flex-start;
gap: 0px;
align-self: stretch;
border: 1px solid var(--border-weak-base);
border-bottom: none;
border-top: none;
overflow: clip;
[data-slot="accordion-header"] {
@ -36,7 +33,7 @@
user-select: none;
background-color: var(--surface-base);
border-bottom: 1px solid var(--border-weak-base);
border: 1px solid var(--border-weak-base);
overflow: clip;
color: var(--text-strong);
transition: background-color 0.15s ease;
@ -62,11 +59,19 @@
}
&[data-expanded] {
border: 1px solid var(--border-weak-base);
border-bottom: 1px solid var(--border-weak-base);
margin-top: 8px;
margin-bottom: 8px;
border-radius: 8px;
[data-slot="accordion-trigger"] {
border-radius: 8px 8px 0 0;
}
[data-slot="accordion-content"] {
border: 1px solid var(--border-weak-base);
border-top: none;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
[data-slot="accordion-item"]:has(+ &) {
&[data-closed] {
@ -81,18 +86,23 @@
}
& + [data-slot="accordion-item"] {
border-top: 1px solid var(--border-weak-base);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
margin-top: 8px;
[data-slot="accordion-trigger"] {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
}
}
&[data-closed] + &[data-closed] {
[data-slot="accordion-trigger"] {
border-top: none;
}
}
&:first-child {
margin-top: 0px;
border-top: 1px solid var(--border-weak-base);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
&[data-closed] {
[data-slot="accordion-trigger"] {
@ -104,8 +114,6 @@
&:last-child {
margin-bottom: 0px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
&[data-closed] {
[data-slot="accordion-trigger"] {

View file

@ -77,7 +77,7 @@
--background-weak: var(--smoke-light-3);
--background-strong: var(--smoke-light-1);
--background-stronger: #fcfcfc;
--surface-base: var(--smoke-light-alpha-2);
--surface-base: var(--smoke-light-3);
--base: var(--smoke-light-alpha-2);
--surface-base-hover: #0500000f;
--surface-base-active: var(--smoke-light-alpha-3);
@ -317,7 +317,7 @@
--background-weak: #1b1818;
--background-strong: #151313;
--background-stronger: #191515;
--surface-base: var(--smoke-dark-alpha-2);
--surface-base: var(--smoke-dark-3);
--base: var(--smoke-dark-alpha-2);
--surface-base-hover: #e0b7b716;
--surface-base-active: var(--smoke-dark-alpha-3);