result-page.less 16 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;
327
            background-color: #eee;
328
329
330
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
Karl Hasselbring's avatar
Karl Hasselbring committed
331
332
        }
    }
333
334
335
336
337
338
339
340
    .search-reset {
        order: 1;
        border: none;
        background-color: transparent;
        color: #444;
    }
    .search-submit {
        order: 3;
Karl Hasselbring's avatar
Karl Hasselbring committed
341
342
        color: #bbb;
        font-size: 20px;
Karl Hasselbring's avatar
Karl Hasselbring committed
343
344
345
    }
}

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

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

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

531
532
533
534
.js-only {
    display: none;
}

Phil Höfer's avatar
Phil Höfer committed
535
536
537
538
539
540
541

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

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

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

552
.image-container {
Phil Höfer's avatar
Phil Höfer committed
553
    margin: 10px auto;
554
555
    display: flex;
    flex-wrap: wrap;
Phil Höfer's avatar
Phil Höfer committed
556
557
558
559
560
561
562
563
}


/* Placeholder für ladende Tabs */

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

.pager {
    text-align: center;
}

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

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

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

.lightslider {
    overflow: visible!important;
}

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

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

#mark {
    font-size: 13px;
656
657
658
    a {
        margin-left: 3px;
    }
659
660
}

661
.resultContainer {
662
663
    margin: 0px;
    padding: 0px;
664
665
    @media(max-width: @screen-xs-max) {
        padding-right: 0px;
666
    }
667
668
}

669

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