diff options
author | Chocobozzz <me@florianbigard.com> | 2021-03-26 15:53:18 +0100 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2021-03-31 09:05:51 +0200 |
commit | 900f7820814b95b07ef0bcac04036a95abfbe060 (patch) | |
tree | 4033df58ed2da815f5d3d26313a1c50668d49d54 /client/src/app/+video-channels/video-channels.component.scss | |
parent | 67264e060b6068399dae9a67abae035a73b84af1 (diff) | |
download | PeerTube-900f7820814b95b07ef0bcac04036a95abfbe060.tar.gz PeerTube-900f7820814b95b07ef0bcac04036a95abfbe060.tar.zst PeerTube-900f7820814b95b07ef0bcac04036a95abfbe060.zip |
Redesign account's channels page
Diffstat (limited to 'client/src/app/+video-channels/video-channels.component.scss')
-rw-r--r-- | client/src/app/+video-channels/video-channels.component.scss | 14 |
1 files changed, 8 insertions, 6 deletions
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index f5547b4e9..fb71844bd 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss | |||
@@ -4,7 +4,7 @@ | |||
4 | @import '_miniature'; | 4 | @import '_miniature'; |
5 | 5 | ||
6 | .root { | 6 | .root { |
7 | --myGlobalPadding: 60px; | 7 | --myGlobalTopPadding: 60px; |
8 | --myChannelImgMargin: 30px; | 8 | --myChannelImgMargin: 30px; |
9 | --myFontSize: 16px; | 9 | --myFontSize: 16px; |
10 | --myGreyChannelFontSize: 16px; | 10 | --myGreyChannelFontSize: 16px; |
@@ -16,17 +16,19 @@ | |||
16 | } | 16 | } |
17 | 17 | ||
18 | .links { | 18 | .links { |
19 | @include fluid-videos-miniature-layout; | 19 | @include fluid-videos-miniature-margins; |
20 | } | 20 | } |
21 | 21 | ||
22 | .channel-info { | 22 | .channel-info { |
23 | @include fluid-videos-miniature-margins(false, 15px); | ||
24 | |||
23 | display: grid; | 25 | display: grid; |
24 | grid-template-columns: 1fr auto; | 26 | grid-template-columns: 1fr auto; |
25 | grid-template-rows: auto auto; | 27 | grid-template-rows: auto auto; |
26 | 28 | ||
27 | background-color: pvar(--channelBackgroundColor); | 29 | background-color: pvar(--channelBackgroundColor); |
28 | margin-bottom: 45px; | 30 | margin-bottom: 45px; |
29 | padding: var(--myGlobalPadding) var(--myGlobalPadding) 0 var(--myGlobalPadding); | 31 | padding-top: var(--myGlobalTopPadding); |
30 | font-size: var(--myFontSize); | 32 | font-size: var(--myFontSize); |
31 | } | 33 | } |
32 | 34 | ||
@@ -146,7 +148,7 @@ | |||
146 | 148 | ||
147 | @media screen and (max-width: 1100px) { | 149 | @media screen and (max-width: 1100px) { |
148 | .root { | 150 | .root { |
149 | --myGlobalPadding: 45px; | 151 | --myGlobalTopPadding: 45px; |
150 | --myChannelImgMargin: 15px; | 152 | --myChannelImgMargin: 15px; |
151 | } | 153 | } |
152 | 154 | ||
@@ -184,7 +186,7 @@ | |||
184 | display: block; | 186 | display: block; |
185 | width: 100%; | 187 | width: 100%; |
186 | border-bottom: 2px solid $separator-border-color; | 188 | border-bottom: 2px solid $separator-border-color; |
187 | padding: var(--myGlobalPadding) 45px; | 189 | padding: var(--myGlobalTopPadding) 45px; |
188 | margin-bottom: 60px; | 190 | margin-bottom: 60px; |
189 | } | 191 | } |
190 | 192 | ||
@@ -223,7 +225,7 @@ | |||
223 | 225 | ||
224 | @media screen and (max-width: $mobile-view) { | 226 | @media screen and (max-width: $mobile-view) { |
225 | .root { | 227 | .root { |
226 | --myGlobalPadding: 15px; | 228 | --myGlobalTopPadding: 15px; |
227 | --myFontSize: 14px; | 229 | --myFontSize: 14px; |
228 | --myGreyChannelFontSize: 13px; | 230 | --myGreyChannelFontSize: 13px; |
229 | --myGreyOwnerFontSize: 13px; | 231 | --myGreyOwnerFontSize: 13px; |