ES_Sami7777/easystream-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0b7e2d0a5b91591d6dab6ebd6bac1af6542c5bb6
easystream-main/f_scripts/shared/videojs/videojs-styles.css
SamiAhmed7777 0b7e2d0a5b feat: Add comprehensive documentation suite and reorganize project structure 
- Created complete documentation in docs/ directory
- Added PROJECT_OVERVIEW.md with feature highlights and getting started guide
- Added ARCHITECTURE.md with system design and technical details
- Added SECURITY.md with comprehensive security implementation guide
- Added DEVELOPMENT.md with development workflows and best practices
- Added DEPLOYMENT.md with production deployment instructions
- Added API.md with complete REST API documentation
- Added CONTRIBUTING.md with contribution guidelines
- Added CHANGELOG.md with version history and migration notes
- Reorganized all documentation files into docs/ directory for better organization
- Updated README.md with proper documentation links and quick navigation
- Enhanced project structure with professional documentation standards
2025-10-21 00:39:45 -07:00

554 lines
17 KiB
CSS
Raw Blame History

/* videojs-resolution-switcher.css, videojs-watermark.css, videojs-contextmenu-ui.css, videojs-settings-menu.css, videojs.suggestedVideoEndcap.css, videojs.thumbnails.css */
.vjs-resolution-button {
color: #ccc;
font-family: VideoJS;
}
.vjs-resolution-button .vjs-resolution-button-staticlabel:before {
content: '\f110';
font-size: 1.8em;
line-height: 1.67;
}
.vjs-resolution-button .vjs-resolution-button-label {
font-size: 1em;
font-weight: bold;
line-height: 50px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
box-sizing: inherit;
font-family: Arial, Helvetica, sans-serif;
}
.vjs-resolution-button ul.vjs-menu-content {
width: 7em !important;
left:-15px;
}
.vjs-resolution-button .vjs-menu {
left: 0;
}
.vjs-resolution-button .vjs-menu li {
text-transform: none;
font-size: 1.2em;
font-family: Arial, Helvetica, sans-serif;
}
/**
* videojs-watermark
* @version 1.0.1
* @copyright 2016 Brooks Lyrette <brooks@dotsub.com>
* @license Apache-2.0
*/
.video-js.vjs-watermark{display:block}.video-js .vjs-watermark-content{opacity:0.99;position:absolute;padding:5px;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-ms-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.video-js .vjs-watermark-top-right{right:0;top:0}.video-js .vjs-watermark-top-left{left:0;top:0}.video-js .vjs-watermark-bottom-right{right:0;bottom:30px}.video-js .vjs-watermark-bottom-left{left:0;bottom:30px}.video-js.vjs-user-inactive.vjs-playing .vjs-watermark-fade{opacity:0}
/**
* videojs-contextmenu-ui
* @version 3.0.5
* @copyright 2017 Brightcove, Inc.
* @license Apache-2.0
*/
.vjs-contextmenu-ui-menu{position:absolute}.vjs-contextmenu-ui-menu .vjs-menu-content{background-color:#2B333F;background-color:rgba(43,51,63,0.7);border-radius:0.3em;padding:0.25em}.vjs-contextmenu-ui-menu .vjs-menu-item{border-radius:0.3em;cursor:pointer;margin:0 0 1px;padding:0.5em 1em;font-size:1em;line-height:1.2;text-transform:none}.vjs-contextmenu-ui-menu .vjs-menu-item:active,.vjs-contextmenu-ui-menu .vjs-menu-item:hover{background-color:rgba(0,0,0,0.5);text-shadow:0em 0em 1em white}
/**
* videojs-settings-menu
* @version 0.0.2
* @copyright 2016 Fruitsapje <hero@streamone.nl>
* @license MIT
*/
.video-js.vjs-settings-menu{display:block}.video-js .vjs-settings-menu .vjs-menu{font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif}.video-js .vjs-settings-menu .vjs-menu-content{overflow:inherit}.video-js .vjs-settings-menu .vjs-menu-item{text-align:left}.video-js .vjs-settings-menu .vjs-settings-sub-menu-value,.video-js .vjs-settings-menu .vjs-settings-sub-menu-title{display:inline-block;padding:0 5px}.video-js .vjs-settings-menu.vjs-menu-button-popup>.vjs-menu{width:17em;left:-10em}.video-js .vjs-settings-menu.vjs-menu-button-popup .vjs-settings-sub-menu .vjs-menu{left:-10em}.video-js .vjs-settings-menu .vjs-settings-sub-menu .vjs-menu-content{bottom:-1.5em}.video-js .vjs-settings-menu .vjs-settings-sub-menu .vjs-menu-content li{font-size:1em}.video-js .vjs-settings-menu .vjs-settings-sub-menu .vjs-menu-item{text-align:center}.video-js .vjs-settings-sub-menu-title{width:8em;text-transform:initial}
/* a wrapper element that tracks the mouse vertically */
.vjs-thumbnail-holder {
position: absolute;
overflow: hidden;
left: -1000px;
bottom: 3.2em;
border: 1px solid #121212;
z-index: 3;
}
/* the thumbnail image itself */
.vjs-thumbnail {
position: absolute;
left: 0;
opacity: 0;
transition: opacity .2s ease;
-webkit-transition: opacity .2s ease;
-moz-transition: opacity .2s ease;
-mz-transition: opacity .2s ease;
width: auto !important;
}
.vjs-thumbnail-holder .vjs-thumb-duration {
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .6);
color: #fff;
width: 100%;
text-align: center;
font-size: 12px;
line-height: 1.5em
}
/* fade in the thumbnail when hovering over the progress bar */
/* .fake-active is needed for Android only. It's removed on touchend/touchecancel */
.vjs-progress-control:hover .vjs-thumbnail,
.vjs-progress-control.fake-active .vjs-thumbnail,
.vjs-progress-control:active .vjs-thumbnail {
opacity: 1;
}
/* ... but hide the thumbnail when hovering directly over it */
.vjs-progress-control:hover .vjs-thumbnail:hover,
.vjs-progress-control:active .vjs-thumbnail:active {
opacity: 0;
}
.vjs-suggested-video-endcap {
background: rgba(0, 0, 0, .7);
display: none;
height: calc(100% - 42px);
left: 0;
overflow: hidden;
padding: 20px;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.vjs-suggested-video-endcap.is-active {
display: block;
}
.vjs-suggested-video-endcap-container {
-webkit-align-content: center;
align-content: center;
-webkit-align-items: baseline;
align-items: baseline;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
}
.vjs-suggested-video-endcap-header {
font: 700 16px/1 Arial, sans-serif;
margin: 0 auto 20px;
text-align: center;
}
.vjs-suggested-video-endcap-link {
font-size: 14px;
margin-bottom: 20px;
margin-right: 20px;
position: relative;
width: 23%;
color:#fff;
}
.vjs-suggested-video-endcap-link:nth-of-type(4n),
.vjs-suggested-video-endcap-link:last-of-type {
margin-right: 0;
}
.vjs-suggested-video-endcap-img {
height: auto;
margin-bottom: 5px;
width: 100%;
}
.vjs-emre-marquee { position: absolute; padding: 15px; background-color: white; color: black; font-family: Roboto; font-size: 16px; font-weight: 500;}
.video-js .vjs-loading-spinner,
.vjs-default-skin .vjs-loading-spinner {
border-color: #06a2cb;
}
.video-js .vjs-loading-spinner:before, .video-js .vjs-loading-spinner:after,
.vjs-default-skin .vjs-loading-spinner:before,
.vjs-default-skin .vjs-loading-spinner:after {
border-color: #06a2cb;
}
.video-js .vjs-big-play-button,
.vjs-default-skin .vjs-big-play-button {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
margin: 0;
border-radius: 0;
border: none;
width: 85px;
height: 85px;
bottom: 0;
left: 0;
top: auto;
box-shadow: none;
}
.video-js .vjs-big-play-button:hover, .video-js .vjs-big-play-button:focus,
.vjs-default-skin .vjs-big-play-button:hover,
.vjs-default-skin .vjs-big-play-button:focus {
background-color: #06a2cb;
}
.video-js .vjs-big-play-button:before,
.vjs-default-skin .vjs-big-play-button:before {
font-size: 60px;
height: auto;
padding: 0;
margin: 0;
line-height: 85px;
}
.video-js:hover .vjs-big-play-button,
.video-js:hover .vjs-big-play-button:focus, .video-js:focus .vjs-big-play-button,
.video-js:focus .vjs-big-play-button:focus,
.vjs-default-skin:hover .vjs-big-play-button,
.vjs-default-skin:hover .vjs-big-play-button:focus,
.vjs-default-skin:focus .vjs-big-play-button,
.vjs-default-skin:focus .vjs-big-play-button:focus {
border-color: transparent;
box-shadow: none;
background-color: #06a2cb;
}
.video-js .vjs-progress-control,
.vjs-default-skin .vjs-progress-control {
width: auto;
height: 50px;
bottom: 50px;
top: auto;
background-color: rgba(51, 51, 51, 0.5);
position: absolute;
left: 0;
right: 0;
}
.video-js .vjs-progress-control .vjs-slider,
.vjs-default-skin .vjs-progress-control .vjs-slider {
height: 6px;
margin: 0 10px;
}
.video-js .vjs-progress-control .vjs-slider-handle,
.vjs-default-skin .vjs-progress-control .vjs-slider-handle {
top: 40%;
}
.video-js .vjs-load-progress,
.vjs-default-skin .vjs-load-progress {
background: #e0e0e0;
}
.video-js .vjs-progress-holder .vjs-play-progress,
.video-js .vjs-progress-holder .vjs-load-progress,
.video-js .vjs-progress-holder .vjs-load-progress div,
.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
.vjs-default-skin .vjs-progress-holder .vjs-load-progress,
.vjs-default-skin .vjs-progress-holder .vjs-load-progress div {
height: 6px;
line-height: 50px;
}
.video-js .vjs-volume-level,
.video-js .vjs-play-progress,
.vjs-default-skin .vjs-volume-level,
.vjs-default-skin .vjs-play-progress {
background-color: #06a2cb;
}
.video-js .vjs-volume-level:before,
.video-js .vjs-play-progress:before,
.vjs-default-skin .vjs-volume-level:before,
.vjs-default-skin .vjs-play-progress:before {
right: -8px;
font-size: 0.9em;
height: 12px;
width: 12px;
border-radius:50%;
background: #FFFFFF;
padding: 0;
margin: 0;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
content: '';
}
.video-js.vjs-has-started .vjs-control-bar,
.vjs-default-skin.vjs-has-started .vjs-control-bar {
height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.video-js .vjs-control-bar,
.vjs-default-skin .vjs-control-bar {
background-color: #000000;
}
.video-js .vjs-control:before,
.vjs-default-skin .vjs-control:before {
font-size: 24px;
height: auto;
padding: 0;
margin: 0;
line-height: 40px;
width: 40px;
}
.video-js .vjs-control:focus:before, .video-js .vjs-control:hover:before,
.vjs-default-skin .vjs-control:focus:before,
.vjs-default-skin .vjs-control:hover:before {
box-shadow: none;
text-shadow: none;
}
.video-js .vjs-live-control,
.vjs-default-skin .vjs-live-control {
width: auto;
height: 20px;
bottom: 50px;
/*top: -55px;*/
position: absolute;
left: 0;
right: 0;
}
.video-js .vjs-current-time,
.video-js .vjs-remaining-time,
.vjs-default-skin .vjs-current-time,
.vjs-default-skin .vjs-remaining-time {
left: 88px;
}
.video-js .vjs-duration,
.vjs-default-skin .vjs-duration {
left: 133px;
}
.video-js .vjs-time-divider,
.vjs-default-skin .vjs-time-divider {
left: 120px;
bottom: 0;
}
.video-js .vjs-playback-rate .vjs-menu,
.vjs-default-skin .vjs-playback-rate .vjs-menu {
width: 50px;
}
.video-js .vjs-playback-rate .vjs-playback-rate-value,
.vjs-default-skin .vjs-playback-rate .vjs-playback-rate-value {
line-height: 50px;
}
.video-js .vjs-current-time,
.video-js .vjs-duration,
.video-js .vjs-time-divider,
.vjs-default-skin .vjs-current-time,
.vjs-default-skin .vjs-duration,
.vjs-default-skin .vjs-time-divider {
position: absolute;
height: 40px;
display: block;
}
.video-js .vjs-current-time > div,
.video-js .vjs-duration > div,
.video-js .vjs-time-divider > div,
.vjs-default-skin .vjs-current-time > div,
.vjs-default-skin .vjs-duration > div,
.vjs-default-skin .vjs-time-divider > div {
line-height: 40px;
height: 40px;
}
.video-js .vjs-remaining-time,
.vjs-default-skin .vjs-remaining-time {
display: none;
}
.video-js .vjs-play-control,
.video-js .vjs-fullscreen-control,
.video-js .vjs-subtitles-button,
.video-js .vjs-playback-rate,
.video-js .vjs-captions-button,
.video-js .vjs-chapters-button,
.video-js .vjs-mute-control,
.video-js .vjs-volume-menu-button,
.video-js .vjs-quality-button,
.video-js .vjs-descriptions-button,
.video-js .vjs-audio-button,
.vjs-default-skin .vjs-play-control,
.vjs-default-skin .vjs-fullscreen-control,
.vjs-default-skin .vjs-subtitles-button,
.vjs-default-skin .vjs-playback-rate,
.vjs-default-skin .vjs-captions-button,
.vjs-default-skin .vjs-chapters-button,
.vjs-default-skin .vjs-mute-control,
.vjs-default-skin .vjs-volume-menu-button,
.vjs-default-skin .vjs-quality-button,
.vjs-default-skin .vjs-descriptions-button,
.vjs-default-skin .vjs-audio-button {
width: 40px;
height: 40px;
border-right: 0px solid #000;
right: auto;
left: auto;
display: inline-block;
}
.vjs-menu li.vjs-menu-item:not(.vjs-selected):focus,.vjs-menu li.vjs-menu-item:not(.vjs-selected):hover{background-color:#7abbec}
.video-js .vjs-play-control:hover, .video-js .vjs-play-control:focus,
.video-js .vjs-fullscreen-control:hover,
.video-js .vjs-fullscreen-control:focus,
.video-js .vjs-subtitles-button:hover,
.video-js .vjs-subtitles-button:focus,
.video-js .vjs-playback-rate:hover,
.video-js .vjs-playback-rate:focus,
.video-js .vjs-captions-button:hover,
.video-js .vjs-captions-button:focus,
.video-js .vjs-chapters-button:hover,
.video-js .vjs-chapters-button:focus,
.video-js .vjs-mute-control:hover,
.video-js .vjs-mute-control:focus,
.video-js .vjs-volume-menu-button:hover,
.video-js .vjs-volume-menu-button:focus,
.video-js .vjs-quality-button:hover,
.video-js .vjs-quality-button:focus,
.video-js .vjs-descriptions-button:hover,
.video-js .vjs-descriptions-button:focus,
.video-js .vjs-audio-button:hover,
.video-js .vjs-audio-button:focus,
.vjs-default-skin .vjs-play-control:hover,
.vjs-default-skin .vjs-play-control:focus,
.vjs-default-skin .vjs-fullscreen-control:hover,
.vjs-default-skin .vjs-fullscreen-control:focus,
.vjs-default-skin .vjs-subtitles-button:hover,
.vjs-default-skin .vjs-subtitles-button:focus,
.vjs-default-skin .vjs-playback-rate:hover,
.vjs-default-skin .vjs-playback-rate:focus,
.vjs-default-skin .vjs-captions-button:hover,
.vjs-default-skin .vjs-captions-button:focus,
.vjs-default-skin .vjs-chapters-button:hover,
.vjs-default-skin .vjs-chapters-button:focus,
.vjs-default-skin .vjs-mute-control:hover,
.vjs-default-skin .vjs-mute-control:focus,
.vjs-default-skin .vjs-volume-menu-button:hover,
.vjs-default-skin .vjs-volume-menu-button:focus,
.vjs-default-skin .vjs-quality-button:hover,
.vjs-default-skin .vjs-quality-button:focus,
.vjs-default-skin .vjs-descriptions-button:hover,
.vjs-default-skin .vjs-descriptions-button:focus,
.vjs-default-skin .vjs-audio-button:hover,
.vjs-default-skin .vjs-audio-button:focus,
.vjs-default-skin .vjs-resolution-button:hover,
.vjs-default-skin .vjs-resolution-button:focus {
background-color: transparent !important;
}
.video-js .vjs-play-control,
.vjs-default-skin .vjs-play-control {
position: absolute;
left: 10px;
}
.video-js .vjs-fullscreen-control,
.vjs-default-skin .vjs-fullscreen-control {
border-right-width: 0;
margin-left: 85px;
}
.video-js .vjs-volume-menu-button,
.vjs-default-skin .vjs-volume-menu-button {
border-right-width: 0;
position: absolute;
left: 50px;
}
.video-js .vjs-volume-menu-button:hover, .video-js .vjs-volume-menu-button:focus,
.vjs-default-skin .vjs-volume-menu-button:hover,
.vjs-default-skin .vjs-volume-menu-button:focus {
border-right-width: 1;
background-color: transparent !important;
}
.video-js .vjs-volume-menu-button:hover:before, .video-js .vjs-volume-menu-button:focus:before,
.vjs-default-skin .vjs-volume-menu-button:hover:before,
.vjs-default-skin .vjs-volume-menu-button:focus:before {
background-color: transparent !important;
}
.video-js .vjs-volume-menu-button:before,
.vjs-default-skin .vjs-volume-menu-button:before {
width: 40px;
left: 0;
top: 50%;
-webkit-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%);
transform: translate(0%, -50%);
}
.video-js .vjs-menu,
.vjs-default-skin .vjs-menu {
bottom: 20px;
}
.video-js .vjs-volume-bar,
.video-js .vjs-volume-level,
.vjs-default-skin .vjs-volume-bar,
.vjs-default-skin .vjs-volume-level {
height: 3px;
}
.video-js .vjs-volume-bar,
.vjs-default-skin .vjs-volume-bar {
width: 90%;
top: 20%;
margin: 0;
}
.video-js .vjs-seek-handle,
.vjs-default-skin .vjs-seek-handle {
height: auto;
}
.video-js .vjs-slider-handle:before,
.video-js .vjs-volume-bar .vjs-volume-handle:before,
.vjs-default-skin .vjs-slider-handle:before,
.vjs-default-skin .vjs-volume-bar .vjs-volume-handle:before {
width: 10px;
height: 20px;
background-color: #FFFFFF;
position: absolute;
right: 0;
top: -5px;
-webkit-transform: none;
-ms-transform: none;
transform: none;
content: "";
font-family: none;
}
.video-js .vjs-live-controls,
.vjs-default-skin .vjs-live-controls {
display: none;
}
.video-js .vjs-menu-button-inline:hover, .video-js .vjs-menu-button-inline:focus, .video-js .vjs-menu-button-inline.vjs-slider-active,
.vjs-default-skin .vjs-menu-button-inline:hover,
.vjs-default-skin .vjs-menu-button-inline:focus,
.vjs-default-skin .vjs-menu-button-inline.vjs-slider-active {
width: 14em;
}
.video-js .vjs-menu-button-inline .vjs-menu,
.vjs-default-skin .vjs-menu-button-inline .vjs-menu {
left: 80px;
}
.video-js .vjs-menu-button-inline .vjs-menu .vjs-menu-content,
.vjs-default-skin .vjs-menu-button-inline .vjs-menu .vjs-menu-content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow: visible;
height: auto;
width: 8em;
}
.video-js.vjs-no-flex .vjs-menu-button-inline,
.vjs-default-skin.vjs-no-flex .vjs-menu-button-inline {
width: 14em;
}
.video-js .vjs-time-tooltip:after,
.video-js .vjs-mouse-display:after,
.video-js .vjs-play-progress:after,
.vjs-default-skin .vjs-time-tooltip:after,
.vjs-default-skin .vjs-mouse-display:after,
.vjs-default-skin .vjs-play-progress:after {
line-height: 10px;
}
.vjs-menu li{color:#fff}
.video-js .vjs-time-divider,.vjs-default-skin .vjs-time-divider{right:77px !important}
.vjs-live-display{z-index: 999999;position: absolute;color: red;top:64px;left: 190px;font-weight:bold;font-size:12px;}
.vjs-ad-playing .vjs-control.vjs-ads-label{position: absolute;left: 200px;display: inline-block;top:5px;color: #ffe400;}
.vjs-poster{background-color:#fff !important}.dark .vjs-poster{background-color:#000 !important}
@media (max-width: 400px){.vjs-playback-rate,.vjs-ads-label{display:none !important;}}
Reference in New Issue View Git Blame Copy Permalink