result-page.less 16.5 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
495
        .resultpage-searchbar {
            .search-input-submit .search-input input {
496
                border-bottom: 1px solid @border-color;
497
            }
498

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

Karl Hasselbring's avatar
Karl Hasselbring committed
505
506
                .search-input-submit {
                    border-radius: 5px;
507
                    background-color: @background-color
Karl Hasselbring's avatar
Karl Hasselbring committed
508
                }
509

Karl Hasselbring's avatar
Karl Hasselbring committed
510
511
512
                >* {
                    border-radius: 5px;
                    min-height: 40px;
513

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

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

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

538
539
        @media (max-width: @screen-mobile) {
            .card;
540
            margin: 0;
541
        }
542

543
        &>div {
Dominik Hebeler's avatar
Dominik Hebeler committed
544
            padding-right: 16px;
545

546
            &>a {
547
                color: @text-color;
548
            }
549

550
            &.active>a {
551
552
                border-bottom: 1px solid @text-color;
                color: @text-color;
553
            }
554

555
556
557
558
            &:last-child {
                padding-right: 20px
            }
        }
559

560
561
562
        .edit-focus {
            margin-left: 7px;
        }
563

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

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

    @media(max-width: @screen-mobile) {
581
        .card;
582
        margin: 0;
583
    }
584
585

    input[type=checkbox] {
Dominik Hebeler's avatar
Dominik Hebeler committed
586
587
        display: none;
    }
588

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

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

601
602
603
    #toggle-box {
        display: flex;
        align-items: center;
604
        margin-left: -8px;
605
606

        @media(max-width: 350px) {
607
608
609
            flex-direction: row-reverse;
            flex-wrap: wrap-reverse;
            justify-content: space-around;
610
611

            >div {
612
613
614
                margin-top: 8px;
                margin-bottom: 8px;
            }
615

616
617
618
619
            #filter-toggle {
                flex-direction: column;
            }
        }
620
621

        >div {
622
623
            margin-left: 8px;
        }
624

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

633
634
635
636
            >div {
                margin-left: 8px;
            }
        }
637

638
639
640
641
        #result-count {
            flex-grow: 1;
            text-align: right;
        }
642

643
644
        .option-toggle {
            text-align: center;
645
646

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

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

Dominik Hebeler's avatar
Dominik Hebeler committed
663
664
665
666
        #options-items {
            display: -ms-flexbox;
            display: flex;
            align-items: center;
667

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

Dominik Hebeler's avatar
Dominik Hebeler committed
676
677
                label {
                    margin-bottom: 0;
678
                    font-weight: normal;
Dominik Hebeler's avatar
Dominik Hebeler committed
679
                }
680

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

688
689
                label[for="custom-date"] {
                    cursor: pointer;
690

691
692
693
694
                    &:hover {
                        color: red;
                    }
                }
695

696
697
698
                #bing-from-to {
                    display: none;
                }
699
700

                #custom-date:checked+select {
701
702
                    display: none;
                }
703
704

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

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

715
716
    #settings {
        text-align: center;
717

718
        a {
Kim Höfer's avatar
Kim Höfer committed
719
720
            display: flex;
            align-items: center;
721
            color: @text-color;
722

723
724
            &:hover {
                color: red;
725

Dominik Hebeler's avatar
css fix    
Dominik Hebeler committed
726
727
728
                span.badge {
                    background-color: red;
                }
729
            }
730

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

Karl Hasselbring's avatar
Karl Hasselbring committed
740
741
#spendenaufruf {
    margin-bottom: 10px;
742

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

footer.resultPageFooter {
751
    max-width: @results-width-max;
752

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

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

765
766
@media(max-width: @sidebar-opener-breakpoint) {
    #resultpage-container>.sidebar-opener {
767
768
        display: none;
    }
769

770
    #research-bar>.sidebar-opener {
771
772
        display: initial;
    }
773
774
775
776
777
778
779
}

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

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

781
        @media (max-width: @resultpage-breakpoint-min) {
782
            float: none;
783
784
        }
    }
785

786
787
788
    #additions-container {
        float: left;
        margin-left: 20px;
789

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

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

#resultpage-container-noheader {
    #resultpage-container;
    grid-template-areas: "results";
802
803
}

804
.metager3-unstable-warning {
805
806
807
    text-align: center;
    position: fixed;
    width: 100%;
808
    padding: 8px;
809

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

815
816
.metager3-unstable-warning-static-pages {
    .metager3-unstable-warning;
817
    top: 0;
818
    padding-right: 50px;
819

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

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

/* Settings button and checkboxes */

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

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