projects
/
oweals
/
peertube.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
`fitWidth` for `video-miniature`, fluid grid (#2830)
[oweals/peertube.git]
/
client
/
src
/
app
/
shared
/
video
/
video-thumbnail.component.scss
diff --git
a/client/src/app/shared/video/video-thumbnail.component.scss
b/client/src/app/shared/video/video-thumbnail.component.scss
index ad221d6ed64a5c4ecf7641b7747578c0348b4af9..feff78a87899b71b966bd48e2f8144e5714df482 100644
(file)
--- a/
client/src/app/shared/video/video-thumbnail.component.scss
+++ b/
client/src/app/shared/video/video-thumbnail.component.scss
@@
-14,34
+14,40
@@
div {
height: 100%;
div {
height: 100%;
- background-color: var(--mainColor);
+ background-color:
p
var(--mainColor);
}
}
.video-thumbnail-watch-later-overlay,
}
}
.video-thumbnail-watch-later-overlay,
+ .video-thumbnail-label-overlay,
.video-thumbnail-duration-overlay {
@include static-thumbnail-overlay;
border-radius: 3px;
font-size: 12px;
.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;
font-weight: $font-bold;
- z-index: 1;
+
+ &.warning { background-color: orange; }
+ &.danger { background-color: red; }
}
.video-thumbnail-duration-overlay {
position: absolute;
}
.video-thumbnail-duration-overlay {
position: absolute;
- padding: 0
5
px;
+ padding: 0
3
px;
right: 5px;
bottom: 5px;
}
right: 5px;
bottom: 5px;
}
- &:focus,
- &:hover {
- .video-thumbnail-actions-overlay {
- opacity: 1;
- }
- }
-
.video-thumbnail-actions-overlay {
position: absolute;
display: flex;
.video-thumbnail-actions-overlay {
position: absolute;
display: flex;