Allow iframes to open links
[oweals/peertube.git] / 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   margin-right: 25px;
57
58   @media screen and (max-width: 800px) {
59     margin-right: 0;
60   }
61
62   @media screen and (max-width: 600px) {
63     margin-right: 10px;
64     padding: 0 10px;
65
66     .icon.icon-upload {
67       margin-right: 0;
68     }
69
70     .upload-button-label {
71       display: none;
72     }
73   }
74 }