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 }
  10
  11 menu {
  12   background-color: $menu-background;
  13   margin: 0;
  14   padding: 0;
  15   height: 100%;
  16   white-space: nowrap;
  17   text-overflow: ellipsis;
  18   overflow: hidden;
  19   z-index: 1000;
  20   color: $menu-color;
  21   display: flex;
  22   flex-direction: column;
  23
  24   &:focus, &:hover {
  25     overflow-y: auto;
  26   }
  27
  28   .top-menu {
  29     flex-grow: 1;
  30     width: $menu-width;
  31   }
  32
  33   .logged-in-block {
  34     height: 100px;
  35     background-color: rgba(255, 255, 255, 0.15);
  36     display: flex;
  37     align-items: center;
  38     justify-content: center;
  39     margin-bottom: 35px;
  40
  41     img {
  42       @include avatar(34px);
  43
  44       margin-left: 20px;
  45       margin-right: 10px;
  46     }
  47
  48     .logged-in-info {
  49       flex-grow: 1;
  50
  51       .logged-in-username {
  52         font-size: 16px;
  53         font-weight: $font-semibold;
  54         color: $menu-color;
  55         cursor: pointer;
  56
  57         @include disable-default-a-behaviour;
  58       }
  59
  60       .logged-in-email {
  61         font-size: 13px;
  62         color: #C6C6C6;
  63         white-space: nowrap;
  64         overflow: hidden;
  65         text-overflow: ellipsis;
  66         max-width: 140px;
  67       }
  68     }
  69
  70     .logged-in-more {
  71       margin-right: 20px;
  72
  73       .glyphicon {
  74         cursor: pointer;
  75         font-size: 18px;
  76
  77         &::after {
  78           border: none;
  79         }
  80       }
  81     }
  82   }
  83
  84   .button-block {
  85     margin: 30px 25px 35px 25px;
  86
  87     .login-button {
  88       @include peertube-button-link;
  89       @include orange-button;
  90
  91       display: block;
  92       width: 100%;
  93       margin-bottom: 10px;
  94     }
  95
  96     .create-account-button {
  97       @include peertube-button-link;
  98
  99       display: block;
 100       width: 100%;
 101
 102       color: #fff;
 103       background-color: rgba(255, 255, 255, 0.25);
 104
 105       &:hover {
 106         background-color: rgba(255, 255, 255, 0.28);
 107       }
 108     }
 109   }
 110
 111   .block-title {
 112     text-transform: uppercase;
 113     font-weight: $font-bold; // Bold
 114     font-size: 13px;
 115     margin-bottom: 25px;
 116     margin-left: 26px;
 117   }
 118
 119   .panel-block {
 120     margin-bottom: 45px;
 121
 122     a {
 123       display: flex;
 124       align-items: center;
 125       padding-left: $menu-left-padding;
 126       color: $menu-color;
 127       cursor: pointer;
 128       height: 40px;
 129       font-size: 16px;
 130       transition: background-color .1s ease-in-out;
 131       @include disable-default-a-behaviour;
 132
 133       &:hover {
 134         background-color: rgba(255, 255, 255, 0.15);
 135       }
 136
 137       .icon {
 138         @include icon(22px);
 139
 140         margin-right: 18px;
 141
 142         &.icon-videos-subscriptions {
 143           position: relative;
 144           top: -1px;
 145           background-image: url('../../assets/images/menu/subscriptions.svg');
 146         }
 147
 148         &.icon-videos-overview {
 149           position: relative;
 150           background-image: url('../../assets/images/menu/globe.svg');
 151         }
 152
 153         &.icon-videos-trending {
 154           position: relative;
 155           top: -1px;
 156           background-image: url('../../assets/images/menu/trending.svg');
 157         }
 158
 159         &.icon-videos-recently-added {
 160           width: 23px;
 161           height: 23px;
 162           background-image: url('../../assets/images/menu/recently-added.svg');
 163         }
 164
 165         &.icon-videos-local {
 166           width: 23px;
 167           height: 23px;
 168
 169           position: relative;
 170           top: -1px;
 171
 172           background-image: url('../../assets/images/menu/home.svg');
 173         }
 174
 175         &.icon-administration {
 176           width: 23px;
 177           height: 23px;
 178
 179           background-image: url('../../assets/images/menu/administration.svg');
 180         }
 181
 182         &.icon-about  {
 183           width: 23px;
 184           height: 23px;
 185
 186           background-image: url('../../assets/images/menu/about.svg');
 187         }
 188       }
 189     }
 190   }
 191
 192   .footer {
 193     padding-bottom: 15px;
 194     padding-left: $menu-left-padding;
 195
 196     .language, .color-palette {
 197       display: inline-block;
 198       color: $menu-bottom-color;
 199       cursor: pointer;
 200       font-size: 12px;
 201       font-weight: $font-semibold;
 202
 203       .icon {
 204         @include icon(28px);
 205         opacity: 0.9;
 206
 207         &.icon-language  {
 208           position: relative;
 209           top: -1px;
 210           width: 28px;
 211           height: 24px;
 212
 213           background-image: url('../../assets/images/menu/language.png');
 214         }
 215
 216         &.icon-moonsun  {
 217           margin-left: 10px;
 218           position: relative;
 219           top: -1px;
 220           width: 24px;
 221           height: 24px;
 222
 223           background-image: url('../../assets/images/menu/moonsun.svg');
 224         }
 225
 226         &:hover {
 227           opacity: 1;
 228         }
 229       }
 230     }
 231   }
 232 }