result-page.less 16.3 KB
Newer Older
1 2 3
/* Variables */

// Background color
Karl Hasselbring's avatar
Karl Hasselbring committed
4
@resultpage-background-color: @background-color;
5
// Margin to the left of the results
6
@results-margin-left: 16px;
7
// Min and max widths of the 2 resultpage columns
Karl Hasselbring's avatar
Karl Hasselbring committed
8
@results-width-min: 500px;
9
@results-width-max: 800px;
10
@additions-width-min: 500px;
Karl Hasselbring's avatar
Karl Hasselbring committed
11
@additions-width-max: 500px;
12
// Breakpoints for the 2 resultpage columns
Dominik Hebeler's avatar
Dominik Hebeler committed
13
@resultpage-breakpoint-max: (@results-width-max + @additions-width-max + @padding-small-default * 2 + @padding-small-default * 4 + 6);
14 15 16
@resultpage-breakpoint-min: (@results-width-min + @additions-width-min + @padding-small-default * 4);
@product-shop-color: green;
// The point upon which a .screen-large logo is displayed
Karl Hasselbring's avatar
Karl Hasselbring committed
17
@logo-size-breakpoint: (@results-width-min + @padding-small-default * 2);
18
// The point upon which the sidebar opener switches place
19
@sidebar-opener-breakpoint: (@results-width-max + @padding-small-default * 2 + 60px);
20
// Quicktip background color
21
@quicktip-background-color: @resultpage-background-color;
22
// Color of the Spruch author
Karl Hasselbring's avatar
Karl Hasselbring committed
23
@spruch-author-color: @color-strong-grey;
24 25
/* Styles */

26 27
#header-logo {
    z-index: 0;
28 29
    padding-right: 8px;
    padding-left: 8px;
30 31 32
    h1 {
        .logo;
        margin: 0px;
33
        font-size: 1.5em;
34
        display: inline-block;
Dominik Hebeler's avatar
Dominik Hebeler committed
35 36 37
        > img {
            width: 100px;
        }
38
    }
Karl Hasselbring's avatar
Karl Hasselbring committed
39 40 41 42 43 44 45 46 47
    .screen-small {
        display: none;
    }
    @media (max-width: @logo-size-breakpoint) {
        .screen-large {
            display: none;
        }
        .screen-small {
            display: initial;
Dominik Hebeler's avatar
Dominik Hebeler committed
48 49 50
            img {
                width: 20px;
            }
Karl Hasselbring's avatar
Karl Hasselbring committed
51 52
        }
    }
53 54
}

55
body {
56
    &#resultpage-body {
57
        background-image: inherit;
Karl Hasselbring's avatar
Karl Hasselbring committed
58
        background-color: @resultpage-background-color;
59 60 61
    }
    &.quicktips {
        background-color: @quicktip-background-color;
62 63 64
    }
}

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

.lSPrev>span,
.lSNext>span {
Karl Hasselbring's avatar
Karl Hasselbring committed
76
    color: @metager-orange;
77 78
}

79 80 81
#map,
#map div {
    display: flex;
Dominik Hebeler's avatar
Dominik Hebeler committed
82 83
}

84
.nav-tabs>li>a {
85 86 87
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
Phil Höfer's avatar
Phil Höfer committed
88 89
}

Phil Höfer's avatar
Phil Höfer committed
90 91 92 93
.tab-content {
    padding-top: 10px;
}

Phil Höfer's avatar
Phil Höfer committed
94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
.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;
111
    @media (max-width: @screen-mobile) {
112 113
        padding-left: 0px;
    }
Phil Höfer's avatar
Phil Höfer committed
114 115
}

116
.fa.fa-twitter {
Dominik Hebeler's avatar
Dominik Hebeler committed
117 118 119
    color: #6faedc
}

Phil Höfer's avatar
Phil Höfer committed
120 121 122 123
.dense-col {
    padding: 0px
}

Phil Höfer's avatar
Phil Höfer committed
124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147
.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;
}

148 149 150 151
a {
    &#donation {
        &,
        &:visited {
152
            color: inherit;
153 154
        }
    }
