result-page.less 16.6 KB
Newer Older
1
2
3
/* Variables */

// Background color
Karl Hasselbring's avatar
Karl Hasselbring committed
4
@resultpage-background-color: @background-color;
5
// Margin to the left of the results
6
@results-margin-left: 16px;
7
// Min and max widths of the 2 resultpage columns
Karl Hasselbring's avatar
Karl Hasselbring committed
8
@results-width-min: 500px;
9
@results-width-max: 800px;
10
@additions-width-min: 500px;
Karl Hasselbring's avatar
Karl Hasselbring committed
11
@additions-width-max: 500px;
12
// Breakpoints for the 2 resultpage columns
Dominik Hebeler's avatar
Dominik Hebeler committed
13
@resultpage-breakpoint-max: (@results-width-max + @additions-width-max + @padding-small-default * 2 + @padding-small-default * 4 + 6);
14
15
16
@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
17
@logo-size-breakpoint: (@results-width-min + @padding-small-default * 2);
18
// The point upon which the sidebar opener switches place
19
@sidebar-opener-breakpoint: (@results-width-max + @padding-small-default * 2 + 60px);
20
// Quicktip background color
21
@quicktip-background-color: @resultpage-background-color;
22
// Color of the Spruch author
Karl Hasselbring's avatar
Karl Hasselbring committed
23
@spruch-author-color: @color-strong-grey;
24
25
/* Styles */

26
27
#header-logo {
    z-index: 0;
28
29
    padding-right: 8px;
    padding-left: 8px;
30

31
32
33
    h1 {
        .logo;
        margin: 0px;
34
        font-size: 1.5em;
35
        display: inline-block;
36
37

        >img {
Dominik Hebeler's avatar
Dominik Hebeler committed
38
39
            width: 100px;
        }
40
    }
41

Karl Hasselbring's avatar
Karl Hasselbring committed
42
43
44
    .screen-small {
        display: none;
    }
45

Karl Hasselbring's avatar
Karl Hasselbring committed
46
47
48
49
    @media (max-width: @logo-size-breakpoint) {
        .screen-large {
            display: none;
        }
50

Karl Hasselbring's avatar
Karl Hasselbring committed
51
52
        .screen-small {
            display: initial;
53

Dominik Hebeler's avatar
Dominik Hebeler committed
54
55
56
            img {
                width: 20px;
            }
Karl Hasselbring's avatar
Karl Hasselbring committed
57
58
        }
    }
59
60
}

61
body {
62
    &#resultpage-body {
63
        background-image: inherit;
Karl Hasselbring's avatar
Karl Hasselbring committed
64
        background-color: @resultpage-background-color;
65
    }
66

67
68
    &.quicktips {
        background-color: @quicktip-background-color;
69
70
71
    }
}

72
.navbar {
Karl Hasselbring's avatar
Karl Hasselbring committed
73
    border-bottom: 3px solid @metager-orange;
74
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
75

76
    &.navbar-resultpage {
Karl Hasselbring's avatar
Karl Hasselbring committed
77
        border-bottom: 2px solid @metager-orange;
78
79
80
81
82
83
        box-shadow: none;
    }
}

.lSPrev>span,
.lSNext>span {
Karl Hasselbring's avatar
Karl Hasselbring committed
84
    color: @metager-orange;
85
86
}

87
88
89
#map,
#map div {
    display: flex;
Dominik Hebeler's avatar
Dominik Hebeler committed
90
91
}

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

Phil Höfer's avatar
Phil Höfer committed
98
99
100
101
.tab-content {
    padding-top: 10px;
}

Phil Höfer's avatar
Phil Höfer committed
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
.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;
119

120
    @media (max-width: @screen-mobile) {
121
122
        padding-left: 0px;
    }
Phil Höfer's avatar
Phil Höfer committed
123
124
}

125
.fa.fa-twitter {
Dominik Hebeler's avatar
Dominik Hebeler committed
126
127
128
    color: #6faedc
}

Phil Höfer's avatar
Phil Höfer committed
129
130
131
132
.dense-col {
    padding: 0px
}

Phil Höfer's avatar
Phil Höfer committed
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
.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 {
Davide's avatar
Davide committed
154
    color: @text-color;
Phil Höfer's avatar
Phil Höfer committed
155
156
}

157
158
a {
    &#donation {
159

160
161
        &,
        &:visited {
162
            color: inherit;
163
164
        }
    }
Phil Höfer's avatar
Phil Höfer committed
165
166
167
}

#spenden {
168
    .overflow-ellipsis;
