client/src/app/app.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3 @import '~bootstrap/scss/functions';
   4 @import '~bootstrap/scss/variables';
   5
   6 $assets-path: '../assets';
   7
   8 .peertube-container {
   9   padding-bottom: 20px;
  10 }
  11
  12 .main-row {
  13   min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin});
  14 }
  15
  16 .sub-header-container {
  17   margin-top: $header-height;
  18   background-color: pvar(--mainBackgroundColor);
  19   width: 100%;
  20 }
  21
  22 .header {
  23   height: $header-height;
  24   position: fixed;
  25   top: 0;
  26   width: 100%;
  27   background-color: pvar(--mainBackgroundColor);
  28   z-index: z(header);
  29   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  30   display: flex;
  31
  32   .top-left-block {
  33     z-index: 1;
  34     height: $header-height;
  35     display: flex;
  36     align-items: center;
  37     min-width: 0;
  38
  39     .icon {
  40       @include icon(24px);
  41
  42       &.icon-menu {
  43         background-color: pvar(--mainForegroundColor);
  44         mask-image: url('#{$assets-path}/images/misc/menu.svg');
  45         margin: 0 18px 0 20px;
  46       }
  47     }
  48
  49     .peertube-title {
  50       @include disable-default-a-behaviour;
  51
  52       font-size: 20px;
  53       font-weight: $font-bold;
  54       color: inherit !important;
  55       display: flex;
  56       align-items: center;
  57       overflow: hidden;
  58
  59       .instance-name {
  60         @include ellipsis;
  61
  62         width: 100%;
  63       }
  64
  65       .icon.icon-logo {
  66         display: inline-block;
  67         width: 23px;
  68         height: 24px;
  69         margin-right: .5rem;
  70       }
  71     }
  72
  73     @media screen and (max-width: $mobile-view) {
  74       width: 70px;
  75
  76       .peertube-title {
  77         display: none;
  78       }
  79     }
  80
  81     @media screen and (max-width: 350px) {
  82       flex: auto;
  83     }
  84   }
  85
  86   .header-right {
  87     height: $header-height;
  88     display: flex;
  89     align-items: center;
  90     justify-content: flex-end;
  91     white-space: nowrap;
  92     flex: 1;
  93   }
  94 }
  95
  96 .broadcast-message {
  97   min-height: 50px;
  98   text-align: center;
  99   margin-bottom: 0;
 100   border-radius: 0;
 101   display: grid;
 102   grid-template-columns: 1fr 30px;
 103   column-gap: 10px;
 104
 105   my-global-icon {
 106     justify-self: center;
 107     align-self: center;
 108     cursor: pointer;
 109
 110     width: 20px;
 111   }
 112
 113   @each $color, $value in $theme-colors {
 114     &.alert-#{$color} {
 115       my-global-icon {
 116         @include apply-svg-color(theme-color-level($color, $alert-color-level));
 117       }
 118     }
 119   }
 120
 121   ::ng-deep {
 122     p {
 123       font-size: 16px;
 124     }
 125
 126     p:last-child {
 127       margin-bottom: 0;
 128     }
 129   }
 130 }