client/src/app/menu/menu.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 menu {
   5   background-color: $black-background;
   6   margin: 0;
   7   padding: 0;
   8   height: 100%;
   9   white-space: nowrap;
  10   text-overflow: ellipsis;
  11   overflow: hidden;
  12   z-index: 1000;
  13   color: $menu-color;
  14
  15   .logged-in-block {
  16     height: 100px;
  17     background-color: rgba(255, 255, 255, 0.15);
  18     display: flex;
  19     align-items: center;
  20     justify-content: center;
  21     margin-bottom: 35px;
  22
  23     img {
  24       @include avatar(34px);
  25
  26       margin-left: 20px;
  27       margin-right: 10px;
  28     }
  29
  30     .logged-in-info {
  31       flex-grow: 1;
  32
  33       .logged-in-username {
  34         font-size: 16px;
  35         font-weight: $font-semibold;
  36         color: $menu-color;
  37         cursor: pointer;
  38
  39         @include disable-default-a-behaviour;
  40       }
  41
  42       .logged-in-email {
  43         font-size: 13px;
  44         color: #C6C6C6;
  45         white-space: nowrap;
  46         overflow: hidden;
  47         text-overflow: ellipsis;
  48         max-width: 140px;
  49       }
  50     }
  51
  52     .logged-in-more {
  53       margin-right: 20px;
  54
  55       .glyphicon {
  56         cursor: pointer;
  57         font-size: 18px;
  58       }
  59     }
  60   }
  61
  62   .button-block {
  63     margin: 30px 25px 35px 25px;
  64
  65     .login-button {
  66       @include peertube-button-link;
  67       @include orange-button;
  68
  69       display: block;
  70       width: 100%;
  71       margin-bottom: 10px;
  72     }
  73
  74     .create-account-button {
  75       @include peertube-button-link;
  76
  77       display: block;
  78       width: 100%;
  79
  80       color: #fff;
  81       background-color: rgba(255, 255, 255, 0.25);
  82
  83       &:hover {
  84         background-color: rgba(255, 255, 255, 0.28);
  85       }
  86     }
  87   }
  88
  89   .block-title {
  90     text-transform: uppercase;
  91     font-weight: $font-bold; // Bold
  92     font-size: 13px;
  93     margin-bottom: 25px;
  94   }
  95
  96   .panel-block {
  97     margin-bottom: 45px;
  98     margin-left: 26px;
  99
 100     a {
 101       display: flex;
 102       color: $menu-color;
 103       cursor: pointer;
 104       height: 22px;
 105       line-height: 22px;
 106       font-size: 16px;
 107       margin-bottom: 15px;
 108       @include disable-default-a-behaviour;
 109
 110       .icon {
 111         @include icon(22px);
 112
 113         margin-right: 18px;
 114
 115         &.icon-videos-trending {
 116           position: relative;
 117           top: -2px;
 118           background-image: url('../../assets/images/menu/trending.svg');
 119         }
 120
 121         &.icon-videos-recently-added {
 122           width: 23px;
 123           height: 23px;
 124           position: relative;
 125           top: -1px;
 126           background-image: url('../../assets/images/menu/recently-added.svg');
 127         }
 128
 129         &.icon-administration {
 130           width: 23px;
 131           height: 23px;
 132
 133           background-image: url('../../assets/images/menu/administration.svg');
 134         }
 135       }
 136     }
 137   }
 138 }