diff options
Diffstat (limited to 'client/src/app/header/header.component.scss')
-rw-r--r-- | client/src/app/header/header.component.scss | 49 |
1 files changed, 1 insertions, 48 deletions
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss index 2bbde74bc..91b390773 100644 --- a/client/src/app/header/header.component.scss +++ b/client/src/app/header/header.component.scss | |||
@@ -1,51 +1,8 @@ | |||
1 | @import '_variables'; | 1 | @import '_variables'; |
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | 3 | ||
4 | #search-video { | 4 | my-search-typeahead { |
5 | @include peertube-input-text($search-input-width); | ||
6 | padding-left: 10px; | ||
7 | margin-right: 15px; | 5 | 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 | } | 6 | } |
50 | 7 | ||
51 | .upload-button { | 8 | .upload-button { |
@@ -56,10 +13,6 @@ | |||
56 | color: var(--mainBackgroundColor) !important; | 13 | color: var(--mainBackgroundColor) !important; |
57 | margin-right: 25px; | 14 | margin-right: 25px; |
58 | 15 | ||
59 | @media screen and (max-width: 800px) { | ||
60 | margin-right: 0; | ||
61 | } | ||
62 | |||
63 | @media screen and (max-width: 600px) { | 16 | @media screen and (max-width: 600px) { |
64 | margin-right: 10px; | 17 | margin-right: 10px; |
65 | padding: 0 10px; | 18 | padding: 0 10px; |