result-page.less 11.2 KB
Newer Older
1
@import "./quicktips.less";
2
@import "./result-saver.less";
3
4
@import "./result.less";
@import "./product.less";
5
6
7
/* Variables */

// Background color
Karl Hasselbring's avatar
Karl Hasselbring committed
8
@resultpage-background-color: @background-color;
9
// Margin to the left of the results
10
@results-margin-left: 16px;
11
// Min and max widths of the 2 resultpage columns
Karl Hasselbring's avatar
Karl Hasselbring committed
12
13
14
15
@results-width-min: 500px;
@results-width-max: 700px;
@additions-width-min: 400px;
@additions-width-max: 500px;
16
17
18
19
20
// Breakpoints for the 2 resultpage columns
@resultpage-breakpoint-max: (@results-width-max + @additions-width-max + @padding-small-default * 4);
@resultpage-breakpoint-min: (@results-width-min + @additions-width-min + @padding-small-default * 4);
@product-shop-color: green;
// The point upon which a .screen-large logo is displayed
Karl Hasselbring's avatar
Karl Hasselbring committed
21
@logo-size-breakpoint: (@results-width-min + @padding-small-default * 2);
22
// The point upon which the sidebar opener switches place
23
@sidebar-opener-breakpoint: (@results-width-max + @padding-small-default * 2 + 60px);
24
// Quicktip background color
Karl Hasselbring's avatar
Karl Hasselbring committed
25
@quicktip-background-color: @color-white;
26
// Color of the Spruch author
Karl Hasselbring's avatar
Karl Hasselbring committed
27
@spruch-author-color: @color-strong-grey;
28
29
/* Styles */

30
31
32
33
34
35
#header-logo {
    z-index: 0;
    padding-right: 10px;
    h1 {
        .logo;
        margin: 0px;
36
        font-size: 22px;
37
38
        display: inline-block;
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
39
40
41
42
43
44
45
46
47
48
49
    .screen-small {
        display: none;
    }
    @media (max-width: @logo-size-breakpoint) {
        .screen-large {
            display: none;
        }
        .screen-small {
            display: initial;
        }
    }
50
51
}

52
body {
53
    &#resultpage-body {
54
        background-image: inherit;
Karl Hasselbring's avatar
Karl Hasselbring committed
55
        background-color: @resultpage-background-color;
56
57
58
    }
    &.quicktips {
        background-color: @quicktip-background-color;
59
60
61
    }
}

62
.navbar {
Karl Hasselbring's avatar
Karl Hasselbring committed
63
    border-bottom: 3px solid @metager-orange;
64
65
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
    &.navbar-resultpage {
Karl Hasselbring's avatar
Karl Hasselbring committed
66
        border-bottom: 2px solid @metager-orange;
67
68
69
70
71
72
        box-shadow: none;
    }
}

.lSPrev>span,
.lSNext>span {
Karl Hasselbring's avatar
Karl Hasselbring committed
73
    color: @metager-orange;
74
75
}

76
77
78
#map,
#map div {
    display: flex;
Dominik Hebeler's avatar
Dominik Hebeler committed
79
80
}

81
.nav-tabs>li>a {
82
83
84
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
Phil Höfer's avatar
Phil Höfer committed
85
86
}

Phil Höfer's avatar
Phil Höfer committed
87
88
89
90
.tab-content {
    padding-top: 10px;
}

Phil Höfer's avatar
Phil Höfer committed
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
.img:hover .hostlabel {
    display: block;
}

.tab-pane.active {
    padding: 10px 0;
    padding-top: 0;
}

.tab-pane .alert {
    margin: 10px 0;
    padding: 5px 15px;
}

.alert ul {
    list-style-type: none;
    padding-left: 49px;
108
    @media (max-width: @screen-mobile) {
109
110
        padding-left: 0px;
    }
Phil Höfer's avatar
Phil Höfer committed
111
112
}

