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: center;
  92
  93     .logged-in-info {
  94       @include ellipsis;
  95
  96       flex-grow: 1;
  97
  98       .logged-in-display-name {
  99         font-size: 16px;
 100         font-weight: $font-semibold;
 101         color: pvar(--menuForegroundColor);
 102         cursor: pointer;
 103
 104         @include disable-default-a-behaviour;
 105       }
 106
 107       .logged-in-username {
 108         @include ellipsis;
 109
 110         font-size: 13px;
 111         color: #C6C6C6;
 112         max-width: 140px;
 113         cursor: pointer;
 114       }
 115     }
 116
 117     .logged-in-more {
 118       margin-right: 20px;
 119
 120       my-global-icon.dropdown-toggle {
 121         cursor: pointer;
 122
 123         &::after {
 124           border: none;
 125         }
 126
 127         ::ng-deep {
 128           @include apply-svg-color(pvar(--menuForegroundColor));
 129         }
 130       }
 131     }
 132   }
 133
 134   .logged-in-menu {
 135     display: flex;
 136     flex-direction: column;
 137     align-items: flex-start;
 138     border-top: 1px solid var(--greyForegroundColor);
 139
 140     a {
 141       @include menu-link;
 142       @include disable-default-a-behaviour;
 143
 144       $icon-size: 13px;
 145       $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
 146
 147       font-size: 14px;
 148       width: 100%;
 149       min-height: 35px;
 150
 151       my-global-icon {
 152         width: $icon-size;
 153         height: $icon-size;
 154
 155         // Keep aligned with other icons
 156         margin-left: $additional-margin;
 157
 158         &[iconName="channel"] {
 159           margin-top: -2px;
 160         }
 161       }
 162
 163       &.active,
 164       &:hover,
 165       &:focus-visible {
 166         my-global-icon {
 167           @include apply-svg-color(var(--mainBackgroundColor));
 168         }
 169       }
 170
 171       &.active {
 172         $border-left-width: 4px;
 173
 174         font-weight: $font-semibold;
 175         border-left: $border-left-width solid var(--mainColor);
 176
 177         my-global-icon {
 178           margin-left: $additional-margin - $border-left-width;
 179         }
 180       }
 181     }
 182   }
 183 }
 184
 185 .login-buttons-block {
 186   margin: 30px 25px 35px 25px;
 187
 188   .login-button {
 189     @include peertube-button-link;
 190     @include orange-button;
 191
 192     display: block;
 193     width: 100%;
 194     margin-bottom: 10px;
 195   }
 196
 197   .create-account-button {
 198     @include peertube-button-link;
 199
 200     display: block;
 201     width: 100%;
 202
 203     color: #fff;
 204     background-color: rgba(255, 255, 255, 0.25);
 205
 206     &:hover {
 207       background-color: rgba(255, 255, 255, 0.28);
 208     }
 209   }
 210 }
 211
 212 .in-my-library,
 213 .on-instance,
 214 .footer-block {
 215   margin-bottom: 15px;
 216
 217   .block-title {
 218     text-transform: uppercase;
 219     font-weight: $font-bold; // Bold
 220     font-size: 13px;
 221     margin-bottom: 25px;
 222     margin-left: 26px;
 223
 224     @include ellipsis;
 225
 226     margin-right: 30px;
 227   }
 228
 229   a {
 230     @include menu-link;
 231     @include disable-default-a-behaviour;
 232
 233     min-height: 40px;
 234
 235     my-global-icon {
 236       &[iconName="playlists"] {
 237         height: 24px;
 238         width: 24px;
 239
 240         margin-right: 16px;
 241       }
 242
 243       &[iconName="videos"] {
 244         position: relative;
 245         right: -1px;
 246       }
 247     }
 248   }
 249 }
 250
 251 .footer {
 252   width: $menu-width;
 253   padding-bottom: 15px;
 254
 255   .bottom-links {
 256     display: flex;
 257     flex-direction: column;
 258     padding: 0 $menu-lateral-padding;
 259   }
 260
 261   $footer-links-base-opacity: .8;
 262
 263   .footer-links {
 264     &, > div {
 265       display: flex;
 266       flex-wrap: wrap;
 267     }
 268
 269     a, span[role=button] {
 270       display: inline-block;
 271       text-decoration: none;
 272       color: pvar(--mainBackgroundColor);
 273       opacity: $footer-links-base-opacity;
 274       white-space: nowrap;
 275       font-size: 90%;
 276       font-weight: 500;
 277       line-height: 1.4rem;
 278       margin-right: 8px;
 279
 280       &.inline-global-icon {
 281         display: inline-flex;
 282         align-items: center;
 283         white-space: nowrap;
 284         height: 1.4rem;
 285
 286         my-global-icon {
 287           @include apply-svg-color(pvar(--mainBackgroundColor));
 288
 289           display: flex;
 290           width: auto;
 291           height: 90%;
 292           margin-right: .2rem;
 293         }
 294       }
 295     }
 296   }
 297
 298   .footer-copyleft small a {
 299     @include disable-default-a-behaviour;
 300
 301     color: pvar(--mainBackgroundColor);
 302     opacity: $footer-links-base-opacity - .2;
 303   }
 304 }
 305
 306 .dropdown {
 307   z-index: #{z('menu') + 1} !important;
 308 }
 309
 310 .dropdown-menu {
 311   width: calc(100% + 40px);
 312 }
 313
 314 .dropdown-item {
 315   @include dropdown-with-icon-item;
 316
 317   cursor: pointer;
 318   display: flex;
 319   align-items: center;
 320
 321   i.glyphicon-menu-right {
 322     opacity: .4;
 323   }
 324
 325   my-global-icon {
 326     &[iconName="cog"],
 327     &[iconName="sign-out"] {
 328       position: relative;
 329       right: -2px;
 330       height: 20px;
 331       width: 20px;
 332     }
 333   }
 334
 335   my-global-icon.not-displayed {
 336     display: none;
 337   }
 338
 339   &:hover {
 340     my-global-icon.hover-display-toggle.not-displayed {
 341       display: inherit;
 342     }
 343     my-global-icon.hover-display-toggle {
 344       display: none;
 345     }
 346   }
 347 }
 348
 349 .more-settings {
 350   text-transform: uppercase;
 351   font-size: 80%;
 352   color: #6c757d;
 353 }
 354
 355 @media screen and (max-width: $mobile-view) {
 356   .menu-wrapper {
 357     width: 100% !important;
 358
 359     menu {
 360       overflow-y: auto;
 361     }
 362   }
 363
 364   .top-menu, .footer {
 365     width: 100% !important;
 366   }
 367 }