div {
height: 100%;
- background-color: var(--mainColor);
+ background-color: pvar(--mainColor);
}
}
.video-thumbnail-watch-later-overlay,
+ .video-thumbnail-label-overlay,
.video-thumbnail-duration-overlay {
@include static-thumbnail-overlay;
border-radius: 3px;
font-size: 12px;
+ font-weight: $font-semibold;
+ line-height: 1.2;
+ z-index: z(miniature);
+ }
+
+ .video-thumbnail-label-overlay {
+ position: absolute;
+ padding: 0 5px;
+ left: 5px;
+ top: 5px;
font-weight: $font-bold;
- z-index: 1;
+
+ &.warning { background-color: orange; }
+ &.danger { background-color: red; }
}
.video-thumbnail-duration-overlay {
position: absolute;
- padding: 0 5px;
+ padding: 0 3px;
right: 5px;
bottom: 5px;
}
- &:hover {
- .video-thumbnail-actions-overlay {
- opacity: 1;
- }
- }
-
.video-thumbnail-actions-overlay {
position: absolute;
display: flex;