113
.fa.fa-twitter {
Dominik Hebeler's avatar
Dominik Hebeler committed
114
115
116
    color: #6faedc
}

Phil Höfer's avatar
Phil Höfer committed
117
118
119
120
.dense-col {
    padding: 0px
}

Phil Höfer's avatar
Phil Höfer committed
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
.input-group-addon {
    padding: 0;
}

input#eingabeTop {
    height: 35px;
}

nav .input-group {
    height: 35px;
    padding: 5px 0;
}

#search {
    background-color: inherit;
    border: 0;
    width: 50px;
    height: 100%;
}

#helpButton {
    color: black;
}

145
146
147
148
a {
    &#donation {
        &,
        &:visited {
149
            color: inherit;
150
151
        }
    }
Phil Höfer's avatar
Phil Höfer committed
152
153
154
}

#spenden {
155
    .overflow-ellipsis;
Phil Höfer's avatar
Phil Höfer committed
156
157
}

158
159
160
161
162
#spruch {
    .author {
        font-size: 80%;
        font-weight: normal;
        font-style: italic;
163
        color: @spruch-author-color;
164
165
166
167
168
169
170
    }
    &>p {
        margin-bottom: 0;
        &+p {
            margin-top: 4px;
        }
    }
Phil Höfer's avatar
Phil Höfer committed
171
172
}

173
174
175
.saver-options {
    display: flex;
    padding-bottom: 15px;
176
    &>input {
177
178
179
180
        min-width: 35%;
        max-width: 80%;
    }
}
181

182
183
184
.ui-effects-transfer {
    border: 1px dotted black;
}
185

186
187
188
189
#header-searchbar {
    flex-grow: 1;
}

Phil Höfer's avatar
Phil Höfer committed
190
.description-container {
191
    margin: 0 !important;
Phil Höfer's avatar
Phil Höfer committed
192
193
}

194
195
196
197
.js-only {
    display: none;
}

Phil Höfer's avatar
Phil Höfer committed
198
199
200
201
202
203
/* Hier der Style für die Bilder */

#fit-width .masonry {
    margin: 0 auto;
}

204
.image-item {
Phil Höfer's avatar
Phil Höfer committed
205
206
207
    width: 150px;
    text-align: center;
    margin-bottom: 10px;
208
209
    margin: 5px;
    .img {
210
        box-shadow: 0px 0px 10px 2px fade(@color-black, 30%);
211
    }
Phil Höfer's avatar
Phil Höfer committed
212
213
}

214
.image-container {
Phil Höfer's avatar
Phil Höfer committed
215
    margin: 10px auto;
216
217
    display: flex;
    flex-wrap: wrap;
Phil Höfer's avatar
Phil Höfer committed
218
219
220
221
222
223
224
}

/* Placeholder für ladende Tabs */

.loader {
    text-align: center;
    margin-top: 20px;
225
226
227
    &>img {
        width: 30px;
    }
Phil Höfer's avatar
Phil Höfer committed
228
229
}

230
231
232
233
234
235
236
237
.mg-pager {
    display: flex;
    justify-content: center;
    &>div {
        border: #aaa solid 1px;
        border-radius: 10px;
        padding: 5px;
        margin-left: 10px;
238
239
        background-color: white;
        box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
240
241
242
243
244
245
        &:first-child {
            margin-left: 0px;
        }
    }
}

246
247
/*
@searchplugin-a-color: @color-white;
Phil Höfer's avatar
Phil Höfer committed
248
249
250
251
252
253
254
#searchplugin {
    display: none;
    position: fixed;
    top: 50px;
    right: 10px;
    z-index: 501;
    width: 25%;
255
256
257
258
259
    &>div {
        text-align: center;
        padding-top: 5px;
    }
    &>a {
260
        color: @searchplugin-a-color;
261
    }
Phil Höfer's avatar
Phil Höfer committed
262
263
264
265
266
267
268
}

@media(min-width: 768px) {
    #searchplugin {
        display: initial;
    }
}
269
*/
Phil Höfer's avatar
Phil Höfer committed
270

