...
parent
5c44a28c6c
commit
fe92ba58b3
|
@ -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}
|
File diff suppressed because one or more lines are too long
|
@ -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
|
||||||
|
|
|
@ -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
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue