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     margin-left: 26px;
  95   }
  96
  97   .panel-block {
  98     margin-bottom: 45px;
  99
 100     a {
 101       display: flex;
 102       align-items: center;
 103       padding-left: 26px;
 104       color: $menu-color;
 105       cursor: pointer;
 106       height: 40px;
 107       font-size: 16px;
 108       transition: background-color .1s ease-in-out;
 109       @include disable-default-a-behaviour;
 110
 111       &:hover {
 112         background-color: rgba(255, 255, 255, 0.15);
 113       }
 114
 115       .icon {
 116         @include icon(22px);
 117
 118         margin-right: 18px;
 119
 120         &.icon-videos-trending {
 121           position: relative;
 122           top: -2px;
 123           background-image: url('../../assets/images/menu/trending.svg');
 124         }
 125
 126         &.icon-videos-recently-added {
 127           width: 23px;
 128           height: 23px;
 129           position: relative;
 130           top: -1px;
 131           background-image: url('../../assets/images/menu/recently-added.svg');
 132         }
 133
 134         &.icon-videos-local {
 135           width: 23px;
 136           height: 23px;
 137           position: relative;
 138           top: -1px;
 139           background-image: url('../../assets/images/menu/home.svg');
 140         }
 141
 142         &.icon-administration {
 143           width: 23px;
 144           height: 23px;
 145
 146           background-image: url('../../assets/images/menu/administration.svg');
 147         }
 148
 149         &.icon-about  {
 150           width: 23px;
 151           height: 23px;
 152
 153           background-image: url('../../assets/images/menu/about.svg');
 154         }
 155       }
 156     }
 157   }
 158 }