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 {
 245   z-index: #{z('menu') + 1} !important;
 246 }
 247
 248 .dropdown-menu {
 249   width: calc(100% + 40px);
 250 }
 251
 252 .dropdown-item {
 253   @include dropdown-with-icon-item;
 254
 255   cursor: pointer;
 256   display: flex;
 257   align-items: center;
 258
 259   i.glyphicon-menu-right {
 260     opacity: .4;
 261   }
 262
 263   my-global-icon {
 264     &[iconName="cog"],
 265     &[iconName="sign-out"] {
 266       position: relative;
 267       right: -2px;
 268       height: 20px;
 269       width: 20px;
 270     }
 271   }
 272
 273   my-global-icon.not-displayed {
 274     display: none;
 275   }
 276
 277   &:hover {
 278     my-global-icon.hover-display-toggle.not-displayed {
 279       display: inherit;
 280     }
 281     my-global-icon.hover-display-toggle {
 282       display: none;
 283     }
 284   }
 285 }
 286
 287 .more-settings {
 288   text-transform: uppercase;
 289   font-size: 80%;
 290   color: #6c757d;
 291 }
 292
 293 .icon {
 294   @include disable-outline;
 295   @include icon(22px);
 296   opacity: 0.8;
 297
 298   &.icon-shortcuts  {
 299     position: relative;
 300     top: -1px;
 301     margin-right: 10px;
 302
 303     background-image: url('../../assets/images/misc/keyboard.png');
 304   }
 305 }
 306
 307 input[type=checkbox]{
 308   position: absolute;
 309   visibility: hidden;
 310 }
 311
 312 label {
 313   cursor: pointer;
 314   text-indent: -9999px;
 315   width: 35px;
 316   height: 20px;
 317   background: #cccccc;
 318   display: block;
 319   border-radius: 100px;
 320   position: relative;
 321   margin: 0;
 322
 323   &:after {
 324     content: '';
 325     position: absolute;
 326     top: 3px;
 327     left: 3px;
 328     width: 14px;
 329     height: 14px;
 330     background: pvar(--mainBackgroundColor);
 331     border-radius: 50%;
 332     transition: 0.3s ease-out;
 333   }
 334
 335   &:active:after {
 336     width: 40px;
 337   }
 338 }
 339
 340 input:checked + label {
 341   background: pvar(--mainColor);
 342
 343   &:after {
 344     left: calc(100% - 3px);
 345     transform: translateX(-100%);
 346   }
 347 }
 348
 349 @media screen and (max-width: $mobile-view) {
 350   .menu-wrapper {
 351     width: 100% !important;
 352
 353     menu {
 354       overflow-y: auto;
 355     }
 356   }
 357
 358   .top-menu, .footer {
 359     width: 100% !important;
 360   }
 361 }