ACP-style refinements

diff --git a/wcfsetup/install/files/acp/style/testing-reset.css b/wcfsetup/install/files/acp/style/testing-reset.css
index 9535c64d801c87ebd0c8024830415372972c8d37..12ea8e0f34877f3d23541435468f1357c6a24610 100644 (file)
--- a/wcfsetup/install/files/acp/style/testing-reset.css
+++ b/wcfsetup/install/files/acp/style/testing-reset.css
@@ -21,7 +21,7 @@ time, mark, audio, video {
        border: 0;\r
        font-size: 100%;\r
        font: inherit;\r
-       /* vertical-align: baseline; */\r
+       /* vertical-align: baseline; disabled by WoltLab, does not fit our needs */\r
 }\r
 /* HTML5 display-role reset for older browsers */\r
 article, aside, details, figcaption, figure, \r

diff --git a/wcfsetup/install/files/acp/style/testing.css b/wcfsetup/install/files/acp/style/testing.css
index ca5b911b551087881f2dc1c21ce2d0bc18a2e1ec..3311cbb120d70e04cf448408404a3dbce0fb62c8 100644 (file)
--- a/wcfsetup/install/files/acp/style/testing.css
+++ b/wcfsetup/install/files/acp/style/testing.css
@@ -5,6 +5,8 @@
  * @copyright  2011 WoltLab GmbH\r
  */\r
 \r
+\r
+\r
 /* -- -- -- -- -- Miscellaneous -- -- -- -- -- */\r
 \r
 * {\r
@@ -26,11 +28,11 @@ a {
        color: #369;\r
        text-decoration: none;\r
        \r
-       -webkit-transition: all .1s linear;\r
-       -moz-transition: all .1s linear;\r
-       -ms-transition: all .1s linear;\r
-       -o-transition: all .1s linear;\r
-       transition: all .1s linear;\r
+       -webkit-transition: color .1s linear;\r
+       -moz-transition: color .1s linear;\r
+       -ms-transition: color .1s linear;\r
+       -o-transition: color .1s linear;\r
+       transition: color .1s linear;\r
 }\r
 \r
 a:hover {\r
@@ -44,58 +46,97 @@ a:hover {
        top: -9000px;\r
 }\r
 \r
+\r
+\r
 /* -- -- -- -- -- Header -- -- -- -- -- */\r
 \r
-header {\r
-       margin: 0 23px 0;\r
+header.pageHeader {\r
+       /*\r
+       background-image: url("../images/header.png");\r
+       background-position: left top;\r
+       background-repeat: repeat-x;\r
+       */\r
+       min-width: 800px;\r
+       width: 100%;\r
 }\r
 \r
-header div#logo {\r
-       /* This is experimental. Looks like only \r
-       Safari/Chrome support SVG-images as background-\r
-       images properly! */\r
+/* Top Menu */\r
+\r
+header.pageHeader menu.topMenu {\r
+       position: absolute;\r
+       top: 0;\r
+       right: 0;\r
+       left: 0;\r
+       min-height: 25px;\r
+       z-index: 10;\r
+       background-color: rgba(0, 0, 0, .4);\r
        \r
-       background-image: url("../images/wcfLogoWhite.svg");\r
-       background-position: 0 35px;\r
-       background-repeat: no-repeat;\r
+       -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);\r
+       -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);\r
+       -ms-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);\r
+       -o-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);\r
+       box-shadow: 0 3px 7px rgba(0, 0, 0, .3);\r
+}\r
+\r
+header.pageHeader menu.topMenu > div {\r
+       padding: 5px 23px 3px;\r
        \r
-       -webkit-background-size: 300px auto;\r
-       -moz-background-size: 300px auto;\r
-       -ms-background-size: 300px auto;\r
-       -o-background-size: 300px auto;\r
-       background-size: 300px auto;\r
 }\r
 \r
-header div#logo h1 {\r
+header.pageHeader menu.topMenu ul {\r
+       \r
+}\r
+\r
+header.pageHeader menu.topMenu ul li, header.pageHeader menu.topMenu ul li a {\r
+       color: #69c;\r
+       text-shadow: 0 -1px 0 #000;\r
+}\r
+\r
+header.pageHeader menu.topMenu ul li a:hover {\r
+       color: #fff;\r
+}\r
+\r
+/* Logo */\r
+\r
+header.pageHeader div#logo {\r
+       position: relative;\r
+       z-index: 1;\r
+       margin: 0 23px 0;\r
+}\r
+\r
+header.pageHeader div#logo h1 {\r
        color: #d8e7f5;\r
        text-shadow: 0 -1px 0 #000;\r
-       font-size: 160%;\r
+       font-size: 150%;\r
        position: relative;\r
-       top: 45px;\r
+       top: 70px;\r
 }\r
 \r
-header div#logo a:hover {\r
+header.pageHeader div#logo a:hover {\r
        color: #d8e7f5;\r
        text-decoration: none !important;\r
 }\r
 \r
-header div#logo img {\r
-       float: left;\r
+header.pageHeader div#logo img {\r
+       position: absolute;\r
+       left: 0;\r
+       bottom: 20px;\r
 }\r
 \r
