.video-playlist-wrapper {
background-color: #27292d;
position: relative;
width: 66%;
height: 434px;
float: left;
}
.video-playlist-wrapper .loader-overlay {
z-index: 1;
}
.video-playlist-wrapper iframe {
height: 434px;
width: 100%;
}
.video-player-wrapper {
position: relative;
z-index: 2;
}
.video-frame {
visibility: hidden;
}
.video-playlist-nav-wrapper {
width: 34%;
float: right;
height: 434px;
overflow: hidden;
background: #ffffff;
position: relative;
border-width: 0 1px 1px 0;
}
.video-playlist-nav-wrapper:after {
content: "";
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 1px;
background: rgba(0, 0, 0, 0.05);
}
.video-playlist-nav-wrapper:before {
content: "";
position: absolute;
right: 0;
background: rgba(0, 0, 0, 0.05);
width: 100%;
height: 1px;
bottom: 0;
top: auto;
}
.video-playlist-nav-wrapper .mCustomScrollBox > .mCSB_scrollTools {
right: 0;
left: auto;
}
.playlist-title {
background: var(--brand-color);
color: var(--bright-color);
height: 70px;
width: 100%;
padding: 0 15px;
line-height: 17px;
z-index: 9;
}
.playlist-title h2 {
padding-top: 14px;
font-size: 18px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.videos-number {
font-size: 11px;
display: block;
float: left;
}
.playlist-title-icon {
font-size: 27px;
float: left;
margin-right: 10px;
height: 70px;
line-height: 70px;
width: 40px;
text-align: center;
font-weight: normal;
}
.video-playlist-nav {
position: relative;
height: 434px;
clear: both;
}
.is-mobile .video-playlist-nav {
overflow-y: auto;
}
.video-playlist-nav:not(.playlist-has-title) {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.playlist-has-title {
height: 364px;
}
.video-playlist-item {
padding: 12px 10px;
display: block;
overflow: hidden;
cursor: pointer;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: 0.3s;
}
.video-playlist-item:last-of-type {
border-bottom: 0;
}
.video-playlist-item h2 {
font-size: 14px;
font-weight: normal;
}
.video-playlist-item:hover,
.is-playing {
background: #F7F7F7;
}
.video-paused-icon,
.video-play-icon,
.video-number {
float: left;
width: 15px;
text-align: left;
line-height: 46px;
font-size: 11px;
color: var(--base-color);
}
.video-play-icon {
display: none;
color: var(--brand-color);
}
.is-playing .video-number,
.is-paused .video-number,
.video-paused-icon {
display: none;
}
.is-playing .video-play-icon,
.is-paused .video-paused-icon {
display: block;
}
Mika Watkins Archives - FRPNET