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