result-page.less 13.3 KB
Newer Older
1
2
3
/* Ergebnisseite */

@import "./quicktips.less";
4
@import "./result-saver.less";
5
6
@import "./result.less";
@import "./product.less";
Karl Hasselbring's avatar
Karl Hasselbring committed
7
//
Karl Hasselbring's avatar
Karl Hasselbring committed
8
@resultpage-background-color: @background-color;
Karl Hasselbring's avatar
Karl Hasselbring committed
9
//
10
@results-margin-left: 16px;
Karl Hasselbring's avatar
Karl Hasselbring committed
11
12
13
14
15
16
17
//
@result-page-a-hover-color: red;
@result-page-product-shop-color: green;
//
@a-hover-color: @result-page-a-hover-color;
@a-donation-hover-color: @result-page-a-hover-color;
@product-shop-color: @result-page-product-shop-color;
Karl Hasselbring's avatar
Karl Hasselbring committed
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//
@results-width-min: 500px;
@results-width-max: 700px;
@additions-width-min: 400px;
@additions-width-max: 500px;
//
@resultpage-breakpoint-large: (@results-width-max + @additions-width-max + @padding-small-default * 4);
@resultpage-breakpoint-small: (@results-width-min + @additions-width-min + @padding-small-default * 4);
//
@resultpage-leftbox-max-width: @results-width-max;
@resultpage-leftbox-min-dist-left-right: @padding-small-default;
@resultpage-leftbox-min-dist-top-bottom: @padding-small-default;
//
@logo-size-breakpoint: (@results-width-min + @padding-small-default * 2);
//
33
@sidebar-opener-breakpoint: (@results-width-max + @padding-small-default * 2 + 60px);
Karl Hasselbring's avatar
Karl Hasselbring committed
34
//
Karl Hasselbring's avatar
Karl Hasselbring committed
35
36
37
38
39
40
41
42
43
44
45
@quicktip-background-color: @color-white;
@hostlabel-a-link-or-visited-color: @color-white;
@hostlabel-background-color: @color-strong-grey;
@a-donation-normal-or-visited-color: inherit;
@spruch-author-color: @color-strong-grey;
@options-list-li-hover-background-color: @color-almost-white;
@options-list-li-a-color: @color-strong-grey;
@image-item-img-box-shadow-color: fade(@color-black, 30%);
@searchplugin-a-color: @color-white;
@lsprev-or-lsnext-i-background-color: @color-black;
//
46
47
48
49
50
51
#header-logo {
    z-index: 0;
    padding-right: 10px;
    h1 {
        .logo;
        margin: 0px;
52
        font-size: 22px;
53
54
        display: inline-block;
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
55
56
57
58
59
60
61
62
63
64
65
66
    .screen-small {
        display: none;
    }
    .screen-large {}
    @media (max-width: @logo-size-breakpoint) {
        .screen-large {
            display: none;
        }
        .screen-small {
            display: initial;
        }
    }
67
68
}

69
body {
70
    &#resultpage-body {
71
        background-image: inherit;
Karl Hasselbring's avatar
Karl Hasselbring committed
72
        background-color: @resultpage-background-color;
73
74
75
    }
    &.quicktips {
        background-color: @quicktip-background-color;
76
77
78
    }
}

79
.navbar {
Karl Hasselbring's avatar
Karl Hasselbring committed
80
    border-bottom: 3px solid @metager-orange;
81
82
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
    &.navbar-resultpage {
Karl Hasselbring's avatar
Karl Hasselbring committed
83
        border-bottom: 2px solid @metager-orange;
84
85
86
87
88
89
        box-shadow: none;
    }
}

.lSPrev>span,
.lSNext>span {
Karl Hasselbring's avatar
Karl Hasselbring committed
90
    color: @metager-orange;
91
92
}

93
94
95
#map,
#map div {
    display: flex;
Dominik Hebeler's avatar
Dominik Hebeler committed
96
97
}

98
.nav-tabs>li>a {
99
100
101
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
Phil Höfer's avatar
Phil Höfer committed
102
103
}

Phil Höfer's avatar
Phil Höfer committed
104
105
106
107
.tab-content {
    padding-top: 10px;
}

