client/src/app/app.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3 @import '~bootstrap/scss/functions';
   4 @import '~bootstrap/scss/variables';
   5
   6 .peertube-container {
   7   padding-bottom: 20px;
   8 }
   9
  10 .main-row {
  11   min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin});
  12 }
  13
  14 .sub-header-container {
  15   margin-top: $header-height;
  16   background-color: pvar(--mainBackgroundColor);
  17   width: 100%;
  18 }
  19
  20 .header {
  21   height: $header-height;
  22   position: fixed;
  23   top: 0;
  24   width: 100%;
  25   background-color: pvar(--mainBackgroundColor);
  26   z-index: z(header);
  27   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  28   display: flex;
  29 }
  30
  31 .top-left-block {
  32   z-index: 1;
  33   height: $header-height;
  34   display: flex;
  35   align-items: center;
  36   min-width: 0;
  37
  38   .icon {
  39     @include icon(24px);
  40   }
  41
  42   .icon-menu {
  43     mask-image: url('../assets/images/misc/menu.svg');
  44     -webkit-mask-image: url('../assets/images/misc/menu.svg');
  45
  46     background-color: pvar(--mainForegroundColor);
  47     margin: 0 18px 0 20px;
  48
  49     @media screen and (max-width: $mobile-view) {
  50       margin: 0 10px;
  51     }
  52   }
  53 }
  54
  55 .header-right {
  56   height: $header-height;
  57   display: flex;
  58   align-items: center;
  59   justify-content: flex-end;
  60   white-space: nowrap;
  61   flex: 1;
  62 }
  63
  64 .peertube-title {
  65   @include disable-default-a-behaviour;
  66
  67   font-size: 20px;
  68   font-weight: $font-bold;
  69   color: inherit !important;
  70   display: flex;
  71   align-items: center;
  72   overflow: hidden;
  73
  74   .instance-name {
  75     @include ellipsis;
  76
  77     width: 100%;
  78   }
  79
  80   .icon.icon-logo {
  81     display: inline-block;
  82     width: 23px;
  83     height: 24px;
  84     margin-right: 0.5rem;
  85   }
  86
  87   @media screen and (max-width: $mobile-view) {
  88     display: none;
  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 }