result-page.less 16.4 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
312
313
314
315
316
317
318
319
#logo-searchbar-container {
    display: flex;
}

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

320
321
322
323
#header-searchbar {
    flex-grow: 1;
}

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

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

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

509
510
511
512
.js-only {
    display: none;
}

Phil Höfer's avatar
Phil Höfer committed
513
514
515
516
517
518
519

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

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

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

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


/* Placeholder für ladende Tabs */

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

547
548
549
550
551
552
553
554
555
556
557
558
559
560
.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;
        }
    }
}

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

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

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

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

.lightslider {
    overflow: visible!important;
}

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

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

#mark {
    font-size: 13px;
650
651
652
    a {
        margin-left: 3px;
    }
653
654
}

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

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

672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688

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