271
272
273
274
#products {
    width: 100%;
    height: 210px;
    padding-bottom: 0;
275
    transform: translate3d(0px, 0px, 0px);
276
277
278
279
280
    margin-bottom: 10px;
}

.lSPrev>i,
.lSNext>i {
281
    background-color: @color-black;
Phil Höfer's avatar
Phil Höfer committed
282
283
284
285
286
    padding: 5px;
}

#mark {
    font-size: 13px;
287
288
289
    a {
        margin-left: 3px;
    }
290
291
}

292
293
294
295
296
297
298
299
300
@keyframes quicktip-extender-turn {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(180deg);
    }
}

301
302
303
304
305
306
307
/* New result style */

.content-wrapper {
    display: flex;
    flex-direction: column;
}

308
#resultpage-container {
309
    margin: @padding-small-default;
310
    margin-left: @results-margin-left;
311
312
313
    display: grid;
    grid-template-columns: @results-width-max @additions-width-max;
    grid-template-areas: "searchbar ." "foki ." "results additions";
314
    grid-column-gap: (@padding-small-default * 2);
315
316
317
318
    grid-row-gap: @padding-small-default;
    justify-items: stretch;
    align-items: stretch;
    /**/
Karl Hasselbring's avatar
Karl Hasselbring committed
319
320
    background-color: @resultpage-background-color;
    #research-bar-container {
321
        grid-area: searchbar;
322
    }
323
324
325
326
327
328
329
330
331
332
    #research-bar-placeholder {
        grid-area: searchbar;
        /**/
        max-width: @results-width-max;
    }
    #foki {
        grid-area: foki;
        /**/
        max-width: @results-width-max;
    }
333
    #results-container {
334
335
336
        grid-area: results;
        /**/
        max-width: @results-width-max;
337
        .alert {
338
            margin-bottom: @padding-small-default;
339
        }
340
    }
341
    #additions-container {
342
343
        grid-area: additions;
        /**/
Karl Hasselbring's avatar
Karl Hasselbring committed
344
        //min-width: @additions-width-min;
345
        max-width: @additions-width-max;
346
347
348
        #search-settings {
            display: none;
        }
349
    }
350
    @media (max-width: @resultpage-breakpoint-max) {
351
352
353
        @supports (display: grid) {
            grid-template-columns:~"calc(60% - 8px)"~"calc(40% - 8px)";
            grid-template-areas: "searchbar ." "foki ." "results additions";
Karl Hasselbring's avatar
Karl Hasselbring committed
354
        }
355
    }
356
    @media (max-width: @resultpage-breakpoint-min) {
357
        margin-left: @padding-small-default;
Karl Hasselbring's avatar
Karl Hasselbring committed
358
        grid-template-columns: 100%;
359
360
361
362
363
        grid-template-areas: "searchbar" "foki" "results";
        #additions-container {
            display: none;
        }
    }
364
365
}

Karl Hasselbring's avatar
Karl Hasselbring committed
366
#research-bar-container {
367
    margin-left: (@results-margin-left - @padding-small-default);
368
    position: fixed;
369
    z-index: 5;
Karl Hasselbring's avatar
Karl Hasselbring committed
370
371
372
    top: 0;
    left: 0;
    background-color: @resultpage-background-color;
373
374
375
    padding: @padding-small-default @padding-small-default 0px @padding-small-default;
    width: (@results-width-max + 2 * @padding-small-default);
    max-width: (@results-width-max + 2 * @padding-small-default);
376
    @media (max-width: @resultpage-breakpoint-max) {
377
378
379
380
        @supports (display: grid) {
            width: ~"calc(60% - 6px)";
        }
    }
