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 | 96 |
1 files changed, 65 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 cb9ab9a17..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,6 +1,10 @@ | |||
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 { |
@@ -24,31 +28,6 @@ | |||
24 | font-size: 18px; | 28 | font-size: 18px; |
25 | flex-grow: 1; | 29 | flex-grow: 1; |
26 | } | 30 | } |
27 | |||
28 | .options { | ||
29 | display: flex; | ||
30 | align-items: center; | ||
31 | font-size: 14px; | ||
32 | cursor: pointer; | ||
33 | |||
34 | my-global-icon { | ||
35 | @include apply-svg-color(#333); | ||
36 | |||
37 | width: 16px; | ||
38 | height: 23px; | ||
39 | margin-right: 3px; | ||
40 | } | ||
41 | } | ||
42 | } | ||
43 | |||
44 | .options-row { | ||
45 | margin-top: 10px; | ||
46 | padding-left: 10px; | ||
47 | |||
48 | > div { | ||
49 | display: flex; | ||
50 | align-items: center; | ||
51 | } | ||
52 | } | 31 | } |
53 | } | 32 | } |
54 | 33 | ||
@@ -58,8 +37,16 @@ | |||
58 | } | 37 | } |
59 | 38 | ||
60 | .playlist { | 39 | .playlist { |
61 | display: inline-flex; | 40 | padding: 8px 10px 8px 24px; |
62 | 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; | ||
63 | 50 | ||
64 | my-peertube-checkbox { | 51 | my-peertube-checkbox { |
65 | margin-right: 10px; | 52 | margin-right: 10px; |
@@ -69,11 +56,58 @@ | |||
69 | .display-name { | 56 | .display-name { |
70 | display: flex; | 57 | display: flex; |
71 | 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; | ||
72 | 107 | ||
73 | .timestamp-info { | 108 | div { |
74 | font-size: 0.9em; | 109 | margin-right: $timestamp-margin-right; |
75 | color: pvar(--greyForegroundColor); | 110 | width: $timestamp-width; |
76 | margin-left: 5px; | ||
77 | } | 111 | } |
78 | } | 112 | } |
79 | } | 113 | } |