aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/include
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-03-26 15:53:18 +0100
committerChocobozzz <chocobozzz@cpy.re>2021-03-31 09:05:51 +0200
commit900f7820814b95b07ef0bcac04036a95abfbe060 (patch)
tree4033df58ed2da815f5d3d26313a1c50668d49d54 /client/src/sass/include
parent67264e060b6068399dae9a67abae035a73b84af1 (diff)
downloadPeerTube-900f7820814b95b07ef0bcac04036a95abfbe060.tar.gz
PeerTube-900f7820814b95b07ef0bcac04036a95abfbe060.tar.zst
PeerTube-900f7820814b95b07ef0bcac04036a95abfbe060.zip
Redesign account's channels page
Diffstat (limited to 'client/src/sass/include')
-rw-r--r--client/src/sass/include/_miniature.scss41
-rw-r--r--client/src/sass/include/_variables.scss1
2 files changed, 32 insertions, 10 deletions
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 134b307b1..326d4677a 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -176,14 +176,41 @@ $play-overlay-width: 18px;
176 } 176 }
177} 177}
178 178
179@mixin fluid-videos-miniature-layout { 179// Use margin by default, or padding if $margin is false
180 margin-left: $not-expanded-horizontal-margins !important; 180@mixin fluid-videos-miniature-margins ($margin: true, $min-margin: 0) {
181 margin-right: $not-expanded-horizontal-margins !important; 181 @if $margin {
182 margin-left: $not-expanded-horizontal-margins !important;
183 margin-right: $not-expanded-horizontal-margins !important;
184 } @else {
185 padding-left: $not-expanded-horizontal-margins !important;
186 padding-right: $not-expanded-horizontal-margins !important;
187 }
182 188
183 @media screen and (max-width: $mobile-view) { 189 @media screen and (max-width: $mobile-view) {
184 width: auto; 190 width: auto;
185 margin: 0 !important;
186 191
192 @if $margin {
193 margin: $min-margin !important;
194 } @else {
195 padding: $min-margin !important;
196 }
197 }
198
199 @media screen and (min-width: #{breakpoint(fhd)}) {
200 @if $margin {
201 margin-left: 6vw !important;
202 margin-right: 6vw !important;
203 } @else {
204 padding-left: 6vw !important;
205 padding-right: 6vw !important;
206 }
207 }
208}
209
210@mixin fluid-videos-miniature-layout {
211 @include fluid-videos-miniature-margins;
212
213 @media screen and (max-width: $mobile-view) {
187 .videos { 214 .videos {
188 text-align: center; 215 text-align: center;
189 216
@@ -209,13 +236,7 @@ $play-overlay-width: 18px;
209 } 236 }
210 } 237 }
211 238
212 @media screen and (min-width: #{breakpoint(fhd)}) {
213 margin-left: 6vw !important;
214 margin-right: 6vw !important;
215 }
216
217 @media screen and (min-width: $mobile-view) { 239 @media screen and (min-width: $mobile-view) {
218
219 .videos { 240 .videos {
220 --miniature-min-width: #{$video-thumbnail-width - 15px}; 241 --miniature-min-width: #{$video-thumbnail-width - 15px};
221 --miniature-max-width: #{$video-thumbnail-width}; 242 --miniature-max-width: #{$video-thumbnail-width};
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index bcd28215b..724a897fa 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -52,6 +52,7 @@ $sub-menu-color: #F7F7F7;
52$sub-menu-height: 81px; 52$sub-menu-height: 81px;
53 53
54$channel-background-color: #f6ede8; 54$channel-background-color: #f6ede8;
55$max-channels-width: 1200px;
55 56
56$footer-height: 30px; 57$footer-height: 30px;
57$footer-margin: 30px; 58$footer-margin: 30px;