master
Giò Diani 2024-11-01 22:55:38 +01:00
parent 5c44a28c6c
commit fe92ba58b3
6 changed files with 94 additions and 80 deletions

View File

@ -1 +1 @@
*,*:before,*:after{box-sizing:border-box}:root{--c1: #F2F2F2;--c2: #D9D9D9;--c3: #737373;--c4: #404040;--c5: #0D0D0D}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased;text-size-adjust:none}*{margin:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5;padding:1.5em;font-family:sans-serif;background:var(--c4);color:var(--c1)}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}h1,h2,h3,h4,button,input,label{line-height:1.1}fieldset{display:block;border:none;padding:0;margin:0}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}dl{display:grid;grid-template-areas:"title desc";gap:.5em 1em}dt{font-weight:600}.visually-hidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.tablist{height:100%;display:grid;grid-template:"tablist" "panel";grid-template-rows:2.5em 1fr}.controls{background:var(--c5)}.control{display:inline-block}.control label{display:inline-grid;justify-items:center;align-items:center;padding:.5em 1em;height:2.5em;color:var(--c1)}input[type=radio]:checked+label{background:var(--c3)}a:focus,input:focus,input[type=radio]:focus+label{outline:2px dotted;outline-offset:2px}input[type=radio]+label:hover{cursor:pointer;text-decoration:underline}.panel{background:var(--c3);padding:1em;height:calc(50vh - 4em);overflow-y:scroll}#tablist_panel_transcript_panel font{display:block;color:#fff!important}#transcript{padding:0;list-style:none}#transcript a{cursor:pointer}#transcript li{display:flex}#transcript li>div{margin-right:1em}.vjs-title-bar{display:none!important}header{position:fixed;top:0;left:0;width:100%;background:#000;z-index:99;height:2.5em;display:flex;align-items:center;padding:0 2em}header a{text-decoration:none}header a:before{content:"←";padding:0 .5em 0 0}main{width:100%;margin-top:1.5em;height:calc(100vh - 6.5em);display:grid;grid-template-areas:"video tabs" "timeline timeline";grid-template-columns:repeat(2,1fr);grid-template-rows:1fr 50%;gap:1em}#video{grid-area:video}#tabs{grid-area:tabs}#timeline{grid-area:timeline;position:relative;background:var(--c3)}#timeline-bar{height:2em;margin-left:20em;background:#aaa;display:flex;justify-content:space-between}#timeline-bar>span{display:inline-flex;align-items:center}#timeline-bar-ctrl{display:inline-block;background:#000;width:.1875em;height:100%;position:absolute}#timeline-bar-ctrl:before{content:"";width:2em;height:2em;border-radius:50%;transform:translate3d(-50%,0,0);background:#000;position:absolute}#tracks{height:calc(100% - 2em);overflow-y:scroll}.track{width:100%;min-height:15em;display:grid;grid-template:100% / 20em 1fr}.track+.track{border-top:1px solid var(--c1)}.track-ctrl{padding:1em;background:var(--c3)}.track-viz{background:var(--c3)}ul.segments{padding:0;grid-template:1fr / repeat(4,1fr);list-style:none;display:grid;grid-template:;height:100%}ul.segments li{background:#ccc;color:#000;border-left:.0625em solid #fff;padding:1em} *,*:before,*:after{box-sizing:border-box}:root{--c1: #F2F2F2;--c2: #D9D9D9;--c3: #737373;--c4: #404040;--c5: #0D0D0D}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased;text-size-adjust:none}*{margin:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5;padding:1.5em;font-family:sans-serif;background:var(--c4);color:var(--c1)}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}h1,h2,h3,h4,button,input,label{line-height:1.1}fieldset{display:block;border:none;padding:0;margin:0}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}dl{display:grid;grid-template-areas:"title desc";gap:.5em 1em}dt{font-weight:600}.visually-hidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.tablist{height:100%;display:grid;grid-template:"tablist" "panel";grid-template-rows:2.5em 1fr}.controls{background:var(--c5)}.control{display:inline-block}.control label{display:inline-grid;justify-items:center;align-items:center;padding:.5em 1em;height:2.5em;color:var(--c1)}input[type=radio]:checked+label{background:var(--c3)}a:focus,input:focus,input[type=radio]:focus+label{outline:2px dotted;outline-offset:2px}input[type=radio]+label:hover{cursor:pointer;text-decoration:underline}.panel{background:var(--c3);padding:1em;height:calc(50vh - 4em);overflow-y:scroll}#tablist_panel_transcript_panel font{display:block;color:#fff!important}#transcript{padding:0;list-style:none}#transcript a{cursor:pointer}#transcript li{display:flex}#transcript li>div{margin-right:1em}.vjs-title-bar{display:none!important}header{position:fixed;top:0;left:0;width:100%;background:#000;z-index:99;height:2.5em;display:flex;align-items:center;padding:0 2em}header a{text-decoration:none}header a:before{content:"←";padding:0 .5em 0 0}main{width:100%;margin-top:1.5em;height:calc(100vh - 6.5em);display:grid;grid-template-areas:"video tabs" "timeline timeline";grid-template-columns:repeat(2,1fr);grid-template-rows:1fr 50%;gap:1em}#video{grid-area:video}#tabs{grid-area:tabs}#timeline{grid-area:timeline;position:relative;background:var(--c3)}#timeline-bar{height:2em;margin-left:20em;background:#aaa;display:flex;justify-content:space-between}#timeline-bar>span{display:inline-flex;align-items:center}#timeline-bar-ctrl{display:inline-block;background:#000;width:.1875em;height:100%;position:absolute;z-index:999}#timeline-bar-ctrl:before{content:"";width:2em;height:2em;border-radius:50%;transform:translate3d(calc(-50% + .09375em),0,0);position:absolute;background:#000}#tracks{height:calc(100% - 2em);overflow-y:scroll}.track{width:100%;min-height:15em;display:grid;grid-template:100% / 20em 1fr}.track+.track{border-top:1px solid var(--c1)}.track-ctrl{padding:1em;background:var(--c3)}.track-viz{background:var(--c3)}ul.segments{padding:0;grid-template:1fr / repeat(4,1fr);list-style:none;display:grid;grid-template:;height:100%}ul.segments li{background:#ccc;color:#000;border-left:.0625em solid #fff;padding:1em}

View File

@ -5,12 +5,12 @@
"isEntry": true "isEntry": true
}, },
"resources/css/app.css": { "resources/css/app.css": {
"file": "assets/app-iI2T_Ixf.css", "file": "assets/app-CqlZMDsA.css",
"src": "resources/css/app.css", "src": "resources/css/app.css",
"isEntry": true "isEntry": true
}, },
"resources/js/app.js": { "resources/js/app.js": {
"file": "assets/app-NJQOXLgd.js", "file": "assets/app-XNzAkLUN.js",
"name": "app", "name": "app",
"src": "resources/js/app.js", "src": "resources/js/app.js",
"isEntry": true "isEntry": true

View File

@ -260,16 +260,17 @@ main {
width: .1875em; width: .1875em;
height: 100%; height: 100%;
position: absolute; position: absolute;
z-index: 999;
} }
#timeline-bar-ctrl::before{ #timeline-bar-ctrl::before{
content: ''; content: "";
width: 2em; width: 2em;
height: 2em; height: 2em;
border-radius: 50%; border-radius: 50%;
transform: translate3d(-50%, 0px, 0px); transform: translate3d(calc(-50% + .09375em), 0, 0);
background: #000;
position: absolute; position: absolute;
background: #000;
} }
#tracks{ #tracks{

File diff suppressed because one or more lines are too long

View File

@ -57,7 +57,7 @@
@foreach($subtitles['cues'] as $cue) @foreach($subtitles['cues'] as $cue)
<li> <li>
<div> <div>
<a title="Zur Zeitpunkt {{ $cue['start']}} springen." data-start="{{ $cue['start']}}">{{ gmdate('H:i:s', $cue['start'])}}</a> <a title="Zu Zeitpunkt {{ $cue['start']}} springen." data-start="{{ $cue['start']}}">{{ gmdate('H:i:s', $cue['start'])}}</a>
</div> </div>
<div> <div>
{!! $cue['text'] !!} {!! $cue['text'] !!}
@ -112,13 +112,6 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="track">
<div class="track-ctrl">
<h2>Anzahl Worte</h2>
<p></p>
</div>
<div class="track-viz"></div>
</div>
</div> </div>
</div> </div>
</main> </main>