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