client/src/app/app.component.scss

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