searchbar.less 8.49 KB
Newer Older
1
2
/* Suchleiste */

3
4
5
.searchbar {
    display: flex;
    align-items: stretch;
6
    justify-content: center;
7
8
    font-size: 16px;
    background-color: white;
9
    color: #333;
10
11
    .search-focus-selector {
        border-radius: 5px 0px 0px 5px;
Aria Givi's avatar
Aria Givi committed
12
13
        display: flex;
        align-items: center;
14
        position: relative;
15
16
17
        @media(max-width: @screen-xs-max) {
            display: none;
        }
Aria Givi's avatar
Aria Givi committed
18
19
        &>button {
            border: none;
20
            border-right: 1px solid rgb(170, 170, 170);
Aria Givi's avatar
Aria Givi committed
21
            background-color: white;
Aria Givi's avatar
Aria Givi committed
22
23
            margin: 5px;
        }
24
25
26
27
        .search-settings:only-child {
            padding: 5px;
            border-right: solid 1px #ccc;
        }
28
29
30
31
32
33
        select {
            width: 100%;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: transparent;
34
            padding: 0px 35px 0px 5px;
35
36
37
38
39
            font-family: FontAwesome, sans-serif;
            border: none;
            &>option {
                font-family: FontAwesome, sans-serif;
            }
40
        }
41
42
        &:after {
            content: "\f078";
43
            font: 15px "FontAwesome", sans-serif;
44
45
46
47
48
49
50
            line-height: 30px;
            background-color: transparent;
            right: 8px;
            top: 2px;
            padding: 2px 2px 2px 5px;
            position: absolute;
            pointer-events: none;
51
52
        }
    }
Aria Givi's avatar
Aria Givi committed
53
    .search-option-frame {
54
        display: flex;
Aria Givi's avatar
Aria Givi committed
55
        position: absolute;
56
57
        background-color: white;
        top: 50px;
Aria Givi's avatar
Aria Givi committed
58
        padding: 10px;
Aria Givi's avatar
Aria Givi committed
59
        border: 1px solid rgb(175, 175, 175);
Aria Givi's avatar
Aria Givi committed
60
        border-radius: 4px;
Aria Givi's avatar
Aria Givi committed
61
62
63
64
65
66
67
68
69
70
        .searchbar-options-arrow {
            width: 0;
            height: 0;
            top: -5px;
            position: absolute;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 5px solid rgb(175, 175, 175);
            margin-left: 3%;
        }
71
72
73
74
75
76
77
78
79
80
        #settings-btn {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            padding: 0px;
            i.fa {
                padding: 0px 8px;
            }
        }
Aria Givi's avatar
Aria Givi committed
81
    }
Aria Givi's avatar
Aria Givi committed
82
83
    .search-button-container {
        display: flex;
Aria Givi's avatar
Aria Givi committed
84
        margin-top: 3%;
85
86
87
88
89
90
        @media (max-width: @screen-xs-max) {
            flex-direction: column;
        }
        >* {
            display: flex;
            justify-content: space-between;
91
            align-items: center;
92
93
94
95
            &:hover {
                background-color: #e6e6e6;
            }
        }
96
97
98
99
100
101
102
103
104
105
    }
    .search-add-focus {
        position: relative;
        button {
            background-color: white;
            border: none;
            padding: 0px 8px;
            font-size: 16px;
            &:hover {
                background-color: #e6e6e6;
106
107
            }
        }
108
109
110
111
    }
    .search-edit-focus {
        position: relative;
        button {
112
            background-color: transparent;
113
114
115
116
117
            border: none;
            padding: 0px 8px;
            font-size: 16px;
            &:hover {
                background-color: #e6e6e6;
118
119
            }
        }
120
121
122
123
124
125
126
127
128
    }
    .search-settings {
        position: relative;
        a.btn {
            border: none;
            padding: 0px 8px;
            display: block;
            align-items: center;
            font-size: 16px;
129
130
131
132
133
        }
    }
    .search-input-submit {
        flex-grow: 1;
        display: flex;
134
135
136
137
        max-width: 600px;
        @media (max-width: @screen-xs-max) {
            max-width: initial;
        }
138
139
140
141
142
    }
    .search-input {
        flex-grow: 1;
        input {
            border: none;
143
            border-bottom: 1px solid #ccc;
144
            height: 40px;
145
            box-shadow: none;
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
            &:focus {
                outline-color: rgb(255, 128, 0);
                -webkit-box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
                -moz-box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
                box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
                border-color: rgba(255, 128, 0, 1);
            }
        }
    }
    .search-submit {
        button {
            width: 50px;
            line-height: 100%;
            border: 0;
            background-color: transparent;
            padding: 0;
            height: 100%;
        }
    }
    .search-hidden {
        display: none;
    }
168
169
170
    .search-custom-hidden {
        display: none;
    }
171
172
173
174
175
    @media (max-width: @screen-xs-max) {
        flex-direction: column-reverse;
    }
}

