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