5 @include peertube-input-text($search-input-width);
8 padding-right: 40px; // For the search icon
11 transition: box-shadow .3s ease;
13 /* light border style */
14 border: 1px solid var(--mainBackgroundColor);
15 box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px;
18 box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
22 color: var(--inputPlaceholderColor);
25 &:focus::placeholder {
26 opacity: 0 !important;
29 @media screen and (max-width: 800px) {
30 width: calc(100% - 150px);
33 @media screen and (max-width: 600px) {
34 width: calc(100% - 70px);
42 background-color: var(--mainForegroundColor);
43 mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%;
52 @include peertube-button-link;
53 @include orange-button;
54 @include button-with-icon(22px, 3px, -1px);
58 @media screen and (max-width: 800px) {
62 @media screen and (max-width: 600px) {
70 .upload-button-label {