Phil Höfer's avatar
Phil Höfer committed
155 156 157
}

#spenden {
158
    .overflow-ellipsis;
Phil Höfer's avatar
Phil Höfer committed
159 160
}

161 162 163 164 165
#spruch {
    .author {
        font-size: 80%;
        font-weight: normal;
        font-style: italic;
166
        color: @spruch-author-color;
167 168 169 170 171 172 173
    }
    &>p {
        margin-bottom: 0;
        &+p {
            margin-top: 4px;
        }
    }
Phil Höfer's avatar
Phil Höfer committed
174 175
}

176 177 178
.saver-options {
    display: flex;
    padding-bottom: 15px;
179
    &>input {
180 181 182 183
        min-width: 35%;
        max-width: 80%;
    }
}
184

185 186 187
.ui-effects-transfer {
    border: 1px dotted black;
}
188

189 190 191 192
#header-searchbar {
    flex-grow: 1;
}

Phil Höfer's avatar
Phil Höfer committed
193
.description-container {
194
    margin: 0 !important;
Phil Höfer's avatar
Phil Höfer committed
195 196
}

197 198 199 200
.js-only {
    display: none;
}

Phil Höfer's avatar
Phil Höfer committed
201 202 203 204 205 206
/* Hier der Style für die Bilder */

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

207
.image-item {
Phil Höfer's avatar
Phil Höfer committed
208 209 210
    width: 150px;
    text-align: center;
    margin-bottom: 10px;
211 212
    margin: 5px;
    .img {
213
        box-shadow: 0px 0px 10px 2px fade(@color-black, 30%);
214
    }
Phil Höfer's avatar
Phil Höfer committed
215 216
}

217 218
.image-container {
    display: flex;
219 220 221 222 223 224 225 226 227
    flex-flow: row wrap;
    > div.image {
        flex: auto;
        margin: 8px;
        text-align: center;
        > a > div {
            display: inline-block;
            background-color: white;
            text-align: center;
228 229
            .card;
            padding: 4px;
230 231 232 233 234 235 236 237 238
            > img {
                max-width: 150px;
            }
            @media(max-width: 370px){
                > img {
                    max-width: 100%;
                }
            }
            > div {
239
                font-size: .9em;
240
                color: #777;
241
                margin-top: 4px;
242 243 244 245 246 247 248
            }
        }

        > a > div:hover {
            box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
        }
    }
Phil Höfer's avatar
Phil Höfer committed
249 250 251 252 253 254 255
}

/* Placeholder für ladende Tabs */

.loader {
    text-align: center;
    margin-top: 20px;
256 257 258
    &>img {
        width: 30px;
    }
Phil Höfer's avatar
Phil Höfer committed
259 260
}

261 262 263 264 265 266 267 268
.mg-pager {
    display: flex;
    justify-content: center;
    &>div {
        border: #aaa solid 1px;
        border-radius: 10px;
        padding: 5px;
        margin-left: 10px;
269
        background-color: @resultpage-background-color;
270
        box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
271 272 273 274 275 276
        &:first-child {
            margin-left: 0px;
        }
    }
}

277 278
/*
@searchplugin-a-color: @color-white;
Phil Höfer's avatar
Phil Höfer committed
279 280 281 282 283 284 285
#searchplugin {
    display: none;
    position: fixed;
    top: 50px;
    right: 10px;
    z-index: 501;
    width: 25%;
286 287 288 289 290
    &>div {
        text-align: center;
        padding-top: 5px;
    }
    &>a {
291
        color: @searchplugin-a-color;
292
    }
Phil Höfer's avatar
Phil Höfer committed
293 294 295 296 297 298 299
}

@media(min-width: 768px) {
    #searchplugin {
        display: initial;
    }
}
300
*/
Phil Höfer's avatar
Phil Höfer committed
301

302 303 304 305
#products {
    width: 100%;
    height: 210px;
    padding-bottom: 0;
306
    transform: translate3d(0px, 0px, 0px);
307 308 309 310 311
    margin-bottom: 10px;
}

.lSPrev>i,
.lSNext>i {
312
    background-color: @color-black;
Phil Höfer's avatar
Phil Höfer committed
313 314 315 316 317
    padding: 5px;
}

