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