Phil Höfer's avatar
Phil Höfer committed
169
170
}

171
172
173
174
175
#spruch {
    .author {
        font-size: 80%;
        font-weight: normal;
        font-style: italic;
176
        color: @spruch-author-color;
177
    }
178

179
180
    &>p {
        margin-bottom: 0;
181

182
183
184
185
        &+p {
            margin-top: 4px;
        }
    }
Phil Höfer's avatar
Phil Höfer committed
186
187
}

188
189
190
.saver-options {
    display: flex;
    padding-bottom: 15px;
191

192
    &>input {
193
194
195
196
        min-width: 35%;
        max-width: 80%;
    }
}
197

198
199
200
.ui-effects-transfer {
    border: 1px dotted black;
}
201

202
203
204
205
#header-searchbar {
    flex-grow: 1;
}

Phil Höfer's avatar
Phil Höfer committed
206
.description-container {
207
    margin: 0 !important;
Phil Höfer's avatar
Phil Höfer committed
208
209
}

210
211
212
213
.js-only {
    display: none;
}

Phil Höfer's avatar
Phil Höfer committed
214
215
216
217
218
219
/* Hier der Style für die Bilder */

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

220
.image-item {
Phil Höfer's avatar
Phil Höfer committed
221
222
223
    width: 150px;
    text-align: center;
    margin-bottom: 10px;
224
    margin: 5px;
225

226
    .img {
227
        box-shadow: 0px 0px 10px 2px fade(@color-black, 30%);
228
    }
Phil Höfer's avatar
Phil Höfer committed
229
230
}

231
232
.image-container {
    display: flex;
233
    flex-flow: row wrap;
234
235

    >div.image {
236
237
238
        flex: auto;
        margin: 8px;
        text-align: center;
239
240

        >a>div {
241
242
243
            display: inline-block;
            background-color: white;
            text-align: center;
244
245
            .card;
            padding: 4px;
246
247

            >img {
248
249
                max-width: 150px;
            }
250
251
252

            @media(max-width: 370px) {
                >img {
253
254
255
                    max-width: 100%;
                }
            }
256
257

            >div {
258
                font-size: .9em;
259
                color: #777;
260
                margin-top: 4px;
261
262
263
            }
        }

264
265
        >a>div:hover {
            box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
266
267
        }
    }
Phil Höfer's avatar
Phil Höfer committed
268
269
270
271
272
273
274
}

/* Placeholder für ladende Tabs */

.loader {
    text-align: center;
    margin-top: 20px;
275

276
277
278
    &>img {
        width: 30px;
    }
Phil Höfer's avatar
Phil Höfer committed
279
280
}

281
282
283
.mg-pager {
    display: flex;
    justify-content: center;
284

285
286
287
288
289
    &>div {
        border: #aaa solid 1px;
        border-radius: 10px;
        padding: 5px;
        margin-left: 10px;
290
        background-color: @resultpage-background-color;
291
        box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
292

293
294
295
296
297
298
        &:first-child {
            margin-left: 0px;
        }
    }
}

299
300
/*
@searchplugin-a-color: @color-white;
Phil Höfer's avatar
Phil Höfer committed
301
302
303
304
305
306
307
#searchplugin {
    display: none;
    position: fixed;
    top: 50px;
    right: 10px;
    z-index: 501;
    width: 25%;
308
309
310
311
312
    &>div {
        text-align: center;
        padding-top: 5px;
    }
    &>a {
313
        color: @searchplugin-a-color;
314
    }
Phil Höfer's avatar
Phil Höfer committed
315
316
317
318
319
320
321
}

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

324
325
326
327
#products {
    width: 100%;
    height: 210px;
    padding-bottom: 0;
328
    transform: translate3d(0px, 0px, 0px);
329
330
331
332
333
    margin-bottom: 10px;
}

.lSPrev>i,
.lSNext>i {
334
    background-color: @color-black;
Phil Höfer's avatar
Phil Höfer committed
335
336
337
338
339
    padding: 5px;
}

#mark {
    font-size: 13px;
340

341
342
343
    a {
        margin-left: 3px;
    }
344
345
}

346
347
348
349
@keyframes quicktip-extender-turn {
    from {
        transform: rotate(0deg);
    }
350

351
352
353
354
355
    to {
        transform: rotate(180deg);
    }
}

356
357
358
359
360
361
362
/* New result style */

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

363
#resultpage-container {
364
    margin: @padding-small-default;
365
    margin-top: 0;
366
    display: grid;
367
    grid-template-columns: minmax(0px, 150px) @results-width-max @additions-width-max;