Aria Givi's avatar
Aria Givi committed
176
177
178
179
div:hover>.searchbar-tooltip {
    display: inline-block;
    @media (max-width: @screen-xs-max) {
        display: none;
180
181
182
    }
}

183
184
185
186
187
188
.search-option-descriptor {
    @media (min-width: @screen-sm-min) {
        display: none;
    }
}

189
190
.startpage-searchbar {
    >* {
191
        border: 1px solid #a2a2a2;
192
193
194
195
196
        &:not(:first-child) {
            border-left: none;
        }
    }
    .search-input-submit {
197
        border-radius: 5px;
198
199
200
201
202
203
204
205
206
207
208
209
210
211
    }
    .search-submit {
        border-left: 1px solid #aaa;
    }
    @media (max-width: @screen-xs-max) {
        .search-focus-selector {
            border: 1px solid #aaa;
            border-top: none;
            border-radius: 5px;
        }
        .search-input-submit {
            border: 1px solid #aaa;
            border-radius: 5px;
        }
212
213
214
215
216
217
218
219
220
        >* {
            border: 1px solid #aaa;
            border-radius: 5px;
            min-height: 40px;
            &:not(:first-child) {
                border-left: 1px solid #aaa;
            }
        }
    }
221
222
223
}

.resultpage-searchbar {
224
    padding: 5px;
225
    @media (max-width: @screen-xs-max) {
226
227
228
229
230
231
232
        .search-focus-selector {
            border-top: none;
            border-radius: 5px;
        }
        .search-input-submit {
            border-radius: 5px;
        }
233
234
235
236
237
238
239
240
241
242
243
        >* {
            border-radius: 5px;
            min-height: 40px;
            &:not(:first-child) {
                border-left: 1px solid #aaa;
            }
        }
        *:not(.search-submit) {
            width: 100%;
        }
    }
244
245
246
}

.searchbar-tooltip {
247
248
    display: none;
    position: absolute;
Aria Givi's avatar
Aria Givi committed
249
250
    top: 45px;
    left: -10px;
251
    &>.searchbar-tooltip-arrow {
252
        position: absolute;
Aria Givi's avatar
Aria Givi committed
253
254
        top: -4px;
        left: 20px;
255
256
        width: 0;
        height: 0;
257
258
259
260
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #ff8000;
    }
261
    &>.searchbar-tooltip-content {
262
        position: relative;
263
        &>p {
264
265
266
267
268
269
            display: inline-block;
            background: #ff8000;
            border-radius: .25em;
            font-size: 16px;
            color: white;
            padding: 5px 10px;
Aria Givi's avatar
Aria Givi committed
270
            white-space: nowrap;
271
272
273
274
        }
    }
}

275
276
277
278
header {
    margin-left: 50px;
    padding-top: 10px;
    display:flex;
Dominik Hebeler's avatar
Dominik Hebeler committed
279
    flex-direction: column;
280
    position: fixed;
281
    z-index: 100;
282
283
284
285
286
287
288
289
290
291
    max-width: 700px;
    width:100%;
    background-color: #FAFAFA;
    @media (max-width: 799px) {
        margin-left: 0px;
        -webkit-box-pack: center;
        justify-content: center;
        max-width: 799px;
    }

Dominik Hebeler's avatar
Dominik Hebeler committed
292
293
294
295
296
297
298
299
300
301
302
303
304
305
    #research-bar { 
        max-width: 700px;
        width: auto;
        padding: 0px 30px 0px 10px;
        background-color: white;
        border: 1px solid #ccc;
        border-bottom: 2px solid rgb(255, 128, 0);
        display: flex;
        align-items: center;
        justify-content: center;    
        @media (max-width: 799px) {
            margin: 0px 8px;
            box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
        }
306
    }
Dominik Hebeler's avatar
Dominik Hebeler committed
307
308

    
309
310
}

Dominik Hebeler's avatar
Dominik Hebeler committed
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
#foki {
        display: flex;
        width: auto;
        max-width: 700px;
        background-color: white;
        border: 1px solid #ccc;
        margin-top:10px;
        padding: 10px;
        margin-left: 50px;
        overflow-x: auto;

        &::-webkit-scrollbar {
            height: 0px;  /* remove scrollbar space */
            background: transparent;  /* optional: just make scrollbar invisible */
        }

        @media (max-width: 799px) {
            margin: 10px 8px 0px 8px;
            box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
        }

        &>div {
            padding: 0px 10px;

            &>a {
                color: black;
            }
            &.active>a{
                border-bottom: 1px solid rgb(255,128,0);
                color: rgb(255,128,0);
            }
        }
        .edit-focus{
            margin-left: 7px;
        }
    }

348
#research-bar-placeholder {
Dominik Hebeler's avatar
Dominik Hebeler committed
349
350
        width: 100%;
        height: 60px;
351
    }
Dominik Hebeler's avatar
Dominik Hebeler committed
352