result-page.less 17 KB
Newer Older
1
2
3
4
5
6
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
37
@body-background-color: @result-page-body-background-color;
@footer-a-color: @result-page-color-black!important;
@hostlabel-a-link-or-visited-color: @result-page-color-white;
@hostlabel-background-color: @result-page-color-strong-grey;
@navbar-resultpage-background-color: @result-page-color-white;
@navbar-resultpage-ul-li-a-not-metager-navbar-toggle-color: @result-page-color-grey;
@navbar-resultpage-ul-li-a-metager-dropdown-toggle-hover-or-focus-background-color: @result-page-color-almost-white;
@research-a-color: @result-page-color-black;
@content-wrapper-background-color: @result-page-color-white;
@a-visited-color: @result-page-a-visited-color;
@a-hover-color: @result-page-a-hover-color;
@a-donation-normal-or-visited-color: inherit;
@a-donation-hover-color: @result-page-a-hover-color;
@resultpage-foki-or-foki-background-color: @result-page-color-white;
@resultpage-foki-or-foki-li-a-color: @result-page-color-grey;
@resultpage-foki-or-foki-li-active-a-color: @result-page-color-black;
@resultpage-foki-or-foki-li-active-a-background-color: @result-page-color-white;
@spruch-author-color: @result-page-color-strong-grey;
@result-title-color: @result-page-color-black;
@result-link-options-color: @result-page-color-strong-grey;
@result-link-options-a-color: @result-page-color-strong-grey;
@result-description-color: @result-page-color-black;
@result-description-img-border-color: @result-page-color-almost-white;
@result-hoster-color: @result-page-color-grey;
@result-hoster-a-color: @result-page-color-strong-grey;
@options-list-li-hover-background-color: @result-page-color-almost-white;
@options-list-li-a-color: @result-page-color-strong-grey;
@image-item-img-box-shadow-color: fade(@result-page-color-black, 30%);
@searchplugin-a-color: @result-page-color-white;
@product-border-color: @result-page-color-almost-white;
@product-a-color: @result-page-color-strong-grey;
@product-price-color: @result-page-color-strong-grey;
@product-price-background-color: fade(@result-page-color-white, 90%);
@product-shop-color: @result-page-product-shop-color;
@lsprev-or-lsnext-i-background-color: @result-page-color-black;
body {
    background-image: inherit;
Karl Hasselbring's avatar
Karl Hasselbring committed
38
    background-color: white;
39
40
}

41
.footer-resultpage {
42
    justify-content: center;
43
44
45
46
47
    a {
        color: @footer-a-color;
    }
}

48
.sideBar {
49
50
51
52
53
54
    border-left: none;
    input#nav0:checked~& {
        border-left: 1px solid LightGray;
    }
}

55
56
57
#map,
#map div {
    display: flex;
Dominik Hebeler's avatar
Dominik Hebeler committed
58
59
}

60
.nav-tabs>li>a {
61
62
63
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
Phil Höfer's avatar
Phil Höfer committed
64
65
}

Phil Höfer's avatar
Phil Höfer committed
66
67
68
69
.tab-content {
    padding-top: 10px;
}

Phil Höfer's avatar
Phil Höfer committed
70
71
72
73
.hostlabel {
    display: none;
    position: relative;
    margin-top: -14px;
74
75
76
77
78
    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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
}

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

100
101
102
.navbar-resultpage {
    background-color: @navbar-resultpage-background-color;
    position: absolute;
Karl Hasselbring's avatar
Karl Hasselbring committed
103
104
    border-bottom: 2px solid #ff8000;
    padding-bottom: 10px;
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
    &>ul>li {
        padding-left: 0;
        padding-right: 0;
        &>a:not(.metager-navbar-toggle) {
            display: block;
            padding: 10px;
            color: @navbar-resultpage-ul-li-a-not-metager-navbar-toggle-color;
        }
        &.active>a,
        a.metager-dropdown-toggle:hover,
        a.metager-dropdown-toggle:focus {
            background-color: @navbar-resultpage-ul-li-a-metager-dropdown-toggle-hover-or-focus-background-color;
        }
    }
    &>ul.list-inline {
        margin-bottom: 0;
    }
    @media (max-width: @screen-xs-max) {
        right: 0px!important;
        left: 0px!important;
    }
    right: initial;
    left: initial;
    margin-bottom: 0px;
    .container {
        padding: 0px;
        margin: 0px;
    }
    .logo {
        padding-top: 0px;
    }
    .input-group {
        margin: 0px 5px;
    }
Phil Höfer's avatar
Phil Höfer committed
139
}
Phil Höfer's avatar
Phil Höfer committed
140

