result-page.less 16.5 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
@body-background-color: @result-page-body-background-color;
@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 {
36
37
38
39
40
    &#resultBody {
        background-image: inherit;
    }
    &.quicktips {
        background-color: @quicktip-background-color;
41
42
43
    }
}

44
45
46
47
48
49
50
51
52
53
54
55
56
57
.navbar {
    border-bottom: 3px solid rgb(255, 128, 0);
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
    &.navbar-resultpage {
        border-bottom: 2px solid rgb(255, 128, 0);
        box-shadow: none;
    }
}

.lSPrev>span,
.lSNext>span {
    color: rgb(255, 128, 0);
}

58
59
60
#map,
#map div {
    display: flex;
Dominik Hebeler's avatar
Dominik Hebeler committed
61
62
}

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

Phil Höfer's avatar
Phil Höfer committed
69
70
71
72
.tab-content {
    padding-top: 10px;
}

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

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

103
104
105
.navbar-resultpage {
    background-color: @navbar-resultpage-background-color;
    position: absolute;
Karl Hasselbring's avatar
Karl Hasselbring committed
106
107
    border-bottom: 2px solid #ff8000;
    padding-bottom: 10px;
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
139
140
141
    &>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
142
}
Phil Höfer's avatar
Phil Höfer committed
143

144
.fa.fa-twitter {
Dominik Hebeler's avatar
Dominik Hebeler committed
145
146
147
    color: #6faedc
}

Phil Höfer's avatar
Phil Höfer committed
148
149
150
151
.dense-col {
    padding: 0px
}

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

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

input#eingabeTop {
    height: 35px;
}

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

175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
#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
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
}

.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
220
    padding: 0px;
Phil Höfer's avatar
Phil Höfer committed
221
    padding-top: 52px;
222
    background-color: white;
Phil Höfer's avatar
Phil Höfer committed
223
224
225
226
227
228
}

#helpButton {
    color: black;
}

229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
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
246
247
}

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

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

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

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

306
307
308
.ui-effects-transfer {
    border: 1px dotted black;
}
309

Karl Hasselbring's avatar
Karl Hasselbring committed
310
311
#logo-searchbar-container {
    display: flex;
312
313
314
    @media (max-width: @screen-xs-max) {
        flex-direction: column;
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
315
316
317
318
319
320
321
322
}

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

323
324
325
326
#header-searchbar {
    flex-grow: 1;
}

Phil Höfer's avatar
Phil Höfer committed
327
.result {
Karl Hasselbring's avatar
Karl Hasselbring committed
328
    margin-top: 20px;
Karl Hasselbring's avatar
Karl Hasselbring committed
329
    margin-bottom: 40px;
330
331
332
    width: 100%;
    &>.resultInformation {
        border-radius: 5px;
333
        padding-left: 0px;
334
335
336
337
338
339
        &>.save {
            position: absolute;
            top: 0;
            right: 10px;
            cursor: pointer;
        }
340
    }
341
    &>.remover {
342
        cursor: pointer;
343
344
345
        text-align: right;
        color: #777;
    }
346
    .title {
347
        color: @result-title-color;
348
        text-decoration: none;
349
        font-size: 18px;
350
351
352
353
354
355
356
357
358
        font-weight: bold;
        margin-bottom: 0;
        white-space: nowrap;
        line-height: 1.1;
        max-width: 115ch;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .link {
359
        font-size: 16px;
360
361
362
363
364
365
366
367
368
369
        margin: 0;
        line-height: 1.5;
        &>div {
            white-space: nowrap;
        }
        &>span {
            white-space: nowrap;
            margin: 0 5px;
        }
        .options {
370
            color: @result-link-options-color;
371
372
373
            float: left;
        }
        .options>a {
374
            color: @result-link-options-a-color;
375
            display: block;
376
            padding-left: 8px;
377
378
379
380
381
382
383
384
385
386
387
388
            padding-right: 5px;
        }
    }
    .link-link {
        white-space: nowrap;
        max-width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        float: left;
    }
    .description {
        margin-bottom: 3px;
389
        color: @result-description-color;
390
        font-size: 16px;
391
392
        line-height: 1.3;
        clear: both;
393
394
395
        .date {
            font-weight: bold;
        }
396
397
398
399
400
401
        p {
            margin: 0;
            margin-bottom: 4px;
        }
        img {
            margin: 5px;
402
            margin-left: 0px;
403
404
405
406
            margin-right: 15px;
            height: auto;
            width: auto;
            max-width: 120px;
407
408
            max-height: 200px;
            border: solid 1px @result-description-img-border-color;
409
410
        }
    }
411
    &.ad {
Karl Hasselbring's avatar
Karl Hasselbring committed
412
413
414
415
416
417
        .ad-label {
            border: green solid 1px;
            padding: 1px;
            color: green;
            border-radius: 4px;
        }
418
419
420
421
422
423
        .description {
            max-width: 115ch;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
424
425
426
427
    }
    .hoster {
        font-size: 13px;
        margin: 0;
428
        color: @result-hoster-color;
429
430
431
        margin-right: 10px;
        white-space: nowrap;
        a {
432
            color: @result-hoster-a-color;
433
434
        }
    }
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
    .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;
            }
458
459
460
461
            a,
            a:hover,
            a:focus,
            a:visited {
462
463
464
465
466
                color: black;
                display: block;
            }
        }
    }
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
    .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
488
489
490
491
492
493
}

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

