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 $footer-links-base-opacity: .8;
   7
   8 @mixin menu-link {
   9   display: flex;
  10   align-items: center;
  11   padding-left: $menu-lateral-padding;
  12   color: pvar(--menuForegroundColor);
  13   cursor: pointer;
  14   font-size: 16px;
  15   white-space: normal;
  16   word-break: break-word;
  17   padding-right: 20px;
  18   transition: background-color .1s ease-in-out;
  19   line-height: $line-height-normal;
  20
  21   &.active {
  22     background-color: rgba(255, 255, 255, 0.15);
  23   }
  24
  25   &:hover, &.focus-visible {
  26     background-color: rgba(255, 255, 255, 0.10);
  27   }
  28
  29   my-global-icon {
  30     @include apply-svg-color(#808080);
  31
  32     display: flex;
  33     width: $menu-link-icon-size;
  34     height: $menu-link-icon-size;
  35     margin-right: $menu-link-icon-margin-right;
  36   }
  37 }
  38
  39 .menu-wrapper {
  40   position: fixed;
  41   height: calc(100vh - #{$header-height});
  42   padding: 0;
  43   width: $menu-width;
  44   z-index: z(menu);
  45   scrollbar-color: pvar(--actionButtonColor) pvar(--menuBackgroundColor);
  46 }
  47
  48 menu {
  49   @include ellipsis;
  50
  51   background-color: pvar(--menuBackgroundColor);
  52   color: pvar(--menuForegroundColor);
  53
  54   display: flex;
  55   flex-direction: column;
  56   height: 100%;
  57   width: 100%;
  58   margin: 0;
  59   padding: 0;
  60
  61   &:focus, &:hover {
  62     overflow-y: auto;
  63   }
  64
  65   @media not all and (hover: hover) and (pointer: fine) {
  66     overflow-y: auto;
  67   }
  68
  69   &.is-logged-in {
  70     .panel-block {
  71       margin-bottom: 20px;
  72     }
  73
  74     .block-title {
  75       margin-bottom: 15px;
  76     }
  77   }
  78 }
  79
  80 .top-menu {
  81   flex-grow: 1;
  82   width: $menu-width;
  83 }
  84
  85 .logged-in-block {
  86   margin-bottom: 20px;
  87   background-color: rgba(255, 255, 255, 0.15);
  88
  89   > div:first-child {
  90     height: 80px;
  91     display: flex;
  92     align-items: center;
  93     justify-content: left;
  94
  95     my-notification {
  96       margin-left: auto;
  97       margin-right: 15px;
  98     }
  99   }
 100 }
 101
 102 .logged-in-more {
 103   $main-radius: 25px;
 104
 105   flex: 1;
 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
 120   @mixin display-hints($is-mobile: false) {
 121     background-color: rgba(255, 255, 255, 0.15);
 122
 123     @if $is-mobile {
 124       .dropdown-toggle-indicator {
 125         display: inherit !important;
 126       }
 127       .dropdown-toggle:first-child {
 128         padding-right: 30px !important;
 129       }
 130     }
 131   }
 132
 133   &:hover {
 134     @include display-hints;
 135   }
 136
 137   /* smartphones and touchscreens */
 138   @media (hover: none) and (pointer: coarse) {
 139     @include display-hints($is-mobile: true);
 140
 141     /* fill space when on mobile */
 142     max-width: calc(100% - 80px);
 143     .dropdown-toggle {
 144       max-width: 100%;
 145     }
 146     .logged-in-info {
 147       max-width: calc(100% - 45px) !important;
 148     }
 149
 150   }
 151
 152   .dropdown-toggle-indicator {
 153     position: relative;
 154     width: 0;
 155     display: none;
 156
 157     span {
 158       position: absolute;
 159       right: -35px;
 160       top: -8px;
 161       color: grey;
 162       width: $main-radius;
 163     }
 164   }
 165
 166   .dropdown-toggle {
 167     &::after {
 168       border: none;
 169     }
 170   }
 171
 172   .dropdown-toggle:first-child {
 173     display: flex;
 174     align-items: center;
 175     padding: 5px 7px;
 176     border-radius: $main-radius;
 177   }
 178
 179   my-account-avatar {
 180     margin-right: 10px;
 181   }
 182 }
 183
 184 .logged-in-info {
 185   max-width: 105px;
 186
 187   flex-grow: 1;
 188
 189   .logged-in-display-name,
 190   .logged-in-username {
 191     @include ellipsis;
 192   }
 193
 194   .logged-in-display-name {
 195     font-size: 16px;
 196     font-weight: $font-semibold;
 197     color: pvar(--menuForegroundColor);
 198
 199     @include disable-default-a-behaviour;
 200   }
 201
 202   .logged-in-username {
 203     font-size: 13px;
 204     color: #C6C6C6;
 205     margin-top: 3px;
 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 .login-buttons-block {
 261   margin: 30px 25px 35px 25px;
 262
 263   .login-button {
 264     @include peertube-button-link;
 265     @include orange-button;
 266
 267     display: block;
 268     width: 100%;
 269     margin-bottom: 10px;
 270   }
 271
 272   .create-account-button {
 273     @include peertube-button-link;
 274
 275     display: block;
 276     width: 100%;
 277
 278     color: #fff;
 279     background-color: rgba(255, 255, 255, 0.25);
 280
 281     &:hover {
 282       background-color: rgba(255, 255, 255, 0.28);
 283     }
 284   }
 285 }
 286
 287 .in-my-library,
 288 .on-instance,
 289 .footer-block {
 290   margin-bottom: 15px;
 291
 292   .block-title {
 293     text-transform: uppercase;
 294     font-weight: $font-bold; // Bold
 295     font-size: 13px;
 296     margin-bottom: 25px;
 297     margin-left: 26px;
 298
 299     @include ellipsis;
 300
 301     margin-right: 30px;
 302   }
 303
 304   a {
 305     @include menu-link;
 306     @include disable-default-a-behaviour;
 307
 308     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   }
 324 }
 325
 326 .footer {
 327   width: $menu-width;
 328   padding-bottom: 15px;
 329
 330   .bottom-links {
 331     display: flex;
 332     flex-direction: column;
 333     padding: 0 $menu-lateral-padding;
 334   }
 335 }
 336
 337 .footer-links {
 338   &, > div {
 339     display: flex;
 340     flex-wrap: wrap;
 341   }
 342
 343   a, span[role=button] {
 344     display: inline-block;
 345     text-decoration: none;
 346     color: pvar(--menuForegroundColor);
 347     opacity: $footer-links-base-opacity;
 348     white-space: nowrap;
 349     font-size: 90%;
 350     font-weight: 500;
 351     line-height: 1.4rem;
 352     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   }
 370 }
 371
 372 .footer-copyleft small a {
 373   @include disable-default-a-behaviour;
 374
 375   color: pvar(--menuForegroundColor);
 376   opacity: $footer-links-base-opacity - .2;
 377 }
 378
 379 .dropdown {
 380   z-index: #{z('menu') + 1} !important;
 381 }
 382
 383 .dropdown-menu {
 384   width: calc(100% + 40px);
 385 }
 386
 387 .dropdown-item {
 388   @include dropdown-with-icon-item;
 389
 390   cursor: pointer;
 391   display: flex;
 392   align-items: center;
 393
 394   i.glyphicon-menu-right {
 395     opacity: .4;
 396   }
 397
 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 {
 413     my-global-icon.hover-display-toggle.not-displayed {
 414       display: inherit;
 415     }
 416     my-global-icon.hover-display-toggle {
 417       display: none;
 418     }
 419
 420     &.settings-sensitive {
 421       my-global-icon ::ng-deep svg {
 422         margin-top: 2px !important;
 423       }
 424     }
 425   }
 426 }
 427
 428 .more-settings {
 429   text-transform: uppercase;
 430   font-size: 80%;
 431   color: #6c757d;
 432 }
 433
 434 @media screen and (max-width: $mobile-view) {
 435   .menu-wrapper {
 436     width: 100% !important;
 437
 438     menu {
 439       overflow-y: auto;
 440     }
 441   }
 442
 443   .top-menu, .footer {
 444     width: 100% !important;
 445   }
 446
 447   .dropdown-menu {
 448     width: calc(100vw - 30px);
 449   }
 450
 451   .dropdown-item:hover, .dropdown-item:active {
 452     &.settings-sensitive my-global-icon ::ng-deep svg {
 453       margin-top: 0px !important;
 454     }
 455   }
 456 }