5.4/view/css/index.html

   1
   2 <!doctype html>
   3 <html lang="en" class="no-js">
   4   <head>
   5
   6       <meta charset="utf-8">
   7       <meta name="viewport" content="width=device-width,initial-scale=1">
   8
   9
  10
  11
  12       <link rel="shortcut icon" href="../../assets/default.favicon.ico">
  13       <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.0.5">
  14
  15
  16
  17         <title>CSS - WoltLab Suite Documentation</title>
  18
  19
  20
  21       <link rel="stylesheet" href="../../assets/stylesheets/main.77f3fd56.min.css">
  22
  23
  24         <link rel="stylesheet" href="../../assets/stylesheets/palette.7fa14f5b.min.css">
  25
  26
  27
  28           <meta name="theme-color" content="#009485">
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38       <link rel="stylesheet" href="../../stylesheets/extra.css">
  39
  40
  41
  42
  43
  44   </head>
  45
  46
  47
  48
  49
  50
  51
  52     <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
  53
  54
  55
  56     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  57     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  58     <label class="md-overlay" for="__drawer"></label>
  59     <div data-md-component="skip">
  60
  61
  62         <a href="#css" class="md-skip">
  63           Skip to content
  64         </a>
  65
  66     </div>
  67     <div data-md-component="announce">
  68
  69         <aside class="md-announce">
  70           <div class="md-announce__inner md-grid md-typeset">
  71
  72     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  73
  74           </div>
  75         </aside>
  76
  77     </div>
  78
  79
  80
  81 <header class="md-header" data-md-component="header">
  82   <nav class="md-header__inner md-grid" aria-label="Header">
  83     <a href="../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation">
  84
  85   <img src="../../assets/logo.png" alt="logo">
  86
  87     </a>
  88     <label class="md-header__button md-icon" for="__drawer">
  89       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
  90     </label>
  91     <div class="md-header__title" data-md-component="header-title">
  92       <div class="md-header__ellipsis">
  93         <div class="md-header__topic">
  94           <span class="md-ellipsis">
  95             WoltLab Suite Documentation
  96           </span>
  97         </div>
  98         <div class="md-header__topic" data-md-component="header-topic">
  99           <span class="md-ellipsis">
 100
 101               CSS
 102
 103           </span>
 104         </div>
 105       </div>
 106     </div>
 107     <div class="md-header__options">
 108
 109     </div>
 110
 111       <label class="md-header__button md-icon" for="__search">
 112         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
 113       </label>
 114
 115 <div class="md-search" data-md-component="search" role="dialog">
 116   <label class="md-search__overlay" for="__search"></label>
 117   <div class="md-search__inner" role="search">
 118     <form class="md-search__form" name="search">
 119       <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
 120       <label class="md-search__icon md-icon" for="__search">
 121         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
 122         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
 123       </label>
 124       <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
 125         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
 126       </button>
 127     </form>
 128     <div class="md-search__output">
 129       <div class="md-search__scrollwrap" data-md-scrollfix>
 130         <div class="md-search-result" data-md-component="search-result">
 131           <div class="md-search-result__meta">
 132             Initializing search
 133           </div>
 134           <ol class="md-search-result__list"></ol>
 135         </div>
 136       </div>
 137     </div>
 138   </div>
 139 </div>
 140
 141
 142       <div class="md-header__source">
 143
 144 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 145   <div class="md-source__icon md-icon">
 146
 147     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05L244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 148   </div>
 149   <div class="md-source__repository">
 150     GitHub
 151   </div>
 152 </a>
 153       </div>
 154
 155   </nav>
 156 </header>
 157
 158     <div class="md-container" data-md-component="container">
 159
 160
 161
 162
 163       <main class="md-main" data-md-component="main">
 164         <div class="md-main__inner md-grid">
 165
 166
 167
 168               <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
 169                 <div class="md-sidebar__scrollwrap">
 170                   <div class="md-sidebar__inner">
 171
 172
 173
 174
 175
 176 <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
 177   <label class="md-nav__title" for="__drawer">
 178     <a href="../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation">
 179
 180   <img src="../../assets/logo.png" alt="logo">
 181
 182     </a>
 183     WoltLab Suite Documentation
 184   </label>
 185
 186     <div class="md-nav__source">
 187
 188 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 189   <div class="md-source__icon md-icon">
 190
 191     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05L244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 192   </div>
 193   <div class="md-source__repository">
 194     GitHub
 195   </div>
 196 </a>
 197     </div>
 198
 199   <ul class="md-nav__list" data-md-scrollfix>
 200
 201
 202
 203
 204
 205
 206
 207
 208     <li class="md-nav__item">
 209       <a href="../../getting-started/" class="md-nav__link">
 210         Getting Started
 211       </a>
 212     </li>
 213
 214
 215
 216
 217
 218
 219
 220
 221
 222
 223
 224     <li class="md-nav__item md-nav__item--nested">
 225
 226
 227         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
 228
 229       <label class="md-nav__link" for="__nav_2">
 230         PHP API
 231         <span class="md-nav__icon md-icon"></span>
 232       </label>
 233       <nav class="md-nav" aria-label="PHP API" data-md-level="1">
 234         <label class="md-nav__title" for="__nav_2">
 235           <span class="md-nav__icon md-icon"></span>
 236           PHP API
 237         </label>
 238         <ul class="md-nav__list" data-md-scrollfix>
 239
 240
 241
 242
 243
 244     <li class="md-nav__item">
 245       <a href="../../php/pages/" class="md-nav__link">
 246         Pages
 247       </a>
 248     </li>
 249
 250
 251
 252
 253
 254
 255
 256     <li class="md-nav__item">
 257       <a href="../../php/database-objects/" class="md-nav__link">
 258         Database Objects
 259       </a>
 260     </li>
 261
 262
 263
 264
 265
 266
 267
 268     <li class="md-nav__item">
 269       <a href="../../php/database-access/" class="md-nav__link">
 270         Database Access
 271       </a>
 272     </li>
 273
 274
 275
 276
 277
 278
 279
 280     <li class="md-nav__item">
 281       <a href="../../php/exceptions/" class="md-nav__link">
 282         Exceptions
 283       </a>
 284     </li>
 285
 286
 287
 288
 289
 290
 291
 292
 293     <li class="md-nav__item md-nav__item--nested">
 294
 295
 296         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" >
 297
 298       <label class="md-nav__link" for="__nav_2_5">
 299         API
 300         <span class="md-nav__icon md-icon"></span>
 301       </label>
 302       <nav class="md-nav" aria-label="API" data-md-level="2">
 303         <label class="md-nav__title" for="__nav_2_5">
 304           <span class="md-nav__icon md-icon"></span>
 305           API
 306         </label>
 307         <ul class="md-nav__list" data-md-scrollfix>
 308
 309
 310
 311
 312
 313     <li class="md-nav__item">
 314       <a href="../../php/api/caches/" class="md-nav__link">
 315         Caches
 316       </a>
 317     </li>
 318
 319
 320
 321
 322
 323
 324
 325     <li class="md-nav__item">
 326       <a href="../../php/api/comments/" class="md-nav__link">
 327         Comments
 328       </a>
 329     </li>
 330
 331
 332
 333
 334
 335
 336
 337     <li class="md-nav__item">
 338       <a href="../../php/api/cronjobs/" class="md-nav__link">
 339         Cronjobs
 340       </a>
 341     </li>
 342
 343
 344
 345
 346
 347
 348
 349     <li class="md-nav__item">
 350       <a href="../../php/api/events/" class="md-nav__link">
 351         Events
 352       </a>
 353     </li>
 354
 355
 356
 357
 358
 359
 360
 361
 362     <li class="md-nav__item md-nav__item--nested">
 363
 364
 365         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
 366
 367       <label class="md-nav__link" for="__nav_2_5_5">
 368         Form Builder
 369         <span class="md-nav__icon md-icon"></span>
 370       </label>
 371       <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
 372         <label class="md-nav__title" for="__nav_2_5_5">
 373           <span class="md-nav__icon md-icon"></span>
 374           Form Builder
 375         </label>
 376         <ul class="md-nav__list" data-md-scrollfix>
 377
 378
 379
 380
 381
 382     <li class="md-nav__item">
 383       <a href="../../php/api/form_builder/overview/" class="md-nav__link">
 384         Overview
 385       </a>
 386     </li>
 387
 388
 389
 390
 391
 392
 393
 394     <li class="md-nav__item">
 395       <a href="../../php/api/form_builder/structure/" class="md-nav__link">
 396         Structure
 397       </a>
 398     </li>
 399
 400
 401
 402
 403
 404
 405
 406     <li class="md-nav__item">
 407       <a href="../../php/api/form_builder/form_fields/" class="md-nav__link">
 408         Fields
 409       </a>
 410     </li>
 411
 412
 413
 414
 415
 416
 417
 418     <li class="md-nav__item">
 419       <a href="../../php/api/form_builder/validation_data/" class="md-nav__link">
 420         Validation and Data
 421       </a>
 422     </li>
 423
 424
 425
 426
 427
 428
 429
 430     <li class="md-nav__item">
 431       <a href="../../php/api/form_builder/dependencies/" class="md-nav__link">
 432         Dependencies
 433       </a>
 434     </li>
 435
 436
 437
 438         </ul>
 439       </nav>
 440     </li>
 441
 442
 443
 444
 445
 446
 447
 448     <li class="md-nav__item">
 449       <a href="../../php/api/package_installation_plugins/" class="md-nav__link">
 450         Package Installation Plugins
 451       </a>
 452     </li>
 453
 454
 455
 456
 457
 458
 459
 460     <li class="md-nav__item">
 461       <a href="../../php/api/user_activity_points/" class="md-nav__link">
 462         User Activity Points
 463       </a>
 464     </li>
 465
 466
 467
 468
 469
 470
 471
 472     <li class="md-nav__item">
 473       <a href="../../php/api/user_notifications/" class="md-nav__link">
 474         User Notifications
 475       </a>
 476     </li>
 477
 478
 479
 480
 481
 482
 483
 484     <li class="md-nav__item">
 485       <a href="../../php/api/sitemaps/" class="md-nav__link">
 486         Sitemaps
 487       </a>
 488     </li>
 489
 490
 491
 492         </ul>
 493       </nav>
 494     </li>
 495
 496
 497
 498
 499
 500
 501
 502     <li class="md-nav__item">
 503       <a href="../../php/code-style/" class="md-nav__link">
 504         Code Style
 505       </a>
 506     </li>
 507
 508
 509
 510
 511
 512
 513
 514     <li class="md-nav__item">
 515       <a href="../../php/apps/" class="md-nav__link">
 516         Apps
 517       </a>
 518     </li>
 519
 520
 521
 522
 523
 524
 525
 526     <li class="md-nav__item">
 527       <a href="../../php/gdpr/" class="md-nav__link">
 528         GDPR
 529       </a>
 530     </li>
 531
 532
 533
 534         </ul>
 535       </nav>
 536     </li>
 537
 538
 539
 540
 541
 542
 543
 544
 545
 546
 547
 548
 549
 550     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 551
 552
 553         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" checked>
 554
 555       <label class="md-nav__link" for="__nav_3">
 556         Languages, Templates & CSS
 557         <span class="md-nav__icon md-icon"></span>
 558       </label>
 559       <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
 560         <label class="md-nav__title" for="__nav_3">
 561           <span class="md-nav__icon md-icon"></span>
 562           Languages, Templates & CSS
 563         </label>
 564         <ul class="md-nav__list" data-md-scrollfix>
 565
 566
 567
 568
 569
 570     <li class="md-nav__item">
 571       <a href="../languages/" class="md-nav__link">
 572         Languages
 573       </a>
 574     </li>
 575
 576
 577
 578
 579
 580
 581
 582     <li class="md-nav__item">
 583       <a href="../templates/" class="md-nav__link">
 584         Templates
 585       </a>
 586     </li>
 587
 588
 589
 590
 591
 592
 593
 594
 595
 596     <li class="md-nav__item md-nav__item--active">
 597
 598       <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
 599
 600
 601
 602
 603         <label class="md-nav__link md-nav__link--active" for="__toc">
 604           CSS
 605           <span class="md-nav__icon md-icon"></span>
 606         </label>
 607
 608       <a href="./" class="md-nav__link md-nav__link--active">
 609         CSS
 610       </a>
 611
 612
 613 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
 614
 615
 616
 617
 618
 619     <label class="md-nav__title" for="__toc">
 620       <span class="md-nav__icon md-icon"></span>
 621       Table of contents
 622     </label>
 623     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
 624
 625         <li class="md-nav__item">
 626   <a href="#scss-and-css" class="md-nav__link">
 627     SCSS and CSS
 628   </a>
 629
 630     <nav class="md-nav" aria-label="SCSS and CSS">
 631       <ul class="md-nav__list">
 632
 633           <li class="md-nav__item">
 634   <a href="#file-location" class="md-nav__link">
 635     File Location
 636   </a>
 637
 638 </li>
 639
 640           <li class="md-nav__item">
 641   <a href="#variables" class="md-nav__link">
 642     Variables
 643   </a>
 644
 645     <nav class="md-nav" aria-label="Variables">
 646       <ul class="md-nav__list">
 647
 648           <li class="md-nav__item">
 649   <a href="#linking-images" class="md-nav__link">
 650     Linking images
 651   </a>
 652
 653 </li>
 654
 655       </ul>
 656     </nav>
 657
 658 </li>
 659
 660       </ul>
 661     </nav>
 662
 663 </li>
 664
 665         <li class="md-nav__item">
 666   <a href="#media-breakpoints" class="md-nav__link">
 667     Media Breakpoints
 668   </a>
 669
 670     <nav class="md-nav" aria-label="Media Breakpoints">
 671       <ul class="md-nav__list">
 672
 673           <li class="md-nav__item">
 674   <a href="#available-breakpoints" class="md-nav__link">
 675     Available Breakpoints
 676   </a>
 677
 678 </li>
 679
 680       </ul>
 681     </nav>
 682
 683 </li>
 684
 685         <li class="md-nav__item">
 686   <a href="#asset-preloading" class="md-nav__link">
 687     Asset Preloading
 688   </a>
 689
 690 </li>
 691
 692     </ul>
 693
 694 </nav>
 695
 696     </li>
 697
 698
 699
 700         </ul>
 701       </nav>
 702     </li>
 703
 704
 705
 706
 707
 708
 709
 710
 711
 712
 713
 714     <li class="md-nav__item md-nav__item--nested">
 715
 716
 717         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" >
 718
 719       <label class="md-nav__link" for="__nav_4">
 720         JavaScript API
 721         <span class="md-nav__icon md-icon"></span>
 722       </label>
 723       <nav class="md-nav" aria-label="JavaScript API" data-md-level="1">
 724         <label class="md-nav__title" for="__nav_4">
 725           <span class="md-nav__icon md-icon"></span>
 726           JavaScript API
 727         </label>
 728         <ul class="md-nav__list" data-md-scrollfix>
 729
 730
 731
 732
 733
 734     <li class="md-nav__item">
 735       <a href="../../javascript/general-usage/" class="md-nav__link">
 736         General Usage
 737       </a>
 738     </li>
 739
 740
 741
 742
 743
 744
 745
 746
 747     <li class="md-nav__item md-nav__item--nested">
 748
 749
 750         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_2" type="checkbox" id="__nav_4_2" >
 751
 752       <label class="md-nav__link" for="__nav_4_2">
 753         New API
 754         <span class="md-nav__icon md-icon"></span>
 755       </label>
 756       <nav class="md-nav" aria-label="New API" data-md-level="2">
 757         <label class="md-nav__title" for="__nav_4_2">
 758           <span class="md-nav__icon md-icon"></span>
 759           New API
 760         </label>
 761         <ul class="md-nav__list" data-md-scrollfix>
 762
 763
 764
 765
 766
 767     <li class="md-nav__item">
 768       <a href="../../javascript/new-api_writing-a-module/" class="md-nav__link">
 769         Writing a module
 770       </a>
 771     </li>
 772
 773
 774
 775
 776
 777
 778
 779     <li class="md-nav__item">
 780       <a href="../../javascript/new-api_data-structures/" class="md-nav__link">
 781         Data Structures
 782       </a>
 783     </li>
 784
 785
 786
 787
 788
 789
 790
 791     <li class="md-nav__item">
 792       <a href="../../javascript/new-api_core/" class="md-nav__link">
 793         Core Functions
 794       </a>
 795     </li>
 796
 797
 798
 799
 800
 801
 802
 803     <li class="md-nav__item">
 804       <a href="../../javascript/new-api_dom/" class="md-nav__link">
 805         DOM
 806       </a>
 807     </li>
 808
 809
 810
 811
 812
 813
 814
 815     <li class="md-nav__item">
 816       <a href="../../javascript/new-api_events/" class="md-nav__link">
 817         Event Handling
 818       </a>
 819     </li>
 820
 821
 822
 823
 824
 825
 826
 827     <li class="md-nav__item">
 828       <a href="../../javascript/new-api_ajax/" class="md-nav__link">
 829         Ajax
 830       </a>
 831     </li>
 832
 833
 834
 835
 836
 837
 838
 839     <li class="md-nav__item">
 840       <a href="../../javascript/new-api_dialogs/" class="md-nav__link">
 841         Dialogs
 842       </a>
 843     </li>
 844
 845
 846
 847
 848
 849
 850
 851     <li class="md-nav__item">
 852       <a href="../../javascript/new-api_browser/" class="md-nav__link">
 853         Browser and Screen Sizes
 854       </a>
 855     </li>
 856
 857
 858
 859
 860
 861
 862
 863     <li class="md-nav__item">
 864       <a href="../../javascript/new-api_ui/" class="md-nav__link">
 865         User Interface
 866       </a>
 867     </li>
 868
 869
 870
 871         </ul>
 872       </nav>
 873     </li>
 874
 875
 876
 877
 878
 879
 880
 881     <li class="md-nav__item">
 882       <a href="../../javascript/legacy-api/" class="md-nav__link">
 883         Legacy API
 884       </a>
 885     </li>
 886
 887
 888
 889
 890
 891
 892
 893     <li class="md-nav__item">
 894       <a href="../../javascript/helper-functions/" class="md-nav__link">
 895         Helper Functions
 896       </a>
 897     </li>
 898
 899
 900
 901
 902
 903
 904
 905     <li class="md-nav__item">
 906       <a href="../../javascript/code-snippets/" class="md-nav__link">
 907         Code Snippets
 908       </a>
 909     </li>
 910
 911
 912
 913         </ul>
 914       </nav>
 915     </li>
 916
 917
 918
 919
 920
 921
 922
 923
 924
 925
 926
 927     <li class="md-nav__item md-nav__item--nested">
 928
 929
 930         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
 931
 932       <label class="md-nav__link" for="__nav_5">
 933         Package Components
 934         <span class="md-nav__icon md-icon"></span>
 935       </label>
 936       <nav class="md-nav" aria-label="Package Components" data-md-level="1">
 937         <label class="md-nav__title" for="__nav_5">
 938           <span class="md-nav__icon md-icon"></span>
 939           Package Components
 940         </label>
 941         <ul class="md-nav__list" data-md-scrollfix>
 942
 943
 944
 945
 946
 947     <li class="md-nav__item">
 948       <a href="../../package/package-xml/" class="md-nav__link">
 949         package.xml
 950       </a>
 951     </li>
 952
 953
 954
 955
 956
 957
 958
 959
 960     <li class="md-nav__item md-nav__item--nested">
 961
 962
 963         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
 964
 965       <label class="md-nav__link" for="__nav_5_2">
 966         PIPs
 967         <span class="md-nav__icon md-icon"></span>
 968       </label>
 969       <nav class="md-nav" aria-label="PIPs" data-md-level="2">
 970         <label class="md-nav__title" for="__nav_5_2">
 971           <span class="md-nav__icon md-icon"></span>
 972           PIPs
 973         </label>
 974         <ul class="md-nav__list" data-md-scrollfix>
 975
 976
 977
 978
 979
 980     <li class="md-nav__item">
 981       <a href="../../package/pip/" class="md-nav__link">
 982         Overview
 983       </a>
 984     </li>
 985
 986
 987
 988
 989
 990
 991
 992     <li class="md-nav__item">
 993       <a href="../../package/pip/acl-option/" class="md-nav__link">
 994         aclOption
 995       </a>
 996     </li>
 997
 998
 999
