result-page.less 12.5 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
8
9
//
@resultpage-background-color: #FAFAFA;
//
10
@results-margin-left: 16px;
Karl Hasselbring's avatar
Karl Hasselbring committed
11
12
13
14
15
16
17
18
19
//
@result-page-body-background-color: @background-color;
@result-page-a-hover-color: red;
@result-page-product-shop-color: green;
//
@body-background-color: @result-page-body-background-color;
@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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//
@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);
//
@openSidebar-breakpoint: (@results-width-max + @padding-small-default * 2 + 60px);
//
37
38
39
40
41
42
#header-logo {
    z-index: 0;
    padding-right: 10px;
    h1 {
        .logo;
        margin: 0px;
43
        font-size: 22px;
44
45
        display: inline-block;
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
46
47
48
49
50
51
52
53
54
55
56
57
    .screen-small {
        display: none;
    }
    .screen-large {}
    @media (max-width: @logo-size-breakpoint) {
        .screen-large {
            display: none;
        }
        .screen-small {
            display: initial;
        }
    }
58
59
}

60
body {
61
    &#resultpage-body {
62
        background-image: inherit;
Karl Hasselbring's avatar
Karl Hasselbring committed
63
        background-color: @resultpage-background-color;
64
65
66
    }
    &.quicktips {
        background-color: @quicktip-background-color;
67
68
69
    }
}

70
.navbar {
Karl Hasselbring's avatar
Karl Hasselbring committed
71
    border-bottom: 3px solid @metager-orange;
72
73
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
    &.navbar-resultpage {
Karl Hasselbring's avatar
Karl Hasselbring committed
74
        border-bottom: 2px solid @metager-orange;
75
76
77
78
79
80
        box-shadow: none;
    }
}

.lSPrev>span,
.lSNext>span {
Karl Hasselbring's avatar
Karl Hasselbring committed
81
    color: @metager-orange;
82
83
}

84
85
86
#map,
#map div {
    display: flex;
Dominik Hebeler's avatar
Dominik Hebeler committed
87
88
}

89
.nav-tabs>li>a {
90
91
92
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
Phil Höfer's avatar
Phil Höfer committed
93
94
}

Phil Höfer's avatar
Phil Höfer committed
95
96
97
98
.tab-content {
    padding-top: 10px;
}

Phil Höfer's avatar
Phil Höfer committed
99
100
101
102
.hostlabel {
    display: none;
    position: relative;
    margin-top: -14px;
103
104
105
106
107
    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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
}

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

129
.fa.fa-twitter {
Dominik Hebeler's avatar
Dominik Hebeler committed
130
131
132
    color: #6faedc
}

Phil Höfer's avatar
Phil Höfer committed
133
134
135
136
.dense-col {
    padding: 0px
}

Phil Höfer's avatar
Phil Höfer committed
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
.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;
}

161
162
a {
    &:visited {
163
        color: @link-color;
164
165
166
167
168
169
170
171
172
173
174
175
176
177
    }
    &: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
178
179
180
}

#spenden {
181
    .overflow-ellipsis;
Phil Höfer's avatar
Phil Höfer committed
182
183
}

184
185
186
187
188
#spruch {
    .author {
        font-size: 80%;
        font-weight: normal;
        font-style: italic;
189
        color: @spruch-author-color;
190
191
192
193
194
195
196
    }
    &>p {
        margin-bottom: 0;
        &+p {
            margin-top: 4px;
        }
    }
Phil Höfer's avatar
Phil Höfer committed
197
198
}

199
200
201
.saver-options {
    display: flex;
    padding-bottom: 15px;
202
    &>input {
203
204
205
206
        min-width: 35%;
        max-width: 80%;
    }
}
207

208
209
210
.ui-effects-transfer {
    border: 1px dotted black;
}
211

212
213
214
215
#header-searchbar {
    flex-grow: 1;
}

Phil Höfer's avatar
Phil Höfer committed
216
.description-container {
217
    margin: 0 !important;
Phil Höfer's avatar
Phil Höfer committed
218
219
}

220
221
.options-list>li {
    &:hover {
222
        background-color: @options-list-li-hover-background-color;
223
224
    }
    &>a {
225
        color: @options-list-li-a-color;
226
227
228
229
230
231
232
233
234
235
        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
236
237
}

238
239
240
241
.js-only {
    display: none;
}

Phil Höfer's avatar
Phil Höfer committed
242
243
244
245
246
247
/* Hier der Style für die Bilder */

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

248
.image-item {
Phil Höfer's avatar
Phil Höfer committed
249
250
251
    width: 150px;
    text-align: center;
    margin-bottom: 10px;
252
253
254
255
    margin: 5px;
    .img {
        box-shadow: 0px 0px 10px 2px @image-item-img-box-shadow-color;
    }
Phil Höfer's avatar
Phil Höfer committed
256
257
}

258
.image-container {
Phil Höfer's avatar
Phil Höfer committed
259
    margin: 10px auto;
260
261
    display: flex;
    flex-wrap: wrap;
Phil Höfer's avatar
Phil Höfer committed
262
263
264
265
266
267
268
}

/* Placeholder für ladende Tabs */

.loader {
    text-align: center;
    margin-top: 20px;
269
270
271
    &>img {
        width: 30px;
    }
Phil Höfer's avatar
Phil Höfer committed
272
273
}

274
275
276
277
278
279
280
281
.mg-pager {
    display: flex;
    justify-content: center;
    &>div {
        border: #aaa solid 1px;
        border-radius: 10px;
        padding: 5px;
        margin-left: 10px;
282
283
        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);
284
285
286
287
288
289
        &:first-child {
            margin-left: 0px;
        }
    }
}

