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