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