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 | 154 |
1 files changed, 90 insertions, 64 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 3be10078e..4ac89d08f 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 | |||
@@ -2,95 +2,121 @@ | |||
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | @import '_miniature'; | 3 | @import '_miniature'; |
4 | 4 | ||
5 | .videos { | 5 | .video, .cdk-drag-preview { |
6 | .video { | 6 | display: flex; |
7 | align-items: center; | ||
8 | background-color: var(--mainBackgroundColor); | ||
9 | cursor: pointer; | ||
10 | padding: 10px; | ||
11 | border-bottom: 1px solid $separator-border-color; | ||
12 | |||
13 | &:hover { | ||
14 | background-color: rgba(0, 0, 0, 0.05); | ||
15 | |||
16 | .more { | ||
17 | display: block; | ||
18 | } | ||
19 | } | ||
20 | |||
21 | .position { | ||
22 | font-weight: $font-semibold; | ||
23 | margin-right: 10px; | ||
24 | color: $grey-foreground-color; | ||
25 | min-width: 20px; | ||
26 | } | ||
27 | |||
28 | my-video-thumbnail { | ||
29 | display: flex; // Avoids an issue with line-height that adds space below the element | ||
30 | margin-right: 10px; | ||
31 | |||
32 | /deep/ .video-thumbnail { | ||
33 | @include miniature-thumbnail(130px, 72px); | ||
34 | } | ||
35 | } | ||
36 | |||
37 | .video-info { | ||
7 | display: flex; | 38 | display: flex; |
8 | align-items: center; | 39 | flex-direction: column; |
9 | padding: 10px; | ||
10 | border-bottom: 1px solid $separator-border-color; | ||
11 | 40 | ||
12 | &:hover { | 41 | a { |
13 | background-color: rgba(0, 0, 0, 0.05); | 42 | @include disable-default-a-behaviour; |
14 | 43 | ||
15 | .more { | 44 | color: var(--mainForegroundColor); |
16 | display: block; | ||
17 | } | ||
18 | } | 45 | } |
19 | 46 | ||
20 | .position { | 47 | .video-info-name { |
48 | font-size: 18px; | ||
21 | font-weight: $font-semibold; | 49 | font-weight: $font-semibold; |
22 | margin-right: 10px; | ||
23 | color: $grey-foreground-color; | ||
24 | } | 50 | } |
25 | 51 | ||
26 | my-video-thumbnail { | 52 | .video-info-account, .video-info-timestamp { |
27 | display: flex; // Avoids an issue with line-height that adds space below the element | 53 | color: $grey-foreground-color; |
28 | margin-right: 10px; | ||
29 | |||
30 | /deep/ .video-thumbnail { | ||
31 | @include miniature-thumbnail(130px, 72px); | ||
32 | } | ||
33 | } | 54 | } |
55 | } | ||
34 | 56 | ||
35 | .video-info { | 57 | .more { |
36 | display: flex; | 58 | justify-self: flex-end; |
37 | flex-direction: column; | 59 | margin-left: auto; |
60 | cursor: pointer; | ||
61 | display: none; | ||
38 | 62 | ||
39 | a { | 63 | &.show { |
40 | @include disable-default-a-behaviour; | 64 | display: block; |
65 | } | ||
41 | 66 | ||
42 | color: var(--mainForegroundColor); | 67 | .icon-more { |
43 | } | 68 | @include apply-svg-color($grey-foreground-color); |
44 | 69 | ||
45 | .video-info-name { | 70 | &::after { |
46 | font-size: 18px; | 71 | border: none; |
47 | font-weight: $font-semibold; | ||
48 | } | 72 | } |
73 | } | ||
49 | 74 | ||
50 | .video-info-account, .video-info-timestamp { | 75 | .dropdown-item { |
51 | color: $grey-foreground-color; | 76 | @include dropdown-with-icon-item; |
52 | } | ||
53 | } | 77 | } |
54 | 78 | ||
55 | .more { | 79 | .timestamp-options { |
56 | justify-self: flex-end; | 80 | padding-top: 0; |
57 | margin-left: auto; | 81 | padding-left: 35px; |
58 | cursor: pointer; | 82 | margin-bottom: 15px; |
59 | display: none; | ||
60 | 83 | ||
61 | &.show { | 84 | > div { |
62 | display: block; | 85 | display: flex; |
86 | align-items: center; | ||
63 | } | 87 | } |
64 | 88 | ||
65 | .icon-more { | 89 | input { |
66 | @include apply-svg-color($grey-foreground-color); | 90 | @include peertube-button; |
91 | @include orange-button; | ||
67 | 92 | ||
68 | &::after { | 93 | margin-top: 10px; |
69 | border: none; | ||
70 | } | ||
71 | } | 94 | } |
95 | } | ||
96 | } | ||
97 | } | ||
72 | 98 | ||
73 | .dropdown-item { | 99 | // Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples |
74 | @include dropdown-with-icon-item; | 100 | .cdk-drag-preview { |
75 | } | 101 | box-sizing: border-box; |
102 | border-radius: 4px; | ||
103 | box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), | ||
104 | 0 8px 10px 1px rgba(0, 0, 0, 0.14), | ||
105 | 0 3px 14px 2px rgba(0, 0, 0, 0.12); | ||
106 | } | ||
76 | 107 | ||
77 | .timestamp-options { | 108 | .cdk-drag-placeholder { |
78 | padding-top: 0; | 109 | opacity: 0; |
79 | padding-left: 35px; | 110 | } |
80 | margin-bottom: 15px; | ||
81 | 111 | ||
82 | > div { | 112 | .cdk-drag-animating { |
83 | display: flex; | 113 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); |
84 | align-items: center; | 114 | } |
85 | } | ||
86 | 115 | ||
87 | input { | 116 | .video:last-child { |
88 | @include peertube-button; | 117 | border: none; |
89 | @include orange-button; | 118 | } |
90 | 119 | ||
91 | margin-top: 10px; | 120 | .videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) { |
92 | } | 121 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); |
93 | } | ||
94 | } | ||
95 | } | ||
96 | } | 122 | } |