/* --- BigNewAnnotation --- */ .vjs-default-skin .vjs-big-new-annotation{ float: left; cursor: pointer; line-height: 1.6em; margin: 3% 3% 3% 4%; top: 41%; width: 6em; height: 6em; background-color: rgba(7,40,50,.7); border-radius: 6px; border: 0.25em solid #ccc; } .vjs-default-skin .vjs-big-new-annotation div{ width: 100%; height: 100%; top: 0em; font-weight: bold; font-size: 600%; padding-top: 0.32em; } .vjs-default-skin.vjs-fullscreen .vjs-big-new-annotation{ top: 68%; width: 8em; height: 8em; } .vjs-default-skin.vjs-fullscreen .vjs-big-new-annotation div{ font-size: 750%; padding-top: 42%; } .vjs-default-skin .vjs-big-new-annotation div:hover { -webkit-box-shadow: 0 0 1em rgba(255, 255, 255, 1); -moz-box-shadow: 0 0 1em rgba(255, 255, 255, 1); box-shadow: 0 0 1em rgba(255, 255, 255, 1); } div.video-js > div.vjs-big-new-annotation { visibility:hidden; opacity:0; -webkit-transition: visibility 0s linear 1s,opacity 1s linear; -moz-transition: visibility 0s linear 1s,opacity 1s linear; -o-transition: visibility 0s linear 1s,opacity 1s linear; transition:visibility 0s linear 1s,opacity 1s linear; } div.video-js:hover > div.vjs-big-new-annotation { visibility:visible; opacity:1; transition-delay:0s; } .vjs-default-skin .vjs-big-new-annotation.ul{ top:0%; } .vjs-default-skin .vjs-big-new-annotation.ur{ top:0%; float:right; } .vjs-default-skin .vjs-big-new-annotation.br{ float:right; } .vjs-default-skin .vjs-big-new-annotation.c{ top:24%; left:40%; } div.video-js:hover > div.vjs-big-new-annotation.none { visibility:hidden; } .vjs-default-skin.vjs-fullscreen .vjs-big-new-annotation.c{ top:35%; } /* --- ControlBar --> AnContainerButtons --- */ .vjs-default-skin .vjs-container-button-annotation{ width: 101px; } /* --- ControlBar --> AnContainerButtons --> ShowStatistics --- */ /* --- ControlBar --> AnContainerButtons --> NewAnnotation --- */ /* --- ControlBar --> AnContainerButtons --> ShowAnnotations --- */ .vjs-default-skin .vjs-statistics-annotation, .vjs-default-skin .vjs-showannotations-annotation, .vjs-default-skin .vjs-new-annotation{ float: right; cursor: pointer; line-height: 1.6em; background-position: left top; margin: 4px; width: 23px; height: 21px; background-repeat: no-repeat; } .vjs-default-skin .vjs-statistics-annotation.active, .vjs-default-skin .vjs-showannotations-annotation.active, .vjs-default-skin .vjs-statistics-annotation:hover, .vjs-default-skin .vjs-showannotations-annotation:hover, .vjs-default-skin .vjs-new-annotation:hover { background-position: center top; } .vjs-default-skin .vjs-statistics-annotation:active, .vjs-default-skin .vjs-showannotations-annotation:active, .vjs-default-skin .vjs-new-annotation:active { background-position: center right; } .vjs-default-skin .vjs-new-annotation { background-image: url('data:image/png;base64,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'); } .vjs-default-skin .vjs-showannotations-annotation { background-image: url('data:image/png;base64,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'); } .vjs-default-skin .vjs-statistics-annotation { background-image: url('data:image/png;base64,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'); } /* --- ControlBar --> BackAnDisplay --- */ .vjs-default-skin .vjs-back-anpanel-annotation{ float: left; left: 0em; right: 0em; position:absolute; background-color: rgba(0,0,0,0.3); width: auto; /*font-size: .3em;*/ font-size: .9em; -webkit-transition: top .4s,height .4s,font-size .4s,-webkit-transform .4s; -moz-transition: top .4s,height .4s,font-size .4s,-moz-transform .4s; -o-transition: top .4s,height .4s,font-size .4s,-o-transform .4s; transition: top .4s,height .4s,font-size .4s,transform .4s; opacity:1; visibility:visible; transition-delay:0s; } /* --- ControlBar --> BackAnDisplay --> RangeSelectorDisplay --- */ .vjs-default-skin .vjs-rangeselector-anpanel-annotation{ height: 100%; width: 100%; position: absolute; top: -1em; } .vjs-default-skin .vjs-back-anpanel-annotation.statistics .vjs-rangeselector-anpanel-annotation{ z-index:2; } /* RangeSelectorLeft */ .vjs-default-skin .vjs-leftselector-anpanel-annotation{ height: 100%; margin-top: 1em; width:0%; float:left; position:absolute; left: 0%; } .vjs-default-skin .vjs-leftselector-anpanel-annotation .vjs-selector-arrow{ z-index:10; border-left: 1em solid #FFE800; cursor: e-resize; } .vjs-default-skin .vjs-leftselector-anpanel-annotation .vjs-leftselector-back{ right:100%; border-right: 1px dashed #FFE800; } .vjs-default-skin .vjs-leftselector-anpanel-annotation.include .vjs-leftselector-back{ border-right: 1px dashed rgb(255, 163, 0); } .vjs-default-skin .vjs-leftselector-anpanel-annotation.include .vjs-selector-arrow{ border-left: 1em solid rgb(255, 163, 0); } /* RangeSelectorRight */ .vjs-default-skin .vjs-rightselector-anpanel-annotation{ height: 100%; margin-top: 1em; width:100%; float:right; position:absolute; } .vjs-default-skin .vjs-rightselector-anpanel-annotation .vjs-selector-arrow{ z-index:20; border-right: 1em solid #FFE800; margin-left: -1em; cursor: w-resize; } .vjs-default-skin .vjs-rightselector-anpanel-annotation .vjs-rightselector-back{ border-left: 1px dashed #FFE800; } .vjs-default-skin .vjs-rightselector-anpanel-annotation.include .vjs-rightselector-back{ border-left: 1px dashed rgb(255, 163, 0); } .vjs-default-skin .vjs-rightselector-anpanel-annotation.include .vjs-selector-arrow{ border-right: 1em solid rgb(255, 163, 0); } .vjs-default-skin .vjs-leftselector-back, .vjs-default-skin .vjs-rightselector-back{ height: 100%; width: 100%; position:absolute; background-color: rgba(0,0,0,0.6); } .vjs-default-skin .vjs-selector-arrow{ width: 0; height: 0; border-top: 1em solid transparent; border-bottom: 1em solid transparent; opacity: 0.8; position: absolute; top: -2em; } /* RangeSelectorBar */ .vjs-default-skin .vjs-barselector-anpanel-annotation{ height: 2em; margin-top: -1em; background-color: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.6); position: absolute; float: left; visibility:visible; transition-delay:0s; } .vjs-default-skin .vjs-barselector-anpanel-annotation.disable{ visibility:hidden; opacity:0; -webkit-transition: visibility 0.5s linear 0.5s,opacity 0.5s linear; -moz-transition: visibility 0.5s linear 0.5s,opacity 0.5s linear; -o-transition: visibility 0.5s linear 0.5s,opacity 0.5s linear; transition:visibility 0.5s linear 0.5s,opacity 0.5s linear; } .vjs-default-skin .vjs-barselector-anpanel-annotation .vjs-barselector-left{ float: left; left: 1em; } .vjs-default-skin .vjs-barselector-anpanel-annotation .vjs-barselector-right{ right: 1em; float: right; } .vjs-default-skin .vjs-barselector-anpanel-annotation .vjs-barselector-right, .vjs-default-skin .vjs-barselector-anpanel-annotation .vjs-barselector-left{ height: 2em; font-size: 1.3em; position: absolute; } .vjs-default-skin .vjs-rangeselector-anpanel-annotation.active .vjs-barselector-anpanel-annotation{ z-index: 1; } /* --- ControlBar --> BackAnDisplay --> AnDisplay --- */ .vjs-default-skin .vjs-anpanel-annotation{ float: left; width: 100%; height: 100%; left: 0em; right: 0em; position:absolute; /*background-color: #FFE800; background: #FFE800; background: -moz-linear-gradient(top, #FFE800, #A69700); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFE800), to(#A69700)); background: -webkit-linear-gradient(top, #FFE800, #A69700); background: -o-linear-gradient(top, #FFE800, #A69700); background: -ms-linear-gradient(top, #FFE800, #A69700); background: linear-gradient(top, #FFE800, #A69700);*/ opacity: 0.8; overflow: hidden; } .vjs-default-skin .vjs-anpanel-annotation .annotation{ height: 1em; float: left; width: 100%; left: 0em; right: 0em; cursor:pointer; position:absolute; background-color: #FFE800; background: #FFE800; background: -moz-linear-gradient(top, #FFE800, #A69700); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFE800), to(#A69700)); background: -webkit-linear-gradient(top, #FFE800, #A69700); background: -o-linear-gradient(top, #FFE800, #A69700); background: -ms-linear-gradient(top, #FFE800, #A69700); background: linear-gradient(top, #FFE800, #A69700); opacity: 0.8; } .vjs-default-skin .vjs-anpanel-annotation .annotation.active { background-color: #2DCF02; background: #2DCF02; background: -moz-linear-gradient(top, #2DCF02, #114F01); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2DCF02), to(#114F01)); background: -webkit-linear-gradient(top, #2DCF02, #114F01); background: -o-linear-gradient(top, #2DCF02, #114F01); background: -ms-linear-gradient(top, #2DCF02, #114F01); background: linear-gradient(top, #2DCF02, #114F01); z-index: 1; } .vjs-default-skin .vjs-anpanel-annotation .annotation.point { border-radius: 50%; width: 1em; height: 1em; margin-left: -0.4em; } .vjs-default-skin .vjs-back-anpanel-annotation.statistics .vjs-anpanel-annotation{ visibility:hidden; } /* --- ControlBar --> BackAnDisplay --> AnStat --- */ .vjs-default-skin .vjs-anstat-annotation{ float: left; width: 100%; height: 100%; left: 0em; right: 0em; position: absolute; opacity: 0.8; visibility:visible; transition-delay:0s; font-size: 1.2em; } .vjs-default-skin .vjs-anstat-annotation.disable{ visibility:hidden; opacity:0; } .vjs-default-skin .vjs-totan-anstat-annotation, .vjs-default-skin .vjs-maxcon-anstat-annotation{ position: absolute; top: 0.3em; background-color: rgba(0,0,0,0.5); border-radius: 0.5em; padding: 0.1em; color: rgb(255, 163, 0); } .vjs-default-skin .vjs-totan-anstat-annotation{ float: right; right:1em; } .vjs-default-skin .vjs-maxcon-anstat-annotation{ float: left; left:1em; } /* --- ControlBar --> BackAnDisplay --> --- */ .vjs-default-skin .dashed-line{ float: left; right: 0em; position:absolute; color: #2DCF02; border-left:0.23em dashed #2DCF02; border-right:0.23em dashed #2DCF02; opacity: 0.8; } .vjs-default-skin .dashed-line.point{ border-right:0; } .vjs-default-skin .box-dashed-line{ height: 1em; float: left; right: 0em; color: #2DCF02; position:absolute; background-color:#2DCF02; opacity: 0.8; } .vjs-default-skin .boxup-dashed-line{ height: 1em; float: left; right: 0em; color: #2DCF02; position:absolute; opacity: 0.8; background-color: #2DCF02; background: #2DCF02; background: -moz-linear-gradient(top, #2DCF02, #114F01); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2DCF02), to(#114F01)); background: -webkit-linear-gradient(top, #2DCF02, #114F01); background: -o-linear-gradient(top, #2DCF02, #114F01); background: -ms-linear-gradient(top, #2DCF02, #114F01); background: linear-gradient(top, #2DCF02, #114F01); z-index: 4; -webkit-transition: top 1s,-webkit-transform .4s; -moz-transition: top 1s,-moz-transform .4s; -o-transition: top 1s,-o-transform .4s; transition: top 1s,transform .4s; } .vjs-default-skin .boxup-dashed-line.point{ border-radius: 50%; width: 1em; height: 1em; margin-left: -0.4em; } /* --- ControlBar --> BackAnDisplay --> BackAnDisplayScroll --- */ .vjs-default-skin .vjs-down-scroll-annotation, .vjs-default-skin .vjs-up-scroll-annotation{ width:2em; height:2em; float: left; right: 0em; position:absolute; cursor: pointer; border-left: 1em solid transparent; border-right: 1em solid transparent; /*font-size: .3em;*/ font-size: .9em; -webkit-transition: top .4s,height .4s,font-size .4s,-webkit-transform .4s; -moz-transition: top .4s,height .4s,font-size .4s,-moz-transform .4s; -o-transition: top .4s,height .4s,font-size .4s,-o-transform .4s; transition: top .4s,height .4s,font-size .4s,transform .4s; opacity: 0.8; transition-delay:0s; } .vjs-default-skin .vjs-up-scroll-annotation{ border-bottom: 1em solid black; } .vjs-default-skin .vjs-down-scroll-annotation{ top: -3em; border-top: 1em solid black; } .vjs-default-skin .vjs-scroll-anpanel-annotation.disable, .vjs-default-skin .vjs-back-anpanel-annotation.disable{ visibility:hidden; opacity:0; /*-webkit-transition: visibility 1s linear 1s,opacity 1s linear; -moz-transition: visibility 1s linear 1s,opacity 1s linear; -o-transition: visibility 1s linear 1s,opacity 1s linear; transition:visibility 1s linear 1s,opacity 1s linear;*/ } .vjs-default-skin:hover .vjs-back-anpanel-annotation, .vjs-default-skin:hover .vjs-down-scroll-annotation, .vjs-default-skin:hover .vjs-up-scroll-annotation { font-size: .9em; -webkit-transition: top .2s,height .2s,font-size .2s,-webkit-transform .2s; -moz-transition: top .2s,height .2s,font-size .2s,-moz-transform .2s; -o-transition: top .2s,height .2s,font-size .2s,-o-transform .2s; transition: top .2s,height .2s,font-size .2s,transform .2s; } /* --- ControlBar --> BackAnDisplay --> BackAnDisplayScroll--> BackAnDisplayScrollBar --- */ .vjs-default-skin .vjs-scrollbar-anpanel-annotation{ float: left; position: absolute; cursor: pointer; right: 0.5em; width: 1em; /*font-size: .3em;*/ font-size: .9em; background-color: black; opacity: 0.8; visibility:visible; transition-delay:0s; -webkit-transition: top .4s,height .4s,font-size .4s,-webkit-transform .4s; -moz-transition: top .4s,height .4s,font-size .4s,-moz-transform .4s; -o-transition: top .4s,height .4s,font-size .4s,-o-transform .4s; transition: top .4s,height .4s,font-size .4s,transform .4s; } .vjs-default-skin .vjs-scrollbar-anpanel-annotation.disable{ visibility:hidden; opacity:0; -webkit-transition: visibility 1s linear 1s,opacity 1s linear; -moz-transition: visibility 1s linear 1s,opacity 1s linear; -o-transition: visibility 1s linear 1s,opacity 1s linear; transition:visibility 1s linear 1s,opacity 1s linear; } .vjs-default-skin .vjs-scrollbar-anpanel-annotation:hover{ opacity: 0.8; visibility:visible; transition-delay:0s; } .vjs-default-skin:hover .vjs-scrollbar-anpanel-annotation{ font-size: .9em; } .vjs-default-skin .vjs-scrollbar-selector{ width: 1em; background-color: gray; border: 1px solid black; position:absolute; height: 3em; border-radius: 0.4em; } /* --- ControlBar --> BackAnDisplay --> BackAnDisplayScroll--> BackAnDisplayScrollTime --- */ .vjs-default-skin .vjs-down-scrolltime-annotation, .vjs-default-skin .vjs-up-scrolltime-annotation{ width: 100%; height:1em; float: left; position:absolute; font-size: .9em; opacity: 0.8; transition-delay:0s; right: 3em; text-align: right; margin-top:0.2em; } .vjs-default-skin .vjs-down-scrolltime-annotation{ top: -2.6em; margin-top: -0.2em; } .vjs-default-skin .vjs-scrolltime-anpanel-annotation span{ font-size: 1.3em; background-color: rgba(0,0,0,1); border-radius: 0.5em; padding: 0.1em; border: 0.1em solid white; padding-left: 0.4em; padding-right: 0.4em; } /* ---------------- Modify the CSS of Annotator plugin ---------------- */ .annotator-wrapper.vjs-fullscreen .annotator-adder, .annotator-wrapper.vjs-fullscreen .annotator-outer, .annotator-wrapper.vjs-fullscreen .annotator-widget, .annotator-wrapper.vjs-fullscreen .annotator-notice { z-index:3000000000; /*To fix full-screen*/ } /* ---------------- Modify the CSS of Video-js plugin ---------------- */ .vjs-default-skin *, .vjs-default-skin *:before, .vjs-default-skin *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* ---------------- Modify the CSS of Range Slider plugin ---------------- */ /* Selection bar in green color */ .vjs-default-skin .vjs-rangeslider-holder.locked span.annotator-hl > div.vjs-selectionbar-RS { background-color: #2DCF02; background: #2DCF02; background: -moz-linear-gradient(top, #2DCF02, #114F01); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2DCF02), to(#114F01)); background: -webkit-linear-gradient(top, #2DCF02, #114F01); background: -o-linear-gradient(top, #2DCF02, #114F01); background: -ms-linear-gradient(top, #2DCF02, #114F01); background: linear-gradient(top, #2DCF02, #114F01); } .vjs-default-skin div.vjs-rangeslider-holder.locked .vjs-rangeslider-handle > div.vjs-selectionbar-line-RS { background-color: #2DCF02; } .vjs-default-skin div.vjs-rangeslider-holder.locked .vjs-rangeslider-handle > div.vjs-selectionbar-arrow-RS { border-top-color: #2DCF02; }