client/src/app/menu/menu.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 $menu-link-icon-size: 22px;
   5 $menu-link-icon-margin-right: 18px;
   6
   7 @mixin menu-link {
   8   display: flex;
   9   align-items: center;
  10   padding-left: $menu-lateral-padding;
  11   color: pvar(--menuForegroundColor);
  12   cursor: pointer;
  13   font-size: 16px;
  14   white-space: normal;
  15   word-break: break-word;
  16   padding-right: 20px;
  17   transition: background-color .1s ease-in-out;
  18   line-height: $line-height-normal;
  19
  20   &.active {
  21     background-color: rgba(255, 255, 255, 0.15);
  22   }
  23
  24   &:hover, &.focus-visible {
  25     background-color: rgba(255, 255, 255, 0.10);
  26   }
  27
  28   my-global-icon {
  29     @include apply-svg-color(#808080);
  30
  31     display: flex;
  32     width: $menu-link-icon-size;
  33     height: $menu-link-icon-size;
  34     margin-right: $menu-link-icon-margin-right;
  35   }
  36 }
  37
  38 .menu-wrapper {
  39   position: fixed;
  40   height: calc(100vh - #{$header-height});
  41   padding: 0;
  42   width: $menu-width;
  43   z-index: z(menu);
  44   scrollbar-color: pvar(--actionButtonColor) pvar(--menuBackgroundColor);
  45 }
  46
  47 menu {
  48   @include ellipsis;
  49
  50   background-color: pvar(--menuBackgroundColor);
  51   color: pvar(--menuForegroundColor);
  52
  53   display: flex;
  54   flex-direction: column;
  55   height: 100%;
  56   width: 100%;
  57   margin: 0;
  58   padding: 0;
  59
  60   &:focus, &:hover {
  61     overflow-y: auto;
  62   }
  63
  64   @media not all and (hover: hover) and (pointer: fine) {
  65     overflow-y: auto;
  66   }
  67
  68   &.is-logged-in {
  69     .panel-block {
  70       margin-bottom: 20px;
  71     }
  72
  73     .block-title {
  74       margin-bottom: 15px;
  75     }
  76   }
  77 }
  78
  79 .top-menu {
  80   flex-grow: 1;
  81   width: $menu-width;
  82 }
  83
  84 .logged-in-block {
  85   margin-bottom: 20px;
  86   background-color: rgba(255, 255, 255, 0.15);
  87
  88   > div:first-child {
  89     height: 80px;
  90     display: flex;
  91     align-items: center;
  92     justify-content: left;
  93
  94     .logged-in-more {
  95       $main-radius: 25px;
  96
  97       flex: 1;
  98       margin-left: 13px;
  99       border-radius: $main-radius;
 100       transition: all .1s ease-in-out;
 101       cursor: pointer;
 102
 103       *, & {
 104         line-height: 1;
 105       }
 106
 107       &.show {
 108         background-color: rgba(255, 255, 255, 0.20);
 109         box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
 110       }
 111
 112       @mixin display-hints($is-mobile: false) {
 113         background-color: rgba(255, 255, 255, 0.15);
 114
 115         @if $is-mobile {
 116           .dropdown-toggle-indicator {
 117             display: inherit !important;
 118           }
 119           .dropdown-toggle:first-child {
 120             padding-right: 30px !important;
 121           }
 122         }
 123       }
 124
 125       &:hover {
 126         @include display-hints;
 127       }
 128
 129       /* smartphones and touchscreens */
 130       @media (hover: none) and (pointer: coarse) {
 131         @include display-hints($is-mobile: true);
 132
 133         /* fill space when on mobile */
 134         max-width: calc(100% - 80px);
 135         .dropdown-toggle {
 136           max-width: 100%;
 137         }
 138         .logged-in-info {
 139           max-width: calc(100% - 45px) !important;
 140         }
 141
 142       }
 143
 144       .dropdown-toggle-indicator {
 145         position: relative;
 146         width: 0;
 147         display: none;
 148
 149         span {
 150           position: absolute;
 151           right: -35px;
 152           top: -8px;
 153           color: grey;
 154           width: $main-radius;
 155         }
 156       }
 157
 158       .dropdown-toggle {
 159         &::after {
 160           border: none;
 161         }
 162       }
 163
 164       .dropdown-toggle:first-child {
 165         display: flex;
 166         align-items: center;
 167         padding: 5px 7px;
 168         border-radius: $main-radius;
 169       }
 170
 171       img {
 172         @include avatar(34px);
 173
 174         margin-right: 10px;
 175       }
 176
 177       .logged-in-info {
 178         max-width: 105px;
 179
 180         flex-grow: 1;
 181
 182         .logged-in-display-name,
 183         .logged-in-username {
 184           @include ellipsis;
 185         }
 186
 187         .logged-in-display-name {
 188           font-size: 16px;
 189           font-weight: $font-semibold;
 190           color: pvar(--menuForegroundColor);
 191
 192           @include disable-default-a-behaviour;
 193         }
 194
 195         .logged-in-username {
 196           font-size: 13px;
 197           color: #C6C6C6;
 198           margin-top: 3px;
 199         }
 200       }
 201     }
 202
 203     my-notification {
 204       margin-left: auto;
 205       margin-right: 15px;
 206     }
 207   }
 208
 209   .logged-in-menu {
 210     display: flex;
 211     flex-direction: column;
 212     align-items: flex-start;
 213     border-top: 1px solid var(--greyForegroundColor);
 214     line-height: $line-height-normal;
 215
 216     a {
 217       @include menu-link;
 218       @include disable-default-a-behaviour;
 219
 220       $icon-size: 13px;
 221       $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
 222
 223       font-size: 14px;
 224       width: 100%;
 225       min-height: 35px;
 226
 227       my-global-icon {
 228         width: $icon-size;
 229         height: $icon-size;
 230
 231         // Keep aligned with other icons
 232         margin-left: $additional-margin;
 233
 234         &[iconName="channel"] {
 235           margin-top: -2px;
 236         }
 237       }
 238
 239       &.active,
 240       &:hover,
 241       &:focus-visible {
 242         my-global-icon {
 243           @include apply-svg-color(var(--menuForegroundColor));
 244         }
 245       }
 246
 247       &.active {
 248         $border-left-width: 4px;
 249
 250         font-weight: $font-semibold;
 251         border-left: $border-left-width solid var(--mainColor);
 252
 253         my-global-icon {
 254           margin-left: $additional-margin - $border-left-width;
 255         }
 256       }
 257     }
 258   }
 259 }
 260
 261 .login-buttons-block {
 262   margin: 30px 25px 35px 25px;
 263
 264   .login-button {
 265     @include peertube-button-link;
 266     @include orange-button;
 267
 268     display: block;
 269     width: 100%;
 270     margin-bottom: 10px;
 271   }
 272
 273   .create-account-button {
 274     @include peertube-button-link;
 275
 276     display: block;
 277     width: 100%;
 278
 279     color: #fff;
 280     background-color: rgba(255, 255, 255, 0.25);
 281
 282     &:hover {
 283       background-color: rgba(255, 255, 255, 0.28);
 284     }
 285   }
 286 }
 287
 288 .in-my-library,
 289 .on-instance,
 290 .footer-block {
 291   margin-bottom: 15px;
 292
 293   .block-title {
 294     text-transform: uppercase;
 295     font-weight: $font-bold; // Bold
 296     font-size: 13px;
 297     margin-bottom: 25px;
 298     margin-left: 26px;
 299
 300     @include ellipsis;
 301
 302     margin-right: 30px;
 303   }
 304
 305   a {
 306     @include menu-link;
 307     @include disable-default-a-behaviour;
 308
 309     min-height: 40px;
 310
 311     my-global-icon {
 312       &[iconName="playlists"] {
 313         height: 24px;
 314         width: 24px;
 315
 316         margin-right: 16px;
 317       }
 318
 319       &[iconName="videos"] {
 320         position: relative;
 321         right: -1px;
 322       }
 323     }
 324   }
 325 }
 326
 327 .footer {
 328   width: $menu-width;
 329   padding-bottom: 15px;
 330
 331   .bottom-links {
 332     display: flex;
 333     flex-direction: column;
 334     padding: 0 $menu-lateral-padding;
 335   }
 336
 337   $footer-links-base-opacity: .8;
 338
 339   .footer-links {
 340     &, > div {
 341       display: flex;
 342       flex-wrap: wrap;
 343     }
 344
 345     a, span[role=button] {
 346       display: inline-block;
 347       text-decoration: none;
 348       color: pvar(--menuForegroundColor);
 349       opacity: $footer-links-base-opacity;
 350       white-space: nowrap;
 351       font-size: 90%;
 352       font-weight: 500;
 353       line-height: 1.4rem;
 354       margin-right: 8px;
 355
 356       &.inline-global-icon {
 357         display: inline-flex;
 358         align-items: center;
 359         white-space: nowrap;
 360         height: 1.4rem;
 361
 362         my-global-icon {
 363           @include apply-svg-color(pvar(--menuForegroundColor));
 364
 365           display: flex;
 366           width: auto;
 367           height: 90%;
 368           margin-right: .2rem;
 369         }
 370       }
 371     }
 372   }
 373
 374   .footer-copyleft small a {
 375     @include disable-default-a-behaviour;
 376
 377     color: pvar(--menuForegroundColor);
 378     opacity: $footer-links-base-opacity - .2;
 379   }
 380 }
 381
 382 .dropdown {
 383   z-index: #{z('menu') + 1} !important;
 384 }
 385
 386 .dropdown-menu {
 387   width: calc(100% + 40px);
 388 }
 389
 390 .dropdown-item {
 391   @include dropdown-with-icon-item;
 392
 393   cursor: pointer;
 394   display: flex;
 395   align-items: center;
 396
 397   i.glyphicon-menu-right {
 398     opacity: .4;
 399   }
 400
 401   my-global-icon {
 402     &[iconName="cog"],
 403     &[iconName="sign-out"] {
 404       position: relative;
 405       right: -2px;
 406       height: 20px;
 407       width: 20px;
 408     }
 409   }
 410
 411   my-global-icon.not-displayed {
 412     display: none;
 413   }
 414
 415   &:hover {
 416     my-global-icon.hover-display-toggle.not-displayed {
 417       display: inherit;
 418     }
 419     my-global-icon.hover-display-toggle {
 420       display: none;
 421     }
 422
 423     &.settings-sensitive {
 424       my-global-icon ::ng-deep svg {
 425         margin-top: 2px !important;
 426       }
 427     }
 428   }
 429 }
 430
 431 .more-settings {
 432   text-transform: uppercase;
 433   font-size: 80%;
 434   color: #6c757d;
 435 }
 436
 437 @media screen and (max-width: $mobile-view) {
 438   .menu-wrapper {
 439     width: 100% !important;
 440
 441     menu {
 442       overflow-y: auto;
 443     }
 444   }
 445
 446   .top-menu, .footer {
 447     width: 100% !important;
 448   }
 449
 450   .dropdown-menu {
 451     width: calc(100vw - 30px);
 452   }
 453
 454   .dropdown-item:hover, .dropdown-item:active {
 455     &.settings-sensitive my-global-icon ::ng-deep svg {
 456       margin-top: 0px !important;
 457     }
 458   }
 459 }