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