Phil Höfer's avatar
Phil Höfer committed
108
109
110
111
.hostlabel {
    display: none;
    position: relative;
    margin-top: -14px;
112
113
114
115
116
    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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
}

.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;
136
137
138
    @media (max-width: @screen-xs-max) {
        padding-left: 0px;
    }
Phil Höfer's avatar
Phil Höfer committed
139
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
.input-group-addon {
    padding: 0;
}

input#eingabeTop {
    height: 35px;
}

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

#search {
    background-color: inherit;
    border: 0;
    width: 50px;
    height: 100%;
}

#helpButton {
    color: black;
}

173
174
a {
    &:visited {
175
        color: @link-color;
176
177
178
179
180
181
182
183
184
185
186
187
188
189
    }
    &: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
190
191
192
}

#spenden {
193
    .overflow-ellipsis;
Phil Höfer's avatar
Phil Höfer committed
194
195
}

196
197
198
199
200
#spruch {
    .author {
        font-size: 80%;
        font-weight: normal;
        font-style: italic;
201
        color: @spruch-author-color;
202
203
204
205
206
207
208
    }
    &>p {
        margin-bottom: 0;
        &+p {
            margin-top: 4px;
        }
    }
Phil Höfer's avatar
Phil Höfer committed
209
210
}

211
212
213
.saver-options {
    display: flex;
    padding-bottom: 15px;
214
    &>input {
215
216
217
218
        min-width: 35%;
        max-width: 80%;
    }
}
219

220
221
222
.ui-effects-transfer {
    border: 1px dotted black;
}
223

224
225
226
227
#header-searchbar {
    flex-grow: 1;
}

Phil Höfer's avatar
Phil Höfer committed
228
.description-container {
229
    margin: 0 !important;
Phil Höfer's avatar
Phil Höfer committed
230
231
}

232
233
.options-list>li {
    &:hover {
234
        background-color: @options-list-li-hover-background-color;
235
236
    }
    &>a {
237
        color: @options-list-li-a-color;
238
239
240
241
242
243
244
245
246
247
        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
248
249
}

250
251
252
253
.js-only {
    display: none;
}

Phil Höfer's avatar
Phil Höfer committed
254
255
256
257
258
259
/* Hier der Style für die Bilder */

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

260
.image-item {
Phil Höfer's avatar
Phil Höfer committed
261
262
263
    width: 150px;
    text-align: center;
    margin-bottom: 10px;
264
265
266
267
    margin: 5px;
    .img {
        box-shadow: 0px 0px 10px 2px @image-item-img-box-shadow-color;
    }
Phil Höfer's avatar
Phil Höfer committed
268
269
}

270
.image-container {
Phil Höfer's avatar
Phil Höfer committed
271
    margin: 10px auto;
272
273
    display: flex;
    flex-wrap: wrap;
Phil Höfer's avatar
Phil Höfer committed
274
275
276
277
278
279
280
}

/* Placeholder für ladende Tabs */

.loader {
    text-align: center;
    margin-top: 20px;
281
282
283
    &>img {
        width: 30px;
    }
Phil Höfer's avatar
Phil Höfer committed
284
285
}

286
287
288
289
290
291
292
293
.mg-pager {
    display: flex;
    justify-content: center;
    &>div {
        border: #aaa solid 1px;
        border-radius: 10px;
        padding: 5px;
        margin-left: 10px;
294
295
        background-color: white;
        box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
296
297
298
299
300
301
        &:first-child {
            margin-left: 0px;
        }
    }
}

Phil Höfer's avatar
Phil Höfer committed
302
303
304
305
306
307
308
#searchplugin {
    display: none;
    position: fixed;
    top: 50px;
    right: 10px;
    z-index: 501;
    width: 25%;
309
310
311
312
313
    &>div {
        text-align: center;
        padding-top: 5px;
    }
    &>a {
314
        color: @searchplugin-a-color;
315
    }
Phil Höfer's avatar
Phil Höfer committed
316
317
318
319
320
321
322
323
}

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

324
325
326
327
#products {
    width: 100%;
    height: 210px;
    padding-bottom: 0;
