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