result-page.less 12.9 KB
Newer Older
1
2
3
/* Ergebnisseite */

@import "./quicktips.less";
4
@import "./result-saver.less";
5
6
@import "./result.less";
@import "./product.less";
Karl Hasselbring's avatar
Karl Hasselbring committed
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
//
@resultpage-background-color: #FAFAFA;
//
@results-margin-left: 16px;
//
@result-page-body-background-color: @background-color;
@result-page-a-hover-color: red;
@result-page-product-shop-color: green;
//
@body-background-color: @result-page-body-background-color;
@a-hover-color: @result-page-a-hover-color;
@a-donation-hover-color: @result-page-a-hover-color;
@product-shop-color: @result-page-product-shop-color;
//
@results-width-min: 500px;
@results-width-max: 700px;
@additions-width-min: 400px;
@additions-width-max: 500px;
//
@resultpage-breakpoint-large: (@results-width-max + @additions-width-max + @padding-small-default * 4);
@resultpage-breakpoint-small: (@results-width-min + @additions-width-min + @padding-small-default * 4);
//
@resultpage-leftbox-max-width: @results-width-max;
@resultpage-leftbox-min-dist-left-right: @padding-small-default;
@resultpage-leftbox-min-dist-top-bottom: @padding-small-default;
//
@logo-size-breakpoint: (@results-width-min + @padding-small-default * 2);
//
@sidebar-opener-breakpoint: (@results-width-max + @padding-small-default * 2 + 60px);
//
37
38
39
40
41
42
#header-logo {
    z-index: 0;
    padding-right: 10px;
    h1 {
        .logo;
        margin: 0px;
43
        font-size: 22px;
44
45
        display: inline-block;
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
46
47
48
49
50
51
52
53
54
55
56
57
    .screen-small {
        display: none;
    }
    .screen-large {}
    @media (max-width: @logo-size-breakpoint) {
        .screen-large {
            display: none;
        }
        .screen-small {
            display: initial;
        }
    }
58
59
}

60
body {
61
    &#resultpage-body {
62
        background-image: inherit;
Karl Hasselbring's avatar
Karl Hasselbring committed
63
        background-color: @resultpage-background-color;
64
65
66
    }
    &.quicktips {
        background-color: @quicktip-background-color;
67
68
69
    }
}

70
.navbar {
Karl Hasselbring's avatar
Karl Hasselbring committed
71
    border-bottom: 3px solid @metager-orange;
72
73
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
    &.navbar-resultpage {
Karl Hasselbring's avatar
Karl Hasselbring committed
74
        border-bottom: 2px solid @metager-orange;
75
76
77
78
79
80
        box-shadow: none;
    }
}

.lSPrev>span,
.lSNext>span {
Karl Hasselbring's avatar
Karl Hasselbring committed
81
    color: @metager-orange;
82
83
}

84
85
86
#map,
#map div {
    display: flex;
Dominik Hebeler's avatar
Dominik Hebeler committed
87
88
}

89
.nav-tabs>li>a {
90
91
92
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
Phil Höfer's avatar
Phil Höfer committed
93
94
}

Phil Höfer's avatar
Phil Höfer committed
95
96
97
98
.tab-content {
    padding-top: 10px;
}

Phil Höfer's avatar
Phil Höfer committed
99
100
101
102
.hostlabel {
    display: none;
    position: relative;
    margin-top: -14px;
103
104
105
106
107
    background-color: @hostlabel-background-color;
    a:link,
    a:visited {
        color: @hostlabel-a-link-or-visited-color;
    }
Phil Höfer's avatar
Phil Höfer committed
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
}

.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;
127
128
129
    @media (max-width: @screen-xs-max) {
        padding-left: 0px;
    }
Phil Höfer's avatar
Phil Höfer committed
130
131
}

132
.fa.fa-twitter {
Dominik Hebeler's avatar
Dominik Hebeler committed
133
134
135
    color: #6faedc
}

Phil Höfer's avatar
Phil Höfer committed
136
137
138
139
.dense-col {
    padding: 0px
}

Phil Höfer's avatar
Phil Höfer committed
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
.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;
}

164
165
a {
    &:visited {
166
        color: @link-color;
167
168
169
170
171
172
173
174
175
176
177
178
179
180
    }
    &:hover {
        text-decoration: none;
        color: @a-hover-color;
    }
    &#donation {
        &,
        &:visited {
            color: @a-donation-normal-or-visited-color;
        }
        &:hover {
            color: @a-donation-hover-color;
        }
    }
Phil Höfer's avatar
Phil Höfer committed
181
182
183
}

#spenden {
184
    .overflow-ellipsis;
Phil Höfer's avatar
Phil Höfer committed
185
186
}

