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       margin-left: 13px;
  98       border-radius: $main-radius;
  99       transition: all .1s ease-in-out;
 100       cursor: pointer;
 101
 102       *, & {
 103         line-height: 1;
 104       }
 105
 106       &.show {
 107         background-color: rgba(255, 255, 255, 0.20);
 108         box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
 109       }
 110
 111       @mixin display-hints($is-mobile: false) {
 112         background-color: rgba(255, 255, 255, 0.15);
 113
 114         @if $is-mobile {
 115           .dropdown-toggle-indicator {
 116             display: inherit !important;
 117           }
 118           .dropdown-toggle:first-child {
 119             padding-right: 30px !important;
 120           }
 121         }
 122       }
 123
 124       &:hover {
 125         @include display-hints;
 126       }
 127
 128       /* smartphones and touchscreens */
 129       @media (hover: none) and (pointer: coarse) {
 130         @include display-hints($is-mobile: true);
 131
 132         /* fill space when on mobile */
 133         max-width: calc(100% - 80px);
 134         .dropdown-toggle {
 135           max-width: 100%;
 136         }
 137         .logged-in-info {
 138           max-width: calc(100% - 45px) !important;
 139         }
 140
 141       }
 142
 143       .dropdown-toggle-indicator {
 144         position: relative;
 145         width: 0;
 146         display: none;
 147
 148         span {
 149           position: absolute;
 150           right: -35px;
 151           top: -8px;
 152           color: grey;
 153           width: $main-radius;
 154         }
 155       }
 156
 157       .dropdown-toggle {
 158         &::after {
 159           border: none;
 160         }
 161       }
 162
 163       .dropdown-toggle:first-child {
 164         display: inline-flex;
 165         align-items: center;
 166         padding: 5px 7px;
 167       }
 168
 169       img {
 170         @include avatar(34px);
 171
 172         margin-right: 10px;
 173       }
 174
 175       .logged-in-info {
 176         max-width: 105px;
 177
 178         flex-grow: 1;
 179
 180         .logged-in-display-name,
 181         .logged-in-username {
 182           @include ellipsis;
 183         }
 184
 185         .logged-in-display-name {
 186           font-size: 16px;
 187           font-weight: $font-semibold;
 188           color: pvar(--menuForegroundColor);
 189
 190           @include disable-default-a-behaviour;
 191         }
 192
 193         .logged-in-username {
 194           font-size: 13px;
 195           color: #C6C6C6;
 196           margin-top: 3px;
 197         }
 198       }
 199     }
 200
 201     my-notification {
 202       margin-left: auto;
 203       margin-right: 15px;
 204     }
 205   }
 206
 207   .logged-in-menu {
 208     display: flex;
 209     flex-direction: column;
 210     align-items: flex-start;
 211     border-top: 1px solid var(--greyForegroundColor);
 212     line-height: $line-height-normal;
 213
 214     a {
 215       @include menu-link;
 216       @include disable-default-a-behaviour;
 217
 218       $icon-size: 13px;
 219       $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
 220
 221       font-size: 14px;
 222       width: 100%;
 223       min-height: 35px;
 224
 225       my-global-icon {
 226         width: $icon-size;
 227         height: $icon-size;
 228
 229         // Keep aligned with other icons
 230         margin-left: $additional-margin;
 231
 232         &[iconName="channel"] {
 233           margin-top: -2px;
 234         }
 235       }
 236
 237       &.active,
 238       &:hover,
 239       &:focus-visible {
 240         my-global-icon {
 241           @include apply-svg-color(var(--menuForegroundColor));
 242         }
 243       }
 244
 245       &.active {
 246         $border-left-width: 4px;
 247
 248         font-weight: $font-semibold;
 249         border-left: $border-left-width solid var(--mainColor);
 250
 251         my-global-icon {
 252           margin-left: $additional-margin - $border-left-width;
 253         }
 254       }
 255     }
 256   }
 257 }
 258
 259 .login-buttons-block {
 260   margin: 30px 25px 35px 25px;
 261
 262   .login-button {
 263     @include peertube-button-link;
 264     @include orange-button;
 265
 266     display: block;
 267     width: 100%;
 268     margin-bottom: 10px;
 269   }
 270
 271   .create-account-button {
 272     @include peertube-button-link;
 273
 274     display: block;
 275     width: 100%;
 276
 277     color: #fff;
 278     background-color: rgba(255, 255, 255, 0.25);
 279
 280     &:hover {
 281       background-color: rgba(255, 255, 255, 0.28);
 282     }
 283   }
 284 }
 285
 286 .in-my-library,
 287 .on-instance,
 288 .footer-block {
 289   margin-bottom: 15px;
 290
 291   .block-title {
 292     text-transform: uppercase;
 293     font-weight: $font-bold; // Bold
 294     font-size: 13px;
 295     margin-bottom: 25px;
 296     margin-left: 26px;
 297
 298     @include ellipsis;
 299
 300     margin-right: 30px;
 301   }
 302
 303   a {
 304     @include menu-link;
 305     @include disable-default-a-behaviour;
 306
 307     min-height: 40px;
 308
 309     my-global-icon {
 310       &[iconName="playlists"] {
 311         height: 24px;
 312         width: 24px;
 313
 314         margin-right: 16px;
 315       }
 316
 317       &[iconName="videos"] {
 318         position: relative;
 319         right: -1px;
 320       }
 321     }
 322   }
 323 }
 324
 325 .footer {
 326   width: $menu-width;
 327   padding-bottom: 15px;
 328
 329   .bottom-links {
 330     display: flex;
 331     flex-direction: column;
 332     padding: 0 $menu-lateral-padding;
 333   }
 334
 335   $footer-links-base-opacity: .8;
 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
 380 .dropdown {
 381   z-index: #{z('menu') + 1} !important;
 382 }
 383
 384 .dropdown-menu {
 385   width: calc(100% + 40px);
 386 }
 387
 388 .dropdown-item {
 389   @include dropdown-with-icon-item;
 390
 391   cursor: pointer;
 392   display: flex;
 393   align-items: center;
 394
 395   i.glyphicon-menu-right {
 396     opacity: .4;
 397   }
 398
 399   my-global-icon {
 400     &[iconName="cog"],
 401     &[iconName="sign-out"] {
 402       position: relative;
 403       right: -2px;
 404       height: 20px;
 405       width: 20px;
 406     }
 407   }
 408
 409   my-global-icon.not-displayed {
 410     display: none;
 411   }
 412
 413   &:hover {
 414     my-global-icon.hover-display-toggle.not-displayed {
 415       display: inherit;
 416     }
 417     my-global-icon.hover-display-toggle {
 418       display: none;
 419     }
 420
 421     &.settings-sensitive {
 422       my-global-icon ::ng-deep svg {
 423         margin-top: 2px !important;
 424       }
 425     }
 426   }
 427 }
 428
 429 .more-settings {
 430   text-transform: uppercase;
 431   font-size: 80%;
 432   color: #6c757d;
 433 }
 434
 435 @media screen and (max-width: $mobile-view) {
 436   .menu-wrapper {
 437     width: 100% !important;
 438
 439     menu {
 440       overflow-y: auto;
 441     }
 442   }
 443
 444   .top-menu, .footer {
 445     width: 100% !important;
 446   }
 447
 448   .dropdown-menu {
 449     width: calc(100vw - 30px);
 450   }
 451
 452   .dropdown-item:hover, .dropdown-item:active {
 453     &.settings-sensitive my-global-icon ::ng-deep svg {
 454       margin-top: 0px !important;
 455     }
 456   }
 457 }