First version of button/drop-down styles in front of input fields

This is experimental at the moment! Also included min-widths for
text-input fields.

diff --git a/wcfsetup/install/files/acp/style/testing.css b/wcfsetup/install/files/acp/style/testing.css
index b465069e4f8d29e5155403d449fcad619c9e3317..903f5c2d5d2f9f9e955ffd80314e20aef6241283 100644 (file)
--- a/wcfsetup/install/files/acp/style/testing.css
+++ b/wcfsetup/install/files/acp/style/testing.css
@@ -839,7 +839,8 @@ textarea[disabled='disabled'] {
 /* Widths */
 
 textarea {
-       width: 95%;
+       width: 99%;
+       min-width: 300px;
 }
 
 .tiny {
@@ -848,19 +849,249 @@ textarea {
 
 .short {
        width: 10%;
+       min-width: 100px;
 }
 
 .medium {
        width: 50%;
+       min-width: 200px;
 }
 
 .long {
-       width: 95%;
+       width: 99%;
+       min-width: 300px;
 }
 
 .auto {
        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 .preInputDropdown {
+       position: absolute;
+       left: 0;
+       top: 25px;
+       z-index: 500;
+       display: none;
+}
+
+.preInput:hover .dropdownCaption ~ .preInputDropdown {
+       display: block !important;
+}
+
+.preInput .preInputDropdown {
+       color: #fff;
+       border: 1px solid rgba(255, 255, 255, .7);
+       border-radius: 5px;
+       background-color: rgba(0, 0, 0, .7);
+       margin-top: 25px;
+       position: absolute;
+       top: 0;
+       left: 0;
+       
+       -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 .preInputDropdown > li {
+       text-shadow: none;
+       color: #ccc;
+       cursor: pointer; 
+       padding: 5px 7px;
+       
+       -webkit-transition: all .2s linear;
+       -moz-transition: all .2s linear;
+       -ms-transition: all .2s linear;
+       -o-transition: all .2s linear;
+       transition: all .2s linear;
+}
+
+.preInput .preInputDropdown > li:first-child {
+       border-top-left-radius: 3px;
+       border-top-right-radius: 3px;
+}
+
+.preInput .preInputDropdown > li:last-child {
+       border-bottom-left-radius: 3px;
+       border-bottom-right-radius: 3px;
+}
+
+.preInput .preInputDropdown > li:hover {
+       color: #fff;
+       background-color: rgba(0, 0, 0, .5);
+}
+
+.preInput .preInputDropdown > li:first-child {
+       border-top-width: 0;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+.preInput > input {
+       border-radius: 0 3px 3px 0;
+       margin: 0;
+       position: relative;
+       right: 0;
+       left: 0;
+       display: inline-block;
+}
+
+/* normal */
+.preInput .dropdownCaption {
+       font-size: 100%;
+       font-weight: bold;
+       text-decoration: none;
+       text-shadow: 0 1px 0 #fff;
+       color: #999;
+       cursor: pointer;
+       
+       border-width: 1px;
+       border-radius: 3px 0 0 3px;
+       border-style: solid;
+       border-color: #ccc #bbb #aaa;
+       
+       background-color: #fefefe;
+       background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+       background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+       background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+       background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+       background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+       
+       padding: 5px 10px;
+       display: inline-block;
+       
+       -webkit-transition: all .1s linear;
+       -moz-transition: all .1s linear;
+       -ms-transition: all .1s linear;
+       -o-transition: all .1s linear;
+       transition: all .1s linear;
+}
+
+/* hover */
+.preInput:hover .dropdownCaption {
+       color: #666;
+       border-width: 1px;
+       border-style: solid;
+       border-color: #ffc053 #fa2 #fc9e07;
+       
+       background-color: #fff9f4;
+       background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+}
+
+/* active */
+.preInput .dropdownCaption:focus,
+.preInput .dropdownCaption:active {
+       color: #333;
+       border-width: 1px;
+       border-style: solid;
+       border-color: #fc9e07 #fa2 #ffc053;
+       
+       background-color: #fff9f4;
+       background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       background-image: linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+       
+       -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+       -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+       -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+       -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+       box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 /* -- -- -- -- -- Large Buttons -- -- -- -- -- */
@@ -874,8 +1105,6 @@ textarea {
 }
 
 .largeButtons ul li a img {
-       /* ToDo: Button-icons disabled for now, maybe we get rid oft them
-       display: none; */
        margin: -5px 1px -5px -5px;
        height: 24px;
        width: 24px;