result-page.less 15.9 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
42
43
44
45
46
47
}

footer {
    text-align: center;
    a {
        color: @footer-a-color;
    }
}

48
49
50
#map,
#map div {
    display: flex;
Dominik Hebeler's avatar
Dominik Hebeler committed
51
52
}

53
.nav-tabs>li>a {
54
55
56
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
Phil Höfer's avatar
Phil Höfer committed
57
58
}

Phil Höfer's avatar
Phil Höfer committed
59
60
61
62
.tab-content {
    padding-top: 10px;
}

Phil Höfer's avatar
Phil Höfer committed
63
64
65
66
.hostlabel {
    display: none;
    position: relative;
    margin-top: -14px;
67
68
69
70
71
    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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
}

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

93
94
95
.navbar-resultpage {
    background-color: @navbar-resultpage-background-color;
    position: absolute;
Karl Hasselbring's avatar
Karl Hasselbring committed
96
97
    border-bottom: 2px solid #ff8000;
    padding-bottom: 10px;
98
99
100
101
102
103
104
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
    &>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
132
}
Phil Höfer's avatar
Phil Höfer committed
133

134
.fa.fa-twitter {
Dominik Hebeler's avatar
Dominik Hebeler committed
135
136
137
    color: #6faedc
}

Phil Höfer's avatar
Phil Höfer committed
138
139
140
141
.dense-col {
    padding: 0px
}

Phil Höfer's avatar
Phil Höfer committed
142
143
144
.logo {
    height: 35px;
    padding: 5px 0;
145
146
147
148
    &>a {
        line-height: 100%;
        height: 100%;
        display: block;
Phil Höfer's avatar
Phil Höfer committed
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
    }
}

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

input#eingabeTop {
    height: 35px;
}

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

165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
#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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
}

.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
210
    padding: 0px;
Phil Höfer's avatar
Phil Höfer committed
211
    padding-top: 52px;
212
    background-color: white;
Phil Höfer's avatar
Phil Höfer committed
213
214
215
216
217
218
}

#helpButton {
    color: black;
}

219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
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
236
237
}

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

Phil Höfer's avatar
Phil Höfer committed
266
267
268
269
270
271
#spenden {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

272
273
274
275
276
#spruch {
    .author {
        font-size: 80%;
        font-weight: normal;
        font-style: italic;
277
        color: @spruch-author-color;
278
279
280
281
282
283
284
    }
    &>p {
        margin-bottom: 0;
        &+p {
            margin-top: 4px;
        }
    }
Phil Höfer's avatar
Phil Höfer committed
285
286
}

287
288
289
.saver-options {
    display: flex;
    padding-bottom: 15px;
290
    &>input {
291
292
293
294
        min-width: 35%;
        max-width: 80%;
    }
}
295

296
297
298
.ui-effects-transfer {
    border: 1px dotted black;
}
299

Karl Hasselbring's avatar
Karl Hasselbring committed
300
301
302
303
304
305
306
307
308
309
#logo-searchbar-container {
    display: flex;
}

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

310
311
312
313
#header-searchbar {
    flex-grow: 1;
}

Karl Hasselbring's avatar
Karl Hasselbring committed
314
.searchbar {
Karl Hasselbring's avatar
Karl Hasselbring committed
315
    margin-top: 5px;
Karl Hasselbring's avatar
Karl Hasselbring committed
316
    display: flex;
317
    align-items: center;
Karl Hasselbring's avatar
Karl Hasselbring committed
318
    border-left: #bbb solid 1px;
319
320
    .search-input {
        order: 2;
Karl Hasselbring's avatar
Karl Hasselbring committed
321
        border: none;
Karl Hasselbring's avatar
Karl Hasselbring committed
322
323
        box-shadow: none !important;
        border: white solid 1px;
324
        font-size: 16px;
Karl Hasselbring's avatar
Karl Hasselbring committed
325
        &:focus {
Karl Hasselbring's avatar
Karl Hasselbring committed
326
            border: #bbb dotted 1px;
Karl Hasselbring's avatar
Karl Hasselbring committed
327
328
        }
    }
329
330
331
332
333
334
335
336
    .search-reset {
        order: 1;
        border: none;
        background-color: transparent;
        color: #444;
    }
    .search-submit {
        order: 3;
Karl Hasselbring's avatar
Karl Hasselbring committed
337
338
        color: #bbb;
        font-size: 20px;
Karl Hasselbring's avatar
Karl Hasselbring committed
339
340
341
    }
}

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

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

509
510
.options-list>li {
    &:hover {
511
        background-color: @options-list-li-hover-background-color;
512
513
    }
    &>a {
514
        color: @options-list-li-a-color;
515
516
517
518
519
520
521
522
523
524
        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
525
526
}

527
528
529
530
.js-only {
    display: none;
}

Phil Höfer's avatar
Phil Höfer committed
531
532
533
534
535
536
537

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

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

538
.image-item {
Phil Höfer's avatar
Phil Höfer committed
539
540
541
    width: 150px;
    text-align: center;
    margin-bottom: 10px;
542
543
544
545
    margin: 5px;
    .img {
        box-shadow: 0px 0px 10px 2px @image-item-img-box-shadow-color;
    }
Phil Höfer's avatar
Phil Höfer committed
546
547
}

548
.image-container {
Phil Höfer's avatar
Phil Höfer committed
549
    margin: 10px auto;
550
551
    display: flex;
    flex-wrap: wrap;
Phil Höfer's avatar
Phil Höfer committed
552
553
554
555
556
557
558
559
}


/* Placeholder für ladende Tabs */

.loader {
    text-align: center;
    margin-top: 20px;
560
561
562
    &>img {
        width: 30px;
    }
Phil Höfer's avatar
Phil Höfer committed
563
564
565
566
567
568
569
570
571
572
573
574
575
}

.pager {
    text-align: center;
}

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

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

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

.lightslider {
    overflow: visible!important;
}

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

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

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

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

665

666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
/*
 * <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;
682
    flex-direction: column; // border: 2px solid #ccc;
683
684
685
686
    .quicktip {
        margin: 10px 0px;
        padding-left: 10px;
        border-left: 3px solid #fb0;
687
688
689
690
691
692
693
        details:not([open=""]) {
            .quicktip-summary p {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
694
695
        .quicktip-summary {
            h1 {
696
                font-size: 18px;
697
698
                font-weight: bold;
            }
Karl Hasselbring's avatar
Karl Hasselbring committed
699
700
701
            p {
                font-size: 16px;
            }
702
703
704
705
706
707
        }
        .quicktip-detail {
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            h2 {
                margin: 10px 0px;
708
                font-size: 17px;
709
710
711
712
                font-weight: bold;
            }
            p {
                display: none;
713
                font-size: 15px;
714
715
716
            }
        }
        .gefVon {
717
            font-size: 15px;
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
        }
        &[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;
735
                align-items: center;
736
                h1 {
737
                    margin: 0px;
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
                }
                p {
                    margin: 5px;
                    .spendenaufruf-btn {
                        color: white;
                        background-color: #ff8000;
                        font-size: 16px;
                    }
                }
            }
        }
        &[type=dictCC] {
            .quicktip-summary {
                p {
                    font-weight: bold;
                }
            }
        }
    }
757
}