From: Luzifr Date: Thu, 22 Sep 2011 14:30:11 +0000 (+0200) Subject: Style changes (files/declarations) X-Git-Tag: 2.0.0_Beta_1~1781^2 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=e6f055e0c400825f77c7fa53c021c570b161c0d8;p=GitHub%2FWoltLab%2FWCF.git Style changes (files/declarations) Deleted unnecessary/old style-files; Renamed "testing.css" to "style.css"; We now use "style.css" in the front-end; Changed all style-sheet-links to "@import". --- diff --git a/com.woltlab.wcf/template/headInclude.tpl b/com.woltlab.wcf/template/headInclude.tpl index 8f1a73117e..2b7746d8ad 100644 --- a/com.woltlab.wcf/template/headInclude.tpl +++ b/com.woltlab.wcf/template/headInclude.tpl @@ -19,3 +19,21 @@ WCF.User.init({@$__wcf->user->userID}, '{@$__wcf->user->username|encodeJS}'); //]]> + +{* +{if $specialStyles|isset} + + {@$specialStyles} +{/if} +*} + + + diff --git a/wcfsetup/install/files/acp/style/extra/setupWindowStyle-rtl.css b/wcfsetup/install/files/acp/style/extra/setupWindowStyle-rtl.css deleted file mode 100644 index c5226c40b2..0000000000 --- a/wcfsetup/install/files/acp/style/extra/setupWindowStyle-rtl.css +++ /dev/null @@ -1,209 +0,0 @@ -/** - * Setup Window Styles (RTL) - * - * @author Arian Glander, Harald Szekely - * @copyright 2006-2011 WoltLab GmbH - */ - -/* -- -- -- -- -- Miscellaneous -- -- -- -- -- */ - -body { - color: #333; - font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; - font-size: .82em; - background-color: #fff; - margin: 0; - padding: 0; -} - -.inner { - padding: 0 20px 10px 20px; -} - -fieldset { - font-size: .82em; - border: 1px solid #8da4b7; - margin-bottom: 10px; - padding: 0; - border-radius: 5px; -} - -legend { - color: #164369; - font-size: 1em; - margin: 0 10px; - padding: 0 4px; -} - -fieldset p, fieldset div { - margin: 8px 0 0 0; - padding: 0; -} - -/* -- -- -- -- -- Forms -- -- -- -- -- */ - -form { - margin: 0; - padding: 0; -} - -label { - margin-bottom: 2px; - display: block; -} - -textarea, .inputText { - width: 99%; -} - -textarea, select, input[type="text"], input[type="password"] { - border-width: 1px; - border-style: solid; - border-color: #666 #999 #ccc #999; - background-color: #fafafa; - background-image: url("../../images/setupInputBackground.png"); - background-position: right top; - background-repeat: repeat-x; - padding: 2px; - min-height: 13px; - border-radius: 3px; -} - -textarea:focus, select:focus, .inputText:focus { - border: 1px solid #fa2; - background-color: #fff9f4; - background-image: url("../../images/setupInputBackground.png"); - background-repeat: repeat-x; - outline: 0; -} - -textarea, select, .inputText { - border: 1px solid #8da4b7; - background-color: #fafafa; -} - -textarea:focus, select:focus, .inputText:focus { - border: 1px solid #fa2; - background-color: #fff9f4; -} - -input[type="file"] { - width: 100%; -} - -textarea, select, input[type="text"], input[type="password"] { - padding: 2px; -} - -.select label { - margin-bottom: 5px; - padding-right: 25px; -} - -.select input { - float: right; -} - -.nextButton { - text-align: left; -} - -.disabled { - color: #b2b2b2; -} - -/* -- -- -- -- -- System Messages -- -- -- -- -- */ - -/* Success, Warning, Error */ - -.success, .warning, .error { - border-width: 1px; - border-style: solid; - background-position: 10px center; - background-repeat: no-repeat; - padding: 7px 45px 7px 10px; - border-radius: 5px; -} - -.success { - color: #090; - border-color: #090; - background-color: #efe; - background-image: url("../../../icon/successM.png"); -} - -.success a, .success a:hover { - color: #333; -} - -.warning { - color: #660; - border-color: #660; - background-color: #ffd; - background-image: url("../../../icon/warningM.png"); -} - -.warning a, .warning a:hover { - color: #333; -} - -.error { - color: #c00; - border-color: #c00; - background-color: #fee; - background-image: url("../../../icon/errorM.png"); -} - -.error a, .error a:hover { - color: #333; -} - -.errorField { - color: #c00; -} - -.errorField img { - vertical-align: middle; -} - -/* -- -- -- -- -- System Exception -- -- -- -- -- */ - -#systemException { - font-family: Verdana, Helvetica, sans-serif; - font-size: 1em; - border: 1px outset lightgrey; - background-color: lightgrey; - padding: 3px; -} - -#systemException div { - border: 1px inset lightgrey; - padding: 4px; -} - -#systemException h1 { - color: #fff; - font-size: 1.2em; - background-color: #154268; - margin: 0 0 3px 0; - padding: 4px; -} - -#systemException h2 { - font-size: 1.1em; - margin-bottom: 0; -} - -#systemException pre, #systemException p { - font-size: 1em; - margin: 0; -} - -#packageUrl { - text-decoration: underline; - border: none; - background: transparent; - padding: 0; -} - -/* -- -- -- -- -- EOF -- -- -- -- -- */ diff --git a/wcfsetup/install/files/acp/style/extra/setupWindowStyle.css b/wcfsetup/install/files/acp/style/extra/setupWindowStyle.css deleted file mode 100644 index 4d54a0efcd..0000000000 --- a/wcfsetup/install/files/acp/style/extra/setupWindowStyle.css +++ /dev/null @@ -1,209 +0,0 @@ -/** - * Setup Window Styles (LTR) - * - * @author Arian Glander, Harald Szekely - * @copyright 2006-2011 WoltLab GmbH - */ - -/* -- -- -- -- -- Miscellaneous -- -- -- -- -- */ - -body { - color: #333; - font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; - font-size: .82em; - background-color: #fff; - margin: 0; - padding: 0; -} - -.inner { - padding: 0 20px 10px 20px; -} - -fieldset { - font-size: .82em; - border: 1px solid #8da4b7; - margin-bottom: 10px; - padding: 0; - border-radius: 5px; -} - -legend { - color: #164369; - font-size: 1em; - margin: 0 10px; - padding: 0 4px; -} - -fieldset p, fieldset div { - margin: 8px 0 0 0; - padding: 0; -} - -/* -- -- -- -- -- Forms -- -- -- -- -- */ - -form { - margin: 0; - padding: 0; -} - -label { - margin-bottom: 2px; - display: block; -} - -textarea, .inputText { - width: 99%; -} - -textarea, select, input[type="text"], input[type="password"] { - border-width: 1px; - border-style: solid; - border-color: #666 #999 #ccc #999; - background-color: #fafafa; - background-image: url("../../images/setupInputBackground.png"); - background-position: left top; - background-repeat: repeat-x; - padding: 2px; - min-height: 13px; - border-radius: 3px; -} - -textarea:focus, select:focus, .inputText:focus { - border: 1px solid #fa2; - background-color: #fff9f4; - background-image: url("../../images/setupInputBackground.png"); - background-repeat: repeat-x; - outline: 0; -} - -textarea, select, .inputText { - border: 1px solid #8da4b7; - background-color: #fafafa; -} - -textarea:focus, select:focus, .inputText:focus { - border: 1px solid #fa2; - background-color: #fff9f4; -} - -input[type="file"] { - width: 100%; -} - -textarea, select, input[type="text"], input[type="password"] { - padding: 2px; -} - -.select label { - margin-bottom: 5px; - padding-left: 25px; -} - -.select input { - float: left; -} - -.nextButton { - text-align: right; -} - -.disabled { - color: #b2b2b2; -} - -/* -- -- -- -- -- System Messages -- -- -- -- -- */ - -/* Success, Warning, Error */ - -.success, .warning, .error { - border-width: 1px; - border-style: solid; - background-position: 10px center; - background-repeat: no-repeat; - padding: 7px 10px 7px 45px; - border-radius: 5px; -} - -.success { - color: #090; - border-color: #090; - background-color: #efe; - background-image: url("../../../icon/successM.png"); -} - -.success a, .success a:hover { - color: #333; -} - -.warning { - color: #660; - border-color: #660; - background-color: #ffd; - background-image: url("../../../icon/warningM.png"); -} - -.warning a, .warning a:hover { - color: #333; -} - -.error { - color: #c00; - border-color: #c00; - background-color: #fee; - background-image: url("../../../icon/errorM.png"); -} - -.error a, .error a:hover { - color: #333; -} - -.errorField { - color: #c00; -} - -.errorField img { - vertical-align: middle; -} - -/* -- -- -- -- -- System Exception -- -- -- -- -- */ - -#systemException { - font-family: Verdana, Helvetica, sans-serif; - font-size: 1em; - border: 1px outset lightgrey; - background-color: lightgrey; - padding: 3px; -} - -#systemException div { - border: 1px inset lightgrey; - padding: 4px; -} - -#systemException h1 { - color: #fff; - font-size: 1.2em; - background-color: #154268; - margin: 0 0 3px 0; - padding: 4px; -} - -#systemException h2 { - font-size: 1.1em; - margin-bottom: 0; -} - -#systemException pre, #systemException p { - font-size: 1em; - margin: 0; -} - -#packageUrl { - text-decoration: underline; - border: none; - background: transparent; - padding: 0; -} - -/* -- -- -- -- -- EOF -- -- -- -- -- */ diff --git a/wcfsetup/install/files/acp/style/style.css b/wcfsetup/install/files/acp/style/style.css new file mode 100644 index 0000000000..87e82f16cf --- /dev/null +++ b/wcfsetup/install/files/acp/style/style.css @@ -0,0 +1,2883 @@ +/** + * ACP Testing Styles + * + * @author Harald Szekely + * @copyright 2011 WoltLab GmbH + */ + +/* -- -- -- -- -- Reset -- -- -- -- -- */ + +/** + * Parts taken from + * http://meyerweb.com/eric/tools/css/reset/ + * v2.0 | 20110126 + * License: none (public domain) + * modifyed to meet the needs of WoltLab + */ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} + + + +/* -- -- -- -- -- Globals -- -- -- -- -- */ + +* { + text-overflow: ellipsis; +} + +body { + font-family: 'Trebuchet MS', Arial, sans-serif; + font-size: 80%; + color: #666; + line-height: 1; + background-color: #29374a; +} + +img { + vertical-align: middle !important; +} + +a { + color: #369; + text-decoration: none; + + -webkit-transition: color .1s linear; + -moz-transition: color .1s linear; + -ms-transition: color .1s linear; + -o-transition: color .1s linear; + transition: color .1s linear; +} + +a:hover { + text-decoration: underline; + color: #036; +} + +a.externalURL { + background-image: url('../../icon/externalURL.svg'); + background-position: right center; + background-repeat: no-repeat; + padding-right: 17px; +} + +hr { + display: none; +} + +.invisible { + position: absolute; + left: -9000px; + top: -9000px; +} + +.separated { + margin-top: 13px; +} + + + +/* -- -- -- -- -- Page Header -- -- -- -- -- */ + +header.pageHeader { + /* Disabled, because the WoltLab header-image is not LGPL + Activate it if you want to test your own header image */ + /* background-image: url('../images/header.png'); */ + background-position: left top; + background-repeat: repeat-x; + min-width: 800px; + width: 100%; +} + +/* Top Menu */ + +header.pageHeader nav.topMenu { + border-bottom: 1px solid rgba(0, 0, 0, .1); + background-color: rgba(0, 0, 0, .4); + position: fixed; + top: 0; + right: 0; + left: 0; + min-height: 20px; + min-width: 800px; + z-index: 500; + + -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3); + -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3); + -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; + +} + +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 li ul li:hover a { + color: #fff; +} + + + + + + + +/* ToDo */ + + +/* Todo: Top Menu Dropdowns */ + +nav.topMenu .dropdownCaption { + cursor: pointer; +} + +nav.topMenu ul { + position: relative; + display: inline-block; +} + +nav.topMenu ul li ul.dropdown { + color: #fff; + border: 1px solid rgba(255, 255, 255, .5); + border-radius: 0 5px 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); +} + +nav.topMenu ul span.dropdownCaption { + display: block !important; + padding: 6px; +} + +nav.topMenu ul:hover span.dropdownCaption { + color: #fff; + background-color: rgba(0, 0, 0, .7); + display: block !important; +} + +nav.topMenu ul:hover span.dropdownCaption ~ ul.dropdown { + display: block !important; +} + +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; +} + +.preInput .inputDropdown > li:first-child { + border-top-right-radius: 3px; +} + +nav.topMenu ul li ul.dropdown > li:last-child { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; +} + +nav.topMenu ul li ul.dropdown > li:hover { + color: #fff; + background-color: rgba(0, 0, 0, .5); +} + +nav.topMenu ul li ul.dropdown > li:first-child { + border-top-width: 0; +} + + + + + + + + + + + +/* Todo */ + + + + + + + + + + + + + + + + + + + + + + + + + + +/* Logo */ + +header.pageHeader div#logo { + margin: 0 23px 0; + position: relative; + z-index: 1; +} + +header.pageHeader div#logo h1 { + font-size: 150%; + text-shadow: 0 -1px 0 #000; + color: #d8e7f5; + position: relative; + top: 70px; +} + +header.pageHeader div#logo a:hover { + text-decoration: none !important; + color: #d8e7f5; +} + +header.pageHeader div#logo img { + position: absolute; + bottom: 10px; + left: 0; +} + +header.pageHeader div#logo > a, +header.pageHeader div#logo > div { + text-align: right; + display: block; + height: 110px; +} + +/* Main Menu */ + +nav.mainMenu { + /* This is the general toggle switch for main menu orientation (options: left|center|right) */ + text-align: left; + margin: 0 30px; + display: block; + position: relative; + bottom: -7px; /* closes the gap between tabs and menu bar */ +} + +nav.mainMenu:after { + content: ''; + display: block; + clear: both; +} + +nav.mainMenu ul { + border-top-left-radius: 5px; + border-top-right-radius: 5px; + background-color: rgba(0, 0, 0, .4); + display: inline-block; +} + +nav.mainMenu ul li { + font-size: 123%; + font-weight: normal; + text-shadow: 0 -1px 0 #000; + color: #69c; + cursor: pointer; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + margin: 5px 0 0; + padding: 10px 20px; + display: inline-block; + position: relative; + top: -7px; + z-index: 1; + + -webkit-transition-property: border, background-color, background-image, color; + -webkit-transition-duration: .3s; + -webkit-transition-timing-function: ease; + + -moz-transition-property: border, background-color, background-image, color; + -moz-transition-duration: .3s; + -moz-transition-timing-function: ease; + + -ms-transition-property: border, background-color, background-image, color; + -ms-transition-duration: .3s; + -ms-transition-timing-function: ease; + + -o-transition-property: border, background-color, background-image, color; + -o-transition-duration: .3s; + -o-transition-timing-function: ease; + + transition-property: border, background-color, background-image, color; + transition-duration: .3s; + transition-timing-function: ease; +} + +nav.mainMenu ul li:hover { + color: #fff; +} + +nav.mainMenu ul li.activeMenuItem { + text-shadow: 0 1px 0 #fff; + font-size: 150%; + font-weight: bold; + color: #369; + + background-color: #e7f2fd; + background-image: -webkit-linear-gradient(#fff, #e7f2fd); + background-image: -moz-linear-gradient(#fff, #e7f2fd); + background-image: -ms-linear-gradient(#fff, #e7f2fd); + background-image: -o-linear-gradient(#fff, #e7f2fd); + background-image: linear-gradient(#fff, #e7f2fd); + + z-index: 10; +} + +nav.mainMenu ul li.activeMenuItem:first-child { + margin: 5px -5px -5px 0; +} + +nav.mainMenu ul li.activeMenuItem:last-child { + margin: 5px 0 -5px -5px; +} + +nav.mainMenu ul li:only-child, +nav.mainMenu ul li.activeMenuItem:only-child { + cursor: default !important; + margin: 5px 0 -5px; +} + +/* Header Navigation */ + +nav.headerNavigation { + background-color: #e7f2fd; + border-bottom: 1px solid #bcd; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + margin: 0 23px; + display: block; + position: relative; + min-width: 800px; +} + +nav.headerNavigation:after { + content: ''; + display: block; + clear: both; +} + +nav.headerNavigation > div { + padding: 3px 7px; +} + +nav.headerNavigation > div:after { + content: ''; + display: block; + clear: both; +} + +nav.headerNavigation ul { + display: block; +} + +nav.headerNavigation ul li { + float: right; +} + +#tplLogin header.pageHeader nav.headerNavigation ul li.toBottomLink { + /* removes the to-bottom-link on the log-in page */ + position: absolute; + left: -9000px; + top: -9000px; + width: 0; +} + + + +/* -- -- -- -- -- Main -- -- -- -- -- */ + +div.main { + margin: 0 23px; + min-width: 800px; +} + + + +/* -- -- -- -- -- Content -- -- -- -- -- */ + +section.content { + background-color: #fff; + display: table-cell; + padding: 25px 40px; + position: relative; + width: 100%; + z-index: 100; + vertical-align: top; +} + +div.main > div section:only-child { + display: block !important; + width: auto; +} + +section.content .content { + border: 1px solid #ccc; + background-color: rgba(0, 0, 0, .01); + padding: 13px 23px 23px; +} + + + +/* -- -- -- -- -- Content Header & Footer -- -- -- -- -- */ + +.contentHeader, +.contentFooter { + margin-top: 15px; +} + + + +/* -- -- -- -- -- Sidebar -- -- -- -- -- */ + +aside.sidebar { + border-right: 1px solid #bcd; + background-color: #d8e7f5; + margin: 0 !important; + padding: 0 !important; + display: table-cell; + position: relative; + vertical-align: top; + + -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); +} + +/* Sidebar Menu */ + +nav.sidebarMenu { + white-space: nowrap; + padding-bottom: 20px; +} + +nav.sidebarMenu > div { + text-shadow: 0 1px 0 #fff; + color: #69c; + position: relative; +} + +nav.sidebarMenu > div a:hover { + text-decoration: none !important; + color: #369; +} + +nav.sidebarMenu > div h1 { + cursor: pointer; + font-size: 130%; + font-weight: bold; + color: #369; + background-image: url('../../icon/closed.svg'); + background-position: 15px center; + background-size: 16px; + background-repeat: no-repeat; + margin-top: 5px; + padding: 7px 25px 7px 35px; + position: relative; +} + +nav.sidebarMenu > div h1.activeMenuItem { + background-image: url('../../icon/opened.svg'); +} + +nav.sidebarMenu > div ul li { + font-size: 110%; +} + +nav.sidebarMenu > div ul li a { + text-shadow: 0 1px 0 #fff; + color: #69c; + padding: 5px 25px 7px 35px; + display: block; +} + +nav.sidebarMenu > div ul li.activeMenuItem { + background-color: #fff; + margin-right: -1px; + overflow: hidden; + + -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1); + -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1); + -ms-box-shadow: 0 0 5px rgba(0, 0, 0, .1); + -o-box-shadow: 0 0 5px rgba(0, 0, 0, .1); + box-shadow: 0 0 5px rgba(0, 0, 0, .1); +} + +nav.sidebarMenu > div ul li.activeMenuItem a { + font-weight: bold; + color: #369; +} + + + +/* -- -- -- -- -- Page Footer -- -- -- -- -- */ + +footer.pageFooter { + text-align: center; + padding: 0 23px; + clear: both; + position: relative; + min-width: 800px; +} + +footer.pageFooter:after { + content: ''; + display: block; + clear: both; +} + +footer.pageFooter > div { + border-top: 1px solid #bcd; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + background-color: #e7f2fd; + padding: 3px 7px; + clear: both; +} + +footer.pageFooter > div:after { + content: ''; + display: block; + clear: both; +} + +footer.pageFooter .copyright { + padding-top: 20px; + display: inline-block; + min-height: 40px; +} + +footer.pageFooter .copyright a { + text-shadow: 0 -1px 0 #000; +} + +footer.pageFooter .copyright a:hover { + text-decoration: none; + color: #69c; +} + +/* Footer Navigation */ + +footer.pageFooter nav.footerNavigation ul li { + display: inline-block; + float: right; +} + +#tplLogin footer.pageFooter nav.footerNavigation ul li.toTopLink { + /* removes the to-top-link on the log-in page */ + position: absolute; + left: -9000px; + top: -9000px; + width: 0; +} + + + +/* -- -- -- -- -- Headings -- -- -- -- -- */ + +/* Main Heading */ + +.mainHeading { + position: relative; +} + +.mainHeading img { + position: absolute; + top: 0; + left: 0; + width: 48px; + height: 48px; +} + +.mainHeading > hgroup { + padding-left: 60px; + min-height: 56px; +} + +.mainHeading > hgroup h1 { + font-size: 175%; + font-weight: bold; + text-shadow: 0 1px 0 #fff; + color: #666; + border-bottom: 1px solid #999; + padding-bottom: 10px; +} + +.mainHeading > hgroup h2 { + font-size: 100%; + font-weight: normal; + color: #999; + padding-top: 5px; +} + +.mainHeading > hgroup p { + padding-top: 3px; +} + +/* Sub Heading */ + +.subHeading h1 { + font-size: 150%; + text-shadow: 0 1px 0 #fff; + color: #999; + border-bottom: 1px solid #ccc; + margin: 10px 0; + padding: 10px 0; +} + + + +/* -- -- -- -- -- Fieldsets -- -- -- -- -- */ + +fieldset { + border: 1px solid #ccc; + border-radius: 7px; + background-color: rgba(0, 0, 0, .015); + margin: 15px 0 0; + padding: 15px; +} + +fieldset:last-child, fieldset:only-child { + margin-bottom: 7px !important; +} + +/* experimental +fieldset.topLink { + background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px); + background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px); + background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px); + background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px); + background-image: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px); +} +*/ + +fieldset legend { + color: #999; + padding: 0 7px 0; +} + +fieldset legend ~ p { + margin-bottom: 14px; +} + +fieldset p.description { + font-size: 90%; + color: #999; +} + + + +/* -- -- -- -- -- Tabbed Content -- -- -- -- -- */ + +/* Simple */ + +dl { + margin-bottom: 7px; + clear: both; + position: relative; +} + +dl > dt { + text-align: right; + color: #69c; + margin-top: 5px; /* not so nice */ + float: left; + width: 230px; +} + +dl > dt > label { + margin-top: 5px; + display: block; +} + +dl.disabled > dt { + color: #777; +} + +dl > dd { + margin-left: 250px; + padding-top: 5px; +} + +dl > dd > small { + font-size: 85%; + color: #999; + margin: 3px 0 7px; + display: block; +} + +/* Nested */ + +dl > dd > fieldset { + margin-top: 0; + margin-bottom: 0; +} + +dl > dd > fieldset > legend { + display: none; +} + +dl > dd > fieldset > dl > dt { + margin-right: 20px; + width: 150px; +} + +dl > dd > fieldset > dl > dd { + margin-left: 0; +} + +dl > dd > fieldset > dl > dd > label { + display: block; +} + +/* Reversed */ + +dt.reversed { + text-align: left; + margin-top: 2px; + position: absolute; + left: 270px; + width: auto; +} + +dt.reversed ~ dd > input[type='checkbox'] { + margin-left: 0; +} + +/* Special (experimental) + +fieldset dl > dd { + margin-left: 235px; + padding-top: 5px; +} + +fieldset dt.reversed { + left: 255px; +} +*/ + + + +/* -- -- -- -- -- Forms -- -- -- -- -- */ + +/* Globals */ + +label { + color: #69c; +} + +/* Structure */ + +.formSubmit { + text-align: center; + margin-top: 15px; +} + +input[type='checkbox'] ~ small, +input[type='radio'] ~ small { + margin-top: 0; + margin-left: 21px; +} + +/* Form Elements */ + +input[type='reset'], +input[type='submit'], +input[type='button'], +input[type='checkbox'], +input[type='radio'], +select { + cursor: pointer; +} + +input[type='text'], +input[type='search'], +input[type='email'], +input[type='password'] { + padding: 5px 3px; +} + +/* inputs normal */ +input[type='text'], +input[type='search'], +input[type='email'], +input[type='password'], +textarea { + border-width: 1px; + border-style: solid; + border-color: #999 #ccc #eee; + border-radius: 3px; + background-color: #fff; + + -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1); + -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1); + -ms-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1); + -o-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1); + box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1); + + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} + +/* inputs hover */ +input[type='text']:hover, +input[type='search']:hover, +input[type='email']:hover, +input[type='password']:hover, +textarea:hover { + border: 1px solid #fa2; + background-color: #fff9f4; +} + +/* inputs active */ +input[type='text']:active, +input[type='search']:active, +input[type='email']:active, +input[type='password']:active, +textarea:active, +input[type='text']:focus, +input[type='search']:focus, +input[type='email']:focus, +input[type='password']:focus, +textarea:focus { + border: 1px solid #fa2; + background-color: #fff9f4; + outline: none; + + -webkit-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2); + -moz-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2); + -ms-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2); + -o-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2); + box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2); +} + +/* inputs read only */ +input[type='text'][readonly='readonly'], +input[type='search'][readonly='readonly'], +input[type='email'][readonly='readonly'], +input[type='password'][readonly='readonly'], +textarea[readonly='readonly'] { + border-style: solid; + border-color: #ccc #ddd #eee; + background-color: transparent; + + -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05); + -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05); + -ms-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05); + -o-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05); + box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05); +} + +/* inputs read only */ +input[type='text'][disabled='disabled'], +input[type='search'][disabled='disabled'], +input[type='email'][disabled='disabled'], +input[type='password'][disabled='disabled'], +textarea[disabled='disabled'] { + border-style: solid; + border-color: rgba(0, 0, 0, .5); + background-color: rgba(255, 255, 255, .5); +} + +/* Widths */ + +textarea { + width: 99%; + min-width: 300px; +} + +.tiny { + width: 100px; +} + +.short { + width: 10%; + min-width: 100px; +} + +.medium { + width: 50%; + min-width: 200px; +} + +.long { + width: 99%; + min-width: 300px; +} + +.auto { + width: auto; +} + + + + + + + + + + + + + + + + + + + + + + + +/* Input Buttons & Dropdowns */ + +/* Input Button Area */ + +/* ToDo: Change the class-name! */ + +.preInput { + position: relative; + white-space: nowrap; +} + +.preInput:after { + content: ''; + display: block; + clear: both; +} + +.preInput > input { /* ToDo: All this needed? */ + border-radius: 0 3px 3px 0; + margin: 0; + position: relative; + right: 0; + left: 0; + 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 { + cursor: pointer; + + border-radius: 3px 0 0 3px; + padding: 5px 10px; + display: inline-block; +} + + + + + + + + + + + + + + + +/* 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); +} + +/* Show/hide will be done by Javascript now! +.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; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +/* -- -- -- -- -- Large Buttons -- -- -- -- -- */ + +/* Colors are being taken from the global color styles */ + +.largeButtons { + text-align: right; +} + +.largeButtons ul li { + display: inline; +} + +.largeButtons ul li a img { + margin: -5px 1px -5px -5px; + height: 24px; + width: 24px; + vertical-align: middle; +} + +/* buttons normal */ +input[type='reset'], +input[type='submit'], +input[type='button'], +.largeButtons ul li a { + font-size: 100%; + font-weight: bold; + + border-radius: 30px; + + margin: 3px 2px; + padding: 5px 13px; + display: inline-block; +} + + + +/* -- -- -- -- -- Border -- -- -- -- -- */ + +.border { + border: 1px solid #ccc; + border-radius: 5px; + margin-top: 15px; +} + +.border.overlay { + margin-top: 0 !important; +} + +/* -- -- -- -- -- Box Title -- -- -- -- -- */ + +.boxTitle { + border-radius: 7px; + background-color: #369; + /* Disabled, because the WoltLab header-image is not LGPL + Activate it if you want to test your own header image */ + /* background-image: url('../images/header.png'); */ + background-position: left top; + background-repeat: repeat-x; + + -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1); + -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1); + -ms-box-shadow: 0 0 5px rgba(0, 0, 0, .1); + -o-box-shadow: 0 0 5px rgba(0, 0, 0, .1); + box-shadow: 0 0 5px rgba(0, 0, 0, .1); +} + +.boxTitle > hgroup { + text-shadow: 0 -1px 0 #000; + color: #fff; + padding: 7px; + display: inline-block; +} + +.boxTitle > hgroup a, .boxTitle > a { + text-decoration: none; + color: #fff; +} + +.boxTitle > hgroup h1 { + display: inline-block; +} + +.boxTitle > hgroup h2 { + font-size: 85%; + color: rgba(255, 255, 255, .9); + margin-top: 5px; +} + +.boxTitle img.handle { + cursor: pointer; + margin-top: -1px; + float: right !important; + height: 16px; + width: 16px; +} + + + +/* -- -- -- -- -- Tab Menu -- -- -- -- -- */ + +/* Parts taken from jQuery UI @ themes/base/jquery.ui.tabs.css */ + +/* Tab Menu */ + +.tabMenu { + text-shadow: 0 1px 0 #fff; + /* This is the general toggle switch for tab menu orientation (options: left|center|right) */ + text-align: center; + white-space: nowrap; + background-color: none; + margin-top: 15px; + padding: 0 5px; + display: block; + position: relative; +} + +.tabMenu:after { + content: ''; + display: block; + clear: both; +} + +.tabMenu li { + white-space: nowrap; + list-style: none; + display: inline-block; +} + +.tabMenu li a { + font-size: 110%; + text-decoration: none; + color: #999; + cursor: pointer; + padding: 10px 15px 7px; + border-width: 1px 1px 0 1px; + border-style: solid; + border-color: #ddd; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + background-color: rgba(0, 0, 0, .05); + display: inline-block; + position: relative; + bottom: -1px; + z-index: 10; + max-width: 200px; + overflow: hidden; +} + +.tabMenu li:not(.ui-state-active) a:hover { + color: #666; + border-width: 1px; + border-style: solid; + border-color: #fa2 #fa2 #ccc; + background-color: #fff9f4; +} + +.tabMenu li:not(.ui-state-active) a:active, +.tabMenu li:not(.ui-state-active) a:focus { + border-width: 1px; + border-style: solid; + border-color: #fa2 #fa2 #ccc; + + -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); +} + +.tabMenu li.ui-state-active a { + font-size: 130%; + font-weight: bold; + color: #333 !important; + border-width: 1px; + border-style: solid; + border-color: #ccc; + border-bottom-color: #fff; + background-color: rgba(255, 255, 255, 1); + bottom: 0; + z-index: 30; +} + +.tabMenu li.ui-state-active a, +.tabMenu li.ui-state-disabled a, +.tabMenu li.ui-state-processing a { + cursor: default; +} + +/* Tab Menu Content */ + +.tabMenuContent { + border: 1px solid #ccc; + background-color: rgba(255, 255, 255, 1); + margin-top: -1px; + padding: 15px 23px; + display: block; + position: relative; + z-index: 20; /* Prevents border overlay during transition */ +} + +/* ToDo: 2x hidden? */ + +.ui-tabs .ui-tabs-hide { + display: none !important; +} + +.ui-helper-hidden { + display: none; +} + +.ui-helper-hidden-accessible { + position: absolute !important; + clip: rect(1px 1px 1px 1px); + clip: rect(1px,1px,1px,1px); +} + + + +/* -- -- -- -- -- Menu -- -- -- -- -- */ + +.menu { + color: #666; + border-bottom: 1px solid #ccc; + margin: -15px -23px 0; + padding: 0 7px 10px; +} + +.tabMenuContent > .menu { + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); + background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); + background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); + background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); +} + +.menu ul { + /* This is the general toggle switch for menu orientation (options: left|center|right) */ + text-align: center; +} + +.menu ul li { + white-space: nowrap; + margin-top: 10px; + display: inline-block; +} + +.menu ul li a { + font-size: 85%; + text-shadow: 0 1px 0 #fff; + text-decoration: none; + color: #999; + border: 1px solid rgba(0, 0, 0, .2); + border-radius: 13px; + background-color: rgba(255, 255, 255, .5); + padding: 2px 10px; + + -webkit-transition: color .1s linear; + -moz-transition: color .1s linear; + -ms-transition: color .1s linear; + -o-transition: color .1s linear; + transition: color .1s linear; +} + +.menu ul li:not(.ui-state-active) a:hover { + color: #333; + border-width: 1px; + border-style: solid; + border-color: #fa2; + background-color: rgba(255, 249, 244, 1); +} + +.menu ul li:not(.ui-state-active) a:active, +.menu ul li:not(.ui-state-active) a:focus { + -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); +} + +.menu ul li.ui-state-active a { + font-weight: bold; + text-shadow: 0 1px 0 #000; + color: #fff; + cursor: default; + border: 1px solid rgba(0, 0, 0, .2); + background-color: rgba(0, 0, 0, .5); +} + +/* Special */ + +.boxTitle > .menu { + color: #fff; + border: none; + margin: 0 !important; + padding: 6px 7px !important; +} + +.boxTitle > .menu ul li { + margin-top: 0; +} + +.boxTitle > .menu ul li a { + font-size: 85%; + text-decoration: none; + text-shadow: 0 -1px 0 #000; + color: #eee !important; + border: 1px solid rgba(0, 0, 0, .3); + border-radius: 13px; + background-color: rgba(0, 0, 0, .1); + padding: 2px 10px; + + -webkit-transition: color .1s linear; + -moz-transition: color .1s linear; + -ms-transition: color .1s linear; + -o-transition: color .1s linear; + transition: color .1s linear; +} + +.boxTitle > .menu ul li a:hover { + color: #fff !important; + border: 1px solid rgba(0, 0, 0, .3); + background-color: rgba(0, 0, 0, .2); +} + +.boxTitle > .menu ul li a:active, +.boxTitle > .menu ul li a:focus, +.boxTitle > .menu ul li.ui-state-active a { + border: 1px solid rgba(0, 0, 0, .5); + + -webkit-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5); + -moz-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5); + -ms-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5); + -o-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5); + box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5); +} + + + +/* -- -- -- -- -- ToDo: Tables -- -- -- -- -- */ + +/* Table */ + +table { + border-spacing: 0; + width: 100% !important; +} + +/* Table Header */ + +thead th { + font-size: 87%; + white-space: nowrap; +} + +thead th:first-child { + /* rounded corners for the first table header cell to the left */ + border-top-left-radius: 5px; +} + +thead th:last-child { + /* rounded corners for the last table header cell to the left */ + border-top-right-radius: 5px; +} + +thead th { + text-shadow: 0 -1px 0 #000; + color: #69c; + border-right: 1px solid rgba(0, 0, 0, .2); + + background-color: rgba(0, 0, 0, .3); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)); + background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)); + background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)); + background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)); + + padding: 7px; +} + +thead th a { + text-shadow: 0 -1px 0 #000; + text-decoration: none !important; + color: #69c; + margin: -7px; + padding: 7px; + display: block; +} + +thead th:last-child a { + border-right-width: 0; +} + +thead th:hover a { + color: #fff; + background-color: rgba(0, 0, 0, .2); +} + +thead th.active a { + font-weight: bold; + color: #fff; + background-color: rgba(0, 0, 0, .1); + + -webkit-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4); + -moz-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4); + -ms-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4); + -o-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4); + box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4); +} + +thead th.active:hover a { + background-color: rgba(0, 0, 0, .3); +} + +thead th a img { + /* sort-icon orientation does not work */ + text-align: right; + /* negative margins to prevent table-cells from expanding when the sort-icon shows up */ + margin-top: -5px !important; + margin-bottom: -5px !important; +} + +/* Table Body */ + +tbody tr { + border-bottom: 1px solid rgba(255, 255, 255, .3); +} + +tbody tr:last-child { + /* no border for the last table row */ + border-bottom-width: 0; +} + +tbody tr:last-child td:first-child { + /* rounded corners for the last table cell to the left */ + border-bottom-left-radius: 5px; +} + +tbody tr:last-child td:last-child { + /* rounded corners for the last table cell to the right */ + border-bottom-right-radius: 5px; +} + +tbody td { + background-color: #fcfdfe; + border-right: 1px solid rgba(255, 255, 255, .3); + padding: 5px; + /* this is experimental - only works in combination with "table-layout: fixed;" */ + word-wrap: break-word; +} + +tbody td:last-child { + border-right-width: 0; +} + +tbody tr:nth-child(2n+1) td { + /* auto-colorer for every 2nd row */ + background-color: #f2f6fa; +} + +tbody tr:hover td { + background-color: #d8e7f5; +} + +/* ToDo: Table Specials */ + +/* +.menu ~ .border { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; +} +*/ + +.menu ~ .border thead th:first-child { + border-top-left-radius: 0 !important; +} + +.menu ~ .border thead th:last-child { + border-top-right-radius: 0 !important; +} + +.menu ~ .border thead th:first-child, +.boxTitle > table thead th:first-child { + border-top-left-radius: 0 !important; +} + +.menu ~ .border thead th:last-child, +.boxTitle > table thead th:last-child { + border-top-right-radius: 0 !important; +} + +/* Table Column Formats */ + +tr .columnMark, +tr .columnStatus { + text-align: center; + width: 1% !important; + white-space: nowrap; +} + +tr .columnStatus .badge { + margin-right: 1px !important; + margin-left: 1px !important; +} + +tr .columnDigits, +tr .columnID { + text-align: right; + width: 1% !important; + white-space: nowrap; +} + +tr .columnIcon { + text-align: left; + width: 1% !important; + white-space: nowrap; +} + +tr .columnIcon img:not(.balloonTooltip):hover { + cursor: not-allowed; +} + +tr .columnIcon img { + height: 16px; + width: 16px; +} + +.bigList tr .columnIcon img { + height: 24px; + width: 24px; +} + +tr .columnTitle { + font-weight: bold; + text-align: left; +} + +tr .columnText { + font-weight: normal; + text-align: left; + max-width: 20%; +} + +tr .columnDate, +tr .columnRegistrationDate { + font-size: 85%; + text-align: right; + width: 1% !important; +} + +tr .columnURL { + font-size: 85%; + text-align: left; +} + +/* Table Checkboxes */ + +table input[type='checkbox'] { + margin-top: -5px !important; + margin-bottom: -5px !important; +} + + + +/* -- -- -- -- -- ToDo: Page Navigation -- -- -- -- -- */ + +/* Page-Navigation Popups are still missing */ + +.pageNavigation ul li:not(.children) { + border-radius: 3px; + + display: inline-block; + position: relative; +} + +.pageNavigation ul li.disabled { + cursor: not-allowed; + border: 1px solid rgba(0, 0, 0, .1) !important; + background-image: none !important; +} + +.pageNavigation ul li:after { + content: ''; + display: block; + clear: both; +} + +.pageNavigation ul li img { + height: 16px; + width: 16px; +} + +.pageNavigation ul li.skip { + padding: 2px 2px 1px 3px; + top: -1px; +} + +.pageNavigation ul li a { + text-shadow: 0 1px 0 #fff; + text-decoration: none; + color: #999; + display: inline-block; +} + +.pageNavigation ul li:not(.disabled):hover a { + color: #666; +} + +.pageNavigation ul li:not(.skip) a { + padding: 3px 5px; +} + +.pageNavigation ul li:active a, +.pageNavigation ul li:focus a { + color: #333; +} + +.pageNavigation ul li.active, +.pageNavigation ul li.active:hover { + text-shadow: 0 1px 0 #000 !important; + color: #fff !important; + border: 1px solid rgba(0, 0, 0, .3) !important; + + background-color: rgba(0, 0, 0, .5) !important; + background-image: -webkit-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important; + background-image: -moz-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important; + background-image: -o-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important; + background-image: -ms-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important; + background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important; + + padding: 3px 5px; +} + +/* ToDo: Children */ + +.pageNavigation ul li.children, +.pageNavigation ul li.children:hover, +.pageNavigation ul li.children:active, +.pageNavigation ul li.children:focus { + display: inline-block; +} + +.pageNavigation ul li.children img { + height: 9px; + width: 7px; +} + + + +/* -- -- -- -- -- System Notifications -- -- -- -- -- */ + +p.info, +p.error, +p.success, +p.warning { + text-shadow: 0 1px 0 #fff; + line-height: 1.5; + border-radius: 7px; + margin-top: 15px; + padding: 7px 15px 7px 50px; + + -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, .1); + -moz-box-shadow: 0 0 7px rgba(0, 0, 0, .1); + -ms-box-shadow: 0 0 7px rgba(0, 0, 0, .1); + -o-box-shadow: 0 0 7px rgba(0, 0, 0, .1); + box-shadow: 0 0 7px rgba(0, 0, 0, .1); + + -webkit-transition: all .1s linear; + -moz-transition: all .1s linear; + -ms-transition: all .1s linear; + -o-transition: all .1s linear; + transition: all .1s linear; +} + +p.info { + color: #68b; + border: 1px solid #9be; + background-color: #def; + background-image: url('../../icon/systemInfo.svg'); + background-size: 24px; + background-position: 13px center; + background-repeat: no-repeat; +} + +p.success { + color: #090; + border: 1px solid #0c0; + background-color: #efe; + background-image: url('../../icon/systemSuccess.svg'); + background-size: 24px; + background-position: 13px center; + background-repeat: no-repeat; +} + +p.warning { + color: #990; + border: 1px solid #cc0; + background-color: #ffd; + background-image: url('../../icon/systemWarning.svg'); + background-size: 24px; + background-position: 13px center; + background-repeat: no-repeat; +} + +p.error { + color: #c00; + border: 1px solid #f99; + background-color: #fee; + background-image: url('../../icon/systemError.svg'); + background-size: 24px; + background-position: 13px center; + background-repeat: no-repeat; +} + + + + + + + +/* ToDo: Installation */ + +div#packageInstallationDialogContainer { + padding: 20px; + height: 100%; + max-width: 600px; +} + +div#ajaxExceptionStacktrace { + white-space: nowrap; + overflow: scroll; + overflow-y: hidden; +} + +div#packageInstallationInnerContentContainer { + margin-top: 20px; + padding-top: 15px; +} + +div#packageInstallationInnerContent p.error { + border: 1px solid #ed1c24; + border-radius: 5px; + background-color: #fdd; + margin-bottom: 15px; + padding: 7px; +} + +div#ajaxExceptionStacktrace { + font-family: monospace; + font-size: 90%; + line-height: 1.2; + border: 1px solid #ccc; + padding: 3px; +} + + + + + +/* ToDo */ + +#actionProxyLoading { + border: 1px solid #f80; + border-top-width: 0; + border-radius: 0 0 5px 5px; + background-color: #faebd7; + padding: 7px 21px 7px; + position: fixed; + top: 0; + right: 20px; + z-index: 1000; +} + +#actionProxyLoading img { + height: 24px; + width: 24px; +} + +div.wcfDimensions { + display: inline-block; +} + +div.overlayLoading { + background-color: #fff; + background-image: url('../../icon/spinner.svg'); + 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-titlebar { + border-bottom: 5px solid rgba(0, 0, 0, .6); + background-color: #ccc; + padding: 7px; + position: relative; +} + +span.ui-dialog-title { + text-shadow: 5px 0 0 #000; + color: #fff; +} + +a.ui-dialog-titlebar-close { + background-image: url('../../icon/deleteM.png'); + background-position: top left; + background-repeat: no-repeat; + position: absolute !important; + top: -16px; + right: -16px; + width: 24px; + height: 24px; +} + +a.ui-dialog-titlebar-close span { + display: none; + visibility: hidden; +} + +div.ui-widget-overlay { + background-color: #000; + opacity: .6; + position: fixed; + top: 0; + left: 0; +} + + + +/* ToDo: Is all that really necessary? We wanted to support good browsers only */ + +.ui-helper-clearfix { + display: inline-block; +} + +/* Required comment for clearfix to work in Opera \*/ +* html .ui-helper-clearfix { + height: 1%; +} + +.ui-helper-clearfix { + display: block; +} + +/* end clearfix */ +.ui-helper-zfix { + opacity: 0; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; +} + +.ui-dialog { + background-color: rgba(255, 255, 255, .9); +} + + +/* -- -- -- -- -- Badges -- -- -- -- -- */ + +/* Globals */ + +.badge { + font-size: 85%; + text-shadow: none; + color: #666; + border-radius: 13px; + background-color: #fff; + margin-right: -3px; + margin-left: 3px; + padding: 1px 5px 2px; + display: inline-block; + position: relative; + top: -1px; +} + +/* Types */ + +.badgeNote { + border: 1px solid #ccc; +} + +.badgeInfo { + color: #68b; + border: 1px solid #9be; + background-color: #def; +} + +.badgeSuccess { + color: #090; + border: 1px solid #0c0; + background-color: #efe; +} + +.badgeWarning { + color: #990; + border: 1px solid #cc0; + background-color: #ffd; +} + +.badgeError { + color: #c00; + border: 1px solid #f99; + background-color: #fee; +} + +/* Buttons */ + +.badgeButton, +.clipboardEditor > ul > li { + cursor: pointer; + + border-radius: 30px; + + margin-right: 0; + margin-left: 0; + padding: 3px 10px 5px; + display: inline-block; +} + +li.badgeButton, +li > .badgeButton { + margin-top: 7px; + margin-right: 3px; + margin-left: 3px; + float: left; +} + +.badgeButton, +.badgeButton a, +.clipboardEditor > ul > li > span { + text-decoration: none !important; +} + + + +/* -- -- -- -- -- GUI Widgets -- -- -- -- -- */ + +/* Balloon Tooltips */ + +#balloonTooltip { + font-size: .85em; + color: #fff; + border: 1px solid rgba(255, 255, 255, .7); + border-radius: 5px; + background-color: rgba(0, 0, 0, .7); + padding: 5px 10px 7px; + max-width: 300px; + z-index: 900; + + box-shadow: 0 3px 7px rgba(0, 0, 0, .3); +} + +.balloonTooltip { + /* Not reliable, sometimes not wanted! */ + cursor: pointer; +} + +/* Collapsible */ + +.collapsible { + margin: 5px 0 0 10px; + float: left; +} + +.collapsible img { + height: 16px; + width: 16px; +} + + + +/* -- -- -- -- -- ToDo: Clipboard Editor -- -- -- -- -- */ + +.clipboardEditor { + +} + +.clipboardEditor > ul { + font-size: .85em; + margin: 6px 3px 0; + display: block; + position: relative; + float: left; +} + +.clipboardEditor > ul > li > span { + background-image: url('../../icon/dropdown1.svg'); + background-position: right center; + background-repeat: no-repeat; + padding-right: 12px; + display: inline-block; +} + +/* Dropdown */ + +.clipboardEditor ul > li > ol { + border: 1px solid rgba(255, 255, 255, .7); + border-radius: 5px; + background-color: rgba(0, 0, 0, .7); + margin-top: 23px; + 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); +} + +.clipboardEditor ul > li > ol > 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; +} + +.clipboardEditor ul > li > ol > li:first-child { + border-top-left-radius: 3px; + border-top-right-radius: 3px; +} + +.clipboardEditor ul > li > ol > li:last-child { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; +} + +.clipboardEditor ul > li > ol > li:hover { + color: #fff; + background-color: rgba(0, 0, 0, .5); +} + +.clipboardEditor ul > li > ol > li:first-child { + border-top-width: 0; +} + + + +/* -- -- -- -- -- Global Button Color & Effect Library -- -- -- -- -- */ + +/* Put individual settings to their respective declarations */ + +/* normal state */ +input[type='reset'], +input[type='submit'], +input[type='button'], +.largeButtons ul li a, +.badgeButton, +.pageNavigation ul li:not(.children), +.clipboardEditor > ul > li, +.preInput .dropdownCaption { + text-decoration: none; + text-shadow: 0 1px 0 #fff; + color: #999; + + border-width: 1px; + 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)); + + -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 state */ +input[type='reset']:hover, +input[type='submit']:hover, +input[type='button']:hover, +input[type='button'].default:hover, +.largeButtons ul li a:hover, +.badgeButton:hover, +.pageNavigation ul li:not(.disabled):hover, +.clipboardEditor > ul > li: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 state */ +input[type='reset']:focus, +input[type='submit']:focus, +input[type='button']:focus, +input[type='button'].default:focus, +.largeButtons ul li a:focus, +.badgeButton:focus, +.pageNavigation ul li:not(.disabled):active, +.clipboardEditor > ul > li:focus, +.preInput .dropdownCaption:focus, +input[type='reset']:active, +input[type='submit']:active, +input[type='button']:active, +input[type='button'].default:active, +.largeButtons ul li a:active, +.badgeButton:active, +.pageNavigation ul li:not(.disabled):focus, +.clipboardEditor > ul > li:active, +.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); +} + +/* default glow */ +@-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, .1); + } +} +@-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, .1); + } +} +@-ms-keyframes glowLargeButtons { + 0% { + -ms-box-shadow: 0 0 13px rgba(102, 153, 204, .3); + } + 100% { + -ms-box-shadow: 0 0 13px rgba(102, 153, 204, .1); + } +} +@-o-keyframes glowLargeButtons { + 0% { + -o-box-shadow: 0 0 13px rgba(102, 153, 204, .3); + } + 100% { + -o-box-shadow: 0 0 13px rgba(102, 153, 204, .1); + } +} +@keyframes glowLargeButtons { + 0% { + box-shadow: 0 0 13px rgba(102, 153, 204, .3); + } + 100% { + box-shadow: 0 0 13px rgba(102, 153, 204, .1); + } +} + +/* default normal state */ +input[type='submit'], +input[type='button'].default, +.largeButtons ul li.default a { + color: #69c; + border-width: 1px; + border-style: solid; + border-color: #7aade0 #69c #5285b8; + + background-color: #e7f2fd; + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1)); + background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1)); + background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1)); + background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1)); + background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1)); + + -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; +} + +/* default hover glow */ +@-webkit-keyframes glowLargeButtonsHover { + 0% { + -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .3); + } + 100% { + -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1); + } +} +@-moz-keyframes glowLargeButtonsHover { + 0% { + -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3); + } + 100% { + -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1); + } +} +@-ms-keyframes glowLargeButtonsHover { + 0% { + -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3); + } + 100% { + -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1); + } +} +@-o-keyframes glowLargeButtonsHover { + 0% { + -o-box-shadow: 0 0 13px rgba(255, 153, 51, .3); + } + 100% { + -o-box-shadow: 0 0 13px rgba(255, 153, 51, .1); + } +} +@keyframes glowLargeButtonsHover { + 0% { + box-shadow: 0 0 13px rgba(255, 153, 51, .3); + } + 100% { + box-shadow: 0 0 13px rgba(255, 153, 51, .1); + } +} + +/* default hover state */ +input[type='submit']:hover, +input[type='button'].default:hover, +.largeButtons ul li.default a:hover { + -webkit-box-shadow: 0 0 10px #fa2; + -moz-box-shadow: 0 0 10px #fa2; + -ms-box-shadow: 0 0 10px #fa2; + -o-box-shadow: 0 0 10px #fa2; + box-shadow: 0 0 10px #fa2; + + -webkit-animation-name: glowLargeButtonsHover; + -webkit-animation-duration: 1s; + -webkit-animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + -webkit-animation-timing-function: ease-in-out; + + -moz-animation-name: glowLargeButtonsHover; + -moz-animation-duration: 1s; + -moz-animation-iteration-count: infinite; + -moz-animation-direction: alternate; + -moz-animation-timing-function: ease-in-out; + + -ms-animation-name: glowLargeButtonsHover; + -ms-animation-duration: 1s; + -ms-animation-iteration-count: infinite; + -ms-animation-direction: alternate; + -ms-animation-timing-function: ease-in-out; + + -o-animation-name: glowLargeButtonsHover; + -o-animation-duration: 1s; + -o-animation-iteration-count: infinite; + -o-animation-direction: alternate; + -o-animation-timing-function: ease-in-out; + + animation-name: glowLargeButtonsHover; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + animation-timing-function: ease-in-out; +} + +/* default active glow */ +@-webkit-keyframes glowDefaultLargeButtonsActive { + 0% { + -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1); + } + 100% { + -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1); + } +} +@-moz-keyframes glowDefaultLargeButtonsActive { + 0% { + -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1); + } + 100% { + -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1); + } +} +@-ms-keyframes glowDefaultLargeButtonsActive { + 0% { + -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1); + } + 100% { + -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1); + } +} +@-o-keyframes glowDefaultLargeButtonsActive { + 0% { + -o-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1); + } + 100% { + -o-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1); + } +} +@keyframes glowDefaultLargeButtonsActive { + 0% { + box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1); + } + 100% { + box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1); + } +} + +/* default active state */ +input[type='submit']:focus, +input[type='button'].default:focus, +.largeButtons ul li.default a:focus, +input[type='submit']:active, +input[type='button'].default:active, +.largeButtons ul li.default a:active { + -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); + + -webkit-animation-name: glowDefaultLargeButtonsActive; + -webkit-animation-duration: 1s; + -webkit-animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + -webkit-animation-timing-function: ease-in-out; + + -moz-animation-name: glowDefaultLargeButtonsActive; + -moz-animation-duration: 1s; + -moz-animation-iteration-count: infinite; + -moz-animation-direction: alternate; + -moz-animation-timing-function: ease-in-out; + + -ms-animation-name: glowDefaultLargeButtonsActive; + -ms-animation-duration: 1s; + -ms-animation-iteration-count: infinite; + -ms-animation-direction: alternate; + -ms-animation-timing-function: ease-in-out; + + -o-animation-name: glowDefaultLargeButtonsActive; + -o-animation-duration: 1s; + -o-animation-iteration-count: infinite; + -o-animation-direction: alternate; + -o-animation-timing-function: ease-in-out; + + animation-name: glowDefaultLargeButtonsActive; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + animation-timing-function: ease-in-out; +} + +/* disabled state */ +input[disabled='disabled'], +input[type='button'][disabled='disabled'], +.largeButtons ul li.disabled a { + color: #999; + cursor: default; + border-width: 1px; + border-style: solid; + border-color: #ccc #bbb #aaa; +} + + + + + + + + + +/* -- -- -- -- -- CSS Experiments (active) -- -- -- -- -- */ + + + + + + + + + + + +/* ToDo: Proxy Loading */ + +.actionProxyLoading { + +} + + + + + + + + +/* ToDo: User Panel + +this is taken from "userPanel.tpl" (inline-css) +will change soon! + +*/ + + +/* This style is old and conflicts with the new one! +ul#userMenu { + margin: 0; + padding: 0; +} + +ul#userMenu > li { + border-radius: 3px; + background-color: rgba(224, 224, 224, 1); + margin: 0 3px 0 3px; + padding: 7px; + display: inline-block; + box-shadow: 0 0 5px rgba(151, 151, 151, 1); +} +*/ + +div.userNotificationContainer { + border: 1px solid rgba(192, 192, 192, 1); + background-color: rgba(224, 224, 224, .9); + position: absolute; + width: 250px; +} + +div.scrollableContainer { + position: relative; + width: 250px; + overflow: hidden; +} + +div.scrollableContainer div.scrollableItems { + position: relative; + width: 20000em; +} + +div.scrollableContainer div.scrollableItems > div { + border-right: 1px solid rgba(192, 192, 192, 1); + float: left; + width: 250px; +} + +div.scrollableContainer { + font-size: 90%; +} + +div.scrollableContainer > div:first-child ul { + margin: 0; + padding: 0; +} + +div.scrollableContainer > div:first-child li { + border-top: 1px solid rgba(192, 192, 192, 1); + padding: 7px; +} + +div.scrollableContainer > div:first-child li:first-child { + border-top-width: 0; +} + +div.scrollableContainer > div:first-child p { + padding: 7px; +} + +.userNotificationDetails { + padding: 7px; + width: 236px; +} + +.userNotificationDetails hgroup { + margin-bottom: 7px; + display: table; + width: 100%; +} + +.userNotificationDetails .row { + display: table-row; +} + +.userNotificationDetails .row div { + text-align: center; + display: table-cell; + vertical-align: middle; +} + +.userNotificationDetails .row div:first-child { + width: 64px; +} + +.userNotificationDetails .row div:last-child { + padding-left: 7px; +} + +.userNotificationDetails .avatar img { + height: 64px; + width: 64px; +} + +.userNotificationDetails h1 { + font-size: 110%; +} + +.userNotificationDetails section { + border-top: 1px solid rgba(192, 192, 192, 1); + padding-top: 7px; +} + +.userNotificationDetails nav { + text-align: center; + border-top: 1px solid rgba(192, 192, 192, 1); + margin-top: 7px; + padding-top: 7px; +} + +.userNotificationDetails ul { + list-style-type: none; + display: inline-block; +} + +.userNotificationDetails li { + cursor: pointer; + border: 1px solid rgba(192, 192, 192, 1) !important; + background-image: -webkit-linear-gradient(top, rgba(224, 224, 224, 1), rgba(192, 192, 192, 1)); + background-image: -moz-linear-gradient(top, rgba(224, 224, 224, 1), rgba(192, 192, 192, 1)); + background-image: -ms-linear-gradient(top, rgba(224, 224, 224, 1), rgba(192, 192, 192, 1)); + background-image: -o-linear-gradient(top, rgba(224, 224, 224, 1), rgba(192, 192, 192, 1)); + background-image: linear-gradient(top, rgba(224, 224, 224, 1), rgba(192, 192, 192, 1)); + padding: 3px; + display: inline-block; +} + +.userNotificationDetails li:hover { + background-image: -webkit-linear-gradient(top, rgb(192, 192, 192, 1), rgb(224, 224, 224,)); + background-image: -moz-linear-gradient(top, rgb(192, 192, 192, 1), rgb(224, 224, 224,)); + background-image: -ms-linear-gradient(top, rgb(192, 192, 192, 1), rgb(224, 224, 224,)); + background-image: -o-linear-gradient(top, rgb(192, 192, 192, 1), rgb(224, 224, 224,)); + background-image: linear-gradient(top, rgb(192, 192, 192, 1), rgb(224, 224, 224,)); +} + +#userNotificationDetailsLoading { + background-color: rgba(255, 255, 255, .6); + background-image: url('{@RELATIVE_WCF_DIR}icon/ajax-loader.gif'); + background-position: center center; + background-repeat: no-repeat; + position: absolute; +} + + + + + + +/* ToDo: Profile Button + +this is taken from "user.tpl" (inline-css) +will change soon! + +*/ + + + + + +div#profileButtonContainer { + margin: 7px; +} + +div#profileButtonContainer button { + cursor: pointer; + + border: 1px solid rgba(192, 192, 192, 1); + border-radius: 3px; + + background-image: -webkit-linear-gradient(top, rgba(192, 192, 192, 1), rgba(224, 224, 224, 1)); + background-image: -moz-linear-gradient(top, rgba(192, 192, 192, 1), rgba(224, 224, 224, 1)); + background-image: -ms-linear-gradient(top, rgba(192, 192, 192, 1), rgba(224, 224, 224, 1)); + background-image: -o-linear-gradient(top, rgba(192, 192, 192, 1), rgba(224, 224, 224, 1)); + background-image: linear-gradient(top, rgba(192, 192, 192, 1), rgba(224, 224, 224, 1)); + + margin-right: 3px; + padding: 3px; + height: 60px; +} + +div#profileButtonContainer button:hover { + background-image: -webkit-linear-gradient(top, rgba(224, 224, 224, 1), rgba(192, 192, 192, 1)); + background-image: -moz-linear-gradient(top, rgba(224, 224, 224, 1), rgba(192, 192, 192, 1)); + background-image: -ms-linear-gradient(top, rgba(224, 224, 224, 1), rgba(192, 192, 192, 1)); + background-image: -o-linear-gradient(top, rgba(224, 224, 224, 1), rgba(192, 192, 192, 1)); + background-image: linear-gradient(top, rgba(224, 224, 224, 1), rgba(192, 192, 192, 1)); +} + + + + +/* -- -- -- -- -- EOF -- -- -- -- -- */ diff --git a/wcfsetup/install/files/acp/style/testing.css b/wcfsetup/install/files/acp/style/testing.css deleted file mode 100644 index ddf0609b69..0000000000 --- a/wcfsetup/install/files/acp/style/testing.css +++ /dev/null @@ -1,2703 +0,0 @@ -/** - * ACP Testing Styles - * - * @author Harald Szekely - * @copyright 2011 WoltLab GmbH - */ - -/* -- -- -- -- -- Reset -- -- -- -- -- */ - -/** - * Parts taken from - * http://meyerweb.com/eric/tools/css/reset/ - * v2.0 | 20110126 - * License: none (public domain) - * modifyed to meet the needs of WoltLab - */ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; -} - -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} - -ol, ul { - list-style: none; -} - -blockquote, q { - quotes: none; -} - -blockquote:before, -blockquote:after, -q:before, -q:after { - content: ''; - content: none; -} - - - -/* -- -- -- -- -- Globals -- -- -- -- -- */ - -* { - text-overflow: ellipsis; -} - -body { - font-family: 'Trebuchet MS', Arial, sans-serif; - font-size: 80%; - color: #666; - line-height: 1; - background-color: #29374a; -} - -img { - vertical-align: middle !important; -} - -a { - color: #369; - text-decoration: none; - - -webkit-transition: color .1s linear; - -moz-transition: color .1s linear; - -ms-transition: color .1s linear; - -o-transition: color .1s linear; - transition: color .1s linear; -} - -a:hover { - text-decoration: underline; - color: #036; -} - -a.externalURL { - background-image: url('../../icon/externalURL.svg'); - background-position: right center; - background-repeat: no-repeat; - padding-right: 17px; -} - -hr { - display: none; -} - -.invisible { - position: absolute; - left: -9000px; - top: -9000px; -} - -.separated { - margin-top: 13px; -} - - - -/* -- -- -- -- -- Page Header -- -- -- -- -- */ - -header.pageHeader { - /* Disabled, because the WoltLab header-image is not LGPL - Activate it if you want to test your own header image */ - /* background-image: url('../images/header.png'); */ - background-position: left top; - background-repeat: repeat-x; - min-width: 800px; - width: 100%; -} - -/* Top Menu */ - -header.pageHeader nav.topMenu { - border-bottom: 1px solid rgba(0, 0, 0, .1); - background-color: rgba(0, 0, 0, .4); - position: fixed; - top: 0; - right: 0; - left: 0; - min-height: 20px; - min-width: 800px; - z-index: 500; - - -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3); - -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3); - -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; - -} - -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 li ul li:hover a { - color: #fff; -} - - - - - - - -/* ToDo */ - - -/* Todo: Top Menu Dropdowns */ - -nav.topMenu .dropdownCaption { - cursor: pointer; -} - -nav.topMenu ul { - position: relative; - display: inline-block; -} - -nav.topMenu ul li ul.dropdown { - color: #fff; - border: 1px solid rgba(255, 255, 255, .5); - border-radius: 0 5px 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); -} - -nav.topMenu ul span.dropdownCaption { - display: block !important; - padding: 6px; -} - -nav.topMenu ul:hover span.dropdownCaption { - color: #fff; - background-color: rgba(0, 0, 0, .7); - display: block !important; -} - -nav.topMenu ul:hover span.dropdownCaption ~ ul.dropdown { - display: block !important; -} - -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; -} - -.preInput .inputDropdown > li:first-child { - border-top-right-radius: 3px; -} - -nav.topMenu ul li ul.dropdown > li:last-child { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; -} - -nav.topMenu ul li ul.dropdown > li:hover { - color: #fff; - background-color: rgba(0, 0, 0, .5); -} - -nav.topMenu ul li ul.dropdown > li:first-child { - border-top-width: 0; -} - - - - - - - - - - - -/* Todo */ - - - - - - - - - - - - - - - - - - - - - - - - - - -/* Logo */ - -header.pageHeader div#logo { - margin: 0 23px 0; - position: relative; - z-index: 1; -} - -header.pageHeader div#logo h1 { - font-size: 150%; - text-shadow: 0 -1px 0 #000; - color: #d8e7f5; - position: relative; - top: 70px; -} - -header.pageHeader div#logo a:hover { - text-decoration: none !important; - color: #d8e7f5; -} - -header.pageHeader div#logo img { - position: absolute; - bottom: 10px; - left: 0; -} - -header.pageHeader div#logo > a, -header.pageHeader div#logo > div { - text-align: right; - display: block; - height: 110px; -} - -/* Main Menu */ - -nav.mainMenu { - /* This is the general toggle switch for main menu orientation (options: left|center|right) */ - text-align: left; - margin: 0 30px; - display: block; - position: relative; - bottom: -7px; /* closes the gap between tabs and menu bar */ -} - -nav.mainMenu:after { - content: ''; - display: block; - clear: both; -} - -nav.mainMenu ul { - border-top-left-radius: 5px; - border-top-right-radius: 5px; - background-color: rgba(0, 0, 0, .4); - display: inline-block; -} - -nav.mainMenu ul li { - font-size: 123%; - font-weight: normal; - text-shadow: 0 -1px 0 #000; - color: #69c; - cursor: pointer; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - margin: 5px 0 0; - padding: 10px 20px; - display: inline-block; - position: relative; - top: -7px; - z-index: 1; - - -webkit-transition-property: border, background-color, background-image, color; - -webkit-transition-duration: .3s; - -webkit-transition-timing-function: ease; - - -moz-transition-property: border, background-color, background-image, color; - -moz-transition-duration: .3s; - -moz-transition-timing-function: ease; - - -ms-transition-property: border, background-color, background-image, color; - -ms-transition-duration: .3s; - -ms-transition-timing-function: ease; - - -o-transition-property: border, background-color, background-image, color; - -o-transition-duration: .3s; - -o-transition-timing-function: ease; - - transition-property: border, background-color, background-image, color; - transition-duration: .3s; - transition-timing-function: ease; -} - -nav.mainMenu ul li:hover { - color: #fff; -} - -nav.mainMenu ul li.activeMenuItem { - text-shadow: 0 1px 0 #fff; - font-size: 150%; - font-weight: bold; - color: #369; - - background-color: #e7f2fd; - background-image: -webkit-linear-gradient(#fff, #e7f2fd); - background-image: -moz-linear-gradient(#fff, #e7f2fd); - background-image: -ms-linear-gradient(#fff, #e7f2fd); - background-image: -o-linear-gradient(#fff, #e7f2fd); - background-image: linear-gradient(#fff, #e7f2fd); - - z-index: 10; -} - -nav.mainMenu ul li.activeMenuItem:first-child { - margin: 5px -5px -5px 0; -} - -nav.mainMenu ul li.activeMenuItem:last-child { - margin: 5px 0 -5px -5px; -} - -nav.mainMenu ul li:only-child, -nav.mainMenu ul li.activeMenuItem:only-child { - cursor: default !important; - margin: 5px 0 -5px; -} - -/* Header Navigation */ - -nav.headerNavigation { - background-color: #e7f2fd; - border-bottom: 1px solid #bcd; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - margin: 0 23px; - display: block; - position: relative; - min-width: 800px; -} - -nav.headerNavigation:after { - content: ''; - display: block; - clear: both; -} - -nav.headerNavigation > div { - padding: 3px 7px; -} - -nav.headerNavigation > div:after { - content: ''; - display: block; - clear: both; -} - -nav.headerNavigation ul { - display: block; -} - -nav.headerNavigation ul li { - float: right; -} - -#tplLogin header.pageHeader nav.headerNavigation ul li.toBottomLink { - /* removes the to-bottom-link on the log-in page */ - position: absolute; - left: -9000px; - top: -9000px; - width: 0; -} - - - -/* -- -- -- -- -- Main -- -- -- -- -- */ - -div.main { - margin: 0 23px; - min-width: 800px; -} - - - -/* -- -- -- -- -- Content -- -- -- -- -- */ - -section.content { - background-color: #fff; - display: table-cell; - padding: 25px 40px; - position: relative; - width: 100%; - z-index: 100; - vertical-align: top; -} - -div.main > div section:only-child { - display: block !important; - width: auto; -} - -section.content .content { - border: 1px solid #ccc; - background-color: rgba(0, 0, 0, .01); - padding: 13px 23px 23px; -} - - - -/* -- -- -- -- -- Content Header & Footer -- -- -- -- -- */ - -.contentHeader, -.contentFooter { - margin-top: 15px; -} - - - -/* -- -- -- -- -- Sidebar -- -- -- -- -- */ - -aside.sidebar { - border-right: 1px solid #bcd; - background-color: #d8e7f5; - margin: 0 !important; - padding: 0 !important; - display: table-cell; - position: relative; - vertical-align: top; - - -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); -} - -/* Sidebar Menu */ - -nav.sidebarMenu { - white-space: nowrap; - padding-bottom: 20px; -} - -nav.sidebarMenu > div { - text-shadow: 0 1px 0 #fff; - color: #69c; - position: relative; -} - -nav.sidebarMenu > div a:hover { - text-decoration: none !important; - color: #369; -} - -nav.sidebarMenu > div h1 { - cursor: pointer; - font-size: 130%; - font-weight: bold; - color: #369; - background-image: url('../../icon/closed.svg'); - background-position: 15px center; - background-size: 16px; - background-repeat: no-repeat; - margin-top: 5px; - padding: 7px 25px 7px 35px; - position: relative; -} - -nav.sidebarMenu > div h1.activeMenuItem { - background-image: url('../../icon/opened.svg'); -} - -nav.sidebarMenu > div ul li { - font-size: 110%; -} - -nav.sidebarMenu > div ul li a { - text-shadow: 0 1px 0 #fff; - color: #69c; - padding: 5px 25px 7px 35px; - display: block; -} - -nav.sidebarMenu > div ul li.activeMenuItem { - background-color: #fff; - margin-right: -1px; - overflow: hidden; - - -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1); - -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1); - -ms-box-shadow: 0 0 5px rgba(0, 0, 0, .1); - -o-box-shadow: 0 0 5px rgba(0, 0, 0, .1); - box-shadow: 0 0 5px rgba(0, 0, 0, .1); -} - -nav.sidebarMenu > div ul li.activeMenuItem a { - font-weight: bold; - color: #369; -} - - - -/* -- -- -- -- -- Page Footer -- -- -- -- -- */ - -footer.pageFooter { - text-align: center; - padding: 0 23px; - clear: both; - position: relative; - min-width: 800px; -} - -footer.pageFooter:after { - content: ''; - display: block; - clear: both; -} - -footer.pageFooter > div { - border-top: 1px solid #bcd; - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - background-color: #e7f2fd; - padding: 3px 7px; - clear: both; -} - -footer.pageFooter > div:after { - content: ''; - display: block; - clear: both; -} - -footer.pageFooter .copyright { - padding-top: 20px; - display: inline-block; - min-height: 40px; -} - -footer.pageFooter .copyright a { - text-shadow: 0 -1px 0 #000; -} - -footer.pageFooter .copyright a:hover { - text-decoration: none; - color: #69c; -} - -/* Footer Navigation */ - -footer.pageFooter nav.footerNavigation ul li { - display: inline-block; - float: right; -} - -#tplLogin footer.pageFooter nav.footerNavigation ul li.toTopLink { - /* removes the to-top-link on the log-in page */ - position: absolute; - left: -9000px; - top: -9000px; - width: 0; -} - - - -/* -- -- -- -- -- Headings -- -- -- -- -- */ - -/* Main Heading */ - -.mainHeading { - position: relative; -} - -.mainHeading img { - position: absolute; - top: 0; - left: 0; - width: 48px; - height: 48px; -} - -.mainHeading > hgroup { - padding-left: 60px; - min-height: 56px; -} - -.mainHeading > hgroup h1 { - font-size: 175%; - font-weight: bold; - text-shadow: 0 1px 0 #fff; - color: #666; - border-bottom: 1px solid #999; - padding-bottom: 10px; -} - -.mainHeading > hgroup h2 { - font-size: 100%; - font-weight: normal; - color: #999; - padding-top: 5px; -} - -.mainHeading > hgroup p { - padding-top: 3px; -} - -/* Sub Heading */ - -.subHeading h1 { - font-size: 150%; - text-shadow: 0 1px 0 #fff; - color: #999; - border-bottom: 1px solid #ccc; - margin: 10px 0; - padding: 10px 0; -} - - - -/* -- -- -- -- -- Fieldsets -- -- -- -- -- */ - -fieldset { - border: 1px solid #ccc; - border-radius: 7px; - background-color: rgba(0, 0, 0, .015); - margin: 15px 0 0; - padding: 15px; -} - -fieldset:last-child, fieldset:only-child { - margin-bottom: 7px !important; -} - -/* experimental -fieldset.topLink { - background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px); - background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px); - background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px); - background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px); - background-image: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px); -} -*/ - -fieldset legend { - color: #999; - padding: 0 7px 0; -} - -fieldset legend ~ p { - margin-bottom: 14px; -} - -fieldset p.description { - font-size: 90%; - color: #999; -} - - - -/* -- -- -- -- -- Tabbed Content -- -- -- -- -- */ - -/* Simple */ - -dl { - margin-bottom: 7px; - clear: both; - position: relative; -} - -dl > dt { - text-align: right; - color: #69c; - margin-top: 5px; /* not so nice */ - float: left; - width: 230px; -} - -dl > dt > label { - margin-top: 5px; - display: block; -} - -dl.disabled > dt { - color: #777; -} - -dl > dd { - margin-left: 250px; - padding-top: 5px; -} - -dl > dd > small { - font-size: 85%; - color: #999; - margin: 3px 0 7px; - display: block; -} - -/* Nested */ - -dl > dd > fieldset { - margin-top: 0; - margin-bottom: 0; -} - -dl > dd > fieldset > legend { - display: none; -} - -dl > dd > fieldset > dl > dt { - margin-right: 20px; - width: 150px; -} - -dl > dd > fieldset > dl > dd { - margin-left: 0; -} - -dl > dd > fieldset > dl > dd > label { - display: block; -} - -/* Reversed */ - -dt.reversed { - text-align: left; - margin-top: 2px; - position: absolute; - left: 270px; - width: auto; -} - -dt.reversed ~ dd > input[type='checkbox'] { - margin-left: 0; -} - -/* Special (experimental) - -fieldset dl > dd { - margin-left: 235px; - padding-top: 5px; -} - -fieldset dt.reversed { - left: 255px; -} -*/ - - - -/* -- -- -- -- -- Forms -- -- -- -- -- */ - -/* Globals */ - -label { - color: #69c; -} - -/* Structure */ - -.formSubmit { - text-align: center; - margin-top: 15px; -} - -input[type='checkbox'] ~ small, -input[type='radio'] ~ small { - margin-top: 0; - margin-left: 21px; -} - -/* Form Elements */ - -input[type='reset'], -input[type='submit'], -input[type='button'], -input[type='checkbox'], -input[type='radio'], -select { - cursor: pointer; -} - -input[type='text'], -input[type='search'], -input[type='email'], -input[type='password'] { - padding: 5px 3px; -} - -/* inputs normal */ -input[type='text'], -input[type='search'], -input[type='email'], -input[type='password'], -textarea { - border-width: 1px; - border-style: solid; - border-color: #999 #ccc #eee; - border-radius: 3px; - background-color: #fff; - - -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1); - -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1); - -ms-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1); - -o-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1); - box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1); - - -webkit-transition: all .2s linear; - -moz-transition: all .2s linear; - -ms-transition: all .2s linear; - -o-transition: all .2s linear; - transition: all .2s linear; -} - -/* inputs hover */ -input[type='text']:hover, -input[type='search']:hover, -input[type='email']:hover, -input[type='password']:hover, -textarea:hover { - border: 1px solid #fa2; - background-color: #fff9f4; -} - -/* inputs active */ -input[type='text']:active, -input[type='search']:active, -input[type='email']:active, -input[type='password']:active, -textarea:active, -input[type='text']:focus, -input[type='search']:focus, -input[type='email']:focus, -input[type='password']:focus, -textarea:focus { - border: 1px solid #fa2; - background-color: #fff9f4; - outline: none; - - -webkit-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2); - -moz-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2); - -ms-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2); - -o-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2); - box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2); -} - -/* inputs read only */ -input[type='text'][readonly='readonly'], -input[type='search'][readonly='readonly'], -input[type='email'][readonly='readonly'], -input[type='password'][readonly='readonly'], -textarea[readonly='readonly'] { - border-style: solid; - border-color: #ccc #ddd #eee; - background-color: transparent; - - -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05); - -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05); - -ms-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05); - -o-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05); - box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05); -} - -/* inputs read only */ -input[type='text'][disabled='disabled'], -input[type='search'][disabled='disabled'], -input[type='email'][disabled='disabled'], -input[type='password'][disabled='disabled'], -textarea[disabled='disabled'] { - border-style: solid; - border-color: rgba(0, 0, 0, .5); - background-color: rgba(255, 255, 255, .5); -} - -/* Widths */ - -textarea { - width: 99%; - min-width: 300px; -} - -.tiny { - width: 100px; -} - -.short { - width: 10%; - min-width: 100px; -} - -.medium { - width: 50%; - min-width: 200px; -} - -.long { - width: 99%; - min-width: 300px; -} - -.auto { - width: auto; -} - - - - - - - - - - - - - - - - - - - - - - - -/* Input Buttons & Dropdowns */ - -/* Input Button Area */ - -/* ToDo: Change the class-name! */ - -.preInput { - position: relative; - white-space: nowrap; -} - -.preInput:after { - content: ''; - display: block; - clear: both; -} - -.preInput > input { /* ToDo: All this needed? */ - border-radius: 0 3px 3px 0; - margin: 0; - position: relative; - right: 0; - left: 0; - 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 { - cursor: pointer; - - border-radius: 3px 0 0 3px; - padding: 5px 10px; - display: inline-block; -} - - - - - - - - - - - - - - - -/* 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; -} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -/* -- -- -- -- -- Large Buttons -- -- -- -- -- */ - -/* Colors are being taken from the global color styles */ - -.largeButtons { - text-align: right; -} - -.largeButtons ul li { - display: inline; -} - -.largeButtons ul li a img { - margin: -5px 1px -5px -5px; - height: 24px; - width: 24px; - vertical-align: middle; -} - -/* buttons normal */ -input[type='reset'], -input[type='submit'], -input[type='button'], -.largeButtons ul li a { - font-size: 100%; - font-weight: bold; - - border-radius: 30px; - - margin: 3px 2px; - padding: 5px 13px; - display: inline-block; -} - - - -/* -- -- -- -- -- Border -- -- -- -- -- */ - -.border { - border: 1px solid #ccc; - border-radius: 5px; - margin-top: 15px; -} - -.border.overlay { - margin-top: 0 !important; -} - -/* -- -- -- -- -- Box Title -- -- -- -- -- */ - -.boxTitle { - border-radius: 7px; - background-color: #369; - /* Disabled, because the WoltLab header-image is not LGPL - Activate it if you want to test your own header image */ - /* background-image: url('../images/header.png'); */ - background-position: left top; - background-repeat: repeat-x; - - -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1); - -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1); - -ms-box-shadow: 0 0 5px rgba(0, 0, 0, .1); - -o-box-shadow: 0 0 5px rgba(0, 0, 0, .1); - box-shadow: 0 0 5px rgba(0, 0, 0, .1); -} - -.boxTitle > hgroup { - text-shadow: 0 -1px 0 #000; - color: #fff; - padding: 7px; - display: inline-block; -} - -.boxTitle > hgroup a, .boxTitle > a { - text-decoration: none; - color: #fff; -} - -.boxTitle > hgroup h1 { - display: inline-block; -} - -.boxTitle > hgroup h2 { - font-size: 85%; - color: rgba(255, 255, 255, .9); - margin-top: 5px; -} - -.boxTitle img.handle { - cursor: pointer; - margin-top: -1px; - float: right !important; - height: 16px; - width: 16px; -} - - - -/* -- -- -- -- -- Tab Menu -- -- -- -- -- */ - -/* Parts taken from jQuery UI @ themes/base/jquery.ui.tabs.css */ - -/* Tab Menu */ - -.tabMenu { - text-shadow: 0 1px 0 #fff; - /* This is the general toggle switch for tab menu orientation (options: left|center|right) */ - text-align: center; - white-space: nowrap; - background-color: none; - margin-top: 15px; - padding: 0 5px; - display: block; - position: relative; -} - -.tabMenu:after { - content: ''; - display: block; - clear: both; -} - -.tabMenu li { - white-space: nowrap; - list-style: none; - display: inline-block; -} - -.tabMenu li a { - font-size: 110%; - text-decoration: none; - color: #999; - cursor: pointer; - padding: 10px 15px 7px; - border-width: 1px 1px 0 1px; - border-style: solid; - border-color: #ddd; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - background-color: rgba(0, 0, 0, .05); - display: inline-block; - position: relative; - bottom: -1px; - z-index: 10; - max-width: 200px; - overflow: hidden; -} - -.tabMenu li:not(.ui-state-active) a:hover { - color: #666; - border-width: 1px; - border-style: solid; - border-color: #fa2 #fa2 #ccc; - background-color: #fff9f4; -} - -.tabMenu li:not(.ui-state-active) a:active, -.tabMenu li:not(.ui-state-active) a:focus { - border-width: 1px; - border-style: solid; - border-color: #fa2 #fa2 #ccc; - - -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); -} - -.tabMenu li.ui-state-active a { - font-size: 130%; - font-weight: bold; - color: #333 !important; - border-width: 1px; - border-style: solid; - border-color: #ccc; - border-bottom-color: #fff; - background-color: rgba(255, 255, 255, 1); - bottom: 0; - z-index: 30; -} - -.tabMenu li.ui-state-active a, -.tabMenu li.ui-state-disabled a, -.tabMenu li.ui-state-processing a { - cursor: default; -} - -/* Tab Menu Content */ - -.tabMenuContent { - border: 1px solid #ccc; - background-color: rgba(255, 255, 255, 1); - margin-top: -1px; - padding: 15px 23px; - display: block; - position: relative; - z-index: 20; /* Prevents border overlay during transition */ -} - -/* ToDo: 2x hidden? */ - -.ui-tabs .ui-tabs-hide { - display: none !important; -} - -.ui-helper-hidden { - display: none; -} - -.ui-helper-hidden-accessible { - position: absolute !important; - clip: rect(1px 1px 1px 1px); - clip: rect(1px,1px,1px,1px); -} - - - -/* -- -- -- -- -- Menu -- -- -- -- -- */ - -.menu { - color: #666; - border-bottom: 1px solid #ccc; - margin: -15px -23px 0; - padding: 0 7px 10px; -} - -.tabMenuContent > .menu { - background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); - background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); - background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); - background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); - background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); -} - -.menu ul { - /* This is the general toggle switch for menu orientation (options: left|center|right) */ - text-align: center; -} - -.menu ul li { - white-space: nowrap; - margin-top: 10px; - display: inline-block; -} - -.menu ul li a { - font-size: 85%; - text-shadow: 0 1px 0 #fff; - text-decoration: none; - color: #999; - border: 1px solid rgba(0, 0, 0, .2); - border-radius: 13px; - background-color: rgba(255, 255, 255, .5); - padding: 2px 10px; - - -webkit-transition: color .1s linear; - -moz-transition: color .1s linear; - -ms-transition: color .1s linear; - -o-transition: color .1s linear; - transition: color .1s linear; -} - -.menu ul li:not(.ui-state-active) a:hover { - color: #333; - border-width: 1px; - border-style: solid; - border-color: #fa2; - background-color: rgba(255, 249, 244, 1); -} - -.menu ul li:not(.ui-state-active) a:active, -.menu ul li:not(.ui-state-active) a:focus { - -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); -} - -.menu ul li.ui-state-active a { - font-weight: bold; - text-shadow: 0 1px 0 #000; - color: #fff; - cursor: default; - border: 1px solid rgba(0, 0, 0, .2); - background-color: rgba(0, 0, 0, .5); -} - -/* Special */ - -.boxTitle > .menu { - color: #fff; - border: none; - margin: 0 !important; - padding: 6px 7px !important; -} - -.boxTitle > .menu ul li { - margin-top: 0; -} - -.boxTitle > .menu ul li a { - font-size: 85%; - text-decoration: none; - text-shadow: 0 -1px 0 #000; - color: #eee !important; - border: 1px solid rgba(0, 0, 0, .3); - border-radius: 13px; - background-color: rgba(0, 0, 0, .1); - padding: 2px 10px; - - -webkit-transition: color .1s linear; - -moz-transition: color .1s linear; - -ms-transition: color .1s linear; - -o-transition: color .1s linear; - transition: color .1s linear; -} - -.boxTitle > .menu ul li a:hover { - color: #fff !important; - border: 1px solid rgba(0, 0, 0, .3); - background-color: rgba(0, 0, 0, .2); -} - -.boxTitle > .menu ul li a:active, -.boxTitle > .menu ul li a:focus, -.boxTitle > .menu ul li.ui-state-active a { - border: 1px solid rgba(0, 0, 0, .5); - - -webkit-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5); - -moz-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5); - -ms-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5); - -o-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5); - box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5); -} - - - -/* -- -- -- -- -- ToDo: Tables -- -- -- -- -- */ - -/* Table */ - -table { - border-spacing: 0; - width: 100% !important; -} - -/* Table Header */ - -thead th { - font-size: 87%; - white-space: nowrap; -} - -thead th:first-child { - /* rounded corners for the first table header cell to the left */ - border-top-left-radius: 5px; -} - -thead th:last-child { - /* rounded corners for the last table header cell to the left */ - border-top-right-radius: 5px; -} - -thead th { - text-shadow: 0 -1px 0 #000; - color: #69c; - border-right: 1px solid rgba(0, 0, 0, .2); - - background-color: rgba(0, 0, 0, .3); - background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)); - background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)); - background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)); - background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)); - background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)); - - padding: 7px; -} - -thead th a { - text-shadow: 0 -1px 0 #000; - text-decoration: none !important; - color: #69c; - margin: -7px; - padding: 7px; - display: block; -} - -thead th:last-child a { - border-right-width: 0; -} - -thead th:hover a { - color: #fff; - background-color: rgba(0, 0, 0, .2); -} - -thead th.active a { - font-weight: bold; - color: #fff; - background-color: rgba(0, 0, 0, .1); - - -webkit-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4); - -moz-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4); - -ms-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4); - -o-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4); - box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4); -} - -thead th.active:hover a { - background-color: rgba(0, 0, 0, .3); -} - -thead th a img { - /* sort-icon orientation does not work */ - text-align: right; - /* negative margins to prevent table-cells from expanding when the sort-icon shows up */ - margin-top: -5px !important; - margin-bottom: -5px !important; -} - -/* Table Body */ - -tbody tr { - border-bottom: 1px solid rgba(255, 255, 255, .3); -} - -tbody tr:last-child { - /* no border for the last table row */ - border-bottom-width: 0; -} - -tbody tr:last-child td:first-child { - /* rounded corners for the last table cell to the left */ - border-bottom-left-radius: 5px; -} - -tbody tr:last-child td:last-child { - /* rounded corners for the last table cell to the right */ - border-bottom-right-radius: 5px; -} - -tbody td { - background-color: #fcfdfe; - border-right: 1px solid rgba(255, 255, 255, .3); - padding: 5px; - /* this is experimental - only works in combination with "table-layout: fixed;" */ - word-wrap: break-word; -} - -tbody td:last-child { - border-right-width: 0; -} - -tbody tr:nth-child(2n+1) td { - /* auto-colorer for every 2nd row */ - background-color: #f2f6fa; -} - -tbody tr:hover td { - background-color: #d8e7f5; -} - -/* ToDo: Table Specials */ - -/* -.menu ~ .border { - border-top-left-radius: 0 !important; - border-top-right-radius: 0 !important; -} -*/ - -.menu ~ .border thead th:first-child { - border-top-left-radius: 0 !important; -} - -.menu ~ .border thead th:last-child { - border-top-right-radius: 0 !important; -} - -.menu ~ .border thead th:first-child, -.boxTitle > table thead th:first-child { - border-top-left-radius: 0 !important; -} - -.menu ~ .border thead th:last-child, -.boxTitle > table thead th:last-child { - border-top-right-radius: 0 !important; -} - -/* Table Column Formats */ - -tr .columnMark, -tr .columnStatus { - text-align: center; - width: 1% !important; - white-space: nowrap; -} - -tr .columnStatus .badge { - margin-right: 1px !important; - margin-left: 1px !important; -} - -tr .columnDigits, -tr .columnID { - text-align: right; - width: 1% !important; - white-space: nowrap; -} - -tr .columnIcon { - text-align: left; - width: 1% !important; - white-space: nowrap; -} - -tr .columnIcon img:not(.balloonTooltip):hover { - cursor: not-allowed; -} - -tr .columnIcon img { - height: 16px; - width: 16px; -} - -.bigList tr .columnIcon img { - height: 24px; - width: 24px; -} - -tr .columnTitle { - font-weight: bold; - text-align: left; -} - -tr .columnText { - font-weight: normal; - text-align: left; - max-width: 20%; -} - -tr .columnDate, -tr .columnRegistrationDate { - font-size: 85%; - text-align: right; - width: 1% !important; -} - -tr .columnURL { - font-size: 85%; - text-align: left; -} - -/* Table Checkboxes */ - -table input[type='checkbox'] { - margin-top: -5px !important; - margin-bottom: -5px !important; -} - - - -/* -- -- -- -- -- ToDo: Page Navigation -- -- -- -- -- */ - -/* Page-Navigation Popups are still missing */ - -.pageNavigation ul li:not(.children) { - border-radius: 3px; - - display: inline-block; - position: relative; -} - -.pageNavigation ul li.disabled { - cursor: not-allowed; - border: 1px solid rgba(0, 0, 0, .1) !important; - background-image: none !important; -} - -.pageNavigation ul li:after { - content: ''; - display: block; - clear: both; -} - -.pageNavigation ul li img { - height: 16px; - width: 16px; -} - -.pageNavigation ul li.skip { - padding: 2px 2px 1px 3px; - top: -1px; -} - -.pageNavigation ul li a { - text-shadow: 0 1px 0 #fff; - text-decoration: none; - color: #999; - display: inline-block; -} - -.pageNavigation ul li:not(.disabled):hover a { - color: #666; -} - -.pageNavigation ul li:not(.skip) a { - padding: 3px 5px; -} - -.pageNavigation ul li:active a, -.pageNavigation ul li:focus a { - color: #333; -} - -.pageNavigation ul li.active, -.pageNavigation ul li.active:hover { - text-shadow: 0 1px 0 #000 !important; - color: #fff !important; - border: 1px solid rgba(0, 0, 0, .3) !important; - - background-color: rgba(0, 0, 0, .5) !important; - background-image: -webkit-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important; - background-image: -moz-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important; - background-image: -o-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important; - background-image: -ms-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important; - background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important; - - padding: 3px 5px; -} - -/* ToDo: Children */ - -.pageNavigation ul li.children, -.pageNavigation ul li.children:hover, -.pageNavigation ul li.children:active, -.pageNavigation ul li.children:focus { - display: inline-block; -} - -.pageNavigation ul li.children img { - height: 9px; - width: 7px; -} - - - -/* -- -- -- -- -- System Notifications -- -- -- -- -- */ - -p.info, -p.error, -p.success, -p.warning { - text-shadow: 0 1px 0 #fff; - line-height: 1.5; - border-radius: 7px; - margin-top: 15px; - padding: 7px 15px 7px 50px; - - -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, .1); - -moz-box-shadow: 0 0 7px rgba(0, 0, 0, .1); - -ms-box-shadow: 0 0 7px rgba(0, 0, 0, .1); - -o-box-shadow: 0 0 7px rgba(0, 0, 0, .1); - box-shadow: 0 0 7px rgba(0, 0, 0, .1); - - -webkit-transition: all .1s linear; - -moz-transition: all .1s linear; - -ms-transition: all .1s linear; - -o-transition: all .1s linear; - transition: all .1s linear; -} - -p.info { - color: #68b; - border: 1px solid #9be; - background-color: #def; - background-image: url('../../icon/systemInfo.svg'); - background-size: 24px; - background-position: 13px center; - background-repeat: no-repeat; -} - -p.success { - color: #090; - border: 1px solid #0c0; - background-color: #efe; - background-image: url('../../icon/systemSuccess.svg'); - background-size: 24px; - background-position: 13px center; - background-repeat: no-repeat; -} - -p.warning { - color: #990; - border: 1px solid #cc0; - background-color: #ffd; - background-image: url('../../icon/systemWarning.svg'); - background-size: 24px; - background-position: 13px center; - background-repeat: no-repeat; -} - -p.error { - color: #c00; - border: 1px solid #f99; - background-color: #fee; - background-image: url('../../icon/systemError.svg'); - background-size: 24px; - background-position: 13px center; - background-repeat: no-repeat; -} - - - - - - - -/* ToDo: Installation */ - -div#packageInstallationDialogContainer { - padding: 20px; - height: 100%; - max-width: 600px; -} - -div#ajaxExceptionStacktrace { - white-space: nowrap; - overflow: scroll; - overflow-y: hidden; -} - -div#packageInstallationInnerContentContainer { - margin-top: 20px; - padding-top: 15px; -} - -div#packageInstallationInnerContent p.error { - border: 1px solid #ed1c24; - border-radius: 5px; - background-color: #fdd; - margin-bottom: 15px; - padding: 7px; -} - -div#ajaxExceptionStacktrace { - font-family: monospace; - font-size: 90%; - line-height: 1.2; - border: 1px solid #ccc; - padding: 3px; -} - - - - - -/* ToDo */ - -#actionProxyLoading { - border: 1px solid #f80; - border-top-width: 0; - border-radius: 0 0 5px 5px; - background-color: #faebd7; - padding: 7px 21px 7px; - position: fixed; - top: 0; - right: 20px; - z-index: 1000; -} - -#actionProxyLoading img { - height: 24px; - width: 24px; -} - -div.wcfDimensions { - display: inline-block; -} - -div.overlayLoading { - background-color: #fff; - background-image: url('../../icon/spinner.svg'); - 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-titlebar { - border-bottom: 5px solid rgba(0, 0, 0, .6); - background-color: #ccc; - padding: 7px; - position: relative; -} - -span.ui-dialog-title { - text-shadow: 5px 0 0 #000; - color: #fff; -} - -a.ui-dialog-titlebar-close { - background-image: url('../../icon/deleteM.png'); - background-position: top left; - background-repeat: no-repeat; - position: absolute !important; - top: -16px; - right: -16px; - width: 24px; - height: 24px; -} - -a.ui-dialog-titlebar-close span { - display: none; - visibility: hidden; -} - -div.ui-widget-overlay { - background-color: #000; - opacity: .6; - position: fixed; - top: 0; - left: 0; -} - - - -/* ToDo: Is all that really necessary? We wanted to support good browsers only */ - -.ui-helper-clearfix { - display: inline-block; -} - -/* Required comment for clearfix to work in Opera \*/ -* html .ui-helper-clearfix { - height: 1%; -} - -.ui-helper-clearfix { - display: block; -} - -/* end clearfix */ -.ui-helper-zfix { - opacity: 0; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; -} - -.ui-dialog { - background-color: rgba(255, 255, 255, .9); -} - - -/* -- -- -- -- -- Badges -- -- -- -- -- */ - -/* Globals */ - -.badge { - font-size: 85%; - text-shadow: none; - color: #666; - border-radius: 13px; - background-color: #fff; - margin-right: -3px; - margin-left: 3px; - padding: 1px 5px 2px; - display: inline-block; - position: relative; - top: -1px; -} - -/* Types */ - -.badgeNote { - border: 1px solid #ccc; -} - -.badgeInfo { - color: #68b; - border: 1px solid #9be; - background-color: #def; -} - -.badgeSuccess { - color: #090; - border: 1px solid #0c0; - background-color: #efe; -} - -.badgeWarning { - color: #990; - border: 1px solid #cc0; - background-color: #ffd; -} - -.badgeError { - color: #c00; - border: 1px solid #f99; - background-color: #fee; -} - -/* Buttons */ - -.badgeButton, -.clipboardEditor > ul > li { - cursor: pointer; - - border-radius: 30px; - - margin-right: 0; - margin-left: 0; - padding: 3px 10px 5px; - display: inline-block; -} - -li.badgeButton, -li > .badgeButton { - margin-top: 7px; - margin-right: 3px; - margin-left: 3px; - float: left; -} - -.badgeButton, -.badgeButton a, -.clipboardEditor > ul > li > span { - text-decoration: none !important; -} - - - -/* -- -- -- -- -- GUI Widgets -- -- -- -- -- */ - -/* Balloon Tooltips */ - -#balloonTooltip { - font-size: .85em; - color: #fff; - border: 1px solid rgba(255, 255, 255, .7); - border-radius: 5px; - background-color: rgba(0, 0, 0, .7); - padding: 5px 10px 7px; - max-width: 300px; - z-index: 900; - - box-shadow: 0 3px 7px rgba(0, 0, 0, .3); -} - -.balloonTooltip { - /* Not reliable, sometimes not wanted! */ - cursor: pointer; -} - -/* Collapsible */ - -.collapsible { - margin: 5px 0 0 10px; - float: left; -} - -.collapsible img { - height: 16px; - width: 16px; -} - - - -/* -- -- -- -- -- CSS Experiments (active) -- -- -- -- -- */ - - - - - - - - - - - - - -/* -- -- -- -- -- ToDo: Clipboard Editor -- -- -- -- -- */ - -.clipboardEditor { - -} - -.clipboardEditor > ul { - font-size: .85em; - margin: 6px 3px 0; - display: block; - position: relative; - float: left; -} - -.clipboardEditor > ul > li > span { - background-image: url('../../icon/dropdown1.svg'); - background-position: right center; - background-repeat: no-repeat; - padding-right: 12px; - display: inline-block; -} - -/* Dropdown */ - -.clipboardEditor ul > li > ol { - border: 1px solid rgba(255, 255, 255, .7); - border-radius: 5px; - background-color: rgba(0, 0, 0, .7); - margin-top: 23px; - 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); -} - -.clipboardEditor ul > li > ol > 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; -} - -.clipboardEditor ul > li > ol > li:first-child { - border-top-left-radius: 3px; - border-top-right-radius: 3px; -} - -.clipboardEditor ul > li > ol > li:last-child { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; -} - -.clipboardEditor ul > li > ol > li:hover { - color: #fff; - background-color: rgba(0, 0, 0, .5); -} - -.clipboardEditor ul > li > ol > li:first-child { - border-top-width: 0; -} - - - - - -/* ToDo: Proxy Loading */ - -.actionProxyLoading { - -} - - - - - - - - - - - - - - - - - - -/* -- -- -- -- -- Global Button Color & Effect Library -- -- -- -- -- */ - -/* Put individual settings to their respective declarations */ - -/* normal state */ -input[type='reset'], -input[type='submit'], -input[type='button'], -.largeButtons ul li a, -.badgeButton, -.pageNavigation ul li:not(.children), -.clipboardEditor > ul > li, -.preInput .dropdownCaption { - text-decoration: none; - text-shadow: 0 1px 0 #fff; - color: #999; - - border-width: 1px; - 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)); - - -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 state */ -input[type='reset']:hover, -input[type='submit']:hover, -input[type='button']:hover, -input[type='button'].default:hover, -.largeButtons ul li a:hover, -.badgeButton:hover, -.pageNavigation ul li:not(.disabled):hover, -.clipboardEditor > ul > li: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 state */ -input[type='reset']:focus, -input[type='submit']:focus, -input[type='button']:focus, -input[type='button'].default:focus, -.largeButtons ul li a:focus, -.badgeButton:focus, -.pageNavigation ul li:not(.disabled):active, -.clipboardEditor > ul > li:focus, -.preInput .dropdownCaption:focus, -input[type='reset']:active, -input[type='submit']:active, -input[type='button']:active, -input[type='button'].default:active, -.largeButtons ul li a:active, -.badgeButton:active, -.pageNavigation ul li:not(.disabled):focus, -.clipboardEditor > ul > li:active, -.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); -} - -/* default glow */ -@-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, .1); - } -} -@-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, .1); - } -} -@-ms-keyframes glowLargeButtons { - 0% { - -ms-box-shadow: 0 0 13px rgba(102, 153, 204, .3); - } - 100% { - -ms-box-shadow: 0 0 13px rgba(102, 153, 204, .1); - } -} -@-o-keyframes glowLargeButtons { - 0% { - -o-box-shadow: 0 0 13px rgba(102, 153, 204, .3); - } - 100% { - -o-box-shadow: 0 0 13px rgba(102, 153, 204, .1); - } -} -@keyframes glowLargeButtons { - 0% { - box-shadow: 0 0 13px rgba(102, 153, 204, .3); - } - 100% { - box-shadow: 0 0 13px rgba(102, 153, 204, .1); - } -} - -/* default normal state */ -input[type='submit'], -input[type='button'].default, -.largeButtons ul li.default a { - color: #69c; - border-width: 1px; - border-style: solid; - border-color: #7aade0 #69c #5285b8; - - background-color: #e7f2fd; - background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1)); - background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1)); - background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1)); - background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1)); - background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1)); - - -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; -} - -/* default hover glow */ -@-webkit-keyframes glowLargeButtonsHover { - 0% { - -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .3); - } - 100% { - -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1); - } -} -@-moz-keyframes glowLargeButtonsHover { - 0% { - -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3); - } - 100% { - -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1); - } -} -@-ms-keyframes glowLargeButtonsHover { - 0% { - -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3); - } - 100% { - -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1); - } -} -@-o-keyframes glowLargeButtonsHover { - 0% { - -o-box-shadow: 0 0 13px rgba(255, 153, 51, .3); - } - 100% { - -o-box-shadow: 0 0 13px rgba(255, 153, 51, .1); - } -} -@keyframes glowLargeButtonsHover { - 0% { - box-shadow: 0 0 13px rgba(255, 153, 51, .3); - } - 100% { - box-shadow: 0 0 13px rgba(255, 153, 51, .1); - } -} - -/* default hover state */ -input[type='submit']:hover, -input[type='button'].default:hover, -.largeButtons ul li.default a:hover { - -webkit-box-shadow: 0 0 10px #fa2; - -moz-box-shadow: 0 0 10px #fa2; - -ms-box-shadow: 0 0 10px #fa2; - -o-box-shadow: 0 0 10px #fa2; - box-shadow: 0 0 10px #fa2; - - -webkit-animation-name: glowLargeButtonsHover; - -webkit-animation-duration: 1s; - -webkit-animation-iteration-count: infinite; - -webkit-animation-direction: alternate; - -webkit-animation-timing-function: ease-in-out; - - -moz-animation-name: glowLargeButtonsHover; - -moz-animation-duration: 1s; - -moz-animation-iteration-count: infinite; - -moz-animation-direction: alternate; - -moz-animation-timing-function: ease-in-out; - - -ms-animation-name: glowLargeButtonsHover; - -ms-animation-duration: 1s; - -ms-animation-iteration-count: infinite; - -ms-animation-direction: alternate; - -ms-animation-timing-function: ease-in-out; - - -o-animation-name: glowLargeButtonsHover; - -o-animation-duration: 1s; - -o-animation-iteration-count: infinite; - -o-animation-direction: alternate; - -o-animation-timing-function: ease-in-out; - - animation-name: glowLargeButtonsHover; - animation-duration: 1s; - animation-iteration-count: infinite; - animation-direction: alternate; - animation-timing-function: ease-in-out; -} - -/* default active glow */ -@-webkit-keyframes glowDefaultLargeButtonsActive { - 0% { - -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1); - } - 100% { - -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1); - } -} -@-moz-keyframes glowDefaultLargeButtonsActive { - 0% { - -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1); - } - 100% { - -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1); - } -} -@-ms-keyframes glowDefaultLargeButtonsActive { - 0% { - -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1); - } - 100% { - -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1); - } -} -@-o-keyframes glowDefaultLargeButtonsActive { - 0% { - -o-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1); - } - 100% { - -o-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1); - } -} -@keyframes glowDefaultLargeButtonsActive { - 0% { - box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1); - } - 100% { - box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1); - } -} - -/* default active state */ -input[type='submit']:focus, -input[type='button'].default:focus, -.largeButtons ul li.default a:focus, -input[type='submit']:active, -input[type='button'].default:active, -.largeButtons ul li.default a:active { - -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); - - -webkit-animation-name: glowDefaultLargeButtonsActive; - -webkit-animation-duration: 1s; - -webkit-animation-iteration-count: infinite; - -webkit-animation-direction: alternate; - -webkit-animation-timing-function: ease-in-out; - - -moz-animation-name: glowDefaultLargeButtonsActive; - -moz-animation-duration: 1s; - -moz-animation-iteration-count: infinite; - -moz-animation-direction: alternate; - -moz-animation-timing-function: ease-in-out; - - -ms-animation-name: glowDefaultLargeButtonsActive; - -ms-animation-duration: 1s; - -ms-animation-iteration-count: infinite; - -ms-animation-direction: alternate; - -ms-animation-timing-function: ease-in-out; - - -o-animation-name: glowDefaultLargeButtonsActive; - -o-animation-duration: 1s; - -o-animation-iteration-count: infinite; - -o-animation-direction: alternate; - -o-animation-timing-function: ease-in-out; - - animation-name: glowDefaultLargeButtonsActive; - animation-duration: 1s; - animation-iteration-count: infinite; - animation-direction: alternate; - animation-timing-function: ease-in-out; -} - -/* disabled state */ -input[disabled='disabled'], -input[type='button'][disabled='disabled'], -.largeButtons ul li.disabled a { - color: #999; - cursor: default; - border-width: 1px; - border-style: solid; - border-color: #ccc #bbb #aaa; -} - - - - - - - - - - - - - - - - - -/* -- -- -- -- -- EOF -- -- -- -- -- */ diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl index 39c20fff94..c7fe48726e 100644 --- a/wcfsetup/install/files/acp/templates/header.tpl +++ b/wcfsetup/install/files/acp/templates/header.tpl @@ -22,6 +22,17 @@ //]]> + + + {* {if $specialStyles|isset} @@ -29,22 +40,6 @@ {/if} *} - - - - - {* - - - - *} - + + + {* {if $specialStyles|isset} @@ -29,32 +40,17 @@ {/if} *} - - - - - {* - - - - *} -