Add UI for transcripts for JS-disabled users

This commit adds a server-side UI template that renders a transcript
element. This is used to render transcripts for users without JS.
This commit is contained in:
syeopite
2024-06-12 12:42:18 -07:00
parent 01b21d9d52
commit 5ba6baea19
4 changed files with 71 additions and 1 deletions

View File

@@ -832,4 +832,46 @@ h1, h2, h3, h4, h5, p,
.description-show-transcript-widget > * {
margin: 0;
}
.video-transcript {
display: flex;
flex-direction: column;
gap: 25px;
height: 30em;
padding: 10px;
border: 1px solid #a0a0a0;
border-radius: 10px;
}
.video-transcript header {
padding-bottom: 5px;
border-bottom: 1px solid #a0a0a0;
}
.video-transcript > #lines {
display: flex;
flex-direction: column;
overflow: scroll;
}
.transcript-line, .transcript-title-line {
display: flex;
align-items: center;
padding: 20px 10px;
gap: 10px;
border-radius: 10px;
}
.transcript-line > .length {
padding: 0px 5px;
background: #363636 !important;
}
.transcript-line > p, .video-transcript > header > h3, .transcript-title-line > h4 {
margin: 0;
}
.transcript-line:hover, .selected.transcript-line, .transcript-title-line:hover, .selected.transcript-title-line {
background: #cacaca;
}