328
    transform: translate3d(0px, 0px, 0px);
329
330
331
332
333
    margin-bottom: 10px;
}

.lSPrev>i,
.lSNext>i {
334
    background-color: @lsprev-or-lsnext-i-background-color;
Phil Höfer's avatar
Phil Höfer committed
335
336
337
338
339
    padding: 5px;
}

#mark {
    font-size: 13px;
340
341
342
    a {
        margin-left: 3px;
    }
343
344
}

345
346
347
348
349
350
351
352
353
@keyframes quicktip-extender-turn {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(180deg);
    }
}

354
355
356
357
358
359
360
/* New result style */

.content-wrapper {
    display: flex;
    flex-direction: column;
}

361
#resultpage-container {
362
    margin: @padding-small-default;
363
    margin-left: @results-margin-left;
364
365
366
    display: grid;
    grid-template-columns: @results-width-max @additions-width-max;
    grid-template-areas: "searchbar ." "foki ." "results additions";
367
    grid-column-gap: (@padding-small-default * 2);
368
369
370
371
    grid-row-gap: @padding-small-default;
    justify-items: stretch;
    align-items: stretch;
    /**/
Karl Hasselbring's avatar
Karl Hasselbring committed
372
373
    background-color: @resultpage-background-color;
    #research-bar-container {
374
        grid-area: searchbar;
375
    }
376
377
378
379
380
381
382
383
384
385
    #research-bar-placeholder {
        grid-area: searchbar;
        /**/
        max-width: @results-width-max;
    }
    #foki {
        grid-area: foki;
        /**/
        max-width: @results-width-max;
    }
386
    #results-container {
387
388
389
        grid-area: results;
        /**/
        max-width: @results-width-max;
390
        .alert {
391
            margin-bottom: @padding-small-default;
392
        }
393
    }
394
    #additions-container {
395
396
        grid-area: additions;
        /**/
Karl Hasselbring's avatar
Karl Hasselbring committed
397
        //min-width: @additions-width-min;
398
        max-width: @additions-width-max;
399
400
401
        #search-settings {
            display: none;
        }
402
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
403
    @media (max-width: @resultpage-breakpoint-large) {
404
405
406
        @supports (display: grid) {
            grid-template-columns:~"calc(60% - 8px)"~"calc(40% - 8px)";
            grid-template-areas: "searchbar ." "foki ." "results additions";
Karl Hasselbring's avatar
Karl Hasselbring committed
407
        }
408
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
409
    @media (max-width: @resultpage-breakpoint-small) {
410
        margin-left: @padding-small-default;
Karl Hasselbring's avatar
Karl Hasselbring committed
411
        grid-template-columns: 100%;
412
413
414
415
416
        grid-template-areas: "searchbar" "foki" "results";
        #additions-container {
            display: none;
        }
    }
417
418
}

Karl Hasselbring's avatar
Karl Hasselbring committed
419
#research-bar-container {
420
    margin-left: (@results-margin-left - @padding-small-default);
421
    position: fixed;
422
    z-index: 5;
Karl Hasselbring's avatar
Karl Hasselbring committed
423
424
425
    top: 0;
    left: 0;
    background-color: @resultpage-background-color;
426
427
428
429
430
431
432
433
434
435
436
437
    padding: @padding-small-default @padding-small-default 0px @padding-small-default;
    width: (@results-width-max + 2 * @padding-small-default);
    max-width: (@results-width-max + 2 * @padding-small-default);
    @media (max-width: @resultpage-breakpoint-large) {
        @supports (display: grid) {
            width: ~"calc(60% - 6px)";
        }
    }
    @media (max-width: @resultpage-breakpoint-small) {
        width: 100%;
        margin-left: 0px;
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
438
439
440
441
442
443
444
445
446
447
448
    #research-bar {
        background-color: white;
        border: 1px solid #ccc;
        border-bottom: 2px solid @metager-orange;
        box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
        display: flex;
        align-items: center;
        padding: 4px;
        .resultpage-searchbar {
            .search-input-submit .search-input input {
                border-bottom: 1px solid #ccc;
449
            }
450
            @media (max-width: @sidebar-opener-breakpoint) {
Karl Hasselbring's avatar
Karl Hasselbring committed
451
452
453
454
455
456
457
458
459
460
461
462
463
464
                .search-focus-selector {
                    border-top: none;
                    border-radius: 5px;
                }
                .search-input-submit {
                    border-radius: 5px;
                }
                >* {
                    border-radius: 5px;
                    min-height: 40px;
                    &:not(:first-child) {
                        border-left: 1px solid #aaa;
                    }
                }
465
            }
466
467
        }
    }
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
}

