From 503b17c915b2767c56378674463895fc0de758f2 Mon Sep 17 00:00:00 2001 From: Luzifr Date: Tue, 6 Mar 2012 16:52:49 +0100 Subject: [PATCH] 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! --- wcfsetup/install/files/acp/style/wcf.css | 124 ++++++++++-------- .../files/acp/templates/cronjobAdd.tpl | 2 +- .../files/acp/templates/cronjobList.tpl | 2 +- .../files/acp/templates/cronjobLogList.tpl | 2 +- .../install/files/acp/templates/option.tpl | 2 +- .../files/acp/templates/packageList.tpl | 4 +- .../acp/templates/packageListDetailed.tpl | 2 +- .../acp/templates/packageListPlugins.tpl | 2 +- .../acp/templates/packageStartInstall.tpl | 2 +- .../install/files/acp/templates/userAdd.tpl | 2 +- .../files/acp/templates/userAssignToGroup.tpl | 2 +- .../acp/templates/usersMassProcessing.tpl | 2 +- 12 files changed, 83 insertions(+), 65 deletions(-) diff --git a/wcfsetup/install/files/acp/style/wcf.css b/wcfsetup/install/files/acp/style/wcf.css index d2b36bd482..defbefc199 100644 --- 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 905d2cffae..f6ffa8db59 100644 --- a/wcfsetup/install/files/acp/templates/cronjobAdd.tpl +++ b/wcfsetup/install/files/acp/templates/cronjobAdd.tpl @@ -32,7 +32,7 @@
-
+
{lang}wcf.acp.cronjob.data{/lang} diff --git a/wcfsetup/install/files/acp/templates/cronjobList.tpl b/wcfsetup/install/files/acp/templates/cronjobList.tpl index f8578dd3bd..0dac3b53d4 100644 --- a/wcfsetup/install/files/acp/templates/cronjobList.tpl +++ b/wcfsetup/install/files/acp/templates/cronjobList.tpl @@ -53,7 +53,7 @@
{hascontent} -
+

{lang}wcf.acp.cronjob.list{/lang} {#$items}

diff --git a/wcfsetup/install/files/acp/templates/cronjobLogList.tpl b/wcfsetup/install/files/acp/templates/cronjobLogList.tpl index 10713b7434..d9dc1ef67b 100644 --- a/wcfsetup/install/files/acp/templates/cronjobLogList.tpl +++ b/wcfsetup/install/files/acp/templates/cronjobLogList.tpl @@ -14,7 +14,7 @@ {hascontent} -
+

{lang}wcf.acp.cronjob.log{/lang} {#$items}

diff --git a/wcfsetup/install/files/acp/templates/option.tpl b/wcfsetup/install/files/acp/templates/option.tpl index 2c636fee73..e75f3c4664 100644 --- a/wcfsetup/install/files/acp/templates/option.tpl +++ b/wcfsetup/install/files/acp/templates/option.tpl @@ -36,7 +36,7 @@ {foreach from=$optionTree item=categoryLevel1} -