141
.fa.fa-twitter {
Dominik Hebeler's avatar
Dominik Hebeler committed
142
143
144
    color: #6faedc
}

Phil Höfer's avatar
Phil Höfer committed
145
146
147
148
.dense-col {
    padding: 0px
}

Phil Höfer's avatar
Phil Höfer committed
149
150
151
.logo {
    height: 35px;
    padding: 5px 0;
152
153
154
155
    &>a {
        line-height: 100%;
        height: 100%;
        display: block;
Phil Höfer's avatar
Phil Höfer committed
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
    }
}

.input-group-addon {
    padding: 0;
}

input#eingabeTop {
    height: 35px;
}

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

172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
#research {
    nav {
        ul>li {
            width: 20%;
            vertical-align: middle;
            padding-left: 15px;
            padding-right: 15px;
        }
        ul>li.visible-xs {
            width: 10%;
            padding-left: 15px;
            padding-right: 15px;
        }
    }
    ul.list-inline {
        margin-left: 0;
        width: 100%;
    }
    a {
        color: @research-a-color;
    }
    .visible-xs {
        @media (max-width: 767px) {
            display: inline-block!important;
        }
    }
Phil Höfer's avatar
Phil Höfer committed
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
}

.logo h1 {
    font-family: Liberation Sans, sans-serif;
    font-style: italic;
    margin: 0;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
}

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

.content-wrapper {
Phil Höfer's avatar
Phil Höfer committed
217
    padding: 0px;
Phil Höfer's avatar
Phil Höfer committed
218
    padding-top: 52px;
219
    background-color: white;
Phil Höfer's avatar
Phil Höfer committed
220
221
222
223
224
225
}

#helpButton {
    color: black;
}

226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
a {
    &:visited {
        color: @a-visited-color;
    }
    &: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
243
244
}

245
246
.resultpage-foki,
.foki {
247
    background-color: @resultpage-foki-or-foki-background-color;
248
    li {
249
250
        margin: 0px;
        margin-bottom: -1px;
251
        a {
252
            color: @resultpage-foki-or-foki-li-a-color;
253
            padding: 8px 12px;
254
            i+span {
255
256
257
258
259
260
261
                margin-left: 5px;
            }
        }
        span {
            margin-left: 3px;
        }
        &.active {
262
            i+span {
263
264
265
                display: inline!important;
            }
            a {
266
267
                color: @resultpage-foki-or-foki-li-active-a-color;
                background-color: @resultpage-foki-or-foki-li-active-a-background-color;
268
269
            }
        }
270
    }
Karl's avatar
Karl committed
271
272
}

Phil Höfer's avatar
Phil Höfer committed
273
274
275
276
277
278
#spenden {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

279
280
281
282
283
#spruch {
    .author {
        font-size: 80%;
        font-weight: normal;
        font-style: italic;
284
        color: @spruch-author-color;
285
286
287
288
289
290
291
    }
    &>p {
        margin-bottom: 0;
        &+p {
            margin-top: 4px;
        }
    }
Phil Höfer's avatar
Phil Höfer committed
292
293
}

294
295
296
.saver-options {
    display: flex;
    padding-bottom: 15px;
297
    &>input {
298
299
300
301
        min-width: 35%;
        max-width: 80%;
    }
}
302

303
304
305
.ui-effects-transfer {
    border: 1px dotted black;
}
306

Karl Hasselbring's avatar
Karl Hasselbring committed
307
308
309
310
311
312
313
314
315
316
#logo-searchbar-container {
    display: flex;
}

.mg-logo {
    color: #ff8000;
    font-family: Liberation Sans, sans-serif;
    padding: 5px 30px 0px 0px;
}

