style(reader): widen main pane when showing videos; add reader-video styles

This commit is contained in:
Gigi
2025-10-13 17:29:21 +02:00
parent 146aa85e76
commit 2a2049e678
3 changed files with 8 additions and 0 deletions

View File

@@ -22,6 +22,7 @@
--highlights-width: 360px;
--highlights-collapsed-width: 56px;
--main-max-width: 900px;
--main-max-width-video: 1200px;
--main-horizontal-padding: 1rem;
/* Mobile breakpoints */

View File

@@ -1,5 +1,7 @@
/* Reader view */
.reader { background: #1a1a1a; border: 1px solid #333; border-radius: 8px; padding: 0.75rem; text-align: left; overflow: hidden; contain: layout style; }
/* Video container in reader */
.reader-video { margin: 0 0 1rem 0; border-radius: 8px; overflow: hidden; }
.reader.empty { color: #888; }
.loading-spinner { display: flex; align-items: center; gap: 0.5rem; color: #888; }
.loading-spinner svg { font-size: 1.2rem; }

View File

@@ -60,6 +60,11 @@
contain: layout style;
}
/* When the reader contains a video, allow a wider main pane */
.pane.main:has(.reader-video) {
max-width: var(--main-max-width-video);
}
/* Remove padding when sidebar is collapsed for zero gap */
.three-pane.sidebar-collapsed .pane.main { padding-left: 0; }
.three-pane.sidebar-collapsed.highlights-collapsed .pane.main { padding-left: 0; }