cosr-front/static/css/header.css at master · commonsearch/cosr-front · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

/* <header> wrapping tag */
#h {
  padding:10px;
  display:block;
  border-bottom:1px solid #E0E0E0;
  margin:0;
  background-color:#F7F7F7;
  height:auto;
}

.full #h {
  padding:0;
  text-align:center;
  border:0;
  height:100vh;
}

/* "About" link to https://about.commonsearch.org */
.about a {
  float:right;
  line-height:36px;
  color:#666;
  font-size:13px;
  margin-right:10px;
}

#logo {
  background:url(/img/logo-400.png) no-repeat;
  background-size:92px 30px;
  height:30px;
  width:92px;
  color:transparent;
  float:left;
  vertical-align:top;
  margin-top:3px;
  margin-right:3px;
}


/* <form> wraps both the logo and the input zone */
#f {
  display:inline-block;
}

/* Position the search form in the middle of the full-size homepage */
body.full #h #f {
  padding: 200px 20px 20px 20px;
}


/* Wrapper around the input element & submit button, to simulate a border */
#w {
  border:1px solid #E0E0E0;
  background:#FFF;
  margin-left:5px;
  margin-left:100px;
  position:relative;
  height:34px;
  padding-right:80px;
}

/* Applies to both the search input and the submit button */
#f input {
  outline: none;
  border: 0;
  font-size:18px;

  /* Needed to remove styling on iOS */
  -webkit-appearance: none;
  border-radius: 0;
}

/* Actual input field */
#q {
  padding:7px 0px 6px 7px;
  height:21px;
  width:100%;
}

/* Submit button */
#s {
  cursor:pointer;
  background:#FFF;
  width:34px;
  height:34px;
  text-align:center;
  position:absolute;
  top:0px;
  right:0px;
  padding:0;

}

#s:hover, #s:focus {
  background:#F0F0F0;
  color:white;
}

/* Language dropdown */
#g select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border:none;
    color:#999;
    background:transparent;
    position:absolute;
    width:34px;
    height:34px;
    z-index:1;
    top:0px;
    right:34px;
    padding-left:5px;
    cursor:pointer;
}

/* We need this hack for Firefox which seems to add an additional padding to the select */
@-moz-document url-prefix() {
  #g select {
    padding-left:0px;
  }
}

/* Add a fake downward arrow to the language dropdown */
#g::after {
  font-size:10px;
  color:#999;
  content:"  ▾";
  position:absolute;
  right:38px;
  top:11px;
  z-index:0;
}

/* TODO: IE11?
#g::-ms-expand {
    display: none;
}
*/