result-page.less 15.1 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
96
97
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
.navbar-resultpage {
    background-color: @navbar-resultpage-background-color;
    position: absolute;
    &>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
130
}
Phil Höfer's avatar
Phil Höfer committed
131

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

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

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

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

input#eingabeTop {
    height: 35px;
}

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

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

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

#helpButton {
    color: black;
}

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

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

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

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

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

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

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

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

465
466
.options-list>li {
    &:hover {
467
        background-color: @options-list-li-hover-background-color;
468
469
    }
    &>a {
470
        color: @options-list-li-a-color;
471
472
473
474
475
476
477
478
479
480
        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
481
482
}

483
484
485
486
.js-only {
    display: none;
}

Phil Höfer's avatar
Phil Höfer committed
487
488
489
490
491
492
493

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

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

494
.image-item {
Phil Höfer's avatar
Phil Höfer committed
495
496
497
    width: 150px;
    text-align: center;
    margin-bottom: 10px;
498
499
500
501
    margin: 5px;
    .img {
        box-shadow: 0px 0px 10px 2px @image-item-img-box-shadow-color;
    }
Phil Höfer's avatar
Phil Höfer committed
502
503
}

504
.image-container {
Phil Höfer's avatar
Phil Höfer committed
505
    margin: 10px auto;
506
507
    display: flex;
    flex-wrap: wrap;
Phil Höfer's avatar
Phil Höfer committed
508
509
510
511
512
513
514
515
}


/* Placeholder für ladende Tabs */

.loader {
    text-align: center;
    margin-top: 20px;
516
517
518
    &>img {
        width: 30px;
    }
Phil Höfer's avatar
Phil Höfer committed
519
520
521
522
523
524
525
526
527
528
529
530
531
}

.pager {
    text-align: center;
}

#searchplugin {
    display: none;
    position: fixed;
    top: 50px;
    right: 10px;
    z-index: 501;
    width: 25%;
532
533
534
535
536
    &>div {
        text-align: center;
        padding-top: 5px;
    }
    &>a {
537
        color: @searchplugin-a-color;
538
    }
Phil Höfer's avatar
Phil Höfer committed
539
540
541
542
543
544
545
546
547
548
}

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

.product {
    text-align: center;
549
    border: 1px dotted @product-border-color;
Phil Höfer's avatar
Phil Höfer committed
550
551
    padding: 5px;
    max-width: 150px;
Karl Hasselbring's avatar
   
Karl Hasselbring committed
552
    height: 210px;
553
    a {
554
        color: @product-a-color;
555
556
557
558
559
560
561
    }
    img {
        max-width: 100px;
    }
    .price {
        position: relative;
        top: 20px;
562
563
        color: @product-price-color;
        background-color: @product-price-background-color;
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
        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;
579
        color: @product-shop-color;
580
581
582
583
584
585
        margin-bottom: 6px;
    }
    .shipping {
        font-size: 10px;
        text-align: left;
    }
Phil Höfer's avatar
Phil Höfer committed
586
587
588
589
590
591
}

.lightslider {
    overflow: visible!important;
}

592
593
594
595
#products {
    width: 100%;
    height: 210px;
    padding-bottom: 0;
596
    transform: translate3d(0px, 0px, 0px);
597
598
599
600
601
    margin-bottom: 10px;
}

.lSPrev>i,
.lSNext>i {
602
    background-color: @lsprev-or-lsnext-i-background-color;
Phil Höfer's avatar
Phil Höfer committed
603
604
605
606
607
    padding: 5px;
}

#mark {
    font-size: 13px;
608
609
610
    a {
        margin-left: 3px;
    }
611
612
}

613
.resultContainer {
614
615
    margin: 0px;
    padding: 0px;
616
617
    @media(max-width: @screen-xs-max) {
        padding-right: 0px;
618
    }
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
}

/*
 * <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;
637
    flex-direction: column; // border: 2px solid #ccc;
638
639
640
641
    .quicktip {
        margin: 10px 0px;
        padding-left: 10px;
        border-left: 3px solid #fb0;
642
643
644
645
646
647
648
        details:not([open=""]) {
            .quicktip-summary p {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
649
650
        .quicktip-summary {
            h1 {
Karl Hasselbring's avatar
Karl Hasselbring committed
651
                font-size: 18px;
652
653
                font-weight: bold;
            }
Karl Hasselbring's avatar
Karl Hasselbring committed
654
655
656
            p {
                font-size: 16px;
            }
657
658
659
660
661
662
        }
        .quicktip-detail {
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            h2 {
                margin: 10px 0px;
Karl Hasselbring's avatar
Karl Hasselbring committed
663
                font-size: 16px;
664
665
666
667
                font-weight: bold;
            }
            p {
                display: none;
Karl Hasselbring's avatar
Karl Hasselbring committed
668
                font-size: 14px;
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
            }
        }
        .gefVon {
            font-size: 14px;
        }
        &[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;
690
                align-items: center;
691
                h1 {
692
                    margin: 0px;
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
                }
                p {
                    margin: 5px;
                    .spendenaufruf-btn {
                        color: white;
                        background-color: #ff8000;
                        font-size: 16px;
                    }
                }
            }
        }
        &[type=dictCC] {
            .quicktip-summary {
                p {
                    font-weight: bold;
                }
            }
        }
    }
712
}