background: rgba(0, 0, 0, 0.8);
z-index: 101;
transition: right 0.2s;
+ overflow-y: scroll;
// Hidden
right: -$playlist-menu-width;
justify-content: space-between;
.title {
+ @include ellipsis;
+
font-size: 14px;
margin-bottom: 5px;
- white-space: nowrap;
- text-overflow: ellipsis;
}
.channel {
+ @include ellipsis;
+
font-size: 11px;
color: #bfbfbf;
- white-space: nowrap;
- text-overflow: ellipsis;
}
.cross {
right: 0;
top: 0;
z-index: 100;
- padding: 1em;
+ padding: $dock-padding;
cursor: pointer;
}
}
.vjs-playlist-menu-item {
- cursor: pointer;
display: flex;
padding: 10px 0;
+ height: 60px;
+
+ &:not(.vjs-disabled) {
+ cursor: pointer;
+ }
.item-position-block {
position: relative;
align-items: center;
justify-content: center;
width: 30px;
+ flex-shrink: 0;
+ }
+
+ .item-unavailable {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.item-player {
}
}
- &:hover {
+ &:hover:not(.vjs-disabled) {
background-color: rgba(150, 150, 150, 0.2);
}
}
.info-block {
- margin-left: 10px;
+ margin: 0 10px;
+ min-width: 1px;
.title {
+ @include ellipsis;
+
font-size: 13px;
- margin-bottom: 5px;
- white-space: nowrap;
- text-overflow: ellipsis;
+ margin-bottom: 3px;
}
- .channel {
+ .channel,
+ .timestamps {
+ @include ellipsis;
+
font-size: 11px;
color: #bfbfbf;
- white-space: nowrap;
- text-overflow: ellipsis;
+ }
+
+ .timestamps {
+ font-size: 10px;
+ margin-top: 3px;
}
}
}