wcfsetup/install/files/style/layout/box.scss

   1 /* default styling for all boxes */
   2 .box {
   3         box-sizing: border-box;
   4 }
   5
   6 .boxImage {
   7         img {
   8                 height: auto;
   9                 max-width: 100%;
  10         }
  11 }
  12
  13 .boxTitle {
  14         @include wcfFontHeadline;
  15
  16         & + .boxContent {
  17                 margin-top: 20px;
  18         }
  19
  20         .badge {
  21                 top: -2px;
  22         }
  23 }
  24
  25 .boxContent {
  26         & + .boxContent {
  27                 margin-top: 20px;
  28         }
  29 }
  30
  31 .boxContent {
  32         & + .boxTitle {
  33                 margin-top: 30px;
  34         }
  35 }
  36
  37 .boxContent {
  38         .section:first-child {
  39                 margin-top: 0;
  40         }
  41 }
  42
  43 .boxContentSeparator {
  44         background-color: var(--wcfContentBorderInner);
  45         border: 0;
  46         height: 1px;
  47         margin: 30px auto;
  48         width: 60%;
  49 }
  50
  51 /* styling for boxes in <hero> position */
  52 .boxesHero {
  53         .boxContainer {
  54                 @include screen-md-down {
  55                         padding: 40px 0;
  56                 }
  57
  58                 @include screen-lg {
  59                         padding: 60px 0;
  60                 }
  61         }
  62
  63         .box {
  64                 text-align: center;
  65
  66                 &:not(:last-child) {
  67                         @include screen-md-down {
  68                                 margin-bottom: 40px;
  69                         }
  70
  71                         @include screen-lg {
  72                                 margin-bottom: 60px;
  73                         }
  74                 }
  75         }
  76
  77         .boxTitle {
  78                 @include wcfFontTitle;
  79         }
  80
  81         .boxWithImage {
  82                 display: flex;
  83                 flex-wrap: wrap;
  84
  85                 .boxImage,
  86                 .boxTitle,
  87                 .boxContent {
  88                         flex: 0 0 100%;
  89                 }
  90
  91                 .boxImage {
  92                         align-items: center;
  93                         display: flex;
  94                         justify-content: center;
  95                         max-height: 750px;
  96                         order: 3;
  97                         overflow: hidden;
  98
  99                         @include screen-md-down {
 100                                 margin-top: 20px;
 101                         }
 102
 103                         @include screen-lg {
 104                                 margin-top: 30px;
 105                         }
 106                 }
 107         }
 108 }
 109
 110 /* styling for boxes in <headerBoxes> position */
 111 .boxesHeaderBoxes {
 112         background-color: var(--wcfFooterBoxBackground);
 113         color: var(--wcfFooterBoxText);
 114
 115         a {
 116                 color: var(--wcfFooterBoxLink);
 117
 118                 &:hover {
 119                         color: var(--wcfFooterBoxLinkActive);
 120                 }
 121         }
 122
 123         .icon {
 124                 color: var(--wcfFooterBoxText);
 125         }
 126
 127         .boxContainer {
 128                 @include screen-sm-up {
 129                         display: flex;
 130                         flex-wrap: wrap;
 131                 }
 132
 133                 @include screen-md-down {
 134                         padding: 40px 0;
 135                         margin-bottom: -40px;
 136                         margin-left: -10px;
 137                         margin-right: -10px;
 138                 }
 139
 140                 @include screen-lg {
 141                         padding: 60px 0;
 142                         margin-bottom: -60px;
 143                         margin-left: -15px;
 144                         margin-right: -15px;
 145                 }
 146         }
 147
 148         .box {
 149                 overflow: hidden;
 150                 padding-left: 15px;
 151                 padding-right: 15px;
 152
 153                 @include screen-md-down {
 154                         margin-bottom: 40px;
 155                 }
 156
 157                 @include screen-sm-md {
 158                         flex: 0 0 50%;
 159                         max-width: 50%;
 160
 161                         &.boxFullWidth {
 162                                 flex-basis: 100%;
 163                                 max-width: 100%;
 164                         }
 165
 166                         /* one item */
 167                         &:first-child:nth-last-child(1) {
 168                                 flex-basis: 100%;
 169                                 max-width: 100%;
 170                         }
 171                 }
 172
 173                 @include screen-lg {
 174                         flex: 0 0 25%;
 175                         margin-bottom: 60px;
 176                         max-width: 25%;
 177
 178                         &.boxFullWidth {
 179                                 flex-basis: 100%;
 180                                 max-width: 100%;
 181                         }
 182
 183                         /* one item */
 184                         &:first-child:nth-last-child(1) {
 185                                 flex-basis: 100%;
 186                                 max-width: 100%;
 187                         }
 188
 189                         /* two items */
 190                         &:first-child:nth-last-child(2),
 191                         &:first-child:nth-last-child(2) ~ .box {
 192                                 flex-basis: 50%;
 193                                 max-width: 50%;
 194                         }
 195
 196                         /* three items */
 197                         &:first-child:nth-last-child(3),
 198                         &:first-child:nth-last-child(3) ~ .box {
 199                                 flex-basis: 33.3333%;
 200                                 max-width: 33.3333%;
 201                         }
 202                 }
 203         }
 204
 205         .boxImage {
 206                 align-items: center;
 207                 display: flex;
 208                 justify-content: center;
 209                 margin-bottom: 20px;
 210                 max-height: 100px;
 211                 overflow: hidden;
 212         }
 213 }
 214
 215 /* styling for boxes in <top>/<bottom> position */
 216 .boxesTop,
 217 .boxesBottom {
 218         .box {
 219                 @include screen-md-down {
 220                         margin-bottom: 40px;
 221                         margin-top: 40px;
 222                 }
 223
 224                 @include screen-lg {
 225                         margin-bottom: 60px;
 226                         margin-top: 60px;
 227                 }
 228         }
 229
 230         .boxTitle {
 231                 color: var(--wcfContentHeadlineText);
 232
 233                 @include wcfFontSection;
 234
 235                 a {
 236                         color: var(--wcfContentHeadlineLink);
 237
 238                         &:hover {
 239                                 color: var(--wcfContentHeadlineLinkActive);
 240                         }
 241                 }
 242         }
 243
 244         @include screen-xs {
 245                 .boxImage {
 246                         align-items: center;
 247                         display: flex;
 248                         justify-content: center;
 249                         margin-bottom: 20px;
 250                         max-height: 100px;
 251                         overflow: hidden;
 252                 }
 253         }
 254
 255         @include screen-sm-up {
 256                 .boxImage {
 257                         width: 30%;
 258                 }
 259
 260                 .boxWithImage {
 261                         @include clearfix;
 262
 263                         &:nth-child(odd) {
 264                                 .boxImage {
 265                                         float: left;
 266                                 }
 267                         }
 268
 269                         &:nth-child(even) {
 270                                 .boxImage {
 271                                         float: right;
 272                                 }
 273                         }
 274                 }
 275         }
 276
 277         @include screen-sm-md {
 278                 .boxWithImage {
 279                         &:nth-child(odd) {
 280                                 .boxImage {
 281                                         margin: 0 10px 10px 0;
 282                                 }
 283                         }
 284
 285                         &:nth-child(even) {
 286                                 .boxImage {
 287                                         margin: 0 0 10px 10px;
 288                                 }
 289                         }
 290                 }
 291         }
 292
 293         @include screen-lg {
 294                 .boxWithImage {
 295                         &:nth-child(odd) {
 296                                 .boxImage {
 297                                         margin: 0 20px 20px 0;
 298                                 }
 299                         }
 300
 301                         &:nth-child(even) {
 302                                 .boxImage {
 303                                         margin: 0 0 20px 20px;
 304                                 }
 305                         }
 306                 }
 307         }
 308 }
 309
 310 .boxesTop {
 311         border-bottom: 1px solid var(--wcfContentBorderInner);
 312 }
 313
 314 .boxesBottom {
 315         border-top: 1px solid var(--wcfContentBorderInner);
 316 }
 317
 318 /* styling for boxes in <sidebarLeft>/<sidebarRight> position */
 319 .boxesSidebarLeft,
 320 .boxesSidebarRight {
 321         color: var(--wcfSidebarText);
 322
 323         a {
 324                 color: var(--wcfSidebarLink);
 325
 326                 &:hover {
 327                         color: var(--wcfSidebarLinkActive);
 328                 }
 329         }
 330
 331         > .boxContainer {
 332                 @include screen-sm {
 333                         --column-count: 2;
 334                 }
 335
 336                 @include screen-md {
 337                         --column-count: 3;
 338                 }
 339
 340                 @include screen-sm-md {
 341                         display: grid;
 342                         gap: 30px;
 343                         grid-template-columns: repeat(var(--column-count), 1fr);
 344
 345                         > .box {
 346                                 margin: 0 !important;
 347                         }
 348                 }
 349         }
 350
 351         .icon {
 352                 color: var(--wcfSidebarText);
 353         }
 354
 355         small,
 356         .dimmed {
 357                 color: var(--wcfSidebarDimmedText);
 358
 359                 a {
 360                         color: var(--wcfSidebarDimmedLink);
 361
 362                         &:hover {
 363                                 color: var(--wcfSidebarDimmedLinkActive);
 364                         }
 365                 }
 366         }
 367
 368         .boxTitle {
 369                 color: var(--wcfSidebarHeadlineText);
 370
 371                 a {
 372                         color: var(--wcfSidebarHeadlineLink);
 373
 374                         &:hover {
 375                                 color: var(--wcfSidebarHeadlineLinkActive);
 376                         }
 377                 }
 378         }
 379
 380         .box {
 381                 border-radius: var(--wcfBorderRadius);
 382
 383                 &:not(.boxBorderless) {
 384                         background-color: var(--wcfSidebarBackground);
 385                         border: 1px solid var(--wcfSidebarBorder);
 386
 387                         @include screen-md-down {
 388                                 padding: 20px 10px;
 389
 390                                 .boxMenu {
 391                                         margin-left: -10px;
 392                                         margin-right: -10px;
 393                                 }
 394                         }
 395
 396                         @include screen-lg {
 397                                 padding: 20px;
 398
 399                                 .boxMenu {
 400                                         margin-left: -20px;
 401                                         margin-right: -20px;
 402                                 }
 403                         }
 404                 }
 405
 406                 &:not(:first-child) {
 407                         margin-top: 30px;
 408                 }
 409
 410                 &.boxError,
 411                 &.boxInfo,
 412                 &.boxSuccess,
 413                 &.boxWarning {
 414                         .boxTitle {
 415                                 color: inherit;
 416                         }
 417
 418                         a:not(.button) {
 419                                 @include wcfFontBold;
 420
 421                                 &:hover {
 422                                         text-decoration: underline;
 423                                 }
 424                         }
 425                 }
 426
 427                 &.boxError {
 428                         background-color: var(--wcfStatusErrorBackground);
 429                         border-color: var(--wcfStatusErrorBorder);
 430                         color: var(--wcfStatusErrorText);
 431
 432                         a:not(.button) {
 433                                 color: var(--wcfStatusErrorLink);
 434
 435                                 &:hover {
 436                                         color: var(--wcfStatusErrorLinkActive);
 437                                 }
 438                         }
 439                 }
 440
 441                 &.boxInfo {
 442                         background-color: var(--wcfStatusInfoBackground);
 443                         border-color: var(--wcfStatusInfoBorder);
 444                         color: var(--wcfStatusInfoText);
 445
 446                         a:not(.button) {
 447                                 color: var(--wcfStatusInfoLink);
 448
 449                                 &:hover {
 450                                         color: var(--wcfStatusInfoLinkActive);
 451                                 }
 452                         }
 453                 }
 454
 455                 &.boxSuccess {
 456                         background-color: var(--wcfStatusSuccessBackground);
 457                         border-color: var(--wcfStatusSuccessBorder);
 458                         color: var(--wcfStatusSuccessText);
 459
 460                         a:not(.button) {
 461                                 color: var(--wcfStatusSuccessLink);
 462
 463                                 &:hover {
 464                                         color: var(--wcfStatusSuccessLinkActive);
 465                                 }
 466                         }
 467                 }
 468
 469                 &.boxWarning {
 470                         background-color: var(--wcfStatusWarningBackground);
 471                         border-color: var(--wcfStatusWarningBorder);
 472                         color: var(--wcfStatusWarningText);
 473
 474                         a:not(.button) {
 475                                 color: var(--wcfStatusWarningLink);
 476
 477                                 &:hover {
 478                                         color: var(--wcfStatusWarningLinkActive);
 479                                 }
 480                         }
 481                 }
 482
 483                 .boxMenu {
 484                         .boxMenuLink {
 485                                 align-items: flex-start;
 486                                 display: flex;
 487                                 padding: 5px 20px;
 488
 489                                 .boxMenuLinkTitle {
 490                                         flex: 1 1 auto;
 491                                 }
 492
 493                                 .badge {
 494                                         flex: 0 0 auto;
 495                                 }
 496                         }
 497
 498                         li.active > .boxMenuLink {
 499                                 background-color: var(--wcfContentBackground);
 500                                 color: var(--wcfContentLink);
 501
 502                                 &:hover {
 503                                         color: var(--wcfContentLinkActive);
 504                                 }
 505                         }
 506
 507                         .boxMenuDepth1 .boxMenuLink {
 508                                 padding-left: 40px;
 509                         }
 510
 511                         .boxMenuDepth2 .boxMenuLink {
 512                                 padding-left: 60px;
 513                         }
 514
 515                         .boxMenuItem .boxMenuLink {
 516                                 padding-left: 100px;
 517                         }
 518
 519                         .boxMenuItemDepth1 .boxMenuLink {
 520                                 padding-left: 20px;
 521                         }
 522
 523                         .boxMenuItemDepth2 .boxMenuLink {
 524                                 padding-left: 40px;
 525                         }
 526
 527                         .boxMenuItemDepth3 .boxMenuLink {
 528                                 padding-left: 60px;
 529                         }
 530
 531                         .boxMenuItemDepth4 .boxMenuLink {
 532                                 padding-left: 80px;
 533                         }
 534                 }
 535         }
 536
 537         @include screen-xs {
 538                 .boxImage {
 539                         align-items: center;
 540                         display: flex;
 541                         justify-content: center;
 542                         margin-bottom: 20px;
 543                         max-height: 100px;
 544                         overflow: hidden;
 545                 }
 546         }
 547
 548         @include screen-sm-md {
 549                 .boxWithImage {
 550                         @include clearfix;
 551
 552                         .boxTitle,
 553                         .boxContent {
 554                                 margin-left: calc(30% + 15px);
 555                         }
 556                 }
 557
 558                 .boxImage {
 559                         float: left;
 560                         width: 30%;
 561                 }
 562         }
 563
 564         @include screen-lg {
 565                 .boxImage {
 566                         align-items: center;
 567                         display: flex;
 568                         justify-content: center;
 569                         margin-bottom: 20px;
 570                         max-height: 100px;
 571                         overflow: hidden;
 572                 }
 573         }
 574 }
 575
 576 .boxesSidebarLeft .box .boxMenu {
 577         li.active > .boxMenuLink {
 578                 border-radius: var(--wcfBorderRadius);
 579                 margin-left: 10px;
 580                 margin-right: 10px;
 581                 padding-left: 10px;
 582                 padding-right: 10px;
 583         }
 584
 585         .boxMenuDepth1 li.active > .boxMenuLink {
 586                 padding-left: 30px;
 587         }
 588
 589         .boxMenuDepth2 li.active > .boxMenuLink {
 590                 padding-left: 50px;
 591         }
 592
 593         li.active {
 594                 &.boxMenuItemDepth2 .boxMenuLink {
 595                         padding-left: 30px;
 596                 }
 597
 598                 &.boxMenuItemDepth3 .boxMenuLink {
 599                         padding-left: 50px;
 600                 }
 601
 602                 &.boxMenuItemDepth4 .boxMenuLink {
 603                         padding-left: 70px;
 604                 }
 605         }
 606 }
 607
 608 .boxesSidebarRight .box .boxMenu {
 609         li.active > .boxMenuLink {
 610                 border-radius: var(--wcfBorderRadius);
 611                 margin-left: 10px;
 612                 margin-right: 10px;
 613                 padding-left: 10px;
 614                 padding-right: 10px;
 615         }
 616
 617         li.active {
 618                 &.boxMenuItemDepth2 .boxMenuLink {
 619                         padding-left: 30px;
 620                 }
 621
 622                 &.boxMenuItemDepth3 .boxMenuLink {
 623                         padding-left: 50px;
 624                 }
 625
 626                 &.boxMenuItemDepth4 .boxMenuLink {
 627                         padding-left: 70px;
 628                 }
 629         }
 630 }
 631
 632 /* collapsible sidebar for mobile devices */
 633 @include screen-md-down {
 634         .main > .layoutBoundary {
 635                 display: flex;
 636                 flex-wrap: wrap;
 637
 638                 > .content {
 639                         flex: 0 0 100%;
 640                         order: 2;
 641                 }
 642
 643                 > .boxesSidebarLeft {
 644                         order: 1;
 645                 }
 646
 647                 > .boxesSidebarRight {
 648                         order: 3;
 649                 }
 650         }
 651
 652         .boxesSidebarLeft {
 653                 flex: 1 0 100%;
 654                 pointer-events: none;
 655
 656                 > .boxContainer {
 657                         pointer-events: all;
 658                 }
 659
 660                 &:not(.open) {
 661                         flex: 1 50%;
 662
 663                         > .boxContainer {
 664                                 display: none;
 665                         }
 666                 }
 667
 668                 &::before {
 669                         background-color: var(--wcfSidebarBackground);
 670                         color: var(--wcfSidebarLink);
 671                         content: attr(data-show-sidebar);
 672                         display: block;
 673                         padding: 10px 0;
 674                         pointer-events: all;
 675                         text-align: center;
 676                 }
 677
 678                 &.open::before {
 679                         content: attr(data-hide-sidebar);
 680                         margin-bottom: 20px;
 681                 }
 682         }
 683
 684         .boxesSidebarLeft.boxesSidebarLeftHasMenu {
 685                 &::before {
 686                         content: attr(data-show-navigation);
 687                 }
 688
 689                 &.open::before {
 690                         content: attr(data-hide-navigation);
 691                 }
 692         }
 693
 694         .boxesSidebarRight {
 695                 flex: 1 0 100%;
 696         }
 697 }
 698
 699 /* styling for boxes in <contentTop>/<contentBottom> position */
 700 .boxesContentTop,
 701 .boxesContentBottom {
 702         .box {
 703                 &:not(:first-child) {
 704                         margin-top: 40px;
 705                 }
 706         }
 707
 708         .boxTitle {
 709                 color: var(--wcfContentHeadlineText);
 710
 711                 @include wcfFontSection;
 712
 713                 a {
 714                         color: var(--wcfContentHeadlineLink);
 715
 716                         &:hover {
 717                                 color: var(--wcfContentHeadlineLinkActive);
 718                         }
 719                 }
 720         }
 721
 722         .box.boxInfo {
 723                 background-color: var(--wcfStatusInfoBackground);
 724                 border-color: var(--wcfStatusInfoBorder);
 725                 color: var(--wcfStatusInfoText);
 726                 padding: 20px;
 727                 text-align: center;
 728
 729                 a:not(.button) {
 730                         color: var(--wcfStatusInfoLink);
 731
 732                         @include wcfFontBold;
 733
 734                         &:hover {
 735                                 color: var(--wcfStatusInfoLinkActive);
 736                                 text-decoration: underline;
 737                         }
 738                 }
 739
 740                 .formSubmit {
 741                         margin-top: 20px;
 742                 }
 743         }
 744
 745         @include screen-xs {
 746                 .boxImage {
 747                         align-items: center;
 748                         display: flex;
 749                         justify-content: center;
 750                         margin-bottom: 20px;
 751                         max-height: 100px;
 752                         overflow: hidden;
 753                 }
 754         }
 755
 756         @include screen-sm-up {
 757                 .boxWithImage {
 758                         @include clearfix;
 759                 }
 760
 761                 .boxImage {
 762                         float: left;
 763                         width: 30%;
 764                 }
 765         }
 766
 767         @include screen-sm-md {
 768                 .boxImage {
 769                         margin: 0 10px 10px 0;
 770                 }
 771         }
 772
 773         @include screen-lg {
 774                 .boxImage {
 775                         margin: 0 20px 20px 0;
 776                 }
 777         }
 778 }
 779
 780 .boxesContentTop:not(:first-child) {
 781         margin-top: 40px;
 782 }
 783
 784 .boxesContentBottom {
 785         margin-top: 40px;
 786 }
 787
 788 /* styling for boxes in <footerBoxes> position */
 789 .boxesFooterBoxes {
 790         background-color: var(--wcfFooterBoxBackground);
 791         color: var(--wcfFooterBoxText);
 792
 793         a {
 794                 color: var(--wcfFooterBoxLink);
 795
 796                 &:hover {
 797                         color: var(--wcfFooterBoxLinkActive);
 798                 }
 799         }
 800
 801         .icon {
 802                 color: var(--wcfFooterBoxText);
 803         }
 804
 805         .boxContainer {
 806                 @include screen-sm-down {
 807                         display: flex;
 808                         flex-direction: column;
 809                         padding: 40px 0;
 810                         row-gap: 40px;
 811                 }
 812
 813                 @include screen-md-up {
 814                         column-gap: 30px;
 815                         display: grid;
 816                         grid-template-columns: 1fr 1fr;
 817                         padding: 60px 0;
 818                         row-gap: 60px;
 819                 }
 820         }
 821
 822         @include screen-md-up {
 823                 .box.boxFullWidth {
 824                         grid-column: span 2;
 825                 }
 826         }
 827
 828         .boxTitle {
 829                 color: var(--wcfFooterBoxHeadlineText);
 830
 831                 a {
 832                         color: var(--wcfFooterBoxHeadlineLink);
 833
 834                         &:hover {
 835                                 color: var(--wcfFooterBoxHeadlineLinkActive);
 836                         }
 837                 }
 838         }
 839
 840         .boxImage {
 841                 align-items: center;
 842                 display: flex;
 843                 justify-content: center;
 844                 margin-bottom: 20px;
 845                 max-height: 100px;
 846                 overflow: hidden;
 847         }
 848 }
 849
 850 /* styling for boxes in <footer> position */
 851 .boxesFooter {
 852         background-color: var(--wcfFooterBackground);
 853         color: var(--wcfFooterText);
 854         padding: 20px 0;
 855
 856         .layoutBoundary {
 857                 position: relative;
 858         }
 859
 860         .icon {
 861                 color: var(--wcfFooterText);
 862         }
 863
 864         a {
 865                 color: var(--wcfFooterLink);
 866
 867                 &:hover {
 868                         color: var(--wcfFooterLinkActive);
 869                         text-decoration: underline;
 870                 }
 871         }
 872
 873         .box {
 874                 &:not(:first-child) {
 875                         margin-top: 20px;
 876                 }
 877         }
 878
 879         .boxTitle {
 880                 color: var(--wcfFooterHeadlineText);
 881
 882                 a {
 883                         color: var(--wcfFooterHeadlineLink);
 884
 885                         &:hover {
 886                                 color: var(--wcfFooterHeadlineLinkActive);
 887                         }
 888                 }
 889         }
 890
 891         @include screen-xs {
 892                 .boxImage {
 893                         align-items: center;
 894                         display: flex;
 895                         justify-content: center;
 896                         margin-bottom: 20px;
 897                         max-height: 100px;
 898                         overflow: hidden;
 899                 }
 900         }
 901
 902         @include screen-sm-up {
 903                 .boxWithImage {
 904                         @include clearfix;
 905                 }
 906
 907                 .boxImage {
 908                         float: left;
 909                         width: 30%;
 910                 }
 911         }
 912
 913         @include screen-sm-md {
 914                 .boxImage {
 915                         margin: 0 10px 10px 0;
 916                 }
 917         }
 918
 919         @include screen-lg {
 920                 .boxImage {
 921                         margin: 0 20px 20px 0;
 922                 }
 923         }
 924
 925         .boxMenuLinkGroup {
 926                 .boxMenu {
 927                         > li {
 928                                 > ol {
 929                                         a {
 930                                                 // use text color instead
 931                                                 color: var(--wcfFooterText);
 932                                         }
 933                                 }
 934                         }
 935                 }
 936         }
 937 }
 938
 939 .styleChanger {
 940         position: absolute;
 941         right: 20px;
 942         z-index: 1;
 943
 944         button {
 945                 color: var(--wcfFooterLink);
 946         }
 947
 948         @include screen-md-down {
 949                 right: 10px;
 950         }
 951 }
 952
 953 @media (hover: hover) {
 954         .styleChanger button:hover {
 955                 color: var(--wcfFooterLinkActive);
 956                 text-decoration: underline;
 957         }
 958 }
 959
 960 html[data-color-scheme="dark"] .page__colorScheme--light {
 961         display: none !important;
 962 }
 963 html:not([data-color-scheme="dark"]) .page__colorScheme--dark {
 964         display: none !important;
 965 }
 966
 967 .boxesTop,
 968 .boxesBottom,
 969 .boxesFooter {
 970         .boxMenu {
 971                 display: inline-flex;
 972                 flex-wrap: wrap;
 973                 margin-left: -10px;
 974                 margin-right: -10px;
 975
 976                 > li {
 977                         flex: 0 0 auto;
 978                         padding-left: 10px;
 979                         padding-right: 10px;
 980
 981                         @include screen-md-down {
 982                                 margin-bottom: 10px;
 983                                 margin-top: 10px;
 984                         }
 985                 }
 986         }
 987
 988         .boxMenuLinkGroup {
 989                 &:not(:first-child) {
 990                         margin-top: 40px;
 991                 }
 992
 993                 .boxMenu {
 994                         display: flex;
 995                         flex-wrap: wrap;
 996                         margin-bottom: -20px;
 997
 998                         .boxMenuLink {
 999                                 display: inline-block;
1000                         }
1001
1002                         > li {
1003                                 @include screen-md-up {
1004                                         flex: 0 0 25%;
1005                                         max-width: 25%;
1006                                 }
1007
1008                                 @include screen-sm-down {
1009                                         flex: 1 1 100%;
1010                                 }
1011
1012                                 margin-bottom: 20px;
1013
1014                                 > .boxMenuLink {
1015                                         @include wcfFontHeadline;
1016
1017                                         margin-bottom: 10px;
1018                                 }
1019                         }
1020                 }
1021         }
1022 }
1023
1024 .boxWithEditButton {
1025         position: relative;
1026
1027         .boxEditButton {
1028                 color: inherit;
1029                 opacity: 0;
1030                 position: absolute;
1031                 top: 4px;
1032                 transition: opacity 0.12s ease-in-out;
1033                 right: 4px;
1034
1035                 &:hover {
1036                         color: inherit;
1037                 }
1038
1039                 > .icon {
1040                         color: inherit;
1041                 }
1042         }
1043 }
1044
1045 html:not(.touch) .boxWithEditButton:hover .boxEditButton {
1046         opacity: 1;
1047 }
1048
1049 .boxMenuResetFilter {
1050         margin-top: 10px;
1051 }