Some CSS-tweaks

Top-menu tweaks; Attempt to globalize Dropdown-menus; Focus for
table-heads.

diff --git a/wcfsetup/install/files/acp/style/style.css b/wcfsetup/install/files/acp/style/style.css
index 723171018b2bc4a3f03afac2318cc6aacc597d33..c27a971f1b97cfce42e47c95569b1a244f6a42b7 100644 (file)
--- a/wcfsetup/install/files/acp/style/style.css
+++ b/wcfsetup/install/files/acp/style/style.css
@@ -139,8 +139,7 @@ header.pageHeader nav.topMenu {
        position: fixed;
        top: 0;
        right: 0;
-       left: 0;
-       min-height: 20px;
+       left: 0;        
        min-width: 800px;
        z-index: 500;
        
@@ -149,122 +148,90 @@ header.pageHeader nav.topMenu {
        -ms-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
        -o-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
        box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-}
-
-header.pageHeader nav.topMenu > div {
-       padding: 0 23px 0;
        
+       -webkit-transition: all .2s linear;
+       -moz-transition: all .2s linear;
+       -ms-transition: all .2s linear;
+       -o-transition: all .2s linear;
+       transition: all .2s linear;
 }
 
-header.pageHeader nav.topMenu ul li,
-header.pageHeader nav.topMenu ul li a {
-       text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
-       color: #69c;
-       padding-right: 3px;
-       padding-left: 3px;
-       display: inline-block;
+header.pageHeader nav.topMenu:hover {
+       background-color: rgba(0, 0, 0, .7);
 }
 
-header.pageHeader nav.topMenu li ul li:hover a {
-       color: #fff;
+header.pageHeader nav.topMenu > div {
+       padding: 0 23px 0;
 }
 
-/* Todo: Top Menu Dropdowns */
-
-nav.topMenu ul {
+header.pageHeader nav.topMenu > div > ul {
        position: relative;
-       display: inline-block;
+       display: table;
 }
 
-nav.topMenu ul li ul.dropdown {
-       color: #fff;
-       border-width: 0 1px 1px 1px;
-       border-style: solid;
-       border-color: rgba(255, 255, 255, .5);
-       border-radius: 0 0 5px 5px;
-       background-color: rgba(0, 0, 0, .7);
-       margin-top: 25px;
-       display: none;
-       position: absolute;
-       top: 0;
-       left: 0;
-       z-index: 500;
-       
-       -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);
-}
+/* ToDo: Top-Menu Dropdown Caption */
 
-nav.topMenu ul .dropdownCaption {
-       cursor: pointer;
-       padding: 6px; 
-       display: block !important;
+nav.topMenu > div > ul > li,
+nav.topMenu > div > ul > li a {
+       text-decoration: none;
+       text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
+       color: #69c !important;
+       display: table-cell;
 }
 
-nav.topMenu ul:hover .dropdownCaption {
-       color: #fff;
+nav.topMenu > div > ul > li:hover span.dropdownCaption,
+nav.topMenu > div > ul > li:hover span.dropdownCaption a {
+       text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
+       color: #fff !important;
        background-color: rgba(0, 0, 0, .7);
-       display: block !important;
 }
 
-nav.topMenu ul:hover .dropdownCaption ~ ul.dropdown {
-       display: block !important;
+nav.topMenu > div > ul > li > span {
+       padding: 6px;
 }
 
-nav.topMenu ul li ul.dropdown > li {
-       text-shadow: none;
-       color: #ccc;
-       cursor: pointer; 
-       padding: 5px 7px;
-       
-       -webkit-transition: all .1s linear;
-       -moz-transition: all .1s linear;
-       -ms-transition: all .1s linear;
-       -o-transition: all .1s linear;
-       transition: all .1s linear;
-}
-
-nav.topMenu ul li ul.dropdown > li a {
-       text-decoration: none;
-}
-
-nav.topMenu ul li ul.dropdown > li a:hover {
-       color: #fff;
+nav.topMenu ul li .dropdownCaption {
+       cursor: pointer;
+       background-image: url('../../icon/dropdown2.svg');
+       background-position: 97% center;
+       background-repeat: no-repeat;
+       padding-right: 15px !important;
+       display: table-cell;
 }
 
-.preInput .inputDropdown > li:first-child {
-       border-top-right-radius: 3px;
-}
+/* ToDo: Top-Menu Dropdown Tweaks */
 
-nav.topMenu ul li ul.dropdown > li:last-child {
-       border-bottom-left-radius: 3px;
-       border-bottom-right-radius: 3px;
+/* Auto-Opening Dropdowns */
+nav.topMenu ul:hover .dropdownCaption ~ .dropdown {
+       display: block !important;
 }
 
-nav.topMenu ul li ul.dropdown > li:hover {
-       color: #fff;
-       background-color: rgba(0, 0, 0, .5);
+nav.topMenu ul li .dropdown {
+       border-width: 0 1px 1px 1px;
+       border-radius: 0 0 5px 5px;
 }
 
-nav.topMenu ul li ul.dropdown > li:first-child {
+nav.topMenu ul li .dropdown > li:first-child {
        border-top-width: 0;
 }
 
 /* ToDo: Login Box */
-
 /* do not use the class ".loginBox" to style the box! */
+/* Note that the login-box is subject to changes */
 
 #loginBox {
-       /* background-color: rgba(0, 0, 0, .5); */
+       
 }
 
 #loginBox dl {
        margin-right: 20px;
 }
 
-
+#loginBox dl dt,
+#loginBox dl dd,
+#loginBox dl label {
+       color: #fff;
+}
 
 /* -- -- -- Logo -- -- -- */
 
@@ -1004,7 +971,7 @@ textarea {
 }
 
 .preInput > input,
-.preInput > textarea { /* ToDo: Textarea solution is not really perfect */
+.preInput > textarea { /* ToDo: The textarea solution is not so nice */
        border-radius: 0 3px 3px 0;
        margin: 0 !important;
        display: table-cell;
@@ -1012,7 +979,7 @@ textarea {
        min-width: 300px;
 }
 
-/* Button */
+/* Dropdown Caption */
 
 .preInput .dropdownCaption {
        letter-spacing: -1px;
@@ -1037,11 +1004,15 @@ textarea {
        padding-right: 10px;
 }
 
-/* Dropdown */
 
-.preInput .dropdown {
+
+/* ############## ToDo: Dropdown Global ############## */
+
+.dropdown {
        color: #fff;
-       border: 1px solid rgba(255, 255, 255, .7);
+       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;
@@ -1060,7 +1031,7 @@ textarea {
 
 /* Dropdown Items */
 
-.preInput .dropdown > li {
+.dropdown > li {
        text-shadow: none;
        color: #ccc;
        cursor: pointer; 
@@ -1073,20 +1044,34 @@ textarea {
        transition: all .1s linear;
 }
 
-.preInput .dropdown > li:first-child {
+.dropdown > li:first-child {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
 }
 
-.preInput .dropdown > li:last-child {
+.dropdown > li:last-child {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
 }
 
-.preInput .dropdown > li.divider {
+.dropdown > li:hover,
+.dropdown > li.active {
+       color: #fff;
+       background-color: rgba(0, 0, 0, .5);
+}
+
+.dropdown > li.divider:not(:first-child) {
        border-top: 1px solid rgba(255, 255, 255, .7);
 }
 
+.dropdown > li a {
+       text-decoration: none;
+}
+
+.dropdown > li a:hover {
+       color: #fff !important;
+}
+
 .preInput .dropdown > li.missingValue {
        /* color: #990; */
        background-image: url('../../icon/systemWarning.svg');
@@ -1096,16 +1081,6 @@ textarea {
        /* background-color: #ffd; */
 }
 
-.preInput .dropdown > li:hover,
-.preInput .dropdown > li.active {
-       color: #fff;
-       background-color: rgba(0, 0, 0, .5);
-}
-
-.preInput .dropdown > li:first-child {
-       border-top-width: 0;
-}
-
 
 
 /* ############## Large Buttons ############## */
@@ -1516,8 +1491,9 @@ thead th:hover a {
        background-color: rgba(0, 0, 0, .2);
 }
 
+thead th a:active,
+thead th a:focus,
 thead th.active a {
-       font-weight: bold;
        color: #fff;
        background-color: rgba(0, 0, 0, .1);
        
@@ -1528,6 +1504,10 @@ thead th.active a {
        box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
 }
 
+thead th.active a {
+       font-weight: bold;
+}
+
 thead th.active:hover a {
        background-color: rgba(0, 0, 0, .3);
 }

diff --git a/wcfsetup/install/files/icon/dropDown2.svg b/wcfsetup/install/files/icon/dropDown2.svg
new file mode 100644 (file)
index 0000000..51fb3d0
--- /dev/null
+++ b/wcfsetup/install/files/icon/dropDown2.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>\r
+<!--<?xml-stylesheet type="text/css" href="svg.css"?>-->\r
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="7px" height="9px" viewBox="0 0 7 9" xml:space="preserve">\r
+       \r
+       <title>Dropdown</title> \r
+       <desc>Dropdown Icon</desc> \r
+       \r
+       <!--\r
+               @author         Harald Szekely \r
+               @copyright      2011 WoltLab GmbH \r
+               @license        GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> \r
+       --> \r
+       \r
+       <g id="IconDropdown">\r
+               <path class="Upper" style="fill-rule: evenodd; clip-rule: evenodd; fill: #000;" d="M7,4.9980469l-3.5,3l-3.4995117-3H7z M7,2.9980469L3.5,0L0.0004883,2.9980469H7z"/>\r
+               <path class="Lower" style="fill-rule: evenodd; clip-rule: evenodd; fill: #fff;" d="M7,4.9980469V6L3.5,8.9980469l-3.4995117-3v-1H7z M7,4V2.9980469L3.5,1L0.0004883,2.9980469V4H7z"/>\r
+       </g>\r
+</svg>\r