diff options
-rw-r--r-- | client/src/app/+video-channels/video-channels.component.scss | 37 | ||||
-rw-r--r-- | client/src/app/shared/shared-user-subscription/subscribe-button.component.scss | 2 |
2 files changed, 22 insertions, 17 deletions
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index c8b182196..aba266fcc 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss | |||
@@ -34,14 +34,15 @@ | |||
34 | } | 34 | } |
35 | 35 | ||
36 | .channel-info { | 36 | .channel-info { |
37 | // Use the same margin as the videos grid | ||
37 | @include grid-videos-miniature-margins(false, 15px); | 38 | @include grid-videos-miniature-margins(false, 15px); |
39 | @include margin-bottom(3rem); | ||
38 | 40 | ||
39 | display: grid; | 41 | display: grid; |
40 | grid-template-columns: 1fr auto; | 42 | grid-template-columns: 1fr auto; |
41 | grid-template-rows: auto auto; | 43 | grid-template-rows: auto auto; |
42 | 44 | ||
43 | background-color: pvar(--channelBackgroundColor); | 45 | background-color: pvar(--channelBackgroundColor); |
44 | margin-bottom: 45px; | ||
45 | padding-top: var(--myGlobalTopPadding); | 46 | padding-top: var(--myGlobalTopPadding); |
46 | font-size: var(--myFontSize); | 47 | font-size: var(--myFontSize); |
47 | } | 48 | } |
@@ -68,24 +69,26 @@ | |||
68 | 69 | ||
69 | .channel-buttons { | 70 | .channel-buttons { |
70 | display: flex; | 71 | display: flex; |
72 | align-items: center; | ||
71 | flex-wrap: wrap; | 73 | flex-wrap: wrap; |
74 | gap: 1rem; | ||
72 | 75 | ||
73 | > *:not(:last-child) { | 76 | &.right { |
74 | @include margin-right(15px); | 77 | @include margin-left(3rem); |
75 | } | 78 | } |
76 | } | ||
77 | 79 | ||
78 | .channel-buttons.right { | 80 | // Only used on small screen |
79 | @include margin-left(45px); | 81 | &.bottom { |
80 | } | 82 | @include margin-bottom(2rem); |
81 | 83 | ||
82 | // Only used by mobile | 84 | justify-content: center; |
83 | .channel-buttons.bottom { | 85 | display: none; |
84 | display: none; | 86 | } |
85 | } | 87 | } |
86 | 88 | ||
87 | .owner-card { | 89 | .owner-card { |
88 | @include margin-left(105px); | 90 | @include margin-left(105px); |
91 | |||
89 | grid-column: 2; | 92 | grid-column: 2; |
90 | // Takes all the column | 93 | // Takes all the column |
91 | grid-row: 1 / 3; | 94 | grid-row: 1 / 3; |
@@ -194,14 +197,14 @@ | |||
194 | display: inline-block; | 197 | display: inline-block; |
195 | } | 198 | } |
196 | 199 | ||
197 | .channel-buttons.bottom { | 200 | .channel-buttons { |
198 | display: flex; | 201 | &.right { |
199 | justify-content: center; | 202 | display: none; |
200 | margin-bottom: 30px; | 203 | } |
201 | } | ||
202 | 204 | ||
203 | .channel-buttons.right { | 205 | &.bottom { |
204 | display: none; | 206 | display: flex; |
207 | } | ||
205 | } | 208 | } |
206 | 209 | ||
207 | .owner-card { | 210 | .owner-card { |
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss index 889596b62..972731116 100644 --- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss +++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss | |||
@@ -4,6 +4,8 @@ | |||
4 | .btn-group-subscribe { | 4 | .btn-group-subscribe { |
5 | @include peertube-button; | 5 | @include peertube-button; |
6 | 6 | ||
7 | padding: 0; | ||
8 | |||
7 | button.dropdown-toggle { | 9 | button.dropdown-toggle { |
8 | font-size: $button-font-size; | 10 | font-size: $button-font-size; |
9 | line-height: 1.2; | 11 | line-height: 1.2; |