One more time dropdown-experiments …

diff --git a/wcfsetup/install/files/acp/style/testing.css b/wcfsetup/install/files/acp/style/testing.css
index 06d1b41cf69df55b7bf54badb9181e5d8f713e1a..9e8c85cbd6fdb1f29106d2dee0fecb81dd117ec8 100644 (file)
--- a/wcfsetup/install/files/acp/style/testing.css
+++ b/wcfsetup/install/files/acp/style/testing.css
@@ -156,9 +156,10 @@ 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;
+       display: block;
 }
 
-header.pageHeader nav.topMenu ul li a:hover {
+header.pageHeader nav.topMenu li ul li:hover a {
        color: #fff;
 }
 
@@ -996,87 +997,17 @@ textarea {
        width: auto;
 }
 
-/* Pre-Input Buttons & Dropdowns */
 
-.preInput {
-       position: relative;
-       white-space: nowrap;
-}
 
-.preInput:after {
-       content: '';
-       display: block;
-       clear: both;
-}
 
-.preInput .dropdownCaption {
-       margin-right: -1px;
-       float: left;
-}
 
-.preInput .dropdownCaption span {
-       background-image: url('../../icon/dropdown1.svg');
-       background-position: right center;
-       background-repeat: no-repeat;
-       margin-right: -5px;
-       padding-right: 10px;
-       white-space: nowrap;
-}
 
-.preInput .inputDropdown {
-       color: #fff;
-       border: 1px solid 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: 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);
-}
 
-.preInput:hover .dropdownCaption ~ .inputDropdown {
-       display: block !important;
-}
 
-.preInput .inputDropdown > 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;
-}
 
-.preInput .inputDropdown > li:first-child {
-       border-top-left-radius: 3px;
-       border-top-right-radius: 3px;
-}
 
-.preInput .inputDropdown > li:last-child {
-       border-bottom-left-radius: 3px;
-       border-bottom-right-radius: 3px;
-}
 
-.preInput .inputDropdown > li:hover {
-       color: #fff;
-       background-color: rgba(0, 0, 0, .5);
-}
 
-.preInput .inputDropdown > li:first-child {
-       border-top-width: 0;
-}
 
 
 
@@ -1088,9 +1019,22 @@ textarea {
 
 
 
+/* Input Buttons & Dropdowns */
+
+/* Input Button Area */
 
+.preInput {
+       position: relative;
+       white-space: nowrap;
+}
 
-.preInput > input {
+.preInput:after {
+       content: '';
+       display: block;
+       clear: both;
+}
+
+.preInput > input { /* ToDo: All this needed? */
        border-radius: 0 3px 3px 0;
        margin: 0;
        position: relative;
@@ -1099,6 +1043,24 @@ textarea {
        display: inline-block;
 }
 
+/* Input Button */
+
+.preInput .dropdownCaption {
+       margin-right: -1px;
+       float: left;
+}
+
+.preInput .dropdownCaption span { /* ToDo: Icon will be toggled by a class in the future! */
+       background-image: url('../../icon/dropdown1.svg');
+       background-position: right center;
+       background-repeat: no-repeat;
+       margin-right: -5px;
+       padding-right: 10px;
+       white-space: nowrap;
+}
+
+/* ToDo: Coloring classes copied from Buttons! */
+
 /* normal */
 .preInput .dropdownCaption {
        font-size: 100%;
@@ -1181,6 +1143,104 @@ textarea {
 
 
 
+/* Input Dropdown */
+
+.preInput .dropdown {
+       color: #fff;
+       border: 1px solid 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: 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);
+}
+
+.preInput:hover .dropdownCaption ~ .dropdown {
+       display: block !important;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* Dropdown Entries */
+
+.preInput .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;
+}
+
+.preInput .dropdown > li:first-child {
+       border-top-left-radius: 3px;
+       border-top-right-radius: 3px;
+}
+
+.preInput .dropdown > li:last-child {
+       border-bottom-left-radius: 3px;
+       border-bottom-right-radius: 3px;
+}
+
+.preInput .dropdown > li:hover {
+       color: #fff;
+       background-color: rgba(0, 0, 0, .5);
+}
+
+.preInput .dropdown > li:first-child {
+       border-top-width: 0;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -2653,7 +2713,21 @@ li > .badgeButton {
 
 
 
-/* CSS Experiments (active) */
+/* -- -- -- -- -- CSS Experiments (active) -- -- -- -- -- */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 /* Clipboard API - TESTING ONLY / TODO */
 
@@ -2736,4 +2810,17 @@ li > .badgeButton {
 }
 
 
+
+
+
+
+
+
+
+/* -- -- -- -- -- Global Button Color & Effect Library -- -- -- -- -- */
+
+
+
+
+
 /* -- -- -- -- -- EOF -- -- -- -- -- */