Introducing the "container"-class
authorLuzifr <szekely@woltlab.com>
Mon, 20 Feb 2012 19:16:14 +0000 (20:16 +0100)
committerLuzifr <szekely@woltlab.com>
Mon, 20 Feb 2012 19:16:14 +0000 (20:16 +0100)
This is a new generic container for surrounding blocks of text with an
optional leading icon, which helps to have less style-declarations. The
good thing: Icon-size is free. The box collapses if there's no icon
given or  if it doesn't load. The class "containerIcon" can be set onto
an icon or an element around the icon.

Note: This box does unfortunately not support RTL in WebKit-browsers!
This seems to be a bug in WebKit, since all other browsers support
that. The box-style may change in the future.

Implemented the new classes on main-headings.

36 files changed:
wcfsetup/install/files/acp/style/wcf.css
wcfsetup/install/files/acp/templates/acpSessionLog.tpl
wcfsetup/install/files/acp/templates/acpSessionLogList.tpl
wcfsetup/install/files/acp/templates/cacheList.tpl
wcfsetup/install/files/acp/templates/cronjobAdd.tpl
wcfsetup/install/files/acp/templates/cronjobList.tpl
wcfsetup/install/files/acp/templates/cronjobLogList.tpl
wcfsetup/install/files/acp/templates/login.tpl
wcfsetup/install/files/acp/templates/masterPassword.tpl
wcfsetup/install/files/acp/templates/masterPasswordInit.tpl
wcfsetup/install/files/acp/templates/option.tpl
wcfsetup/install/files/acp/templates/optionImport.tpl
wcfsetup/install/files/acp/templates/packageInstallationConfirm.tpl
wcfsetup/install/files/acp/templates/packageInstallationStepPrepare.tpl
wcfsetup/install/files/acp/templates/packageList.tpl
wcfsetup/install/files/acp/templates/packageListDetailed.tpl
wcfsetup/install/files/acp/templates/packageStartInstall.tpl
wcfsetup/install/files/acp/templates/packageUninstallationDependencies.tpl
wcfsetup/install/files/acp/templates/packageUninstallationStepPrepare.tpl
wcfsetup/install/files/acp/templates/packageUpdate.tpl
wcfsetup/install/files/acp/templates/packageUpdateAuth.tpl
wcfsetup/install/files/acp/templates/packageUpdateSearch.tpl
wcfsetup/install/files/acp/templates/packageUpdateSearchResult.tpl
wcfsetup/install/files/acp/templates/packageView.tpl
wcfsetup/install/files/acp/templates/updateServerAdd.tpl
wcfsetup/install/files/acp/templates/updateServerList.tpl
wcfsetup/install/files/acp/templates/userAdd.tpl
wcfsetup/install/files/acp/templates/userAssignToGroup.tpl
wcfsetup/install/files/acp/templates/userEmailAddressExport.tpl
wcfsetup/install/files/acp/templates/userGroupAdd.tpl
wcfsetup/install/files/acp/templates/userGroupList.tpl
wcfsetup/install/files/acp/templates/userList.tpl
wcfsetup/install/files/acp/templates/userMail.tpl
wcfsetup/install/files/acp/templates/userSearch.tpl
wcfsetup/install/files/acp/templates/usersMassProcessing.tpl
wcfsetup/install/files/acp/templates/worker.tpl

index 3af7324af39d65a50adf562bb4ebf9654445cd74..a74a93db06a8741f300d685b9ce96db9ec10efaa 100644 (file)
@@ -139,6 +139,49 @@ a[href^="mailto:"] {
        top: -9000px;
 }
 
