From 88e58036b4ba823a09827d778dfdf5c8165208ab Mon Sep 17 00:00:00 2001 From: Luzifr Date: Wed, 21 Sep 2011 15:55:43 +0200 Subject: [PATCH] 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. --- wcfsetup/install/files/acp/style/testing.css | 237 ++++++++++++++++++- 1 file changed, 233 insertions(+), 4 deletions(-) diff --git a/wcfsetup/install/files/acp/style/testing.css b/wcfsetup/install/files/acp/style/testing.css index b465069e4f..903f5c2d5d 100644 --- 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; -- 2.20.1