result-page.less 16.7 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
43
44
45
46
47
    text-align: center;
    a {
        color: @footer-a-color;
    }
}

48
49
50
51
52
53
54
#resultPageSideBar {
    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
}

.pager {
    text-align: center;
}

#searchplugin {
    display: none;
    position: fixed;
    top: 50px;
    right: 10px;
    z-index: 501;
    width: 25%;
587
588
589
590
591
    &>div {
        text-align: center;
        padding-top: 5px;
    }
    &>a {
592
        color: @searchplugin-a-color;
593
    }
Phil Höfer's avatar
Phil Höfer committed
594
595
596
597
598
599
600
601
602
603
}

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

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

.lightslider {
    overflow: visible!important;
}

647
648
649
650
#products {
    width: 100%;
    height: 210px;
    padding-bottom: 0;
651
    transform: translate3d(0px, 0px, 0px);
652
653
654
655
656
    margin-bottom: 10px;
}

.lSPrev>i,
.lSNext>i {
657
    background-color: @lsprev-or-lsnext-i-background-color;
Phil Höfer's avatar
Phil Höfer committed
658
659
660
661
662
    padding: 5px;
}

#mark {
    font-size: 13px;
663
664
665
    a {
        margin-left: 3px;
    }
666
667
}

668
.resultContainer {
669
670
    margin: 0px;
    padding: 0px;
671
672
    @media(max-width: @screen-xs-max) {
        padding-right: 0px;
673
    }
674
675
}

676
677
678
679
680
681
682
683
684
@keyframes quicktip-extender-turn {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(180deg);
    }
}

685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701

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