diff options
Diffstat (limited to 'client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss')
-rw-r--r-- | client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss | 100 |
1 files changed, 69 insertions, 31 deletions
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss index 47baa997b..d2c8804e3 100644 --- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss | |||
@@ -1,12 +1,20 @@ | |||
1 | @import '_variables'; | 1 | @import '_variables'; |
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | 3 | ||
4 | $optional-rows-checkbox-width: 34px; | ||
5 | $timestamp-width: 50px; | ||
6 | $timestamp-margin-right: 10px; | ||
7 | |||
4 | .header, | 8 | .header, |
5 | .dropdown-item, | 9 | .dropdown-item, |
6 | .input-container { | 10 | .input-container { |
7 | padding: 8px 24px; | 11 | padding: 8px 24px; |
8 | } | 12 | } |
9 | 13 | ||
14 | .dropdown-item:active { | ||
15 | color: inherit; | ||
16 | } | ||
17 | |||
10 | .header { | 18 | .header { |
11 | min-width: 240px; | 19 | min-width: 240px; |
12 | margin-bottom: 10px; | 20 | margin-bottom: 10px; |
@@ -20,31 +28,6 @@ | |||
20 | font-size: 18px; | 28 | font-size: 18px; |
21 | flex-grow: 1; | 29 | flex-grow: 1; |
22 | } | 30 | } |
23 | |||
24 | .options { | ||
25 | display: flex; | ||
26 | align-items: center; | ||
27 | font-size: 14px; | ||
28 | cursor: pointer; | ||
29 | |||
30 | my-global-icon { | ||
31 | @include apply-svg-color(#333); | ||
32 | |||
33 | width: 16px; | ||
34 | height: 23px; | ||
35 | margin-right: 3px; | ||
36 | } | ||
37 | } | ||
38 | } | ||
39 | |||
40 | .options-row { | ||
41 | margin-top: 10px; | ||
42 | padding-left: 10px; | ||
43 | |||
44 | > div { | ||
45 | display: flex; | ||
46 | align-items: center; | ||
47 | } | ||
48 | } | 31 | } |
49 | } | 32 | } |
50 | 33 | ||
@@ -54,8 +37,16 @@ | |||
54 | } | 37 | } |
55 | 38 | ||
56 | .playlist { | 39 | .playlist { |
57 | display: inline-flex; | 40 | padding: 8px 10px 8px 24px; |
58 | cursor: pointer; | 41 | |
42 | &.has-optional-row:hover { | ||
43 | background-color: inherit; | ||
44 | } | ||
45 | } | ||
46 | |||
47 | .primary-row, | ||
48 | .optional-rows > div { | ||
49 | display: flex; | ||
59 | 50 | ||
60 | my-peertube-checkbox { | 51 | my-peertube-checkbox { |
61 | margin-right: 10px; | 52 | margin-right: 10px; |
@@ -65,11 +56,58 @@ | |||
65 | .display-name { | 56 | .display-name { |
66 | display: flex; | 57 | display: flex; |
67 | align-items: flex-end; | 58 | align-items: flex-end; |
59 | flex-grow: 1; | ||
60 | margin: 0; | ||
61 | font-weight: $font-regular; | ||
62 | cursor: pointer; | ||
63 | } | ||
64 | |||
65 | .optional-row-icon { | ||
66 | display: flex; | ||
67 | align-items: center; | ||
68 | font-size: 14px; | ||
69 | cursor: pointer; | ||
70 | |||
71 | my-global-icon { | ||
72 | @include apply-svg-color(#333); | ||
73 | |||
74 | width: 19px; | ||
75 | height: 19px; | ||
76 | margin-right: 0; | ||
77 | } | ||
78 | } | ||
79 | |||
80 | my-timestamp-input { | ||
81 | margin-right: $timestamp-margin-right; | ||
82 | |||
83 | ::ng-deep .ui-inputtext { | ||
84 | padding: 0; | ||
85 | width: $timestamp-width; | ||
86 | } | ||
87 | } | ||
88 | } | ||
89 | |||
90 | .optional-rows { | ||
91 | > div { | ||
92 | padding: 8px 5px 5px 10px; | ||
93 | } | ||
94 | |||
95 | my-peertube-checkbox { | ||
96 | display: block; | ||
97 | width: $optional-rows-checkbox-width; | ||
98 | margin-right: 0 !important; | ||
99 | } | ||
100 | |||
101 | .labels { | ||
102 | margin-left: $optional-rows-checkbox-width; | ||
103 | font-size: 13px; | ||
104 | color: pvar(--greyForegroundColor); | ||
105 | padding-top: 5px; | ||
106 | padding-bottom: 0; | ||
68 | 107 | ||
69 | .timestamp-info { | 108 | div { |
70 | font-size: 0.9em; | 109 | margin-right: $timestamp-margin-right; |
71 | color: pvar(--greyForegroundColor); | 110 | width: $timestamp-width; |
72 | margin-left: 5px; | ||
73 | } | 111 | } |
74 | } | 112 | } |
75 | } | 113 | } |