-header div#logo a {\r
+header.pageHeader div#logo a {\r
        display: block;\r
-       height: 115px;\r
+       height: 120px;\r
        text-align: right;\r
 }\r
 \r
-/* -- -- -- -- -- Main Menu -- -- -- -- --  */\r
+/* Main Menu  */\r
 \r
 menu.mainMenu {\r
-       margin: 0 7px -7px;\r
-       background-color: rgba(0, 0, 0, .5);\r
+       margin: 0 30px -7px;\r
+       background-color: rgba(0, 0, 0, .4);\r
        border-radius: 5px 5px 0 0;\r
        display: inline-block;\r
+       position: relative;\r
 }\r
 \r
 menu.mainMenu:after {\r
@@ -107,7 +148,7 @@ menu.mainMenu:after {
 menu.mainMenu li {\r
        font-size: 105%;\r
        font-weight: normal;\r
-       color: #ccc;\r
+       color: #69c;\r
        text-shadow: 0 -1px 0 #000;\r
        border-radius: 5px 5px 0 0;\r
        cursor: pointer;\r
@@ -155,13 +196,14 @@ menu.mainMenu li.activeMenuItem {
        z-index: 10;\r
 }\r
 \r
-/* -- -- -- -- -- Header Navigation -- -- -- -- --  */\r
+/* Header Navigation  */\r
 \r
 nav.headerNavigation {\r
        display: block;\r
        background-color: #e7f2fd;\r
        border-bottom: 1px solid #bcd;\r
        border-radius: 3px 3px 0 0;\r
+       margin: 0 23px;\r
        padding: 3px 7px;\r
        position: relative;\r
 }\r
@@ -180,6 +222,8 @@ nav.headerNavigation ul li {
        float: right;\r
 }\r
 \r
+\r
+\r
 /* -- -- -- -- -- Main -- -- -- -- -- */\r
 \r
 div.main {\r
@@ -193,6 +237,8 @@ div.main > div {
        display: table-row;\r
 }\r
 \r
+\r
+\r
 /* -- -- -- -- -- Content -- -- -- -- -- */\r
 \r
 div#content {\r
@@ -208,6 +254,8 @@ div#content {
        width: 100%;\r
 }\r
 \r
+\r
+\r
 /* -- -- -- -- -- Sidebar -- -- -- -- -- */\r
 \r
 aside.sidebar {\r
@@ -217,7 +265,7 @@ aside.sidebar {
        padding: 0 !important;\r
 }\r
 \r
-/* -- -- -- -- -- Sidebar Menu -- -- -- -- -- */\r
+/* Sidebar Menu */\r
 \r
 nav.sidebarMenu {\r
        white-space: nowrap;\r
@@ -249,7 +297,7 @@ nav.sidebarMenu div.menuContainer h1 {
        font-size: 130%;\r
        font-weight: bold;\r
        margin-top: 5px;\r
-       padding: 7px 7px 7px 35px;\r
+       padding: 7px 15px 7px 35px;\r
        position: relative;\r
 }\r
 \r
@@ -271,6 +319,8 @@ nav.sidebarMenu div.menuContainer ul li.activeMenuItem a {
        font-weight: bold;\r
 }\r
 \r
+\r
+\r
 /* -- -- -- -- -- Footer -- -- -- -- --  */\r
 \r
 footer {\r
@@ -305,29 +355,23 @@ footer p.copyright {
        min-height: 40px;\r
 }\r
 \r
+footer p.copyright a {\r
+       text-shadow: 0 -1px 0 #000;\r
+}\r
+\r
 footer p.copyright a:hover {\r
        color: #69c;\r
        text-decoration: none;\r
 }\r
 \r
+/* Footer Navigation */\r
 \r
-\r
-\r
-\r
-\r
-footer nav#navigationFooter {\r
-       float: right;\r
-}\r
-\r
-footer nav#navigationFooter a span {\r
-       display: none;\r
+footer nav.footerNavigation {\r
+       \r
 }\r
 \r
-footer nav#navigationFooter ul li {\r
+footer nav.footerNavigation ul li {\r
        display: inline-block;\r
-}\r
-\r
-footer .toTopLink {\r
        float: right;\r
 }\r
 \r
@@ -393,7 +437,9 @@ div.ui-widget-overlay {
        top: 0;\r
 }\r
 \r
-/* -- -- -- -- -- Headlines -- -- -- -- -- */\r
+\r
+\r
+/* -- -- -- -- -- Headings -- -- -- -- -- */\r
 \r
 div.mainHeadline {\r
        height: 48px;\r
@@ -430,6 +476,8 @@ h3.subHeadline {
        padding: 7px;\r
 }\r
 \r
+\r
+\r
 /* -- -- -- -- -- Fieldsets -- -- -- -- -- */\r
 \r
 fieldset {\r
@@ -456,6 +504,8 @@ fieldset > ul li {
        list-style-type: circle;\r
 }\r
 \r
+\r
+\r
 /* -- -- -- -- -- Forms -- -- -- -- -- */\r
 \r
 div.formElement {\r
@@ -514,6 +564,8 @@ div.formGroupField div.formField label {
        border-width: 0 !important;\r
 }\r
 \r
+\r
+\r
 /* -- -- -- -- -- Tables -- -- -- -- -- */\r
 \r
 table {\r
@@ -605,6 +657,8 @@ tr.container-2 td {
        background-color: #eee;\r
 }\r
 \r
+\r
+\r
 /* -- -- -- -- -- Page Navigation -- -- -- -- -- */\r
 \r
 .pageNavigation ul li {\r
@@ -636,6 +690,8 @@ tr.container-2 td {
        vertical-align: middle;\r
 }\r
 \r
+\r
+\r
 /* -- -- -- -- -- Large Buttons -- -- -- -- -- */\r
 \r
 div.largeButtons {\r
@@ -761,6 +817,8 @@ fieldset legend ~ p {
        margin-bottom: 14px;\r
 }\r
 \r
+\r
+\r
 /* -- -- -- -- -- Tabbed Content -- -- -- -- -- */\r
 \r
 dl {\r
@@ -790,7 +848,6 @@ dl.disabled dt {
 \r
 \r
 \r
-\r
 /* -- -- -- -- -- Taken from jQuery UI @ themes/base/jquery.ui.tabs.css -- -- -- -- -- */\r
 \r
 .ui-tabs {\r

diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 3b0dfbbf5692325df4066d5ec889cffa975e3c44..6406b3917809a9a161d3a053991ec9f071fde4b5 100644 (file)
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -66,17 +66,30 @@
 <body id="tpl{$templateName|ucfirst}">\r
        <!-- HEADER -->\r
        <a id="top"></a>\r
-       <header>\r
+       <header class="pageHeader"\r
                \r
-               <!-- top panel -->\r
-               <!-- /top panel -->\r
+               <!-- top menu -->\r
+               <menu id="topMenu" class="topMenu">\r
+                       <div>\r
+                               <ul>\r
+                                       <li>Hello Luzifer!</li>\r
+                               </ul>\r
+                       </div>\r
+               </menu>\r
+               <!-- /top menu -->\r
                \r
                <!-- logo -->\r
-               <div id="logo">\r
+               <div id="logo" class="logo">\r
+                       <!-- clickable area -->\r
                        <a href="index.php{@SID_ARG_1ST}">\r
                                <h1>WoltLab Community Framework 2.0 Pre-Alpha 1</h1>\r
-                               <!--<img src="{@RELATIVE_WCF_DIR}acp/images/wcfLogo.svg" alt="Product-logo" title="WoltLab Community Framework 2.0 Pre-Alpha 1" />-->\r
+                               <img src="{@RELATIVE_WCF_DIR}acp/images/wcfLogoWhite.svg" width="300" height="58" alt="Product-logo" title="WoltLab Community Framework 2.0 Pre-Alpha 1" />\r
                        </a>\r
+                       <!-- /clickable area -->\r
+                       \r
+                       <!-- search area -->\r
+                       \r
+                       <!-- /search area -->\r
                </div>\r
                <!-- /logo -->\r
                \r

diff --git a/wcfsetup/install/files/icon/arrowDownS.png b/wcfsetup/install/files/icon/arrowDownS.png
index b9a13d20c0932b737d91de354efc85ff53b3f5a9..75dea71a8c995cb3c292302479ca4d6734a899c2 100644 (file)
Binary files a/wcfsetup/install/files/icon/arrowDownS.png and b/wcfsetup/install/files/icon/arrowDownS.png differ

diff --git a/wcfsetup/install/files/icon/arrowRightS.png b/wcfsetup/install/files/icon/arrowRightS.png
index 3f1ab1f164d3f5a72849ddca853bc90a683c67e0..1aa447c06ddc3bbec5452b6c7542dc6ddb56a100 100644 (file)
Binary files a/wcfsetup/install/files/icon/arrowRightS.png and b/wcfsetup/install/files/icon/arrowRightS.png differ

diff --git a/wcfsetup/install/files/icon/deleteS.png b/wcfsetup/install/files/icon/deleteS.png
old mode 100755 (executable)
new mode 100644 (file)
index 7016ef5..ef94228
Binary files a/wcfsetup/install/files/icon/deleteS.png and b/wcfsetup/install/files/icon/deleteS.png differ

diff --git a/wcfsetup/install/files/icon/downS.png b/wcfsetup/install/files/icon/downS.png
index 8b68b9c0567a65e746710d178f83e134235d2be5..27740c039408656a219c8b9daf8647c243e818ef 100644 (file)
Binary files a/wcfsetup/install/files/icon/downS.png and b/wcfsetup/install/files/icon/downS.png differ

diff --git a/wcfsetup/install/files/icon/upS.png b/wcfsetup/install/files/icon/upS.png
index 5d7d2a69f56b71b06c41c3fa350ed3a39f6dfbee..d5b2bc6533c95fc39ea926e14e3b7e39542f7977 100644 (file)
Binary files a/wcfsetup/install/files/icon/upS.png and b/wcfsetup/install/files/icon/upS.png differ