494
495
.options-list>li {
    &:hover {
496
        background-color: @options-list-li-hover-background-color;
497
498
    }
    &>a {
499
        color: @options-list-li-a-color;
500
501
502
503
504
505
506
507
508
509
        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
510
511
}

512
513
514
515
.js-only {
    display: none;
}

Phil Höfer's avatar
Phil Höfer committed
516
517
518
519
520
521
522

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

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

523
.image-item {
Phil Höfer's avatar
Phil Höfer committed
524
525
526
    width: 150px;
    text-align: center;
    margin-bottom: 10px;
527
528
529
530
    margin: 5px;
    .img {
        box-shadow: 0px 0px 10px 2px @image-item-img-box-shadow-color;
    }
Phil Höfer's avatar
Phil Höfer committed
531
532
}

533
.image-container {
Phil Höfer's avatar
Phil Höfer committed
534
    margin: 10px auto;
535
536
    display: flex;
    flex-wrap: wrap;
Phil Höfer's avatar
Phil Höfer committed
537
538
539
540
541
542
543
544
}


/* Placeholder für ladende Tabs */

.loader {
    text-align: center;
    margin-top: 20px;
545
546
547
    &>img {
        width: 30px;
    }
Phil Höfer's avatar
Phil Höfer committed
548
549
}

550
551
552
553
554
555
556
557
558
559
560
561
562
563
.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;
        }
    }
}

564
565
.disabled,
.disabled * {
566
567
    color: #aaa !important;
    cursor: not-allowed !important;
Phil Höfer's avatar
Phil Höfer committed
568
569
570
571
572
573
574
575
576
}

#searchplugin {
    display: none;
    position: fixed;
    top: 50px;
    right: 10px;
    z-index: 501;
    width: 25%;
577
578
579
580
581
    &>div {
        text-align: center;
        padding-top: 5px;
    }
    &>a {
582
        color: @searchplugin-a-color;
583
    }
Phil Höfer's avatar
Phil Höfer committed
584
585
586
587
588
589
590
591
592
593
}

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

.product {
    text-align: center;
594
    border: 1px dotted @product-border-color;
Phil Höfer's avatar
Phil Höfer committed
595
596
    padding: 5px;
    max-width: 150px;
Karl Hasselbring's avatar
   
Karl Hasselbring committed
597
    height: 210px;
598
    a {
599
        color: @product-a-color;
600
601
602
603
604
605
606
    }
    img {
        max-width: 100px;
    }
    .price {
        position: relative;
        top: 20px;
607
608
        color: @product-price-color;
        background-color: @product-price-background-color;
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
        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;
624
        color: @product-shop-color;
625
626
627
628
629
630
        margin-bottom: 6px;
    }
    .shipping {
        font-size: 10px;
        text-align: left;
    }
Phil Höfer's avatar
Phil Höfer committed
631
632
633
634
635
636
}

.lightslider {
    overflow: visible!important;
}

637
638
639
640
#products {
    width: 100%;
    height: 210px;
    padding-bottom: 0;
641
    transform: translate3d(0px, 0px, 0px);
642
643
644
645
646
    margin-bottom: 10px;
}

.lSPrev>i,
.lSNext>i {
647
    background-color: @lsprev-or-lsnext-i-background-color;
Phil Höfer's avatar
Phil Höfer committed
648
649
650
651
652
    padding: 5px;
}

#mark {
    font-size: 13px;
653
654
655
    a {
        margin-left: 3px;
    }
656
657
}

658
.resultContainer {
659
    margin: 0px;
660
    padding: 20px 0px;
661
662
    @media(max-width: @screen-xs-max) {
        padding-right: 0px;
663
    }
664
665
}

666
667
668
669
670
671
672
673
674
@keyframes quicktip-extender-turn {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(180deg);
    }
}

675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691

/*
 * <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
692
    flex-direction: column;
693
694
695
696
    details[open=""] .quicktip-extender {
        animation-name: quicktip-extender-turn;
        animation-fill-mode: forwards;
    }
697
698
    .quicktip {
        margin: 10px 0px;
699
        padding: 10px 0px 10px 10px;
700
        border-left: 3px solid #fb0;
701
702
703
704
705
706
707
        details:not([open=""]) {
            .quicktip-summary p {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
708
709
        .quicktip-summary {
            h1 {
710
                margin: 0px 0px 5px 0px;
711
                font-size: 18px;
712
                font-weight: bold;
713
714
715
716
717
718
719
                display: flex;
                justify-content: space-between;
                .quicktip-extender {
                    margin-left: 10px;
                    color: #777;
                    font-size: 20px;
                }
720
            }
Karl Hasselbring's avatar
Karl Hasselbring committed
721
722
723
            p {
                font-size: 16px;
            }
724
725
726
727
728
729
        }
        .quicktip-detail {
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            h2 {
                margin: 10px 0px;
730
                font-size: 17px;
731
732
733
734
                font-weight: bold;
            }
            p {
                display: none;
735
                font-size: 15px;
736
737
738
            }
        }
        .gefVon {
739
            float: right;
740
            font-size: 15px;
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
        }
        &[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;
758
                align-items: center;
759
                h1 {
760
                    margin: 0px;
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
                }
                p {
                    margin: 5px;
                    .spendenaufruf-btn {
                        color: white;
                        background-color: #ff8000;
                        font-size: 16px;
                    }
                }
            }
        }
        &[type=dictCC] {
            .quicktip-summary {
                p {
                    font-weight: bold;
                }
            }
        }
    }
780
}