diff options
Diffstat (limited to 'client/src/app/+video-channels/video-channels.component.scss')
-rw-r--r-- | client/src/app/+video-channels/video-channels.component.scss | 19 |
1 files changed, 17 insertions, 2 deletions
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index 6470629f8..a8e823b40 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss | |||
@@ -1,3 +1,9 @@ | |||
1 | // Bootstrap grid utilities require functions, variables and mixins | ||
2 | @import 'node_modules/bootstrap/scss/functions'; | ||
3 | @import 'node_modules/bootstrap/scss/variables'; | ||
4 | @import 'node_modules/bootstrap/scss/mixins'; | ||
5 | @import 'node_modules/bootstrap/scss/grid'; | ||
6 | |||
1 | @import '_variables'; | 7 | @import '_variables'; |
2 | @import '_mixins'; | 8 | @import '_mixins'; |
3 | 9 | ||
@@ -14,7 +20,7 @@ | |||
14 | grid-template-rows: 1fr auto / 1fr auto; | 20 | grid-template-rows: 1fr auto / 1fr auto; |
15 | grid-template-areas: "name buttons" "lower buttons"; | 21 | grid-template-areas: "name buttons" "lower buttons"; |
16 | 22 | ||
17 | @media screen and (max-width: #{map-get($grid-breakpoints, lg)}) { | 23 | @include media-breakpoint-down(lg) { |
18 | grid-template-areas: "name name" "lower buttons"; | 24 | grid-template-areas: "name name" "lower buttons"; |
19 | } | 25 | } |
20 | } | 26 | } |
@@ -38,11 +44,20 @@ | |||
38 | display: flex; | 44 | display: flex; |
39 | height: max-content; | 45 | height: max-content; |
40 | margin-left: auto; | 46 | margin-left: auto; |
41 | margin-top: 20px; | 47 | margin-top: 10px; |
42 | 48 | ||
43 | grid-row: buttons-start / span buttons-end; | 49 | grid-row: buttons-start / span buttons-end; |
44 | grid-column: buttons-start; | 50 | grid-column: buttons-start; |
45 | 51 | ||
52 | @include media-breakpoint-down(lg) { | ||
53 | flex-flow: column-reverse; | ||
54 | |||
55 | a { | ||
56 | margin-top: 0.25rem; | ||
57 | margin-right: 0 !important; | ||
58 | } | ||
59 | } | ||
60 | |||
46 | a { | 61 | a { |
47 | @include peertube-button-outline; | 62 | @include peertube-button-outline; |
48 | line-height: 1.8; | 63 | line-height: 1.8; |