368
    grid-template-areas: "whitespace searchbar .""whitespace foki .""whitespace options .""whitespace results additions""whitespace footer .";
369
    grid-column-gap: (@padding-small-default * 2);
370
371
372
373
    grid-row-gap: @padding-small-default;
    justify-items: stretch;
    align-items: stretch;
    /**/
Karl Hasselbring's avatar
Karl Hasselbring committed
374
    background-color: @resultpage-background-color;
375

376
377
    #whitespace {
        grid-area: whitespace;
378
    }
379

380
    #research-bar-container {
381
        grid-area: searchbar;
382
        padding-top: @padding-small-default;
383
        background-color: @resultpage-background-color;
Davide's avatar
Davide committed
384
385
        border: solid @metager-orange;
        border-width: 0px 0px 2px 0px;
386
        position: sticky;
387
    }
388

389
390
391
392
393
    #foki {
        grid-area: foki;
        /**/
        max-width: @results-width-max;
    }
394

395
    #results-container {
396
397
398
        grid-area: results;
        /**/
        max-width: @results-width-max;
399

400
        .alert {
401
            margin-bottom: @padding-small-default;
402
        }
403

404
405
406
407
408
        #results .alteration {
            margin: (@padding-small-default * 2) 0px;
            margin-top: 0;
            padding: 0px 8px;
            font-weight: 400;
409

410
            a i {
411
                font-size: .9em;
412
            }
413

414
            .original {
415
                font-size: .9em;
416
            }
417
418

            @media(max-width: @screen-mobile) {
419
420
421
422
423
                .card;
                margin: @padding-small-default 0px;
                margin-top: 0;
            }
        }
424

Dominik Hebeler's avatar
Dominik Hebeler committed
425
426
427
428
        #backtotop {
            text-align: center;
            margin: 1em 0;
        }
429
    }
430

431
    #additions-container {
432
433
        grid-area: additions;
        /**/
Karl Hasselbring's avatar
Karl Hasselbring committed
434
        //min-width: @additions-width-min;
435
        max-width: @additions-width-max;
436
        width: 100%;
Dominik Hebeler's avatar
Dominik Hebeler committed
437
        height: 100%;
438

439
440
441
        #search-settings {
            display: none;
        }
442

443
444
        #quicktips {
            height: 100%;
445
            width: 100%;
446
            min-height: 500px;
447
448

            iframe {
449
450
451
452
                height: 100%;
                width: 100%;
            }
        }
453
    }
454

455
456
457
    footer {
        grid-area: footer;
    }
458

459
    @media (max-width: @resultpage-breakpoint-max) {
460
        @supports (display: grid) {
461
462
            grid-template-columns: ~"calc(60% - 8px)"~"calc(40% - 8px)";
            grid-template-areas: "searchbar .""foki .""options .""results additions""footer .";
Karl Hasselbring's avatar
Karl Hasselbring committed
463
        }
464
    }
465

466
    @media (max-width: @resultpage-breakpoint-min) {
467
        margin-left: @padding-small-default;
Karl Hasselbring's avatar
Karl Hasselbring committed
468
        grid-template-columns: 100%;
469
470
        grid-template-areas: "searchbar""foki""options""results""footer";

471
472
473
474
        #additions-container {
            display: none;
        }
    }
475
476
}

Karl Hasselbring's avatar
Karl Hasselbring committed
477
#research-bar-container {
478
    position: sticky;
479
    z-index: 5;
Karl Hasselbring's avatar
Karl Hasselbring committed
480
481
482
    top: 0;
    left: 0;
    background-color: @resultpage-background-color;
483
    max-width: @results-width-max;
484

Karl Hasselbring's avatar
Karl Hasselbring committed
485
    #research-bar {
486
        background-color: @resultpage-background-color;
487
        border: 1px solid @border-color;
488
        border-bottom: 1px solid @metager-orange;
Karl Hasselbring's avatar
Karl Hasselbring committed
489
490
491
492
        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;
493

Karl Hasselbring's avatar
Karl Hasselbring committed
494
        .resultpage-searchbar {
495
496
497
498
499
500
            .search-input-submit {
                background-color: @background-color;

                .search-input input {
                    border-bottom: 1px solid @border-color;
                }
501
            }
502

503
            @media (max-width: @sidebar-opener-breakpoint) {
Karl Hasselbring's avatar
Karl Hasselbring committed
504
505
506
507
                .search-focus-selector {
                    border-top: none;
                    border-radius: 5px;
                }
508

Karl Hasselbring's avatar
Karl Hasselbring committed
509
510
511
                .search-input-submit {
                    border-radius: 5px;
                }
512

Karl Hasselbring's avatar
Karl Hasselbring committed
513
514
515
                >* {
                    border-radius: 5px;
                    min-height: 40px;
516

Karl Hasselbring's avatar
Karl Hasselbring committed
517
518
519
520
                    &:not(:first-child) {
                        border-left: 1px solid #aaa;
                    }
                }
521
            }
522
523
        }
    }
