diff options
Diffstat (limited to 'client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss')
-rw-r--r-- | client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss index 5e6774739..3be10078e 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss | |||
@@ -1,2 +1,96 @@ | |||
1 | @import '_variables'; | 1 | @import '_variables'; |
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | @import '_miniature'; | ||
4 | |||
5 | .videos { | ||
6 | .video { | ||
7 | display: flex; | ||
8 | align-items: center; | ||
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 | .position { | ||
21 | font-weight: $font-semibold; | ||
22 | margin-right: 10px; | ||
23 | color: $grey-foreground-color; | ||
24 | } | ||
25 | |||
26 | my-video-thumbnail { | ||
27 | display: flex; // Avoids an issue with line-height that adds space below the element | ||
28 | margin-right: 10px; | ||
29 | |||
30 | /deep/ .video-thumbnail { | ||
31 | @include miniature-thumbnail(130px, 72px); | ||
32 | } | ||
33 | } | ||
34 | |||
35 | .video-info { | ||
36 | display: flex; | ||
37 | flex-direction: column; | ||
38 | |||
39 | a { | ||
40 | @include disable-default-a-behaviour; | ||
41 | |||
42 | color: var(--mainForegroundColor); | ||
43 | } | ||
44 | |||
45 | .video-info-name { | ||
46 | font-size: 18px; | ||
47 | font-weight: $font-semibold; | ||
48 | } | ||
49 | |||
50 | .video-info-account, .video-info-timestamp { | ||
51 | color: $grey-foreground-color; | ||
52 | } | ||
53 | } | ||
54 | |||
55 | .more { | ||
56 | justify-self: flex-end; | ||
57 | margin-left: auto; | ||
58 | cursor: pointer; | ||
59 | display: none; | ||
60 | |||
61 | &.show { | ||
62 | display: block; | ||
63 | } | ||
64 | |||
65 | .icon-more { | ||
66 | @include apply-svg-color($grey-foreground-color); | ||
67 | |||
68 | &::after { | ||
69 | border: none; | ||
70 | } | ||
71 | } | ||
72 | |||
73 | .dropdown-item { | ||
74 | @include dropdown-with-icon-item; | ||
75 | } | ||
76 | |||
77 | .timestamp-options { | ||
78 | padding-top: 0; | ||
79 | padding-left: 35px; | ||
80 | margin-bottom: 15px; | ||
81 | |||
82 | > div { | ||
83 | display: flex; | ||
84 | align-items: center; | ||
85 | } | ||
86 | |||
87 | input { | ||
88 | @include peertube-button; | ||
89 | @include orange-button; | ||
90 | |||
91 | margin-top: 10px; | ||
92 | } | ||
93 | } | ||
94 | } | ||
95 | } | ||
96 | } | ||