diff options
Diffstat (limited to 'client/src/sass/include')
-rw-r--r-- | client/src/sass/include/_miniature.scss | 97 | ||||
-rw-r--r-- | client/src/sass/include/_mixins.scss | 25 | ||||
-rw-r--r-- | client/src/sass/include/_variables.scss | 4 |
3 files changed, 114 insertions, 12 deletions
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index b62187fd2..0c2ee2d0d 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss | |||
@@ -138,3 +138,100 @@ $play-overlay-width: 18px; | |||
138 | } | 138 | } |
139 | } | 139 | } |
140 | } | 140 | } |
141 | |||
142 | @mixin miniature-rows { | ||
143 | max-height: 540px; // 2 rows max | ||
144 | overflow: hidden; | ||
145 | padding-top: 10px; | ||
146 | |||
147 | &:first-child { | ||
148 | padding-top: 30px; | ||
149 | } | ||
150 | |||
151 | my-video-miniature { | ||
152 | text-align: left; | ||
153 | } | ||
154 | |||
155 | .section-title { | ||
156 | font-size: 24px; | ||
157 | font-weight: $font-semibold; | ||
158 | margin-bottom: 30px; | ||
159 | display: flex; | ||
160 | justify-content: space-between; | ||
161 | |||
162 | a { | ||
163 | &:hover, &:focus:not(.focus-visible), &:active { | ||
164 | text-decoration: none; | ||
165 | outline: none; | ||
166 | } | ||
167 | |||
168 | color: var(--mainForegroundColor); | ||
169 | } | ||
170 | } | ||
171 | |||
172 | &.channel { | ||
173 | .section-title { | ||
174 | a { | ||
175 | display: flex; | ||
176 | width: fit-content; | ||
177 | align-items: center; | ||
178 | |||
179 | img { | ||
180 | @include avatar(28px); | ||
181 | |||
182 | margin-right: 8px; | ||
183 | } | ||
184 | } | ||
185 | |||
186 | .followers { | ||
187 | color: $grey-foreground-color; | ||
188 | font-weight: normal; | ||
189 | font-size: 14px; | ||
190 | margin-left: 10px; | ||
191 | position: relative; | ||
192 | top: 2px; | ||
193 | } | ||
194 | } | ||
195 | } | ||
196 | |||
197 | @media screen and (max-width: $mobile-view) { | ||
198 | max-height: initial; | ||
199 | overflow: initial; | ||
200 | |||
201 | @include video-miniature-small-screen; | ||
202 | |||
203 | .section-title { | ||
204 | font-size: 17px; | ||
205 | } | ||
206 | } | ||
207 | } | ||
208 | |||
209 | @mixin adapt-margin-content-width { | ||
210 | width: $video-miniature-width * 6; | ||
211 | margin: auto !important; | ||
212 | |||
213 | @media screen and (max-width: 1800px) { | ||
214 | width: $video-miniature-width * 5; | ||
215 | } | ||
216 | |||
217 | @media screen and (max-width: 1800px - $video-miniature-width) { | ||
218 | width: $video-miniature-width * 4; | ||
219 | } | ||
220 | |||
221 | @media screen and (max-width: 1800px - (2* $video-miniature-width)) { | ||
222 | width: $video-miniature-width * 3; | ||
223 | } | ||
224 | |||
225 | @media screen and (max-width: 1800px - (3* $video-miniature-width)) { | ||
226 | width: $video-miniature-width * 2; | ||
227 | } | ||
228 | |||
229 | @media screen and (max-width: 500px) { | ||
230 | width: auto; | ||
231 | margin: 0 !important; | ||
232 | |||
233 | .videos { | ||
234 | @include video-miniature-small-screen; | ||
235 | } | ||
236 | } | ||
237 | } | ||
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 262a8136f..f608e9299 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss | |||
@@ -235,6 +235,14 @@ | |||
235 | position: relative; | 235 | position: relative; |
236 | font-size: 15px; | 236 | font-size: 15px; |
237 | 237 | ||
238 | &.disabled { | ||
239 | background-color: #E5E5E5; | ||
240 | |||
241 | select { | ||
242 | cursor: default; | ||
243 | } | ||
244 | } | ||
245 | |||
238 | @media screen and (max-width: $width) { | 246 | @media screen and (max-width: $width) { |
239 | width: 100%; | 247 | width: 100%; |
240 | } | 248 | } |
@@ -282,16 +290,6 @@ | |||
282 | } | 290 | } |
283 | } | 291 | } |
284 | 292 | ||
285 | @mixin peertube-select-disabled-container ($width) { | ||
286 | @include peertube-select-container($width); | ||
287 | |||
288 | background-color: #E5E5E5; | ||
289 | |||
290 | select { | ||
291 | cursor: default; | ||
292 | } | ||
293 | } | ||
294 | |||
295 | // Thanks: https://codepen.io/triss90/pen/XNEdRe/ | 293 | // Thanks: https://codepen.io/triss90/pen/XNEdRe/ |
296 | @mixin peertube-radio-container { | 294 | @mixin peertube-radio-container { |
297 | input[type="radio"] { | 295 | input[type="radio"] { |
@@ -331,7 +329,12 @@ | |||
331 | } | 329 | } |
332 | 330 | ||
333 | @mixin peertube-checkbox ($border-width) { | 331 | @mixin peertube-checkbox ($border-width) { |
334 | display: none; | 332 | opacity: 0; |
333 | position: absolute; | ||
334 | |||
335 | &:focus + span { | ||
336 | outline: 1px solid #1e5180; | ||
337 | } | ||
335 | 338 | ||
336 | & + span { | 339 | & + span { |
337 | position: relative; | 340 | position: relative; |
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index c7b205b11..aafeda257 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss | |||
@@ -71,7 +71,9 @@ $variables: ( | |||
71 | --menuForegroundColor: var(--menuForegroundColor), | 71 | --menuForegroundColor: var(--menuForegroundColor), |
72 | --submenuColor: var(--submenuColor), | 72 | --submenuColor: var(--submenuColor), |
73 | --inputColor: var(--inputColor), | 73 | --inputColor: var(--inputColor), |
74 | --inputPlaceholderColor: var(--inputPlaceholderColor) | 74 | --inputPlaceholderColor: var(--inputPlaceholderColor), |
75 | --embedForegroundColor: var(--embedForegroundColor), | ||
76 | --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor) | ||
75 | ); | 77 | ); |
76 | 78 | ||
77 | /*** theme helper ***/ | 79 | /*** theme helper ***/ |