Introducing the new global classes (names may still change!)

OOCSS: We now add multiple classes to achieve a design and behavior.
This makes it easier to build new elements from scratch. Beware: Work
in progress!

diff --git a/wcfsetup/install/files/acp/style/wcf.css b/wcfsetup/install/files/acp/style/wcf.css
index d2b36bd4824eac8de486665adf9dcf7bfb1ce5b9..defbefc199652f0b0652928d28003c3d01f10fb4 100644 (file)
--- a/wcfsetup/install/files/acp/style/wcf.css
+++ b/wcfsetup/install/files/acp/style/wcf.css
@@ -110,7 +110,25 @@ img[src*='enable'] {
 
 /* ############## ToDo: Global Structural Classes ############## */
 
-/* Single Classes */
+/* -- -- -- Misc -- -- --  */
+
+.hot {
+       color: #b00; 
+}
+
+.invisible {
+       position: absolute;
+       left: -9000px;
+       top: -9000px;
+}
+
+/* Uniform background image */
+
+.wcf-headerImage {
+       background-image: url('../../../images/header.png');
+}
+
+/* -- -- -- URLs -- -- --  */
 
 .wcf-externalURL {
        background-image: url('../../icon/externalURL1.svg');
@@ -127,38 +145,30 @@ a[href^="mailto:"] {
        padding-left: 17px;
 }
 
-.hot {
-       color: #b00; 
-}
+/* -- -- -- Margins -- -- --  */
 
-.invisible {
-       position: absolute;
-       left: -9000px;
-       top: -9000px;
-}
-
-/* ToDo: Margins */
-
-.marginTop {
+.wcf-marginTop {
        margin-top: 15px;
 }
 
-.marginBottom {
+.wcf-marginBottom {
        margin-bottom: 15px;
 }
 
+/* -- -- -- Paddings -- -- --  */
+
 /* ToDo: Columns */
 
-.columnes-2 {
+.wcf-columnes-2 {
        width: 45%;
 }
 
-.columnes-3 {
+.wcf-columnes-3 {
        width: 30%;
 }
 
 
-/* ToDo: Floated Elements */
+/* -- -- -- ToDo: Floated Elements -- -- --  */
 
 /* possibly obsolete */
 
@@ -177,6 +187,32 @@ a[href^="mailto:"] {
 
 
 
+/* -- -- -- Shadows -- -- --  */
+
+/* Shadows for boxes - do not use on small boxes! */
+
+.wcf-shadow1 {
+       -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
+       -moz-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
+       -ms-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
+       /* ToDo: Opera doesn't like that so much! Bug-report sent to Opera 
+       -o-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
+       box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);*/
+}
+
+/* Use that shadow for tab menus - do not use on small boxes! */
+
+.wcf-shadow2 {
+       -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1),  0 -8px 10px -10px rgba(0, 0, 0, .1);
+       -moz-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1),  0 -8px 10px -10px rgba(0, 0, 0, .1);
+       -ms-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1),  0 -8px 10px -10px rgba(0, 0, 0, .1);
+       /* ToDo: Opera doesn't like that so much! Bug-report sent to Opera 
+       -o-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1),  0 -8px 10px -10px rgba(0, 0, 0, .1);
+       box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1),  0 -8px 10px -10px rgba(0, 0, 0, .1);*/
+}
+
+
+
 /* ############## Containers ############## */
 
 /* -- -- -- Globals -- -- --  */
@@ -1346,6 +1382,7 @@ section.wcf-content:after {
        
 }      
 
+/* Soon to be obsolete! */
 section.wcf-content .wcf-content {
        background-color: rgba(0, 0, 0, .01);
        padding: 13px 23px 23px;
@@ -1799,7 +1836,7 @@ fieldset legend ~ p {
 }
 
 .wcf-sidebar fieldset legend {
-       text-transform: uppercase;
+       text-transform: uppercase; /* That's possibly problematic */
        padding: 0;
 }
 
@@ -1907,7 +1944,8 @@ dl > dd > fieldset > dl > dd > label {
        display: block;
 }
 
-/* Reversed (flips the label aside the checkbox or radio button) */
+/* Reversed (flips the label aside the checkbox or radio button) - 
+       use only when automatically generating checkboxes or radio-buttons! */
 
 .reversed {
        text-align: left;
@@ -2460,37 +2498,21 @@ input[type='button'],
 
 
 
-/* ############## Border ############## */
+/* ############## Boxes ############## */
+
+/** 
+ * This defines a box with rounded borders 
+ * Use the extra classes to further style boxes 
+ */
+
+/* Globals */
 
-.wcf-border {
+.wcf-box {
        border: 1px solid #ccc;
        border-radius: 5px;
-       margin-top: 15px;
        box-sizing: border-box;
-       
-       -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
-       -moz-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
-       -ms-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
-       /* ToDo: Opera doesn't like that so much! Bug-report sent to Opera 
-       -o-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
-       box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);*/
 }
 
-.wcf-tabMenu ~ .wcf-border {
-       -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1),  0 -8px 10px -10px rgba(0, 0, 0, .1);
-       -moz-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1),  0 -8px 10px -10px rgba(0, 0, 0, .1);
-       -ms-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1),  0 -8px 10px -10px rgba(0, 0, 0, .1);
-       /* ToDo: Opera doesn't like that so much! Bug-report sent to Opera 
-       -o-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1),  0 -8px 10px -10px rgba(0, 0, 0, .1);
-       box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1),  0 -8px 10px -10px rgba(0, 0, 0, .1);*/
-}
-
-
-
-/* ############## Box Title ############## */
-
-/* Globals */
-
 .wcf-boxTitle {
        border-radius: 7px;
        background-color: #369;
@@ -2503,6 +2525,10 @@ input[type='button'],
        width: 100%;
 }
 
+.wcf-boxPadding {
+       padding: 13px 23px 23px;
+}
+
 /* Headings */
 
 .wcf-boxTitle > hgroup {
@@ -2534,7 +2560,7 @@ input[type='button'],
        color: #036;
 }
 
-/* Collapse Icon */
+/* Leading icon */
 
 .wcf-boxTitle > a {
        margin: 7px 0 0 10px;
@@ -2692,10 +2718,8 @@ input[type='button'],
 /* -- -- -- Tab Menu Content -- -- --  */
 
 .wcf-tabMenuContent {
-       border: 1px solid #ccc;
        background-color: rgba(255, 255, 255, 1);
        margin-top: -1px;
-       padding: 15px 23px;
        display: block;
        position: relative;
        z-index: 20; /* Prevents border overlay during transition */
@@ -4438,12 +4462,6 @@ button[disabled='disabled'] {
        background-color: #fee;
 }
 
-.wcf-sortableListContainer {
-       border-radius: 0;
-       background-color: rgba(252, 253, 254, 1);
-       padding: 21px;
-}
-
 /* Notice: min-height was safely removed */
 .wcf-sortableList {
        list-style-position: outside;

diff --git a/wcfsetup/install/files/acp/templates/cronjobAdd.tpl b/wcfsetup/install/files/acp/templates/cronjobAdd.tpl
index 905d2cffaebf85cabf3ccc31a6ce74658809e637..f6ffa8db594605a2e151affbd9e0021a37ab7199 100644 (file)
--- a/wcfsetup/install/files/acp/templates/cronjobAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/cronjobAdd.tpl
@@ -32,7 +32,7 @@
 </div>
 
 <form method="post" action="{if $action == 'add'}{link controller='CronjobAdd'}{/link}{else}{link controller='CronjobEdit'}{/link}{/if}">
-       <div class="wcf-border wcf-content">
+       <div class="wcf-box wcf-marginTop wcf-boxPadding wcf-shadow1">
                
                <fieldset>
                        <legend>{lang}wcf.acp.cronjob.data{/lang}</legend>

diff --git a/wcfsetup/install/files/acp/templates/cronjobList.tpl b/wcfsetup/install/files/acp/templates/cronjobList.tpl
index f8578dd3bdeaabe5e58f6633900b114e3052d36b..0dac3b53d48ba5688aee165196160bd754613ca9 100644 (file)
--- a/wcfsetup/install/files/acp/templates/cronjobList.tpl
+++ b/wcfsetup/install/files/acp/templates/cronjobList.tpl
@@ -53,7 +53,7 @@
 </div>
 
 {hascontent}
-       <div class="wcf-border wcf-boxTitle">
+       <div class="wcf-box wcf-boxTitle wcf-marginTop wcf-shadow1">
                <hgroup>
                        <h1>{lang}wcf.acp.cronjob.list{/lang} <span class="wcf-badge" title="{lang}wcf.acp.cronjob.list.count{/lang}">{#$items}</span></h1>
                </hgroup>

diff --git a/wcfsetup/install/files/acp/templates/cronjobLogList.tpl b/wcfsetup/install/files/acp/templates/cronjobLogList.tpl
index 10713b7434abb8837bd269a4c5e1163ef9f132d8..d9dc1ef67bd0a9fbea3e402524e0ce73432fbc90 100644 (file)
--- a/wcfsetup/install/files/acp/templates/cronjobLogList.tpl
+++ b/wcfsetup/install/files/acp/templates/cronjobLogList.tpl
@@ -14,7 +14,7 @@
 
 {hascontent}
        <form method="post" action="{link controller='CronjobLogDelete'}{/link}">
-               <div class="wcf-border wcf-boxTitle">
+               <div class="wcf-box wcf-boxTitle wcf-marginTop wcf-shadow1">
                        <hgroup>
                                <h1>{lang}wcf.acp.cronjob.log{/lang} <span class="wcf-badge" title="{lang}wcf.acp.cronjob.log.count{/lang}">{#$items}</span></h1>
                        </hgroup>

diff --git a/wcfsetup/install/files/acp/templates/option.tpl b/wcfsetup/install/files/acp/templates/option.tpl
index 2c636fee7350ef98c8991cd08bc4d2b2efb8643a..e75f3c466425c3e0f123a332a218268812855b72 100644 (file)
--- a/wcfsetup/install/files/acp/templates/option.tpl
+++ b/wcfsetup/install/files/acp/templates/option.tpl
@@ -36,7 +36,7 @@
                </nav>
                
                {foreach from=$optionTree item=categoryLevel1}
-                       <div id="{@$categoryLevel1[object]->categoryName}" class="wcf-border wcf-tabMenuContent hidden">
+                       <div id="{@$categoryLevel1[object]->categoryName}" class="wcf-box wcf-boxPadding wcf-tabMenuContent hidden">
                                <hgroup class="wcf-subHeading">
                                        <h1>{lang}wcf.acp.option.category.{@$categoryLevel1[object]->categoryName}{/lang}</h1>
                                        <h2>{lang __optional=true}wcf.acp.option.category.{$categoryLevel1[object]->categoryName}.description{/lang}</h2>

diff --git a/wcfsetup/install/files/acp/templates/packageList.tpl b/wcfsetup/install/files/acp/templates/packageList.tpl
index ea78a8fda68c6a06e109f31a0bbbd302c1c7783e..501286fe997c38bc48782e996febccf19614f4d5 100644 (file)
--- a/wcfsetup/install/files/acp/templates/packageList.tpl
+++ b/wcfsetup/install/files/acp/templates/packageList.tpl
@@ -37,7 +37,7 @@
                </ul>
        </nav>
        
-       <div id="applications" class="wcf-border wcf-tabMenuContent hidden">
+       <div id="applications" class="wcf-box wcf-tabMenuContent wcf-boxPadding wcf-shadow1 hidden">
                <hgroup class="wcf-subHeading">
                        <h1>{lang}wcf.acp.package.application.installed{/lang}</h1>
                </hgroup>
@@ -92,7 +92,7 @@
        </div>
        
        {hascontent}
-               <div id="plugins" class="wcf-border wcf-tabMenuContent hidden">
+               <div id="plugins" class="wcf-box wcf-boxPadding wcf-tabMenuContent wcf-shadow1 hidden">
                        <hgroup class="wcf-subHeading">
                                <h1>{lang}wcf.acp.package.plugin.installed{/lang}</h1>
                        </hgroup>

diff --git a/wcfsetup/install/files/acp/templates/packageListDetailed.tpl b/wcfsetup/install/files/acp/templates/packageListDetailed.tpl
index 423143c3e0f14b0652f5359256c54665fe3fe18e..6993f26f5d32947cf64c3b7a32f4cb66acf8870d 100644 (file)
--- a/wcfsetup/install/files/acp/templates/packageListDetailed.tpl
+++ b/wcfsetup/install/files/acp/templates/packageListDetailed.tpl
@@ -36,7 +36,7 @@
 </div>
 
 {if $objects|count > 0}
-       <div class="wcf-border wcf-boxTitle">
+       <div class="wcf-box wcf-boxTitle wcf-marginTop wcf-shadow1">
                <hgroup>
                        <h1><a href="{link controller='PackageList'}{/link}">{lang}wcf.acp.package.list{/lang} <span class="wcf-badge" title="{lang}wcf.acp.package.list.count{/lang}">{#$items}</span></a></h1>
                </hgroup>

diff --git a/wcfsetup/install/files/acp/templates/packageListPlugins.tpl b/wcfsetup/install/files/acp/templates/packageListPlugins.tpl
index d374d736fdfb3a63d598c0d576fb91e1764a2fcd..86e1f192e3d4fb24dcd16a234a42ecaf4f930ce1 100644 (file)
--- a/wcfsetup/install/files/acp/templates/packageListPlugins.tpl
+++ b/wcfsetup/install/files/acp/templates/packageListPlugins.tpl
@@ -1,5 +1,5 @@
 {foreach from=$plugins key=packageID item=package}
-       <li class="wcf-infoPackagePlugin">
+       <li class="wcf-infoPackagePlugin wcf-box wcf-shadow3">
                <div>
                        <a href="{link controller='PackageView' id=$packageID}{/link}" title="{$package->getName()}" style="background-image: url('{@$__wcf->getPath()}icon/packagePlugin1.svg');">
                                <h1>{$package->getName()}</h1>

diff --git a/wcfsetup/install/files/acp/templates/packageStartInstall.tpl b/wcfsetup/install/files/acp/templates/packageStartInstall.tpl
index 94302d84bb2792a4eae625b2c6569edff6593fd2..5f2d84ba4f2028d72951b37f990c92c2804a94e2 100644 (file)
--- a/wcfsetup/install/files/acp/templates/packageStartInstall.tpl
+++ b/wcfsetup/install/files/acp/templates/packageStartInstall.tpl
@@ -29,7 +29,7 @@
 </div>
 
 <form method="post" action="{link controller='PackageStartInstall'}{/link}" enctype="multipart/form-data">
-       <div class="wcf-border wcf-content">
+       <div class="wcf-box wcf-marginTop wcf-boxPadding wcf-shadow1">
                
                <fieldset>
                        <legend>{lang}wcf.acp.package.source{/lang}</legend>

diff --git a/wcfsetup/install/files/acp/templates/userAdd.tpl b/wcfsetup/install/files/acp/templates/userAdd.tpl
index 8f5d9f4340adb4c4c060382e080eb2a26db5c4ac..db5cbdc7eac0ca1de33230c49ae79e9357c9dbee 100644 (file)
--- a/wcfsetup/install/files/acp/templates/userAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/userAdd.tpl
@@ -39,7 +39,7 @@
 </div>
 
 <form method="post" action="{if $action == 'add'}{link controller='UserAdd'}{/link}{else}{link controller='UserEdit'}{/link}{/if}">
-       <div class="wcf-border wcf-content">
+       <div class="wcf-box wcf-marginTop wcf-boxPadding wcf-shadow1">
                <dl{if $errorType.username|isset} class="wcf-formError"{/if}>
                        <dt><label for="username">{lang}wcf.user.username{/lang}</label></dt>
                        <dd>

diff --git a/wcfsetup/install/files/acp/templates/userAssignToGroup.tpl b/wcfsetup/install/files/acp/templates/userAssignToGroup.tpl
index ca564b6ba82d30d9fdc22a3327e0b242a94c6fdc..6bbd8211e4d0cfc8c5e548143794e4d3fdafc1f0 100644 (file)
--- a/wcfsetup/install/files/acp/templates/userAssignToGroup.tpl
+++ b/wcfsetup/install/files/acp/templates/userAssignToGroup.tpl
@@ -13,7 +13,7 @@
 
 <form method="post" action="{link controller='UserAssignToGroup'}{/link}">
 
-       <div class="wcf-border wcf-content">
+       <div class="wcf-box wcf-marginTop wcf-boxPadding wcf-shadow1">
                
                <fieldset>
                        <legend>{lang}wcf.acp.user.assignToGroup.markedUsers{/lang}</legend>

diff --git a/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl b/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl
index bcbdcab33edca5821319607dd2309f70a449711c..0a4453749e12e5997dcec557a00a2764b72cc783 100644 (file)
--- a/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl
+++ b/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl
@@ -78,7 +78,7 @@
 {/if}
 
 <form method="post" action="{link controller='UsersMassProcessing'}{/link}">
-       <div class="wcf-border wcf-content">
+       <div class="wcf-box wcf-marginTop wcf-boxPadding wcf-shadow1">
                
                <hgroup class="wcf-subHeading">
                        <h1>{lang}wcf.acp.user.massProcessing.conditions{/lang}</h1>