#foki {
    display: flex;
    justify-content: left;
    /*
    @media (max-width: (@results-width-min + @additions-width-min - 1px)) {
        width: 100%;
        max-width: none;
        margin: 0px;
        padding: @padding-small-default;
        .scrollbox {
            max-width: none;
            margin: 0px;
            #foki-box {
                max-width: none;
                margin: 0px;
            }
486
        }
487
488
489
490
491
    }
    @media (max-width: (4 * @padding-small-default + @results-width-max + @additions-width-max - 1px)) {
        padding-left: @padding-small-default;
    }
    @media (max-width: (@results-width-min + @additions-width-min - 1px)) {
492
        width: 100%;
493
        max-width: 700px;
494
        margin: 0px;
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
        padding: @padding-small-default;
        #research-bar {
            max-width: none;
            margin: 0px;
        }
    }
    */
    #foki-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        max-width: @resultpage-leftbox-max-width;
        background-color: white;
        border: 1px solid #ccc;
        -webkit-box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
        box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
        overflow-x: visible;
        padding: 10px;
        @media (max-width: 700px) {
            overflow-x: auto;
        }
        &>div {
            padding: 0px 10px;
            &>a {
                color: black;
            }
            &.active>a {
523
524
                border-bottom: 1px solid black;
                color: black;
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
            }
            &:last-child {
                padding-right: 20px
            }
        }
        .edit-focus {
            margin-left: 7px;
        }
        /* Scrollbar Style */
        &::-webkit-scrollbar {
            height: 0px;
            /* remove scrollbar space */
            background: transparent;
            /* optional: just make scrollbar invisible */
        }
540
    }
541
}
Karl Hasselbring's avatar
Karl Hasselbring committed
542
543
544
545
546
547
548
549

#spendenaufruf {
    margin-bottom: 10px;
    a {
        background-color: white;
        display: inline-block;
        width: 100%;
    }
550
551
552
553
554
}

footer.resultPageFooter {
    max-width: 700px;
    margin-top: 20px;
555
    @media (max-width: (2 * @results-margin-left + @results-width-max - 1px)) {
556
557
        margin: 20px 0 0 0;
    }
558
559
560
561
}

/* Searchbar Opener */

562
#research-bar>.sidebar-opener {
563
564
565
566
567
    display: none;
    margin-right: 10px;
    margin-left: 20px;
}

568
569
@media(max-width: @sidebar-opener-breakpoint) {
    #resultpage-container>.sidebar-opener {
570
571
        display: none;
    }
572
    #research-bar>.sidebar-opener {
573
574
        display: initial;
    }
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
}

/* Style-fixes for browsers that do not support grid layout */

#resultpage-container {
    #results-container {
        float: left;
        @media (max-width: @resultpage-breakpoint-small) {
            float:none;
        }
    }
    #additions-container {
        float: left;
        margin-left: 20px;
        @supports (display: grid) {
            float: none;
            margin-left: 0px;
        }
    }
594
595
596
597
598
599
600
}

/* Style for resultpage container without any header content */

#resultpage-container-noheader {
    #resultpage-container;
    grid-template-areas: "results";
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
}

.metager3-unstable-warning-resultpage {
    text-align: center;
    position: fixed;
    bottom: 0;
    margin-bottom: 0px;
    width: 100%;
}

.metager3-unstable-warning {
    text-align: center;
    position: fixed;
    top: 0;
    width: 100%;
    padding-right: 60px;
    padding-left: 150px;
Karl Hasselbring's avatar
Karl Hasselbring committed
618
}