proctolog 0.1.0

data/public/recording.css

@@ -0,0 +1,379 @@
+/* The player: a recording at its real proportions, its steps beside it, a
+   timeline that shows where each step starts and where each note is pinned.
+   The note cards and the note dialog are pull_request.css's. */
+
+/* The video wants the window's width and the window's height. */
+body {
+	max-width: none;
+	padding-top: 1.1rem;
+}
+
+.desk {
+	margin-bottom: 0.9rem;
+}
+
+.films-head {
+	margin-bottom: 1.4rem;
+}
+
+.film-head {
+	margin-bottom: 1rem;
+}
+
+.titling {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.1rem 1.1rem;
+	align-items: baseline;
+}
+
+.titling [data-fill] {
+	margin-left: auto;
+}
+
+.film-head h1 {
+	margin: 0.1rem 0 0;
+	font-size: 1.7rem;
+}
+
+.crumbs,
+.facts,
+.tally {
+	margin: 0;
+	color: var(--quiet);
+	font-size: 0.87rem;
+}
+
+.crumbs a {
+	color: var(--quiet);
+}
+
+.empty {
+	max-width: 62ch;
+	color: var(--quiet);
+}
+
+/* The index */
+
+.folder h2 {
+	margin: 1.9rem 0 0.5rem;
+	font: italic 1.05rem / 1.3 var(--serif);
+}
+
+.films {
+	margin: 0;
+	padding: 0;
+	border-top: 1px solid var(--rule);
+	list-style: none;
+}
+
+.films li {
+	padding: 0.7rem 0.2rem;
+	border-bottom: 1px solid var(--rule);
+}
+
+.films p {
+	margin: 0;
+}
+
+.films .title {
+	font: 1.15rem / 1.3 var(--serif);
+}
+
+/* The player */
+
+.film {
+	--room: calc(100vh - 17rem);
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) 21rem;
+	gap: 1.5rem 2rem;
+	align-items: start;
+}
+
+.film.wide {
+	--room: calc(100vh - 6rem);
+	grid-template-columns: minmax(0, 1fr);
+}
+
+/* The video, its controls and its timeline are as wide as the column allows
+   and no taller than the window leaves room for. */
+.stage {
+	width: min(100%, calc(var(--room) * var(--ratio)));
+	margin-inline: auto;
+}
+
+.screen {
+	position: relative;
+	aspect-ratio: var(--ratio);
+	border: 1px solid var(--rule);
+	border-radius: 6px;
+	background: var(--rest);
+	overflow: hidden;
+	cursor: pointer;
+	touch-action: none;
+	user-select: none;
+}
+
+.screen video {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+
+.regions {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+}
+
+.region {
+	position: absolute;
+	box-sizing: border-box;
+	border: 2px solid var(--kind, var(--pin));
+	background: color-mix(in srgb, var(--kind, var(--pin)) 14%, transparent);
+}
+
+.controls {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem 0.55rem;
+	align-items: center;
+	margin-top: 0.7rem;
+}
+
+.controls button {
+	padding: 0.3rem 0.7rem;
+	border: 1px solid var(--rule);
+	border-radius: 4px;
+	background: transparent;
+	color: var(--ink);
+	cursor: pointer;
+}
+
+.controls button:hover {
+	border-color: var(--chalk);
+}
+
+.controls button.primary {
+	min-width: 4.8rem;
+	border-color: transparent;
+	background: var(--chalk);
+	color: var(--paper);
+}
+
+.controls kbd {
+	margin-left: 0.3rem;
+	color: var(--quiet);
+}
+
+.controls .clock {
+	margin-left: auto;
+	color: var(--quiet);
+}
+
+.controls .note-here {
+	border-color: var(--pin);
+	color: var(--pin);
+}
+
+.timeline {
+	position: relative;
+	height: 2.7rem;
+	margin-top: 0.9rem;
+	border: 1px solid var(--rule);
+	border-radius: 4px;
+	background: var(--rest);
+	cursor: pointer;
+	touch-action: none;
+	user-select: none;
+}
+
+.segments {
+	position: absolute;
+	inset: 0;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	border-radius: 3px;
+	list-style: none;
+	pointer-events: none;
+}
+
+.segments li {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	box-sizing: border-box;
+	padding: 0.2rem 0.45rem 0;
+	border-left: 2px solid var(--chalk);
+	background: color-mix(in srgb, var(--chalk) 6%, transparent);
+	color: var(--quiet);
+	font-size: 0.74rem;
+	line-height: 1.25;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.segments li:nth-child(even) {
+	background: color-mix(in srgb, var(--chalk) 13%, transparent);
+}
+
+.segments li.here {
+	background: color-mix(in srgb, var(--chalk) 26%, transparent);
+	color: var(--ink);
+}
+
+.playhead {
+	position: absolute;
+	top: -5px;
+	bottom: -5px;
+	left: 0;
+	width: 2px;
+	margin-left: -1px;
+	background: var(--pin);
+	pointer-events: none;
+}
+
+.pin {
+	position: absolute;
+	bottom: -0.55rem;
+	width: 0.95rem;
+	height: 0.95rem;
+	margin-left: -0.475rem;
+	padding: 0;
+	border: 2px solid var(--paper);
+	border-radius: 50% 50% 50% 0;
+	background: var(--kind, var(--pin));
+	cursor: pointer;
+	rotate: -45deg;
+}
+
+.pin:hover,
+.pin.lit {
+	scale: 1.3;
+}
+
+.where {
+	min-height: 1.3em;
+	margin: 0.9rem 0 0;
+	color: var(--quiet);
+	font-size: 0.87rem;
+}
+
+/* Beside the video: the steps, then the notes. */
+
+.side h2 {
+	margin: 0 0 0.5rem;
+	font: italic 1.05rem / 1.3 var(--serif);
+}
+
+.steps {
+	margin: 0 0 1.8rem;
+	padding: 0;
+	border-left: 2px solid var(--rule);
+	list-style: none;
+}
+
+.steps button {
+	display: grid;
+	grid-template-columns: 1.7rem minmax(0, 1fr) auto;
+	gap: 0.4rem;
+	width: 100%;
+	padding: 0.45rem 0.7rem;
+	border: 0;
+	background: none;
+	color: inherit;
+	text-align: left;
+	cursor: pointer;
+}
+
+.steps button:hover {
+	background: color-mix(in srgb, var(--rest) 60%, transparent);
+}
+
+.steps li[aria-current] {
+	background: var(--rest);
+	box-shadow: inset 3px 0 var(--pin);
+}
+
+.steps .n,
+.steps time {
+	color: var(--quiet);
+}
+
+/* A step's still, under its name: the picture it opens on. Filling the
+   window keeps the names alone. */
+.steps .still {
+	grid-column: 2 / -1;
+	width: 100%;
+	max-width: 18rem;
+	height: auto;
+	border: 1px solid var(--rule);
+}
+
+.film.wide .steps .still {
+	display: none;
+}
+
+/* Against the round before: a line on what could be said, and each step that
+   changed or is new, its name lit and said so. */
+.side .round {
+	margin: 0 0 0.6rem;
+	color: var(--quiet);
+	font-size: 0.87rem;
+}
+
+.steps [data-change] .name {
+	color: var(--ink);
+	font-weight: 700;
+}
+
+.steps .change {
+	margin-left: 0.6ch;
+	font-size: 0.8rem;
+	letter-spacing: 0.07em;
+	text-transform: uppercase;
+}
+
+.cards .where {
+	margin: 0.2rem 0 0;
+}
+
+.cards .where button {
+	font-variant-numeric: tabular-nums;
+}
+
+.set-aside {
+	margin-top: 1rem;
+}
+
+@media (min-width: 1100px) {
+	.film:not(.wide) .side {
+		position: sticky;
+		top: 1rem;
+		max-height: calc(100vh - 2rem);
+		overflow-y: auto;
+	}
+}
+
+@media (max-width: 1099px) {
+	.film {
+		grid-template-columns: minmax(0, 1fr);
+	}
+}
+
+@media (max-width: 40rem) {
+	.film {
+		--room: calc(100vh - 16rem);
+	}
+
+	.controls kbd,
+	.titling [data-fill] {
+		display: none;
+	}
+
+	.controls .clock {
+		margin-left: 0;
+	}
+}