From 8275431419f9fa8be5baebe457b1002ed2f2005d Mon Sep 17 00:00:00 2001 From: Luzifr Date: Mon, 10 Oct 2011 20:55:15 +0200 Subject: [PATCH] Some CSS-tweaks Top-menu tweaks; Attempt to globalize Dropdown-menus; Focus for table-heads. --- wcfsetup/install/files/acp/style/style.css | 180 +++++++++------------ wcfsetup/install/files/icon/dropDown2.svg | 19 +++ 2 files changed, 99 insertions(+), 100 deletions(-) create mode 100644 wcfsetup/install/files/icon/dropDown2.svg diff --git a/wcfsetup/install/files/acp/style/style.css b/wcfsetup/install/files/acp/style/style.css index 723171018b..c27a971f1b 100644 --- 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 index 0000000000..51fb3d0fde --- /dev/null +++ b/wcfsetup/install/files/icon/dropDown2.svg @@ -0,0 +1,19 @@ + + + + + + Dropdown + Dropdown Icon + + + + + + + + -- 2.20.1