88 lines
2.3 KiB
CSS
88 lines
2.3 KiB
CSS
|
div#videoOsdPage > .videoOsdBottom > .osdControls > .buttons .btnTranscript.enabled {
|
||
|
|
color: rgba(var(--accent), 0.8) !important;
|
||
|
|
}
|
||
|
|
div#videoOsdPage .osdTranscript {
|
||
|
|
position: absolute;
|
||
|
|
right: 3em;
|
||
|
|
bottom: 0;
|
||
|
|
-webkit-backdrop-filter: blur(16px);
|
||
|
|
backdrop-filter: blur(16px);
|
||
|
|
transition: opacity 0.1s ease-in-out;
|
||
|
|
opacity: 0;
|
||
|
|
pointer-events: none;
|
||
|
|
text-shadow: 0 0 1em black, 0 0 1em black, 0 0 0.5em black, 0 0 0.5em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 3px black, 0 0 3px black, 0 0 2px black, 0 0 2px black;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
div#videoOsdPage .osdTranscript.enabled {
|
||
|
|
opacity: 1;
|
||
|
|
pointer-events: all;
|
||
|
|
}
|
||
|
|
div#videoOsdPage .osdTranscript .transcriptLogWrap {
|
||
|
|
max-width: min(40vw, 30em);
|
||
|
|
max-height: min(50vh, 30em);
|
||
|
|
overflow-y: scroll;
|
||
|
|
overflow-x: hidden;
|
||
|
|
scroll-snap-type: y proximity;
|
||
|
|
}
|
||
|
|
div#videoOsdPage .osdTranscript .transcriptLog {
|
||
|
|
border-collapse: collapse;
|
||
|
|
border-spacing: 0;
|
||
|
|
line-height: 1.5em;
|
||
|
|
}
|
||
|
|
div#videoOsdPage .osdTranscript .line {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
scroll-snap-align: end;
|
||
|
|
--bg: #000000;
|
||
|
|
--bg-opacity: 0.25;
|
||
|
|
--bar: rgb(var(--accent, 0x00, 0xad, 0xee));
|
||
|
|
--bar-opacity: 0;
|
||
|
|
}
|
||
|
|
body:not([input-eaten=true]) div#videoOsdPage .osdTranscript .line {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
div#videoOsdPage .osdTranscript .line::before, div#videoOsdPage .osdTranscript .line::after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
z-index: -1;
|
||
|
|
transition: background-color 0.1s ease-in-out, opacity 0.1s ease-in-out;
|
||
|
|
}
|
||
|
|
div#videoOsdPage .osdTranscript .line::before {
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
right: 0;
|
||
|
|
background-color: var(--bg);
|
||
|
|
opacity: var(--bg-opacity);
|
||
|
|
}
|
||
|
|
div#videoOsdPage .osdTranscript .line::after {
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
width: 0.25em;
|
||
|
|
background-color: var(--bar);
|
||
|
|
opacity: var(--bar-opacity);
|
||
|
|
transform: scaleY(var(--progress));
|
||
|
|
transform-origin: 0 0;
|
||
|
|
}
|
||
|
|
div#videoOsdPage .osdTranscript .line:nth-child(2n) {
|
||
|
|
--bg: #888888;
|
||
|
|
}
|
||
|
|
div#videoOsdPage .osdTranscript .line.active {
|
||
|
|
--bg: var(--bar);
|
||
|
|
--bg-opacity: 0.5;
|
||
|
|
--bar-opacity: 1;
|
||
|
|
}
|
||
|
|
div#videoOsdPage .osdTranscript .line .time {
|
||
|
|
display: inline-block;
|
||
|
|
margin: 0.75em 1em;
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
div#videoOsdPage .osdTranscript .line .text {
|
||
|
|
overflow-wrap: anywhere;
|
||
|
|
padding: 0.75em;
|
||
|
|
}
|
||
|
|
div#videoOsdPage .osdTranscript .line[data-positive=false] {
|
||
|
|
display: none;
|
||
|
|
}/*# sourceMappingURL=Transcript.css.map */
|