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   overflow-y: auto;
  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: 25px;
  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       }
  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       display: flex;
 149       align-items: center;
 150       padding-left: $menu-lateral-padding;
 151       color: var(--menuForegroundColor);
 152       cursor: pointer;
 153       height: 40px;
 154       font-size: 16px;
 155       transition: background-color .1s ease-in-out;
 156       @include disable-default-a-behaviour;
 157
 158       &.active {
 159         background-color: rgba(255, 255, 255, 0.15);
 160       }
 161
 162       &:hover, &.focus-visible {
 163         background-color: rgba(255, 255, 255, 0.10);
 164       }
 165
 166       my-global-icon {
 167         @include apply-svg-color(#808080);
 168
 169         display: flex;
 170         width: 22px;
 171         height: 22px;
 172         margin-right: 18px;
 173
 174         &[iconName="playlists"] {
 175           height: 24px;
 176           width: 24px;
 177
 178           margin-right: 16px;
 179         }
 180
 181         &[iconName="videos"] {
 182           position: relative;
 183           right: -1px;
 184         }
 185       }
 186
 187       .icon {
 188         @include icon(22px);
 189
 190         margin-right: 18px;
 191       }
 192     }
 193   }
 194
 195   .footer {
 196     padding-bottom: 15px;
 197     padding-left: $menu-lateral-padding;
 198     padding-right: $menu-lateral-padding;
 199     width: $menu-width;
 200
 201     .language, .shortcuts, .color-palette {
 202       display: inline-block;
 203       color: $menu-bottom-color;
 204       cursor: pointer;
 205       font-size: 12px;
 206       font-weight: $font-semibold;
 207
 208       .icon {
 209         @include disable-outline;
 210         @include icon(28px);
 211         opacity: 0.9;
 212
 213         &.icon-language  {
 214           position: relative;
 215           top: -1px;
 216           width: 28px;
 217           height: 24px;
 218
 219           background-image: url('../../assets/images/menu/language.png');
 220         }
 221
 222         &.icon-shortcuts  {
 223           position: relative;
 224           top: -1px;
 225           width: 24px;
 226           height: 24px;
 227
 228           background-image: url('../../assets/images/menu/keyboard.png');
 229           filter: invert(100%);
 230         }
 231
 232         &.icon-moonsun  {
 233           margin-left: 10px;
 234           position: relative;
 235           top: -1px;
 236           width: 24px;
 237           height: 24px;
 238
 239           background-image: url('../../assets/images/menu/moonsun.svg');
 240         }
 241
 242         &:hover {
 243           opacity: 1;
 244         }
 245       }
 246     }
 247   }
 248 }
 249
 250 @media screen and (max-width: $mobile-view) {
 251   .menu-wrapper {
 252     width: 100% !important;
 253   }
 254
 255   .top-menu, .footer {
 256     width: 100% !important;
 257   }
 258 }