| Server IP : 66.29.137.217 / Your IP : 3.142.92.19 Web Server : LiteSpeed System : Linux premium294.web-hosting.com 4.18.0-513.11.1.lve.el8.x86_64 #1 SMP Thu Jan 18 16:21:02 UTC 2024 x86_64 User : gltevjme ( 1095) PHP Version : 7.0.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/gltevjme/bofirm.gltechlimited.com/public/frontend/assets/css/ |
Upload File : |
:root {
--accent: #0094ff;
--main: #ffffff;
}
.icon {
cursor: pointer;
/*height: 30px;*/
/*width: 35px;*/
margin-right: 4px;
margin-left: 4px;
border: none;
background: none;
filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(92deg) brightness(104%) contrast(101%);
color: #000;
}
#video-controls {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "progressbar"
"controls-main";
position: absolute;
bottom: 7px;
width: 100%;
padding-bottom: 7px;
box-sizing: border-box;
opacity: 0;
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-o-transition: opacity .3s;
-ms-transition: opacity .3s;
transition: opacity .3s;
background: #0000007d;
}
.playerContainer:hover #video-controls {
opacity: .9;
}
#video-controls .progress {
grid-area: progressbar;
display: grid;
grid-template-columns: 14% 72% 14%;
grid-template-rows: 1fr;
grid-template-areas: "ctime seek ttime";
cursor: pointer;
width: 100%;
margin: auto;
border-radius: 6px;
left: 4px;
bottom: 100%;
transition: height 0.1s ease-in-out;
}
.current-time {
grid-area: ctime;
color: #ffffff;
margin: auto
}
.total-time {
grid-area: ttime;
color: #ffffff;
margin: auto
}
#seek{
cursor: pointer;
grid-area: seek;
width: 100%;
outline: none;
height: 5px;
margin: auto;
}
.controls-main {
grid-area: controls-main;
width: 100%;
margin: auto;
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: "controls-left play controls-right";
justify-content: space-between;
}
.controls-left {
grid-area: controls-left;
align-items: center;
display: flex;
padding-left: 14px;
}
.controls-right {
grid-area: controls-right;
align-items: center;
display: flex;
justify-content: flex-end;
padding-right: 14px;
}
#center_p {
display: flex;
grid-area: play;
cursor: pointer;
text-align: center;
justify-content: center;
}
.volume{
display: flex;
align-items: center;
}
#volumeSeek{
cursor: pointer;
border-radius: 6px;
width: 80px;
height: 5px;
margin: auto;
}
#unlock{
position: absolute;
left: 14px;
z-index: 1;
top: 14px;
display: none;
}
#superplay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: block;
height: 50px;
width: 50px;
}
#speed-list {
cursor: pointer;
display: none;
background: #131212e3;
color: #fff;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
min-width: 160px;
text-align: center;
position: absolute;
top: 0;
right: 0;
}
.speed-list p {
color: var(--main);
padding: 5px;
cursor: default;
}
.speed-list p:hover{
color: var(--accent);
font-weight: bold;
}
.fullscreen {
cursor: pointer;
display: flex;
justify-content: center;
}
@media only screen and (max-width: 600px) {
.icon {
cursor: pointer;
height: 25px;
width: 20px;
margin-right: 4px;
margin-left: 4px;
border: none;
background: none;
filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(92deg) brightness(104%) contrast(101%);
}
#video-controls {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "progressbar"
"controls-main";
position: absolute;
bottom: 4px;
width: 100%;
padding-bottom: 0px;
box-sizing: border-box;
opacity: 0;
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-o-transition: opacity .3s;
-ms-transition: opacity .3s;
transition: opacity .3s;
background: #0000007d;
}
.playerContainer:hover #video-controls {
opacity: .9;
}
#video-controls .progress {
grid-area: progressbar;
display: grid;
grid-template-columns: 14% 72% 14%;
grid-template-rows: 1fr;
grid-template-areas: "ctime seek ttime";
cursor: pointer;
width: 100%;
margin: auto;
border-radius: 6px;
left: 4px;
bottom: 100%;
transition: height 0.1s ease-in-out;
}
.current-time {
grid-area: ctime;
color: #ffffff;
margin: auto
}
.total-time {
grid-area: ttime;
color: #ffffff;
margin: auto
}
#seek{
cursor: pointer;
grid-area: seek;
width: 100%;
outline: none;
height: 5px;
margin: auto;
}
.controls-main {
grid-area: controls-main;
width: 100%;
margin: auto;
height: 100%;
display: grid;
grid-template-columns: 40% 20% 40%;
grid-template-rows: 1fr;
grid-template-areas: "controls-left play controls-right";
justify-content: space-between;
}
.controls-left {
grid-area: controls-left;
align-items: center;
display: flex;
padding-left: 14px;
}
.controls-right {
grid-area: controls-right;
align-items: center;
display: flex;
justify-content: flex-end;
padding-right: 14px;
}
#play {
grid-area: play;
cursor: pointer;
text-align: center;
}
.volume{
display: flex;
align-items: center;
}
#volumeSeek{
cursor: pointer;
border-radius: 6px;
width: 80px;
height: 5px;
margin: auto;
}
#unlock{
position: absolute;
left: 14px;
z-index: 1;
top: 14px;
display: none;
}
#superplay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: block;
}
#speed-list {
cursor: pointer;
display: none;
background: #131212e3;
color: #fff;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
z-index: 1;
min-width: 160px;
text-align: center;
position: absolute;
top: 0;
right: 0;
font-size: 10px;
}
.speed-list p {
color: var(--main);
padding: 5px;
cursor: default;
}
.speed-list p:hover{
color: var(--accent);
font-weight: bold;
}
.fullscreen {
cursor: pointer;
display: flex;
justify-content: center;
}
}
/* Custom Video Player CSS */
/* .xdPlayer {
width: 100%;
height: 100%;
} */
.xdPlayer {
/* width: 100%;
height: 100%;
max-height: 500px; */
}
.videoPlayer, .youtubePlayer, .vimeoPlayer {
min-width: 100%;
width: 100%;
}
.xdPlayer {
width: 100%;
min-height: 100%;
max-height: 626px;
height: auto;
height: 626px;
}
.playerContainer {
position: relative;
}
.controls-main {
margin: 9px auto;
}
#video-controls {
/*bottom: 0;*/
padding-top: 0;
}
#seek {
height: 3px;
top: 20.4px;
position: absolute;
left: 0;
}
.current-time {
position: absolute;
left: 17px;
bottom: 40px;
font-size: 14px;
}
.total-time {
position: absolute;
right: 17px;
bottom: 40px;
font-size: 14px;
}
@media (max-width: 600px) {
.volume, #lock, #speedbtn {
display: none;
}
#seek {
top: 18px;
}
.current-time, .total-time {
bottom: 36px;
}
.fullscreen {
position: relative;
top: -8px;
}
}
.player-btn.toggle-play.icon svg {
height: 18px;
}
#video-controls .progress {
height: 8px;
}
.controls-right svg {
height: 22px;
}