1000
1001
1002
1003
1004     <li class="md-nav__item">
1005       <a href="../../package/pip/acp-menu/" class="md-nav__link">
1006         acpMenu
1007       </a>
1008     </li>
1009
1010
1011
1012
1013
1014
1015
1016     <li class="md-nav__item">
1017       <a href="../../package/pip/acp-search-provider/" class="md-nav__link">
1018         acpSearchProvider
1019       </a>
1020     </li>
1021
1022
1023
1024
1025
1026
1027
1028     <li class="md-nav__item">
1029       <a href="../../package/pip/acp-template/" class="md-nav__link">
1030         acpTemplate
1031       </a>
1032     </li>
1033
1034
1035
1036
1037
1038
1039
1040     <li class="md-nav__item">
1041       <a href="../../package/pip/bbcode/" class="md-nav__link">
1042         bbcode
1043       </a>
1044     </li>
1045
1046
1047
1048
1049
1050
1051
1052     <li class="md-nav__item">
1053       <a href="../../package/pip/box/" class="md-nav__link">
1054         box
1055       </a>
1056     </li>
1057
1058
1059
1060
1061
1062
1063
1064     <li class="md-nav__item">
1065       <a href="../../package/pip/clipboard-action/" class="md-nav__link">
1066         clipboardAction
1067       </a>
1068     </li>
1069
1070
1071
1072
1073
1074
1075
1076     <li class="md-nav__item">
1077       <a href="../../package/pip/core-object/" class="md-nav__link">
1078         coreObject
1079       </a>
1080     </li>
1081
1082
1083
1084
1085
1086
1087
1088     <li class="md-nav__item">
1089       <a href="../../package/pip/cronjob/" class="md-nav__link">
1090         cronjob
1091       </a>
1092     </li>
1093
1094
1095
1096
1097
1098
1099
1100     <li class="md-nav__item">
1101       <a href="../../package/pip/event-listener/" class="md-nav__link">
1102         eventListener
1103       </a>
1104     </li>
1105
1106
1107
1108
1109
1110
1111
1112     <li class="md-nav__item">
1113       <a href="../../package/pip/file/" class="md-nav__link">
1114         file
1115       </a>
1116     </li>
1117
1118
1119
1120
1121
1122
1123
1124     <li class="md-nav__item">
1125       <a href="../../package/pip/language/" class="md-nav__link">
1126         language
1127       </a>
1128     </li>
1129
1130
1131
1132
1133
1134
1135
1136     <li class="md-nav__item">
1137       <a href="../../package/pip/media-provider/" class="md-nav__link">
1138         mediaProvider
1139       </a>
1140     </li>
1141
1142
1143
1144
1145
1146
1147
1148     <li class="md-nav__item">
1149       <a href="../../package/pip/menu/" class="md-nav__link">
1150         menu
1151       </a>
1152     </li>
1153
1154
1155
1156
1157
1158
1159
1160     <li class="md-nav__item">
1161       <a href="../../package/pip/menu-item/" class="md-nav__link">
1162         menuItem
1163       </a>
1164     </li>
1165
1166
1167
1168
1169
1170
1171
1172     <li class="md-nav__item">
1173       <a href="../../package/pip/object-type/" class="md-nav__link">
1174         objectType
1175       </a>
1176     </li>
1177
1178
1179
1180
1181
1182
1183
1184     <li class="md-nav__item">
1185       <a href="../../package/pip/object-type-definition/" class="md-nav__link">
1186         objectTypeDefinition
1187       </a>
1188     </li>
1189
1190
1191
1192
1193
1194
1195
1196     <li class="md-nav__item">
1197       <a href="../../package/pip/option/" class="md-nav__link">
1198         option
1199       </a>
1200     </li>
1201
1202
1203
1204
1205
1206
1207
1208     <li class="md-nav__item">
1209       <a href="../../package/pip/page/" class="md-nav__link">
1210         page
1211       </a>
1212     </li>
1213
1214
1215
1216
1217
1218
1219
1220     <li class="md-nav__item">
1221       <a href="../../package/pip/pip/" class="md-nav__link">
1222         pip
1223       </a>
1224     </li>
1225
1226
1227
1228
1229
1230
1231
1232     <li class="md-nav__item">
1233       <a href="../../package/pip/script/" class="md-nav__link">
1234         script
1235       </a>
1236     </li>
1237
1238
1239
1240
1241
1242
1243
1244     <li class="md-nav__item">
1245       <a href="../../package/pip/smiley/" class="md-nav__link">
1246         smiley
1247       </a>
1248     </li>
1249
1250
1251
1252
1253
1254
1255
1256     <li class="md-nav__item">
1257       <a href="../../package/pip/sql/" class="md-nav__link">
1258         sql
1259       </a>
1260     </li>
1261
1262
1263
1264
1265
1266
1267
1268     <li class="md-nav__item">
1269       <a href="../../package/pip/style/" class="md-nav__link">
1270         style
1271       </a>
1272     </li>
1273
1274
1275
1276
1277
1278
1279
1280     <li class="md-nav__item">
1281       <a href="../../package/pip/template/" class="md-nav__link">
1282         template
1283       </a>
1284     </li>
1285
1286
1287
1288
1289
1290
1291
1292     <li class="md-nav__item">
1293       <a href="../../package/pip/template-listener/" class="md-nav__link">
1294         templateListener
1295       </a>
1296     </li>
1297
1298
1299
1300
1301
1302
1303
1304     <li class="md-nav__item">
1305       <a href="../../package/pip/user-group-option/" class="md-nav__link">
1306         userGroupOption
1307       </a>
1308     </li>
1309
1310
1311
1312
1313
1314
1315
1316     <li class="md-nav__item">
1317       <a href="../../package/pip/user-menu/" class="md-nav__link">
1318         userMenu
1319       </a>
1320     </li>
1321
1322
1323
1324
1325
1326
1327
1328     <li class="md-nav__item">
1329       <a href="../../package/pip/user-notification-event/" class="md-nav__link">
1330         userNotificationEvent
1331       </a>
1332     </li>
1333
1334
1335
1336
1337
1338
1339
1340     <li class="md-nav__item">
1341       <a href="../../package/pip/user-option/" class="md-nav__link">
1342         userOption
1343       </a>
1344     </li>
1345
1346
1347
1348
1349
1350
1351
1352     <li class="md-nav__item">
1353       <a href="../../package/pip/user-profile-menu/" class="md-nav__link">
1354         userProfileMenu
1355       </a>
1356     </li>
1357
1358
1359
1360         </ul>
1361       </nav>
1362     </li>
1363
1364
1365
1366
1367
1368
1369
1370     <li class="md-nav__item">
1371       <a href="../../package/database-php-api/" class="md-nav__link">
1372         Database PHP API
1373       </a>
1374     </li>
1375
1376
1377
1378         </ul>
1379       </nav>
1380     </li>
1381
1382
1383
1384
1385
1386
1387
1388
1389
1390
1391
1392     <li class="md-nav__item md-nav__item--nested">
1393
1394
1395         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
1396
1397       <label class="md-nav__link" for="__nav_6">
1398         Migration
1399         <span class="md-nav__icon md-icon"></span>
1400       </label>
1401       <nav class="md-nav" aria-label="Migration" data-md-level="1">
1402         <label class="md-nav__title" for="__nav_6">
1403           <span class="md-nav__icon md-icon"></span>
1404           Migration
1405         </label>
1406         <ul class="md-nav__list" data-md-scrollfix>
1407
1408
1409
1410
1411
1412
1413     <li class="md-nav__item md-nav__item--nested">
1414
1415
1416         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1417
1418       <label class="md-nav__link" for="__nav_6_1">
1419         Migrating from WSC 5.3
1420         <span class="md-nav__icon md-icon"></span>
1421       </label>
1422       <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
1423         <label class="md-nav__title" for="__nav_6_1">
1424           <span class="md-nav__icon md-icon"></span>
1425           Migrating from WSC 5.3
1426         </label>
1427         <ul class="md-nav__list" data-md-scrollfix>
1428
1429
1430
1431
1432
1433     <li class="md-nav__item">
1434       <a href="../../migration/wsc53/php/" class="md-nav__link">
1435         PHP API
1436       </a>
1437     </li>
1438
1439
1440
1441
1442
1443
1444
1445     <li class="md-nav__item">
1446       <a href="../../migration/wsc53/session/" class="md-nav__link">
1447         Session Handling and Authentication
1448       </a>
1449     </li>
1450
1451
1452
1453
1454
1455
1456
1457     <li class="md-nav__item">
1458       <a href="../../migration/wsc53/javascript/" class="md-nav__link">
1459         JavaScript
1460       </a>
1461     </li>
1462
1463
1464
1465
1466
1467
1468
1469     <li class="md-nav__item">
1470       <a href="../../migration/wsc53/templates/" class="md-nav__link">
1471         Templates
1472       </a>
1473     </li>
1474
1475
1476
1477
1478
1479
1480
1481     <li class="md-nav__item">
1482       <a href="../../migration/wsc53/libraries/" class="md-nav__link">
1483         Third Party Libraries
1484       </a>
1485     </li>
1486
1487
1488
1489         </ul>
1490       </nav>
1491     </li>
1492
1493
1494
1495
1496
1497
1498
1499
1500     <li class="md-nav__item md-nav__item--nested">
1501
1502
1503         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1504
1505       <label class="md-nav__link" for="__nav_6_2">
1506         Migrating from WSC 5.2
1507         <span class="md-nav__icon md-icon"></span>
1508       </label>
1509       <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
1510         <label class="md-nav__title" for="__nav_6_2">
1511           <span class="md-nav__icon md-icon"></span>
1512           Migrating from WSC 5.2
1513         </label>
1514         <ul class="md-nav__list" data-md-scrollfix>
1515
1516
1517
1518
1519
1520     <li class="md-nav__item">
1521       <a href="../../migration/wsc52/php/" class="md-nav__link">
1522         PHP API
1523       </a>
1524     </li>
1525
1526
1527
1528
1529
1530
1531
1532     <li class="md-nav__item">
1533       <a href="../../migration/wsc52/templates/" class="md-nav__link">
1534         Templates and Languages
1535       </a>
1536     </li>
1537
1538
1539
1540
1541
1542
1543
1544     <li class="md-nav__item">
1545       <a href="../../migration/wsc52/libraries/" class="md-nav__link">
1546         Third Party Libraries
1547       </a>
1548     </li>
1549
1550
1551
1552         </ul>
1553       </nav>
1554     </li>
1555
1556
1557
1558
1559
1560
1561
1562
1563     <li class="md-nav__item md-nav__item--nested">
1564
1565
1566         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
1567
1568       <label class="md-nav__link" for="__nav_6_3">
1569         Migrating from WSC 3.1
1570         <span class="md-nav__icon md-icon"></span>
1571       </label>
1572       <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
1573         <label class="md-nav__title" for="__nav_6_3">
1574           <span class="md-nav__icon md-icon"></span>
1575           Migrating from WSC 3.1
1576         </label>
1577         <ul class="md-nav__list" data-md-scrollfix>
1578
1579
1580
1581
1582
1583     <li class="md-nav__item">
1584       <a href="../../migration/wsc31/php/" class="md-nav__link">
1585         PHP API
1586       </a>
1587     </li>
1588
1589
1590
1591         </ul>
1592       </nav>
1593     </li>
1594
1595
1596
1597
1598
1599
1600
1601
1602     <li class="md-nav__item md-nav__item--nested">
1603
1604
1605         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1606
1607       <label class="md-nav__link" for="__nav_6_4">
1608         Migrating from WSC 3.0
1609         <span class="md-nav__icon md-icon"></span>
1610       </label>
1611       <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
1612         <label class="md-nav__title" for="__nav_6_4">
1613           <span class="md-nav__icon md-icon"></span>
1614           Migrating from WSC 3.0
1615         </label>
1616         <ul class="md-nav__list" data-md-scrollfix>
1617
1618
1619
1620
1621
1622     <li class="md-nav__item">
1623       <a href="../../migration/wsc30/php/" class="md-nav__link">
1624         PHP API
1625       </a>
1626     </li>
1627
1628
1629
1630
1631
1632
1633
1634     <li class="md-nav__item">
1635       <a href="../../migration/wsc30/javascript/" class="md-nav__link">
1636         JavaScript API
1637       </a>
1638     </li>
1639
1640
1641
1642
1643
1644
1645
1646     <li class="md-nav__item">
1647       <a href="../../migration/wsc30/templates/" class="md-nav__link">
1648         Templates
1649       </a>
1650     </li>
1651
1652
1653
1654
1655
1656
1657
1658     <li class="md-nav__item">
1659       <a href="../../migration/wsc30/css/" class="md-nav__link">
1660         CSS
1661       </a>
1662     </li>
1663
1664
1665
1666
1667
1668
1669
1670     <li class="md-nav__item">
1671       <a href="../../migration/wsc30/package/" class="md-nav__link">
1672         Package Components
1673       </a>
1674     </li>
1675
1676
1677
1678         </ul>
1679       </nav>
1680     </li>
1681
1682
1683
1684
1685
1686
1687
1688
1689     <li class="md-nav__item md-nav__item--nested">
1690
1691
1692         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
1693
1694       <label class="md-nav__link" for="__nav_6_5">
1695         Migrating from WCF 2.1
1696         <span class="md-nav__icon md-icon"></span>
1697       </label>
1698       <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
1699         <label class="md-nav__title" for="__nav_6_5">
1700           <span class="md-nav__icon md-icon"></span>
1701           Migrating from WCF 2.1
1702         </label>
1703         <ul class="md-nav__list" data-md-scrollfix>
1704
1705
1706
1707
1708
1709     <li class="md-nav__item">
1710       <a href="../../migration/wcf21/php/" class="md-nav__link">
1711         PHP API
1712       </a>
1713     </li>
1714
1715
1716
1717
1718
1719
1720
1721     <li class="md-nav__item">
1722       <a href="../../migration/wcf21/templates/" class="md-nav__link">
1723         Templates
1724       </a>
1725     </li>
1726
1727
1728
1729
1730
1731
1732
1733     <li class="md-nav__item">
1734       <a href="../../migration/wcf21/css/" class="md-nav__link">
1735         CSS
1736       </a>
1737     </li>
1738
1739
1740
1741
1742
1743
1744
1745     <li class="md-nav__item">
1746       <a href="../../migration/wcf21/package/" class="md-nav__link">
1747         Package Components
1748       </a>
1749     </li>
1750
1751
1752
1753         </ul>
1754       </nav>
1755     </li>
1756
1757
1758
1759         </ul>
1760       </nav>
1761     </li>
1762
1763
1764
1765
1766
1767
1768
1769
1770
1771
1772
1773     <li class="md-nav__item md-nav__item--nested">
1774
1775
1776         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
1777
1778       <label class="md-nav__link" for="__nav_7">
1779         Tutorials
1780         <span class="md-nav__icon md-icon"></span>
1781       </label>
1782       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
1783         <label class="md-nav__title" for="__nav_7">
1784           <span class="md-nav__icon md-icon"></span>
1785           Tutorials
1786         </label>
1787         <ul class="md-nav__list" data-md-scrollfix>
1788
1789
1790
1791
1792
1793
1794     <li class="md-nav__item md-nav__item--nested">
1795
1796
1797         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
1798
1799       <label class="md-nav__link" for="__nav_7_1">
1800         Tutorial Series
1801         <span class="md-nav__icon md-icon"></span>
1802       </label>
1803       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
1804         <label class="md-nav__title" for="__nav_7_1">
1805           <span class="md-nav__icon md-icon"></span>
1806           Tutorial Series
1807         </label>
1808         <ul class="md-nav__list" data-md-scrollfix>
1809
1810
1811
1812
1813
1814     <li class="md-nav__item">
1815       <a href="../../tutorial/series/overview/" class="md-nav__link">
1816         Overview
1817       </a>
1818     </li>
1819
1820
1821
1822
1823
1824
1825
1826     <li class="md-nav__item">
1827       <a href="../../tutorial/series/part_1/" class="md-nav__link">
1828         Part 1
1829       </a>
1830     </li>
1831
1832
1833
1834
1835
1836
1837
1838     <li class="md-nav__item">
1839       <a href="../../tutorial/series/part_2/" class="md-nav__link">
1840         Part 2
1841       </a>
1842     </li>
1843
1844
1845
1846
1847
1848
1849
1850     <li class="md-nav__item">
1851       <a href="../../tutorial/series/part_3/" class="md-nav__link">
1852         Part 3
1853       </a>
1854     </li>
1855
1856
1857
1858         </ul>
1859       </nav>
1860     </li>
1861
1862
1863
1864         </ul>
1865       </nav>
1866     </li>
1867
1868
1869
1870   </ul>
1871 </nav>
1872                   </div>
1873                 </div>
1874               </div>
1875
1876
1877
1878               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
1879                 <div class="md-sidebar__scrollwrap">
1880                   <div class="md-sidebar__inner">
1881
1882 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
1883
1884
1885
1886
1887
1888     <label class="md-nav__title" for="__toc">
1889       <span class="md-nav__icon md-icon"></span>
1890       Table of contents
1891     </label>
1892     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
1893
1894         <li class="md-nav__item">
1895   <a href="#scss-and-css" class="md-nav__link">
1896     SCSS and CSS
1897   </a>
1898
1899     <nav class="md-nav" aria-label="SCSS and CSS">
1900       <ul class="md-nav__list">
1901
1902           <li class="md-nav__item">
1903   <a href="#file-location" class="md-nav__link">
1904     File Location
1905   </a>
1906
1907 </li>
1908
1909           <li class="md-nav__item">
1910   <a href="#variables" class="md-nav__link">
1911     Variables
1912   </a>
1913
1914     <nav class="md-nav" aria-label="Variables">
1915       <ul class="md-nav__list">
1916
1917           <li class="md-nav__item">
1918   <a href="#linking-images" class="md-nav__link">
1919     Linking images
1920   </a>
1921
1922 </li>
1923
1924       </ul>
1925     </nav>
1926
1927 </li>
1928
1929       </ul>
1930     </nav>
1931
1932 </li>
1933
1934         <li class="md-nav__item">
1935   <a href="#media-breakpoints" class="md-nav__link">
1936     Media Breakpoints
1937   </a>
1938
1939     <nav class="md-nav" aria-label="Media Breakpoints">
1940       <ul class="md-nav__list">
1941
1942           <li class="md-nav__item">
1943   <a href="#available-breakpoints" class="md-nav__link">
1944     Available Breakpoints
1945   </a>
1946
1947 </li>
1948
1949       </ul>
1950     </nav>
1951
1952 </li>
1953
1954         <li class="md-nav__item">
1955   <a href="#asset-preloading" class="md-nav__link">
1956     Asset Preloading
1957   </a>
1958
1959 </li>
1960
1961     </ul>
1962
1963 </nav>
1964                   </div>
1965                 </div>
1966               </div>
1967
1968
1969           <div class="md-content" data-md-component="content">
1970             <article class="md-content__inner md-typeset">
1971
1972
1973                   <a href="https://github.com/WoltLab/docs.woltlab.com/edit/5.4/docs/view/css.md" title="Edit this page" class="md-content__button md-icon">
1974                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>
1975                   </a>
1976
1977
1978                 <h1 id="css">CSS<a class="headerlink" href="#css" title="Permanent link">#</a></h1>
1979 <h2 id="scss-and-css">SCSS and CSS<a class="headerlink" href="#scss-and-css" title="Permanent link">#</a></h2>
1980 <p>SCSS is a scripting language that features a syntax similar to CSS and compiles into native CSS at runtime. It provides many great additions to CSS such as declaration nesting and variables, it is recommended to read the <a href="http://sass-lang.com/guide">official guide</a> to learn more.</p>
1981 <p>You can create <code>.scss</code> files containing only pure CSS code and it will work just fine, you are at no point required to write actual SCSS code.</p>
1982 <h3 id="file-location">File Location<a class="headerlink" href="#file-location" title="Permanent link">#</a></h3>
1983 <p>Please place your style files in a subdirectory of the <code>style/</code> directory of the target application or the Core's style directory, for example <code>style/layout/pageHeader.scss</code>.</p>
1984 <h3 id="variables">Variables<a class="headerlink" href="#variables" title="Permanent link">#</a></h3>
1985 <p>You can access variables with <code>$myVariable</code>, variable interpolation (variables inside strings) is accomplished with <code>#{$myVariable}</code>.</p>
1986 <h4 id="linking-images">Linking images<a class="headerlink" href="#linking-images" title="Permanent link">#</a></h4>
1987 <p>Images used within a style must be located in the style's image folder. To get the folder name within the CSS the SCSS variable <code>#{$style_image_path}</code> can be used. The value will contain a trailing slash.</p>
1988 <h2 id="media-breakpoints">Media Breakpoints<a class="headerlink" href="#media-breakpoints" title="Permanent link">#</a></h2>
1989 <p>Media breakpoints instruct the browser to apply different CSS depending on the viewport dimensions, e.g. serving a desktop PC a different view than when viewed on a smartphone.</p>
1990 <div class="highlight"><pre><span></span><code><span class="cm">/* red background color for desktop pc */</span>
1991 <span class="k">@include</span><span class="nd"> screen-lg</span> <span class="p">{</span>
1992     <span class="nt">body</span> <span class="p">{</span>
1993         <span class="nt">background-color</span><span class="nd">:</span> <span class="nt">red</span><span class="o">;</span>
1994     <span class="p">}</span>
1995 <span class="p">}</span>
1996
1997 <span class="cm">/* green background color on smartphones and tablets */</span>
1998 <span class="k">@include</span><span class="nd"> screen-md-down</span> <span class="p">{</span>
1999     <span class="nt">body</span> <span class="p">{</span>
2000         <span class="nt">background-color</span><span class="nd">:</span> <span class="nt">green</span><span class="o">;</span>
2001     <span class="p">}</span>
2002 <span class="p">}</span>
2003 </code></pre></div>
2004 <h3 id="available-breakpoints">Available Breakpoints<a class="headerlink" href="#available-breakpoints" title="Permanent link">#</a></h3>
2005 <div class="admonition info">
2006 <p class="admonition-title">Some very large smartphones, for example the Apple iPhone 7 Plus, do match the media query for <code>Tablets (portrait)</code> when viewed in landscape mode.</p>
2007 </div>
2008 <table>
2009 <thead>
2010 <tr>
2011 <th>Name</th>
2012 <th>Devices</th>
2013 <th><code>@media</code> equivalent</th>
2014 </tr>
2015 </thead>
2016 <tbody>
2017 <tr>
2018 <td><code>screen-xs</code></td>
2019 <td>Smartphones only</td>
2020 <td><code>(max-width: 544px)</code></td>
2021 </tr>
2022 <tr>
2023 <td><code>screen-sm</code></td>
2024 <td>Tablets (portrait)</td>
2025 <td><code>(min-width: 545px) and (max-width: 768px)</code></td>
2026 </tr>
2027 <tr>
2028 <td><code>screen-sm-down</code></td>
2029 <td>Tablets (portrait) and smartphones</td>
2030 <td><code>(max-width: 768px)</code></td>
2031 </tr>
2032 <tr>
2033 <td><code>screen-sm-up</code></td>
2034 <td>Tablets and desktop PC</td>
2035 <td><code>(min-width: 545px)</code></td>
2036 </tr>
2037 <tr>
2038 <td><code>screen-sm-md</code></td>
2039 <td>Tablets only</td>
2040 <td><code>(min-width: 545px) and (max-width: 1024px)</code></td>
2041 </tr>
2042 <tr>
2043 <td><code>screen-md</code></td>
2044 <td>Tablets (landscape)</td>
2045 <td><code>(min-width: 769px) and (max-width: 1024px)</code></td>
2046 </tr>
2047 <tr>
2048 <td><code>screen-md-down</code></td>
2049 <td>Smartphones and Tablets</td>
2050 <td><code>(max-width: 1024px)</code></td>
2051 </tr>
2052 <tr>
2053 <td><code>screen-md-up</code></td>
2054 <td>Tablets (landscape) and desktop PC</td>
2055 <td><code>(min-width: 769px)</code></td>
2056 </tr>
2057 <tr>
2058 <td><code>screen-lg</code></td>
2059 <td>Desktop PC</td>
2060 <td><code>(min-width: 1025px)</code></td>
2061 </tr>
2062 </tbody>
2063 </table>
2064 <h2 id="asset-preloading">Asset Preloading<a class="headerlink" href="#asset-preloading" title="Permanent link">#</a></h2>
2065 <p>WoltLab Suite’s SCSS compiler supports adding <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content">preloading</a> metadata to the CSS.
2066 To communicate the preloading intent to the compiler, the <code>--woltlab-suite-preload</code> CSS variable is set to the result of the <code>preload()</code> function:</p>
2067 <div class="highlight"><pre><span></span><code><span class="nc">.fooBar</span> <span class="p">{</span>
2068     <span class="nt">--woltlab-suite-preload</span><span class="nd">:</span>    <span class="nn">#</span><span class="p">{</span><span class="nt">preload</span><span class="o">(</span>
2069                                     <span class="s1">&#39;</span><span class="si">#{</span><span class="nv">$style_image_path</span><span class="si">}</span><span class="s1">custom/background.png&#39;</span><span class="o">,</span>
2070                                     <span class="err">$</span><span class="nt">as</span><span class="nd">:</span> <span class="s2">&quot;image&quot;</span><span class="o">,</span>
2071                                     <span class="err">$</span><span class="nt">crossorigin</span><span class="nd">:</span> <span class="nt">false</span><span class="o">,</span>
2072                                     <span class="err">$</span><span class="nt">type</span><span class="nd">:</span> <span class="s2">&quot;image/png&quot;</span>
2073                                 <span class="o">)</span><span class="p">}</span><span class="o">;</span>
2074
2075     <span class="nt">background</span><span class="nd">:</span> <span class="nt">url</span><span class="o">(</span><span class="s1">&#39;</span><span class="si">#{</span><span class="nv">$style_image_path</span><span class="si">}</span><span class="s1">custom/background.png&#39;</span><span class="o">);</span>
2076 <span class="p">}</span>
2077 </code></pre></div>
2078 <p>The parameters of the <code>preload()</code> function map directly to the preloading properties that are used within the <code>&lt;link&gt;</code> tag and the <code>link:</code> HTTP response header.</p>
2079 <p>The above example will result in a <code>&lt;link&gt;</code> similar to the following being added to the generated HTML:</p>
2080 <div class="highlight"><pre><span></span><code>&lt;link rel=&quot;preload&quot; href=&quot;https://example.com/images/style-1/custom/background.png&quot; as=&quot;image&quot; type=&quot;image/png&quot;&gt;
2081 </code></pre></div>
2082 <div class="admonition info">
2083 <p class="admonition-title">Use preloading sparingly for the most important resources where you can be certain that the browser will need them. Unused preloaded resources will unnecessarily waste bandwidth.</p>
2084 </div>
2085
2086
2087
2088
2089 <hr>
2090 <div class="md-source-date">
2091   <small>
2092
2093       Last update: 2021-03-08
2094
2095   </small>
2096 </div>
2097
2098
2099
2100
2101
2102
2103
2104
2105             </article>
2106           </div>
2107         </div>
2108       </main>
2109
2110
2111 <footer class="md-footer">
2112
2113     <nav class="md-footer__inner md-grid" aria-label="Footer">
2114
2115         <a href="../templates/" class="md-footer__link md-footer__link--prev" rel="prev">
2116           <div class="md-footer__button md-icon">
2117             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
2118           </div>
2119           <div class="md-footer__title">
2120             <div class="md-ellipsis">
2121               <span class="md-footer__direction">
2122                 Previous
2123               </span>
2124               Templates
2125             </div>
2126           </div>
2127         </a>
2128
2129
2130         <a href="../../javascript/general-usage/" class="md-footer__link md-footer__link--next" rel="next">
2131           <div class="md-footer__title">
2132             <div class="md-ellipsis">
2133               <span class="md-footer__direction">
2134                 Next
2135               </span>
2136               General Usage
2137             </div>
2138           </div>
2139           <div class="md-footer__button md-icon">
2140             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
2141           </div>
2142         </a>
2143
2144     </nav>
2145
2146   <div class="md-footer-meta md-typeset">
2147     <div class="md-footer-meta__inner md-grid">
2148       <div class="md-footer-copyright">
2149
2150           <div class="md-footer-copyright__highlight">
2151             Copyright © 2020 WoltLab GmbH
2152           </div>
2153
2154         Made with
2155         <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
2156           Material for MkDocs
2157         </a>
2158
2159       </div>
2160       <div class="md-footer-copyright">
2161         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
2162         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
2163 </div>
2164     </div>
2165   </div>
2166 </footer>
2167
2168     </div>
2169     <div class="md-dialog" data-md-component="dialog">
2170       <div class="md-dialog__inner md-typeset"></div>
2171     </div>
2172     <script id="__config" type="application/json">{"base": "../..", "features": [], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing"}, "search": "../../assets/javascripts/workers/search.fb4a9340.min.js", "version": {"provider": "mike"}}</script>
2173
2174
2175       <script src="../../assets/javascripts/bundle.5cf3e710.min.js"></script>
2176
2177
2178   </body>
2179 </html>