317
318
319
320
#header-searchbar {
    flex-grow: 1;
}

Karl Hasselbring's avatar
Karl Hasselbring committed
321
.searchbar {
Karl Hasselbring's avatar
Karl Hasselbring committed
322
    margin-top: 5px;
Karl Hasselbring's avatar
Karl Hasselbring committed
323
    display: flex;
324
    align-items: center;
Karl Hasselbring's avatar
Karl Hasselbring committed
325
    border-left: #bbb solid 1px;
326
327
    .search-input {
        order: 2;
Karl Hasselbring's avatar
Karl Hasselbring committed
328
        border: none;
Karl Hasselbring's avatar
Karl Hasselbring committed
329
330
        box-shadow: none !important;
        border: white solid 1px;
331
        font-size: 16px;
Karl Hasselbring's avatar
Karl Hasselbring committed
332
        &:focus {
Karl Hasselbring's avatar
Karl Hasselbring committed
333
            border: #bbb dotted 1px;
334
            background-color: #eee;
335
336
337
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
Karl Hasselbring's avatar
Karl Hasselbring committed
338
339
        }
    }
340
341
342
343
344
345
346
347
    .search-reset {
        order: 1;
        border: none;
        background-color: transparent;
        color: #444;
    }
    .search-submit {
        order: 3;
Karl Hasselbring's avatar
Karl Hasselbring committed
348
349
        color: #bbb;
        font-size: 20px;
Karl Hasselbring's avatar
Karl Hasselbring committed
350
351
352
    }
}

