/*! * * Example Project - Video Studio.js * Copyright (c) 2020 Tobias Briones . All rights reserved. * Licensed under the MIT License. * * Source code published at https://github.com/TobiasBriones/example.programming.video-processing.web.video-studio-js. * */footer{padding:16px 32px;border-top:1px solid rgba(0,0,0,.1)}footer>div>p{margin:8px;text-align:center}footer>div>p>i{color:#737373}footer .gh{display:flex;justify-content:flex-end}#video-input{padding:32px;margin:32px 0}#video-input.collapsed .video-chooser,#video-input.collapsed .video-drag-and-drop{display:none}#video-input.expanded .video-chooser,#video-input.expanded .video-drag-and-drop{display:block}#video-input.collapsed>.expand-less{display:none}#video-input.collapsed>.expand-more{display:block}#video-input.expanded>.expand-less{display:block}#video-input.expanded>.expand-more{display:none}#video-input>.expand-less,#video-input>.expand-more{position:absolute;right:0;bottom:0;background-color:rgba(0,0,0,.05);border:1px solid #212121;border-radius:50%;font-size:48px;color:#212121;transition:background-color .2s;cursor:pointer}#video-input>.expand-less:hover,#video-input>.expand-more:hover{background-color:rgba(0,0,0,.1)}#video-input>p{font-weight:700;text-align:center}#video-input>.video-chooser{padding:16px 0}#video-input.highlight .video-drag-and-drop{border:2px solid brown}#video-input>.video-chooser>.input{display:flex}#video-chooser-input{position:absolute;width:.1px;height:.1px;overflow:hidden;z-index:-1;opacity:0}#video-chooser-input+label{display:inline-block;padding:16px;margin:auto;background-color:#757575;border-radius:8px;font-size:1.25em;font-weight:700;color:#fff;transition:all .2s;cursor:pointer}#video-chooser-input+label:hover,#video-chooser-input:focus+label{background-color:var(--accent-color)}#video-input>.video-drag-and-drop{width:100%;height:200px;border:1px solid rgba(0,0,0,.15)}#video-input>.video-drag-and-drop>span.material-icons{position:absolute;top:40%;left:50%;font-size:600%;color:#757575;transform:translate(-50%,-50%)}#video-input>.video-drag-and-drop>p{position:absolute;width:100%;padding:0 8px;bottom:16px;left:50%;text-align:center;transform:translate(-50%,-50%)}#player{display:flex;width:100%;min-height:400px;max-height:60vh;overflow:auto}#video-player{width:100%;margin:auto}#tools{display:grid;margin:16px 32px;grid-template-columns:auto}#tools>div{margin:16px 32px}#tools>div>p{margin-bottom:8px;font-weight:700;text-align:center}#tools .box{padding-bottom:32px;margin-top:16px;margin-bottom:16px}#tools>div>span.material-icons{padding:8px;float:right;font-size:24px;color:#455a64;cursor:pointer}#tools>div input[type=number],#tools>div input[type=text]{display:block;width:100%;margin-bottom:24px}#tools>div input[type=radio]{margin-bottom:24px}#tools .save-screenshot-pane{display:block}#tools .save-screenshot-pane>.buttons{display:block}#tools .save-screenshot-pane>.buttons>button{display:block;width:100%;margin:16px 0}#tools .save-screenshot-pane>canvas{display:block;width:100%;background-color:#d0d0d0}#capture-screenshot{width:96px!important;height:96px;margin:auto!important;background-color:var(--accent-color);border-radius:50%;font-weight:700}#capture-screenshot:focus{outline:none}#capture-screenshot:active{border:2px solid #212121}@media (min-width:600px){footer{padding:32px 128px}#content{padding:32px 5%}#video-input>.video-chooser{padding:32px 0}#video-input>.video-drag-and-drop{width:100%;height:250px;padding:64px;border:1px solid rgba(0,0,0,.15)}#video-input>.video-drag-and-drop>p{padding:0 16px;bottom:16px}#tools{margin:16px;grid-template-columns:auto auto}#tools>.screenshot{grid-column-start:1;grid-column-end:3}#tools .save-screenshot-pane{display:grid;grid-template-columns:30fr 70fr}#tools .save-screenshot-pane>.buttons{margin-right:32px}#tools .save-screenshot-pane>canvas{min-height:240px}}@media (min-width:1024px){footer{padding:32px 240px}#content{padding:32px}#wrapper-1{display:flex}#video-input{width:30%;padding:0 16px}#video-input>.expand-less,#video-input>.expand-more{top:0;right:auto;bottom:auto;left:0;transform:rotate(-90deg)}#video-input.collapsed{width:10%;padding:1%}#video-input.collapsed p{transform:translateY(96px)}#video-input.expanded p{display:block}#player{width:70%}#player.wider{width:90%}#tools{margin:32px 64px;grid-template-columns:auto auto auto auto}}@media (min-width:1920px){#content{padding:64px}#video-input{width:25%;padding:0 64px}#player{width:75%}#tools{margin:32px 256px}}@media (min-width:2160px){#content{padding:128px}#video-input{width:20%}#player{width:80%}}:root{--accent-color:#d32f2f}*{position:relative;box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif;user-select:none}body,html{min-width:360px}a{font-weight:700;text-decoration:none;color:var(--accent-color)}button{padding:16px;border:1px solid rgba(0,0,0,.1);border-radius:4px;text-transform:uppercase;cursor:pointer}input[type=number],input[type=radio],input[type=text]{outline:none}input[type=number],input[type=text]{padding:8px;border:1px solid rgba(0,0,0,.15);border-radius:6px;transition:border .1s}input[type=number]:focus,input[type=text]:focus{border:1px solid rgba(0,0,0,.5)}input[type=range]{width:100%;height:16px;opacity:.8;background:#d0d0d0;transition:opacity .2s;cursor:pointer;outline:none;-webkit-appearance:none;-moz-appearance:none}input[type=range]:hover{opacity:1}input[type=range]::-webkit-slider-thumb{width:24px;height:24px;background:var(--accent-color);border-radius:25%;cursor:pointer;-webkit-appearance:none;appearance:none}input[type=range]::-moz-range-thumb{width:25px;height:25px;background:#4caf50;cursor:pointer}.gone{display:none}#content{padding:16px}@media (min-width:600px){#content{padding:32px 5%}}@media (min-width:1024px){#content{padding:32px}}@media (min-width:1920px){#content{padding:64px}}@media (min-width:2160px){#content{padding:128px}}