Phil Höfer's avatar
Phil Höfer committed
290
291
292
293
294
295
296
#searchplugin {
    display: none;
    position: fixed;
    top: 50px;
    right: 10px;
    z-index: 501;
    width: 25%;
297
298
299
300
301
    &>div {
        text-align: center;
        padding-top: 5px;
    }
    &>a {
302
        color: @searchplugin-a-color;
303
    }
Phil Höfer's avatar
Phil Höfer committed
304
305
306
307
308
309
310
311
}

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

312
313
314
315
#products {
    width: 100%;
    height: 210px;
    padding-bottom: 0;
316
    transform: translate3d(0px, 0px, 0px);
317
318
319
320
321
    margin-bottom: 10px;
}

.lSPrev>i,
.lSNext>i {
322
    background-color: @lsprev-or-lsnext-i-background-color;
Phil Höfer's avatar
Phil Höfer committed
323
324
325
326
327
    padding: 5px;
}

#mark {
    font-size: 13px;
328
329
330
    a {
        margin-left: 3px;
    }
331
332
}

333
334
335
336
337
338
339
340
341
@keyframes quicktip-extender-turn {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(180deg);
    }
}

342
343
344
345
346
347
348
/* New result style */

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

349
#resultpage-container {
350
    margin: @padding-small-default;
351
    margin-left: @results-margin-left;
352
353
354
    display: grid;
    grid-template-columns: @results-width-max @additions-width-max;
    grid-template-areas: "searchbar ." "foki ." "results additions";
355
    grid-column-gap: (@padding-small-default * 2);
356
357
358
359
    grid-row-gap: @padding-small-default;
    justify-items: stretch;
    align-items: stretch;
    /**/
Karl Hasselbring's avatar
Karl Hasselbring committed
360
361
    background-color: @resultpage-background-color;
    #research-bar-container {
362
        grid-area: searchbar;
363
    }
364
365
366
367
368
369
370
371
372
373
    #research-bar-placeholder {
        grid-area: searchbar;
        /**/
        max-width: @results-width-max;
    }
    #foki {
        grid-area: foki;
        /**/
        max-width: @results-width-max;
    }
374
    #results-container {
375
376
377
        grid-area: results;
        /**/
        max-width: @results-width-max;
378
        .alert {
379
            margin-bottom: @padding-small-default;
380
        }
381
    }
382
    #additions-container {
383
384
        grid-area: additions;
        /**/
Karl Hasselbring's avatar
Karl Hasselbring committed
385
        //min-width: @additions-width-min;
386
        max-width: @additions-width-max;
387
388
389
        #search-settings {
            display: none;
        }
390
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
391
    @media (max-width: @resultpage-breakpoint-large) {
392
393
394
        @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
395
        }
396
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
397
    @media (max-width: @resultpage-breakpoint-small) {
398
        margin-left: @padding-small-default;
Karl Hasselbring's avatar
Karl Hasselbring committed
399
        grid-template-columns: 100%;
400
401
402
403
404
        grid-template-areas: "searchbar" "foki" "results";
        #additions-container {
            display: none;
        }
    }
405
406
}

Karl Hasselbring's avatar
Karl Hasselbring committed
407
#research-bar-container {
408
    margin-left: (@results-margin-left - @padding-small-default);
409
410
    position: fixed;
    z-index: 100;
Karl Hasselbring's avatar
Karl Hasselbring committed
411
412
413
    top: 0;
    left: 0;
    background-color: @resultpage-background-color;
414
415
416
417
418
419
420
421
422
423
424
425
    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
426
427
428
429
430
431
432
433
434
435
436
    #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;
437
            }
Karl Hasselbring's avatar
Karl Hasselbring committed
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
            @media (max-width: @openSidebar-breakpoint) {
                .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;
                    }
                }
453
            }
454
455
        }
    }
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
}

#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;
            }
474
        }
475
476
477
478
479
    }
    @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)) {
480
        width: 100%;
481
        max-width: 700px;
482
        margin: 0px;
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
        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 {
511
512
                border-bottom: 1px solid black;
                color: black;
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
            }
            &: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 */
        }
528
    }
529
}
Karl Hasselbring's avatar
Karl Hasselbring committed
530
531
532
533
534
535
536
537

#spendenaufruf {
    margin-bottom: 10px;
    a {
        background-color: white;
        display: inline-block;
        width: 100%;
    }
538
539
540
541
542
}

footer.resultPageFooter {
    max-width: 700px;
    margin-top: 20px;
543
    @media (max-width: (2 * @results-margin-left + @results-width-max - 1px)) {
544
545
        margin: 20px 0 0 0;
    }
546
547
548
549
550
551
552
553
554
555
}

/* Searchbar Opener */

#research-bar>.openSidebar {
    display: none;
    margin-right: 10px;
    margin-left: 20px;
}

Karl Hasselbring's avatar
Karl Hasselbring committed
556
@media(max-width: @openSidebar-breakpoint) {
557
558
559
560
561
562
    #resultpage-container>.openSidebar {
        display: none;
    }
    #research-bar>.openSidebar {
        display: initial;
    }
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
}

/* 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;
        }
    }
582
583
584
585
586
587
588
}

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

#resultpage-container-noheader {
    #resultpage-container;
    grid-template-areas: "results";
Karl Hasselbring's avatar
Karl Hasselbring committed
589
}