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

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

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

186 187 188 189 190 191
.search-option-descriptor {
    @media (min-width: @screen-sm-min) {
        display: none;
    }
}

192 193
.startpage-searchbar {
    >* {
194
        border: 1px solid #a2a2a2;
195 196 197 198 199
        &:not(:first-child) {
            border-left: none;
        }
    }
    .search-input-submit {
200
        border-radius: 5px;
201 202 203 204 205 206 207 208 209 210 211 212 213 214
    }
    .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;
        }
215 216 217 218 219 220 221 222 223
        >* {
            border: 1px solid #aaa;
            border-radius: 5px;
            min-height: 40px;
            &:not(:first-child) {
                border-left: 1px solid #aaa;
            }
        }
    }
224 225 226
}

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

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

Karl Hasselbring's avatar
Karl Hasselbring committed
281 282 283 284
@resultpage-leftbox-max-width: @result-width;
@resultpage-leftbox-min-dist-left-right: 8px;
@resultpage-leftbox-min-dist-top-bottom: 8px;
@resultpage-leftbox-big-screen-margin-left: 50px;
285
header {
Karl Hasselbring's avatar
Karl Hasselbring committed
286
    padding-top: @resultpage-leftbox-min-dist-top-bottom;
287
    display: flex;
Dominik Hebeler's avatar
Dominik Hebeler committed
288
    flex-direction: column;
289
    position: fixed;
290
    z-index: 100; // Makes the header larger, so it correctly covers the non scrolling parts below
Karl Hasselbring's avatar
Karl Hasselbring committed
291 292
    width: @resultpage-leftbox-max-width + @resultpage-leftbox-big-screen-margin-left + 10;
    padding-left: @resultpage-leftbox-big-screen-margin-left;
293
    background-color: inherit;
Karl Hasselbring's avatar
Karl Hasselbring committed
294 295 296 297 298
    @media (max-width: 799px) {
        width: 100%;
        max-width: 799px;
        margin: 0px;
        padding: @resultpage-leftbox-min-dist-top-bottom @resultpage-leftbox-min-dist-left-right 0px @resultpage-leftbox-min-dist-left-right;
299
        -webkit-box-pack: center;
Karl Hasselbring's avatar
Karl Hasselbring committed
300
        align-items: center;
301
    }
302
    #research-bar {
Karl Hasselbring's avatar
Karl Hasselbring committed
303 304
        width: 100%;
        max-width: @resultpage-leftbox-max-width;
Dominik Hebeler's avatar
Dominik Hebeler committed
305 306 307 308 309 310
        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;
311
        justify-content: center;
312
        box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
Dominik Hebeler's avatar
Dominik Hebeler committed
313
        @media (max-width: 799px) {
Karl Hasselbring's avatar
Karl Hasselbring committed
314
            margin: 0px @resultpage-leftbox-min-dist-left-right;
Dominik Hebeler's avatar
Dominik Hebeler committed
315
        }
316
    }
317
}
Dominik Hebeler's avatar
Dominik Hebeler committed
318

319 320 321 322
header:nth-child(1) {
    @media (max-width: 1400px) {
        position: relative;
    }
323 324
}

Dominik Hebeler's avatar
Dominik Hebeler committed
325
#foki {
326
    display: flex;
Karl Hasselbring's avatar
Karl Hasselbring committed
327 328 329 330
    justify-content: left;
    margin-left: @resultpage-leftbox-big-screen-margin-left;
    padding-top: 8px;
    width: @resultpage-leftbox-max-width;
331
    @media (max-width: 799px) {
Karl Hasselbring's avatar
Karl Hasselbring committed
332 333 334 335 336
        width: 100%;
        margin: 0px;
        display: flex;
        justify-content: center;
        padding: @resultpage-leftbox-min-dist-top-bottom @resultpage-leftbox-min-dist-left-right 0px @resultpage-leftbox-min-dist-left-right;
337
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
338 339 340 341 342 343 344
    #foki-box {
        display: flex;
        width: 100%;
        max-width: @resultpage-leftbox-max-width;
        background-color: white;
        border: 1px solid #ccc;
        box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
345 346
        overflow-x: auto;
        padding: 10px;
Karl Hasselbring's avatar
Karl Hasselbring committed
347 348 349 350 351 352 353 354 355 356 357 358
        &>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;
Dominik Hebeler's avatar
Dominik Hebeler committed
359
        }
360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392
        /* Scrollbar Style */
        &::-webkit-scrollbar {
            height: 0px;
            /* remove scrollbar space */
            background: transparent;
            /* optional: just make scrollbar invisible */
        }
    }
}


/* Scrollbar Style */

@scrollfade-color: white;
.scrollbox {
    position: relative;
    width: 100%;
    .foki-scrollfade {
        &-left,
        &-right {
            position: absolute;
            width: 20px;
            height: 42px;
            top: 1px;
        }
        &-left {
            background: linear-gradient(to right, @scrollfade-color, fade(@scrollfade-color, 80%), fade(@scrollfade-color, 0%));
            left: 0px;
        }
        &-right {
            background: linear-gradient(to left, @scrollfade-color, fade(@scrollfade-color, 80%), fade(@scrollfade-color, 0%));
            right: 0px;
        }
393
    }
394
}
Dominik Hebeler's avatar
Dominik Hebeler committed
395

396
#research-bar-placeholder {
397
    padding: @resultpage-leftbox-min-dist-top-bottom 0px 0px 50px;
398
    width: 100%;
Karl Hasselbring's avatar
Karl Hasselbring committed
399
    max-width: 700px;
400
    height: 61px;
401
}