125 lines
2.8 KiB
SCSS
125 lines
2.8 KiB
SCSS
|
div#videoOsdPage {
|
||
|
|
> .videoOsdBottom > .osdControls > .buttons .btnTranscript {
|
||
|
|
&.enabled {
|
||
|
|
color: rgba(var(--accent), 0.8) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.osdTranscript {
|
||
|
|
position: absolute;
|
||
|
|
right: 3em;
|
||
|
|
bottom: 0;
|
||
|
|
|
||
|
|
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;
|
||
|
|
|
||
|
|
&.enabled {
|
||
|
|
opacity: 1;
|
||
|
|
pointer-events: all;
|
||
|
|
}
|
||
|
|
|
||
|
|
.transcriptLogWrap {
|
||
|
|
max-width: min(40vw, 30em);
|
||
|
|
max-height: min(50vh, 30em);
|
||
|
|
overflow-y: scroll;
|
||
|
|
overflow-x: hidden;
|
||
|
|
|
||
|
|
scroll-snap-type: y proximity;
|
||
|
|
}
|
||
|
|
|
||
|
|
.transcriptLog {
|
||
|
|
border-collapse: collapse;
|
||
|
|
border-spacing: 0;
|
||
|
|
line-height: 1.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.line {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
|
||
|
|
scroll-snap-align: end;
|
||
|
|
|
||
|
|
body:not([input-eaten="true"]) & {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::before, &::after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
z-index: -1;
|
||
|
|
|
||
|
|
transition: background-color 0.1s ease-in-out, opacity 0.1s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
right: 0;
|
||
|
|
|
||
|
|
background-color: var(--bg);
|
||
|
|
opacity: var(--bg-opacity);
|
||
|
|
}
|
||
|
|
|
||
|
|
&::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;
|
||
|
|
}
|
||
|
|
|
||
|
|
--bg: #000000;
|
||
|
|
--bg-opacity: 0.25;
|
||
|
|
--bar: rgb(var(--accent, 0x00, 0xad, 0xee));
|
||
|
|
--bar-opacity: 0;
|
||
|
|
|
||
|
|
&:nth-child(2n) {
|
||
|
|
--bg: #888888;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
--bg: var(--bar);
|
||
|
|
--bg-opacity: 0.5;
|
||
|
|
--bar-opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.time {
|
||
|
|
display: inline-block;
|
||
|
|
margin: 0.75em 1em;
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text {
|
||
|
|
overflow-wrap: anywhere;
|
||
|
|
padding: 0.75em;
|
||
|
|
}
|
||
|
|
|
||
|
|
&[data-positive="false"] {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|