381
    @media (max-width: @resultpage-breakpoint-min) {
382
383
384
        width: 100%;
        margin-left: 0px;
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
385
386
387
388
389
390
391
392
393
394
395
    #research-bar {
        background-color: white;
        border: 1px solid #ccc;
        border-bottom: 2px solid @metager-orange;
        box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
        display: flex;
        align-items: center;
        padding: 4px;
        .resultpage-searchbar {
            .search-input-submit .search-input input {
                border-bottom: 1px solid #ccc;
396
            }
397
            @media (max-width: @sidebar-opener-breakpoint) {
Karl Hasselbring's avatar
Karl Hasselbring committed
398
399
400
401
402
403
404
405
406
407
408
409
410
411
                .search-focus-selector {
                    border-top: none;
                    border-radius: 5px;
                }
                .search-input-submit {
                    border-radius: 5px;
                }
                >* {
                    border-radius: 5px;
                    min-height: 40px;
                    &:not(:first-child) {
                        border-left: 1px solid #aaa;
                    }
                }
412
            }
413
414
        }
    }
415
416
417
418
419
420
421
422
423
424
}

#foki {
    display: flex;
    justify-content: left;
    #foki-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
425
        max-width: @results-width-max;
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
        background-color: white;
        border: 1px solid #ccc;
        -webkit-box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
        box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
        overflow-x: visible;
        padding: 10px;
        @media (max-width: 700px) {
            overflow-x: auto;
        }
        &>div {
            padding: 0px 10px;
            &>a {
                color: black;
            }
            &.active>a {
441
442
                border-bottom: 1px solid black;
                color: black;
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
            }
            &:last-child {
                padding-right: 20px
            }
        }
        .edit-focus {
            margin-left: 7px;
        }
        /* Scrollbar Style */
        &::-webkit-scrollbar {
            height: 0px;
            /* remove scrollbar space */
            background: transparent;
            /* optional: just make scrollbar invisible */
        }
458
    }
459
}
Karl Hasselbring's avatar
Karl Hasselbring committed
460
461
462
463
464
465
466
467

#spendenaufruf {
    margin-bottom: 10px;
    a {
        background-color: white;
        display: inline-block;
        width: 100%;
    }
468
469
470
471
472
}

footer.resultPageFooter {
    max-width: 700px;
    margin-top: 20px;
473
    @media (max-width: (2 * @results-margin-left + @results-width-max - 1px)) {
474
475
        margin: 20px 0 0 0;
    }
476
477
478
479
}

/* Searchbar Opener */

480
#research-bar>.sidebar-opener {
481
482
483
484
485
    display: none;
    margin-right: 10px;
    margin-left: 20px;
}

486
487
@media(max-width: @sidebar-opener-breakpoint) {
    #resultpage-container>.sidebar-opener {
488
489
        display: none;
    }
490
    #research-bar>.sidebar-opener {
491
492
        display: initial;
    }
493
494
495
496
497
498
499
}

/* Style-fixes for browsers that do not support grid layout */

#resultpage-container {
    #results-container {
        float: left;
500
        @media (max-width: @resultpage-breakpoint-min) {
501
502
503
504
505
506
507
508
509
510
511
            float:none;
        }
    }
    #additions-container {
        float: left;
        margin-left: 20px;
        @supports (display: grid) {
            float: none;
            margin-left: 0px;
        }
    }
512
513
514
515
516
517
518
}

/* Style for resultpage container without any header content */

#resultpage-container-noheader {
    #resultpage-container;
    grid-template-areas: "results";
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
}

.metager3-unstable-warning-resultpage {
    text-align: center;
    position: fixed;
    bottom: 0;
    margin-bottom: 0px;
    width: 100%;
}

.metager3-unstable-warning {
    text-align: center;
    position: fixed;
    top: 0;
    width: 100%;
    padding-right: 60px;
    padding-left: 150px;
Karl Hasselbring's avatar
Karl Hasselbring committed
536
}