#mark {
    font-size: 13px;
318 319 320
    a {
        margin-left: 3px;
    }
321 322
}

323 324 325 326 327 328 329 330 331
@keyframes quicktip-extender-turn {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(180deg);
    }
}

332 333 334 335 336 337 338
/* New result style */

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

339
#resultpage-container {
340
    margin: @padding-small-default;
341
    margin-top: 0;
342
    display: grid;
343 344
    grid-template-columns: minmax(0px, 150px) @results-width-max @additions-width-max;
    grid-template-areas: "whitespace searchbar ." "whitespace foki ." "whitespace options ." "whitespace results additions" "whitespace footer .";
345
    grid-column-gap: (@padding-small-default * 2);
346 347 348 349
    grid-row-gap: @padding-small-default;
    justify-items: stretch;
    align-items: stretch;
    /**/
Karl Hasselbring's avatar
Karl Hasselbring committed
350
    background-color: @resultpage-background-color;
351 352
    #whitespace {
        grid-area: whitespace;
353
    }
354
    #research-bar-container {
355
        grid-area: searchbar;
356
        padding-top: @padding-small-default;
357
        background-color: @resultpage-background-color;
358
        box-shadow: 0px 1px 3px 2px white, 1px 0px 1px 2px white;
359
        position: sticky;
360 361 362 363 364 365
    }
    #foki {
        grid-area: foki;
        /**/
        max-width: @results-width-max;
    }
366
    #results-container {
367 368 369
        grid-area: results;
        /**/
        max-width: @results-width-max;
370
        .alert {
371
            margin-bottom: @padding-small-default;
372
        }
373 374 375 376 377 378
        #results .alteration {
            margin: (@padding-small-default * 2) 0px;
            margin-top: 0;
            padding: 0px 8px;
            font-weight: 400;
            a i {
379
                font-size: .9em;
380 381
            }
            .original {
382
                font-size: .9em;
383 384 385 386 387 388 389
            }
            @media(max-width: @screen-mobile){
                .card;
                margin: @padding-small-default 0px;
                margin-top: 0;
            }
        }
Dominik Hebeler's avatar
Dominik Hebeler committed
390 391 392 393
        #backtotop {
            text-align: center;
            margin: 1em 0;
        }
394
    }
395
    #additions-container {
396 397
        grid-area: additions;
        /**/
Karl Hasselbring's avatar
Karl Hasselbring committed
398
        //min-width: @additions-width-min;
399
        max-width: @additions-width-max;
400
        width: 100%;
Dominik Hebeler's avatar
Dominik Hebeler committed
401
        height: 100%;
402 403 404
        #search-settings {
            display: none;
        }
405 406
        #quicktips {
            height: 100%;
407
            width: 100%;
408
            min-height: 500px;
409 410 411 412 413
            iframe{
                height: 100%;
                width: 100%;
            }
        }
414
    }
415 416 417
    footer {
        grid-area: footer;
    }
418
    @media (max-width: @resultpage-breakpoint-max) {
419 420
        @supports (display: grid) {
            grid-template-columns:~"calc(60% - 8px)"~"calc(40% - 8px)";
421
            grid-template-areas: "searchbar ." "foki ." "options ." "results additions" "footer .";
Karl Hasselbring's avatar
Karl Hasselbring committed
422
        }
423
    }
424
    @media (max-width: @resultpage-breakpoint-min) {
425
        margin-left: @padding-small-default;
Karl Hasselbring's avatar
Karl Hasselbring committed
426
        grid-template-columns: 100%;
427
        grid-template-areas: "searchbar" "foki" "options" "results" "footer";
428 429 430 431
        #additions-container {
            display: none;
        }
    }
432 433
}

Karl Hasselbring's avatar
Karl Hasselbring committed
434
#research-bar-container {
435
    position: sticky;
436
    z-index: 5;
Karl Hasselbring's avatar
Karl Hasselbring committed
437 438 439
    top: 0;
    left: 0;
    background-color: @resultpage-background-color;
440
    max-width: @results-width-max;
