diff options
Diffstat (limited to 'client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss')
-rw-r--r-- | client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss new file mode 100644 index 000000000..eb869f69a --- /dev/null +++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss | |||
@@ -0,0 +1,124 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | @import '_miniature'; | ||
4 | |||
5 | .video { | ||
6 | display: flex; | ||
7 | align-items: center; | ||
8 | background-color: var(--mainBackgroundColor); | ||
9 | padding: 10px; | ||
10 | border-bottom: 1px solid $separator-border-color; | ||
11 | |||
12 | &:hover { | ||
13 | background-color: rgba(0, 0, 0, 0.05); | ||
14 | |||
15 | .more { | ||
16 | display: block; | ||
17 | } | ||
18 | } | ||
19 | |||
20 | &.playing { | ||
21 | background-color: rgba(0, 0, 0, 0.02); | ||
22 | } | ||
23 | |||
24 | a { | ||
25 | @include disable-default-a-behaviour; | ||
26 | |||
27 | min-width: 0; | ||
28 | display: flex; | ||
29 | align-items: center; | ||
30 | cursor: pointer; | ||
31 | flex-grow: 1; | ||
32 | |||
33 | .position { | ||
34 | font-weight: $font-semibold; | ||
35 | margin-right: 10px; | ||
36 | color: $grey-foreground-color; | ||
37 | min-width: 20px; | ||
38 | |||
39 | my-global-icon { | ||
40 | @include apply-svg-color($grey-foreground-color); | ||
41 | |||
42 | width: 17px; | ||
43 | position: relative; | ||
44 | left: -2px; | ||
45 | } | ||
46 | } | ||
47 | |||
48 | my-video-thumbnail { | ||
49 | @include thumbnail-size-component(130px, 72px); | ||
50 | |||
51 | display: flex; // Avoids an issue with line-height that adds space below the element | ||
52 | margin-right: 10px; | ||
53 | } | ||
54 | |||
55 | .video-info { | ||
56 | display: flex; | ||
57 | flex-direction: column; | ||
58 | min-width: 0; | ||
59 | |||
60 | a { | ||
61 | color: var(--mainForegroundColor); | ||
62 | width: fit-content; | ||
63 | |||
64 | &:hover { | ||
65 | text-decoration: underline !important; | ||
66 | } | ||
67 | } | ||
68 | |||
69 | .video-info-name { | ||
70 | font-size: 18px; | ||
71 | font-weight: $font-semibold; | ||
72 | |||
73 | @include ellipsis; | ||
74 | } | ||
75 | |||
76 | .video-info-account, .video-info-timestamp { | ||
77 | color: $grey-foreground-color; | ||
78 | } | ||
79 | } | ||
80 | } | ||
81 | |||
82 | .more { | ||
83 | justify-self: flex-end; | ||
84 | margin-left: auto; | ||
85 | cursor: pointer; | ||
86 | display: none; | ||
87 | |||
88 | &.show { | ||
89 | display: block; | ||
90 | } | ||
91 | |||
92 | .icon-more { | ||
93 | @include apply-svg-color($grey-foreground-color); | ||
94 | |||
95 | display: flex; | ||
96 | |||
97 | &::after { | ||
98 | border: none; | ||
99 | } | ||
100 | } | ||
101 | |||
102 | .dropdown-item { | ||
103 | @include dropdown-with-icon-item; | ||
104 | } | ||
105 | |||
106 | .timestamp-options { | ||
107 | padding-top: 0; | ||
108 | padding-left: 35px; | ||
109 | margin-bottom: 15px; | ||
110 | |||
111 | > div { | ||
112 | display: flex; | ||
113 | align-items: center; | ||
114 | } | ||
115 | |||
116 | input { | ||
117 | @include peertube-button; | ||
118 | @include orange-button; | ||
119 | |||
120 | margin-top: 10px; | ||
121 | } | ||
122 | } | ||
123 | } | ||
124 | } | ||