+
+
+/* ############## Container ############## */
+
+/* -- -- -- Globals -- -- --  */
+
+/** 
+ * This is a generic container for surrounding blocks of  
+ * text with an optional leading icon. The icon-size is
+ * free. The box collapses if there's no icon given or 
+ * if it doesn't load. 
+ * Note: 
+ * This box does not support RTL in WebKit-browsers! 
+ * Thus the box-style may change in the future. 
+ */
+
+.wcf-container {
+       display: table;
+       width: 100%;
+}
+
+.wcf-containerIcon {
+       display: table-cell;
+}
+
+img.wcf-containerIcon {
+       display: table-cell;
+       margin-right: 1em;
+}
+
+.wcf-containerIcon img {
+       margin-right: 1em;
+}
+
+.wcf-containerContent {
+       display: table-cell;
+       width: 100%;
+       vertical-align: top;
+       position: relative;
+}
+
+
+
 /* Floated Elements */
 
 .floatContainer:after {
@@ -367,6 +410,116 @@ table .wcf-label {
 
 
 
+/* ############## ToDo: Dropdown ############## */
+
+/* Dropdown Caption */
+
+.wcf-dropdownCaption,
+.wcf-dropdownCaption a {
+       text-decoration: none;
+       cursor: pointer;
+       display: inline-block;
+}
+
+.wcf-dropdownCaption:hover,
+.wcf-dropdownCaption a:hover {
+       text-decoration: none;
+}
+
+/* Dropdown */
+
+.wcf-dropdown {
+       color: rgba(255, 255, 255, 1);
+       border-width: 1px;
+       border-style: solid;
+       border-color: rgba(255, 255, 255, .7);
+       border-radius: 5px;
+       background-color: rgba(0, 0, 0, .7);
+       margin-top: 25px;
+       display: none;
+       position: absolute;
+       top: 0;
+       left: 0;
+       z-index: 400;
+       overflow: hidden;
+       
+       -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+       -moz-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+       -ms-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+       -o-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+       box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+       
+       -webkit-transition: color background .1s ease;
+       -moz-transition: color background .1s ease;
+       -ms-transition: color background .1s ease;
+       -o-transition: color background .1s ease;
+       transition: color background .1s ease;
+}
+
+.wcf-dropdown.open {
+       display: block;
+}
+
+/* Dropdown Items */
+
+.wcf-dropdown > li,
+.wcf-dropdown > div {
+       text-shadow: none;
+       color: #ccc;
+       cursor: pointer; 
+       
+       -webkit-transition: color background .2s linear;
+       -moz-transition: color background .2s linear;
+       -ms-transition: color background .2s linear;
+       -o-transition: color background .2s linear;
+       transition: color background .2s linear;
+}
+
+.wcf-dropdown > div {
+       padding: 5px 7px;
+}
+
+.wcf-dropdown > :first-child {
+       border-top-left-radius: 5px;
+       border-top-right-radius: 5px;
+}
+
+.wcf-dropdown > :last-child {
+       border-bottom-left-radius: 5px;
+       border-bottom-right-radius: 5px;
+}
+
+.wcf-dropdown > :hover:not(ul):not(.pointer),
+.wcf-dropdown > .active {
+       color: rgba(255, 255, 255, 1);
+       cursor: pointer;
+       background-color: rgba(0, 0, 0, .5);
+}
+
+.wcf-dropdown > li.divider:not(:first-child) {
+       border-top: 1px solid rgba(255, 255, 255, .7);
+}
+
+.wcf-dropdown > li {
+       text-decoration: none;
+       padding: 5px 7px;
+       display: block;
+}
+
+.wcf-dropdown > li a {
+       text-decoration: none;
+       color: #ccc;
+       padding: -5px -7px;
+       display: block;
+}
+
+.wcf-dropdown > li a:hover {
+       color: rgba(255, 255, 255, 1);
+       background-color: rgba(0, 0, 0, .5);
+}
+
+
+
 /* ############## Body ############## */
 
 /* Globals */
@@ -1474,8 +1627,8 @@ section.wcf-content .wcf-content {
 /* ############## Status Display ############## */
 
 .wcf-statusDisplay {
-       float: right;
        padding: 1px 0;
+       float: right;
 }
 
 .wcf-statusDisplay .wcf-statusIcons li {
@@ -1484,117 +1637,6 @@ section.wcf-content .wcf-content {
 
 
 
-
-/* ############## ToDo: Dropdown ############## */
-
-/* Dropdown Caption */
-
-.wcf-dropdownCaption,
-.wcf-dropdownCaption a {
-       text-decoration: none;
-       cursor: pointer;
-       display: inline-block;
-}
-
-.wcf-dropdownCaption:hover,
-.wcf-dropdownCaption a:hover {
-       text-decoration: none;
-}
-
-/* Dropdown */
-
-.wcf-dropdown {
-       color: rgba(255, 255, 255, 1);
-       border-width: 1px;
-       border-style: solid;
-       border-color: rgba(255, 255, 255, .7);
-       border-radius: 5px;
-       background-color: rgba(0, 0, 0, .7);
-       margin-top: 25px;
-       display: none;
-       position: absolute;
-       top: 0;
-       left: 0;
-       z-index: 400;
-       overflow: hidden;
-       
-       -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-       -moz-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-       -ms-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-       -o-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-       box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-       
-       -webkit-transition: color background .1s ease;
-       -moz-transition: color background .1s ease;
-       -ms-transition: color background .1s ease;
-       -o-transition: color background .1s ease;
-       transition: color background .1s ease;
-}
-
-.wcf-dropdown.open {
-       display: block;
-}
-
-/* Dropdown Items */
-
-.wcf-dropdown > li,
-.wcf-dropdown > div {
-       text-shadow: none;
-       color: #ccc;
-       cursor: pointer; 
-       
-       -webkit-transition: color background .2s linear;
-       -moz-transition: color background .2s linear;
-       -ms-transition: color background .2s linear;
-       -o-transition: color background .2s linear;
-       transition: color background .2s linear;
-}
-
-.wcf-dropdown > div {
-       padding: 5px 7px;
-}
-
-.wcf-dropdown > :first-child {
-       border-top-left-radius: 5px;
-       border-top-right-radius: 5px;
-}
-
-.wcf-dropdown > :last-child {
-       border-bottom-left-radius: 5px;
-       border-bottom-right-radius: 5px;
-}
-
-.wcf-dropdown > :hover:not(ul):not(.pointer),
-.wcf-dropdown > .active {
-       color: rgba(255, 255, 255, 1);
-       cursor: pointer;
-       background-color: rgba(0, 0, 0, .5);
-}
-
-.wcf-dropdown > li.divider:not(:first-child) {
-       border-top: 1px solid rgba(255, 255, 255, .7);
-}
-
-.wcf-dropdown > li {
-       text-decoration: none;
-       padding: 5px 7px;
-       display: block;
-}
-
-.wcf-dropdown > li a {
-       text-decoration: none;
-       color: #ccc;
-       padding: -5px -7px;
-       display: block;
-}
-
-.wcf-dropdown > li a:hover {
-       color: rgba(255, 255, 255, 1);
-       background-color: rgba(0, 0, 0, .5);
-}
-
-
-
 /* ############## Headings ############## */
 
 /* -- -- -- Main Heading -- -- -- */
@@ -1607,14 +1649,7 @@ section.wcf-content .wcf-content {
        margin-top: 30px;
 }
 
-.wcf-mainHeading > img,
-.wcf-mainHeading > svg {
-       float: left;
-}
-
 .wcf-mainHeading > hgroup {
-       display: block;
-       position: relative;
        min-height: 48px;
 }
 
@@ -1626,18 +1661,12 @@ section.wcf-content .wcf-content {
 
 @media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
-       .wcf-mainHeading > img,
-       .wcf-mainHeading > svg {
+       .wcf-mainHeading .wcf-containerIcon {
                width: 48px;
                height: 48px;
        }
        
-       .wcf-mainHeading > img ~ hgroup,
-       .wcf-mainHeading > svg ~ hgroup {
-               padding-left: 60px;
-       }
-       
-       .wcf-mainHeading > hgroup h1 {
+       .wcf-mainHeading hgroup h1 {
                font-size: 175%;
        }
        
@@ -1645,18 +1674,12 @@ section.wcf-content .wcf-content {
 
 @media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
-       .wcf-mainHeading > img,
-       .wcf-mainHeading > svg {
+       .wcf-mainHeading .wcf-containerIcon {
                width: 64px;
                height: 64px;
        }
        
-       .wcf-mainHeading > img ~ hgroup,
-       .wcf-mainHeading > svg ~ hgroup {
-               padding-left: 65px;
-       }
-       
-       .wcf-mainHeading > hgroup h1 {
+       .wcf-mainHeading hgroup h1 {
                font-size: 200%;
        }
        
@@ -1667,6 +1690,7 @@ section.wcf-content .wcf-content {
        text-decoration: none;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
        color: rgba(102, 102, 102, 1);
+       display: block;
 }
 
 .wcf-mainHeading > hgroup h2 {
@@ -1680,6 +1704,16 @@ section.wcf-content .wcf-content {
        padding-top: 3px;
 } 
 
+/* Special -> Badges */
+
+.wcf-mainHeading > hgroup h1 .wcf-badge,
+.wcf-mainHeading > hgroup h1 a .wcf-badge {
+       font-size: 75%;
+       text-decoration: none;
+       background-color: rgba(102, 102, 102, 1);
+       color: rgba(255, 255, 255, 1);
+}
+
 /* Special -> Dialog */
 
 .wcf-dialogContainer .wcf-mainHeading {
@@ -1979,7 +2013,6 @@ textarea {
 
 /* Normal State */
 
-.wcf-input,
 input[type='text'],
 input[type='search'],
 input[type='date'],
@@ -2008,7 +2041,6 @@ textarea {
 
 /* Hover State */
 
-:not(.wcf-aclContainer ul).wcf-input:hover,
 input[type='text']:hover,
 input[type='search']:hover,
 input[type='date']:hover,
@@ -2022,7 +2054,6 @@ textarea:hover {
 
 /* Active & Focus State */
 
-.wcf-input:active,
 input[type='text']:active,
 input[type='search']:active,
 input[type='date']:active,
@@ -2031,7 +2062,6 @@ input[type='url']:active,
 input[type='password']:active,
 textarea:active,
 
-.wcf-input:focus,
 input[type='text']:focus,
 input[type='search']:focus,
 input[type='date']:focus,
@@ -2052,7 +2082,6 @@ textarea:focus {
 
 /* Read Only State */
 
-.wcf-input[readonly='readonly'],
 input[type='text'][readonly='readonly'],
 input[type='search'][readonly='readonly'],
 input[type='email'][readonly='readonly'],
@@ -2073,7 +2102,6 @@ textarea[readonly='readonly'] {
 
 /* Disabled State */
 
-.wcf-input[disabled='disabled'],
 input[type='text'][disabled='disabled'],
 input[type='search'][disabled='disabled'],
 input[type='date'][disabled='disabled'],
@@ -2518,7 +2546,7 @@ input[type='button'],
        /* Toggle for tab menu orientation (options: left|center|right) */
        text-align: center;
        margin-top: 15px;
-       padding: 0 5px;
+       padding: 0 10px;
        display: block;
        position: relative;
 }
index fb0a11ed3c82a808b4584b05a8ce2ff0f82a8f5d..08528a068713b9f8eca20d7595f0a16cfe905542 100644 (file)
@@ -1,8 +1,8 @@
 {include file='header'}
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/session1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/session1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.sessionLog.access.list{/lang}</h1>
        </hgroup>
 </header>
index 3cb4c0f7ec25c209bd4a397f68b6a61596b7c42f..6b75a076bc1e3fadcd9143d12d0e84a4cdf07d8c 100644 (file)
@@ -1,8 +1,8 @@
 {include file='header'}
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/session1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/session1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.sessionLog.list{/lang}</h1>
        </hgroup>
 </header>
index ef3485904f3ea2cf2921149f1264b5213bfffc0e..a877ffe2b473e06855ab479dbb6ebdb848bb96de 100644 (file)
@@ -12,9 +12,9 @@
        //]]>
 </script>
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/cache1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/cache1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.cache.list{/lang}</h1>
        </hgroup>
 </header>
index 3d4970b9a62b82dc255078c2725cf2eaef5a1074..779e5737815af8ac9a9792b50a75375fa7737476 100644 (file)
@@ -1,8 +1,8 @@
 {include file='header'}
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/{$action}1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/{$action}1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.cronjob.{$action}{/lang}</h1>
                <h2>{lang}wcf.acp.cronjob.subtitle{/lang}</h2>
        </hgroup>
index eb2fd738042172c54fa7b24ed8a65275f0cf1cca..cb9f30506fdffca91ec84953dabf7af6cedb10f9 100644 (file)
@@ -1,8 +1,8 @@
 {include file='header'}
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/time1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/time1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.cronjob.list{/lang}</h1>
                <h2>{lang}wcf.acp.cronjob.subtitle{/lang}</h2>
        </hgroup>
index b0242b126bf16eab31fc2ba78ae8e6a6356443d8..6b9ad2e26863247440c77341708688c7fd55b093 100644 (file)
@@ -1,8 +1,8 @@
 {include file='header'}
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/time1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/time1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.cronjob.log{/lang}</h1>
                <h2>{lang}wcf.acp.cronjob.subtitle{/lang}</h2>
        </hgroup>
@@ -16,7 +16,7 @@
        <form method="post" action="{link controller='CronjobLogDelete'}{/link}">
                <div class="wcf-border wcf-boxTitle">
                        <hgroup>
-                               <h1>{lang}wcf.acp.cronjob.log{/lang} <span class="badge" title="{lang}wcf.acp.cronjob.log.count{/lang}">{#$items}</span></h1>
+                               <h1>{lang}wcf.acp.cronjob.log{/lang} <span class="wcf-badge" title="{lang}wcf.acp.cronjob.log.count{/lang}">{#$items}</span></h1>
                        </hgroup>
                        
                        <table class="wcf-table">
index 1f487f727f3bc2ec4737679efd5d90a6f42804f5..d31a0d8b20df4320d305f0625e1afd6e113138d1 100644 (file)
@@ -14,9 +14,9 @@
        //]]>
 </script>
 
-<header class="wcf-mainHeading setup">
-       <img src="{@RELATIVE_WCF_DIR}icon/logIn1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading setup">
+       <img src="{@RELATIVE_WCF_DIR}icon/logIn1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{@$pageTitle}</h1>
        </hgroup>
 </header>
index b0f2192899f83410a6bd51b87a7f4aae8fbf3aa4..cae788efb83f87d4eba30c4151d509fbaf5e4291 100644 (file)
@@ -8,9 +8,9 @@
        //]]>
 </script>
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/login1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/login1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.masterPassword.enter{/lang}</h1>
        </hgroup>
 </header>
index 39e74ad17f22a560caca90d496af5bc1b03a6b47..adc399a036e8b188b958bbc0f81e9aa3870610ac 100644 (file)
@@ -12,9 +12,9 @@
        //]]>
 </script>
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/login1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/login1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.masterPassword.init{/lang}</h1>
        </hgroup>
 </header>
index 438b4c8ab6c0b448bf18c316162103d711dca5ab..f4754a2380dd3d8fdc2b71e9c71ff6081d35b9e3 100644 (file)
@@ -9,9 +9,9 @@
        //]]>
 </script>
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/options1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/options1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.option.category.{$category->categoryName}{/lang}</h1>
                {hascontent}<h2>{content}{lang __optional=true}wcf.acp.option.category.{$category->categoryName}.description{/lang}{/content}</h2>{/hascontent}
        </hgroup>
index 707bc354dcdc3ea90c4ed382e1beb6fe77f78bc8..d12abb906170df33df244d787ebb7e80b97b76fc 100644 (file)
@@ -1,8 +1,8 @@
 {include file='header'}
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/upload1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/upload1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.option.import{/lang}</h1>
        </hgroup>
 </header>
index 3479478ff0f7c198a3af11d396ba288859976fd1..27dfb1df8d2b41ee94f638329d372384d12fea26 100644 (file)
@@ -9,9 +9,9 @@
        //]]>
 </script>
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/working1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/working1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{$archive->getPackageInfo('packageName')}</h1>
                <h2>{$archive->getPackageInfo('packageDescription')}</h2>
        </hgroup>
index ab285200fdbd5fbfa3daa2dfb31d6ea40ba237a6..f65272cdaa075814d638681c9d77dbd623850833 100644 (file)
@@ -1,7 +1,7 @@
 <div id="packageInstallationDialogContainer">
-       <header class="wcf-mainHeading">
-               <img src="{@RELATIVE_WCF_DIR}icon/working2.svg" alt="" />
-               <hgroup>
+       <header class="wcf-container wcf-mainHeading">
+               <img src="{@RELATIVE_WCF_DIR}icon/working2.svg" alt="" class="wcf-containerIcon" />
+               <hgroup class="wcf-containerContent">
                        <h1>{lang}wcf.acp.package.installation.title{/lang}</h1>
                        <h2 id="packageInstallationAction">{lang}wcf.acp.package.installation.step.prepare{/lang}</span></h2>
                        <p><progress id="packageInstallationProgress" value="0" max="100">0%</progress> <span id="packageInstallationProgressLabel">0%</span></p>
index 24e8301fcfc0ba42647dbcfcb4e8b1a30ab2172b..c309f41a27e175d8ca6513f38e73f530c56c7614 100644 (file)
@@ -22,9 +22,9 @@
        //]]>
 </script>
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/packageApplication1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/packageApplication1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.package.list{/lang}</h1>
        </hgroup>
 </header>
index 3ea3de5c27f59da0d1b5939995f18bd1791bb43e..69f1fd410dc361d9195ff7a9e42043160b26662b 100644 (file)
@@ -10,9 +10,9 @@
        //]]>
 </script>
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/packageApplication1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/packageApplication1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.package.list{/lang}</h1>
        </hgroup>
 </header>
index 13a4812b1480289a4247de02476e7b57528f0d79..ad785f006884a6d777240ce2186322f00bdd0dea 100644 (file)
@@ -1,14 +1,14 @@
 {include file='header'}
 
-<header class="wcf-mainHeading">
+<header class="wcf-container wcf-mainHeading">
        {if $packageID == 0}
-               <img src="{@RELATIVE_WCF_DIR}icon/add1.svg" alt="" />
-               <hgroup>
+               <img src="{@RELATIVE_WCF_DIR}icon/add1.svg" alt="" class="wcf-containerIcon" />
+               <hgroup class="wcf-containerContent">
                        <h1>{lang}wcf.acp.package.startInstall{/lang}</h1>
                </hgroup>
        {else}
-               <img src="{@RELATIVE_WCF_DIR}icon/update1.svg" alt="" />
-               <hgroup>
+               <img src="{@RELATIVE_WCF_DIR}icon/update1.svg" alt="" class="wcf-containerIcon" />
+               <hgroup class="wcf-containerContent">
                        <h1>{lang}wcf.acp.package.startUpdate{/lang}</h1>
                </hgroup>
        {/if}
index d91033af71ff55c61ca8a40a21655e599fef9bb5..80f3635c2141058dcc07f85da84c425a67108784 100644 (file)
@@ -8,9 +8,9 @@
 //     ]]>
 </script>
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/delete1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/delete1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.package.uninstall{/lang}: {$packageObj->getName()}</h1>
                <h2>{$packageObj->packageDescription}</h2>
        </hgroup>
index 91112237ef2a37984e0ae193d9a92b72bc7c9125..433db243eb8895d2543cb88b66dcbc42f5a254ee 100644 (file)
@@ -1,8 +1,8 @@
 <div id="packageInstallationDialogContainer">
-       <header class="wcf-mainHeading">
-               <img src="{@RELATIVE_WCF_DIR}icon/working2.svg" alt="" />
-               <hgroup>
-                       <h1>Paket &raquo;{$queue->packageName}&laquo; wird deinstalliert &hellip;</h1>
+       <header class="wcf-container wcf-mainHeading">
+               <img src="{@RELATIVE_WCF_DIR}icon/working2.svg" alt="" class="wcf-containerIcon" />
+               <hgroup class="wcf-containerContent">
+                       <h1>Paket &raquo;{$queue->packageName}&laquo; wird deinstalliert &hellip;</h1><!-- ToDo: Language variables -->
                        <h2>Aktueller Schritt: <span id="packageInstallationAction">{lang}wcf.package.uninstallation.step.prepare{/lang}</span></h2>
                        <p><progress id="packageInstallationProgress" value="0" max="100">0%</progress></p>
                </hgroup>
index 1200a9996cfa9afcffce311a78704c340baf5e0c..3c57fee196ca02da30966dc6a049172feee7308e 100644 (file)
@@ -1,8 +1,8 @@
 {include file='header'}
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/update1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/update1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.packageUpdate{/lang}</h1>
        </hgroup>
 </header>
index 2bf7dc87f33f982172c55e1705f68c3c0df4c82f..e77873739b651f03f42c27c00284c14fca7e82d1 100644 (file)
@@ -1,8 +1,8 @@
 {include file='header'}
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/update1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/update1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.packageUpdate.auth{/lang}</h1>
        </hgroup>
 </header>
index 46c8f2597a6c952cffe12603e040cafd568dbe33..17778a9c676ef48ced3fbb869fd22553dcf27cd4 100644 (file)
@@ -37,9 +37,9 @@
        //]]>
 </script>
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/search1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/search1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.packageUpdate.search{/lang}</h1>
        </hgroup>
 </header>
index f39135106510bf678c7586d810ae81a4d0100a09..df72a029625d165862a10fe14a6cd5f65b52259f 100644 (file)
@@ -2,9 +2,9 @@
 
 <script type="text/javascript" src="{@RELATIVE_WCF_DIR}js/MultiPagesLinks.class.js"></script>
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/search1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/search1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.packageUpdate.search{/lang}</h1>
        </hgroup>
 </header>
index 06106d0085ec5827ec9d6f494dab274d0a4c3b0e..d9d4fa66104976c91712e345378912e9aa163e0b 100644 (file)
@@ -8,9 +8,9 @@
        //]]>
 </script>
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/packageApplication1.svg" alt="" /><!-- ToDo: Add possibility to show a custom app icon if given! -->
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/packageApplication1.svg" alt="" class="wcf-containerIcon" /><!-- ToDo: Add possibility to show a custom app icon if given! -->
+       <hgroup class="wcf-containerContent">
                <h1>{$package->getName()}</h1>
                <h2>{$package->packageDescription}</h2>
        </hgroup>
index bb31797adcafacf095f396511ed2c570cfc7177b..4c95f2e02d9cd6c1324a9c4dc2bfc66d2049e4c2 100644 (file)
@@ -1,8 +1,8 @@
 {include file='header'}
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/{@$action}1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/{@$action}1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.updateServer.{$action}{/lang}</h1>
        </hgroup>
 </header>
index 6630575037c014c2a7964471d650bc80ce8b6d67..8a731791a80ecb0dc075931e16d7ea944a05cfd3 100644 (file)
@@ -9,9 +9,9 @@
        //]]>
 </script>
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/server1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/server1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.updateServer.list{/lang}</h1>
        </hgroup>
 </header>
index e6765591e4ecb1ca979f2baf20e768a4324e7cda..66cc2a8407263acbb6e18171b89903486d59b899 100644 (file)
@@ -8,9 +8,9 @@
        //]]>
 </script>
 
-<header class="wcf-mainHeading">
-       <img {if $userID|isset}id="userEdit{@$userID}" {/if}src="{@RELATIVE_WCF_DIR}icon/{@$action}1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img {if $userID|isset}id="userEdit{@$userID}" {/if}src="{@RELATIVE_WCF_DIR}icon/{@$action}1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.user.{@$action}{/lang}</h1>
        </hgroup>
 </header>
index 1a5d4956acd636ae8b7d3a7735cdeb145d857f7a..a6f2657b57c895a0e3c84aedfd0190320e9573cd 100644 (file)
@@ -1,8 +1,8 @@
 {include file='header'}
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/users1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/users1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.user.assignToGroup{/lang}</h1>
        </hgroup>
 </header>
index 76b95bde46ad8f8d4e4d566e9bc2534b88fbc1b2..28a61c2ccdf64cdd6338fd067bf017724e8f2f69 100644 (file)
@@ -8,9 +8,9 @@
        //]]>
 </script>
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/eMail1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/eMail1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.user.exportEmailAddress{/lang}</h1>
        </hgroup>
 </header>
index 5d4b5fff36e198cc4343a1a966f3d4d6a7a4dd8e..3279522b9ff79e41d542fe3c80e161e01c4a477d 100644 (file)
@@ -12,9 +12,9 @@
        //]]>
 </script>
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/{@$action}1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/{@$action}1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.group.{@$action}{/lang}</h1>
        </hgroup>
 </header>
index 30c524db670e414b650890a5bc62d07f6652fe03..474c33894a8e5eb8bf0212525435a871a1dfa2f4 100644 (file)
@@ -8,9 +8,9 @@
        //]]>
 </script>
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/users1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/users1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.group.list{/lang}</h1>
        </hgroup>
 </header>
index 7857f2bfc1d42621a194c5d1ff02443d47f68538..4cc586167cda3a8e3e5ee9a76f20fe2407a46efd 100644 (file)
@@ -9,11 +9,11 @@
        //]]>
 </script>
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/{if $searchID}search{else}user{/if}1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/{if $searchID}search{else}user{/if}1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.user.{if $searchID}search{else}list{/if}{/lang}</h1>
-               <h2>{if $searchID}{lang}wcf.acp.user.search.matches{/lang}{/if}</h2><!-- deprecated display -->
+               <h2>{if $searchID}{lang}wcf.acp.user.search.matches{/lang}{/if}</h2><!-- ToDo: deprecated display -->
        </hgroup>
 </header>
 
@@ -44,7 +44,7 @@
        </nav>
        
        {hascontent}
-               <table class="wcf-table jsClipboardContainer" data-type="com.woltlab.wcf.user">
+               <table data-type="com.woltlab.wcf.user" class="wcf-table jsClipboardContainer">
                        <thead>
                                <tr>
                                        <th class="columnMark"><label><input type="checkbox" class="jsClipboardMarkAll" /></label></th>
index 80ec00d860d862af4dc2fb7edeb5c4ffd2074fbd..909b18c12f6bb9331d35080e4bc6062baa40ffc8 100644 (file)
@@ -12,9 +12,9 @@
        </script>
 {/if}
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/email1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/email1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>
                        {if $action == 'all'}
                                {lang}wcf.acp.user.sendMail.all{/lang}
index dd5d10a26fcca6e164957ef062aa1a13228a5417..0eaa7a6d80ae33e59e9a29b3a089abd65ab89922 100644 (file)
@@ -8,9 +8,9 @@
        //]]>
 </script>
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/search1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/search1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.user.search{/lang}</h1>
        </hgroup>
 </header>
index cb906b3059f1ffdbb80e298e7d8772c5289e8b41..db67cc87e6b04b06526a05471570436e998466b9 100644 (file)
@@ -60,9 +60,9 @@
        //]]>
 </script>
 
-<header class="wcf-mainHeading">
-       <img src="{@RELATIVE_WCF_DIR}icon/user1.svg" alt="" />
-       <hgroup>
+<header class="wcf-container wcf-mainHeading">
+       <img src="{@RELATIVE_WCF_DIR}icon/user1.svg" alt="" class="wcf-containerIcon" />
+       <hgroup class="wcf-containerContent">
                <h1>{lang}wcf.acp.user.massProcessing{/lang}</h1>
        </hgroup>
 </header>
index 0ad900aeed73db294a94f95b003a0fb95f4ac0a9..68ed9db32d24329a68da425ec0e76ec77921c3b7 100644 (file)
@@ -1,8 +1,8 @@
 <div id="workerContainer">
-       <header class="wcf-mainHeading">
-               <img src="{@RELATIVE_WCF_DIR}icon/working2.svg" alt="" />
-               <hgroup>
-                       <h1>Aufgaben werden ausgeführt &hellip;</h1>
+       <header class="wcf-container wcf-mainHeading">
+               <img src="{@RELATIVE_WCF_DIR}icon/working2.svg" alt="" class="wcf-containerIcon" />
+               <hgroup class="wcf-containerIcon">
+                       <h1>Aufgaben werden ausgeführt &hellip;</h1><!--ToDo: Language variables -->
                        <h2>Aktueller Schritt: <span id="workerAction">{lang}wcf.package.installation.step.prepare{/lang}</span></h2>
                        <p><progress id="workerProgress" value="0" max="100">0%</progress></p>
                </hgroup>