524
525
526
527
528
}

#foki {
    display: flex;
    justify-content: left;
529

530
531
532
533
534
    #foki-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
535
        max-width: @results-width-max;
536
        background-color: @resultpage-background-color;
537
        overflow-x: auto;
Dominik Hebeler's avatar
Dominik Hebeler committed
538
        padding: 8px;
539
        border-bottom: 1px solid @border-color;
540

541
542
        @media (max-width: @screen-mobile) {
            .card;
543
            margin: 0;
544
        }
545

546
        &>div {
Dominik Hebeler's avatar
Dominik Hebeler committed
547
            padding-right: 16px;
548

549
            &>a {
550
                color: @text-color;
551
            }
552

553
            &.active>a {
554
555
                border-bottom: 1px solid @text-color;
                color: @text-color;
556
            }
557

558
559
560
561
            &:last-child {
                padding-right: 20px
            }
        }
562

563
564
565
        .edit-focus {
            margin-left: 7px;
        }
566

567
568
569
570
571
572
573
        /* Scrollbar Style */
        &::-webkit-scrollbar {
            height: 0px;
            /* remove scrollbar space */
            background: transparent;
            /* optional: just make scrollbar invisible */
        }
574
    }
575
}
Karl Hasselbring's avatar
Karl Hasselbring committed
576

Dominik Hebeler's avatar
Dominik Hebeler committed
577
578
#options {
    grid-area: options;
579
    background-color: @resultpage-background-color;
580
581
    max-width: @results-width-max;
    padding: 0 8px;
582
583

    @media(max-width: @screen-mobile) {
584
        .card;
585
        margin: 0;
586
    }
587
588

    input[type=checkbox] {
Dominik Hebeler's avatar
Dominik Hebeler committed
589
590
        display: none;
    }
591

Dominik Hebeler's avatar
Dominik Hebeler committed
592
593
594
595
596
597
    .scrollbox {
        max-height: 0;
        transform-origin: top;
        transform: scaleY(0);
        transition: transform .5s, max-height .5s;
    }
598
599
600

    input[type=checkbox]:checked+div.scrollbox {
        max-height: 200px;
Dominik Hebeler's avatar
Dominik Hebeler committed
601
602
        transform: scaleY(1);
    }
603

604
605
606
    #toggle-box {
        display: flex;
        align-items: center;
607
        margin-left: -8px;
608
609

        @media(max-width: 350px) {
610
611
612
            flex-direction: row-reverse;
            flex-wrap: wrap-reverse;
            justify-content: space-around;
613
614

            >div {
615
616
617
                margin-top: 8px;
                margin-bottom: 8px;
            }
618

619
620
621
622
            #filter-toggle {
                flex-direction: column;
            }
        }
623
624

        >div {
625
626
            margin-left: 8px;
        }
627

628
629
630
631
632
633
634
        #filter-toggle {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            flex-grow: 0;
            margin-left: 0px;
635

636
637
638
639
            >div {
                margin-left: 8px;
            }
        }
640

641
642
643
644
        #result-count {
            flex-grow: 1;
            text-align: right;
        }
645

646
647
        .option-toggle {
            text-align: center;
648
649

            label {
650
651
                font-weight: normal;
                margin-bottom: 0;
Kim Höfer's avatar
Kim Höfer committed
652
653
                display: flex;
                align-items: center;
654
655
656
            }
        }
    }
657
658

    #options-box {
Dominik Hebeler's avatar
Dominik Hebeler committed
659
        width: 100%;
660
661
        display: flex;
        justify-content: left;
Dominik Hebeler's avatar
Dominik Hebeler committed
662
663
        overflow: hidden;
        overflow-x: auto;
664
        padding-top: 8px;
665

Dominik Hebeler's avatar
Dominik Hebeler committed
666
667
668
669
        #options-items {
            display: -ms-flexbox;
            display: flex;
            align-items: center;
670

