#timelapsejpeg .frames .frame{ height: 100px; } #timelapsejpeg .frames .frame img{ width: 100%; height: 100%; } #timelapsejpeg .frameStrip img{ position:absolute; width:100%; height:100%; top:0; left:0; } #timelapsejpeg .modal-body > .row, #timelapsejpeg .modal-body > .row > div { position:relative; height: 100%; } #timelapsejpeg .frameIcons .frame{ border-radius: 15px; overflow: hidden; } #timelapsejpeg .frameIcons .frame.selected{ border: 3px solid #ffc96b; } #timelapsejpeg .frameIcons > div:not(:last-child){ margin-bottom: 15px } #timelapsejpeg .frameIcons{ overflow-y: auto; overflow-x: hidden; } #timelapsejpeg .frameIcons .frame{ background-size: cover; width: 100%; height: 100px; position: relative; cursor: pointer; } #timelapsejpeg .frameIcons .frame .shade{ position: absolute; bottom: 0; left: 0; width: 100%; padding: 5px 10px; font-family: monospace; background: rgba(0,0,0,0.6); color: #fff } #timelapsejpeg .playBackView{ position:absolute; height: 50%; width:100%; top:0; left:0; background:#333; } #timelapsejpeg .playBackView img{ height:100%; } #timelapsejpeg .liveStreamView{ position:absolute; text-align: center; height: 50%; width:100%; top:50%; left:0; background:#333; } #timelapsejpeg .liveStreamView iframe{ width:100%; height:100%; display: inline-block; margin: auto; border: 0; } /* stand alone */ #timelapsejpeg.standalone { background: #2f2f2f; color:#fff; } #timelapsejpeg.standalone .fieldHolder{ padding-top: 20px; } .scroll-style-6::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #333; border-radius: 15px; } .scroll-style-6::-webkit-scrollbar { width: 10px; background-color: #333; } .scroll-style-6::-webkit-scrollbar-thumb { background-color: #555; background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent) }