aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/menu/menu.component.scss
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-15 13:43:50 +0200
committerChocobozzz <me@florianbigard.com>2021-04-15 13:43:50 +0200
commitf1ac63488c0050fec1c4d713d74db4f4ea944395 (patch)
treefbb3a33152bef18bac501c1a4c3f46ae9b586bb6 /client/src/app/menu/menu.component.scss
parentfe88ca697d4c43b24cdc2462f5e4e83548776a51 (diff)
downloadPeerTube-f1ac63488c0050fec1c4d713d74db4f4ea944395.tar.gz
PeerTube-f1ac63488c0050fec1c4d713d74db4f4ea944395.tar.zst
PeerTube-f1ac63488c0050fec1c4d713d74db4f4ea944395.zip
Refactor menu css
Diffstat (limited to 'client/src/app/menu/menu.component.scss')
-rw-r--r--client/src/app/menu/menu.component.scss225
1 files changed, 94 insertions, 131 deletions
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 729dbc6ee..00d1a1f69 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -5,7 +5,9 @@ $menu-link-icon-size: 22px;
5$menu-link-icon-margin-right: 18px; 5$menu-link-icon-margin-right: 18px;
6$footer-links-base-opacity: .8; 6$footer-links-base-opacity: .8;
7 7
8@mixin menu-link { 8.menu-link {
9 @include disable-default-a-behaviour;
10
9 display: flex; 11 display: flex;
10 align-items: center; 12 align-items: center;
11 padding-left: $menu-lateral-padding; 13 padding-left: $menu-lateral-padding;
@@ -91,32 +93,15 @@ menu {
91 display: flex; 93 display: flex;
92 align-items: center; 94 align-items: center;
93 justify-content: left; 95 justify-content: left;
94
95 my-notification {
96 margin-left: auto;
97 margin-right: 15px;
98 }
99 } 96 }
100} 97}
101 98
102.logged-in-more { 99my-notification {
103 $main-radius: 25px; 100 margin-left: auto;
104 101 margin-right: 15px;
105 flex: 1; 102}
106 margin-left: 13px;
107 border-radius: $main-radius;
108 transition: all .1s ease-in-out;
109 cursor: pointer;
110
111 *, & {
112 line-height: 1;
113 }
114
115 &.show {
116 background-color: rgba(255, 255, 255, 0.20);
117 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
118 }
119 103
104.logged-in-more {
120 @mixin display-hints($is-mobile: false) { 105 @mixin display-hints($is-mobile: false) {
121 background-color: rgba(255, 255, 255, 0.15); 106 background-color: rgba(255, 255, 255, 0.15);
122 107
@@ -130,6 +115,20 @@ menu {
130 } 115 }
131 } 116 }
132 117
118 $main-radius: 25px;
119
120 flex: 1;
121 margin-left: 13px;
122 border-radius: $main-radius;
123 transition: all .1s ease-in-out;
124 cursor: pointer;
125 line-height: 1;
126
127 &.show {
128 background-color: rgba(255, 255, 255, 0.20);
129 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
130 }
131
133 &:hover { 132 &:hover {
134 @include display-hints; 133 @include display-hints;
135 } 134 }
@@ -140,13 +139,14 @@ menu {
140 139
141 /* fill space when on mobile */ 140 /* fill space when on mobile */
142 max-width: calc(100% - 80px); 141 max-width: calc(100% - 80px);
142
143 .dropdown-toggle { 143 .dropdown-toggle {
144 max-width: 100%; 144 max-width: 100%;
145 } 145 }
146
146 .logged-in-info { 147 .logged-in-info {
147 max-width: calc(100% - 45px) !important; 148 max-width: calc(100% - 45px) !important;
148 } 149 }
149
150 } 150 }
151 151
152 .dropdown-toggle-indicator { 152 .dropdown-toggle-indicator {
@@ -175,35 +175,35 @@ menu {
175 padding: 5px 7px; 175 padding: 5px 7px;
176 border-radius: $main-radius; 176 border-radius: $main-radius;
177 } 177 }
178}
178 179
179 my-account-avatar { 180my-account-avatar {
180 margin-right: 10px; 181 margin-right: 10px;
181 }
182} 182}
183 183
184.logged-in-info { 184.logged-in-info {
185 max-width: 105px; 185 max-width: 105px;
186 186
187 flex-grow: 1; 187 flex-grow: 1;
188}
188 189
189 .logged-in-display-name, 190.logged-in-display-name,
190 .logged-in-username { 191.logged-in-username {
191 @include ellipsis; 192 @include ellipsis;
192 } 193}
193 194
194 .logged-in-display-name { 195.logged-in-display-name {
195 font-size: 16px; 196 font-size: 16px;
196 font-weight: $font-semibold; 197 font-weight: $font-semibold;
197 color: pvar(--menuForegroundColor); 198 color: pvar(--menuForegroundColor);
198 199
199 @include disable-default-a-behaviour; 200 @include disable-default-a-behaviour;
200 } 201}
201 202
202 .logged-in-username { 203.logged-in-username {
203 font-size: 13px; 204 font-size: 13px;
204 color: #C6C6C6; 205 color: #C6C6C6;
205 margin-top: 3px; 206 margin-top: 3px;
206 }
207} 207}
208 208
209.logged-in-menu { 209.logged-in-menu {
@@ -214,9 +214,6 @@ menu {
214 line-height: $line-height-normal; 214 line-height: $line-height-normal;
215 215
216 a { 216 a {
217 @include menu-link;
218 @include disable-default-a-behaviour;
219
220 $icon-size: 13px; 217 $icon-size: 13px;
221 $additional-margin: ($menu-link-icon-size - $icon-size) / 2; 218 $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
222 219
@@ -230,10 +227,6 @@ menu {
230 227
231 // Keep aligned with other icons 228 // Keep aligned with other icons
232 margin-left: $additional-margin; 229 margin-left: $additional-margin;
233
234 &[iconName="channel"] {
235 margin-top: -2px;
236 }
237 } 230 }
238 231
239 &.active, 232 &.active,
@@ -260,27 +253,22 @@ menu {
260.login-buttons-block { 253.login-buttons-block {
261 margin: 30px 25px 35px 25px; 254 margin: 30px 25px 35px 25px;
262 255
263 .login-button { 256 > a {
264 @include peertube-button-link;
265 @include orange-button;
266
267 display: block; 257 display: block;
268 width: 100%; 258 width: 100%;
269 margin-bottom: 10px;
270 }
271 259
272 .create-account-button { 260 :not(:last-child) {
273 @include peertube-button-link; 261 margin-bottom: 10px;
274 262 }
275 display: block; 263 }
276 width: 100%; 264}
277 265
278 color: #fff; 266.create-account-button {
279 background-color: rgba(255, 255, 255, 0.25); 267 color: #fff;
268 background-color: rgba(255, 255, 255, 0.25);
280 269
281 &:hover { 270 &:hover {
282 background-color: rgba(255, 255, 255, 0.28); 271 background-color: rgba(255, 255, 255, 0.28);
283 }
284 } 272 }
285} 273}
286 274
@@ -290,48 +278,30 @@ menu {
290 margin-bottom: 15px; 278 margin-bottom: 15px;
291 279
292 .block-title { 280 .block-title {
281 @include ellipsis;
282
293 text-transform: uppercase; 283 text-transform: uppercase;
294 font-weight: $font-bold; // Bold 284 font-weight: $font-bold; // Bold
295 font-size: 13px; 285 font-size: 13px;
296 margin-bottom: 25px; 286 margin-bottom: 25px;
297 margin-left: 26px; 287 margin-left: 26px;
298
299 @include ellipsis;
300
301 margin-right: 30px; 288 margin-right: 30px;
302 } 289 }
303 290
304 a { 291 a {
305 @include menu-link;
306 @include disable-default-a-behaviour;
307
308 min-height: 40px; 292 min-height: 40px;
309
310 my-global-icon {
311 &[iconName="playlists"] {
312 height: 24px;
313 width: 24px;
314
315 margin-right: 16px;
316 }
317
318 &[iconName="videos"] {
319 position: relative;
320 right: -1px;
321 }
322 }
323 } 293 }
324} 294}
325 295
326.footer { 296.footer {
327 width: $menu-width; 297 width: $menu-width;
328 padding-bottom: 15px; 298 padding-bottom: 15px;
299}
329 300
330 .bottom-links { 301.footer-bottom {
331 display: flex; 302 display: flex;
332 flex-direction: column; 303 flex-direction: column;
333 padding: 0 $menu-lateral-padding; 304 padding: 0 $menu-lateral-padding;
334 }
335} 305}
336 306
337.footer-links { 307.footer-links {
@@ -340,7 +310,8 @@ menu {
340 flex-wrap: wrap; 310 flex-wrap: wrap;
341 } 311 }
342 312
343 a, span[role=button] { 313 a,
314 span[role=button] {
344 display: inline-block; 315 display: inline-block;
345 text-decoration: none; 316 text-decoration: none;
346 color: pvar(--menuForegroundColor); 317 color: pvar(--menuForegroundColor);
@@ -350,22 +321,6 @@ menu {
350 font-weight: 500; 321 font-weight: 500;
351 line-height: 1.4rem; 322 line-height: 1.4rem;
352 margin-right: 8px; 323 margin-right: 8px;
353
354 &.inline-global-icon {
355 display: inline-flex;
356 align-items: center;
357 white-space: nowrap;
358 height: 1.4rem;
359
360 my-global-icon {
361 @include apply-svg-color(pvar(--menuForegroundColor));
362
363 display: flex;
364 width: auto;
365 height: 90%;
366 margin-right: .2rem;
367 }
368 }
369 } 324 }
370} 325}
371 326
@@ -395,32 +350,13 @@ menu {
395 opacity: .4; 350 opacity: .4;
396 } 351 }
397 352
398 my-global-icon {
399 &[iconName="cog"],
400 &[iconName="sign-out"] {
401 position: relative;
402 right: -2px;
403 height: 20px;
404 width: 20px;
405 }
406 }
407
408 my-global-icon.not-displayed {
409 display: none;
410 }
411
412 &:hover { 353 &:hover {
413 my-global-icon.hover-display-toggle.not-displayed { 354 .hover-display-toggle {
414 display: inherit;
415 }
416 my-global-icon.hover-display-toggle {
417 display: none; 355 display: none;
418 } 356 }
419 357
420 &.settings-sensitive { 358 .hover-display-toggle[hidden] {
421 my-global-icon ::ng-deep svg { 359 display: inherit !important;
422 margin-top: 2px !important;
423 }
424 } 360 }
425 } 361 }
426} 362}
@@ -440,7 +376,8 @@ menu {
440 } 376 }
441 } 377 }
442 378
443 .top-menu, .footer { 379 .top-menu,
380 .footer {
444 width: 100% !important; 381 width: 100% !important;
445 } 382 }
446 383
@@ -448,9 +385,35 @@ menu {
448 width: calc(100vw - 30px); 385 width: calc(100vw - 30px);
449 } 386 }
450 387
451 .dropdown-item:hover, .dropdown-item:active { 388 .dropdown-item:hover,
389 .dropdown-item:active {
452 &.settings-sensitive my-global-icon ::ng-deep svg { 390 &.settings-sensitive my-global-icon ::ng-deep svg {
453 margin-top: 0px !important; 391 margin-top: 0px !important;
454 } 392 }
455 } 393 }
456} 394}
395
396my-global-icon {
397 &[iconName="playlists"] {
398 height: 24px;
399 width: 24px;
400
401 margin-right: 16px;
402 }
403
404 &[iconName="videos"] {
405 position: relative;
406 right: -1px;
407 }
408
409 &[iconName="channel"] {
410 margin-top: -2px;
411 }
412
413 &[iconName="sign-out"] {
414 position: relative;
415 right: -2px;
416 height: 20px;
417 width: 20px;
418 }
419}