client/src/app/header/header.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 #search-video {
   5   @include peertube-input-text($search-input-width);
   6   padding-left: 10px;
   7   margin-right: 15px;
   8   padding-right: 40px; // For the search icon
   9   font-size: 14px;
  10
  11   transition: box-shadow .3s ease;
  12
  13   /* light border style */
  14   border: 1px solid var(--mainBackgroundColor);
  15   box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px;
  16
  17   &:focus {
  18     box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
  19   }
  20
  21   &::placeholder {
  22     color: var(--inputPlaceholderColor);
  23   }
  24
  25   &:focus::placeholder {
  26     opacity: 0 !important;
  27   }
  28
  29   @media screen and (max-width: 800px) {
  30     width: calc(100% - 150px);
  31   }
  32
  33   @media screen and (max-width: 600px) {
  34     width: calc(100% - 70px);
  35   }
  36 }
  37
  38 .icon.icon-search {
  39   @include icon(25px);
  40   height: 21px;
  41
  42   background-color: var(--mainForegroundColor);
  43   mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%;
  44
  45   // yolo
  46   position: absolute;
  47   margin-left: -50px;
  48   margin-top: 5px;
  49 }
  50
  51 .upload-button {
  52   @include peertube-button-link;
  53   @include orange-button;
  54   @include button-with-icon(22px, 3px, -1px);
  55
  56   color: var(--mainBackgroundColor) !important;
  57   margin-right: 25px;
  58
  59   @media screen and (max-width: 800px) {
  60     margin-right: 0;
  61   }
  62
  63   @media screen and (max-width: 600px) {
  64     margin-right: 10px;
  65     padding: 0 10px;
  66
  67     .icon.icon-upload {
  68       margin-right: 0;
  69     }
  70
  71     .upload-button-label {
  72       display: none;
  73     }
  74   }
  75 }