Dominik Hebeler's avatar
Dominik Hebeler committed
671
672
673
674
675
676
            .option-selector {
                display: flex;
                flex-direction: column;
                margin: 0 8px;
                justify-content: center;
                align-items: center;
677
                font-size: .9em;
678

Dominik Hebeler's avatar
Dominik Hebeler committed
679
680
                label {
                    margin-bottom: 0;
681
                    font-weight: normal;
Dominik Hebeler's avatar
Dominik Hebeler committed
682
                }
683

Dominik Hebeler's avatar
Dominik Hebeler committed
684
685
686
687
688
689
                select {
                    background-color: white;
                    border: 1px solid #77777780;
                    padding: 3px;
                    border-radius: 5px;
                }
690

691
692
                label[for="custom-date"] {
                    cursor: pointer;
693

694
695
696
697
                    &:hover {
                        color: red;
                    }
                }
698

699
700
701
                #bing-from-to {
                    display: none;
                }
702
703

                #custom-date:checked+select {
704
705
                    display: none;
                }
706
707

                #custom-date:checked+select+#bing-from-to {
708
709
                    display: flex;
                }
Dominik Hebeler's avatar
Dominik Hebeler committed
710
            }
711
712

            .option-selector:nth-child(1) {
713
714
                margin-left: 0;
            }
Dominik Hebeler's avatar
Dominik Hebeler committed
715
716
        }
    }
717

718
719
    #settings {
        text-align: center;
720

721
        a {
Kim Höfer's avatar
Kim Höfer committed
722
723
            display: flex;
            align-items: center;
724
            color: @text-color;
725

726
727
            &:hover {
                color: red;
728

Dominik Hebeler's avatar
css fix    
Dominik Hebeler committed
729
730
731
                span.badge {
                    background-color: red;
                }
732
            }
733

734
735
736
737
738
            span.badge {
                margin-top: -12px;
                font-size: .7em;
                font-weight: normal;
            }
739
740
        }
    }
Dominik Hebeler's avatar
Dominik Hebeler committed
741
742
}

Karl Hasselbring's avatar
Karl Hasselbring committed
743
744
#spendenaufruf {
    margin-bottom: 10px;
745

Karl Hasselbring's avatar
Karl Hasselbring committed
746
747
748
749
750
    a {
        background-color: white;
        display: inline-block;
        width: 100%;
    }
751
752
753
}

footer.resultPageFooter {
754
    max-width: @results-width-max;
755

756
    @media (max-width: (2 * @results-margin-left + @results-width-max - 1px)) {
757
758
        margin: 20px 0 0 0;
    }
759
760
761
}

/* Searchbar Opener */
762
#research-bar>.sidebar-opener {
763
764
765
766
767
    display: none;
    margin-right: 10px;
    margin-left: 20px;
}

768
769
@media(max-width: @sidebar-opener-breakpoint) {
    #resultpage-container>.sidebar-opener {
770
771
        display: none;
    }
772

773
    #research-bar>.sidebar-opener {
774
775
        display: initial;
    }
776
777
778
779
780
781
782
}

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

#resultpage-container {
    #results-container {
        float: left;
783

784
        @media (max-width: @resultpage-breakpoint-min) {
785
            float: none;
786
787
        }
    }
788

789
790
791
    #additions-container {
        float: left;
        margin-left: 20px;
792

793
794
795
796
797
        @supports (display: grid) {
            float: none;
            margin-left: 0px;
        }
    }
798
799
800
801
802
803
804
}

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

#resultpage-container-noheader {
    #resultpage-container;
    grid-template-areas: "results";
805
806
}

807
.metager3-unstable-warning {
808
809
810
    text-align: center;
    position: fixed;
    width: 100%;
811
    padding: 8px;
812

Karl Hasselbring's avatar
Karl Hasselbring committed
813
    @media (max-width: @screen-mobile) {
814
815
        padding: 5px;
    }
816
817
}

818
819
.metager3-unstable-warning-static-pages {
    .metager3-unstable-warning;
820
    top: 0;
821
    padding-right: 50px;
822

Karl Hasselbring's avatar
Karl Hasselbring committed
823
    @media (max-width: @screen-mobile) {
824
825
826
827
828
829
830
831
832
        padding: 5px;
        padding-right: 50px;
    }
}

.metager3-unstable-warning-resultpage {
    .metager3-unstable-warning;
    bottom: 0;
    margin-bottom: 0px;
Karl Hasselbring's avatar
Karl Hasselbring committed
833
834
835
836
837
838
839
840
841
842
843
}

/* Settings button and checkboxes */

.settings-checkbox {
    margin-top: 5px;
    margin-bottom: 5px;
}

.settings-checkbox .settings-icon {
    margin-left: 5px;
844
    font-size: 1em;
Karl Hasselbring's avatar
Karl Hasselbring committed
845
}