From 6ec7a6f405a7250960519a97d8f226946805770f Mon Sep 17 00:00:00 2001 From: Luzifr Date: Tue, 26 Jul 2011 20:18:22 +0200 Subject: [PATCH] More ACP design updates Tables, buttons and form elements now with more design (some experimental). Beware that table HTML-layout may change soon! Also changed some language variables. --- wcfsetup/install/files/acp/style/testing.css | 642 ++++++++++++------ .../install/files/acp/templates/header.tpl | 2 +- .../files/acp/templates/setupWindowHeader.tpl | 1 + .../install/files/acp/templates/userList.tpl | 6 +- .../files/acp/templates/userSearch.tpl | 15 +- wcfsetup/install/lang/de-informal.xml | 4 +- wcfsetup/install/lang/de.xml | 4 +- 7 files changed, 438 insertions(+), 236 deletions(-) diff --git a/wcfsetup/install/files/acp/style/testing.css b/wcfsetup/install/files/acp/style/testing.css index e9ff653a54..049d5bbb29 100644 --- a/wcfsetup/install/files/acp/style/testing.css +++ b/wcfsetup/install/files/acp/style/testing.css @@ -7,7 +7,7 @@ -/* -- -- -- -- -- Miscellaneous -- -- -- -- -- */ +/* -- -- -- -- -- Globals -- -- -- -- -- */ * { text-overflow: ellipsis; @@ -40,11 +40,11 @@ a:hover { text-decoration: underline; } -section#content a { +#content a { color: #999; } -section#content a:hover { +#content a:hover { color: #333; } @@ -386,68 +386,6 @@ footer nav.footerNavigation ul li { -div.wcfDimensions { - display: inline-block; -} - -div.overlayLoading { - background-color: #fff; - background-image: url("../../images/spinner.gif"); - background-position: center center; - background-repeat: no-repeat; -} - -div.ui-dialog { - border: 10px solid rgba(0,0,0,.2); - border-radius: 15px; - display: inline-block !important; - width: auto !important; - min-width: 80px; -} - -div.ui-dialog-content p { - background-color: #fff; - padding: 7px; -} - -div.ui-dialog-titlebar { - background-color: #ccc; - border-bottom: 5px solid rgba(0,0,0,.6); - padding: 7px; - position: relative; -} - -span.ui-dialog-title { - color: #fff; - text-shadow: 5px 0 0 #000; -} - -a.ui-dialog-titlebar-close { - background-image: url("../../icon/deleteM.png"); - background-position: top left; - background-repeat: no-repeat; - height: 24px; - position: absolute !important; - right: -16px; - top: -16px; - width: 24px; -} - -a.ui-dialog-titlebar-close span { - display: none; - visibility: hidden; -} - -div.ui-widget-overlay { - background-color: #000; - left: 0; - opacity: .6; - position: fixed; - top: 0; -} - - - /* -- -- -- -- -- Headings -- -- -- -- -- */ /* Main Heading */ @@ -471,7 +409,7 @@ div.ui-widget-overlay { } .mainHeading > hgroup h1 { - border-bottom: 1px solid #999; + border-bottom: 1px solid #ccc; color: #999; text-shadow: 0 1px 0 #fff; font-size: 140%; @@ -480,7 +418,7 @@ div.ui-widget-overlay { } .mainHeading > hgroup h2 { - color: #ccc; + color: #999; font-size: 100%; font-weight: normal; padding-top: 5px; @@ -542,6 +480,7 @@ div.formElement { div.formFieldLabel { float: left; + padding-top: 5px; text-align: right; width: 230px; } @@ -564,18 +503,213 @@ div.formGroupField div.formField label { display: block; } +.formSubmit { + text-align: center; +} + +input[type='reset'], +input[type='submit'], +input[type='checkbox'], +input[type='radio'], +select { + cursor: pointer; +} + /* Form Elements */ -input { +input[type='text'], +input[type='password'], +input[type="search"] { + padding: 5px 3px; +} + +input[type='text'], +input[type='password'], +input[type="search"], +textarea { border: 1px solid #ccc; + + border-radius: 3px; + + -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1); + -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1); + -ms-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1); + -o-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1); + box-shadow: inset 0 0 5px rgba(0, 0, 0, .1); +} + +input[type='text']:hover, +input[type='password']:hover, +input[type="search"]:hover, +textarea:hover { + background-color: #fffff6; + border: 1px solid #69c; +} + +input[type='text']:active, +input[type='password']:active, +input[type="search"]:active, +textarea:active, +input[type='text']:focus, +input[type="search"]:focus, +textarea:focus { + background-color: #fffff6; + border: 1px solid #69c; + + -webkit-box-shadow: 0 0 5px rgba(102, 153, 204, 1), inset 0 0 5px rgba(102, 153, 204, .7); + -moz-box-shadow: 0 0 5px rgba(102, 153, 204, 1), inset 0 0 5px rgba(102, 153, 204, .7); + -ms-box-shadow: 0 0 5px rgba(102, 153, 204, 1), inset 0 0 5px rgba(102, 153, 204, .7); + -o-box-shadow: 0 0 5px rgba(102, 153, 204, 1), inset 0 0 5px rgba(102, 153, 204, .7); + box-shadow: 0 0 5px rgba(102, 153, 204, 1), inset 0 0 5px rgba(102, 153, 204, .7); } -input:hover { - border: 1px solid #369; + + + + + + + + + + + + + +/* -- -- -- -- -- Large Buttons -- -- -- -- -- */ + +.largeButtons { + text-align: right; } +.largeButtons ul li { + display: inline; +} +.largeButtons ul li a { + font-size: 90%; + color: #666 !important; +} +input[type='reset'], +input[type='submit'], +.largeButtons ul li a { + background-color: #fefefe; + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#eee)); + background-image: -moz-linear-gradient(0% 0% 270deg, #fefefe, #eee); + background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#eee)); + background-image: -o-linear-gradient(#fefefe, #eee); + background-image: linear-gradient(#fefefe, #eee); + + border: 1px solid #ccc; + border-radius: 30px; + color: #666; + display: inline-block; + padding: 5px 13px; + text-shadow: 0 1px 0 #fff; +} + +input[type='reset']:hover, +input[type='submit']:hover, +.largeButtons ul li a:hover { + background-color: #fefefe; + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#fefefe)); + background-image: -moz-linear-gradient(0% 0% 270deg, #eee, #fefefe); + background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#fefefe)); + background-image: -o-linear-gradient(#eee, #fefefe); + background-image: linear-gradient(#eee, #fefefe); + + color: #333; + text-decoration: none; +} + +@-webkit-keyframes glowLargeButtons { + 0% { + -webkit-box-shadow: 0 0 13px rgba(102, 153, 204, .3); + } + 100% { + -webkit-box-shadow: 0 0 13px rgba(102, 153, 204, .05); + } +} +@-moz-keyframes glowLargeButtons { + 0% { + -moz-box-shadow: 0 0 13px rgba(102, 153, 204, .3); + } + 100% { + -moz-box-shadow: 0 0 13px rgba(102, 153, 204, .05); + } +} + +input[type='submit'], +.largeButtons ul li.default a { + background-color: #69c; + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#d8e7f5)); + background-image: -moz-linear-gradient(0% 0% 270deg, #fff, #d8e7f5); + background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#d8e7f5)); + background-image: -o-linear-gradient(#fff, #d8e7f5); + background-image: linear-gradient(#fff, #d8e7f5); + + border: 1px solid #69c; + color: #369; + + -webkit-box-shadow: 0 0 10px #369; + -moz-box-shadow: 0 0 10px #369; + -ms-box-shadow: 0 0 10px #369; + -o-box-shadow: 0 0 10px #369; + box-shadow: 0 0 10px #369; + + -webkit-animation-name: glowLargeButtons; + -webkit-animation-duration: 1s; + -webkit-animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + -webkit-animation-timing-function: ease-in-out; + + -moz-animation-name: glowLargeButtons; + -moz-animation-duration: 1s; + -moz-animation-iteration-count: infinite; + -moz-animation-direction: alternate; + -moz-animation-timing-function: ease-in-out; + + -ms-animation-name: glowLargeButtons; + -ms-animation-duration: 1s; + -ms-animation-iteration-count: infinite; + -ms-animation-direction: alternate; + -ms-animation-timing-function: ease-in-out; + + -o-animation-name: glowLargeButtons; + -o-animation-duration: 1s; + -o-animation-iteration-count: infinite; + -o-animation-direction: alternate; + -o-animation-timing-function: ease-in-out; + + animation-name: glowLargeButtons; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + animation-timing-function: ease-in-out; +} + +input[type='submit']:hover, +.largeButtons ul li.default a:hover { + background-color: #69c; + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d8e7f5), to(#fff)); + background-image: -moz-linear-gradient(0% 0% 270deg, #d8e7f5, #fff); + background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(#d8e7f5), to(#fff)); + background-image: -o-linear-gradient(#d8e7f5, #fff); + background-image: linear-gradient(#d8e7f5, #fff); + + color: #036; +} + +.largeButtons ul li a img { + vertical-align: middle; + margin: 0; +} + + + + +/* ToDo */ .border { border: 1px solid #ccc; @@ -584,18 +718,41 @@ input:hover { } .borderMarginRemove { - border-radius: 0 0 5px 5px; margin-top: 0; } .titleBarPanel { - background-color: #eee; - border-radius: 5px 5px 0 0; + background-color: #369; + border-top-left-radius: 5px; + border-top-right-radius: 5px; border-bottom-width: 0; + color: #fff; + /* margin-bottom: -10px; without "bordermarginremove"! */ margin-bottom: 0; padding: 7px; } +.titleBarPanel a { + color: #fff; + text-decoration: none; +} + +.subTabMenu { + background-color: #369; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + border-bottom-width: 0; + color: #fff; + margin-top: 15px !important; + margin-bottom: -14px !important; + padding: 7px; +} + +.subTabMenu a { + color: #fff !important; + text-decoration: none; +} + .tabMenuContent, .content { border-width: 0 !important; @@ -603,74 +760,89 @@ input:hover { -/* -- -- -- -- -- Tables -- -- -- -- -- */ +/* -- -- -- -- -- ToDo: Tables -- -- -- -- -- */ table { - border-radius: 0 0 5px 5px; width: 100% !important; } +/* Table Header */ + +thead th:first-child { + border-top-left-radius: 5px; +} + +thead th:last-child { + border-top-right-radius: 5px; +} + th { - background-color: #fefefe; - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#eee)); - background-image: -moz-linear-gradient(0% 0% 270deg, #fefefe, #eee); - background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#eee)); - background-image: -o-linear-gradient(#fefefe, #eee); - background-image: linear-gradient(#fefefe, #eee); + background-color: rgba(51, 51, 51, .7); + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#000)); + background-image: -moz-linear-gradient(0% 0% 270deg, #333, #000); + background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#000)); + background-image: -o-linear-gradient(#333, #000); + background-image: linear-gradient(#666, #000); border-right: 1px solid #fff; border-bottom: 1px solid #fff; - padding: 7px; + + font-size: 87%; +} + +th:last-child { + border-right-width: 0; +} + +th:hover { + background-color: rgba(51, 51, 51, 1); } th.active { - background-color: #faebd7; - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#faebd7), to(#fa0)); - background-image: -moz-linear-gradient(0% 0% 270deg, #faebd7, #fa0); - background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(#faebd7), to(#fa0)); - background-image: -o-linear-gradient(#faebd7, #fa0); - background-image: linear-gradient(#faebd7, #fa0); + background-color: rgba(51, 51, 51, 1); } th.active:hover { - background-color: #fa0; - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fa0), to(#faebd7)); - background-image: -moz-linear-gradient(0% 0% 270deg, #fa0, #faebd7); - background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(#fa0), to(#faebd7)); - background-image: -o-linear-gradient(#fa0, #faebd7); - background-image: linear-gradient(#fa0, #faebd7); + background-color: rgba(51, 51, 51, 1); } -th:hover { - background-color: #fefefe; - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#fefefe)); - background-image: -moz-linear-gradient(0% 0% 270deg, #eee, #fefefe); - background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#fefefe)); - background-image: -o-linear-gradient(#eee, #fefefe); - background-image: linear-gradient(#eee, #fefefe); +th a, th .emptyHead { + color: #69c !important; + text-shadow: 0 -1px 0 #000; + display: block; + text-decoration: none !important; + padding: 5px 7px; } -th:last-child { - border-right-width: 0; +th a:hover { + color: #fff !important; } -th { - font-size: 85%; +th.active a { + font-weight: bold; + color: #fff !important; } -th a { - color: #999; - display: block; - text-decoration: none; +/* Table Body */ + +tbody tr { + border-bottom: 1px solid #fff; } -th a:hover { - color: #333 !important; - text-shadow: 0 1px 0 #fff; - text-decoration: none !important; +tbody tr:last-child { + border-bottom-width: 0; +} + +tbody tr:last-child td:first-child { + border-bottom-left-radius: 5px; +} + +tbody tr:last-child td:last-child { + border-bottom-right-radius: 5px; } td { + background-color: #fcfdfe; border-right: 1px solid #fff; padding: 5px; } @@ -679,33 +851,47 @@ td:last-child { border-right-width: 0; } -tbody tr { - border-bottom: 1px solid #fff; +tr:nth-child(2n+1) td { + background-color: #f2f6fa; } -tbody tr:last-child { - border-bottom-width: 0; +tr:hover td { + background-color: #d8e7f5; } -tr.container-1:hover td, -tr.container-2:hover td { - background-color: #ddd; +/* Special */ + +.subTabMenu ~ .border { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; } -tr.container-1 td { - background-color: #fefefe; +.subTabMenu ~ .border thead th:first-child { + border-top-left-radius: 0 !important; } -tr.container-2 td { - background-color: #eee; +.subTabMenu ~ .border thead th:last-child { + border-top-right-radius: 0 !important; +} + +.subTabMenu ~ .border thead th:first-child, +.titleBarPanel ~ .border thead th:first-child { + border-top-left-radius: 0 !important; } +.subTabMenu ~ .border thead th:last-child, +.titleBarPanel ~ .border thead th:last-child { + border-top-right-radius: 0 !important; +} -/* -- -- -- -- -- Page Navigation -- -- -- -- -- */ + + +/* -- -- -- -- -- ToDo: Page Navigation -- -- -- -- -- */ .pageNavigation ul li { display: inline-block; + border-radius: 3px; } .pageNavigation ul li:not(.skip) { @@ -735,63 +921,91 @@ tr.container-2 td { -/* -- -- -- -- -- Large Buttons -- -- -- -- -- */ +/* -- -- -- -- -- System Notifications -- -- -- -- -- */ -nav.largeButtons { - text-align: right; +p.info, +p.error, +p.success, +p.warning { + border-radius: 7px; + margin-bottom: 14px; + padding: 7px 14px; } -nav.largeButtons ul li { - display: inline; +p.info { + background-color: #def; + border: 1px solid #06f; } -input[type='reset'], -input[type='submit'], -nav.largeButtons ul li a { - background-color: #fefefe; - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#eee)); - background-image: -moz-linear-gradient(0% 0% 270deg, #fefefe, #eee); - background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#eee)); - background-image: -o-linear-gradient(#fefefe, #eee); - background-image: linear-gradient(#fefefe, #eee); - - border: 1px solid #ccc; - border-radius: 30px; - display: inline-block; - padding: 5px 13px; +p.success { + background-color: #efe; + border: 1px solid #090; } -input[type='reset']:hover, -input[type='submit']:hover, -nav.largeButtons ul li a:hover { - background-color: #fefefe; - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#fefefe)); - background-image: -moz-linear-gradient(0% 0% 270deg, #eee, #fefefe); - background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#fefefe)); - background-image: -o-linear-gradient(#eee, #fefefe); - background-image: linear-gradient(#eee, #fefefe); - - text-decoration: none; +p.error { + background-color: #fee; + border: 1px solid #c00; } -nav.largeButtons ul li a img { - vertical-align: middle; - margin: 0; +p.warning { + background-color: #ffd; + border: 1px solid #660; } -.formSubmit { - text-align: center; + + + +#actionProxyLoading { + background-color: #faebd7; + border: 1px solid #f80; + border-top-width: 0; + border-radius: 0 0 5px 5px; + left: 43%; + padding: 7px 21px 7px; + position: fixed; + top: 0; } -input[type='reset'], -input[type='submit'] { - cursor: pointer; +fieldset legend ~ p { + margin-bottom: 14px; +} + + + +/* -- -- -- -- -- Tabbed Content -- -- -- -- -- */ + +dl { + clear: both; + margin-bottom: 7px; +} + +dt { /* is op */ + float: left; + text-align: right; + width: 230px; +} + +dd { + margin-left: 250px; +} + +dl dd ~ p { + color: #777; + font-size: 90%; + margin: 3px 0 7px 250px; } +dl.disabled dt { + color: #777; +} + + +/* ToDo: Installation */ + div#packageInstallationDialogContainer { background-color: #fefefe; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#eee)); @@ -836,82 +1050,68 @@ div#ajaxExceptionStacktrace { -/* -- -- -- -- -- System Notifications -- -- -- -- -- */ - -p.info, -p.error, -p.success, -p.warning { - border-radius: 7px; - margin-bottom: 14px; - padding: 7px 14px; -} -p.info { - background-color: #def; - border: 1px solid #06f; -} -p.success { - background-color: #efe; - border: 1px solid #090; -} +/* ToDo */ -p.error { - background-color: #fee; - border: 1px solid #c00; +div.wcfDimensions { + display: inline-block; } -p.warning { - background-color: #ffd; - border: 1px solid #660; +div.overlayLoading { + background-color: #fff; + background-image: url("../../images/spinner.gif"); + background-position: center center; + background-repeat: no-repeat; } - - - -#actionProxyLoading { - background-color: #faebd7; - border: 1px solid #f80; - border-top-width: 0; - border-radius: 0 0 5px 5px; - left: 43%; - padding: 7px 21px 7px; - position: fixed; - top: 0; +div.ui-dialog { + border: 10px solid rgba(0,0,0,.2); + border-radius: 15px; + display: inline-block !important; + width: auto !important; + min-width: 80px; } -fieldset legend ~ p { - margin-bottom: 14px; +div.ui-dialog-content p { + background-color: #fff; + padding: 7px; } - - -/* -- -- -- -- -- Tabbed Content -- -- -- -- -- */ - -dl { - clear: both; - margin-bottom: 7px; +div.ui-dialog-titlebar { + background-color: #ccc; + border-bottom: 5px solid rgba(0,0,0,.6); + padding: 7px; + position: relative; } -dt { /* is op */ - float: left; - text-align: right; - width: 230px; +span.ui-dialog-title { + color: #fff; + text-shadow: 5px 0 0 #000; } -dd { - margin-left: 250px; +a.ui-dialog-titlebar-close { + background-image: url("../../icon/deleteM.png"); + background-position: top left; + background-repeat: no-repeat; + height: 24px; + position: absolute !important; + right: -16px; + top: -16px; + width: 24px; } -dl dd ~ p { - color: #777; - font-size: 90%; - margin: 3px 0 7px 250px; +a.ui-dialog-titlebar-close span { + display: none; + visibility: hidden; } -dl.disabled dt { - color: #777; +div.ui-widget-overlay { + background-color: #000; + left: 0; + opacity: .6; + position: fixed; + top: 0; } @@ -953,7 +1153,7 @@ dl.disabled dt { border: 1px solid #ccc; border-bottom-width: 0; - + border-top-left-radius: 3px; border-top-right-radius: 3px; diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl index 39d24d99ce..756daa7129 100644 --- a/wcfsetup/install/files/acp/templates/header.tpl +++ b/wcfsetup/install/files/acp/templates/header.tpl @@ -129,7 +129,7 @@ {* work-around for unknown core-object during WCFSetup *} {if PACKAGE_ID} {foreach from=$__wcf->getACPMenu()->getMenuItems('') item=parentMenuItem} -