Phil Höfer's avatar
Phil Höfer committed
353
.result {
Karl Hasselbring's avatar
Karl Hasselbring committed
354
    margin-top: 20px;
Karl Hasselbring's avatar
Karl Hasselbring committed
355
    margin-bottom: 40px;
356
357
358
    width: 100%;
    &>.resultInformation {
        border-radius: 5px;
359
        padding-left: 0px;
360
361
362
363
364
365
        &>.save {
            position: absolute;
            top: 0;
            right: 10px;
            cursor: pointer;
        }
366
    }
367
    &>.remover {
368
        cursor: pointer;
369
370
371
        text-align: right;
        color: #777;
    }
372
    .title {
373
        color: @result-title-color;
374
        text-decoration: none;
375
        font-size: 18px;
376
377
378
379
380
381
382
383
384
        font-weight: bold;
        margin-bottom: 0;
        white-space: nowrap;
        line-height: 1.1;
        max-width: 115ch;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .link {
385
        font-size: 16px;
386
387
388
389
390
391
392
393
394
395
        margin: 0;
        line-height: 1.5;
        &>div {
            white-space: nowrap;
        }
        &>span {
            white-space: nowrap;
            margin: 0 5px;
        }
        .options {
396
            color: @result-link-options-color;
397
398
399
            float: left;
        }
        .options>a {
400
            color: @result-link-options-a-color;
401
            display: block;
402
            padding-left: 8px;
403
404
405
406
407
408
409
410
411
412
413
414
            padding-right: 5px;
        }
    }
    .link-link {
        white-space: nowrap;
        max-width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        float: left;
    }
    .description {
        margin-bottom: 3px;
415
        color: @result-description-color;
416
        font-size: 16px;
417
418
        line-height: 1.3;
        clear: both;
419
420
421
        .date {
            font-weight: bold;
        }
422
423
424
425
426
427
        p {
            margin: 0;
            margin-bottom: 4px;
        }
        img {
            margin: 5px;
428
            margin-left: 0px;
429
430
431
432
            margin-right: 15px;
            height: auto;
            width: auto;
            max-width: 120px;
433
434
            max-height: 200px;
            border: solid 1px @result-description-img-border-color;
435
436
        }
    }
437
    &.ad {
Karl Hasselbring's avatar
Karl Hasselbring committed
438
439
440
441
442
443
        .ad-label {
            border: green solid 1px;
            padding: 1px;
            color: green;
            border-radius: 4px;
        }
444
445
446
447
448
449
        .description {
            max-width: 115ch;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
450
451
452
453
    }
    .hoster {
        font-size: 13px;
        margin: 0;
454
        color: @result-hoster-color;
455
456
457
        margin-right: 10px;
        white-space: nowrap;
        a {
458
            color: @result-hoster-a-color;
459
460
        }
    }
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
    .options {
        .option-opener-icon {
            display: block;
            font-size: 16px;
            color: #2A2ADE;
        }
        .option-content {
            background-color: white;
            z-index: 1000;
            position: absolute;
            border: grey solid 1px;
            color: black;
            font-size: 16px;
            border-radius: 5px;
            hr {
                margin: 5px;
            }
            li {
                padding: 5px
            }
            li:not(.option-title):hover {
                background-color: #e0e0e0;
            }
484
485
486
487
            a,
            a:hover,
            a:focus,
            a:visited {
488
489
490
491
492
                color: black;
                display: block;
            }
        }
    }
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
    .proxy {
        font-size: 13px;
        margin-top: 0;
        white-space: nowrap;
        img {
            margin-bottom: 0px;
            margin-right: 2px
        }
    }
    .partnershop-info {
        font-size: 13px;
        margin-top: 0;
        margin-left: 10px;
    }
    .result-image>img {
        height: 100px;
        padding: 10px;
    }
    .image>img {
        max-width: 100%;
    }
Phil Höfer's avatar
Phil Höfer committed
514
515
516
517
518
519
}

.description-container {
    margin: 0!important;
}

520
521
.options-list>li {
    &:hover {
522
        background-color: @options-list-li-hover-background-color;
523
524
    }
    &>a {
525
        color: @options-list-li-a-color;
526
527
528
529
530
531
532
533
534
535
        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
536
537
}

538
539
540
541
.js-only {
    display: none;
}

Phil Höfer's avatar
Phil Höfer committed
542
543
544
545
546
547
548

/* Hier der Style für die Bilder */

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

549
.image-item {
Phil Höfer's avatar
Phil Höfer committed
550
551
552
    width: 150px;
    text-align: center;
    margin-bottom: 10px;
553
554
555
556
    margin: 5px;
    .img {
        box-shadow: 0px 0px 10px 2px @image-item-img-box-shadow-color;
    }
Phil Höfer's avatar
Phil Höfer committed
557
558
}

559
.image-container {
Phil Höfer's avatar
Phil Höfer committed
560
    margin: 10px auto;
561
562
    display: flex;
    flex-wrap: wrap;
Phil Höfer's avatar
Phil Höfer committed
563
564
565
566
567
568
569
570
}


/* Placeholder für ladende Tabs */

.loader {
    text-align: center;
    margin-top: 20px;
571
572
573
    &>img {
        width: 30px;
    }
Phil Höfer's avatar
Phil Höfer committed
574
575
}

576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
.mg-pager {
    display: flex;
    justify-content: center;
    &>div {
        border: #aaa solid 1px;
        border-radius: 10px;
        padding: 5px;
        margin-left: 10px;
        &:first-child {
            margin-left: 0px;
        }
    }
}

.disabled, .disabled * {
    color: #aaa !important;
    cursor: not-allowed !important;
Phil Höfer's avatar
Phil Höfer committed
593
594
595
596
597
598
599
600
601
}

#searchplugin {
    display: none;
    position: fixed;
    top: 50px;
    right: 10px;
    z-index: 501;
    width: 25%;
602
603
604
605
606
    &>div {
        text-align: center;
        padding-top: 5px;
    }
    &>a {
607
        color: @searchplugin-a-color;
608
    }
Phil Höfer's avatar
Phil Höfer committed
609
610
611
612
613
614
615
616
617
618
}

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

.product {
    text-align: center;
619
    border: 1px dotted @product-border-color;
Phil Höfer's avatar
Phil Höfer committed
620
621
    padding: 5px;
    max-width: 150px;
Karl Hasselbring's avatar
   
Karl Hasselbring committed
622
    height: 210px;
623
    a {
624
        color: @product-a-color;
625
626
627
628
629
630
631
    }
    img {
        max-width: 100px;
    }
    .price {
        position: relative;
        top: 20px;
632
633
        color: @product-price-color;
        background-color: @product-price-background-color;
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
        text-align: left;
        width: 80px;
        font-weight: bold;
    }
    .title {
        font-size: 12px;
        font-weight: bold;
        text-align: left;
        max-height: 31px;
        overflow: hidden;
        margin-bottom: 4px;
    }
    .shop {
        font-size: 10px;
        text-align: left;
649
        color: @product-shop-color;
650
651
652
653
654
655
        margin-bottom: 6px;
    }
    .shipping {
        font-size: 10px;
        text-align: left;
    }
Phil Höfer's avatar
Phil Höfer committed
656
657
658
659
660
661
}

.lightslider {
    overflow: visible!important;
}

662
663
664
665
#products {
    width: 100%;
    height: 210px;
    padding-bottom: 0;
666
    transform: translate3d(0px, 0px, 0px);
667
668
669
670
671
    margin-bottom: 10px;
}

.lSPrev>i,
.lSNext>i {
672
    background-color: @lsprev-or-lsnext-i-background-color;
Phil Höfer's avatar
Phil Höfer committed
673
674
675
676
677
    padding: 5px;
}

#mark {
    font-size: 13px;
678
679
680
    a {
        margin-left: 3px;
    }
681
682
}