187
188
189
190
191
#spruch {
    .author {
        font-size: 80%;
        font-weight: normal;
        font-style: italic;
192
        color: @spruch-author-color;
193
194
195
196
197
198
199
    }
    &>p {
        margin-bottom: 0;
        &+p {
            margin-top: 4px;
        }
    }
Phil Höfer's avatar
Phil Höfer committed
200
201
}

202
203
204
.saver-options {
    display: flex;
    padding-bottom: 15px;
205
    &>input {
206
207
208
209
        min-width: 35%;
        max-width: 80%;
    }
}
210

211
212
213
.ui-effects-transfer {
    border: 1px dotted black;
}
214

215
216
217
218
#header-searchbar {
    flex-grow: 1;
}

Phil Höfer's avatar
Phil Höfer committed
219
.description-container {
220
    margin: 0 !important;
Phil Höfer's avatar
Phil Höfer committed
221
222
}

223
224
.options-list>li {
    &:hover {
225
        background-color: @options-list-li-hover-background-color;
226
227
    }
    &>a {
228
        color: @options-list-li-a-color;
229
230
231
232
233
234
235
236
237
238
        white-space: nowrap;
        display: block;
        padding: 5px 14px;
    }
    input[type=submit] {
        width: 100%;
        background-color: transparent;
        border: 0;
        margin: 5px 0;
    }
Phil Höfer's avatar
Phil Höfer committed
239
240
}

241
242
243
244
.js-only {
    display: none;
}

Phil Höfer's avatar
Phil Höfer committed
245
246
247
248
249
250
/* Hier der Style für die Bilder */

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

251
.image-item {
Phil Höfer's avatar
Phil Höfer committed
252
253
254
    width: 150px;
    text-align: center;
    margin-bottom: 10px;
255
256
257
258
    margin: 5px;
    .img {
        box-shadow: 0px 0px 10px 2px @image-item-img-box-shadow-color;
    }
Phil Höfer's avatar
Phil Höfer committed
259
260
}

261
.image-container {
Phil Höfer's avatar
Phil Höfer committed
262
    margin: 10px auto;
263
264
    display: flex;
    flex-wrap: wrap;
Phil Höfer's avatar
Phil Höfer committed
265
266
267
268
269
270
271
}

/* Placeholder für ladende Tabs */

.loader {
    text-align: center;
    margin-top: 20px;
272
273
274
    &>img {
        width: 30px;
    }
Phil Höfer's avatar
Phil Höfer committed
275
276
}

277
278
279
280
281
282
283
284
.mg-pager {
    display: flex;
    justify-content: center;
    &>div {
        border: #aaa solid 1px;
        border-radius: 10px;
        padding: 5px;
        margin-left: 10px;
285
286
        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);
287
288
289
290
291
292
        &:first-child {
            margin-left: 0px;
        }
    }
}

Phil Höfer's avatar
Phil Höfer committed
293
294
295
296
297
298
299
#searchplugin {
    display: none;
    position: fixed;
    top: 50px;
    right: 10px;
    z-index: 501;
    width: 25%;
300
301
302
303
304
    &>div {
        text-align: center;
        padding-top: 5px;
    }
    &>a {
305
        color: @searchplugin-a-color;
306
    }
Phil Höfer's avatar
Phil Höfer committed
307
308
309
310
311
312
313
314
}

@media(min-width: 768px) {
    #searchplugin {
        display: initial;
    }
}

315
316
317
318
#products {
    width: 100%;
    height: 210px;
    padding-bottom: 0;
319
    transform: translate3d(0px, 0px, 0px);
320
321
322
323
324
    margin-bottom: 10px;
}

.lSPrev>i,
.lSNext>i {
325
    background-color: @lsprev-or-lsnext-i-background-color;
Phil Höfer's avatar
Phil Höfer committed
326
327
328
329
330
    padding: 5px;
}

#mark {
    font-size: 13px;
331
332
333
    a {
        margin-left: 3px;
    }
334
335
}

336
337
338
339
340
341
342
343
344
@keyframes quicktip-extender-turn {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(180deg);
    }
}

345
346
347
348
349
350
351
/* New result style */

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

352
#resultpage-container {
353
    margin: @padding-small-default;
354
    margin-left: @results-margin-left;
355
356
357
    display: grid;
    grid-template-columns: @results-width-max @additions-width-max;
    grid-template-areas: "searchbar ." "foki ." "results additions";
358
    grid-column-gap: (@padding-small-default * 2);
359
360
361
362
    grid-row-gap: @padding-small-default;
    justify-items: stretch;
    align-items: stretch;
    /**/
Karl Hasselbring's avatar
Karl Hasselbring committed
363
364
    background-color: @resultpage-background-color;
    #research-bar-container {
365
        grid-area: searchbar;
366
    }
