/* --bg is the app's own ground, and --bg-rgb is the same colour in the form rgba() needs. They have to be kept equal by hand; anything that wants the ground at less than full strength takes the second one, so a change of scheme moves both. */ :root { color-scheme: dark; --cw: 320px; --gap: 12px; --edge: 14px; /* A lighter blue than the one this started in, and the app clears its broadcast to the same value (LiveKitStreamer.CaptureBackground) so the picture and the space around it are one surface. The two earlier grounds are kept below, a class each. */ --bg: #7da3ca; --bg-rgb: 125, 163, 202; --card: transparent; --card-narrow: rgba(var(--bg-rgb), .78); --line: rgba(158, 202, 255, .26); --panel-ink: #d8dde3; --panel-ink-2: #c3ccd4; --panel-ink-3: #a9b8c8; } /* THE LIGHT SET, kept and not deleted. Add `wall` to and the page becomes the directory's ground: the wall behind the shelf, which is also what the app can clear its broadcast to (LiveKitStreamer.CaptureBackgroundWall). BOTH SIDES HAVE TO MOVE TOGETHER -- a taupe page around a blue picture, or the reverse, is worse than either on its own. Everything this needs is here and in the block at the end of this file; nothing above them was rewritten, so the dark set is still the page as it was drawn. */ /* The blue this page was drawn in, kept. */ :root.blue { --bg: #59738c; --bg-rgb: 89, 115, 140; } :root.wall { --bg: #ddd0be; --bg-rgb: 221, 208, 190; --card-narrow: rgba(255, 255, 255, .9); --line: rgba(169, 143, 112, .5); --panel-ink: #2e2822; --panel-ink-2: #6d6155; --panel-ink-3: #6b5f4d; } /* The old dark set is not deleted, it is one commit back: every rule below still says what it said, and the block at the end of this file is what turns it over for a light ground. */ * { box-sizing: border-box; } /* pan but not pinch. The layout is fixed and the picture is the point, so the browser's own pinch-zoom only ever gets in the way -- aim at the avatar while somebody else holds the turn and you would zoom the DOCUMENT and end up looking at a corner of it. Panning is deliberately still allowed: the comment list and the two side panels scroll. Double-tap zoom goes with it, which this value also excludes. */ /* overscroll-behavior is the declarative half of "the page itself never moves": it turns off pull-to-refresh and the rubber-band at the edges. The touchmove handler in viewer.js is the other half, for the browsers and versions that do not honour this one. Neither is enough alone. touch-action stays pan-x pan-y rather than becoming none, because touch-action INTERSECTS down the ancestor chain -- none here would take the comment list and the panels with it. */ html, body { margin: 0; height: 100%; background: var(--bg); color: #e8e8ea; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; touch-action: pan-x pan-y; overscroll-behavior: none; } /* And each inner scroller keeps its overscroll to itself, so reaching the end of the comment list does not hand the rest of the gesture to the page behind it. */ #chatList, #ctlAnim, #info, #caster, .nameTagBody #info { overscroll-behavior: contain; } #stage { position: fixed; top: 10%; bottom: 10%; left: 0; right: 0; display: grid; place-items: center; overflow: hidden; } /* Nothing over the picture is text, and a drag across it is a camera move. A trackpad reports a drag as a MOUSE drag, and the browser's answer to a mouse drag over something it may select is to select it -- so on an iPad with a trackpad the shot went blue and the orbit never started. Reported there, but it is every trackpad and every mouse. Scoped to the picture and its drag surface on purpose: the panels stay selectable, because a comment, an animation name, an avatar's name and a broadcaster's name are all worth copying. -webkit- alongside the standard property because iOS Safari is where this shows up, and it is not one of the places the unprefixed one can be relied on. #video is named rather than left to inheritance from #stage: user-drag does not inherit, and a press on a