683
.resultContainer {
684
    margin: 0px;
685
    padding: 20px 0px;
686
687
    @media(max-width: @screen-xs-max) {
        padding-right: 0px;
688
    }
689
690
}

691
692
693
694
695
696
697
698
699
@keyframes quicktip-extender-turn {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(180deg);
    }
}

700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716

/*
 * <div id="quicktips">
 *   <div class="quicktip" type="TYPE">
 *     <details>
 *       <summary>
 *         <h1><a href="URL">TITLE
 *         <p>SUMMARY
 *       <div class="quicktip-detail">
 *         <h1><a href="DETAILURL">DETAILTITLE
 *         <p>DETAILSUMMARY
 *     <span>GEFVON
 * </...>
 */

#quicktips {
    display: flex;
Karl Hasselbring's avatar
Karl Hasselbring committed
717
    flex-direction: column;
718
719
720
721
    details[open=""] .quicktip-extender {
        animation-name: quicktip-extender-turn;
        animation-fill-mode: forwards;
    }
722
723
    .quicktip {
        margin: 10px 0px;
724
        padding: 10px 0px 10px 10px;
725
        border-left: 3px solid #fb0;
726
727
728
729
730
731
732
        details:not([open=""]) {
            .quicktip-summary p {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
733
734
        .quicktip-summary {
            h1 {
735
                margin: 0px 0px 5px 0px;
736
                font-size: 18px;
737
                font-weight: bold;
738
739
740
741
742
743
744
                display: flex;
                justify-content: space-between;
                .quicktip-extender {
                    margin-left: 10px;
                    color: #777;
                    font-size: 20px;
                }
745
            }
Karl Hasselbring's avatar
Karl Hasselbring committed
746
747
748
            p {
                font-size: 16px;
            }
749
750
751
752
753
754
        }
        .quicktip-detail {
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            h2 {
                margin: 10px 0px;
755
                font-size: 17px;
756
757
758
759
                font-weight: bold;
            }
            p {
                display: none;
760
                font-size: 15px;
761
762
763
            }
        }
        .gefVon {
764
            float: right;
765
            font-size: 15px;
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
        }
        &[type=spruch] {
            border-left: 3px solid #070;
            p {
                color: #070;
                .author {
                    color: #404040;
                    font-style: italic;
                }
            }
        }
        &[type=spendenaufruf] {
            border-left: #ddd;
            color: #ff8000;
            .quicktip-summary {
                display: flex;
                justify-content: space-between;
783
                align-items: center;
784
                h1 {
785
                    margin: 0px;
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
                }
                p {
                    margin: 5px;
                    .spendenaufruf-btn {
                        color: white;
                        background-color: #ff8000;
                        font-size: 16px;
                    }
                }
            }
        }
        &[type=dictCC] {
            .quicktip-summary {
                p {
                    font-weight: bold;
                }
            }
        }
    }
805
}