src/themes/_common/player/floating-with-sidebar.scss
div.#{$cssplayer}-with-sidebar {
&.#{$cssplayer}-floating .#{$cssplayer}-content {
flex: auto;
position: relative;
contain: size; // style;
}
.#{$cssfloatingsidebar}-container {
color: #fff;
text-align: center;
margin: 0;
flex-grow: 1;
background: $sidebar_background_color;
.#{$cssfloatingsidebar}-ad-playing-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
.#{$cssfloatingsidebar}-title {
font-size: 12px;
font-weight: 500;
max-width: 150px;
text-align: left;
}
}
.#{$cssfloatingsidebar}-logo {
position: absolute;
right: 5px;
bottom: 5px;
img {
max-width: 40px;
}
}
.#{$cssfloatingsidebar}-content-container {
height: 100%;
padding-left: 7px;
padding-top: 11px;
padding-right: 18px;
text-align: left;
word-wrap: break-word;
}
a.#{$cssfloatingsidebar}-action-button {
@include transition1(border, 500ms, ease-out);
box-sizing: border-box;
color: #FFFFFF;
padding: 7px 12px;
border: 1px solid #ececec;
border-radius: 3px;
cursor: pointer;
margin: 0;
&:hover {
border-color: #FF9933;
}
&:link {
text-decoration: none;
}
&:visited {
text-decoration: none;
}
&:hover {
text-decoration: none;
}
&:active {
text-decoration: none;
}
}
}
&.#{$cssplayer}-viewport-mobile {
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.4);
max-width: 100%;
}
.#{$cssfloatingsidebar}-title {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
&.#{$cssplayer}-floating {
.#{$cssadsplayer}-ad-choices-container {
position: absolute;
color: #fff;
top: 5px;
left: 5px;
height: 20px;
width: 20px;
cursor: pointer;
}
}
&.#{$cssplayer}-fullscreen-view {
& .#{$cssadsplayer}-controlbar, .#{$cssadsplayer}-linear-ad-container {
width: 100%;
}
}
}