style(next): recent changes list: use sticky headers

TriliumNext · Dec 7, 2024 · c5c991f · c5c991f
1 parent bf1c834
commit c5c991f
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css
@@ -1293,6 +1293,14 @@ body .calendar-dropdown-widget .calendar-body a:hover {
  * Recent changes list
  */
 
+.recent-changes-dialog .modal-body {
+    padding: 0;
+}
+
+.recent-changes-content {
+    margin: var(--bs-modal-padding);
+}
+
 .recent-changes-content small {
     color: var(--muted-text-color);
 }
@@ -1303,10 +1311,14 @@ body .calendar-dropdown-widget .calendar-body a:hover {
 
 /* Date headings */
 .recent-changes-content > div > b {
+    position: sticky;
     display: block;
+    top: 0;
+    background: var(--modal-background-color);
     padding: 10px 0;
     font-size: 1.25em;
     font-weight: 300;
+    z-index: 10;
 }
 
 .recent-changes-content ul {
@@ -1318,11 +1330,13 @@ body .calendar-dropdown-widget .calendar-body a:hover {
 /* Timeline items */
 .recent-changes-content ul li,
 .recent-changes-content > div > b {
-    position: relative;
     margin: 0;
     padding-left: var(--timeline-right-gap);
 }
 
+.recent-changes-content ul li {
+    position: relative;
+}
 
 /* Timeline connector */
 .recent-changes-content ul li::before,