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