367
368
369
370
371
372
373
374
375
376
    #research-bar-placeholder {
        grid-area: searchbar;
        /**/
        max-width: @results-width-max;
    }
    #foki {
        grid-area: foki;
        /**/
        max-width: @results-width-max;
    }
377
    #results-container {
378
379
380
        grid-area: results;
        /**/
        max-width: @results-width-max;
381
        .alert {
382
            margin-bottom: @padding-small-default;
383
        }
384
    }
385
    #additions-container {
386
387
        grid-area: additions;
        /**/
Karl Hasselbring's avatar
Karl Hasselbring committed
388
        //min-width: @additions-width-min;
389
        max-width: @additions-width-max;
390
391
392
        #search-settings {
            display: none;
        }
393
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
394
    @media (max-width: @resultpage-breakpoint-large) {
395
396
397
        @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
398
        }
399
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
400
    @media (max-width: @resultpage-breakpoint-small) {
401
        margin-left: @padding-small-default;
Karl Hasselbring's avatar
Karl Hasselbring committed
402
        grid-template-columns: 100%;
403
404
405
406
407
        grid-template-areas: "searchbar" "foki" "results";
        #additions-container {
            display: none;
        }
    }
408
409
}

Karl Hasselbring's avatar
Karl Hasselbring committed
410
#research-bar-container {
411
    margin-left: (@results-margin-left - @padding-small-default);
412
    position: fixed;
413
    z-index: 5;
Karl Hasselbring's avatar
Karl Hasselbring committed
414
415
416
    top: 0;
    left: 0;
    background-color: @resultpage-background-color;
417
418
419
420
421
422
423
424
425
426
427
428
    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);
    @media (max-width: @resultpage-breakpoint-large) {
        @supports (display: grid) {
            width: ~"calc(60% - 6px)";
        }
    }
    @media (max-width: @resultpage-breakpoint-small) {
        width: 100%;
        margin-left: 0px;
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
429
430
431
432
433
434
435
436
437
438
439
    #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;
440
            }
441
            @media (max-width: @sidebar-opener-breakpoint) {
Karl Hasselbring's avatar
Karl Hasselbring committed
442
443
444
445
446
447
448
449
450
451
452
453
454
455
                .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;
                    }
                }
456
            }
457
458
        }
    }
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
}

#foki {
    display: flex;
    justify-content: left;
    /*
    @media (max-width: (@results-width-min + @additions-width-min - 1px)) {
        width: 100%;
        max-width: none;
        margin: 0px;
        padding: @padding-small-default;
        .scrollbox {
            max-width: none;
            margin: 0px;
            #foki-box {
                max-width: none;
                margin: 0px;
            }
477
        }
478
479
480
481
482
    }
    @media (max-width: (4 * @padding-small-default + @results-width-max + @additions-width-max - 1px)) {
        padding-left: @padding-small-default;
    }
    @media (max-width: (@results-width-min + @additions-width-min - 1px)) {
483
        width: 100%;
484
        max-width: 700px;
485
        margin: 0px;
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
        padding: @padding-small-default;
        #research-bar {
            max-width: none;
            margin: 0px;
        }
    }
    */
    #foki-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        max-width: @resultpage-leftbox-max-width;
        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 {
514
515
                border-bottom: 1px solid black;
                color: black;
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
            }
            &: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 */
        }
531
    }
532
}
Karl Hasselbring's avatar
Karl Hasselbring committed
533
534
535
536
537
538
539
540

#spendenaufruf {
    margin-bottom: 10px;
    a {
        background-color: white;
        display: inline-block;
        width: 100%;
    }
541
542
543
544
545
}

footer.resultPageFooter {
    max-width: 700px;
    margin-top: 20px;
546
    @media (max-width: (2 * @results-margin-left + @results-width-max - 1px)) {
547
548
        margin: 20px 0 0 0;
    }
549
550
551
552
}

/* Searchbar Opener */

553
#research-bar>.sidebar-opener {
554
555
556
557
558
    display: none;
    margin-right: 10px;
    margin-left: 20px;
}

559
560
@media(max-width: @sidebar-opener-breakpoint) {
    #resultpage-container>.sidebar-opener {
561
562
        display: none;
    }
563
    #research-bar>.sidebar-opener {
564
565
        display: initial;
    }
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
}

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

#resultpage-container {
    #results-container {
        float: left;
        @media (max-width: @resultpage-breakpoint-small) {
            float:none;
        }
    }
    #additions-container {
        float: left;
        margin-left: 20px;
        @supports (display: grid) {
            float: none;
            margin-left: 0px;
        }
    }
585
586
587
588
589
590
591
}

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

#resultpage-container-noheader {
    #resultpage-container;
    grid-template-areas: "results";
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
}

.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
609
}