Karl Hasselbring's avatar
Karl Hasselbring committed
441
    #research-bar {
442
        background-color: @resultpage-background-color;
443
        border: 1px solid @border-color;
444
        border-bottom: 1px solid @metager-orange;
Karl Hasselbring's avatar
Karl Hasselbring committed
445 446 447 448 449 450
        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 {
451
                border-bottom: 1px solid @border-color;
452
            }
453
            @media (max-width: @sidebar-opener-breakpoint) {
Karl Hasselbring's avatar
Karl Hasselbring committed
454 455 456 457 458 459 460 461 462 463 464 465 466 467
                .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;
                    }
                }
468
            }
469 470
        }
    }
471 472 473 474 475 476 477 478 479 480
}

#foki {
    display: flex;
    justify-content: left;
    #foki-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
481
        max-width: @results-width-max;
482
        background-color: @resultpage-background-color;
483
        overflow-x: auto;
Dominik Hebeler's avatar
Dominik Hebeler committed
484
        padding: 8px;
485
        border-bottom: 1px solid @border-color;
486 487
        @media (max-width: @screen-mobile) {
            .card;
488
            margin: 0;
489 490
        }
        &>div {
Dominik Hebeler's avatar
Dominik Hebeler committed
491
            padding-right: 16px;
492
            &>a {
493
                color: @text-color;
494 495
            }
            &.active>a {
496 497
                border-bottom: 1px solid @text-color;
                color: @text-color;
498 499 500 501 502 503 504 505 506 507 508 509 510 511 512
            }
            &: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 */
        }
513
    }
514
}
Karl Hasselbring's avatar
Karl Hasselbring committed
515

Dominik Hebeler's avatar
Dominik Hebeler committed
516 517
#options {
    grid-area: options;
518
    background-color: @resultpage-background-color;
519 520 521 522
    max-width: @results-width-max;
    padding: 0 8px;
    @media(max-width: @screen-mobile){
        .card;
523
        margin: 0;
524
    }
Dominik Hebeler's avatar
Dominik Hebeler committed
525 526 527 528 529 530 531 532 533
    input[type=checkbox]{
        display: none;
    }
    .scrollbox {
        max-height: 0;
        transform-origin: top;
        transform: scaleY(0);
        transition: transform .5s, max-height .5s;
    }
534
    input[type=checkbox]:checked + div.scrollbox{
Dominik Hebeler's avatar
Dominik Hebeler committed
535 536 537
        max-height:200px;
        transform: scaleY(1);
    }
538 539 540
    #toggle-box {
        display: flex;
        align-items: center;
541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567
        margin-left: -8px;
        @media(max-width: 350px){
            flex-direction: row-reverse;
            flex-wrap: wrap-reverse;
            justify-content: space-around;
            > div {
                margin-top: 8px;
                margin-bottom: 8px;
            }
            #filter-toggle {
                flex-direction: column;
            }
        }
        > div {
            margin-left: 8px;
        }
        #filter-toggle {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            flex-grow: 0;
            margin-left: 0px;
            >div {
                margin-left: 8px;
            }
        }
568 569 570 571 572 573 574 575 576 577 578 579
        #result-count {
            flex-grow: 1;
            text-align: right;
        }
        .option-toggle {
            text-align: center;
            label{
                font-weight: normal;
                margin-bottom: 0;
            }
        }
    }
Dominik Hebeler's avatar
Dominik Hebeler committed
580 581
    #options-box{
        width: 100%;
582 583
        display: flex;
        justify-content: left;
Dominik Hebeler's avatar
Dominik Hebeler committed
584 585
        overflow: hidden;
        overflow-x: auto;
586
        padding-top: 8px;
