diff options
author | Chocobozzz <me@florianbigard.com> | 2022-06-13 11:42:23 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2022-06-13 11:42:23 +0200 |
commit | f72c78b2f6f7c7fdf1c9582b55498f1a522fe1e1 (patch) | |
tree | 0f234531cc03b51a34b2bdd124096390f5e72f27 /client/src/sass/application.scss | |
parent | dc1296a9abfeeb714f321454dde32389a0f40c7e (diff) | |
download | PeerTube-f72c78b2f6f7c7fdf1c9582b55498f1a522fe1e1.tar.gz PeerTube-f72c78b2f6f7c7fdf1c9582b55498f1a522fe1e1.tar.zst PeerTube-f72c78b2f6f7c7fdf1c9582b55498f1a522fe1e1.zip |
Reorganize application.scss
Diffstat (limited to 'client/src/sass/application.scss')
-rw-r--r-- | client/src/sass/application.scss | 166 |
1 files changed, 1 insertions, 165 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 2aa743cf1..58e77adac 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss | |||
@@ -6,7 +6,7 @@ | |||
6 | 6 | ||
7 | @use '_fonts'; | 7 | @use '_fonts'; |
8 | 8 | ||
9 | @use './classes'; | 9 | @use './class-helpers'; |
10 | @use './custom-markup'; | 10 | @use './custom-markup'; |
11 | @use './ng-select'; | 11 | @use './ng-select'; |
12 | 12 | ||
@@ -132,31 +132,6 @@ code { | |||
132 | vertical-align: middle; | 132 | vertical-align: middle; |
133 | } | 133 | } |
134 | 134 | ||
135 | .form-group { | ||
136 | margin-bottom: 1rem; | ||
137 | } | ||
138 | |||
139 | .form-error, | ||
140 | .form-warning { | ||
141 | display: block; | ||
142 | margin-top: 5px; | ||
143 | } | ||
144 | |||
145 | .form-error { | ||
146 | color: $red; | ||
147 | } | ||
148 | |||
149 | .input-error, | ||
150 | my-input-text ::ng-deep input { | ||
151 | border-color: $red !important; | ||
152 | } | ||
153 | |||
154 | .full-width { | ||
155 | width: 100%; | ||
156 | margin: 0 auto; | ||
157 | max-width: initial; | ||
158 | } | ||
159 | |||
160 | .main-col { | 135 | .main-col { |
161 | @include margin-left($menu-width); | 136 | @include margin-left($menu-width); |
162 | 137 | ||
@@ -210,62 +185,6 @@ my-input-text ::ng-deep input { | |||
210 | } | 185 | } |
211 | } | 186 | } |
212 | 187 | ||
213 | .title-page { | ||
214 | @include disable-default-a-behaviour; | ||
215 | @include margin-right(55px); | ||
216 | |||
217 | opacity: 0.6; | ||
218 | color: pvar(--mainForegroundColor); | ||
219 | font-size: 16px; | ||
220 | display: inline-block; | ||
221 | font-weight: $font-semibold; | ||
222 | border-bottom: 2px solid transparent; | ||
223 | |||
224 | &.title-page-single { | ||
225 | margin-top: 30px; | ||
226 | margin-bottom: 25px; | ||
227 | } | ||
228 | |||
229 | &.active { | ||
230 | border-bottom-color: pvar(--mainColor); | ||
231 | } | ||
232 | |||
233 | &.title-page-single { | ||
234 | font-size: 125%; | ||
235 | } | ||
236 | |||
237 | &:hover, | ||
238 | &:active, | ||
239 | &:focus { | ||
240 | color: pvar(--mainForegroundColor); | ||
241 | } | ||
242 | |||
243 | &.active, | ||
244 | &:hover, | ||
245 | &:active, | ||
246 | &:focus, | ||
247 | &.title-page-single { | ||
248 | opacity: 1; | ||
249 | outline: 0 hidden !important; | ||
250 | } | ||
251 | |||
252 | @media screen and (max-width: $mobile-view) { | ||
253 | @include margin-left(15px); | ||
254 | } | ||
255 | } | ||
256 | |||
257 | .title-page-about, | ||
258 | .title-page-settings { | ||
259 | white-space: nowrap; | ||
260 | font-size: 115%; | ||
261 | } | ||
262 | |||
263 | .admin-sub-header { | ||
264 | display: flex; | ||
265 | align-items: center; | ||
266 | margin-bottom: 30px; | ||
267 | } | ||
268 | |||
269 | // In tables, don't have a hover different background | 188 | // In tables, don't have a hover different background |
270 | table { | 189 | table { |
271 | my-edit-button, | 190 | my-edit-button, |
@@ -283,18 +202,6 @@ table { | |||
283 | } | 202 | } |
284 | } | 203 | } |
285 | 204 | ||
286 | .no-results { | ||
287 | height: 40vh; | ||
288 | max-height: 500px; | ||
289 | |||
290 | display: flex; | ||
291 | flex-direction: column; | ||
292 | align-items: center; | ||
293 | justify-content: center; | ||
294 | font-size: 16px; | ||
295 | font-weight: $font-semibold; | ||
296 | } | ||
297 | |||
298 | .dropdown-item { | 205 | .dropdown-item { |
299 | @include dropdown-with-icon-item; | 206 | @include dropdown-with-icon-item; |
300 | 207 | ||
@@ -311,73 +218,6 @@ my-global-icon[iconName=external-link] { | |||
311 | color: pvar(--inputPlaceholderColor); | 218 | color: pvar(--inputPlaceholderColor); |
312 | } | 219 | } |
313 | 220 | ||
314 | .chevron-down { | ||
315 | @include chevron-down(0.55rem, 0.15rem); | ||
316 | |||
317 | margin: 0 8px; | ||
318 | } | ||
319 | |||
320 | .chevron-up { | ||
321 | @include chevron-up(0.55rem, 0.15rem); | ||
322 | |||
323 | margin: 0 8px; | ||
324 | } | ||
325 | |||
326 | .chevron-right { | ||
327 | @include chevron-right(0.55rem, 0.15rem); | ||
328 | |||
329 | margin: 0 8px; | ||
330 | } | ||
331 | |||
332 | .chevron-left { | ||
333 | @include chevron-left(0.55rem, 0.15rem); | ||
334 | |||
335 | margin: 0 8px; | ||
336 | } | ||
337 | |||
338 | /* offsetTop for scrollToAnchor */ | ||
339 | |||
340 | .anchor { | ||
341 | position: relative; | ||
342 | top: #{-($header-height + 20px)}; | ||
343 | } | ||
344 | |||
345 | .offset-content { // if sub-menu fixed | ||
346 | .anchor { | ||
347 | top: #{-($header-height + $sub-menu-height + 20px)}; | ||
348 | } | ||
349 | } | ||
350 | |||
351 | .form-group-description { | ||
352 | @extend .muted !optional; | ||
353 | |||
354 | font-size: 90%; | ||
355 | margin-top: 10px; | ||
356 | } | ||
357 | |||
358 | .callout { | ||
359 | padding: 1.25rem; | ||
360 | border: 1px solid #eee; | ||
361 | border-radius: .25rem; | ||
362 | position: relative; | ||
363 | |||
364 | > label { | ||
365 | position: relative; | ||
366 | top: -5px; | ||
367 | left: -10px; | ||
368 | color: #6c757d !important; | ||
369 | } | ||
370 | |||
371 | &:not(.callout-light) { | ||
372 | border-left-width: .25rem; | ||
373 | } | ||
374 | |||
375 | &.callout-info { | ||
376 | border-color: pvar(--mainColorLightest); | ||
377 | border-left-color: pvar(--mainColor); | ||
378 | } | ||
379 | } | ||
380 | |||
381 | @media screen and (max-width: #{breakpoint(xxl)}) { | 221 | @media screen and (max-width: #{breakpoint(xxl)}) { |
382 | .main-col { | 222 | .main-col { |
383 | --horizontalMarginContent: #{math.div($not-expanded-horizontal-margins, 2)}; | 223 | --horizontalMarginContent: #{math.div($not-expanded-horizontal-margins, 2)}; |
@@ -434,10 +274,6 @@ my-global-icon[iconName=external-link] { | |||
434 | padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view; | 274 | padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view; |
435 | } | 275 | } |
436 | 276 | ||
437 | .admin-sub-header { | ||
438 | flex-direction: column; | ||
439 | } | ||
440 | |||
441 | my-markdown-textarea { | 277 | my-markdown-textarea { |
442 | .root { | 278 | .root { |
443 | max-width: 100% !important; | 279 | max-width: 100% !important; |