diff options
Diffstat (limited to 'packages/meshbay-hub/src/meshbay_hub/static/style.css')
| -rw-r--r-- | packages/meshbay-hub/src/meshbay_hub/static/style.css | 132 |
1 files changed, 119 insertions, 13 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css index fe01cd6..cb8cd44 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/style.css +++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css @@ -3038,20 +3038,85 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; } padding: 16px 20px; overflow-y: auto; } +/* The synopsis, and why it is not a -webkit-line-clamp. + Three lines, the third ending in "… Read more" rather than at the right + margin: line-clamp only ever puts its ellipsis at the end of the last line, + and cannot leave room for anything after it. A float can — .video-detail- + overview.clamped::before is a zero-width float two lines tall, so the + toggle floated after it (clear: right) lands on line three and shortens + that line box alone. The toggle is written before the text in video-app.js + for the same reason: a float only pushes the line boxes that follow it. + `.reserved` pins the same three lines from below for a multi-season show, + so the height is a constant and not a range: min and max are the same + number on purpose. A season whose synopsis runs two lines and one whose + synopsis runs twelve must put the season menu, and every episode under it, + at exactly the same place — anything less and the thing just clicked is no + longer under the pointer. Three lines is what makes that constant cheap: + at five, a short synopsis sat over three blank lines. + +2px absorbs the sub-pixel line height that otherwise clips the last + line's descenders. */ +.video-overview-wrap { --ov-lh: 1.5em; --ov-lines: 3; } .video-detail-overview { font-size: 0.9em; color: var(--text); line-height: 1.5; } +.video-detail-overview.clamped { + overflow: hidden; + max-height: calc(var(--ov-lh) * var(--ov-lines) + 2px); +} +/* The same number as the max-height above, deliberately: clamped from above + and pinned from below is a constant, and a constant is the whole point. */ +.video-detail-overview.clamped.reserved { + min-height: calc(var(--ov-lh) * var(--ov-lines) + 2px); +} +/* Only when there is actually something to expand. `overflow: hidden` above + makes this a block formatting context, so it *contains* the float and grows + to its height — a one-line movie synopsis with the spacer always present + would stand two lines tall for no reason. `.has-more` is set by the measure + that decides to render the toggle at all. */ +.video-detail-overview.clamped.has-more::before { + content: ''; + float: right; + width: 0; + height: calc(var(--ov-lh) * (var(--ov-lines) - 1)); +} +.video-overview-toggle { + float: right; + clear: right; + padding: 0 0 0 6px; + border: none; + background: none; + color: var(--accent); + font: inherit; + cursor: pointer; +} +.video-overview-toggle:hover { text-decoration: underline; } +.video-overview-toggle.standalone { + float: none; + display: inline-block; + padding: 0; + margin-top: 4px; + font-size: 0.9em; +} .video-detail-facts { font-size: 0.82em; color: var(--text-dim); margin-top: 6px; } +/* Two lines, ellipsised at the end of the second. A ten-name cast and a + three-name one must not give the modal two different heights — and unlike + the synopsis there is nothing to expand to, so the plain line clamp is the + right tool here. */ .video-detail-cast { font-size: 0.82em; color: var(--text-secondary); margin-top: 6px; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + line-clamp: 2; + overflow: hidden; } .video-detail-source { font-size: 0.78em; @@ -3169,25 +3234,66 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; } .video-flat-season { padding-left: 24px; margin-bottom: 8px; } .video-flat-season .video-season-header { margin: 6px 0 4px; } -/* Season tab bar — docs/mediacenter.md §5.4's per-season overview view */ -.video-season-tabs { +/* Season picker — docs/mediacenter.md §5.4's per-season overview view. + Was a row of pills with `overflow-x: auto`: a show with a dozen seasons hid + most of them behind a horizontal scrollbar, worst on the narrow screens that + can least afford it. One trigger and a menu is one row high whatever the + season count, so nothing below it moves either. The menu is absolutely + positioned inside .video-detail-body, which scrolls — the picker sits near + the top of that body, so the panel opens over the episode list rather than + past the bottom of the scroll area. */ +.video-season-menu { position: relative; margin: 10px 0; } +.video-season-trigger { display: flex; - gap: 4px; - margin: 10px 0; - overflow-x: auto; -} -.video-season-tab { - padding: 5px 12px; + align-items: center; + justify-content: space-between; + gap: 8px; + width: 100%; + padding: 8px 12px; border: 1px solid var(--border); - border-radius: 999px; + border-radius: 8px; background: var(--bg-surface); - color: var(--text-dim); + color: var(--text); font-size: 0.85em; - white-space: nowrap; + cursor: pointer; + text-align: left; +} +.video-season-trigger:hover { border-color: var(--accent); color: var(--accent); } +.video-season-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.video-season-caret { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-dim); } + +.video-season-options { + position: absolute; + left: 0; right: 0; top: calc(100% + 4px); + z-index: 40; + background: var(--bg-surface); + border: 1px solid var(--border); + border-radius: 8px; + box-shadow: var(--shadow-lg); + padding: 4px 0; + /* Twenty-five seasons will not fit a phone: the panel scrolls, the modal + behind it does not have to. */ + max-height: min(320px, 50vh); + overflow-y: auto; +} +.video-season-option { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + width: 100%; + padding: 8px 14px; + border: none; + border-radius: 0; + background: none; + color: var(--text); + font-size: 0.85em; + text-align: left; cursor: pointer; } -.video-season-tab:hover { border-color: var(--accent); color: var(--text); } -.video-season-tab.active { border-color: var(--accent); color: var(--accent); background: var(--bg-raised); } +.video-season-option:hover { background: var(--bg-raised); } +.video-season-option.active { color: var(--accent); } +.video-season-option-count { color: var(--text-dim); font-size: 0.85em; flex-shrink: 0; } /* No own margin/size: it sits in .video-admin-actions next to the plain .admin-btn "Re-match", and any extra here made the two different sizes. */ |