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         }
 196       }
 197     }
 198
 199     my-notification {
 200       margin-left: auto;
 201       margin-right: 15px;
 202     }
 203   }
 204
 205   .logged-in-menu {
 206     display: flex;
 207     flex-direction: column;
 208     align-items: flex-start;
 209     border-top: 1px solid var(--greyForegroundColor);
 210
 211     a {
 212       @include menu-link;
 213       @include disable-default-a-behaviour;
 214
 215       $icon-size: 13px;
 216       $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
 217
 218       font-size: 14px;
 219       width: 100%;
 220       min-height: 35px;
 221
 222       my-global-icon {
 223         width: $icon-size;
 224         height: $icon-size;
 225
 226         // Keep aligned with other icons
 227         margin-left: $additional-margin;
 228
 229         &[iconName="channel"] {
 230           margin-top: -2px;
 231         }
 232       }
 233
 234       &.active,
 235       &:hover,
 236       &:focus-visible {
 237         my-global-icon {
 238           @include apply-svg-color(var(--menuForegroundColor));
 239         }
 240       }
 241
 242       &.active {
 243         $border-left-width: 4px;
 244
 245         font-weight: $font-semibold;
 246         border-left: $border-left-width solid var(--mainColor);
 247
 248         my-global-icon {
 249           margin-left: $additional-margin - $border-left-width;
 250         }
 251       }
 252     }
 253   }
 254 }
 255
 256 .login-buttons-block {
 257   margin: 30px 25px 35px 25px;
 258
 259   .login-button {
 260     @include peertube-button-link;
 261     @include orange-button;
 262
 263     display: block;
 264     width: 100%;
 265     margin-bottom: 10px;
 266   }
 267
 268   .create-account-button {
 269     @include peertube-button-link;
 270
 271     display: block;
 272     width: 100%;
 273
 274     color: #fff;
 275     background-color: rgba(255, 255, 255, 0.25);
 276
 277     &:hover {
 278       background-color: rgba(255, 255, 255, 0.28);
 279     }
 280   }
 281 }
 282
 283 .in-my-library,
 284 .on-instance,
 285 .footer-block {
 286   margin-bottom: 15px;
 287
 288   .block-title {
 289     text-transform: uppercase;
 290     font-weight: $font-bold; // Bold
 291     font-size: 13px;
 292     margin-bottom: 25px;
 293     margin-left: 26px;
 294
 295     @include ellipsis;
 296
 297     margin-right: 30px;
 298   }
 299
 300   a {
 301     @include menu-link;
 302     @include disable-default-a-behaviour;
 303
 304     min-height: 40px;
 305
 306     my-global-icon {
 307       &[iconName="playlists"] {
 308         height: 24px;
 309         width: 24px;
 310
 311         margin-right: 16px;
 312       }
 313
 314       &[iconName="videos"] {
 315         position: relative;
 316         right: -1px;
 317       }
 318     }
 319   }
 320 }
 321
 322 .footer {
 323   width: $menu-width;
 324   padding-bottom: 15px;
 325
 326   .bottom-links {
 327     display: flex;
 328     flex-direction: column;
 329     padding: 0 $menu-lateral-padding;
 330   }
 331
 332   $footer-links-base-opacity: .8;
 333
 334   .footer-links {
 335     &, > div {
 336       display: flex;
 337       flex-wrap: wrap;
 338     }
 339
 340     a, span[role=button] {
 341       display: inline-block;
 342       text-decoration: none;
 343       color: pvar(--menuForegroundColor);
 344       opacity: $footer-links-base-opacity;
 345       white-space: nowrap;
 346       font-size: 90%;
 347       font-weight: 500;
 348       line-height: 1.4rem;
 349       margin-right: 8px;
 350
 351       &.inline-global-icon {
 352         display: inline-flex;
 353         align-items: center;
 354         white-space: nowrap;
 355         height: 1.4rem;
 356
 357         my-global-icon {
 358           @include apply-svg-color(pvar(--menuForegroundColor));
 359
 360           display: flex;
 361           width: auto;
 362           height: 90%;
 363           margin-right: .2rem;
 364         }
 365       }
 366     }
 367   }
 368
 369   .footer-copyleft small a {
 370     @include disable-default-a-behaviour;
 371
 372     color: pvar(--menuForegroundColor);
 373     opacity: $footer-links-base-opacity - .2;
 374   }
 375 }
 376
 377 .dropdown {
 378   z-index: #{z('menu') + 1} !important;
 379 }
 380
 381 .dropdown-menu {
 382   width: calc(100% + 40px);
 383 }
 384
 385 .dropdown-item {
 386   @include dropdown-with-icon-item;
 387
 388   cursor: pointer;
 389   display: flex;
 390   align-items: center;
 391
 392   i.glyphicon-menu-right {
 393     opacity: .4;
 394   }
 395
 396   my-global-icon {
 397     &[iconName="cog"],
 398     &[iconName="sign-out"] {
 399       position: relative;
 400       right: -2px;
 401       height: 20px;
 402       width: 20px;
 403     }
 404   }
 405
 406   my-global-icon.not-displayed {
 407     display: none;
 408   }
 409
 410   &:hover {
 411     my-global-icon.hover-display-toggle.not-displayed {
 412       display: inherit;
 413     }
 414     my-global-icon.hover-display-toggle {
 415       display: none;
 416     }
 417
 418     &.settings-sensitive {
 419       my-global-icon ::ng-deep svg {
 420         margin-top: 2px !important;
 421       }
 422     }
 423   }
 424 }
 425
 426 .more-settings {
 427   text-transform: uppercase;
 428   font-size: 80%;
 429   color: #6c757d;
 430 }
 431
 432 @media screen and (max-width: $mobile-view) {
 433   .menu-wrapper {
 434     width: 100% !important;
 435
 436     menu {
 437       overflow-y: auto;
 438     }
 439   }
 440
 441   .top-menu, .footer {
 442     width: 100% !important;
 443   }
 444
 445   .dropdown-menu {
 446     width: calc(100vw - 30px);
 447   }
 448
 449   .dropdown-item:hover, .dropdown-item:active {
 450     &.settings-sensitive my-global-icon ::ng-deep svg {
 451       margin-top: 0px !important;
 452     }
 453   }
 454 }