Dominik Hebeler's avatar
Dominik Hebeler committed
587 588 589 590 591 592 593 594 595 596
        #options-items {
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            .option-selector {
                display: flex;
                flex-direction: column;
                margin: 0 8px;
                justify-content: center;
                align-items: center;
597
                font-size: .9em;
Dominik Hebeler's avatar
Dominik Hebeler committed
598 599
                label {
                    margin-bottom: 0;
600
                    font-weight: normal;
Dominik Hebeler's avatar
Dominik Hebeler committed
601 602 603 604 605 606 607
                }
                select {
                    background-color: white;
                    border: 1px solid #77777780;
                    padding: 3px;
                    border-radius: 5px;
                }
608 609 610 611 612 613 614 615 616 617 618 619 620 621 622
                label[for="custom-date"] {
                    cursor: pointer;
                    &:hover {
                        color: red;
                    }
                }
                #bing-from-to {
                    display: none;
                }
                #custom-date:checked + select {
                    display: none;
                }
                #custom-date:checked + select + #bing-from-to {
                    display: flex;
                }
Dominik Hebeler's avatar
Dominik Hebeler committed
623
            }
624 625 626
            .option-selector:nth-child(1){
                margin-left: 0;
            }
Dominik Hebeler's avatar
Dominik Hebeler committed
627 628
        }
    }
629 630
    #settings {
        text-align: center;
631
        a {
632
            color: @text-color;
633 634
            &:hover {
                color: red;
Dominik Hebeler's avatar
css fix  
Dominik Hebeler committed
635 636 637
                span.badge {
                    background-color: red;
                }
638
            }
639 640 641 642 643 644
            
            span.badge {
                margin-top: -12px;
                font-size: .7em;
                font-weight: normal;
            }
645 646
        }
    }
Dominik Hebeler's avatar
Dominik Hebeler committed
647 648
}

Karl Hasselbring's avatar
Karl Hasselbring committed
649 650 651 652 653 654 655
#spendenaufruf {
    margin-bottom: 10px;
    a {
        background-color: white;
        display: inline-block;
        width: 100%;
    }
656 657 658
}

footer.resultPageFooter {
659
    max-width: @results-width-max;
660
    @media (max-width: (2 * @results-margin-left + @results-width-max - 1px)) {
661 662
        margin: 20px 0 0 0;
    }
663 664 665
}

/* Searchbar Opener */
666
#research-bar>.sidebar-opener {
667 668 669 670 671
    display: none;
    margin-right: 10px;
    margin-left: 20px;
}

672 673
@media(max-width: @sidebar-opener-breakpoint) {
    #resultpage-container>.sidebar-opener {
674 675
        display: none;
    }
676
    #research-bar>.sidebar-opener {
677 678
        display: initial;
    }
679 680 681 682 683 684 685
}

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

#resultpage-container {
    #results-container {
        float: left;
686
        @media (max-width: @resultpage-breakpoint-min) {
687 688 689 690 691 692 693 694 695 696 697
            float:none;
        }
    }
    #additions-container {
        float: left;
        margin-left: 20px;
        @supports (display: grid) {
            float: none;
            margin-left: 0px;
        }
    }
698 699 700 701 702 703 704
}

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

#resultpage-container-noheader {
    #resultpage-container;
    grid-template-areas: "results";
705 706
}

707
.metager3-unstable-warning {
708 709 710
    text-align: center;
    position: fixed;
    width: 100%;
711
    padding: 8px;
Karl Hasselbring's avatar
Karl Hasselbring committed
712
    @media (max-width: @screen-mobile) {
713 714
        padding: 5px;
    }
715 716
}

717 718
.metager3-unstable-warning-static-pages {
    .metager3-unstable-warning;
719
    top: 0;
720
    padding-right: 50px;
Karl Hasselbring's avatar
Karl Hasselbring committed
721
    @media (max-width: @screen-mobile) {
722 723 724 725 726 727 728 729 730
        padding: 5px;
        padding-right: 50px;
    }
}

.metager3-unstable-warning-resultpage {
    .metager3-unstable-warning;
    bottom: 0;
    margin-bottom: 0px;
Karl Hasselbring's avatar
Karl Hasselbring committed
731 732 733 734 735 736 737 738 739 740 741
}

/* Settings button and checkboxes */

.settings-checkbox {
    margin-top: 5px;
    margin-bottom: 5px;
}

.settings-checkbox .settings-icon {
    margin-left: 5px;
742
    font-size: 1em;
Karl Hasselbring's avatar
Karl Hasselbring committed
743
}