openvibers/openvibe.mediahub Commits
Watch pages: the player's glow is no longer cut beside it, the navbar is solid over it at the top, the full network footer sits at the bottom of the window (#144)
Changes
@@@ -96,6 +96,18 @@.ovv-main, .ovv-side { min-width: 0; }.ovv-side { display: grid; gap: 18px; }.ovv-player-wrap { position: relative; border-radius: 14px; background: #000; border: 1px solid var(--ovv-line); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }++/* The page around the watch pages (owner, 2026-10-27, on a screenshot: the glow "gets clipped on the left side", the++ navbar's links sit on the glow, and the footer floated mid-screen):++ - The glow spills out to the window's edges: the page clips sideways at the window, not at the grid (which cut it++ beside the player), so it still never makes the page scroll sideways.++ - At the top of the page the navbar is the page's own colour instead of see-through, so its links never sit on the++ glow, whatever colour the picture is; the glow also starts a little below the player's top edge.++ - The footer sits at the bottom of the window on a short page (the body is a column and the page grows). */++html:has(main.ovv-page) { overflow-x: clip; }++body:has(> main.ovv-page) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }++body:has(> main.ovv-page) > main.ovv-page { flex: 1 0 auto; width: 100%; box-sizing: border-box; }++body:has(> main.ovv-page) .openvibe-navbar.ovnav-top { background-color: var(--bg-primary, #0b1120); }++.ovv-player-wrap > .ov-player-ambient { top: 24px; }/* The player clips itself to the corners, so the wrapper can let the ambient glow (shared player.js) spill around it. */.ovv-player-wrap > .ov-player, .ovv-player-wrap > video { border-radius: inherit; overflow: hidden; }.ovv-player-wrap.ov-player-host { box-shadow: none; border-color: transparent; }@@@ -308,7 +320,7 @@ a.ovv-channel-name:hover { text-decoration: underline; }then up next and the stream's clips. One column on a narrower screen, in the order people use them: the player andits actions, the tabs, up next, About, clips, comments (.ovv-col becomes display: contents and the pieces take anorder). Server-rendered and complete without JavaScript: the tabs then list one after another. */--.ovv-watch { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px 28px; align-items: start; overflow-x: clip; } /* the player's glow and a closed menu's box never widen the page */++.ovv-watch { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px 28px; align-items: start; }.ovv-watch--clip:not(:has(.ovv-col--side > *)) { grid-template-columns: minmax(0, 960px); justify-content: center; }.ovv-col { display: grid; gap: 18px; min-width: 0; align-content: start; }.ovv-col > .ovv-panel, .ovv-col > .ovv-about { margin-top: 0; }@@@ -86,7 +86,9 @@ ${render(o.body)}logoutUrl: '/auth/logout?next={path}',silentLogin: `${String(o.baseUrl).replace(/\/+$/, '')}/auth/login?silent=1&next={url}`,},-- footer: { service: 'media-hub', variant: 'compact', brandName: SITE_NAME, updates: '/updates' },++ // The full footer (the network's sites, its legal links), as every browse page has (owner, 2026-10-27: "where are++ // all those cool SEO links that … interconnect all our platforms"); the quiet line only where someone is mid-task.++ footer: { service: 'media-hub', variant: /^\/(upload|record)(\/|$)/.test(String(o.path || '')) ? 'compact' : 'full', brandName: SITE_NAME, updates: '/updates' },head,body,});
@@ -96,6 +96,18 @@
@@ -96,6 +96,18 @@
.ovv-main, .ovv-side { min-width: 0; }
.ovv-main, .ovv-side { min-width: 0; }
.ovv-side { display: grid; gap: 18px; }
.ovv-side { display: grid; gap: 18px; }
.ovv-player-wrap { position: relative; border-radius: 14px; background: #000; border: 1px solid var(--ovv-line); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.ovv-player-wrap { position: relative; border-radius: 14px; background: #000; border: 1px solid var(--ovv-line); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
+/* The page around the watch pages (owner, 2026-10-27, on a screenshot: the glow "gets clipped on the left side", the
+ navbar's links sit on the glow, and the footer floated mid-screen):
+ - The glow spills out to the window's edges: the page clips sideways at the window, not at the grid (which cut it
+ beside the player), so it still never makes the page scroll sideways.
+ - At the top of the page the navbar is the page's own colour instead of see-through, so its links never sit on the
+ glow, whatever colour the picture is; the glow also starts a little below the player's top edge.
+ - The footer sits at the bottom of the window on a short page (the body is a column and the page grows). */
+html:has(main.ovv-page) { overflow-x: clip; }
+body:has(> main.ovv-page) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
+body:has(> main.ovv-page) > main.ovv-page { flex: 1 0 auto; width: 100%; box-sizing: border-box; }
+body:has(> main.ovv-page) .openvibe-navbar.ovnav-top { background-color: var(--bg-primary, #0b1120); }
+.ovv-player-wrap > .ov-player-ambient { top: 24px; }
/* The player clips itself to the corners, so the wrapper can let the ambient glow (shared player.js) spill around it. */
/* The player clips itself to the corners, so the wrapper can let the ambient glow (shared player.js) spill around it. */
.ovv-player-wrap > .ov-player, .ovv-player-wrap > video { border-radius: inherit; overflow: hidden; }
.ovv-player-wrap > .ov-player, .ovv-player-wrap > video { border-radius: inherit; overflow: hidden; }
.ovv-player-wrap.ov-player-host { box-shadow: none; border-color: transparent; }
.ovv-player-wrap.ov-player-host { box-shadow: none; border-color: transparent; }
@@ -308,7 +320,7 @@ a.ovv-channel-name:hover { text-decoration: underline; }
@@ -308,7 +320,7 @@ a.ovv-channel-name:hover { text-decoration: underline; }
then up next and the stream's clips. One column on a narrower screen, in the order people use them: the player and
then up next and the stream's clips. One column on a narrower screen, in the order people use them: the player and
its actions, the tabs, up next, About, clips, comments (.ovv-col becomes display: contents and the pieces take an
its actions, the tabs, up next, About, clips, comments (.ovv-col becomes display: contents and the pieces take an
order). Server-rendered and complete without JavaScript: the tabs then list one after another. */
order). Server-rendered and complete without JavaScript: the tabs then list one after another. */
-.ovv-watch { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px 28px; align-items: start; overflow-x: clip; } /* the player's glow and a closed menu's box never widen the page */
+.ovv-watch { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px 28px; align-items: start; }
.ovv-watch--clip:not(:has(.ovv-col--side > *)) { grid-template-columns: minmax(0, 960px); justify-content: center; }
.ovv-watch--clip:not(:has(.ovv-col--side > *)) { grid-template-columns: minmax(0, 960px); justify-content: center; }
.ovv-col { display: grid; gap: 18px; min-width: 0; align-content: start; }
.ovv-col { display: grid; gap: 18px; min-width: 0; align-content: start; }
.ovv-col > .ovv-panel, .ovv-col > .ovv-about { margin-top: 0; }
.ovv-col > .ovv-panel, .ovv-col > .ovv-about { margin-top: 0; }
@@ -86,7 +86,9 @@ ${render(o.body)}
@@ -86,7 +86,9 @@ ${render(o.body)}
logoutUrl: '/auth/logout?next={path}',
logoutUrl: '/auth/logout?next={path}',
silentLogin: `${String(o.baseUrl).replace(/\/+$/, '')}/auth/login?silent=1&next={url}`,
silentLogin: `${String(o.baseUrl).replace(/\/+$/, '')}/auth/login?silent=1&next={url}`,
},
},
- footer: { service: 'media-hub', variant: 'compact', brandName: SITE_NAME, updates: '/updates' },
+ // The full footer (the network's sites, its legal links), as every browse page has (owner, 2026-10-27: "where are
+ // all those cool SEO links that … interconnect all our platforms"); the quiet line only where someone is mid-task.
+ footer: { service: 'media-hub', variant: /^\/(upload|record)(\/|$)/.test(String(o.path || '')) ? 'compact' : 'full', brandName: SITE_NAME, updates: '/updates' },
head,
head,
body,
body,
});
});