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: 10000;
  10 }
  11
  12 menu {
  13   @include ellipsis;
  14
  15   background-color: var(--menuBackgroundColor);
  16   margin: 0;
  17   padding: 0;
  18   height: 100%;
  19   overflow-x: hidden;
  20   color: var(--menuForegroundColor);
  21   display: flex;
  22   flex-direction: column;
  23   width: 100%;
  24
  25   &:focus, &:hover {
  26     overflow-y: auto;
  27   }
  28
  29   &.logged-in {
  30     .panel-block {
  31       margin-bottom: 25px;
  32     }
  33
  34     .block-title {
  35       margin-bottom: 15px;
  36     }
  37   }
  38
  39   .top-menu {
  40     flex-grow: 1;
  41     width: $menu-width;
  42   }
  43
  44   .logged-in-block {
  45     height: 100px;
  46     background-color: rgba(255, 255, 255, 0.15);
  47     display: flex;
  48     align-items: center;
  49     justify-content: center;
  50     margin-bottom: 20px;
  51
  52     .logged-in-info {
  53       @include ellipsis;
  54
  55       flex-grow: 1;
  56
  57       .logged-in-display-name {
  58         font-size: 16px;
  59         font-weight: $font-semibold;
  60         color: var(--menuForegroundColor);
  61         cursor: pointer;
  62
  63         @include disable-default-a-behaviour;
  64       }
  65
  66       .logged-in-username {
  67         @include ellipsis;
  68
  69         font-size: 13px;
  70         color: #C6C6C6;
  71         max-width: 140px;
  72         cursor: pointer;
  73       }
  74     }
  75
  76     .logged-in-more {
  77       margin-right: 20px;
  78
  79       my-global-icon.dropdown-toggle {
  80         cursor: pointer;
  81
  82         &::after {
  83           border: none;
  84         }
  85
  86         ::ng-deep {
  87           @include apply-svg-color(var(--menuForegroundColor));
  88         }
  89       }
  90
  91       .dropdown-item {
  92         @include dropdown-with-icon-item;
  93
  94         my-global-icon {
  95           width: 22px;
  96           height: 22px;
  97
  98           &[iconName="sign-out"] {
  99             position: relative;
 100             right: -1px;
 101             height: 21px;
 102             width: 21px;
 103           }
 104         }
 105       }
 106     }
 107   }
 108
 109   .button-block {
 110     margin: 30px 25px 35px 25px;
 111
 112     .login-button {
 113       @include peertube-button-link;
 114       @include orange-button;
 115
 116       display: block;
 117       width: 100%;
 118       margin-bottom: 10px;
 119     }
 120
 121     .create-account-button {
 122       @include peertube-button-link;
 123
 124       display: block;
 125       width: 100%;
 126
 127       color: #fff;
 128       background-color: rgba(255, 255, 255, 0.25);
 129
 130       &:hover {
 131         background-color: rgba(255, 255, 255, 0.28);
 132       }
 133     }
 134   }
 135
 136   .block-title {
 137     text-transform: uppercase;
 138     font-weight: $font-bold; // Bold
 139     font-size: 13px;
 140     margin-bottom: 25px;
 141     margin-left: 26px;
 142   }
 143
 144   .panel-block {
 145     margin-bottom: 45px;
 146
 147     a {
 148       @include disable-default-a-behaviour;
 149
 150       display: flex;
 151       align-items: center;
 152       padding-left: $menu-lateral-padding;
 153       color: var(--menuForegroundColor);
 154       cursor: pointer;
 155       min-height: 40px;
 156       font-size: 16px;
 157       transition: background-color .1s ease-in-out;
 158       white-space: normal;
 159       word-break: break-word;
 160       padding-right: 20px;
 161
 162       &.active {
 163         background-color: rgba(255, 255, 255, 0.15);
 164       }
 165
 166       &:hover, &.focus-visible {
 167         background-color: rgba(255, 255, 255, 0.10);
 168       }
 169
 170       my-global-icon {
 171         @include apply-svg-color(#808080);
 172
 173         display: flex;
 174         width: 22px;
 175         height: 22px;
 176         margin-right: 18px;
 177
 178         &[iconName="playlists"] {
 179           height: 24px;
 180           width: 24px;
 181
 182           margin-right: 16px;
 183         }
 184
 185         &[iconName="videos"] {
 186           position: relative;
 187           right: -1px;
 188         }
 189       }
 190
 191       .icon {
 192         @include icon(22px);
 193
 194         margin-right: 18px;
 195       }
 196     }
 197   }
 198
 199   .footer {
 200     padding-bottom: 15px;
 201     padding-left: $menu-lateral-padding;
 202     padding-right: $menu-lateral-padding;
 203     width: $menu-width;
 204
 205     .language, .shortcuts, .color-palette {
 206       display: inline-block;
 207       color: $menu-bottom-color;
 208       cursor: pointer;
 209       font-size: 12px;
 210       font-weight: $font-semibold;
 211
 212       .icon {
 213         @include disable-outline;
 214         @include icon(28px);
 215         opacity: 0.9;
 216
 217         &.icon-language  {
 218           position: relative;
 219           top: -1px;
 220           width: 28px;
 221           height: 24px;
 222
 223           background-image: url('../../assets/images/menu/language.png');
 224         }
 225
 226         &.icon-shortcuts  {
 227           position: relative;
 228           top: -1px;
 229           width: 24px;
 230           height: 24px;
 231
 232           background-image: url('../../assets/images/menu/keyboard.png');
 233           filter: invert(100%);
 234         }
 235
 236         &.icon-moonsun  {
 237           margin-left: 10px;
 238           position: relative;
 239           top: -1px;
 240           width: 24px;
 241           height: 24px;
 242
 243           background-image: url('../../assets/images/menu/moonsun.svg');
 244         }
 245
 246         &:hover {
 247           opacity: 1;
 248         }
 249       }
 250     }
 251   }
 252 }
 253
 254 @media screen and (max-width: $mobile-view) {
 255   .menu-wrapper {
 256     width: 100% !important;
 257   }
 258
 259   .top-menu, .footer {
 260     width: 100% !important;
 261   }
 262 }