client/src/app/menu/menu.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .menu-wrapper {
   5   position: fixed;
   6   height: calc(100vh - #{$header-height});
   7   padding: 0;
   8   width: $menu-width;
   9   z-index: z(menu);
  10   scrollbar-color: var(--actionButtonColor) var(--menuBackgroundColor);
  11 }
  12
  13 menu {
  14   @include ellipsis;
  15
  16   background-color: var(--menuBackgroundColor);
  17   margin: 0;
  18   padding: 0;
  19   height: 100%;
  20   overflow-x: hidden;
  21   color: var(--menuForegroundColor);
  22   display: flex;
  23   flex-direction: column;
  24   width: 100%;
  25
  26   &:focus, &:hover {
  27     overflow-y: auto;
  28   }
  29
  30   &.logged-in {
  31     .panel-block {
  32       margin-bottom: 20px;
  33     }
  34
  35     .block-title {
  36       margin-bottom: 15px;
  37     }
  38   }
  39
  40   .top-menu {
  41     flex-grow: 1;
  42     width: $menu-width;
  43   }
  44
  45   .logged-in-block {
  46     height: 100px;
  47     background-color: rgba(255, 255, 255, 0.15);
  48     display: flex;
  49     align-items: center;
  50     justify-content: center;
  51     margin-bottom: 20px;
  52
  53     .logged-in-info {
  54       @include ellipsis;
  55
  56       flex-grow: 1;
  57
  58       .logged-in-display-name {
  59         font-size: 16px;
  60         font-weight: $font-semibold;
  61         color: var(--menuForegroundColor);
  62         cursor: pointer;
  63
  64         @include disable-default-a-behaviour;
  65       }
  66
  67       .logged-in-username {
  68         @include ellipsis;
  69
  70         font-size: 13px;
  71         color: #C6C6C6;
  72         max-width: 140px;
  73         cursor: pointer;
  74       }
  75     }
  76
  77     .logged-in-more {
  78       margin-right: 20px;
  79
  80       my-global-icon.dropdown-toggle {
  81         cursor: pointer;
  82
  83         &::after {
  84           border: none;
  85         }
  86
  87         ::ng-deep {
  88           @include apply-svg-color(var(--menuForegroundColor));
  89         }
  90       }
  91     }
  92   }
  93
  94   .button-block {
  95     margin: 30px 25px 35px 25px;
  96
  97     .login-button {
  98       @include peertube-button-link;
  99       @include orange-button;
 100
 101       display: block;
 102       width: 100%;
 103       margin-bottom: 10px;
 104     }
 105
 106     .create-account-button {
 107       @include peertube-button-link;
 108
 109       display: block;
 110       width: 100%;
 111
 112       color: #fff;
 113       background-color: rgba(255, 255, 255, 0.25);
 114
 115       &:hover {
 116         background-color: rgba(255, 255, 255, 0.28);
 117       }
 118     }
 119   }
 120
 121   .block-title {
 122     text-transform: uppercase;
 123     font-weight: $font-bold; // Bold
 124     font-size: 13px;
 125     margin-bottom: 25px;
 126     margin-left: 26px;
 127   }
 128
 129   .panel-block {
 130     margin-bottom: 15px;
 131
 132     a {
 133       @include disable-default-a-behaviour;
 134
 135       display: flex;
 136       align-items: center;
 137       padding-left: $menu-lateral-padding;
 138       color: var(--menuForegroundColor);
 139       cursor: pointer;
 140       min-height: 40px;
 141       font-size: 16px;
 142       transition: background-color .1s ease-in-out;
 143       white-space: normal;
 144       word-break: break-word;
 145       padding-right: 20px;
 146
 147       &.active {
 148         background-color: rgba(255, 255, 255, 0.15);
 149       }
 150
 151       &:hover, &.focus-visible {
 152         background-color: rgba(255, 255, 255, 0.10);
 153       }
 154
 155       my-global-icon {
 156         @include apply-svg-color(#808080);
 157
 158         display: flex;
 159         width: 22px;
 160         height: 22px;
 161         margin-right: 18px;
 162
 163         &[iconName="playlists"] {
 164           height: 24px;
 165           width: 24px;
 166
 167           margin-right: 16px;
 168         }
 169
 170         &[iconName="videos"] {
 171           position: relative;
 172           right: -1px;
 173         }
 174       }
 175
 176       .icon {
 177         @include icon(22px);
 178
 179         margin-right: 18px;
 180       }
 181     }
 182   }
 183
 184   .footer {
 185     width: $menu-width;
 186     padding-bottom: 15px;
 187
 188     & > div:not(.panel-block) {
 189       padding-left: $menu-lateral-padding;
 190       padding-right: $menu-lateral-padding;
 191       row-gap: 1em;
 192     }
 193
 194     $footer-links-base-opacity: .8;
 195
 196     .footer-links {
 197       display: inline-flex;
 198       flex-wrap: wrap;
 199
 200       & > a {
 201         @include disable-default-a-behaviour;
 202
 203         display: inline-block;
 204         text-decoration: none;
 205         color: var(--mainBackgroundColor);
 206         opacity: $footer-links-base-opacity;
 207         white-space: nowrap;
 208         font-size: 90%;
 209         font-weight: 500;
 210         line-height: 1.4rem;
 211         margin-right: 8px;
 212
 213         &.inline-global-icon {
 214           display: inline-flex;
 215           align-items: center;
 216           white-space: nowrap;
 217           height: 1.4rem;
 218
 219           my-global-icon {
 220             @include apply-svg-color(var(--mainBackgroundColor));
 221
 222             display: flex;
 223             width: auto;
 224             height: 90%;
 225             margin-right: .2rem;
 226           }
 227         }
 228       }
 229     }
 230
 231     .footer-copyleft small a {
 232       @include disable-default-a-behaviour;
 233
 234       color: var(--mainBackgroundColor);
 235       opacity: $footer-links-base-opacity - .2;
 236     }
 237   }
 238 }
 239
 240 .dropdown-menu {
 241   width: calc(100% + 40px);
 242 }
 243
 244 .dropdown-item {
 245   @include dropdown-with-icon-item;
 246
 247   cursor: pointer;
 248   display: flex;
 249   align-items: center;
 250
 251   i.glyphicon-menu-right {
 252     opacity: .4;
 253   }
 254
 255   my-global-icon {
 256     &[iconName="cog"],
 257     &[iconName="sign-out"] {
 258       position: relative;
 259       right: -2px;
 260       height: 20px;
 261       width: 20px;
 262     }
 263   }
 264
 265   my-global-icon.not-displayed {
 266     display: none;
 267   }
 268
 269   &:hover {
 270     my-global-icon.hover-display-toggle.not-displayed {
 271       display: inherit;
 272     }
 273     my-global-icon.hover-display-toggle {
 274       display: none;
 275     }
 276   }
 277 }
 278
 279 .more-settings {
 280   text-transform: uppercase;
 281   font-size: 80%;
 282   color: #6c757d;
 283 }
 284
 285 .icon {
 286   @include disable-outline;
 287   @include icon(22px);
 288   opacity: 0.8;
 289
 290   &.icon-shortcuts  {
 291     position: relative;
 292     top: -1px;
 293     margin-right: 10px;
 294
 295     background-image: url('../../assets/images/menu/keyboard.png');
 296   }
 297 }
 298
 299 input[type=checkbox]{
 300   position: absolute;
 301   visibility: hidden;
 302 }
 303
 304 label {
 305   cursor: pointer;
 306   text-indent: -9999px;
 307   width: 35px;
 308   height: 20px;
 309   background: #cccccc;
 310   display: block;
 311   border-radius: 100px;
 312   position: relative;
 313   margin: 0;
 314
 315   &:after {
 316     content: '';
 317     position: absolute;
 318     top: 3px;
 319     left: 3px;
 320     width: 14px;
 321     height: 14px;
 322     background: var(--mainBackgroundColor);
 323     border-radius: 50%;
 324     transition: 0.3s ease-out;
 325   }
 326
 327   &:active:after {
 328     width: 40px;
 329   }
 330 }
 331
 332 input:checked + label {
 333   background: var(--mainColor);
 334
 335   &:after {
 336     left: calc(100% - 3px);
 337     transform: translateX(-100%);
 338   }
 339 }
 340
 341 @media screen and (max-width: $mobile-view) {
 342   .menu-wrapper {
 343     width: 100% !important;
 344
 345     menu {
 346       overflow-y: auto;
 347     }
 348   }
 349
 350   .top-menu, .footer {
 351     width: 100% !important;
 352   }
 353 }