From aa62cd91796640b72245530c910c793732101ae3 Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Sat, 22 Dec 2012 18:16:19 +0100 Subject: [PATCH] Fixed outdated setup templates --- .../files/acp/style/setup/WCFSetup.css | 9615 +++++++++-------- wcfsetup/setup/template/footer.tpl | 22 +- wcfsetup/setup/template/header.tpl | 56 +- wcfsetup/setup/template/stepConfigureDB.tpl | 119 +- wcfsetup/setup/template/stepCreateUser.tpl | 147 +- .../setup/template/stepInstallPackages.tpl | 12 +- wcfsetup/setup/template/stepNext.tpl | 13 +- wcfsetup/setup/template/stepSearchWcfDir.tpl | 55 +- .../setup/template/stepSelectLanguages.tpl | 36 +- .../template/stepSelectSetupLanguage.tpl | 34 +- wcfsetup/setup/template/stepShowLicense.tpl | 18 +- .../template/stepShowSystemRequirements.tpl | 25 +- 12 files changed, 5357 insertions(+), 4795 deletions(-) diff --git a/wcfsetup/install/files/acp/style/setup/WCFSetup.css b/wcfsetup/install/files/acp/style/setup/WCFSetup.css index e55ebd979b..b0d346dbee 100644 --- a/wcfsetup/install/files/acp/style/setup/WCFSetup.css +++ b/wcfsetup/install/files/acp/style/setup/WCFSetup.css @@ -1,4657 +1,5214 @@ -/** - * ################################################################# - * ### CAUTION: This stylesheet applies to WCFSetup only, please ### - * ### see wcf.less for the general stylesheet! ### - * ################################################################# - */ - -/** - * WCF 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; +/* stylesheet for 'Blue Temptation', generated on Sat, 22 Dec 2012 16:19:20 +0000 -- DO NOT EDIT */ + +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%; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: normal; +} +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; + content: ''; + content: none; +} +.clearfix { + *zoom: 1; +} +.clearfix:before, +.clearfix:after { + display: table; + content: ""; +} +.clearfix:after { + clear: both; +} +.info, +.error, +.success, +.warning { + border-width: 1px; + border-style: solid; + line-height: 1.5; + margin-top: 14px; + padding: 7px 14px 7px 50px; + position: relative; + border-radius: 7px 7px 7px 7px; +} +.info:after, +.error:after, +.success:after, +.warning:after { + background-repeat: no-repeat, repeat; + background-size: 24px, auto; + content: ""; + display: block; + height: 24px; + left: 13px; + position: absolute; + top: 5px; + width: 24px; +} +.info > a, +.error > a, +.success > a, +.warning > a { + text-decoration: underline; +} +.info { + background-color: #4674a4; + border-color: #304d77; + color: #ffffff; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); + text-shadow: 0 -1px 0 rgba(0,0,0,0.8); +} +.info:after { + background-image: url('../icon/infoBlue.svg'); +} +.info > a, +.info > a:hover { + color: #ffffff; +} +.success { + background-color: #74a446; + border-color: #4d7730; + color: #ffffff; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); + text-shadow: 0 -1px 0 rgba(0,0,0,0.8); +} +.success:after { + background-image: url('../icon/successGreen.svg'); +} +.success > a, +.success > a:hover { + color: #ffffff; +} +.warning { + background-color: #efcb50; + border-color: #e9bf2b; + color: #000000; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +.warning:after { + background-image: url('../icon/warningYellow.svg'); +} +.warning > a, +.warning > a:hover { + color: #000000; +} +.error { + background-color: #c95145; + border-color: #913d37; + color: #ffffff; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); + text-shadow: 0 -1px 0 rgba(0,0,0,0.8); +} +.error:after { + background-image: url('../icon/errorRed.svg'); +} +.error > a, +.error > a:hover { + color: #ffffff; +} +.innerError { + background-color: #c95145; + border: 1px solid #913d37; + color: #ffffff; + display: table; + line-height: 1.5; + margin-top: 7px; + padding: 2px 10px; + position: relative; + border-radius: 7px 7px 7px 7px; +} +.innerError:after { + border: 7px solid transparent; + border-bottom-color: #913d37; + border-top-width: 0; + content: ""; + display: inline-block; + left: 9px; + position: absolute; + top: -7px; + z-index: 100; +} +.innerError:before { + border: 6px solid transparent; + border-bottom-color: #c95145; + border-top-width: 0; + content: ""; + display: inline-block; + left: 10px; + position: absolute; + top: -6px; + z-index: 101; } - - - -/* ############## Globals ############## */ - -* { - text-overflow: ellipsis; +button, +input[type='reset'], +input[type='submit'], +input[type='button'], +.button { + border-style: solid; + border-width: 1px; + cursor: pointer; + display: inline-block; + margin: 0 2px; + min-height: 17px; + padding: 5px 13px; + position: relative; + border-radius: 15px 15px 15px 15px; +} +.button, +input[type='reset']:not([disabled]), +input[type='submit']:not([disabled]), +input[type='button']:not([disabled]), +button:not([disabled]) { + background-color: #e3e3e3; + border-color: #bbbbbb; + color: #999999; + text-decoration: none; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); } - -img { - vertical-align: middle !important; +.button.buttonPrimary, +input[type='submit']:not([disabled]), +input[type='button']:not([disabled]).buttonPrimary, +button:not([disabled]).buttonPrimary { + background-color: #d8e7f5; + border-color: #6699cc; + color: #6699cc; + font-weight: bold; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +.button:hover, +input[type='reset']:not([disabled]):hover, +input[type='submit']:not([disabled]):hover, +input[type='button']:not([disabled]):hover, +button:not([disabled]):hover { + background-color: #ffe5c8; + border-color: #ffaa22; + color: #666666; + text-decoration: none; + z-index: 100; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +.button.buttonPrimary:hover, +input[type='submit']:not([disabled]):hover, +input[type='button']:not([disabled]).buttonPrimary:hover, +button:not([disabled]).buttonPrimary:hover { + background-color: #cce0f2; + border-color: #4080bf; + color: #6699cc; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +input[type='reset']:disabled, +input[type='submit']:disabled, +input[type='button']:disabled, +button:disabled { + background-color: #e3e3e3; + border-color: #bbbbbb; + color: #b3b3b3; + cursor: not-allowed; + text-decoration: none; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +.button.active, +input[type='button'].active, +button.active, +.button.active:hover, +input[type='button'].active:hover, +button.active:hover { + background-color: #999999; + border-color: #8c8c8c; + color: #e3e3e3; + -webkit-box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.1); + -moz-box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.1); + -ms-box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.1); + -o-box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.1); + box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.1); + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +.buttonList > li { + display: inline-block; +} +.buttonList > li > .button { + margin: 0; +} +.buttonGroup > li { + display: inline-block; +} +.buttonGroup > li > .button { + margin: 0 0 0 -1px; + border-radius: 0 0 0 0; +} +.buttonGroup > li:first-child > .button { + border-top-left-radius: 15px; + border-bottom-left-radius: 15px; +} +.buttonGroup > li:last-child > .button { + border-top-right-radius: 15px; + border-bottom-right-radius: 15px; +} +.sidebar button, +.sidebar input[type='reset'], +.sidebar input[type='submit'], +.sidebar input[type='button'], +.sidebar .button { + font-size: 85%; + padding: 5px 11px; +} +button.small, +.button.small { + font-size: 85%; + min-height: 13px; + padding: 5px 11px; + border-radius: 3px 3px 3px 3px; +} +.button > img { + margin: -5px -5px -5px -5px; +} +.button > img + span { + margin-left: 6px; +} +#colorPickerGradient { + background-color: #f00; + background-image: url('../images/colorPickerGradient.png'); + background-repeat: no-repeat; + border: 1px solid #000000; + cursor: default; + display: inline-block; + height: 256px; + overflow: hidden; + position: relative; + width: 256px; +} +#colorPickerGradient > span { + border: 1px solid #000000; + border-radius: 10px; + display: block; + height: 10px; + left: -4px; + position: absolute; + top: -4px; + width: 10px; +} +#colorPickerGradient > span > span { + border: 1px solid #ffffff; + border-radius: 10px; + display: block; + height: 8px; + width: 8px; +} +#colorPickerBar { + background-image: url('../images/colorPickerBar.png'); + background-repeat: repeat-x; + border: 1px solid #000000; + cursor: default; + display: inline-block; + height: 256px; + margin-left: 10px; + position: relative; + width: 16px; +} +#colorPickerBar > span { + display: inline-block; + height: 1px; + left: 0; + position: absolute; + top: 27px; + width: 16px; +} +#colorPickerBar > span:after, +#colorPickerBar > span:before { + content: ""; + display: block; + height: 0; + position: absolute; + top: 0; + width: 0; +} +#colorPickerBar > span:after { + border-bottom: 5px solid transparent; + border-right: 5px solid #000000; + border-top: 5px solid transparent; + right: -7px; + top: -5px; +} +#colorPickerBar > span:before { + border-bottom: 5px solid transparent; + border-left: 5px solid #000000; + border-top: 5px solid transparent; + left: -7px; + top: -5px; +} +#colorPickerForm { + display: inline-block; + margin-left: 20px; + position: relative; + text-align: right; + width: 100px; +} +#colorPickerForm > .colors > .new, +#colorPickerForm > .colors > .old { + border: 1px solid #000000; + display: block; + height: 24px; +} +#colorPickerForm > .colors > .old { + border-top-width: 0; +} +#colorPickerForm > .hex { + margin-top: 21px; +} +#colorPickerForm > .rgba { + margin-top: 21px; +} +#colorPickerForm > .rgba > li.a { + margin-top: 7px; +} +#colorPickerForm > .rgba > li, +#colorPickerForm > .hex > li { + text-align: right; +} +#colorPickerForm > .rgba > li input, +#colorPickerForm > .hex > li input { + margin-left: 7px; + width: 80px; +} +.ui-datepicker { + background-color: #ffffff; + border: 1px solid #cccccc; + color: #666666; + margin-top: 7px; + -webkit-box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2); + -moz-box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2); + -ms-box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2); + -o-box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2); + box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2); +} +.ui-datepicker:after { + border: 7px solid transparent; + border-bottom-color: #cccccc; + border-top-width: 0; + content: ""; + display: inline-block; + left: 9px; + position: absolute; + top: -7px; + z-index: 100; +} +.ui-datepicker:before { + border: 6px solid transparent; + border-bottom-color: #ffffff; + border-top-width: 0; + content: ""; + display: inline-block; + left: 10px; + position: absolute; + top: -6px; + z-index: 101; +} +.ui-datepicker a:hover { + text-decoration: none; +} +.ui-datepicker > .ui-datepicker-header { + padding: 4px; + text-align: center; +} +.ui-datepicker > .ui-datepicker-header > .ui-datepicker-prev, +.ui-datepicker > .ui-datepicker-header > .ui-datepicker-next { + background-repeat: no-repeat; + background-size: 24px; + display: inline-block; + height: 24px; + line-height: 600%; + overflow: hidden; + text-align: center; + width: 24px; +} +.ui-datepicker > .ui-datepicker-header > .ui-datepicker-prev { + background-image: url('../icon/circleArrowLeftColored.svg'); + float: left; +} +.ui-datepicker > .ui-datepicker-header > .ui-datepicker-next { + background-image: url('../icon/circleArrowRightColored.svg'); + float: right; +} +.ui-datepicker > table { + border-collapse: collapse; + border-spacing: 0; + width: 100%; +} +.ui-datepicker > table > thead { + background-color: #336699; +} +.ui-datepicker > table > thead > tr > th { + color: #ffffff; + font-size: 85%; + padding: 5px 0; + text-transform: uppercase; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); + text-shadow: 0 -1px 0 rgba(0,0,0,0.8); +} +.ui-datepicker > table > tbody > tr { + border-bottom: 1px solid #cccccc; +} +.ui-datepicker > table > tbody > tr:last-child { + border-bottom: 0; +} +.ui-datepicker > table > tbody > tr > td { + border-right: 1px solid #cccccc; +} +.ui-datepicker > table > tbody > tr > td:last-child { + border-right: 0; +} +.ui-datepicker > table > tbody > tr > td > span, +.ui-datepicker > table > tbody > tr > td > a { + display: inline-block; + color: #666666; + font-weight: bold; + height: 30px; + line-height: 30px; + text-align: center; + width: 30px; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +.ui-datepicker .ui-datepicker-calendar .ui-state-default { + background-color: #f1f5fa; +} +.ui-datepicker .ui-datepicker-unselectable .ui-state-default { + background-color: #fcfdfe; + color: #808080; +} +.ui-datepicker .ui-datepicker-calendar .ui-state-hover { + background-color: #d8e7f5; +} +.ui-datepicker .ui-datepicker-calendar .ui-state-active { + background-color: #d8e7f5; +} +.dialogContainer { + background: rgba(0,0,0,0.4); + border: 14px solid transparent; + margin-left: auto; + margin-right: auto; + max-width: 90%; + min-width: 500px; + position: fixed; + border-radius: 15px 15px 15px 15px; + -webkit-box-shadow: 0 1px 23px 0 rgba(0,0,0,0.3); + -moz-box-shadow: 0 1px 23px 0 rgba(0,0,0,0.3); + -ms-box-shadow: 0 1px 23px 0 rgba(0,0,0,0.3); + -o-box-shadow: 0 1px 23px 0 rgba(0,0,0,0.3); + box-shadow: 0 1px 23px 0 rgba(0,0,0,0.3); +} +.dialogTitlebar { + background-color: #336699; + border-bottom: 1px solid rgba(0,0,0,0.1); + display: block; + padding: 10px 20px; + min-height: 27px; + position: relative; + border-radius: 7px 7px 0 0; +} +.dialogTitlebar .dialogTitle { + color: #ffffff; + display: block; + font-size: 170%; + font-weight: bold; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); + text-shadow: 0 -1px 0 rgba(0,0,0,0.8); +} +.dialogTitlebar .dialogCloseButton { + background-image: url(../icon/deleteInverse.svg); + background-position: top left; + background-repeat: no-repeat; + background-size: 32px; + cursor: pointer; + height: 32px; + position: absolute; + right: 10px; + top: 5px; + width: 32px; +} +.dialogTitlebar .dialogCloseButton span { + left: -9001px; + position: absolute; + top: -9001px; + width: 0; +} +.dialogContent { + background-color: #fcfdfe; + color: #666666; + overflow: auto; + padding: 10px 20px 20px; +} +.dialogContent.dialogForm { + margin-bottom: 49px; +} +.dialogContent:not(.dialogForm) { + border-radius: 0 0 7px 7px; +} +.dialogContent.overlayLoading { + background-image: url(../icon/spinner.svg); + background-position: center center; + background-repeat: no-repeat; + background-size: 32px; +} +.dialogContent dl:not(.plain) > dt { + width: 170px; +} +.dialogContent dl:not(.plain) > dd { + margin-left: 190px; +} +.dialogContent .formSubmit { + background-color: #f1f5fa; + border-top: 1px solid #cccccc; + bottom: 0; + left: 0; + padding: 10px 0; + position: absolute; + width: 100%; + border-radius: 0 0 7px 7px; +} +.dialogOverlay { + background-color: rgba(0,0,0,0.5); + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; +} +#packageInstallationDialogContainer > .boxHeadline { + margin-top: 0; +} +#packageInstallationAction { + margin-bottom: 4px; +} +.spinner { + border: 1px solid rgba(0,0,0,0.3); + color: #fff; + left: 46%; + padding: 7px 0; + position: fixed; + right: 46%; + text-align: center; + top: 200px; + width: 70px; + z-index: 401; + border-radius: 6px 6px 6px 6px; + -webkit-box-shadow: 0 1px 7px 0 rgba(0,0,0,0.5); + -moz-box-shadow: 0 1px 7px 0 rgba(0,0,0,0.5); + -ms-box-shadow: 0 1px 7px 0 rgba(0,0,0,0.5); + -o-box-shadow: 0 1px 7px 0 rgba(0,0,0,0.5); + box-shadow: 0 1px 7px 0 rgba(0,0,0,0.5); + background-color: rgba(0,0,0,0.5); + background-image: -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.7)); + background-image: -moz-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.7)); + background-image: -o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.7)); + background-image: -ms-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.7)); + background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.7)); +} +.spinner img { + margin-bottom: 7px; +} +.systemConfirmation p { + padding-top: 7px; +} +#systemNotification { + left: 40%; + opacity: 0; + position: fixed; + right: 40%; + top: 0; + z-index: 460; + -webkit-transition-property: opacity; + -moz-transition-property: opacity; + -ms-transition-property: opacity; + -o-transition-property: opacity; + transition-property: opacity; + -webkit-transition-duration: .3s; + -moz-transition-duration: .3s; + -ms-transition-duration: .3s; + -o-transition-duration: .3s; + transition-duration: .3s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +#systemNotification.open { + opacity: 1; +} +#systemNotification > p { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-top-width: 0; + margin-top: 0; +} +.dropdown { + position: relative; +} +.dropdown .dropdownToggle:active, +.dropdown.dropdownOpen .dropdownToggle { + outline: 0; +} +.dropdown.preInput { + display: table; + width: 100%; +} +.dropdown.preInput input, +.dropdown.preInput textarea { + min-width: 300px; +} +.dropdown.preInput input { + display: table-cell; + margin: 0; + width: 99%; +} +.dropdown.preInput textarea { + display: block; + margin-top: 0; +} +.dropdown.preInput .dropdownCaption { + cursor: pointer; + display: table-cell; + letter-spacing: -1px; + padding-left: 4px; + padding-right: 7px; + vertical-align: middle; + width: 1%; +} +.dropdown.preInput .dropdownCaption.button { + border-right-width: 0; + border-radius: 15px 0 0 15px; +} +.dropdown.preInput .dropdownCaption span { + margin-right: -1px; + padding-left: 4px; + white-space: nowrap; +} +.dropdown.preInput .dropdownCaption span.active { + background-image: url(../icon/dropdown.svg); + background-position: right center; + background-repeat: no-repeat; + color: #666666; + padding-right: 14px; +} +.dropdown.preInput .dropdownCaptionTextarea { + cursor: pointer; + margin: 0 0 -1px 0; + padding-left: 7px; + padding-right: 7px; +} +.dropdown.preInput .dropdownCaptionTextarea.button { + border-radius: 15px 15px 0 0; +} +.dropdown.preInput .dropdownCaptionTextarea~ .dropdownMenu { + top: 10%; +} +.dropdown.preInput .dropdownCaptionTextarea span { + white-space: nowrap; +} +.dropdown.preInput .dropdownCaptionTextarea span.active { + background-image: url(../icon/dropdown.svg); + background-position: right center; + background-repeat: no-repeat; + color: #666666; + padding-right: 14px; +} +.dropdown .dropdownMenu { + background-color: #ffffff; + border: 1px solid #cccccc; + color: #666666; + display: none; + float: left; + left: 0; + min-width: 160px; + padding: 4px 0; + position: absolute; + text-align: left; + z-index: 350; + -webkit-box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2); + -moz-box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2); + -ms-box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2); + -o-box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2); + box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2); +} +.dropdown .dropdownMenu:after { + border: 7px solid transparent; + border-bottom-color: #cccccc; + border-top-width: 0; + content: ""; + display: inline-block; + left: 9px; + position: absolute; + top: -7px; + z-index: 100; +} +.dropdown .dropdownMenu:before { + border: 6px solid transparent; + border-bottom-color: #ffffff; + border-top-width: 0; + content: ""; + display: inline-block; + left: 10px; + position: absolute; + top: -6px; + z-index: 101; +} +.dropdown .dropdownMenu.dropdownArrowRight:after { + left: auto; + right: 9px; +} +.dropdown .dropdownMenu.dropdownArrowRight:before { + left: auto; + right: 10px; +} +.dropdown .dropdownMenu li { + display: block; +} +.dropdown .dropdownMenu li:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText), +.dropdown .dropdownMenu li.dropdownList > li:hover:not(.dropdownDivider), +.dropdown .dropdownMenu li.dropdownNavigationItem { + background-color: #d8e7f5; +} +.dropdown .dropdownMenu li.dropdownDivider { + border-top: 1px dotted #cccccc; + margin: 4px; +} +.dropdown .dropdownMenu li.dropdownText { + font-size: 85%; + padding: 4px 14px; +} +.dropdown .dropdownMenu li.boxFlag { + padding-top: 2px; +} +.dropdown .dropdownMenu li > a, +.dropdown .dropdownMenu li > span { + clear: both; + color: #666666; + cursor: pointer; + display: block; + padding: 4px 14px; + text-decoration: none; + white-space: nowrap; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +.dropdown .dropdownMenu li > a:hover, +.dropdown .dropdownMenu li > span:hover { + color: #666666; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +.dropdown .dropdownMenu li > label { + display: block; +} +.dropdown .dropdownMenu li .containerHeadline { + margin-bottom: 0; +} +.dropdown .dropdownMenu li .containerHeadline h2 { + font-size: 85%; +} +.dropdown.dropdownOpen .dropdownMenu { + display: block; +} +.dropdown .dropdownToggle { + cursor: pointer; +} +.boxFlag > .box24, +.boxFlag.box24 { + min-height: 20px; } - -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; +fieldset { + padding-top: 14px; +} +fieldset > legend { + border-bottom: 1px solid #cccccc; + color: #808080; + font-family: "Trebuchet MS", Arial, sans-serif; + font-size: 140%; + font-weight: bold; + width: 100%; + padding-bottom: 4px; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +fieldset > legend + small { + top: -7px; + position: relative; +} +fieldset > dl:not(:first-of-type) { + margin-top: 7px; +} +fieldset:not(:first-of-type) { + margin-top: 14px; +} +dl:not(.plain) { + position: relative; + *zoom: 1; +} +dl:not(.plain):before, +dl:not(.plain):after { + display: table; + content: ""; +} +dl:not(.plain):after { + clear: both; +} +dl:not(.plain) > dd:not(:first-of-type), +dl:not(.plain) > dt:not(:first-of-type) { + margin-top: 7px; +} +dl:not(.plain) > dt { + color: #336699; + float: left; + text-align: right; + width: 230px; +} +dl:not(.plain) > dt > label { + display: block; +} +dl:not(.plain) > dt.reversed { + left: 270px; + margin-top: 2px; + position: absolute; + text-align: left; + width: auto; +} +dl:not(.plain) > dt.reversed ~ dd > input[type='checkbox'], +dl:not(.plain) > dt.reversed ~ dd > input[type='radio'] { + margin-left: 0; +} +dl:not(.plain) > dd { + margin-left: 250px; +} +dl:not(.plain) > dd > small:not(.innerError) { + color: #808080; + display: block; + margin-top: 2px; +} +dl:not(.plain) > dd > label { + color: #336699; + display: block; +} +dl:not(.plain) > dd > label > input[type='checkbox'], +dl:not(.plain) > dd > label > input[type='radio'] { + margin: 2px 2px 2px 0; +} +dl:not(.plain) > dd > input[type='checkbox'] ~ small, +dl:not(.plain) > dd > input[type='radio'] ~ small { + margin-left: 21px; +} +dl:not(.plain) > dd:not(.floated) > label ~ small { + margin-left: 21px; +} +dl:not(.plain) > dd.floated > label { + display: inline-block; + margin-right: 7px; +} +dl:not(.plain) > dd > input + label, +dl:not(.plain) > dd textarea + label, +dl:not(.plain) > dd select + label { + margin-top: 2px; +} +dl:not(.plain).wide > dt { + display: none; +} +dl:not(.plain).wide > dd { + margin-left: 0; +} +dl:not(.plain).disabled > dt, +dl:not(.plain).disabled > dd > label { + color: #808080; +} +.sidebar dl:not(.plain) > dt { + text-align: left; + float: none; + width: auto; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +.sidebar dl:not(.plain) > dd { + margin-top: 2px; + margin-left: 0; + margin-bottom: 14px; } - -a:hover { - text-decoration: underline; - color: #036; +.formSubmit { + margin-top: 14px; + text-align: center; } - -hr { - display: none; +button, +input[type='reset'], +input[type='submit'], +input[type='button'], +input[type='checkbox'], +input[type='radio'], +select:not([multiple]) { + cursor: pointer; } - -::selection { - text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important; - color: #300; - background-color: rgba(255, 170, 34, .7); +input[type='text'], +input[type='search'], +input[type='date'], +input[type='email'], +input[type='number'], +input[type='url'], +input[type='password'], +textarea, +select[multiple] { + box-sizing: border-box; + padding: 5px 3px; + margin: 0; } - -a, -img[src*='delete'], -img[src*='uninstall'], -img[src*='install'], -img[src*='update'], -img[src*='run'], -img[src*='info'], -img[src*='disable'], -img[src*='enable'] { - cursor: pointer; +select { + padding: 1px 1px 1px 3px; + margin: 0; } - - - -/* ############## ToDo: Global Structural Classes ############## */ - -/* -- -- -- Misc -- -- -- */ - -.hot { - color: #b00; +input[type='text'], +input[type='search'], +input[type='date'], +input[type='datetime'], +input[type='email'], +input[type='number'], +input[type='url'], +input[type='password'], +textarea, +select[multiple] { + background-color: #ffffff; + border-color: #cccccc; + border-style: solid; + border-width: 1px; + color: #666666; } - -.invisible { - position: absolute; - left: -9000px; - top: -9000px; +input[type='text']:hover, +input[type='search']:hover, +input[type='date']:hover, +input[type='datetime']:hover, +input[type='email']:hover, +input[type='number']:hover, +input[type='url']:hover, +input[type='password']:hover, +textarea:hover, +select[multiple]:hover { + background-color: #fff9f4; + border-color: #ffaa22; } - -/* Uniform background image */ - -.wcf-headerImage { - background-image: url('../../../images/header.png'); +input[type='text']:active, +input[type='search']:active, +input[type='date']:active, +input[type='datetime']:active, +input[type='email']:active, +input[type='number']:active, +input[type='url']:active, +input[type='password']:active, +textarea:active, +select[multiple]:active, +input[type='text']:focus, +input[type='search']:focus, +input[type='date']:focus, +input[type='datetime']:focus, +input[type='email']:focus, +input[type='number']:focus +input[type='url']:focus, +input[type='password']:focus, +textarea:focus, +select[multiple]:focus { + background-color: #fff9f4; + border-color: #ffaa22; + outline: 0; } - -/* -- -- -- URLs -- -- -- */ - -.wcf-externalURL { - background-image: url('../../icon/externalURL1.svg'); - background-position: right center; - background-repeat: no-repeat; - padding-right: 17px; +input[type='text'][readonly], +input[type='search'][readonly], +input[type='email'][readonly], +input[type='number'][readonly], +input[type='date'][readonly], +input[type='datetime'][readonly], +input[type='url'][readonly], +input[type='password'][readonly], +textarea[readonly], +select[multiple][readonly] { + background-color: #f2f2f2; + border-color: #cccccc; } - -.wcf-eMailLink, -a[href^="mailto:"] { - background-image: url('../../icon/email1.svg'); - background-position: left center; - background-repeat: no-repeat; - padding-left: 17px; +input[type='text'][disabled], +input[type='search'][disabled], +input[type='date'][disabled], +input[type='datetime'][disabled], +input[type='email'][disabled], +input[type='number'][disabled], +input[type='url'][disabled], +input[type='password'][disabled], +textarea[disabled], +select[multiple][disabled] { + background-color: #f2f2f2; + border-color: #cccccc; + color: #808080; + cursor: not-allowed; +} +.formSuccess input[type='text'], +.formSuccess input[type='search'], +.formSuccess input[type='email'], +.formSuccess input[type='number'], +.formSuccess input[type='url'], +.formSuccess input[type='password'], +.formSuccess textarea { + background-color: #74a446; + border-color: #4d7730; +} +.formError input[type='text'], +.formError input[type='search'], +.formError input[type='email'], +.formError input[type='number'], +.formError input[type='url'], +.formError input[type='password'], +.formError textarea { + background-color: #c95145; + border-color: #913d37; +} +textarea { + width: 99%; +} +.tiny { + width: 50px; +} +.short { + min-width: 50px; + width: 10%; +} +.medium { + min-width: 100px; + width: 30%; +} +.long { + min-width: 150px; + width: 100%; +} +.uploadButton { + margin-top: 7px; + overflow: hidden; + position: relative; +} +.uploadButton input { + left: 0; + opacity: 0; + position: absolute; + top: 0; +} +.cke_skin_kama { + border-width: 0 !important; + padding: 0 !important; +} +.structuredList { + background-color: #fcfdfe; +} +.structuredList li { + padding: 4px 7px; + text-align: right; +} +.structuredList li:hover { + background-color: #ffe5c8; +} +.structuredList li:first-child { + border-radius: 6px 6px 0 0; +} +.structuredList li:last-child { + border-radius: 0 0 6px 6px; +} +.structuredList li.category { + background-color: #e4eef8; +} +.structuredList li.category:hover { + background-color: #ffe5c8; +} +.structuredList li span { + float: left; +} +.structuredList li label { + cursor: pointer; + margin: 0 7px; + padding: 0 21px; +} +.editableItemList ul li { + cursor: pointer; + margin-left: 4px; +} +.editableItemList ul li:first-child { + margin-left: 0; +} +select > option { + display: block !important; } - -/* -- -- -- Margins -- -- -- */ - -.wcf-marginTop { - margin-top: 15px; +body { + background-color: #1f4060; + color: #666666; + font-family: "Trebuchet MS", Arial, sans-serif; + font-size: 13px; + line-height: 1.27; } - -.wcf-marginBottom { - margin-bottom: 15px; +small { + font-size: 85%; } - -/* -- -- -- Paddings -- -- -- */ - -/* ToDo: Columns */ - -.wcf-columns-2 { - width: 45%; +img { + vertical-align: middle; } - -.wcf-columns-3 { - width: 30%; +img.disabled { + opacity: .3; } - - -/* -- -- -- ToDo: Floated Elements -- -- -- */ - -/* possibly obsolete */ - -.floatContainer:after { - content: ""; - height: 0; - display: block; - clear: both; +a { + color: #336699; + cursor: pointer; + text-decoration: none; } - -.floated { - margin-right: 5px; - margin-left: 5px; - float: left; +a:hover { + color: #003366; + text-decoration: underline; } - - - -/* -- -- -- Shadows -- -- -- */ - -/* Shadows for boxes - do not use on small boxes! */ - -.wcf-shadow1 { - -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1); - -moz-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1); - -ms-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1); - /* ToDo: Opera doesn't like that so much! Bug-report sent to Opera - -o-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1); - box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);*/ +a.externalURL { + background-image: url('../icon/externalURL.svg'); + background-position: right center; + background-repeat: no-repeat; + padding-right: 17px; } - -/* Use that shadow for tab menus - do not use on small boxes! */ - -.wcf-shadow2 { - -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1), 0 -8px 10px -10px rgba(0, 0, 0, .1); - -moz-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1), 0 -8px 10px -10px rgba(0, 0, 0, .1); - -ms-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1), 0 -8px 10px -10px rgba(0, 0, 0, .1); - /* ToDo: Opera doesn't like that so much! Bug-report sent to Opera - -o-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1), 0 -8px 10px -10px rgba(0, 0, 0, .1); - box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1), 0 -8px 10px -10px rgba(0, 0, 0, .1);*/ +a.externalURL:hover { + background-image: url('../icon/externalURLColored.svg'); } - - - -/* ############## Containers ############## */ - -/* -- -- -- Globals -- -- -- */ - -/** - * This is a generic container for surrounding blocks of - * text with an optional leading icon. The icon-size is - * free. The icon-Container is optional. - * Note: - * This box does not support RTL in WebKit-browsers! - * Thus the box-style may change in the future. - */ - -.wcf-container { - overflow: hidden; - box-sizing: border-box; +.footer, +.logo { + color: #ffffff; } - -.wcf-containerIcon { - float: left; - margin-right: 5px; +.footer a, +.logo a { + color: #407fbf; } - -.wcf-containerContent { - padding: 1px; - overflow: hidden; +.footer a:hover, +.logo a:hover { + color: #ffffff; } - - - -/* ############## Badges ############## */ - -/* Globals */ - -.wcf-badge { - font-size: 85%; - font-weight: bold; - text-shadow: none; - text-decoration: none; - border-radius: 13px; - background-color: rgba(255, 255, 255, 1); - margin-right: -3px; - margin-left: 3px; - padding: 2px 5px; - display: inline-block; - position: relative; - top: -1px; +.htmlContent p { + margin: 1em 0; } - -/* Badge Types */ - -.wcf-badgeBorder { - border: 1px solid #ccc; +.htmlContent h1 { + font-size: 140%; } - -.wcf-badgeBlue { - color: #68b; - border: 1px solid #9be; - background-color: #def; +.htmlContent h2 { + font-size: 120%; } - -.wcf-badgeGreen { - color: #090; - border: 1px solid #0c0; - background-color: #efe; +.htmlContent h1, +.htmlContent h2, +.htmlContent h3, +.htmlContent h4, +.htmlContent h5, +.htmlContent h6 { + font-weight: bold; + margin: 0.5em 0; } - -.wcf-badgeYellow { - color: #990; - border: 1px solid #cc0; - background-color: #ffd; +body > iframe[src="about:blank"] { + display: none; } - -.wcf-badgeRed { - color: #c00; - border: 1px solid #f99; - background-color: #fee; +::selection { + text-shadow: 0 1px 0 rgba(255,255,255,0.5) !important; + color: #300; + background-color: rgba(255,170,34,0.7); } - -/* Buttons */ - -.wcf-badgeButton { - cursor: pointer; - border-radius: 30px; - margin-right: 0; - margin-left: 0; - padding: 3px 10px 5px; - display: inline-block; +.invisible { + display: none; +} +.marginTop { + margin-top: 14px; +} +.pointer { + cursor: pointer; +} +.icon16 { + height: 16px; + width: 16px; +} +.icon24 { + height: 24px; + width: 24px; +} +.icon32 { + height: 32px; + width: 32px; +} +.icon48 { + height: 48px; + width: 48px; +} +.icon64 { + height: 64px; + width: 64px; +} +.icon96 { + height: 96px; + width: 96px; +} +.icon128 { + height: 128px; + width: 128px; +} +.icon256 { + height: 256px; + width: 256px; +} +.iconFlag { + height: 15px; + width: 24px; +} +.framed > img { + background-color: #ffffff; + border: 1px solid #cccccc; + padding: 1px; +} +.balloonTooltip { + background-color: rgba(0,0,0,0.8); + color: #ffffff; + font-size: .85em; + max-width: 300px; + padding: 5px 10px 7px; + position: absolute; + z-index: 800; + border-radius: 6px 6px 6px 6px; + -webkit-box-shadow: 0 3px 7px 0 rgba(0,0,0,0.3); + -moz-box-shadow: 0 3px 7px 0 rgba(0,0,0,0.3); + -ms-box-shadow: 0 3px 7px 0 rgba(0,0,0,0.3); + -o-box-shadow: 0 3px 7px 0 rgba(0,0,0,0.3); + box-shadow: 0 3px 7px 0 rgba(0,0,0,0.3); +} +.balloonTooltip .pointer { + border-color: rgba(0,0,0,0.8) transparent; + border-style: solid; + border-width: 0 5px 5px; + left: 50%; + position: absolute; + top: -5px; +} +.popover { + background-color: rgba(0,0,0,0.4); + background-image: url(../icon/spinner.svg); + background-position: center center; + background-repeat: no-repeat; + background-size: 32px; + max-width: 450px; + min-height: 32px; + min-width: 150px; + padding: 7px; + position: absolute; + vertical-align: middle; + z-index: 500; + border-radius: 6px 6px 6px 6px; + -webkit-box-shadow: 0 1px 7px 0 rgba(0,0,0,0.3); + -moz-box-shadow: 0 1px 7px 0 rgba(0,0,0,0.3); + -ms-box-shadow: 0 1px 7px 0 rgba(0,0,0,0.3); + -o-box-shadow: 0 1px 7px 0 rgba(0,0,0,0.3); + box-shadow: 0 1px 7px 0 rgba(0,0,0,0.3); +} +.popover:after { + border: 10px solid transparent; + content: ""; + display: inline-block; + position: absolute; + z-index: 100; +} +.popover.top:after { + border-bottom-width: 0; + border-top-color: rgba(0,0,0,0.4); + bottom: -10px; +} +.popover.bottom:after { + border-bottom-color: rgba(0,0,0,0.4); + border-top-width: 0; + top: -10px; +} +.popover.right:after { + left: 10px; +} +.popover.left:after { + right: 10px; +} +.popoverContent { + background-color: #fcfdfe; + color: #666666; + opacity: 0; + padding: 7px 14px; + border-radius: 6px 6px 6px 6px; +} +.badge { + background-color: #666666; + border-radius: 13px; + color: #ffffff; + display: inline-block; + font-size: 85%; + font-weight: normal !important; + padding: 1px 8px 2px; + position: relative; + text-shadow: none; + white-space: nowrap; +} +.badge.badgeUpdate { + background-color: #336699; + color: #ffffff; +} +.badge.badgeInverse { + background-color: #ffffff; + color: #336699; +} +.badge.green { + background-color: #009900; + color: #eeffee; +} +.badge.red { + background-color: #cc0000; + color: #ffeeee; +} +.badge.black { + background-color: #333; + color: #fff; +} +.badge.brown { + background-color: #c63; + color: #fff; +} +.badge.orange { + background-color: #f90; + color: #fff; +} +.badge.yellow { + background-color: #ff0; + color: #333; +} +.badge.blue { + background-color: #09f; + color: #fff; +} +.badge.purple { + background-color: #c0f; + color: #fff; +} +.badge.pink { + background-color: #f0c; + color: #fff; +} +a.badge:hover { + color: #ffffff; + text-decoration: none; +} +a.badge:hover.black { + background-color: #000; +} +a.badge:hover.brown { + background-color: #930; +} +a.badge:hover.red { + background-color: #900; +} +a.badge:hover.orange { + background-color: #f60; +} +a.badge:hover.yellow { + background-color: #cc0; +} +a.badge:hover.green { + background-color: #090; +} +a.badge:hover.blue { + background-color: #06c; +} +a.badge:hover.purple { + background-color: #90c; +} +a.badge:hover.pink { + background-color: #c09; +} +.containerHeadline > h1 > .badge { + font-size: 70%; + top: -1px; +} +.boxHeadline > hgroup > h1 .badge { + font-size: 50%; + top: -3px; +} +.boxSubHeadline > hgroup > h1 .badge { + font-size: 60%; +} +.tabularBoxTitle > hgroup > h1 > .badge { + font-size: 70%; + top: -1px; +} +fieldset > legend > .badge { + font-size: 50%; + top: -3px; +} +#lbOverlay { + background-color: #000; + bottom: 0; + cursor: pointer; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 399; +} +#lbPrevLink, +#lbNextLink { + display: block; + opacity: 0; + overflow: hidden; + position: absolute; + top: 0; + width: 50%; + outline: none; + -webkit-transition-property: opacity; + -moz-transition-property: opacity; + -ms-transition-property: opacity; + -o-transition-property: opacity; + transition-property: opacity; + -webkit-transition-duration: .2s; + -moz-transition-duration: .2s; + -ms-transition-duration: .2s; + -o-transition-duration: .2s; + transition-duration: .2s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +#lbPrevLink > span, +#lbNextLink > span { + background-color: #fff; + padding: 7px; + position: absolute; + text-transform: uppercase; + top: 20%; +} +#lbPrevLink:hover > span, +#lbNextLink:hover > span { + -webkit-box-shadow: 0 0 20px 0 #ffaa22; + -moz-box-shadow: 0 0 20px 0 #ffaa22; + -ms-box-shadow: 0 0 20px 0 #ffaa22; + -o-box-shadow: 0 0 20px 0 #ffaa22; + box-shadow: 0 0 20px 0 #ffaa22; +} +#lbPrevLink { + left: 0; +} +#lbPrevLink > span { + left: 0; + padding-right: 14px; + text-align: right; + border-radius: 0 30px 30px 0; +} +#lbNextLink { + right: 0; +} +#lbNextLink > span { + padding-left: 14px; + right: 0; + border-radius: 30px 0 0 30px; +} +#lbEnlarge, +#lbCloseLink { + cursor: pointer; + display: block; + float: right; + margin: 5px 0; + padding-right: 7px; + outline: none; +} +#lbCenter, +#lbBottomContainer { + background-color: #fff; + overflow: hidden; + position: absolute; + z-index: 400; +} +.lbLoading { + background: #fff url(../icon/spinner.svg) no-repeat center; + background-size: 48px; +} +#lbImage { + background-repeat: no-repeat; + background-size: cover; + border: 10px solid #fff; + left: 0; + position: absolute; + top: 0; +} +#lbImage:hover #lbNextLink, +#lbImage:hover #lbPrevLink { + opacity: 1; + -webkit-transition-property: opacity; + -moz-transition-property: opacity; + -ms-transition-property: opacity; + -o-transition-property: opacity; + transition-property: opacity; + -webkit-transition-duration: .2s; + -moz-transition-duration: .2s; + -ms-transition-duration: .2s; + -o-transition-duration: .2s; + transition-duration: .2s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +#lbBottom { + border: 10px solid #fff; + border-top-style: none; + color: #666; +} +#lbCaption, +#lbNumber { + margin-right: 71px; +} +#lbCaption { + font-weight: bold; +} +.layoutFluid { + padding: 0 21px; +} +.layoutFixed { + margin: 0 auto; + width: 1200px; +} +#pageHeader { + margin-top: 57px; + z-index: 100; +} +#top { + display: block; + height: 1px; + visibility: hidden; +} +.userPanel { + background-color: rgba(0,0,0,0.5); + height: 40px; + left: 0; + position: fixed; + top: 0; + right: 0; + z-index: 200; +} +.userPanel > div > ul.userPanelItems { + float: left; + *zoom: 1; +} +.userPanel > div > ul.userPanelItems:before, +.userPanel > div > ul.userPanelItems:after { + display: table; + content: ""; +} +.userPanel > div > ul.userPanelItems:after { + clear: both; +} +.userPanel > div > ul.userPanelItems > li { + float: left; +} +.userPanel > div > ul.userPanelItems > li > a, +.userPanel > div > ul.userPanelItems > li > div:not(.dropdownMenu) { + color: #ffffff; + display: block; + height: 20px; + padding: 10px 8px; + position: relative; + text-shadow: 0 -1px 0 rgba(0,0,0,0.8); + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + -ms-transition-property: background-color; + -o-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: .2s; + -moz-transition-duration: .2s; + -ms-transition-duration: .2s; + -o-transition-duration: .2s; + transition-duration: .2s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +.userPanel > div > ul.userPanelItems > li > a:hover, +.userPanel > div > ul.userPanelItems > li > div:not(.dropdownMenu):hover { + background-color: rgba(0,0,0,0.4); + color: #ffffff; + text-decoration: none; +} +.userPanel > div > ul.userPanelItems > li > a > .badge.badgeInverse, +.userPanel > div > ul.userPanelItems > li > div:not(.dropdownMenu) > .badge.badgeInverse { + background-color: #336699; + color: #ffffff; + padding: 0 6px 1px; + position: absolute; + bottom: 4px; + left: 24px; + z-index: 300; +} +.userPanel > div > ul.userPanelItems > li > .framed > img { + padding: 0px; + margin-top: -2px; + margin-bottom: -2px; +} +.userPanel > div > .searchBar { + float: right; + padding: 6px 0 7px; + background-color: rgba(0,0,0,0.4); +} +.userPanel > div > .searchBar > form input[type="search"] { + background-color: transparent; + background-image: url("../icon/searchInverse.svg"); + background-repeat: no-repeat; + background-position: 7px 5px; + border-width: 0; + color: #ffffff; + padding: 6px 12px 5px 26px; + width: 180px; + -webkit-appearance: textfield; + text-shadow: 0 -1px 0 rgba(0,0,0,0.8); +} +.userPanel > div > .searchBar > form input[type="search"]:focus { + outline: 0; +} +.logo { + margin-bottom: 21px; +} +.logo a { + display: block; +} +.logo a:hover { + text-decoration: none; +} +.logo a h1 { + color: #ffffff; + float: right; + font-size: 160%; + padding-top: 21px; + text-shadow: 0 -1px 0 rgba(0,0,0,0.8); +} +.mainMenu > ul { + background-color: #f1f5fa; + display: inline-block; + letter-spacing: -4px; +} +.mainMenu > ul > li { + display: inline-block; + font-size: 120%; + margin-top: -7px; + letter-spacing: normal; + vertical-align: bottom; +} +.mainMenu > ul > li > a { + color: #666666; + display: inline-block; + padding: 9px 35px; +} +.mainMenu > ul > li > a:hover { + color: #336699; + text-decoration: none; +} +.mainMenu > ul > li > a > .badge { + font-size: 60%; + top: -2px; +} +.mainMenu > ul > li.active { + font-size: 140%; + margin-top: -8px; +} +.mainMenu > ul > li.active > a { + background-color: #e4eef8; + color: #336699; + font-weight: bold; + padding: 14px 35px 8px; +} +.mainMenu > ul > li:not(.active) { + padding-top: 5px; +} +.mainMenu > ul > li:not(:last-child) { + border-right: 1px solid #cccccc; +} +.navigation { + padding: 0 7px; +} +.navigation > ul { + display: inline-block; +} +.navigation > ul.navigationItems, +.navigation > ul.navigationIcons { + float: right; +} +.navigation > ul.navigationItems > li, +.navigation > ul.navigationIcons > li { + float: right; +} +.navigation > ul.navigationIcons > li { + padding: 0 3px; +} +.navigation > ul.navigationIcons > li > a { + display: inline-block; + padding: 3px; +} +.navigation > ul.navigationItems { + border-right: 1px dotted #cccccc; +} +.navigation > ul.navigationItems > li > p { + color: #336699; +} +.navigation > ul.navigationItems > li, +.navigation > ul.navigationMenuItems > li { + margin: 4px 7px 1px; +} +.navigation > ul.navigationItems > li > a, +.navigation > ul.navigationMenuItems > li > a { + color: #336699; + padding: 2px 0; +} +.navigation > ul.navigationItems > li > a:hover, +.navigation > ul.navigationMenuItems > li > a:hover { + color: #003366; + text-decoration: none; +} +.navigation > ul.navigationMenuItems > li { + display: inline-block; +} +.navigation > ul.navigationMenuItems > li > .badge { + top: -1px; +} +.navigationHeader { + background-color: #e4eef8; + border-bottom: 1px solid #cccccc; + border-top: 1px solid #cccccc; +} +.navigationFooter { + background-color: #e4eef8; + border-top: 1px solid #cccccc; +} +.footer { + padding-bottom: 14px; + z-index: 100; +} +.footer .footerContent { + text-align: center; +} +.footer .footerContent a { + text-shadow: 0 -1px 0 rgba(0,0,0,0.8); + -webkit-transition-property: color; + -moz-transition-property: color; + -ms-transition-property: color; + -o-transition-property: color; + transition-property: color; + -webkit-transition-duration: .1s; + -moz-transition-duration: .1s; + -ms-transition-duration: .1s; + -o-transition-duration: .1s; + transition-duration: .1s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +.footer .footerContent a:hover { + text-decoration: none; +} +#main { + z-index: 110; +} +#main > div { + background-color: #d8e7f5; +} +#main > div > .sidebar { + position: relative; + width: 300px; + z-index: 120; + -webkit-transition-property: width; + -moz-transition-property: width; + -ms-transition-property: width; + -o-transition-property: width; + transition-property: width; + -webkit-transition-duration: .2s; + -moz-transition-duration: .2s; + -ms-transition-duration: .2s; + -o-transition-duration: .2s; + transition-duration: .2s; + -webkit-transition-timing-function: ease; + -moz-transition-timing-function: ease; + -ms-transition-timing-function: ease; + -o-transition-timing-function: ease; + transition-timing-function: ease; +} +#main > div > .sidebar > .collapsibleButton { + background-color: #d8e7f5; + background-image: url('../icon/arrowRightColored.svg'); + background-position: 4px 4px; + background-repeat: no-repeat; + background-size: 16px; + border-radius: 6px 0 0 6px; + display: block; + height: 24px; + left: -20px; + position: absolute; + top: 0; + width: 24px; + -webkit-transition-property: left; + -moz-transition-property: left; + -ms-transition-property: left; + -o-transition-property: left; + transition-property: left; + -webkit-transition-duration: .2s; + -moz-transition-duration: .2s; + -ms-transition-duration: .2s; + -o-transition-duration: .2s; + transition-duration: .2s; + -webkit-transition-timing-function: ease; + -moz-transition-timing-function: ease; + -ms-transition-timing-function: ease; + -o-transition-timing-function: ease; + transition-timing-function: ease; +} +#main > div > .sidebar > div { + overflow: hidden; +} +#main > div > .content { + background-color: #ffffff; + min-height: 100px; + padding: 7px 38px 21px; + z-index: 130; + -webkit-transition-property: margin; + -moz-transition-property: margin; + -ms-transition-property: margin; + -o-transition-property: margin; + transition-property: margin; + -webkit-transition-duration: .2s; + -moz-transition-duration: .2s; + -ms-transition-duration: .2s; + -o-transition-duration: .2s; + transition-duration: .2s; + -webkit-transition-timing-function: ease; + -moz-transition-timing-function: ease; + -ms-transition-timing-function: ease; + -o-transition-timing-function: ease; + transition-timing-function: ease; +} +#main:not(.sidebarOrientationLeft):not(.sidebarOrientationRight) .sidebar { + display: none; +} +#main.sidebarOrientationLeft .content { + margin-left: 300px; +} +#main.sidebarOrientationLeft .sidebar { + float: left; +} +#main.sidebarOrientationRight.sidebarCollapsed > div > .content { + margin-right: 20px; +} +#main.sidebarOrientationRight.sidebarCollapsed > div > .sidebar { + width: 0; +} +#main.sidebarOrientationRight.sidebarCollapsed > div > .sidebar > .collapsibleButton { + background-image: url('../icon/arrowLeftColored.svg'); + left: -40px; +} +#main.sidebarOrientationRight .content { + margin-right: 300px; +} +#main.sidebarOrientationRight .sidebar { + float: right; +} +.boxHeadline { + margin-top: 14px; +} +.boxHeadline > hgroup > h1 { + color: #666666; + font-family: "Trebuchet MS", Arial, sans-serif; + font-size: 170%; + font-weight: bold; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +.boxHeadline > hgroup > h1 a { + color: #666666; + text-decoration: none; +} +.boxHeadline > hgroup > h2, +.boxHeadline > hgroup > h3 { + color: #808080; + font-size: 85%; +} +.boxHeadline.boxSubHeadline > hgroup > h1 { + font-size: 140%; +} +.boxHeadline > .dataList, +.boxHeadline > .inlineDataList { + color: #808080; + font-size: 85%; +} +.contentNavigation { + display: table; + width: 100%; +} +.contentNavigation > * { + margin-top: 14px; +} +.contentNavigation nav ul { + text-align: left; +} +.contentNavigation nav > ul { + float: left; +} +.contentNavigation nav > ul:not(.pageNavigation) { + float: right; + text-align: right; +} +.contentNavigation nav > ul li { + display: inline; +} +.container { + background-color: #fcfdfe; + border: 1px solid #cccccc; +} +.containerPadding { + padding: 14px 21px 14px; +} +.containerHeadline { + margin-bottom: 7px; +} +.containerHeadline > h1 { + font-size: 120%; + font-weight: bold; +} +.containerHeadline > h1 > small { + color: #808080; + font-weight: normal; + text-shadow: none; + font-size: 75%; +} +.containerHeadline > h1, +.containerHeadline > h1 > a { + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +.containerList > li { + padding: 14px 21px; + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + -ms-transition-property: background-color; + -o-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: .1s; + -moz-transition-duration: .1s; + -ms-transition-duration: .1s; + -o-transition-duration: .1s; + transition-duration: .1s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +.containerList > li:nth-child(even) { + background-color: #f1f5fa; +} +.containerList > li:hover { + background-color: #d8e7f5; +} +.containerList > li:hover > div > .details > .buttonList { + opacity: 1; +} +.containerList > li > div > .details { + position: relative; +} +.containerList > li > div > .details > .buttonList { + opacity: 0; + position: absolute; + right: 0; + top: 0; + -webkit-transition-property: opacity; + -moz-transition-property: opacity; + -ms-transition-property: opacity; + -o-transition-property: opacity; + transition-property: opacity; + -webkit-transition-duration: .1s; + -moz-transition-duration: .1s; + -ms-transition-duration: .1s; + -o-transition-duration: .1s; + transition-duration: .1s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; } - -li.wcf-badgeButton, -li > .wcf-badgeButton { - margin-top: 7px; - margin-right: 3px; - margin-left: 3px; - float: left; +.containerList > * > li { + padding: 14px 21px; } - -.wcf-badgeButton, -.wcf-badgeButton a { - text-decoration: none !important; +.containerList.doubleColumned { + overflow: hidden; } - - - -/* ############## Labels ############## */ - -/* -- -- -- Label List -- -- -- */ - -.wcf-labelList { - margin: 0; - padding: 5px 0 0; - display: inline-block; +.containerList.doubleColumned > li { + padding: 0; + float: left; + width: 50%; + height: 90px; + overflow: hidden; } - -/* -- -- -- Label -- -- -- */ - -/* Globals */ - -.wcf-label { - font-size: 85%; - font-weight: bold; - color: #eee; - text-shadow: none; - text-decoration: none; - border-radius: 13px; - background-color: rgba(102, 102, 102, 1); - margin-right: 3px; - padding: 3px 8px 4px; - display: inline-block; - position: relative; - top: -1px; - cursor: pointer; +.containerList.doubleColumned > li:nth-child(even) { + float: right; } - -.wcf-label:hover { - color: rgba(255, 255, 255, 1); - background-color: rgba(51, 51, 51, 1); +.containerList.doubleColumned > li:nth-child(4n), +.containerList.doubleColumned > li:nth-child(4n+1) { + background-color: #fcfdfe; } - -.wcf-label a { - color: #eee; - text-decoration: none; +.containerList.doubleColumned > li:nth-child(4n+2), +.containerList.doubleColumned > li:nth-child(4n+3) { + background-color: #f1f5fa; } - -.wcf-label a:hover { - color: rgba(255, 255, 255, 1); +.containerList.doubleColumned > li:hover { + background-color: #d8e7f5; } - -/* Default Colors */ - -.wcf-label.black { - background-color: #333; +.containerList.doubleColumned > li > div { + padding: 14px 21px; } - -.wcf-label.black:hover { - background-color: #000; +.containerList.doubleColumned:after { + content: ""; + display: table; + clear: left; } - -.wcf-label.brown { - background-color: #c63; +.containerList.styleList > li > div.box64 > span { + text-align: center; + width: 110px; } - -.wcf-label.brown:hover { - background-color: #930; +.containerList.styleList > li > div.box64 > div { + margin-left: 115px; } - -.wcf-label.red { - background-color: #c00; +.box16 { + min-height: 20px; } - -.wcf-label.red:hover { - background-color: #900; +.box16 > :first-child { + float: left; } - -.wcf-label.orange { - background-color: #f90; +.box16 > *:not(:first-child) { + margin-left: 20px; } - -.wcf-label.orange:hover { - background-color: #f60; +.box16 > .framed ~ * { + margin-left: 24px; } - -.wcf-label.yellow { - background-color: #ff0; +.box24 { + min-height: 28px; } - -.wcf-label.yellow:hover { - background-color: #cc0; +.box24 > :first-child { + float: left; } - -.wcf-label.green { - background-color: #0c0; +.box24 > *:not(:first-child) { + margin-left: 28px; } - -.wcf-label.green:hover { - background-color: #090; +.box24 > .framed ~ * { + margin-left: 32px; } - -.wcf-label.blue { - background-color: #09f; +.box32 { + min-height: 36px; } - -.wcf-label.blue:hover { - background-color: #06c; +.box32 > :first-child { + float: left; } - -.wcf-label.purple { - background-color: #c0f; +.box32 > *:not(:first-child) { + margin-left: 39px; } - -.wcf-label.purple:hover { - background-color: #90c; +.box32 > .framed ~ * { + margin-left: 43px; } - -.wcf-label.pink { - background-color: #f0c; +.box48 { + min-height: 52px; } - -.wcf-label.pink:hover { - background-color: #c09; +.box48 > :first-child { + float: left; } - -/* Special */ - -table .wcf-label { - padding: 1px 6px 2px; +.box48 > *:not(:first-child) { + margin-left: 55px; } - - - -/* ############## ToDo: Dropdown ############## */ - -/* Dropdown Caption */ - -.wcf-dropdownCaption, -.wcf-dropdownCaption a { - text-decoration: none; - cursor: pointer; - display: inline-block; +.box48 > .framed ~ * { + margin-left: 59px; } - -.wcf-dropdownCaption:hover, -.wcf-dropdownCaption a:hover { - text-decoration: none; +.box64 { + min-height: 68px; } - -/* Dropdown */ - -.wcf-dropdown { - color: rgba(255, 255, 255, 1); - border-width: 1px; - border-style: solid; - border-color: rgba(255, 255, 255, .7); - border-radius: 5px; - background-color: rgba(0, 0, 0, .7); - margin-top: 25px; - display: none; - position: absolute; - top: 0; - left: 0; - z-index: 400; - overflow: hidden; - white-space: nowrap; - - -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); - - -webkit-transition: color background .1s ease; - -moz-transition: color background .1s ease; - -ms-transition: color background .1s ease; - -o-transition: color background .1s ease; - transition: color background .1s ease; +.box64 > :first-child { + float: left; } - -.wcf-dropdown.open { - display: block; +.box64 > *:not(:first-child) { + margin-left: 71px; } - -/* Dropdown Items */ - -.wcf-dropdown > li, -.wcf-dropdown > div { - text-shadow: none; - color: #ccc; - cursor: pointer; - - -webkit-transition: color background .2s linear; - -moz-transition: color background .2s linear; - -ms-transition: color background .2s linear; - -o-transition: color background .2s linear; - transition: color background .2s linear; +.box64 > .framed ~ * { + margin-left: 75px; } - -.wcf-dropdown > div { - padding: 5px 7px; +.box96 { + min-height: 100px; } - -.wcf-dropdown > :first-child { - border-top-left-radius: 5px; - border-top-right-radius: 5px; +.box96 > :first-child { + float: left; } - -.wcf-dropdown > :last-child { - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; +.box96 > *:not(:first-child) { + margin-left: 110px; } - -.wcf-dropdown > :hover:not(ul):not(.pointer), -.wcf-dropdown > .active { - color: rgba(255, 255, 255, 1); - cursor: pointer; - background-color: rgba(0, 0, 0, .5); +.box96 > .framed ~ * { + margin-left: 114px; } - -.wcf-dropdown > li.divider:not(:first-child) { - border-top: 1px solid rgba(255, 255, 255, .7); +.box128 { + min-height: 132px; } - -.wcf-dropdown > li { - text-decoration: none; - padding: 5px 7px; - display: block; +.box128 > :first-child { + float: left; } - -.wcf-dropdown > li a { - text-decoration: none; - color: #ccc; - padding: -5px -7px; /* ToDo: what's that? ;-) */ - display: block; +.box128 > *:not(:first-child) { + margin-left: 142px; +} +.box128 > .framed ~ * { + margin-left: 146px; +} +.box256 { + min-height: 260px; +} +.box256 > :first-child { + float: left; +} +.box256 > *:not(:first-child) { + margin-left: 277px; +} +.box256 > .framed ~ * { + margin-left: 281px; +} +.breadcrumbs { + box-sizing: border-box; + overflow: hidden; + position: relative; + text-align: left; +} +.breadcrumbs > ul > li { + float: left; + font-size: 85%; + list-style: none; + max-width: 30%; + padding-right: 10px; + position: relative; +} +.breadcrumbs > ul > li:first-child > a { + background-image: url('../icon/home.svg'); + background-position: 1px center; + background-repeat: no-repeat; + background-size: 16px; + padding-left: 21px; +} +.breadcrumbs > ul > li > a { + color: #666666; + display: block; + overflow: hidden; + padding: 5px 1px 5px 5px; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +.breadcrumbs > ul > li > .pointer { + padding: 5px 0; + position: absolute; + top: 0; + right: 0; +} +.smallBreadcrumbs > li { + display: inline; + font-size: 85%; +} +.tabMenu { + display: block; + margin-top: 21px; + position: relative; + text-align: left; +} +.tabMenu > ul { + background-color: #f1f5fa; + border-color: #cccccc; + border-style: solid; + border-width: 1px 1px 0 1px; + display: inline-block; + padding: 0 5px 3px 5px; + position: relative; + white-space: nowrap; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +.tabMenu > ul > li { + display: inline-block; + outline: 0; + white-space: nowrap; +} +.tabMenu > ul > li.ui-state-active { + margin-right: -7px; + margin-left: -6px; +} +.tabMenu > ul > li.ui-state-active > a { + background-color: #fcfdfe; + border-color: #cccccc #cccccc #fcfdfe; + border-style: solid; + border-width: 1px; + color: #336699; + font-weight: bold; + font-size: 130%; + margin-top: -10px; + padding: 10px 15px 5px; + z-index: 30; +} +.tabMenu > ul > li > a { + bottom: -3px; + color: #808080; + display: inline-block; + font-size: 110%; + outline: 0; + padding: 1px 10px 3px; + position: relative; + text-decoration: none; + z-index: 10; +} +.tabMenu > ul > li:not(.ui-state-active) > a:hover { + color: #336699; +} +.tabMenu > ul > li.ui-state-active > a, +.tabMenu > ul > li.ui-state-disabled > a, +.tabMenu > ul > li.ui-state-processing > a { + cursor: default; +} +.tabMenuContent { + display: block; + margin-top: -1px; + min-height: 21px; + position: relative; + z-index: 20; +} +.tabMenuContainer > .menu { + border-bottom: 1px solid #cccccc; + margin: -14px -21px 14px -21px; + padding: 4px 7px; + background-color: #fcfdfe; + background-image: -webkit-linear-gradient(#fcfdfe,#f1f5fa); + background-image: -moz-linear-gradient(#fcfdfe,#f1f5fa); + background-image: -o-linear-gradient(#fcfdfe,#f1f5fa); + background-image: -ms-linear-gradient(#fcfdfe,#f1f5fa); + background-image: linear-gradient(#fcfdfe,#f1f5fa); +} +.tabMenuContainer > .menu ul { + display: inline-block; +} +.tabMenuContainer > .menu ul li { + display: inline-block; +} +.tabMenuContainer > .menu ul li.ui-state-active a, +.tabMenuContainer > .menu ul li.ui-state-active a:hover { + background-color: #d8e7f5; + border-color: #6699cc; + color: #6699cc; + cursor: default; +} +.tabMenuContainer > .menu ul li a { + background-color: #fcfdfe; + border: 1px solid #cccccc; + color: #999999; + display: block; + font-size: 85%; + margin: 4px 0; + padding: 4px 7px; + border-radius: 15px 15px 15px 15px; +} +.tabMenuContainer > .menu ul li a:hover { + background-color: #ffe5c8; + border-color: #ffaa22; + color: #666666; + text-decoration: none; +} +.containerPadding > .tabMenuContainer:last-child { + margin-bottom: 7px; } - -.wcf-dropdown > li a:hover { - color: rgba(255, 255, 255, 1); - background-color: rgba(0, 0, 0, .5); +.ui-tabs .ui-tabs-hide { + display: none !important; } - - - -/* ############## Body ############## */ - -/* Globals */ - -body { - font-family: 'Trebuchet MS', Arial, sans-serif; - font-size: 80%; - color: rgba(102, 102, 102, 1); - line-height: 1; - background-color: rgba(41, 55, 74, 1); +.ui-helper-hidden { + display: none; } - - - -/* ############## Page Header & Page Footer ############## */ - -/* Globals */ - -header.wcf-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: center top; - background-repeat: repeat-x; - background-attachment: fixed; - width: 100%; - overflow: hidden; - position: relative; - z-index: 100; +.ui-helper-hidden-accessible { + position: absolute !important; + clip: rect(1px 1px 1px 1px); + clip: rect(1px,1px,1px,1px); +} +.tabularBox { + background-color: #336699; + border: 1px solid #cccccc; +} +.tabularBoxTitle > hgroup { + color: #ffffff; + padding: 5px 7px; +} +.tabularBoxTitle > hgroup > h1 { + font-size: 120%; + font-weight: bold; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); + text-shadow: 0 -1px 0 rgba(0,0,0,0.8); +} +.tabularBoxTitle > hgroup > h1 > a { + color: #ffffff; +} +.tabularBoxTitle > hgroup > h1 > a:hover { + color: #ffffff; + text-decoration: none; +} +.table { + border-spacing: 0; + width: 100%; +} +.table th, +.table td { + padding: 7px; + text-align: left; + vertical-align: middle; +} +.table th > label, +.table td > label { + cursor: pointer; + display: block; + margin: -7px; + padding: 7px; +} +.table th > label > input[type="checkbox"], +.table td > label > input[type="checkbox"] { + margin: 0 3px; +} +.table th { + border-right: 1px solid rgba(0,0,0,0.2); + color: #ffffff; + font-size: 85%; + font-weight: bold; + white-space: nowrap; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); + text-shadow: 0 -1px 0 rgba(0,0,0,0.8); + background-color: rgba(0,0,0,0.3); + background-image: -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3)); + background-image: -moz-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3)); + background-image: -o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3)); + background-image: -ms-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3)); + background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3)); +} +.table th > a { + color: #ffffff; + display: block; + margin: -7px; +} +.table th > a:hover { + text-decoration: none; +} +.table th > a > img { + margin: -5px 0; +} +.table th.active > a { + background-color: rgba(0,0,0,0.1); + color: #ffffff; + -webkit-box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.1); + -moz-box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.1); + -ms-box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.1); + -o-box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.1); + box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.1); +} +.table th:hover > a { + background-color: rgba(0,0,0,0.2); + color: #ffffff; +} +.table th > * { + padding: 7px; +} +.table td { + background-color: #fcfdfe; + -webkit-transition-property: background; + -moz-transition-property: background; + -ms-transition-property: background; + -o-transition-property: background; + transition-property: background; + -webkit-transition-duration: .1s; + -moz-transition-duration: .1s; + -ms-transition-duration: .1s; + -o-transition-duration: .1s; + transition-duration: .1s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +.table td.columnMark, +.table td.columnStatus { + text-align: center; + width: 1px !important; + white-space: nowrap; +} +.table td.columnDigits, +.table td.columnID { + text-align: right; + width: 1px !important; + white-space: nowrap; +} +.table td.columnIcon { + text-align: left; + width: 1px !important; + white-space: nowrap; +} +.table td.columnTitle { + font-weight: bold; + text-align: left; +} +.table td.columnText { + font-weight: normal; + text-align: left; + max-width: 20%; +} +.table td.columnDate, +.table td.columnRegistrationDate { + font-size: 85%; + text-align: right; + width: 1px !important; + white-space: nowrap; +} +.table td.columnURL, +.table td.columnSmallText { + font-size: 85%; + text-align: left; +} +.table > tbody > tr:nth-child(even) > td { + background-color: #f1f5fa; +} +.table > tbody > tr:not(:last-child) > td { + border-bottom: 1px solid rgba(255,255,255,0.3); +} +.table > tbody > tr:hover > td { + background-color: #d8e7f5; +} +.table > tbody > tr > td:not(:last-child) { + border-right: 1px solid rgba(255,255,255,0.3); +} +.table > tbody > tr > td.focus { + background-color: #d8e7f5; +} +.table > tbody > tr > td.left { + text-align: left; +} +.table > tbody > tr > td.right { + text-align: right; +} +.table .statusDisplay { + padding: 1px 0; + float: right; +} +.table .statusDisplay .statusIcons { + float: right; + margin-left: 7px; +} +.table .statusDisplay .statusIcons li { + display: inline-block; +} +dl.statsDataList > dt { + color: #808080; + display: block; + float: right; + font-size: 85%; + line-height: 1.5; + overflow: hidden; + text-align: left; + white-space: nowrap; + width: 62%; +} +dl.statsDataList > dt > a { + color: #808080; + text-decoration: none; +} +dl.statsDataList > dd { + color: #666666; + float: left; + font-weight: bold; + margin: 0; + overflow: hidden; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + width: 35%; +} +dl.statsDataList > dd > a { + color: #666666; + text-decoration: none; +} +dl.statsDataList:after { + display: table; + content: ""; + clear: both; +} +dl.inlineDataList { + overflow: hidden; + white-space: nowrap; +} +dl.inlineDataList > dd { + display: inline-block; + margin: 0 4px 0 0; + padding: 0; +} +dl.inlineDataList > dt { + color: #808080; + display: inline-block; + margin: 0; + text-align: left; + width: auto; +} +dl.inlineDataList > dt:after { + content: ":"; +} +dl.dataList dt { + float: left; + overflow: hidden; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + width: 35%; +} +dl.dataList dd { + text-align: left; + margin-left: 38%; +} +ul.inlineDataList li, +ul.dataList li { + display: inline-block; +} +ul.inlineDataList li:not(:last-child):after, +ul.dataList li:not(:last-child):after { + content: ","; +} +ul.inlineDataList { + display: inline-block; +} +.contentNavigation .pageNavigation { + float: left; + margin: 19px 0 3px; +} +.contentNavigation .pageNavigation ul li { + margin: 0 2px; +} +.pageNavigation ul li { + float: left; + font-weight: bold; + margin: 0 1px; + min-width: 19px; + padding: 0; + text-align: center; + border-radius: 3px 3px 3px 3px; +} +.pageNavigation ul li:not(.active):not(.disabled) { + cursor: pointer; +} +.pageNavigation ul li.disabled { + background-image: none; + border: 1px solid rgba(0,0,0,0.1); + cursor: not-allowed; +} +.pageNavigation ul li.skip { + padding: 1px 0 1px; +} +.pageNavigation ul li:not(.disabled):hover a { + color: #666666; +} +.pageNavigation ul li:not(.skip) a { + padding: 2px 3px; +} +.pageNavigation ul li.active { + padding: 2px 0 1px; +} +.pageNavigation ul li.active > span { + padding: 0 3px; +} +.pageNavigation ul li img { + height: 16px; + margin: 0; + width: 16px; +} +.pageNavigation ul li a { + color: #999999; + display: block; + text-decoration: none; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +.statusDisplay .pageNavigation { + font-size: 85%; + float: left; + margin-top: 2px; +} +.statusDisplay .pageNavigation ul li { + min-width: 13px; +} +.statusDisplay .pageNavigation ul li:not(.skip) a { + padding: 1px; +} +.sidebar > div > fieldset:not(:last-child), +.sidebar > div > div:not(:last-child) { + border-bottom: 1px solid #cccccc; + margin-bottom: 14px; +} +.sidebar.collapsibleMenu > div > fieldset, +.sidebar.collapsibleMenu > div > div { + border-bottom-width: 0; +} +.sidebar { + padding-top: 21px; +} +.sidebar fieldset { + padding: 7px 14px 14px; + margin-top: 0; +} +.sidebar fieldset > legend { + border-width: 0; + color: #666666; + font-family: "Trebuchet MS", Arial, sans-serif; + font-weight: normal; + font-size: 100%; + padding: 0; + text-transform: uppercase; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +.sidebar fieldset > legend > .badge { + float: right; + font-size: 75%; + top: 3px; +} +.sidebar fieldset > legend > a { + color: #666666; + text-decoration: none; +} +.sidebar fieldset:after { + content: ""; + height: 0; + display: block; + clear: both; +} +.sidebar fieldset .button.more { + margin: 5px 0 0; + float: right; +} +.sidebar fieldset > nav { + margin: 0 -14px 0; +} +.sidebar fieldset > nav ul > li.active { + background-color: #ffffff; +} +.sidebar fieldset > nav ul > li.active > a { + font-weight: bold; +} +.sidebar fieldset > nav ul > li:hover:not(.active) > a { + color: #003366; +} +.sidebar fieldset > nav ul > li > a { + color: #336699; + display: block; + padding: 4px 14px 7px 21px; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +.sidebar fieldset > nav ul > li > a:hover { + text-decoration: none; +} +.sidebar fieldset > div, +.sidebar fieldset > ul, +.sidebar fieldset > dl { + width: 272px; +} +.sidebar .sidebarBoxList > li:not(:last-child) { + margin-bottom: 7px; +} +.sidebar .sidebarBoxHeadline > h1 { + margin-bottom: 1px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +.sidebar .sidebarBoxHeadline > h1 a { + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +.sidebar .sidebarBoxHeadline > h1 small { + text-shadow: none; +} +.sidebar .formSubmit { + margin-bottom: 14px; + margin-top: 0; + width: 300px; +} +.sidebar.collapsibleMenu legend { + background-image: url(../icon/arrowRightColored.svg); + background-position: 15px center; + background-repeat: no-repeat; + background-size: 16px; + color: #336699; + cursor: pointer; + font-weight: bold; + font-size: 130%; + padding-left: 41px; + margin-left: -14px; + text-transform: none; +} +.sidebar.collapsibleMenu legend.active { + background-image: url(../icon/arrowDownColored.svg); +} +.sidebar.collapsibleMenu nav ul > li > a { + padding-left: 41px; +} +.sortableListContainer .sortablePlaceholder { + background-color: #efcb50; + border: 1px solid #e9bf2b; + color: #000000; + margin: 4px 0; + padding: 4px; +} +.sortablePlaceholder.sortableInvalidTarget { + background-color: #c95145; + border: 1px solid #913d37; + color: #ffffff; +} +.sortableList { + list-style-position: outside; + list-style-type: decimal; + margin-left: 21px; +} +.sortableList .jsCollapsibleCategory > .sortableNodeLabel { + background-color: #336699; + color: #ffffff; + padding-left: 7px; +} +.sortableList .jsCollapsibleCategory > .sortableNodeLabel > a { + color: #ffffff; +} +.sortableList .statusDisplay { + float: right; +} +.sortableNode { + cursor: move; +} +.sortableNode.ui-sortable-helper { + list-style: none; +} +.sortableNodeLabel { + padding: 7px 7px 7px 0; + display: block; +} +.sortableList:not(.simpleSortableList) .sortableNodeLabel { + border-bottom: 1px solid #cccccc; +} +.simpleSortableList { + min-height: 21px; +} +.attachmentThumbnailList, +.attachmentFileList { + margin-top: 14px; + padding-top: 7px; +} +.attachmentThumbnailList > legend, +.attachmentFileList > legend { + border-bottom: 0; + border-top: 1px dotted #cccccc; + color: #666666; + font-size: 120%; + padding: 4px 0 0; +} +.attachmentThumbnailList > ul > li { + margin: 0 0 14px 7px; +} +.attachmentFileList > ul > li:not(:first-child) { + margin-top: 4px; +} +.attachmentFileList > ul > li > hgroup > h2 { + font-size: 85%; +} +.attachmentThumbnail { + display: inline-block; + position: relative; +} +.attachmentThumbnail > hgroup { + background-color: rgba(0,0,0,0.6); + bottom: 0; + color: #fff; + position: absolute; + width: 100%; + padding: 7px 0; +} +.attachmentThumbnail > hgroup > h1, +.attachmentThumbnail > hgroup > h2 { + margin: 0 7px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.attachmentThumbnail > hgroup > h2 { + font-size: 85%; + height: 0; + -webkit-transition-property: height; + -moz-transition-property: height; + -ms-transition-property: height; + -o-transition-property: height; + transition-property: height; + -webkit-transition-duration: .25s; + -moz-transition-duration: .25s; + -ms-transition-duration: .25s; + -o-transition-duration: .25s; + transition-duration: .25s; + -webkit-transition-timing-function: ease-out; + -moz-transition-timing-function: ease-out; + -ms-transition-timing-function: ease-out; + -o-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.attachmentThumbnail:hover > hgroup > h2 { + height: 1.27em; +} +.formAttachmentList { + border-bottom: 1px solid #cccccc; + padding-bottom: 7px; +} +.formAttachmentList > li { + width: 33%; + float: left; +} +.formAttachmentList > li > .thumbnail { + border-radius: 6px; + width: 48px; + height: 48px; +} +.formAttachmentList > li > div { + padding-top: 7px; +} +.formAttachmentList > li > div > hgroup { + float: left; + margin-right: 7px; +} +.aclContainer > dd > span { + position: relative; +} +.aclList, +.aclPermissionList { + margin-top: 0; + min-height: 100px; +} +.aclList > li, +.aclPermissionList > li { + display: block; + padding: 4px; +} +.aclList > li:first-child, +.aclPermissionList > li:first-child { + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} +.aclList > li:last-child:not(:first-child), +.aclPermissionList > li:last-child:not(:first-child) { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; +} +.aclList { + margin-bottom: 7px; +} +.aclList > li { + cursor: pointer; +} +.aclList > li:hover, +.aclList > li.active:hover { + background-color: #ffe5c8; +} +.aclList > li.active { + background-color: #f1f5fa; +} +.aclList > li > img:last-child { + float: right; + margin-right: 7px; +} +.aclPermissionList { + margin-top: 7px; + min-height: 200px; + text-align: right; +} +.aclPermissionList > li:hover { + background-color: #ffe5c8; +} +.aclPermissionList > li.aclCategory { + background-color: #d8e7f5; + padding: 7px; + text-align: left; +} +.aclPermissionList > li.aclFullAccess { + background-color: #f1f5fa; } - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - header.wcf-pageHeader, - header.wcf-pageFooter { - min-width: 800px; - } +.aclPermissionList > li > span { + float: left; + padding-left: 7px; } - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - header.wcf-pageHeader, - header.wcf-pageFooter { - /* none */ - } +.aclPermissionList > li > label { + cursor: pointer; + margin: 0 7px; + padding: 0 21px; } - -.wcf-pageHeader:after, -.wcf-pageFooter:after { - content: ''; - display: block; - clear: both; +.codeBox { + background-color: #ffffff; } - -.wcf-pageFooter { - text-align: center; - padding-bottom: 23px; - position: relative; - z-index: 80; +.codeBox > div { + overflow: auto; } - - - -/* -- -- -- Copyright -- -- -- */ - -.wcf-pageFooter .wcf-copyright { - padding-top: 20px; - display: inline-block; +.codeBox > div > dl { + display: table; + margin-top: 7px; + width: 100%; } - -.wcf-pageFooter .wcf-copyright a { - text-shadow: 0 -1px 0 #000; +.codeBox > div > dl > dt { + text-align: right; + display: table-cell; + width: 1%; } - -.wcf-pageFooter .wcf-copyright a:hover { - text-decoration: none; - color: #69c; +.codeBox > div > dl > dt > pre { + padding: 4px 7px; } - - - -/* -- -- -- Top Menu -- -- -- */ - -/* Globals */ - -nav.wcf-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; - z-index: 300; - box-sizing: border-box; - - -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); - - -webkit-transition: background .2s linear; - -moz-transition: background .2s linear; - -ms-transition: background .2s linear; - -o-transition: background .2s linear; - transition: background .2s linear; - - -webkit-animation-name: showTopMenu; - -webkit-animation-duration: .3s; - -webkit-animation-timing-function: linear; - - -moz-animation-name: showTopMenu; - -moz-animation-duration: .3s; - -moz-animation-timing-function: linear; - - -ms-animation-name: showTopMenu; - -ms-animation-duration: .3s; - -ms-animation-timing-function: linear; - /* disabled to ease rendering work for Opera - -o-animation-name: showTopMenu; - -o-animation-duration: .3s; - -o-animation-timing-function: linear; - */ - animation-name: showTopMenu; - animation-duration: .3s; - animation-timing-function: linear; +.codeBox > div > dl > dt > pre > a { + display: block; + margin: 0 -7px; + padding: 0 7px; + text-decoration: none; } - -/* Show Top Menu */ - -@-webkit-keyframes showTopMenu { - 0% { - opacity: 0; - top: -50px; - } - 60% { - top: 0; - } - 80% { - top: -15px; - } - 100% { - opacity: 1; - top: auto; - } -} -@-moz-keyframes showTopMenu { - 0% { - opacity: 0; - top: -50px; - } - 60% { - top: 0; - } - 80% { - top: -15px; - } - 100% { - opacity: 1; - top: auto; - } -} -@-ms-keyframes showTopMenu { - 0% { - opacity: 0; - top: -50px; - } - 60% { - top: 0; - } - 80% { - top: -15px; - } - 100% { - opacity: 1; - top: auto; - } -} -/* disabled to ease rendering work for Opera -@-o-keyframes showTopMenu { - 0% { - opacity: 0; - top: -50px; - } - 60% { - top: 0; - } - 80% { - top: -15px; - } - 100% { - opacity: 1; - top: auto; - } -} -*/ -@keyframes showTopMenu { - 0% { - opacity: 0; - top: -50px; - } - 60% { - top: 0; - } - 80% { - top: -15px; - } - 100% { - opacity: 1; - top: auto; - } +.codeBox > div > dl > dt > pre > a:target { + color: #000; + background-color: #ff3; } - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - nav.wcf-topMenu { - min-width: 800px; - } +.codeBox > div > dl > dd { + display: table-cell; + width: 100%; } - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - nav.wcf-topMenu { - /* none */ - } +.codeBox > div > dl > dd > pre { + padding: 4px 7px; } - -.wcf-topMenu:hover { - background-color: rgba(0, 0, 0, .7); +.codeBox > hgroup { + border-bottom: 1px dotted #cccccc; } - -.wcf-topMenu > div { - padding: 0 23px 0; +.codeBox > hgroup > h1 { + padding-bottom: 4px; + font-weight: bold; } - -.wcf-topMenu ul li { - white-space: nowrap; +.codeBox .hlQuotes { + color: red; } - -/* Menu Items (1st level) */ - -.wcf-topMenu > div > ul > li { - border-width: 0 1px; - border-style: solid; - border-color: transparent; - float: left; - position: relative; +.codeBox .hlComments, +.codeBox .hlOperators { + color: green; } - -.wcf-topMenu > div > ul > li, -.wcf-topMenu > div > ul > li a { - text-shadow: 0 -1px 0 rgba(0, 0, 0, .7); - color: #69c; +.codeBox .hlKeywords1 { + color: blue; } - -.wcf-topMenu > div > ul > li:hover, -.wcf-topMenu > div > ul > li:hover a { - border-color: rgba(255, 255, 255, .5); +.codeBox .hlKeywords2 { + color: darkred; } - -/* Removes the doubled padding if there's a link in the top menu */ -.wcf-topMenu > div > ul > li > span > a { - margin: -6px 0 -6px -6px; -} - - - -/* ToDo: Top-Menu Dropdown Caption */ - -.wcf-topMenu > div > ul > li > .wcf-dropdownCaption { - background-image: url('../../icon/dropdown2.svg'); - background-position: 97% center; - background-repeat: no-repeat; - padding-right: 15px !important; -} - -.wcf-topMenu > div > ul > li > .wcf-dropdownCaption, -.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > a { - padding: 6px; -} - -.wcf-topMenu > div > ul > li:hover > .wcf-dropdownCaption, -.wcf-topMenu > div > ul > li:hover > .wcf-dropdownCaption a { - text-shadow: 0 -1px 0 rgba(0, 0, 0, .7); - color: rgba(255, 255, 255, 1); - background-color: rgba(0, 0, 0, .7); -} - -/* Badges */ - -.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > .wcf-badge { - margin: -3px 3px; - padding: 1px 3px; -} - -.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > .wcf-badge, -.wcf-topMenu > div > ul > li:hover > .wcf-dropdownCaption > .wcf-badge { - font-size: 75%; - color: #369 !important; -} - -/* Images in front of the caption */ - -.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > img { - margin: -7px 0 -5px 0; -} - - - -/* ToDo: Top-Menu Dropdown Tweaks */ - -/* Auto-Opening Dropdowns */ -.wcf-topMenu ul li .wcf-dropdownCaption ~ .wcf-dropdown { - border-color: rgba(255, 255, 255, .5); - background-color: rgba(0, 0, 0, .7); - left: -1px; - min-width: 100%; -} - -.wcf-topMenu ul li:hover .wcf-dropdownCaption ~ .wcf-dropdown { - display: block; -} - -.wcf-topMenu ul li .wcf-dropdown { - border-width: 0 1px 1px 1px !important; - border-radius: 0 0 5px 5px; -} - -.wcf-topMenu ul li .wcf-dropdown > :first-child { - border-top-width: 0; -} - - - -/* -- -- -- Logo -- -- -- */ - -.wcf-logo { - margin: 0 23px 0; - position: relative; - box-sizing: border-box; -} - -.wcf-logo > a, -.wcf-logo > div { - text-align: right; - display: block; - height: 120px; -} - -.wcf-logo > a:hover { - text-decoration: none !important; - color: #d8e7f5; -} - -.wcf-logo h1 { - text-shadow: 0 -1px 0 rgba(0, 0, 0, 1); - color: #d8e7f5; - position: relative; - top: 70px; -} - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - .logo h1, - .wcf-logo h1 { - font-size: 150%; - } - -} - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - .wcf-logo h1 { - font-size: 175%; - } - -} - -.wcf-logo > div > img, -.wcf-logo > a > img { - position: absolute; - bottom: 20px; - left: 0; -} - - - -/* -- -- -- Search -- -- -- */ - -.wcf-search { - border: 1px solid rgba(0, 0, 0, .1); - border-radius: 5px; - background-color: rgba(0, 0, 0, .2); - padding: 5px; - position: absolute; - top: 50px; - right: 0; - min-width: 240px; - - -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); - - -webkit-transition: background .2s linear; - -moz-transition: background .2s linear; - -ms-transition: background .2s linear; - -o-transition: background .2s linear; - transition: background .2s linear; - -} - -.wcf-search:hover { - background-color: rgba(0, 0, 0, .5); -} - -.wcf-search input[type='search'] { - width: 175px; - margin: 2px 4px; -} - -.wcf-search > .wcf-searchButton { - width: 32px; - height: 32px; - margin-left: 5px; -} - - - -/* -- -- -- Main Menu -- -- -- */ - -.wcf-mainMenu { - /* General toggle switch for main menu orientation (options: left|center|right) */ - text-align: left; - margin: 0 30px; - display: block; - position: relative; - box-sizing: border-box; -} - -.wcf-mainMenu:after { - content: ''; - display: block; - clear: both; -} - -.wcf-mainMenu > ul { - border-top-left-radius: 5px; - border-top-right-radius: 5px; - background-color: rgba(0, 0, 0, .4); - display: inline-block; - position: relative; -} - -.wcf-mainMenu > ul > li { - display: inline-block; -} - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - .wcf-mainMenu > ul > li { - font-size: 120%; - } -} - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - .wcf-mainMenu > ul > li { - font-size: 150%; - } -} - -.wcf-mainMenu > ul > li.activeMenuItem { - margin: -5px 0 0; -} - -.wcf-mainMenu > ul > li.activeMenuItem:first-child { - margin-right: -5px; -} - -.wcf-mainMenu > ul > li.activeMenuItem:last-child { - margin-left: -5px; -} - -.wcf-mainMenu > ul > li.activeMenuItem:only-child { - margin: -5px 0 0; -} - -.wcf-mainMenu > ul > li > a { - font-weight: normal; - text-decoration: none; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 1); - color: #69c; - cursor: pointer; - white-space: nowrap; - display: inline-block; - position: relative; - - -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; -} - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - .wcf-mainMenu > ul > li > a { - padding: 10px 20px; - } - -} - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - .wcf-mainMenu > ul > li > a { - padding: 10px 10px; - } - -} - -.wcf-mainMenu > ul > li:not(.activeMenuItem) { - margin-top: -3px; -} - -.wcf-mainMenu > ul > li:not(.activeMenuItem):hover > a { - color: rgba(255, 255, 255, 1); -} - -.wcf-mainMenu > ul > li.activeMenuItem > a { - font-size: 110%; - font-weight: bold; - text-shadow: 0 1px 0 rgba(255, 255, 255, 1); - color: #369; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - - background-color: #e7f2fd; - background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd); - background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd); - background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd); - background-image: -o-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd); - background-image: linear-gradient(rgba(255, 255, 255, 1), #e7f2fd); - - z-index: 10; -} - -/* Rounded Bottom Corners: Active Tab */ - -.wcf-mainMenu > ul > li.activeMenuItem > a:before { - border-bottom-right-radius: 6px; - border-width: 0 1px 1px 0; - position: absolute; - bottom: 0; - left: -7px; - width: 7px; - height: 7px; - content: ""; - - -webkit-box-shadow: 2px 2px 0 #e7f2fd; - -moz-box-shadow: 2px 2px 0 #e7f2fd; - -ms-box-shadow: 2px 2px 0 #e7f2fd; - -o-box-shadow: 2px 2px 0 #e7f2fd; - box-shadow: 2px 2px 0 #e7f2fd; -} - -.wcf-mainMenu > ul > li.activeMenuItem > a:after { - border-bottom-left-radius: 6px; - border-width: 0 0 1px 1px; - position: absolute; - right: -7px; - bottom: 0; - width: 7px; - height: 7px; - content: ""; - - -webkit-box-shadow: -2px 2px 0 #e7f2fd; - -moz-box-shadow: -2px 2px 0 #e7f2fd; - -ms-box-shadow: -2px 2px 0 #e7f2fd; - -o-box-shadow: -2px 2px 0 #e7f2fd; - box-shadow: -2px 2px 0 #e7f2fd; -} - -/* ToDo: Special */ - -.wcf-mainMenu > ul > li.activeMenuItem .wcf-badge { - font-size: 65% !important; - color: rgba(255, 255, 255, 1); - background-color: #369; - - -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 1); - -moz-box-shadow: 0 0 1px rgba(255, 255, 255, 1); - -ms-box-shadow: 0 0 1px rgba(255, 255, 255, 1); - -o-box-shadow: 0 0 1px rgba(255, 255, 255, 1); - box-shadow: 0 0 1px rgba(255, 255, 255, 1); -} - - - -/* -- -- -- Header/Footer Navigation -- -- -- */ - -/* Menu Bars */ - -.wcf-headerNavigation, -.wcf-footerNavigation { - background-color: #e7f2fd; - border-style: solid; - border-color: #bcd; - margin: 0 23px; - display: block; - min-height: 7px; - position: relative; - box-sizing: border-box; -} - -.wcf-headerNavigation { - border-width: 0 0 1px 0; - border-top-left-radius: 3px; - border-top-right-radius: 3px; -} - -.wcf-footerNavigation { - border-width: 1px 0 0 0; - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; -} - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - .wcf-headerNavigation, - .wcf-footerNavigation { - min-width: 800px; - } - -} - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - .wcf-headerNavigation, - .wcf-footerNavigation { - /* none */ - } - -} - -.wcf-headerNavigation:after, -.wcf-footerNavigation:after { - content: ''; - display: block; - clear: both; -} - -/* Icon Menus */ - -.wcf-headerNavigation > ul, -.wcf-footerNavigation > ul { - padding: 0 7px; - float: right; -} - -.wcf-headerNavigation > ul > li, -.wcf-footerNavigation > ul > li { - padding: 0 3px; - float: right; -} - -.wcf-headerNavigation > ul > li.separator, -.wcf-footerNavigation > ul > li.separator { - border-right: 1px dotted #bcd; -} - -.wcf-headerNavigation > ul > li a, -.wcf-headerNavigation > ul > li p, -.wcf-footerNavigation > ul > li a, -.wcf-footerNavigation > ul > li p { - text-decoration: none; - color: #369; - padding: 3px; - display: inline-block; -} - -.wcf-headerNavigation > ul > li a:hover, -.wcf-footerNavigation > ul > li a:hover { - text-decoration: none; - background-color: #d8e7f5; -} - -.wcf-headerNavigation > ul > li a:active, -.wcf-headerNavigation > ul > li a:focus, - -.wcf-footerNavigation > ul > li a:active, -.wcf-footerNavigation > ul > li a:focus { - background-color: #fff9f4; -} - -/* Special -> Page Scroll Links */ - -#tplLogin .wcf-headerNavigation .toBottomLink, -#tplLogin .wcf-footerNavigation .toTopLink { - /* Removes the jump-to-links on the log-in page */ - position: absolute; - left: -9000px; - top: -9000px; - width: 0; -} - -/* Special -> Sub Menu */ - -.wcf-headerNavigation .wcf-menu { - padding: 0 7px; - display: inline; - max-width: 75%; -} - -.wcf-headerNavigation .wcf-menu > ul { - text-align: left; - top: -3px; - display: inline; - position: relative; -} - -.wcf-headerNavigation .wcf-menu > ul > li { - margin-top: 7px; -} - - - -/* ############## Main ############## */ - -.wcf-main { - background-color: rgba(216, 231, 245, 1); - margin: 0 23px; - position: relative; - z-index: 90; - - -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); -} - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - .wcf-main { - min-width: 800px; - } - -} - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - .wcf-main { - /* none */ - } - -} - - - -/* -- -- -- Content -- -- -- */ - -/* ToDo: Change the class name, since now we have the class "content" 2 times! */ - -section.wcf-content { - background-color: rgba(255, 255, 255, 1); - position: relative; - min-height: 100px; - z-index: 20; - box-sizing: border-box; - - -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); - /* ToDo: Opera doesn't like that so much! Bug-report sent to Opera - -o-box-shadow: 0 0 5px rgba(0, 0, 0, .1); - box-shadow: 0 0 5px rgba(0, 0, 0, .1);*/ - - -webkit-transition: margin .1s ease; - -moz-transition: margin .1s ease; - -ms-transition: margin .1s ease; - -o-transition: margin .1s ease; - transition: margin .1s ease; -} - -section.wcf-content:after { - content: ''; - display: block; - clear: both; -} - -.left section.wcf-content { - border-left: 1px solid rgba(187, 204, 221, 1); - margin-left: 249px; -} - -.right section.wcf-content { - border-right: 1px solid rgba(187, 204, 221, 1); - margin-right: 249px; -} - -/* ToDo: Does this still work? */ -.wcf-main > div section:only-child { - border-width: 0 !important; - margin: 0 !important; -} - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - section.wcf-content { - padding: 5px 40px 20px; - } - -} - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - section.wcf-content { - padding: 5px 15px 20px; - } - -} - -.wcf-contentDecor { - background-color: rgba(253, 253, 253, 1); -} - - - -/* -- -- -- Content Header & Footer -- -- -- */ - -.wcf-contentHeader, -.wcf-contentFooter { - margin-top: 15px; - display: table; - width: 100%; - box-sizing: border-box; -} - - - -/* ############## Sidebar ############## */ - -/* Globals */ - -.wcf-sidebar { - margin-bottom: -10px; - display: block; - width: 250px; - overflow: hidden; - z-index: 10; - - -webkit-transition: width .1s ease; - -moz-transition: width .1s ease; - -ms-transition: width .1s ease; - -o-transition: width .1s ease; - transition: width .1s ease; -} - -/* Toggle for sidebar orientation (options: left|right|top|bottom) */ - -.left .wcf-sidebar { - float: left; -} - -.right .wcf-sidebar { - float: right; -} - - - -/* -- -- -- Collapsible Sidebar -- -- -- */ - -/* Globals */ - -.wcf-sidebar.collapsed { - width: 0; - height: 0; -} - -.left .wcf-sidebar.collapsed + .wcf-content { - border: 0; - margin-left: 0; -} - -.right .wcf-sidebar.collapsed + .wcf-content { - border: 0; - margin-right: 0; -} - - - -/* -- -- -- Collapsible Sidebar Button -- -- -- */ - -/* Globals */ - -.wcf-collapsibleSidebarButton { - cursor: pointer; - background-position: center 1%, center 99%; - background-size: 10px 10px, 10px 10px; - background-repeat: no-repeat; - position: absolute; - top: 0; - bottom: 0; - width: 20px; - height: 100%; - overflow: hidden; - z-index: 30; - opacity: .3; -} - -.wcf-collapsibleSidebarButton:hover, -.wcf-collapsibleSidebarButton:hover span { - background-color: rgba(252, 252, 252, 1); - opacity: 1; -} - -.wcf-collapsibleSidebarButton span { - background-color: rgba(255, 255, 255, 1); - background-position: center center; - background-size: 10px 10px; - background-repeat: no-repeat; - margin-top: -300px; - display: block; - position: absolute; - top: 50%; - width: 20px; - height: 600px; -} - -.wcf-collapsibleSidebarButton span:focus, -.wcf-collapsibleSidebarButton span: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); -} - -/* Orientation */ - -.left .wcf-collapsibleSidebarButton { - border-right: 1px solid rgba(187, 204, 221, .5); - background-image: url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg'); - left: 250px; - - -webkit-transition: left .1s ease; - -moz-transition: left .1s ease; - -ms-transition: left .1s ease; - -o-transition: left .1s ease; - transition: left .1s ease; -} - -.left .wcf-collapsibleSidebarButton span { - background-image: url('../../icon/arrowLeft1.svg'); -} - -.right .wcf-collapsibleSidebarButton { - border-left: 1px solid rgba(187, 204, 221, .5); - background-image: url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg'); - right: 250px; - - -webkit-transition: right .1s ease; - -moz-transition: right .1s ease; - -ms-transition: right .1s ease; - -o-transition: right .1s ease; - transition: right .1s ease; -} - -.right .wcf-collapsibleSidebarButton span { - background-image: url('../../icon/arrowRight1.svg'); -} - -/* Collapsed (Left) */ - -.left .collapsed .wcf-collapsibleSidebarButton { - background-image: url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg'); - left: 0; -} - -.left .collapsed .wcf-collapsibleSidebarButton span { - background-image: url('../../icon/arrowRight1.svg'); -} - -/* Collapsed (Right) */ - -.right .collapsed .wcf-collapsibleSidebarButton { - background-image: url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg'); - right: 0; -} - -.right .collapsed .wcf-collapsibleSidebarButton span { - background-image: url('../../icon/arrowLeft1.svg'); -} - - - -/* -- -- -- Sidebar Content -- -- -- */ - -.wcf-sidebarContent > div { - text-shadow: 0 1px 0 rgba(255, 255, 255, 1); - position: relative; - overflow: hidden; - z-index: 40; -} - -.collapsed .wcf-sidebarContent > div { - width: 0; -} - -.wcf-sidebarContent a:hover { - text-decoration: none !important; - color: #369; -} - -.wcf-sidebarContent > div > h1 { - cursor: pointer; - font-weight: bold; - color: #369; - margin-top: 5px; -} - -.wcf-sidebarContent > .collapsibleMenus > h1 { - background-image: url('../../icon/arrowRight.svg'); - background-position: 15px center; - background-size: 16px; - background-repeat: no-repeat; -} - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - .wcf-sidebarContent > div > h1 { - font-size: 130%; - padding: 7px 15px 7px 35px; - } - - .wcf-sidebarContent > div:not(.collapsibleMenus) > h1 { - padding: 7px 15px 7px 15px; - } - -} - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - .wcf-sidebarContent > div > h1 { - font-size: 150%; - padding: 7px 15px 7px 35px; - } - - .wcf-sidebarContent > div:not(.collapsibleMenus) > h1 { - padding: 7px 15px 7px 15px; - } - -} - -.wcf-sidebarContent > .collapsibleMenus h1.activeMenuItem { - background-image: url('../../icon/arrowDown.svg'); -} - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - .wcf-sidebarContent > div ul > li { - font-size: 110%; - } - -} - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - .wcf-sidebarContent > div ul > li { - font-size: 120%; - } - -} - -.wcf-sidebarContent > div ul > li > a, -.wcf-sidebarContent > div ul > li > div { - text-shadow: 0 1px 0 rgba(255, 255, 255, 1); - color: #69c; - padding: 5px 15px 7px 35px; - display: block; -} - -.wcf-sidebarContent > div ul > li.activeMenuItem { - background-color: rgba(255, 255, 255, 1); - 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); -} - -.wcf-sidebarContent > div ul > li.activeMenuItem a { - font-weight: bold; - color: #369; -} - - - -/* ############## Status Display ############## */ - -.wcf-statusDisplay { - padding: 1px 0; - float: right; -} - -.wcf-statusDisplay .wcf-statusIcons li { - display: inline-block; -} - - - -/* ############## Headings ############## */ - -/* -- -- -- Main Heading -- -- -- */ - -.wcf-mainHeading { - margin-top: 25px; -} - -.wcf-mainHeading:not(:first-of-type) { - margin-top: 30px; -} - -.wcf-mainHeading > hgroup { - min-height: 48px; -} - -.wcf-mainHeading > hgroup h1 { - font-weight: bold; - border-bottom: 1px solid rgba(153, 153, 153, 1); - padding: 1px 0 10px; -} - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - .wcf-mainHeading .wcf-containerIcon { - width: 48px; - height: 48px; - } - - .wcf-mainHeading hgroup h1 { - font-size: 175%; - } - -} - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - .wcf-mainHeading .wcf-containerIcon { - width: 64px; - height: 64px; - } - - .wcf-mainHeading hgroup h1 { - font-size: 200%; - } - -} - -.wcf-mainHeading > hgroup h1, -.wcf-mainHeading > hgroup h1 a { - text-decoration: none; - text-shadow: 0 1px 0 rgba(255, 255, 255, 1); - color: rgba(102, 102, 102, 1); -} - -.wcf-mainHeading > hgroup h2 { - font-size: 100%; - font-weight: normal; - color: rgba(153, 153, 153, 1); - padding-top: 5px; -} - -.wcf-mainHeading > hgroup p { - padding-top: 3px; -} - -/* Special -> Badges */ - -.wcf-mainHeading > hgroup h1 .wcf-badge, -.wcf-mainHeading > hgroup h1 a .wcf-badge { - font-size: 75%; - text-decoration: none; - background-color: rgba(102, 102, 102, 1); - color: rgba(255, 255, 255, 1); -} - -/* Special -> Dialog */ - -.wcf-dialogContainer .wcf-mainHeading { - margin-top: 0; -} - -.wcf-dialogContainer .wcf-mainHeading > hgroup h1, -.wcf-dialogContainer .wcf-mainHeading > hgroup h1 a { - text-shadow: 0 -1px 0 rgba(0, 0, 0, 1); - color: rgba(255, 255, 255, 1); -} - - - -/* -- -- -- Sub Heading -- -- -- */ - -.wcf-subHeading h1 { - font-size: 150%; - font-weight: bold; - text-shadow: 0 1px 0 rgba(255, 255, 255, 1); - color: rgba(153, 153, 153, 1); - border-bottom: 1px solid #ccc; - margin: 10px 0; - padding: 10px 0; - box-sizing: border-box; -} - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - .wcf-subHeading h1 { - font-size: 150%; - } - -} - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - .wcf-subHeading h1 { - font-size: 175%; - } - -} - -.wcf-subHeading h2 { - font-weight: normal; - color: #aaa; -} - - - -/* ############## Fieldsets ############## */ - -fieldset { - border: 1px solid #ccc; - border-radius: 7px; - background-color: rgba(250, 250, 250, 1); - margin: 15px 0 0; - padding: 5px 15px 15px; - box-sizing: border-box; -} - -fieldset:last-child, -fieldset:only-child { - margin-bottom: 7px !important; -} - -fieldset legend { - color: rgba(153, 153, 153, 1); - padding: 0 7px 0; - margin: auto -7px; -} - -fieldset legend ~ p { - margin-bottom: 14px; -} - -/* Special Sidebar */ - -.wcf-sidebar fieldset { - border-width: 0; - background-color: transparent; -} - -.wcf-sidebar fieldset legend { - text-transform: uppercase; /* That's possibly problematic */ - padding: 0; -} - -.fieldsetDecor { - border: 1px solid #ccc; - border-radius: 7px; - background-color: rgba(250, 250, 250, 1); -} - - - -/* ############## Labeled Content ############## */ - -/* Simple */ - -dl { - margin-top: 7px; - position: relative; -} - -fieldset dl:first-of-type { - margin-top: 0; -} - -dl > dt { - text-align: right; - color: rgba(102, 153, 204, 1); - margin-top: 5px; - float: left; -} - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - dl > dt { - width: 230px; - } - -} - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - dl > dt { - width: 130px; - } - -} - -dl.wide > dt { - width: auto; /* ToDo */ -} - -dl > dt > label { - margin-top: 5px; - display: block; -} - -dl.disabled > dt { - color: rgba(119, 119, 119, 1); -} - -dl > dd { - padding-top: 5px; -} - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - dl > dd { - margin-left: 250px; - } - -} - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - dl > dd { - margin-left: 150px; - } - -} - -dl.wide > dd { - margin-left: 0; -} - -dl > dd > small { - font-size: 85%; - color: rgba(153, 153, 153, 1); - margin: 3px 0 7px; - display: block; -} - -dl > dd > p { - margin-top: 5px; -} - -/* Nested */ - -dl > dd > fieldset { - margin-top: 0; - margin-bottom: 0; - padding-top: 5px; - padding-bottom: 5px; -} - -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 (flips the label aside the checkbox or radio button) - - use only when automatically generating checkboxes or radio-buttons! */ - -.reversed { - text-align: left; - margin-top: 2px; - position: absolute; - width: auto; -} - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - .reversed { - left: 270px; - } - -} - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - .reversed { - left: 170px; - } - -} - -.reversed ~ dd > input[type='checkbox'] { - margin-left: 0; -} - -/* Special -> Sidebar */ - -.wcf-sidebar dl > dt { - text-align: left; - float: none; - width: auto; -} - -.wcf-sidebar dl > dd { - margin-left: 0; - display: block; - margin-bottom: 13px; -} - -.wcf-sidebar dl > dd * { - display: block; -} - -/* Special -> Overlay */ - -.wcf-dialogContainer dl > dt { - width: 130px; -} - -.wcf-dialogContainer dl > dd { - margin-left: 150px; -} - -.wcf-dialogContainer dl > .reversed { - left: 170px; - width: auto; -} - - - -/* ############## Forms ############## */ - -/* Globals */ - -label { - color: rgba(102, 153, 204, 1); -} - -/* Structure */ - -.wcf-formSubmit { - text-align: center; - margin-top: 15px; -} - -input[type='checkbox'] ~ small, -input[type='radio'] ~ small { - margin-top: 0; - margin-left: 21px; -} - - - -/* -- -- -- Form Elements -- -- -- */ - -/* Globals */ - -button, -input[type='reset'], -input[type='submit'], -input[type='button'], -input[type='checkbox'], -input[type='radio'], -select:not([multiple]) { - cursor: pointer; -} - -input[type='text'], -input[type='search'], /* Does not work in WebKit browsers */ -input[type='date'], -input[type='email'], -input[type='url'], -input[type='password'], -textarea, -select[multiple] { - padding: 5px 3px; - box-sizing: border-box; -} - -select[multiple] { - font-family: 'Courier New', Courier, monospace; -} - -/* Normal State */ - -input[type='text'], -input[type='search'], -input[type='date'], -input[type='email'], -input[type='url'], -input[type='password'], -textarea, -select[multiple] { - border-width: 1px; - border-style: solid; - border-color: rgba(153, 153, 153, 1) rgba(204, 204, 204, 1) rgba(238, 238, 238, 1); - border-radius: 3px; - background-color: rgba(255, 255, 255, 1); - - -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: background-color, border .2s linear; - -moz-transition: background-color, border .2s linear; - -ms-transition: background-color, border .2s linear; - -o-transition: background-color, border .2s linear; - transition: background-color, border .2s linear; -} - -/* Hover State */ - -input[type='text']:hover, -input[type='search']:hover, -input[type='date']:hover, -input[type='email']:hover, -input[type='url']:hover, -input[type='password']:hover, -textarea:hover, -select[multiple]:hover { - border: 1px solid rgba(255, 170, 34, 1); - background-color: rgba(255, 249, 244, 1); -} - -/* Active & Focus State */ - -input[type='text']:active, -input[type='search']:active, -input[type='date']:active, -input[type='email']:active, -input[type='url']:active, -input[type='password']:active, -textarea:active, -select[multiple]:active, - -input[type='text']:focus, -input[type='search']:focus, -input[type='date']:focus, -input[type='email']:focus, -input[type='url']:focus, -input[type='password']:focus, -textarea:focus, -select[multiple]:focus { - border: 1px solid rgba(255, 170, 34, 1); - background-color: rgba(255, 249, 244, 1); - 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); -} - -/* Read Only State */ - -input[type='text'][readonly], -input[type='search'][readonly], -input[type='email'][readonly], -input[type='date'][readonly], -input[type='url'][readonly], -input[type='password'][readonly], -textarea[readonly], -select[multiple][readonly] { - border-style: solid; - border-color: rgba(204, 204, 204, 1) rgba(221, 221, 221, 1) rgba(238, 238, 238, 1); - 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); -} - -/* Disabled State */ - -input[type='text'][disabled], -input[type='search'][disabled], -input[type='date'][disabled], -input[type='email'][disabled], -input[type='url'][disabled], -input[type='password'][disabled], -textarea[disabled], -select[multiple][disabled] { - border-style: solid; - border-color: rgba(255, 255, 255, .5); - background-color: rgba(255, 255, 255, .5); -} - - - -/* -- -- -- Input Widths -- -- -- */ - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - textarea { - width: 100%; - min-width: 200px; - } - - .tiny { - width: 100px; - } - - .short { - width: 10%; - min-width: 75px; - } - - .medium { - width: 50%; - min-width: 150px; - } - - .long { - width: 100%; - min-width: 200px; - } - -} - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - textarea { - width: 99%; - /* none */ - } - - .tiny { - width: 50px; - } - - .short { - width: 10%; - min-width: 50px; - } - - .medium { - width: 30%; - min-width: 100px; - } - - .long { - width: 100%; - min-width: 150px; - } - -} - -.auto { - width: auto; -} - -/* Special -> Search Input WebKit */ - -input[type=search] { - border-radius: 30px; - - -webkit-appearance: textfield; - -webkit-box-sizing: content-box; -} - -::-webkit-search-decoration { - display: none; -} - - - -/* -- -- -- Form Errors -- -- -- */ - -.wcf-formError input[type='text'], -.wcf-formError input[type='search'], -.wcf-formError input[type='email'], -.wcf-formError input[type='url'], -.wcf-formError input[type='password'], -.wcf-formError textarea { - border-color: rgba(255, 0, 0, 1); - background-color: rgba(255, 246, 246, 1); -} - - - -/* ############## ToDo: Pre-Input Buttons & Dropdowns ############## */ - -/* -- -- -- Bounding Box -- -- -- */ - -/** - * This defines the shape of the Pre-Input Buttons - * Colors & effects are being defined by the - * "Global Button Color & Effect Library" - */ - -.wcf-preInput { - display: table; - position: relative; - width: 100%; -} - -.wcf-preInput > input, -.wcf-preInput > textarea { /* ToDo: The textarea solution is not so nice */ - border-radius: 0 3px 3px 0; - margin: 0 !important; - display: table-cell; - width: 99%; -} - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - .wcf-preInput > input, - .wcf-preInput > textarea { - min-width: 300px; - } - -} - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - .wcf-preInput > input, - .wcf-preInput > textarea { - min-width: 100px; - } - -} - - - -/* -- -- -- Dropdowns -- -- -- */ - -/* Dropdown Caption */ - -.wcf-preInput .wcf-dropdownCaption { - letter-spacing: -1px; - cursor: pointer; - border-radius: 3px 0 0 3px; - padding-right: 5px; - display: table-cell; - width: 1%; - vertical-align: middle; -} - -.wcf-preInput .wcf-dropdownCaption span { - margin-right: -1px; - padding-left: 5px; - white-space: nowrap; -} - -.wcf-preInput .wcf-dropdownCaption span.active { - background-image: url('../../icon/dropdown1.svg'); - background-position: right center; - background-repeat: no-repeat; - padding-right: 10px; -} - - - -/* -- -- -- Special -> System Notification -- -- -- */ - -.wcf-preInput .wcf-dropdown > li.missingValue { /* ToDo */ - /* color: #990; */ - background-image: url('../../icon/systemWarning.svg'); - background-size: 16px; - background-position: 95% center; - background-repeat: no-repeat; - /* background-color: #ffd; */ -} - - - -/* ############## ToDo: Small Buttons ############## */ - -/** - * This defines the shape of the Small Buttons - * Colors & effects are being defined by the - * "Global Button Color & Effect Library" - */ - -/* -- -- -- Standard -- -- -- */ - -/* Globals */ - -.wcf-smallButtons { - list-style-type: none; - margin-right: -1px; - margin-bottom: -1px; -} - -.wcf-smallButtons > li { - margin-left: -5px; - display: inline-block; -} - -.wcf-smallButtons > li > a { - white-space: nowrap; - padding: 3px 7px; - display: block; - min-height: 16px; -} - -.wcf-smallButtons > li.separator > a { - border-right: 1px dotted #bcd; -} - -.wcf-smallButtons > li:first-child > a { - border-top-left-radius: 13px; -} - -.wcf-smallButtons > li:last-child > a { - border-bottom-right-radius: 7px; -} - - - -/* -- -- -- Small Button Bar -- -- -- */ - -.wcf-smallButtonBar { - text-align: center !important; - border-top: 1px solid rgba(204, 204, 204, 1); - border-radius: 0 0 7px 7px; - - background-color: rgba(0, 0, 0, .015); - 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)); - - padding: 3px; - position: relative; - z-index: 100; -} - -.wcf-smallButtonBar li { - display: inline; - position: relative; -} - -.wcf-smallButtonBar li span { - /* Removes the button-caption */ - position: absolute; - left: -9000px; - top: -9000px; - width: 0; -} - - - -/* ############## Large Buttons ############## */ - -/** - * This defines the shape of the Large Buttons - * Colors & effects are being defined by the - * "Global Button Color & Effect Library" - */ - -/* Globals */ - -.wcf-largeButtons { - text-align: right; - float: right; -} - -.wcf-largeButtons > li { - display: inline; -} - -.wcf-largeButtons > li > a img { - margin: -5px 1px -5px -5px; - vertical-align: middle; -} - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - .wcf-largeButtons > li > a img { - height: 24px; - width: 24px; - } - -} - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - .wcf-largeButtons > li { - font-size: 125%; - } - - .wcf-largeButtons > li > a { - padding: 10px 15px !important; - white-space: nowrap; - } - - .wcf-largeButtons > li > a img { - height: 32px; - width: 32px; - } - -} - -/* Normal State */ - -button, -input[type='reset'], -input[type='submit'], -input[type='button'], -.wcf-largeButtons > li > a { - font-size: 100%; - font-weight: bold; - border-radius: 30px; - margin: 3px 2px; - padding: 5px 13px; - display: inline-block; -} - -/* ToDo: Special */ - -.wcf-sidebar .wcf-largeButtons *, -.wcf-sidebar input { - font-size: 75% !important; - padding: 3px 7px; -} - -.wcf-sidebar .wcf-largeButtons *, -.wcf-sidebar input { - font-size: 75% !important; -} - - - -/* ############## Boxes ############## */ - -/** - * This defines a box with rounded borders - * Use the extra classes to further style boxes - */ - -/* Globals */ - -.wcf-box { - border: 1px solid rgba(204, 204, 204, 1); - border-radius: 5px; - box-sizing: border-box; -} - -.wcf-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; - display: table; - width: 100%; -} - -.wcf-boxPadding { - padding: 13px 23px 23px; -} - -.wcf-boxDecor { - background-color: rgba(253, 253, 253, 1); -} - -/* Headings */ - -.wcf-boxTitle > hgroup { - text-shadow: 0 -1px 0 #000; - color: rgba(255, 255, 255, 1); - padding: 7px; - display: inline-block; -} - -.wcf-boxTitle > a, -.wcf-boxTitle > hgroup a { - text-decoration: none; - color: rgba(255, 255, 255, 1); -} - -.wcf-boxTitle > hgroup h1 { - font-size: 120%; - display: inline-block; -} - -.wcf-boxTitle > hgroup h2 { - font-size: 85%; - color: rgba(255, 255, 255, .9); - margin-top: 5px; -} - -.wcf-boxTitle > hgroup .wcf-badge { - font-size: 65%; - color: #036; -} - -/* Leading icon */ - -.wcf-boxTitle > a { - margin: 7px 0 0 10px; - float: left; -} - -.wcf-boxTitle > a img { - height: 16px; - width: 16px; -} - - - -/* ############## Tab Menu ############## */ - -/* Globals */ - -.wcf-tabMenu { - /* Toggle for tab menu orientation (options: left|center|right) */ - text-align: center; - margin-top: 15px; - padding: 0 10px; - display: block; - position: relative; -} - -fieldset ~ .wcf-tabMenuContainer .wcf-tabMenu { - margin-top: 30px; -} - -/* -- -- -- Tabs -- -- -- */ - -/* Globals */ - -.wcf-tabMenu ul { - text-shadow: 0 1px 0 rgba(255, 255, 255, 1); - white-space: nowrap; - 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); - padding: 0 5px 3px 5px; - display: inline-block; - position: relative; -} - -.wcf-tabMenu li { - white-space: nowrap; - list-style: none; - display: inline-block; -} - -.wcf-tabMenu li.ui-state-active { - margin-right: -7px; - margin-left: -7px; -} - -.wcf-tabMenu li a { - text-decoration: none; - color: rgba(153, 153, 153, 1); - cursor: pointer; - display: inline-block; - position: relative; - bottom: -3px; - z-index: 10; -} - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - .wcf-tabMenu li a { - font-size: 110%; - padding: 1px 10px 3px; - } - -} - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - .wcf-tabMenu li a { - font-size: 150%; - padding: 5px 10px; - max-width: 100px; - } - -} - -.wcf-tabMenu li:not(.ui-state-active) a:hover { - color: rgba(102, 102, 102, 1); -} - -.wcf-tabMenu li.ui-state-active a { - font-weight: bold; - color: #333 !important; - border-width: 1px; - border-style: solid; - border-top-right-radius: 6px; - border-top-left-radius: 6px; - border-color: #ccc #ccc #fff; - background-color: rgba(255, 255, 255, 1); - padding: 10px 15px 5px; - margin-top: -10px; - z-index: 30; -} - -/* Rounded Bottom Corners */ - -.wcf-tabMenu li.ui-state-active a:before { - position: absolute; - bottom: -1px; - width: 5px; - height: 5px; - content: " "; - border: 1px solid #ccc; - left: -6px; - border-bottom-right-radius: 6px; - border-width: 0 1px 1px 0; - - -webkit-box-shadow: 2px 2px 0 #fff; - -moz-box-shadow: 2px 2px 0 #fff; - -ms-box-shadow: 2px 2px 0 #fff; - -o-box-shadow: 2px 2px 0 #fff; - box-shadow: 2px 2px 0 #fff; -} - -.wcf-tabMenu li.ui-state-active a:after { - position: absolute; - bottom: -1px; - width: 5px; - height: 5px; - content: " "; - border: 1px solid #ccc; - right: -6px; - border-bottom-left-radius: 6px; - border-width: 0 0 1px 1px; - - -webkit-box-shadow: -2px 2px 0 #fff; - -moz-box-shadow: -2px 2px 0 #fff; - -ms-box-shadow: -2px 2px 0 #fff; - -o-box-shadow: -2px 2px 0 #fff; - box-shadow: -2px 2px 0 #fff; -} - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - .wcf-tabMenu li.ui-state-active a { - font-size: 130%; - } - -} - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - .wcf-tabMenu li.ui-state-active a { - font-size: 150%; - } - -} - -.wcf-tabMenu li.ui-state-active a, -.wcf-tabMenu li.ui-state-disabled a, -.wcf-tabMenu li.ui-state-processing a { - cursor: default; -} - - - -/* -- -- -- Tab Menu Content -- -- -- */ - -.wcf-tabMenuContent { - background-color: rgba(255, 255, 255, 1); - margin-top: -1px; - 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 ############## */ - -/* Standard */ - -.wcf-menu { - color: rgba(102, 102, 102, 1); -} - -.wcf-menu ul { - /* General toggle switch for menu orientation (options: left|center|right) */ - text-align: center; -} - -.wcf-menu ul li { - white-space: nowrap; - margin-top: 10px; - display: inline-block; -} - -.wcf-menu ul li a { - font-size: 85%; - text-shadow: 0 1px 0 rgba(255, 255, 255, 1); - text-decoration: none; - color: rgba(153, 153, 153, 1); - 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; -} - -.wcf-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); -} - -.wcf-menu ul li:not(.ui-state-active) a:active, -.wcf-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); -} - -.wcf-menu ul li.ui-state-active a { - font-weight: bold; - text-shadow: 0 1px 0 #000; - color: rgba(255, 255, 255, 1); - cursor: default; - border: 1px solid rgba(0, 0, 0, .2); - background-color: rgba(0, 0, 0, .5); -} - -/* Special -> Menu within box-title */ - -.wcf-boxTitle > .wcf-menu { - color: rgba(255, 255, 255, 1); - border: none; - margin: 0 !important; - padding: 6px 7px !important; -} - -.wcf-boxTitle > .wcf-menu ul li { - margin-top: 0; -} - -.wcf-boxTitle > .wcf-menu ul li a { - text-shadow: 0 -1px 0 rgba(0, 0, 0, 1); - color: #eee !important; - background-color: rgba(0, 0, 0, .1); -} - -.wcf-boxTitle > .wcf-menu ul li a:hover { - color: rgba(255, 255, 255, 1) !important; - border: 1px solid rgba(0, 0, 0, .3); - background-color: rgba(0, 0, 0, .2); -} - -.wcf-boxTitle > .wcf-menu ul li a:active, -.wcf-boxTitle > .wcf-menu ul li a:focus, -.wcf-boxTitle > .wcf-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); -} - -.wcf-boxTitle > .wcf-menu ul li a .wcf-badge { - color: #369 !important; -} - -/* Special: Menu below tab-menu */ - -.wcf-tabMenuContainer > .wcf-menu { - border-bottom: 1px solid #ccc; - margin: -15px -23px 0; - padding: 0 7px 10px; -} - -.wcf-tabMenuContainer > .wcf-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)); -} - - - -/* ############## Bread Crumbs ############## */ - -/* Globals */ - -.wcf-breadcrumbs { - text-align: left; - border: 1px solid rgba(204, 204, 204, 1); - border-radius: 5px; - background-color: rgba(255, 255, 255, 1); - display: block; - position: relative; - overflow: hidden; - box-sizing: border-box; -} - -.wcf-breadcrumbs > ul > li { - font-size: 85%; - list-style: none; - float: left; - position: relative; - max-width: 30%; - - -webkit-transition: max-width .2s linear; - -moz-transition: max-width .2s linear; - -ms-transition: max-width .2s linear; - -o-transition: max-width .2s linear; - transition: max-width .2s linear; -} - -.wcf-breadcrumbs > ul > li:hover { - max-width: 100%; -} - -/* Arrow */ - -.wcf-breadcrumbs > ul > li > span { - border-width: 15px; - border-style: solid none solid solid; - border-color: transparent transparent transparent rgba(204, 204, 204, 1); - display: block !important; - position: absolute; - width: 0; - height: 0; - top: -4px; - right: -15px; - z-index: 20; -} - -.wcf-breadcrumbs > ul > li > .pointer > span { - text-indent: -9000px; - border-width: 15px; - border-style: solid none solid solid; - border-color: transparent transparent transparent rgba(255, 255, 255, 1); - display: block; - position: absolute; - width: 0; - height: 0; - top: -15px; - left: -16px; - overflow: hidden; -} - -/* Caption */ - -.wcf-breadcrumbs > ul > li a { - text-decoration: none; - text-shadow: 0 1px 0 rgba(255, 255, 255, 1); - color: rgba(153, 153, 153, 1); - margin: 0; - padding: 5px 1px 5px 20px; - display: block; - overflow: hidden; - white-space: nowrap; -} - -.wcf-breadcrumbs > ul > li:first-child a { - border-radius: 5px 0 0 5px; - background-image: url('../../icon/home1.svg'); - background-position: 7px center; - background-repeat: no-repeat; - background-size: 16px; - padding-left: 30px; -} - -.wcf-breadcrumbs > ul > li:hover a { - color: rgba(102, 102, 102, 1); - background-color: rgba(249, 249, 249, 1); - position: relative; - z-index: 10; -} - -.wcf-breadcrumbs > ul > li:hover > .pointer > span { - border-color: transparent transparent transparent rgba(249, 249, 249, 1); -} - - - -/* ############## Tables ############## */ - -/* Globals */ - -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 - (only in effect if the table is not inside a "div" with class ".boxTitle") */ - border-top-left-radius: 5px; -} - -thead th:last-child { - /* Rounded corners for the last table header cell - (only in effect if the table is not inside a "div" with class ".boxTitle") */ - 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; - - -webkit-transition: background .2s linear; - -moz-transition: background .2s linear; - -ms-transition: background .2s linear; - -o-transition: background .2s linear; - transition: background .2s linear; -} - -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: rgba(255, 255, 255, 1); - background-color: rgba(0, 0, 0, .2); -} - -thead th a:active, -thead th a:focus, -thead th.active a { - color: rgba(255, 255, 255, 1); - 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 a { - font-weight: bold; -} - -thead th.active:hover a { - background-color: rgba(0, 0, 0, .3); -} - -thead th a img { - /* ToDo: Sort-icon orientation does not work */ - text-align: right; - /* Negative margins to prevent table-cells from expanding vertically 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 first table cell in the last row */ - border-bottom-left-radius: 5px; -} - -tbody tr:last-child td:last-child { - /* Rounded corners for the last table cell in the last row */ - border-bottom-right-radius: 5px; -} - -tbody td { - background-color: #fcfdfe; - border-right: 1px solid rgba(255, 255, 255, .3); - padding: 5px; - - -webkit-transition: background .1s linear; - -moz-transition: background .1s linear; - -ms-transition: background .1s linear; - -o-transition: background .1s linear; - transition: background .1s linear; -} - -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; -} - - - -/* -- -- -- Special -> Table Header -- -- -- */ - -.wcf-menu ~ .wcf-box thead th:first-child { /* ToDo: Does this case really exist any more? */ - border-top-left-radius: 0 !important; -} - -.wcf-menu ~ .wcf-box thead th:last-child { /* ToDo: Does this case really exist any more? */ - border-top-right-radius: 0 !important; -} - -.wcf-boxTitle > hgroup + table th:first-child, /* Boxes with a title bar */ -.wcf-boxTitle > nav + table th:first-child { /* Boxes with a menu in the title bar */ - border-top-left-radius: 0 !important; -} - -.wcf-boxTitle > hgroup + table th:last-child, /* Boxes with a title bar */ -.wcf-boxTitle > .wcf-menu + table th:last-child { /* Boxes with a menu in the title bar */ - border-top-right-radius: 0 !important; -} - - - -/* -- -- -- Special -> Checkboxes in Table Headers -- -- -- */ - -thead input[type='checkbox'] { - margin-top: -5px !important; - margin-bottom: -5px !important; -} - - - -/* -- -- -- ToDo: Table Column Formats -- -- -- */ - -.columnMark, -.columnStatus { - text-align: center; - width: 1% !important; - white-space: nowrap; -} - -.columnStatus .wcf-badge { - margin-right: 1px !important; - margin-left: 1px !important; -} - -.columnDigits, -.columnID { - text-align: right; - width: 1% !important; - white-space: nowrap; -} - -.columnIcon { - text-align: left; - width: 1% !important; - white-space: nowrap; -} - -tr img[src$="D.svg"] { - cursor: not-allowed; -} - -tr .columnIcon img { - height: 16px; - width: 16px; -} - -.big .columnIcon img { - height: 24px; - width: 24px; -} - -.columnTitle { - font-weight: bold; - text-align: left; -} - -.columnText { - font-weight: normal; - text-align: left; - max-width: 20%; -} - -.columnDate, -.columnRegistrationDate { - font-size: 85%; - text-align: right; - width: 1% !important; - white-space: nowrap; -} - -.columnURL { - font-size: 85%; - text-align: left; -} - - - -/* ############## ToDo: Page Navigation ############## */ - -/** - * This defines the shape of the Page-Navigation widget - * Colors & effects are being defined by the - * "Global Button Color & Effect Library" - */ - -/* Globals */ - -:not(.wcf-statusDisplay) > .wcf-pageNavigation { - margin: 5px 0 3px; - float: left; -} - -/* -- -- -- Buttons (Level 1 & 2) -- -- -- */ - -.wcf-pageNavigation ul li { - font-weight: bold; - text-align: center; - border-radius: 3px; - margin: 1px; - float: left; - min-width: 19px; -} - -.wcf-contentHeader .wcf-pageNavigation ul li, -.wcf-contentFooter .wcf-pageNavigation ul li { - margin: 2px; -} - -.wcf-pageNavigation ul li:not(.active):not(.disabled) { - cursor: pointer; -} - -.wcf-pageNavigation ul li.disabled { - cursor: not-allowed; - border: 1px solid rgba(0, 0, 0, .1) !important; - background-image: none !important; -} - -.wcf-pageNavigation ul li img { - height: 16px; - width: 16px; -} - -.wcf-pageNavigation ul li.skip { - padding: 2px 0 1px; -} - -.wcf-pageNavigation ul li a { - text-shadow: 0 1px 0 rgba(255, 255, 255, 1); - text-decoration: none; - color: rgba(153, 153, 153, 1); - display: inline-block; -} - -.wcf-pageNavigation ul li:not(.disabled):hover a { - color: rgba(102, 102, 102, 1); -} - -.wcf-pageNavigation ul li:not(.skip) a { - padding: 3px 1px; -} - -.wcf-pageNavigation ul li:active a, -.wcf-pageNavigation ul li:focus a { - color: #333; -} - -.wcf-pageNavigation ul li.active, -.wcf-pageNavigation ul li.active:hover { - text-shadow: 0 1px 0 #000 !important; - color: rgba(255, 255, 255, 1) !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 0; -} - -/* -- -- -- ToDo: Children (Level 2) -- -- -- */ - -/* Buttons */ - -.wcf-pageNavigation ul li.children { - position: relative; -} - -.wcf-pageNavigation ul li.children > a { - margin-right: -10px; - position: relative; - z-index: 10; -} - -.wcf-pageNavigation ul li.children input { - margin-left: 1px; - width: 30px; - height: 9px; -} - -.wcf-pageNavigation ul li.children img { - position: relative; - width: 7px; - height: 9px; - bottom: 1px; - left: 25px; -} - -/* Dropdown */ - -.wcf-pageNavigation ul li.children .wcf-dropdown { - text-align: left; - border-color: transparent; - border-radius: 3px; - background-color: rgba(0, 0, 0, .7); - margin-top: 28px; - margin-left: -2px; - padding: 2px 1px; - display: inline-block; - position: absolute; - height: 0; - overflow: hidden; - min-width: 165px; - max-width: 250px; - opacity: 0; - - -webkit-transition: opacity .2s linear; - -moz-transition: opacity .2s linear; - -ms-transition: opacity .2s linear; - -o-transition: opacity .2s linear; - transition: opacity .2s linear; -} - -.wcf-pageNavigation ul li.children:hover .wcf-dropdown { - border-color: rgba(255, 255, 255, .7); - height: auto; - overflow: visible; - opacity: 1; -} - -.wcf-pageNavigation ul li.children .wcf-dropdown ul { - padding: 0 5px 5px 2px; - display: block; -} - -.wcf-pageNavigation ul li.children .wcf-dropdown ul li { - margin: 2px 3px; -} - -/* Pointer */ - -.wcf-pageNavigation ul li.children .pointer { - border-width: 0 7px 7px; - border-style: solid; - border-color: rgba(255, 255, 255, .7) transparent; - display: inline-block !important; - width: 0; - position: absolute; - top: -7px !important; - left: 11px; -} - -.wcf-pageNavigation ul li.children .pointer span { - border-width: 0 5px 5px; - border-style: solid; - border-color: rgba(0, 0, 0, .7) transparent; - display: inline-block; - width: 0; - position: absolute; - top: 2px; - left: -5px; -} - -/* Special -> Status Display */ - -.wcf-statusDisplay .wcf-pageNavigation { - font-size: 80%; -} - -.wcf-statusDisplay .wcf-pageNavigation ul li { - min-width: 13px; -} - -.wcf-statusDisplay .wcf-pageNavigation ul li:not(.skip) a { - padding: 1px; -} - - - -/* ############## System Notifications (Inline) ############## */ - -/* Globals */ - -.wcf-info, -.wcf-error, -.wcf-success, -.wcf-warning { - text-shadow: 0 1px 0 rgba(255, 255, 255, 1); - line-height: 1.5; - border-radius: 7px; - margin-top: 15px; - padding: 7px 15px 7px 50px; - box-sizing: border-box; -} - -/* Types */ - -.wcf-info { - color: #68b; - border: 1px solid #9be; - background-color: #def; - - background-image: url('../../icon/systemInfo.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px); - background-image: url('../../icon/systemInfo.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px); - background-image: url('../../icon/systemInfo.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px); - background-image: url('../../icon/systemInfo.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px); - background-image: url('../../icon/systemInfo.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px); - - background-size: 24px, auto; - background-position: 13px center, left top; - background-repeat: no-repeat, repeat; -} - -.wcf-success { - color: #090; - border: 1px solid #0c0; - background-color: #efe; - - background-image: url('../../icon/systemSuccess.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px); - background-image: url('../../icon/systemSuccess.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px); - background-image: url('../../icon/systemSuccess.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px); - background-image: url('../../icon/systemSuccess.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px); - background-image: url('../../icon/systemSuccess.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px); - - background-size: 24px, auto; - background-position: 13px center, left top; - background-repeat: no-repeat, repeat; - -} - -.wcf-warning { - color: #990; - border: 1px solid #cc0; - background-color: #ffd; - - background-image: url('../../icon/systemWarning.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px); - background-image: url('../../icon/systemWarning.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px); - background-image: url('../../icon/systemWarning.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px); - background-image: url('../../icon/systemWarning.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px); - background-image: url('../../icon/systemWarning.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px); - - background-size: 24px, auto; - background-position: 13px center, left top; - background-repeat: no-repeat, repeat; -} - -.wcf-error { - color: #c00; - border: 1px solid #f99; - background-color: #fee; - - background-image: url('../../icon/systemError.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px); - background-image: url('../../icon/systemError.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px); - background-image: url('../../icon/systemError.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px); - background-image: url('../../icon/systemError.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px); - background-image: url('../../icon/systemError.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px); - - background-size: 24px, auto; - background-position: 13px center, left top; - background-repeat: no-repeat, repeat; -} - -/* Inline Errors */ - -.wcf-innerError { - text-shadow: 0 1px 0 rgba(255, 255, 255, 1); - line-height: 1.5; - color: #c00; - border: 1px solid #f99; - border-radius: 7px; - background-color: rgba(255, 238, 238, 1); - background-image: url('../../icon/systemError.svg'); - background-size: 16px; - background-position: 5px center; - background-repeat: no-repeat; - margin-top: 5px; - padding: 2px 10px 2px 25px; - display: table !important; - position: relative; /* Firefox support (from version 10 on) is buggy */ - clear: both; - - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1); - -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1); - -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1); - box-shadow: 0 1px 3px rgba(0, 0, 0, .1); -} - -.wcf-innerError .pointer { - border-width: 0 7px 7px; - border-style: solid; - border-color: #f99 transparent; - display: inline-block !important; - width: 0; - position: absolute; - top: -7px !important; - left: 10%; -} - -.wcf-innerError .pointer span { - border-width: 0 5px 5px; - border-style: solid; - border-color: rgba(255, 238, 238, 1) transparent; - display: inline-block; - width: 0; - position: absolute; - top: 2px; - left: -5px; -} - -/* Special -> Pre Input */ - -.wcf-preInput ~ .wcf-innerError .pointer { - right: 10%; - left: auto; -} - - - -/* ############## ToDo: System Notifications (Sheet) ############## */ - -/* Globals */ - -.wcf-systemNotification { /* declarations taken from .success */ - background-color: rgba(238, 255, 238, 1); - border: 1px solid rgba(0, 204, 0, 1); - border-top-width: 0; - border-radius: 0 0 5px 5px; - color: rgba(0, 153, 0, 1); - left: 40%; - padding: 14px; - padding-top: 10px; - position: fixed; - text-align: center; - top: -38px; - width: auto; - z-index: 500; - - -webkit-transition: top .5s linear; - -moz-transition: top .5s linear; - -ms-transition: top .5s linear; - -o-transition: top .5s linear; - transition: top .5s linear; -} - -.wcf-systemNotification.open { - top: 0; -} - - - -/* ############## ToDo: WCF Dialog ############## */ - -/* Globals */ - -.wcf-dialogContainer { - border: 23px solid transparent; - border-radius: 15px; - background-color: rgba(0, 0, 0, .4); - margin-right: auto !important; - margin-left: auto !important; - position: fixed !important; - - -webkit-box-shadow: 0 1px 23px rgba(0, 0, 0, .3); - -moz-box-shadow: 0 1px 23px rgba(0, 0, 0, .3); - -ms-box-shadow: 0 1px 23px rgba(0, 0, 0, .3); - -o-box-shadow: 0 1px 23px rgba(0, 0, 0, .3); - box-shadow: 0 1px 23px rgba(0, 0, 0, .3); -} - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - .wcf-dialogContainer { - min-width: 500px !important; - max-width: 780px !important; - } - -} - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - .wcf-dialogContainer { - min-width: 200px !important; - max-width: 380px !important; - } - -} - -/* Titlebar */ - -.wcf-dialogTitlebar { - border-bottom: 1px solid #036; - border-top-left-radius: 7px; - border-top-right-radius: 7px; - background-color: #29374a; - /* 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; - padding: 10px 20px; - position: relative; - display: block; - /*cursor: move;*/ -} - -.wcf-dialogTitle { - font-size: 170%; - font-weight: bold; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 1); - color: rgba(255, 255, 255, 1); - display: block; +.codeBox .hlKeywords3 { + color: darkviolet; } - -.wcf-dialogCloseButton { - background-image: url('../../icon/delete2.svg'); - background-size: 32px; - background-position: top left; - background-repeat: no-repeat; - position: absolute !important; - width: 32px; - height: 32px; - top: 5px; - right: 10px; - cursor: pointer; -} - -.wcf-dialogCloseButton span { - /* Removes the button-caption */ - position: absolute; - left: -9000px; - top: -9000px; - width: 0; -} - -/* Content */ - -.wcf-dialogContent { - color: rgba(238, 238, 238, 1); - background-color: #333; - overflow: auto; -} - -.wcf-dialogContent a { - color: #69c; +.codeBox .hlKeywords4 { + color: darkgoldenrod; } - -.wcf-dialogContent a:hover { - color: #fff; +.codeBox .hlKeywords5 { + color: crimson; } - -.wcf-dialogContainer > .wcf-dialogContent { - border-radius: 7px; - padding: 0; - /*width: auto !important;*/ +.codeBox .hlNumbers { + color: darkorange; } - -.wcf-dialogTitlebar ~ .wcf-dialogContent { - border-top-left-radius: 0; - border-top-right-radius: 0; - border-bottom-left-radius: 7px; - border-bottom-right-radius: 7px; - padding: 10px 20px 20px; +.diffHighlighter .hlComments { + color: darkviolet; } - -/* Special */ - -#ajaxExceptionStacktrace { - white-space: nowrap; - overflow: scroll; - overflow-y: hidden; +.diffHighlighter .hlRemoved { + color: red; } - -#ajaxExceptionStacktrace { - font-family: monospace; - font-size: 90%; - line-height: 1.2; - border: 1px solid #ccc; - padding: 3px; +.diffHighlighter .hlAdded { + color: green; } - - - -/* ############## ToDo: Overlay Spinner ############## */ - -.wcf-dialogOverlay { - background-color: rgba(0, 0, 0, 1); - opacity: .5; - position: fixed; - width: 100% !important; - top: 0; - left: 0; +.phpHighlighter .hlKeywords2 { + color: green; } - - -/* ToDo: What is that and change that class-name! */ - -.wcf-overlayLoading { - background-color: rgba(255, 255, 255, 1); - background-image: url('../../icon/spinner1.svg'); - background-position: center center; - background-size: 32px; - background-repeat: no-repeat; +.phpHighlighter .hlComments { + color: darkgoldenrod; } - - - -/* ############## Balloon Tooltips ############## */ - -/* Globals */ - -.jsTooltip { /* Do not change this style */ - cursor: pointer; +.cssHighlighter .hlComments { + color: #236e26; } - -.wcf-balloonTooltip { - font-size: .85em; - color: rgba(255, 255, 255, 1); - border: 1px solid rgba(255, 255, 255, .7); - border-radius: 5px; - background-color: rgba(0, 0, 0, .7); - padding: 5px 10px 7px; - position: absolute; - max-width: 300px; - z-index: 800; - - -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); +.cssHighlighter .hlColors { + color: #751116; } - -/* Pointer */ - -.wcf-balloonTooltip .pointer { - border-width: 0 7px 7px; - border-style: solid; - border-color: rgba(255, 255, 255, .7) transparent; - display: inline-block !important; - width: 0; - position: absolute; - top: -7px !important; - left: 50%; +.cssHighlighter .hlNumbers, +.sqlHighlighter .hlNumbers { + color: #1906fd; } - -.wcf-balloonTooltip .pointer span { - border-width: 0 5px 5px; - border-style: solid; - border-color: rgba(0, 0, 0, .7) transparent; - display: inline-block; - width: 0; - position: absolute; - top: 2px; - left: -5px; +.cssHighlighter .hlKeywords1 { + color: #87154f; } - - - -/* ############## ToDo: Likes Widget ############## */ - -/* @see theadPostList.tpl */ - -/** - * This defines the shape of the Likes widget - * Colors & effects are being defined by the - * "Global Button Color & Effect Library" - */ - -/* -- -- -- -- Widget -- -- -- -- -- */ - -/* Globals */ - -.wcf-likesWidget { - margin: 0 0 0 15px; +.cssHighlighter .hlKeywords2 { + color: #994509; } - -/* Buttons */ - -.wcf-likesWidget > ul { - float: right; - margin-right: 7px; - margin-left: 10px; +.cssHighlighter .hlKeywords3, +.cssHighlighter .hlKeywords4 { + color: inherit; } - -.wcf-likesWidget > ul > li { - text-align: right; - margin-top: 3px; - display: inline-block; +.sqlHighlighter .hlKeywords1 { + color: #663821; } - -.wcf-likesWidget > ul > li > a { - padding: 2px 4px 3px; +.sqlHighlighter .hlKeywords2 { + color: #871550; } - -.wcf-likesWidget > ul > li:first-child { - margin-right: -5px; +.quoteBox { + background-color: #ffffff; + background-image: url('../images/quote.png'); + background-position: 12px 12px; + background-repeat: no-repeat; + min-height: 28px; + margin-bottom: 4px; +} +.quoteBox.containerPadding { + padding-left: 58px; +} +.quoteBox > header { + padding-bottom: 4px; + border-bottom: 1px dotted #cccccc; + margin-bottom: 7px; } - - - -/* ############## ToDo: Clipboard Editor Buttons ############## */ - -/* Globals */ - -.wcf-clipboardEditor > ul > li { - font-size: .85em; - border-radius: 30px; - margin-top: 7px; - margin-right: 3px; - margin-left: 3px; - float: left; - position: relative; +.quoteBox > header > h1 { + font-weight: bold; } - -.wcf-clipboardEditor > ul > li span { - text-decoration: none !important; - cursor: pointer; - background-image: url('../../icon/dropdown1.svg'); - background-position: right center; - background-repeat: no-repeat; - margin-right: 5px; - padding: 3px 12px 5px 10px; - display: inline-block; +.quoteBox .quoteBox { + background-image: none; + padding-left: 21px; + min-height: 0; } - - - -/* ############## ToDo: CK-Editor ############## */ - -.wcf-wideEditor dt { - display: none; +.spoilerBox { + background-color: #ffffff; + padding-bottom: 7px; +} +.spoilerBox > header { + margin-bottom: 7px; +} +.spoilerBox > div { + padding-bottom: 7px; +} +.inlineCode { + background-color: #ffffff; + border: 1px solid #cccccc; + font-family: Consolas, "Liberation Mono", Courier, monospace; + margin: 0 2px; + padding: 1px 5px; + border-radius: 3px 3px 3px 3px; +} +ul.smileyList > li { + display: inline; +} +.bbcodeTable { + display: inline-block; +} +.messageGroupList .columnSubject > .labelList { + float: right; + padding-left: 7px; +} +.messageGroupList .columnSubject > h1 > .messageGroupLink { + font-size: 120%; +} +.messageGroupList .columnSubject > small { + display: block; +} +.messageGroupList .columnSubject > nav { + font-size: 85%; +} +.messageGroupList .columnSubject > nav > ul > li { + display: inline; +} +.messageGroupList tr.new .columnSubject > h1 > .messageGroupLink { + font-weight: bold; +} +.messageGroupList .table > tbody > tr.jsMarked > td { + background-color: #ffffc8; +} +.messageGroupList tr.new .columnAvatar div > p > img, +.messageGroupList tr:hover .columnAvatar div > p > img { + opacity: 1; +} +.messageGroupList .columnAvatar div { + position: relative; + width: 40px; + height: 38px; +} +.messageGroupList .columnAvatar div > p > img { + opacity: .6; + -webkit-transition-property: opacity; + -moz-transition-property: opacity; + -ms-transition-property: opacity; + -o-transition-property: opacity; + transition-property: opacity; + -webkit-transition-duration: .2s; + -moz-transition-duration: .2s; + -ms-transition-duration: .2s; + -o-transition-duration: .2s; + transition-duration: .2s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +.messageGroupList .columnAvatar .myAvatar { + position: absolute; + width: 16px; + height: 16px; + bottom: -2px; + left: 24px; + opacity: 1; + -webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); + -moz-box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); + -ms-box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); + -o-box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); + box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); +} +.messageGroupList .columnLastPost { + white-space: nowrap; +} +.messageGroupList .columnLastPost > div > hgroup > h2 { + color: #808080; + font-size: 85%; +} +.messageList .messageGroupStarter { + position: relative; +} +.messageList .messageGroupStarter > .message:after { + background-image: url(../icon/circleStar.svg); + background-position: 4px 4px; + background-repeat: no-repeat; + content: ""; + display: block; + height: 20px; + left: 0; + position: absolute; + top: 0; + width: 20px; +} +.messageList .newMessageBadge { + color: #ffffff; + display: block; + font-size: 85%; + font-weight: bold; + left: -219px; + padding: 6px 10px; + position: absolute; + text-transform: uppercase; + top: 24px; + border-radius: 0 5px 5px 0; + -webkit-box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.2); + -moz-box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.2); + -ms-box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.2); + -o-box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.2); + box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.2); + background-color: #264d73; + background-image: -webkit-linear-gradient(#336699,#264d73); + background-image: -moz-linear-gradient(#336699,#264d73); + background-image: -o-linear-gradient(#336699,#264d73); + background-image: -ms-linear-gradient(#336699,#264d73); + background-image: linear-gradient(#336699,#264d73); + text-shadow: 0 -1px 0 rgba(0,0,0,0.8); +} +.messageList .newMessageBadge:before { + border-bottom: 4px solid #1a334d; + border-left: 6px solid transparent; + content: ""; + display: block; + left: 0; + position: absolute; + top: -4px; +} +.message { + background-color: #d8e7f5; + border: 1px solid #cccccc; + position: relative; +} +.message:after { + clear: both; + content: ''; + display: block; +} +.message.jsMarked { + background-color: #ffffc8; +} +.message:hover .messageOptions nav { + opacity: 1; +} +.message.messageDeleted { + background-color: #c95145; +} +.message.messageDeleted .messageSidebar { + color: #ffffff !important; +} +.message.messageDeleted .messageSidebar a { + color: #ffffff !important; +} +.message.messageDisabled:not(.messageDeleted) { + background-color: #74a446; +} +.message.messageDisabled:not(.messageDeleted) .messageSidebar { + color: #ffffff !important; +} +.message.messageDisabled:not(.messageDeleted) .messageSidebar a { + color: #ffffff !important; +} +.message .messageOptions { + font-size: 85%; + position: relative; +} +.message .messageOptions.forceOpen nav { + opacity: 1; +} +.message .messageOptions nav { + bottom: -2px; + opacity: 0; + position: absolute; + right: -22px; + text-align: right; + -webkit-transition-property: opacity; + -moz-transition-property: opacity; + -ms-transition-property: opacity; + -o-transition-property: opacity; + transition-property: opacity; + -webkit-transition-duration: .1s; + -moz-transition-duration: .1s; + -ms-transition-duration: .1s; + -o-transition-duration: .1s; + transition-duration: .1s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +.message .messageOptions nav ul.smallButtons > li a.button { + border-radius: 0 0 0 0; +} +.message.messageSidebarOrientationLeft .messageContent { + border-left: 1px solid #cccccc; + margin: 0 0 0 211px; +} +.message.messageSidebarOrientationLeft .messageSidebar { + float: left; +} +.message.messageSidebarOrientationLeft .messageHeader > .pointer { + border-color: transparent #cccccc transparent transparent; + border-style: solid solid solid none; + left: -20px; +} +.message.messageSidebarOrientationLeft .messageHeader > .pointer > span { + border-color: transparent #fcfdfe transparent transparent; + border-style: solid solid solid none; + left: 1px; +} +.message.messageSidebarOrientationRight .messageContent { + border-right: 1px solid #cccccc; + margin: 0 211px 0 0; +} +.message.messageSidebarOrientationRight .messageSidebar { + float: right; +} +.message.messageSidebarOrientationRight .messageHeader > .pointer { + border-color: transparent transparent transparent #cccccc; + border-style: solid none solid solid; + right: -20px; +} +.message.messageSidebarOrientationRight .messageHeader > .pointer > span { + border-color: transparent transparent transparent #cccccc; + border-style: solid none solid solid; + right: 1px; +} +.message.dividers .userCredits { + border-top: 1px solid #cccccc; +} +.message .messageHeader > .pointer { + border-width: 20px; + display: block !important; + height: 0; + position: absolute; + top: 35px; + width: 0; + z-index: 100; +} +.message .messageHeader > .pointer > span { + border-width: 20px; + display: block; + height: 0; + position: absolute; + top: -20px; + width: 0; +} +.message .messageHeader .messageCounter { + float: right; + font-size: 85%; + font-weight: bold; + margin-left: 7px; +} +.message .messageHeader .messageCounter a { + min-height: 0; + padding: 1px 5px; + vertical-align: middle; +} +.message .messageHeader .messageCounter input[type=checkbox] { + vertical-align: middle; +} +.message .messageBody { + color: #666666; + display: block; + line-height: 1.5; + padding: 14px 21px 1px; + position: relative; +} +.message .messageBody:after { + clear: both; + content: ''; + display: block; +} +.message .messageBody > div:not(.messageFooter) { + border-top: 1px dotted #cccccc; + overflow: hidden; + padding: 14px 0; +} +.message .messageBody > footer { + padding-bottom: 14px; +} +.message .messageBody > .messageSignature { + color: #808080; +} +.message .messageBody .messageFooter > *:not(:first-child) { + margin-top: 7px; +} +.message .messageBody .messageFooter > .messageFooterNote { + border-left: 2px solid #cccccc; + color: #808080; + font-size: 85%; + padding: 4px 7px; + background-image: -webkit-linear-gradient(left top, rgba(204,204,204,0.2) 0%, transparent 40%); + background-image: -moz-linear-gradient(left top, rgba(204,204,204,0.2) 0%, transparent 40%); + background-image: -o-linear-gradient(left top, rgba(204,204,204,0.2) 0%, transparent 40%); + background-image: -ms-linear-gradient(left top, rgba(204,204,204,0.2) 0%, transparent 40%); + background-image: linear-gradient(left top, rgba(204,204,204,0.2) 0%, transparent 40%); +} +.message .messageContent { + background-color: #fcfdfe; +} +.message .messageContent .messageHeader { + padding: 14px 21px 0; + position: relative; +} +.message .messageContent .messageHeader > time { + color: #808080; + font-size: 85%; +} +.message .messageContent .messageHeader > .likesBadge { + display: inline-block; + margin: -2px 0 -2px 4px; +} +.message .messageContent .messageHeader > .messageTitle { + color: #666666; + font-size: 140%; + font-weight: bold; + padding: 7px 0 0; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +.message .messageSidebar { + line-height: 1.3; + margin-bottom: -1px; + padding: 14px 21px 21px; + position: relative; + text-align: center; + width: 170px; +} +.message .messageSidebar:after { + clear: both; + content: ''; + display: block; +} +.message .messageSidebar header .username { + color: #336699; + font-size: 120%; + font-weight: bold; + padding: 0 3px 1px; + text-shadow: 0 1px 0 rgba(255,255,255,0.8); +} +.message .messageSidebar header .username a { + text-decoration: none; +} +.message .messageSidebar .userTitle { + margin: 7px 0 0; +} +.message .messageSidebar .userRank { + margin: 2px 0 0; +} +.message .messageSidebar .userAvatar { + display: inline-block; + margin: 7px 0 0; + position: relative; + text-align: left; +} +.message .messageSidebar .userAvatar > .badgeOnline { + background-color: rgba(116,164,70,0.7); + border-bottom: 1px solid rgba(255,255,255,0.7); + bottom: 7px; + position: absolute; + right: -5px; + text-transform: uppercase; + border-radius: 2px 2px 2px 2px; + -webkit-box-shadow: 0 1px 7px 0 rgba(0,0,0,0.3); + -moz-box-shadow: 0 1px 7px 0 rgba(0,0,0,0.3); + -ms-box-shadow: 0 1px 7px 0 rgba(0,0,0,0.3); + -o-box-shadow: 0 1px 7px 0 rgba(0,0,0,0.3); + box-shadow: 0 1px 7px 0 rgba(0,0,0,0.3); +} +.message .messageSidebar .userCredits { + font-size: 85%; + margin: 7px 0 0; + padding: 7px 0 0; +} +.message .messageSidebar .userCredits .dataList > dt { + width: 50%; +} +.message .messageSidebar .userCredits .dataList > dd { + margin-left: 53%; +} +li:nth-child(2n+1) .message.messageSidebarOrientationLeft .messageHeader > .pointer > span { + border-right-color: #f1f5fa; +} +li:nth-child(2n+1) .message.messageSidebarOrientationRight .messageHeader > .pointer > span { + border-left-color: #f1f5fa; +} +li:nth-child(2n+1) .message .messageContent { + background-color: #f1f5fa; +} +.messageReduced .messageOptions > .breadcrumbs { + bottom: 10px; + left: 0; + opacity: 1; + position: relative; +} +.messageCollapsed { + color: #808080; + opacity: .7; + padding: 14px 21px; + -webkit-transition-property: opacity; + -moz-transition-property: opacity; + -ms-transition-property: opacity; + -o-transition-property: opacity; + transition-property: opacity; + -webkit-transition-duration: .1s; + -moz-transition-duration: .1s; + -ms-transition-duration: .1s; + -o-transition-duration: .1s; + transition-duration: .1s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +.messageCollapsed:hover { + opacity: 1; +} +.messageCollapsed.messageCollapsedExpandable { + cursor: pointer; +} +.messageCollapsed p { + display: inline-block; + vertical-align: middle; +} +.messageCollapsed p span { + display: block; + font-size: 85%; + margin-left: 7px; +} +.messageCollapsed .messageCounter { + padding-top: 3px; +} +.highlight { + background-color: #ffc800; +} +.jsMessageLoading { + background-image: url(../icon/spinner.svg); + background-position: center center; + background-repeat: no-repeat; + background-size: 64px; +} +#messageQuickReply .messageQuickReplyLoading { + background-image: url(../icon/spinner.svg); + background-position: center center; + background-repeat: no-repeat; + background-size: 64px; +} +#messageQuickReply .formSubmit { + padding-bottom: 14px; +} +#showQuotes { + bottom: 25px; + cursor: pointer; + opacity: .7; + position: fixed; + right: 25px; + -webkit-transition-property: opacity; + -moz-transition-property: opacity; + -ms-transition-property: opacity; + -o-transition-property: opacity; + transition-property: opacity; + -webkit-transition-duration: .2s; + -moz-transition-duration: .2s; + -ms-transition-duration: .2s; + -o-transition-duration: .2s; + transition-duration: .2s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +#showQuotes:hover { + opacity: 1; +} +#messageQuoteList { + max-width: 800px !important; +} +#messageQuoteList li:not(:first-child) { + margin-top: 7px; +} +#messageQuoteList li span { + float: left; + width: 40px; +} +#messageQuoteList li span > input { + vertical-align: bottom; +} +#messageQuoteList li span > img { + cursor: pointer; + vertical-align: middle; +} +#messageQuoteList li div.jsQuote { + margin-left: 60px; +} +#messageQuoteList li div.jsFullQuote { + display: none; +} +#quoteManagerCopy { + cursor: pointer; +} +#quoteManagerCopy .pointer { + border-width: 5px 5px 0; + bottom: -5px; + top: auto; +} +#pollOptionContainer .sortableList { + padding: 7px 0; +} +#pollOptionContainer .sortableList .sortableNode { + margin-top: 7px; +} +#pollOptionContainer .sortableList .sortableNode .sortableButtonContainer > img { + cursor: pointer; + margin-right: 14px; +} +.pollContainer { + float: left; + margin: 0 14px 7px 0; + max-width: 50%; + min-width: 300px; +} +.pollResultList li { + margin-bottom: 8px; + padding: 1px 0; + position: relative; + z-index: 0; + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + -ms-transition-property: background-color; + -o-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: .1s; + -moz-transition-duration: .1s; + -ms-transition-duration: .1s; + -o-transition-duration: .1s; + transition-duration: .1s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +.pollResultList li:last-child { + margin-bottom: 0px; +} +.pollResultList li:hover { + background-color: #f1f5fa; +} +.pollResultList li .pollMeter { + background-color: #d8e7f5; + height: 1.5em; + left: 0; + position: absolute; + top: 1px; + z-index: -1; + border-radius: 0 5px 5px 0; +} +.pollResultList li .caption { + color: #336699; +} +.pollResultList li .caption .optionName { + padding: 0 2.5em 0 4px; +} +.pollResultList li .caption .relativeVotes { + position: absolute; + right: 0; + top: 3px; +} +.userNotificationContainer { + width: 250px; +} +.userNotificationDetails { + padding: 7px 14px; + width: 222px; +} +.userNotificationDetails section { + border-top: 1px dotted #cccccc; + padding-top: 7px; +} +.userNotificationDetails nav { + border-top: 1px dotted #cccccc; + margin-top: 7px; + padding-top: 7px; + text-align: center; +} +.userNotificationDetails nav ul { + display: inline-block; +} +.scrollableContainer { + overflow: hidden; + position: relative; + width: 250px; +} +.scrollableContainer .scrollableItems { + position: relative; + width: 20000em; +} +.scrollableContainer .scrollableItems > div { + float: left; + width: 250px; +} +.scrollableContainer .scrollableItems > div:first-child { + border-right: 1px solid #cccccc; +} +.scrollableContainer .scrollableItems > div:first-child > ul > li { + overflow: hidden; + width: 250px; +} +.scrollableContainer .scrollableItems > div:first-child > ul > li > a > hgroup > h1 { + overflow: hidden; + text-overflow: ellipsis; +} +.scrollableContainer .scrollableItems > div:first-child p { + padding: 4px 14px; +} +.sidebar .userAvatar { + text-align: center; + overflow: hidden; +} +.framedIconList li { + float: left; + margin: 0 2px 4px 0; +} +.framedIconList li .framed { + display: inline-block; +} +.framedIconList:after { + content: ""; + height: 0; + display: block; + clear: both; +} +.userInformation > hgroup > h2, +.userInformation > .inlineDataList, +.userInformation > .dataList { + font-size: 85%; +} +.userProfilePreview { + position: relative; +} +.userProfilePreview > .userInformation { + padding-bottom: 16px; +} +.userProfilePreview > .userInformation > .inlineDataList, +.userProfilePreview > .userInformation > .dataList { + margin-bottom: 4px; + padding-top: 4px; + border-top: 1px dotted #cccccc; +} +.userProfilePreview > .userInformation > .dataList { + padding-bottom: 4px; + border-bottom: 1px dotted #cccccc; +} +.userProfilePreview > .userInformation > .buttonList { + position: absolute; + bottom: 0; + right: 0; +} +.userHeadline { + position: relative; +} +.userHeadline > .buttonGroup { + position: absolute; + right: 4px; + top: 4px; +} +.letters > li { + margin-bottom: 4px; +} +.letters > li > .button { + min-width: 1.2em; + text-align: center; +} +.userObjectWatchList > li > .box48 > .avatar { + position: relative; +} +.userObjectWatchList > li > .box48 > .avatar > .myAvatar { + position: absolute; + width: 24px; + height: 24px; + bottom: -4px; + left: 32px; + opacity: 1; + -webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); + -moz-box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); + -ms-box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); + -o-box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); + box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); +} +.userObjectWatchList > li > .box48 > div:not(:first-child) { + margin-left: 67px; + position: relative; +} +.userObjectWatchList > li > .box48 > div:not(:first-child) > div { + padding-right: 230px; +} +.userObjectWatchList > li > .box48 > div:not(:first-child) > div > .containerHeadline { + margin-bottom: 0; +} +.userObjectWatchList > li > .box48 > div:not(:first-child) > div > .labelList { + float: right; + padding-left: 7px; +} +.userObjectWatchList > li > .box48 > div:not(:first-child) > .buttonList { + opacity: 0; + position: absolute; + right: 0; + top: 0; + -webkit-transition-property: opacity; + -moz-transition-property: opacity; + -ms-transition-property: opacity; + -o-transition-property: opacity; + transition-property: opacity; + -webkit-transition-duration: .1s; + -moz-transition-duration: .1s; + -ms-transition-duration: .1s; + -o-transition-duration: .1s; + transition-duration: .1s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +.userObjectWatchList > li:hover > .box48 > div > .buttonList { + opacity: 1; +} +.userObjectWatchList .lastPost { + position: absolute; + right: 36px; + top: 0; + width: 180px; +} +.userObjectWatchList .lastPost hgroup > h2 { + color: #808080; + font-size: 85%; +} +#unreadWatchedObjects .dropdownMenu > li h1 { + max-width: 250px; + overflow: hidden; + text-overflow: ellipsis; +} +.comment, +.commentResponse { + position: relative; +} +.commentOptions { + display: block; + position: absolute; + top: 14px; + right: 14px; +} +.commentOptions > li { + float: left; + opacity: 0; + -webkit-transition-property: opacity; + -moz-transition-property: opacity; + -ms-transition-property: opacity; + -o-transition-property: opacity; + transition-property: opacity; + -webkit-transition-duration: .1s; + -moz-transition-duration: .1s; + -ms-transition-duration: .1s; + -o-transition-duration: .1s; + transition-duration: .1s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +.commentOptions > li > a { + padding: 4px; +} +.commentResponseList .commentOptions { + top: 7px; + right: 7px; +} +.commentContent:hover > .commentOptions > li { + opacity: 1; +} +.commentAdd > div > small, +.commentResponseAdd > div > small { + color: #808080; + display: block; + opacity: 0; + -webkit-transition-property: opacity; + -moz-transition-property: opacity; + -ms-transition-property: opacity; + -o-transition-property: opacity; + transition-property: opacity; + -webkit-transition-duration: .1s; + -moz-transition-duration: .1s; + -ms-transition-duration: .1s; + -o-transition-duration: .1s; + transition-duration: .1s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +.commentAdd > div > input:focus + small, +.commentResponseAdd > div > input:focus + small { + opacity: 1; +} +.commentContent:not(.commentResponseContent) { + margin-bottom: 14px; +} +.commentResponse { + border-top: 1px solid #cccccc; + padding: 7px; +} +.commentResponseAdd { + border-top: 1px solid #cccccc; + padding: 7px 7px 0; +} +.commentResponseAdd + .commentResponseList > .commentResponse:first-child { + margin-top: 7px; +} +.commentList > li:nth-child(2n) .commentResponseList > li:nth-child(2n+1) { + background-color: #fcfdfe; + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + -ms-transition-property: background-color; + -o-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: .1s; + -moz-transition-duration: .1s; + -ms-transition-duration: .1s; + -o-transition-duration: .1s; + transition-duration: .1s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +.commentList > li:nth-child(2n+1) .commentResponseList > li:nth-child(2n+1) { + background-color: #f1f5fa; + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + -ms-transition-property: background-color; + -o-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: .1s; + -moz-transition-duration: .1s; + -ms-transition-duration: .1s; + -o-transition-duration: .1s; + transition-duration: .1s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +.commentResponseList > li:hover { + background-color: #d8e7f5 !important; +} +.commentList > li:not(.commentAdd):hover { + background-color: #fcfdfe; +} +.commentList > li:not(.commentAdd):hover:nth-child(2n) { + background-color: #f1f5fa; +} +.commentList .likesBadge { + display: inline-block; + margin: -2px 0 -2px 4px; +} +.commentResponsePrevious, +.commentResponseRecent { + width: 100%; + text-align: center; + margin-left: auto; + margin-right: auto; + margin-top: 7px; +} +.commentResponsePrevious a, +.commentResponseRecent a { + border-radius: 3px; + display: inline-block; + padding: 3px 13px; + white-space: nowrap; +} +.labelList, +.labelList > li { + display: inline-block; +} +#labelList { + *zoom: 1; +} +#labelList:before, +#labelList:after { + display: table; + content: ""; +} +#labelList:after { + clear: both; +} +#labelList li { + float: left; + margin-right: 1%; + width: 30%; +} +#labelList li.labelCustomClass { + position: relative; +} +#labelList li.labelCustomClass input[type='radio'] { + left: 0; + position: absolute; + top: 0; +} +#labelList li.labelCustomClass span { + display: block; + margin-left: 24px; +} +.labelChooser > .dropdownToggle > span { + cursor: pointer; +} +#conversationLabelFilter { + margin-bottom: 14px; +} +.conversationLabelList { + margin-bottom: 14px; +} +.conversationLabelList li:not(:last-child) { + margin-bottom: 4px; +} +.conversationLabelList~small { + display: block; +} +#unreadConversations .dropdownMenu > li h1 { + max-width: 250px; + overflow: hidden; + text-overflow: ellipsis; +} +.conversationParticipantList > li { + float: left; + width: 30%; + overflow: hidden; +} +.conversationParticipantList > li > hgroup > h2 { + font-size: 85%; +} +.conversationLeft { + text-decoration: line-through; +} +.sidebar fieldset.conversationQuota > div { + text-align: center; + width: 180px; +} +.conversationUsageBar { + background-color: #ffffff; + border: 1px solid #cccccc; + padding: 1px; +} +.conversationUsageBar > span { + color: transparent; + display: block; + font-size: 85%; + background-color: #009900; + background-image: -webkit-linear-gradient(#009900,#006600); + background-image: -moz-linear-gradient(#009900,#006600); + background-image: -o-linear-gradient(#009900,#006600); + background-image: -ms-linear-gradient(#009900,#006600); + background-image: linear-gradient(#009900,#006600); +} +.conversationUsageBar.yellow > span { + background-color: #ffd700; + background-image: -webkit-linear-gradient(#ffd700,#daa520); + background-image: -moz-linear-gradient(#ffd700,#daa520); + background-image: -o-linear-gradient(#ffd700,#daa520); + background-image: -ms-linear-gradient(#ffd700,#daa520); + background-image: linear-gradient(#ffd700,#daa520); +} +.conversationUsageBar.red > span { + background-color: #990000; + background-image: -webkit-linear-gradient(#990000,#660000); + background-image: -moz-linear-gradient(#990000,#660000); + background-image: -o-linear-gradient(#990000,#660000); + background-image: -ms-linear-gradient(#990000,#660000); + background-image: linear-gradient(#990000,#660000); +} +.boxHeadline.conversationHeadline > hgroup { + display: inline-block; +} +.boxHeadline.conversationHeadline > ul.labelList { + position: relative; + top: -3px; +} +.colorPreview { + border: 1px solid #cccccc; + border-radius: 6px; + display: inline-block; +} +.colorPreview:hover { + -webkit-box-shadow: 0 0 15px 0 #cccccc; + -moz-box-shadow: 0 0 15px 0 #cccccc; + -ms-box-shadow: 0 0 15px 0 #cccccc; + -o-box-shadow: 0 0 15px 0 #cccccc; + box-shadow: 0 0 15px 0 #cccccc; +} +.colorPreview > div { + border: 2px solid #ffffff; + border-radius: 6px; + cursor: pointer; + display: block; + height: 60px; + width: 200px; +} +.colorList > li { + float: left; + padding: 7px; +} +.colorList > li > figure > figcaption { + font-size: 85%; + margin-bottom: 7px; + text-align: center; +} +.colorList:after { + clear: both; + content: ""; + display: block; +} +.wbbBoardList > li > ul > .wbbCategory > hgroup { + padding-left: 43px; +} +.wbbBoardList > li > ul > li > ul > .wbbCategory > hgroup { + padding-left: 79px; +} +.wbbBoardList .tabularBox:not(.wbbBoardNodeTop) { + border-width: 1px 0 0; +} +.wbbBoardList .wbbStats { + left: 50%; + position: absolute; + top: 14px; + width: 15%; +} +.wbbBoardList .wbbStats > dl > dt { + line-height: 1.27; + width: 40%; +} +.wbbBoardList .wbbStats > dl > dd { + font-weight: normal; + font-size: 85%; + width: 58%; +} +.wbbBoardList .wbbLastPost { + left: 65%; + position: absolute; + top: 14px; + width: 35%; +} +.wbbBoardList .wbbLastPost hgroup > h1 { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + width: 98%; + white-space: nowrap; +} +.wbbBoardList .wbbLastPost hgroup > h1 > .badge { + font-size: 85%; +} +.wbbBoardList .wbbLastPost hgroup > h2 { + font-size: 85%; +} +.wbbBoardList .wbbLastPost hgroup > h2 time { + color: #808080; +} +.wbbBoardList .wbbSubBoards li { + display: inline-block; +} +.wbbBoardList .wbbBoardDescription { + font-size: 90%; +} +.wbbBoardList .wbbBoardContainer { + position: relative; +} +.wbbBoardList .wbbBoardNodeTop { + margin-top: 14px; +} +.wbbBoardList .wbbBoard { + min-height: 44px; + padding: 7px; + padding-right: 51%; + -webkit-transition-property: background; + -moz-transition-property: background; + -ms-transition-property: background; + -o-transition-property: background; + transition-property: background; + -webkit-transition-duration: .1s; + -moz-transition-duration: .1s; + -ms-transition-duration: .1s; + -o-transition-duration: .1s; + transition-duration: .1s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +.wbbBoardList .wbbBoard~ ul > .wbbBoardContainer > .wbbBoard { + padding-left: 43px; +} +.wbbBoardList .wbbBoard~ ul > .wbbBoardContainer > .wbbBoard~ ul > .wbbBoardContainer > .wbbBoard { + padding-left: 79px; +} +.wbbBoardList .wbbBoard:hover { + background-color: #d8e7f5; +} +.wbbBoardList .wbbBoardNode1 { + background-color: #fcfdfe; +} +.wbbBoardList .wbbBoardNode2 { + background-color: #f1f5fa; +} +.wbbBoardList .wbbBoard > div > hgroup > h1 { + font-weight: normal; +} +.wbbBoardList .new > div > hgroup > h1, +.wbbBoardList .wbbSubBoards li.new a { + font-weight: bold; +} +.wbbBoardList .wbbCollapsibleCategory .collapsibleButton { + display: inline-block; + margin-right: 7px; +} +.wbbBoardListReduced .wbbBoardContainer > div { + padding: 7px; +} +.wbbBoardListReduced .wbbBoardContainer > ul > .wbbBoardContainer > div { + padding-left: 28px; +} +.wbbBoardListReduced .wbbBoardContainer > ul > .wbbBoardContainer > ul > .wbbBoardContainer > div { + padding-left: 56px; +} +.wbbBoardListReduced > li > ul > .wbbCategory > hgroup { + padding-left: 28px; +} +.wbbBoardListReduced > li > ul > .wbbCategory > ul > .wbbBoardContainer > div { + padding-left: 56px; +} +.wbbThreadList .wbbThreadDeleted:not(:hover) td { + background-color: #c95145; + color: #ffffff; +} +.wbbThreadList .wbbThreadDeleted:not(:hover) td a { + color: #ffffff; +} +.wbbThreadList .wbbThreadDisabled:not(.wbbThreadDeleted):not(:hover) td { + background-color: #74a446; + color: #ffffff; +} +.wbbThreadList .wbbThreadDisabled:not(.wbbThreadDeleted):not(:hover) td a { + color: #ffffff; +} +.wbbThreadPostList .messageCollapsed.wbbPostDeleted { + -webkit-box-shadow: 0 0 10px 0 #c95145; + -moz-box-shadow: 0 0 10px 0 #c95145; + -ms-box-shadow: 0 0 10px 0 #c95145; + -o-box-shadow: 0 0 10px 0 #c95145; + box-shadow: 0 0 10px 0 #c95145; +} +.wbbSimilarThreadList .box32:not(:last-child) { + margin-bottom: 7px; +} +.wbbSimilarThreadList h1 { + font-weight: bold; +} +.wbbSimilarThreadList .smallBreadcrumbs > li:first-child { + background-image: url(../icon/folderColored.svg); + background-position: left center; + background-repeat: no-repeat; + padding-left: 20px; +} +.boxHeadline.wbbThread > hgroup { + display: inline-block; +} +.boxHeadline.wbbThread > ul.labelList { + position: relative; + top: -3px; +} +.wbbInlineSimilarThreadList { + margin: 7px 0; +} +body, +.tabularBox, +.dialogTitlebar { + background-image: url(../images/blueTemptation/blueTemptationHeader.png); + background-repeat: repeat-x; +} +.mainMenu { + margin: 14px 9px 0; +} +.mainMenu > ul { + background-color: rgba(0,0,0,0.4); + border-radius: 5px 5px 0 0; +} +.mainMenu > ul > li { + border-width: 0 !important; +} +.mainMenu > ul > li > a { + color: #407fbf; + position: relative; + -webkit-transition-property: color; + -moz-transition-property: color; + -ms-transition-property: color; + -o-transition-property: color; + transition-property: color; + -webkit-transition-duration: .3s; + -moz-transition-duration: .3s; + -ms-transition-duration: .3s; + -o-transition-duration: .3s; + transition-duration: .3s; + -webkit-transition-timing-function: ease; + -moz-transition-timing-function: ease; + -ms-transition-timing-function: ease; + -o-transition-timing-function: ease; + transition-timing-function: ease; +} +.mainMenu > ul > li > a:hover { + color: #ffffff; +} +.mainMenu > ul > li.active > a { + border-radius: 5px 5px 0 0; + background-color: #e4eef8; + background-image: -webkit-linear-gradient(#ffffff,#e4eef8); + background-image: -moz-linear-gradient(#ffffff,#e4eef8); + background-image: -o-linear-gradient(#ffffff,#e4eef8); + background-image: -ms-linear-gradient(#ffffff,#e4eef8); + background-image: linear-gradient(#ffffff,#e4eef8); +} +.mainMenu > ul > li.active > a:after { + border-bottom-left-radius: 6px; + border-width: 0 0 1px 1px; + bottom: 0; + content: ""; + height: 7px; + position: absolute; + right: -7px; + width: 7px; + -webkit-box-shadow: -2px 2px 0 0 #e4eef8; + -moz-box-shadow: -2px 2px 0 0 #e4eef8; + -ms-box-shadow: -2px 2px 0 0 #e4eef8; + -o-box-shadow: -2px 2px 0 0 #e4eef8; + box-shadow: -2px 2px 0 0 #e4eef8; +} +.mainMenu > ul > li.active > a:before { + border-bottom-right-radius: 6px; + border-width: 0 1px 1px 0; + bottom: 0; + content: ""; + height: 7px; + left: -7px; + position: absolute; + width: 7px; + -webkit-box-shadow: 2px 2px 0 0 #e4eef8; + -moz-box-shadow: 2px 2px 0 0 #e4eef8; + -ms-box-shadow: 2px 2px 0 0 #e4eef8; + -o-box-shadow: 2px 2px 0 0 #e4eef8; + box-shadow: 2px 2px 0 0 #e4eef8; +} +.mainMenu > ul > li.active > a:hover { + color: #336699; +} +.navigation { + border-color: #b8d3ed; +} +.navigation > ul.navigationIcons > li > a:hover { + background-color: #d8e7f5; +} +.navigation > ul.navigationItems { + border-color: #93bde3; +} +.navigationHeader { + border-top-width: 0; + border-radius: 6px 6px 0 0; +} +.navigationFooter { + border-radius: 0 0 6px 6px; +} +.sidebar > div > fieldset:not(:last-child), +.sidebar > div > div:not(:last-child) { + border-color: #b8d3ed; +} +.sidebar fieldset > nav ul > li.active { + -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); + -moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); + -ms-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); + -o-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); + box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); +} +.sidebar fieldset > nav ul > li > a { + -webkit-transition-property: color; + -moz-transition-property: color; + -ms-transition-property: color; + -o-transition-property: color; + transition-property: color; + -webkit-transition-duration: .1s; + -moz-transition-duration: .1s; + -ms-transition-duration: .1s; + -o-transition-duration: .1s; + transition-duration: .1s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +#main > div { + -webkit-box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.1); + -moz-box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.1); + -ms-box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.1); + -o-box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.1); + box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.1); +} +#main > div > .sidebar > .collapsibleButton { + border-width: 1px 0 1px 1px; + border-style: solid; + border-color: #b8d3ed; + clip: rect(-5px 25px 31px -5px); + -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); + -moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); + -ms-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); + -o-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); + box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); +} +#main.sidebarOrientationLeft .content { + border-left: 1px solid #b8d3ed; + margin-left: 299px; +} +#main.sidebarOrientationRight .content { + border-right: 1px solid #b8d3ed; + margin-right: 299px; +} +.content { + -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); + -moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); + -ms-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); + -o-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); + box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); } - -.wcf-wideEditor dd { - margin-left: 0; +button, +input[type='reset'], +input[type='submit'], +input[type='button'], +.button { + font-weight: bold; } - - - -/* ############## Global Button Color & Effect Library ############## */ - -/** - * This defines the colors & effects of Button elements - * Define the shape of the element in a separate class - */ - -/* -- -- -- Normal Buttons -- -- -- */ - -/* Normal State */ - -.wcf-button, +.button, input[type='reset']:not([disabled]), input[type='submit']:not([disabled]), input[type='button']:not([disabled]), button:not([disabled]) { - text-decoration: none; - text-shadow: 0 1px 0 rgba(255, 255, 255, 1); - color: rgba(153, 153, 153, 1); - 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-box-shadow: 0 1px 3px rgba(0, 0, 0, .1); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1); - -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1); - -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1); - box-shadow: 0 1px 3px rgba(0, 0, 0, .1); - - -webkit-transition-property: border, box-shadow, background-color, background-image, color; - -webkit-transition-duration: .1s; - -webkit-transition-timing-function: linear; - - -moz-transition-property: border, box-shadow, background-color, background-image, color; - -moz-transition-duration: .1s; - -moz-transition-timing-function: linear; - - -ms-transition-property: border, box-shadow, background-color, background-image, color; - -ms-transition-duration: .1s; - -ms-transition-timing-function: linear; - - -o-transition-property: border, box-shadow, background-color, background-image, color; - -o-transition-duration: .1s; - -o-transition-timing-function: linear; - - transition-property: border, box-shadow, background-color, background-image, color; - transition-duration: .1s; - transition-timing-function: linear; -} - -/* Hover State */ - -.wcf-button:hover, -.default .wcf-button:hover, + border-color: #cdcdcd #bbbbbb #a9a9a9; + -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); + -moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); + -ms-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); + -o-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); + box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); + background-color: #f0f0f0; + background-image: -webkit-linear-gradient(top,#fdfdfd,#f0f0f0 2px,#e3e3e3); + background-image: -moz-linear-gradient(top,#fdfdfd,#f0f0f0 2px,#e3e3e3); + background-image: -o-linear-gradient(top,#fdfdfd,#f0f0f0 2px,#e3e3e3); + background-image: -ms-linear-gradient(top,#fdfdfd,#f0f0f0 2px,#e3e3e3); + background-image: linear-gradient(top,#fdfdfd,#f0f0f0 2px,#e3e3e3); + -webkit-transition-property: background-color, background-image, border, box-shadow, color; + -moz-transition-property: background-color, background-image, border, box-shadow, color; + -ms-transition-property: background-color, background-image, border, box-shadow, color; + -o-transition-property: background-color, background-image, border, box-shadow, color; + transition-property: background-color, background-image, border, box-shadow, color; + -webkit-transition-duration: .1s; + -moz-transition-duration: .1s; + -ms-transition-duration: .1s; + -o-transition-duration: .1s; + transition-duration: .1s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +.button.buttonPrimary, +input[type='submit']:not([disabled]), +input[type='button']:not([disabled]).buttonPrimary, +button:not([disabled]).buttonPrimary { + border-color: #81abd5 #6699cc #4b87c3; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #6699cc; + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #6699cc; + -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #6699cc; + -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #6699cc; + box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #6699cc; + background-color: #ecf3fa; + background-image: -webkit-linear-gradient(top,#ffffff,#ecf3fa 2px,#d8e7f5); + background-image: -moz-linear-gradient(top,#ffffff,#ecf3fa 2px,#d8e7f5); + background-image: -o-linear-gradient(top,#ffffff,#ecf3fa 2px,#d8e7f5); + background-image: -ms-linear-gradient(top,#ffffff,#ecf3fa 2px,#d8e7f5); + background-image: linear-gradient(top,#ffffff,#ecf3fa 2px,#d8e7f5); +} +.button:hover, input[type='reset']:not([disabled]):hover, input[type='submit']:not([disabled]):hover, input[type='button']:not([disabled]):hover, -button:not([disabled]):hover { - text-decoration: none; - color: rgba(102, 102, 102, 1); - 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 */ - -.wcf-button:focus, -.default .wcf-button:focus, -input[type='reset']:not([disabled]):focus, -input[type='submit']:not([disabled]):focus, -input[type='button']:not([disabled]):focus, -button:not([disabled]):focus, - -.wcf-button:active, -.active .wcf-button, -.default .wcf-button:active, -input[type='reset']:not([disabled]):active, -input[type='submit']:not([disabled]):active, -input[type='button']:not([disabled]):active, -button:not([disabled]):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 Buttons -- -- -- */ - -/* Default State Glow */ - -@-webkit-keyframes glowButtons { - 0% { - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5); - } - 100% { - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1); - } -} -@-moz-keyframes glowButtons { - 0% { - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5); - } - 100% { - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1); - } -} -@-ms-keyframes glowButtons { - 0% { - -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5); - } - 100% { - -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1); - } -} -/* disabled to ease rendering work for Opera -@-o-keyframes glowButtons { - 0% { - -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5); - } - 100% { - -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1); - } -} -*/ -@keyframes glowButtons { - 0% { - box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5); - } - 100% { - box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1); - } -} - -/* Default Normal State */ - -.default .wcf-button, -input[type='submit']:not([disabled]), -input[type='button']:not([disabled]).default, -button:not([disabled]).default { - 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 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369; - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369; - -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369; - -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369; - box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369; - - -webkit-animation-name: glowButtons; - -webkit-animation-duration: 1s; - -webkit-animation-iteration-count: infinite; - -webkit-animation-direction: alternate; - -webkit-animation-timing-function: ease-in-out; - - -moz-animation-name: glowButtons; - -moz-animation-duration: 1s; - -moz-animation-iteration-count: infinite; - -moz-animation-direction: alternate; - -moz-animation-timing-function: ease-in-out; - - -ms-animation-name: glowButtons; - -ms-animation-duration: 1s; - -ms-animation-iteration-count: infinite; - -ms-animation-direction: alternate; - -ms-animation-timing-function: ease-in-out; - /* disabled to ease rendering work for Opera - -o-animation-name: glowButtons; - -o-animation-duration: 1s; - -o-animation-iteration-count: infinite; - -o-animation-direction: alternate; - -o-animation-timing-function: ease-in-out; - */ - animation-name: glowButtons; - animation-duration: 1s; - animation-iteration-count: infinite; - animation-direction: alternate; - animation-timing-function: ease-in-out; -} - -/* Default Hover State Glow */ - -@-webkit-keyframes glowButtonsHover { - 0% { - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3); - } - 100% { - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1); - } -} -@-moz-keyframes glowButtonsHover { - 0% { - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3); - } - 100% { - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1); - } -} -@-ms-keyframes glowButtonsHover { - 0% { - -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3); - } - 100% { - -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1); - } -} -/* disabled to ease rendering work for Opera -@-o-keyframes glowButtonsHover { - 0% { - -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3); - } - 100% { - -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1); - } -} -*/ -@keyframes glowButtonsHover { - 0% { - box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3); - } - 100% { - box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1); - } -} - -/* Default Hover State */ - -.default .wcf-button:hover, +button:not([disabled]):hover, +.button.buttonPrimary:hover, input[type='submit']:not([disabled]):hover, -input[type='button']:not([disabled]).default:hover, -button:not([disabled]).default:hover { - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2; - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2; - -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2; - -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2; - box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2; - - -webkit-animation-name: glowButtonsHover; - -webkit-animation-duration: 1s; - -webkit-animation-iteration-count: infinite; - -webkit-animation-direction: alternate; - -webkit-animation-timing-function: ease-in-out; - - -moz-animation-name: glowButtonsHover; - -moz-animation-duration: 1s; - -moz-animation-iteration-count: infinite; - -moz-animation-direction: alternate; - -moz-animation-timing-function: ease-in-out; - - -ms-animation-name: glowButtonsHover; - -ms-animation-duration: 1s; - -ms-animation-iteration-count: infinite; - -ms-animation-direction: alternate; - -ms-animation-timing-function: ease-in-out; - /* disabled to ease rendering work for Opera - -o-animation-name: glowButtonsHover; - -o-animation-duration: 1s; - -o-animation-iteration-count: infinite; - -o-animation-direction: alternate; - -o-animation-timing-function: ease-in-out; - */ - animation-name: glowButtonsHover; - animation-duration: 1s; - animation-iteration-count: infinite; - animation-direction: alternate; - animation-timing-function: ease-in-out; -} - -/* Default Active State Glow */ - -@-webkit-keyframes glowDefaultButtonsActive { - 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 glowDefaultButtonsActive { - 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 glowDefaultButtonsActive { - 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); - } -} -/* disabled to ease rendering work for Opera -@-o-keyframes glowDefaultButtonsActive { - 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 glowDefaultButtonsActive { - 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 */ - -.default .wcf-button:focus, -input[type='submit']:not([disabled]):focus, -input[type='button']:not([disabled]).default:focus, -button:not([disabled]).default:focus, - -.default .wcf-button:active, -input[type='submit']:not([disabled]):active, -input[type='button']:not([disabled]).default:active, -button:not([disabled]).default: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: glowDefaultButtonsActive; - -webkit-animation-duration: 1s; - -webkit-animation-iteration-count: infinite; - -webkit-animation-direction: alternate; - -webkit-animation-timing-function: ease-in-out; - - -moz-animation-name: glowDefaultButtonsActive; - -moz-animation-duration: 1s; - -moz-animation-iteration-count: infinite; - -moz-animation-direction: alternate; - -moz-animation-timing-function: ease-in-out; - - -ms-animation-name: glowDefaultButtonsActive; - -ms-animation-duration: 1s; - -ms-animation-iteration-count: infinite; - -ms-animation-direction: alternate; - -ms-animation-timing-function: ease-in-out; - /* disabled to ease rendering work for Opera - -o-animation-name: glowDefaultButtonsActive; - -o-animation-duration: 1s; - -o-animation-iteration-count: infinite; - -o-animation-direction: alternate; - -o-animation-timing-function: ease-in-out; - */ - animation-name: glowDefaultButtonsActive; - animation-duration: 1s; - animation-iteration-count: infinite; - animation-direction: alternate; - animation-timing-function: ease-in-out; -} - - - -/* -- -- -- Special Buttons -- -- -- */ - -/* Disabled State */ - -.disabled .wcf-button, -input[disabled], -input[type='button'][disabled], -button[disabled] { - color: rgba(153, 153, 153, 1); - cursor: default; - border-width: 1px; - border-style: solid; - border-color: #ccc #bbb #aaa; - background-color: transparent; -} - - - -/* ############## ACP Package List ############## */ - -/* -- -- -- Application Package -- -- -- */ - -/* Globals */ - -.wcf-infoPackageApplication { - position: relative; -} - -.wcf-infoPackageApplication .wcf-packageApplicationIcon { - position: absolute; - top: 30px; - left: 25px; - width: 96px; - height: 96px; +input[type='button']:not([disabled]).buttonPrimary:hover, +button:not([disabled]).buttonPrimary:hover { + border-color: #ffb846 #ffaa22 #fd9c00; + color: #666666; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #ffaa22; + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #ffaa22; + -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #ffaa22; + -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #ffaa22; + box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #ffaa22; + background-color: #fff1e2; + background-image: -webkit-linear-gradient(top,#fffdfb,#fff1e2 2px,#ffe5c8); + background-image: -moz-linear-gradient(top,#fffdfb,#fff1e2 2px,#ffe5c8); + background-image: -o-linear-gradient(top,#fffdfb,#fff1e2 2px,#ffe5c8); + background-image: -ms-linear-gradient(top,#fffdfb,#fff1e2 2px,#ffe5c8); + background-image: linear-gradient(top,#fffdfb,#fff1e2 2px,#ffe5c8); +} +.button.active, +input[type='button'].active, +button.active, +.button.active:hover, +input[type='button'].active:hover, +button.active:hover { + border-color: #8c8c8c; + color: #f0f0f0; + -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); + -moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); + -ms-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); + -o-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); + box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); + background-color: #999999; + background-image: -webkit-linear-gradient(#808080,#999999 3px); + background-image: -moz-linear-gradient(#808080,#999999 3px); + background-image: -o-linear-gradient(#808080,#999999 3px); + background-image: -ms-linear-gradient(#808080,#999999 3px); + background-image: linear-gradient(#808080,#999999 3px); + text-shadow: 0 1px 0 rgba(255,255,255,0.8); + text-shadow: 0 -1px 0 rgba(0,0,0,0.8); +} +.breadcrumbs { + background-color: #ffffff; + border: 1px solid #cccccc; + border-radius: 6px 6px 6px 6px; +} +.breadcrumbs > ul > li { + padding-right: 0; + -webkit-transition-property: max-width; + -moz-transition-property: max-width; + -ms-transition-property: max-width; + -o-transition-property: max-width; + transition-property: max-width; + -webkit-transition-duration: .2s; + -moz-transition-duration: .2s; + -ms-transition-duration: .2s; + -o-transition-duration: .2s; + transition-duration: .2s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +.breadcrumbs > ul > li:hover { + max-width: 100%; +} +.breadcrumbs > ul > li:hover > a { + background-color: #f1f5fa; + position: relative; + z-index: 10; +} +.breadcrumbs > ul > li:hover > .pointer > span { + border-color: transparent transparent transparent #f1f5fa; +} +.breadcrumbs > ul > li > .pointer { + border-color: transparent transparent transparent #cccccc; + border-style: solid none solid solid; + border-width: 15px; + display: block; + height: 0; + padding: 0; + right: -15px; + top: -4px; + width: 0; + z-index: 20; +} +.breadcrumbs > ul > li > .pointer > span { + border-color: transparent transparent transparent #ffffff; + border-style: solid none solid solid; + border-width: 15px; + display: block; + height: 0; + left: -16px; + overflow: hidden; + position: absolute; + text-indent: -9000px; + top: -15px; + width: 0; + -webkit-transition-property: border-color; + -moz-transition-property: border-color; + -ms-transition-property: border-color; + -o-transition-property: border-color; + transition-property: border-color; + -webkit-transition-duration: .2s; + -moz-transition-duration: .2s; + -ms-transition-duration: .2s; + -o-transition-duration: .2s; + transition-duration: .2s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +.breadcrumbs > ul > li > a { + padding-left: 20px; + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + -ms-transition-property: background-color; + -o-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: .2s; + -moz-transition-duration: .2s; + -ms-transition-duration: .2s; + -o-transition-duration: .2s; + transition-duration: .2s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +.breadcrumbs > ul > li:first-child > a { + background-position: 7px center; + padding-left: 30px; + border-radius: 4px 0 0 4px; +} +.userPanel { + border-bottom: 1px solid rgba(0,0,0,0.1); + -webkit-box-shadow: 0 3px 7px 0 rgba(0,0,0,0.3); + -moz-box-shadow: 0 3px 7px 0 rgba(0,0,0,0.3); + -ms-box-shadow: 0 3px 7px 0 rgba(0,0,0,0.3); + -o-box-shadow: 0 3px 7px 0 rgba(0,0,0,0.3); + box-shadow: 0 3px 7px 0 rgba(0,0,0,0.3); +} +.userPanel > div > .searchBar > form input[type="search"]:focus, +.userPanel > div > .searchBar > form input[type="search"]:active { + -webkit-box-shadow: 0 0 0 0 transparent; + -moz-box-shadow: 0 0 0 0 transparent; + -ms-box-shadow: 0 0 0 0 transparent; + -o-box-shadow: 0 0 0 0 transparent; + box-shadow: 0 0 0 0 transparent; +} +.container, +.message, +.dropdownMenu, +.tabularBox, +.attachmentThumbnail, +.attachmentThumbnail > img, +.attachmentThumbnail > a > img { + border-radius: 6px 6px 6px 6px; +} +.containerList > li:first-child { + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} +.containerList > li:last-child { + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; +} +.message .messageContent { + border-radius: 0 5px 5px 0; +} +.message.messageReduced .messageContent { + border-radius: 5px 5px 5px 5px; +} +.messageOptions nav ul.smallButtons > li:first-child a.button { + border-top-left-radius: 14px; +} +.messageOptions nav ul.smallButtons > li:last-child a.button { + border-bottom-right-radius: 6px; +} +.tabularBox:not(.tabularBoxTitle) .table thead tr:first-child th:first-child { + border-radius: 4px 0 0 0; +} +.tabularBox:not(.tabularBoxTitle) .table thead tr:first-child th:last-child { + border-radius: 0 4px 0 0; +} +.tabularBox .table tbody tr:last-child td:first-child { + border-radius: 0 0 0 4px; +} +.tabularBox .table tbody tr:last-child td:last-child { + border-radius: 0 0 4px 0; +} +.container > .table > tbody > tr:first-child > td:first-child { + border-radius: 4px 0 0 0; +} +.container > .table > tbody > tr:first-child > td:last-child { + border-radius: 0 4px 0 0; +} +.container > .table > tbody > tr:last-child > td:first-child { + border-radius: 0 0 0 4px; +} +.container > .table > tbody > tr:last-child > td:last-child { + border-radius: 0 0 4px 0; +} +.attachmentThumbnail > hgroup { + border-radius: 0 0 4px 4px; +} +.wbbBoardList:not(.wbbBoardListReduced) > li.wbbBoardNodeTop:not(.wbbBoardNodeTopEmpty) > div { + border-radius: 4px 4px 0 0; +} +.wbbBoardList:not(.wbbBoardListReduced) > li > ul > li:last-child div.wbbBoard:last-child, +.wbbBoardList:not(.wbbBoardListReduced) > li > ul > li.tabularBox:last-child { + border-radius: 0 0 4px 4px; +} +.wbbBoardList:not(.wbbBoardListReduced) .tabularBox:not(.wbbBoardNodeTop) { + border-radius: 0; +} +.wbbBoardList:not(.wbbBoardListReduced) .wbbBoardNodeTopEmpty div.wbbBoard { + border-radius: 4px 4px 4px 4px; +} +.wbbBoardListReduced .tabularBox { + border-radius: 0 0 0 0; +} +.containerList.doubleColumned > li:last-child { + border-radius: 0; +} +.containerList.doubleColumned > li:first-child { + border-radius: 5px 0 0 0; +} +.containerList.doubleColumned > li:nth-child(2) { + border-top-right-radius: 5px; +} +.containerList.doubleColumned > li:nth-child(even):last-child { + border-bottom-right-radius: 5px; +} +.containerList.doubleColumned > li:nth-child(odd):last-child, +.containerList.doubleColumned > li:nth-child(odd):nth-last-child(2) { + border-bottom-left-radius: 5px; +} +.tabMenuContainer > .menu { + border-radius: 5px 5px 0 0; +} +.tabMenu { + padding: 0 10px; +} +.tabMenu > ul { + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} +.tabMenu > ul > li.ui-state-active > a { + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.tabMenu > ul > li.ui-state-active > a:before { + border: 1px solid #cccccc; + border-bottom-right-radius: 6px; + border-width: 0 1px 1px 0; + bottom: -1px; + content: " "; + height: 5px; + left: -6px; + position: absolute; + width: 5px; + -webkit-box-shadow: 2px 1px 0 0 #fcfdfe; + -moz-box-shadow: 2px 1px 0 0 #fcfdfe; + -ms-box-shadow: 2px 1px 0 0 #fcfdfe; + -o-box-shadow: 2px 1px 0 0 #fcfdfe; + box-shadow: 2px 1px 0 0 #fcfdfe; } - -.wcf-infoPackageApplication div { - margin-bottom: -15px; - margin-left: 30px; -} - -.wcf-infoPackageApplication footer { - position: relative; - right: -15px; - bottom: -15px; -} - -.wcf-infoPackageApplication footer nav { - /* General toggle switch for package nav-bar orientation (options: left|center|right) */ - text-align: right; -} - - - -/* -- -- -- Package Plugin -- -- -- */ - -/* Globals */ - -.wcf-infoPackagePlugin { - text-align: center; - margin: 15px 10px 0 0; - display: inline-block; - position: relative; - width: 150px; - height: 150px; - overflow: hidden; - - -webkit-transition: background, border, color .1s linear; - -moz-transition: background, border, color .1s linear; - -ms-transition: background, border, color .1s linear; - -o-transition: background, border, color .1s linear; - transition: background, border, color .1s linear; -} - -.wcf-infoPackagePlugin a { - text-decoration: none; -} - -.wcf-infoPackagePlugin > div > a { - color: rgba(153, 153, 153, 1); - background-size: 96px; - background-position: center 70%; - background-repeat: no-repeat; - margin: 1px; - display: block; - position: relative; - width: 148px; - height: 148px; -} - -.wcf-infoPackagePlugin:hover > div > a { - color: rgba(102, 102, 102, 1); -} - -.wcf-infoPackagePlugin > div > a > h1 { /* ToDo: h1 inside a ??? */ - font-size: 100%; - font-weight: bold; - text-shadow: 0 1px 0 rgba(255, 255, 255, 1); - word-wrap: break-word; - margin: 0 -1px; - padding: 3px 1px; - display: block; - position: relative; - z-index: 100; -} - -.wcf-infoPackagePlugin:hover > div > a > h1 { - border-bottom: 1px solid rgba(204, 204, 204, 1); - - background-color: rgba(0, 0, 0, .015); - 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)); -} - -.wcf-infoPackagePlugin footer { - margin-top: -22px; - width: 100%; -} - -.wcf-infoPackagePlugin > div > a > small { - font-size: 85%; - font-weight: normal; - text-shadow: none; - border-radius: 7px; - padding: 40px 5px; - display: block; - position: absolute; - top: 0; - bottom: 0; - width: 139px; - opacity: 0; - - -webkit-transition: opacity .1s linear; - -moz-transition: opacity .1s linear; - -ms-transition: opacity .1s linear; - -o-transition: opacity .1s linear; - transition: opacity .1s linear; -} - -.wcf-infoPackagePlugin:hover > div > a > small { - background-color: rgba(255, 255, 255, .9); - z-index: 10; - opacity: 1; -} - - - -/* -- -- -- Package Footers -- -- -- */ - -@media screen and (min-width: 480px), screen and (min-device-width: 480px) { - - .wcf-infoPackageApplication footer nav, - .wcf-infoPackagePlugin footer nav { - opacity: 0; - - -webkit-transition: opacity .1s linear; - -moz-transition: opacity .1s linear; - -ms-transition: opacity .1s linear; - -o-transition: opacity .1s linear; - transition: opacity .1s linear; - } - - .wcf-infoPackageApplication:hover footer nav, - .wcf-infoPackagePlugin:hover footer nav { - opacity: 1; - } - -} - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - - .wcf-infoPackageApplication footer nav, - .wcf-infoPackagePlugin footer nav { - opacity: 1; - } - -} - - - -/* ############## TODO: Sortable lists ############## */ - -/* TODO: Everything is working right now and looks pretty much like similar stuff. Adjust the colors, but take care - when changing margins/paddings. Keep them relative to each other, otherwise you might encounter a strange - behavior (in rare cases) which might lead to a situation where you will be unable to move an item properly. - Alex */ - -/* This is the placeholder (or ghost) which will be inserted on runtime in order to show the possible insertation point - Alex */ -.wcf-sortableListContainer .wcf-badgeYellow { - border-radius: 5px; - margin: 3px 0; - padding: 4px; -} - -/* TODO: This was taken from badgeRed and is used to indicate a list which is not a valid drop target */ -.wcf-badgeYellow.wcf-sortableInvalidTarget { - color: #c00; - border: 1px solid #f99; - background-color: #fee; -} - -/* Notice: min-height was safely removed */ -.wcf-sortableList { - list-style-position: outside; - list-style-type: decimal; - margin-left: 21px; -} - -.wcf-sortableNode { - cursor: move; -} - -.wcf-sortableNodeLabel { - border-bottom: 1px solid rgba(216, 231, 245, 1); - padding: 7px 7px 11px 0; - display: block; /* Do not use anything other than block here, otherwise the sortables go crazy - Alex */ -} - - - - - - -/* ############## CSS Experiments (active) ############## */ - - - - -/* ############## ToDo: Action Proxy Loading ############## */ - -/* Spinner */ - -.wcf-spinner { - text-align: center; - text-shadow: 0 -1px 0 #000; - color: #fff; - border-width: 1px; - border-style: solid; - border-color: rgba(0, 0, 0, .3); - border-radius: 5px; - - background-color: rgba(0, 0, 0, .5) !important; - background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important; - background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important; - background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important; - background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important; - background-image: linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important; - - padding: 7px 0; - position: fixed; - top: 200px; - left: 46%; - right: 46%; - width: 70px; - z-index: 1000; - - -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); -} - -.wcf-spinner img { - margin-bottom: 10px; - height: 48px; - width: 48px; -} - - - - - - - - - - - -/* DEBUG ONLY - DO NOT TOUCH! */ - -.ajaxDebugMessage p { - border-bottom: 1px solid rgb(192, 192, 192); - margin: 0 3px; - padding: 7px 0 3px 0; -} - -.ajaxDebugMessage p:first-child, -.ajaxDebugMessage p:last-child { - border-bottom-width: 0; - margin: 0; - padding: 3px; -} - -.ajaxDebugMessage p:last-child { - font-family: Monospace; - font-size: 110%; +.tabMenu > ul > li.ui-state-active > a:after { + border: 1px solid #cccccc; + border-bottom-left-radius: 6px; + border-width: 0 0 1px 1px; + bottom: -1px; + content: " "; + height: 5px; + position: absolute; + right: -6px; + width: 5px; + -webkit-box-shadow: -2px 1px 0 0 #fcfdfe; + -moz-box-shadow: -2px 1px 0 0 #fcfdfe; + -ms-box-shadow: -2px 1px 0 0 #fcfdfe; + -o-box-shadow: -2px 1px 0 0 #fcfdfe; + box-shadow: -2px 1px 0 0 #fcfdfe; } - - - - - -/* Like colors */ - -.wcf-liked { - color: #090; +input[type='text'], +input[type='search'], +input[type='date'], +input[type='datetime'], +input[type='email'], +input[type='number'], +input[type='url'], +input[type='password'], +textarea, +select[multiple] { + border-color: #999999 #cccccc #e6e6e6; + border-radius: 3px; + -webkit-box-shadow: inset 0 1px 5px 0 rgba(0,0,0,0.1); + -moz-box-shadow: inset 0 1px 5px 0 rgba(0,0,0,0.1); + -ms-box-shadow: inset 0 1px 5px 0 rgba(0,0,0,0.1); + -o-box-shadow: inset 0 1px 5px 0 rgba(0,0,0,0.1); + box-shadow: inset 0 1px 5px 0 rgba(0,0,0,0.1); + -webkit-transition-property: background-color, border, box-shadow; + -moz-transition-property: background-color, border, box-shadow; + -ms-transition-property: background-color, border, box-shadow; + -o-transition-property: background-color, border, box-shadow; + transition-property: background-color, border, box-shadow; + -webkit-transition-duration: .2s; + -moz-transition-duration: .2s; + -ms-transition-duration: .2s; + -o-transition-duration: .2s; + transition-duration: .2s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; } - -.wcf-disliked { - color: #900; +input[type='text']:active, +input[type='search']:active, +input[type='date']:active, +input[type='datetime']:active, +input[type='email']:active, +input[type='number']:active, +input[type='url']:active, +input[type='password']:active, +textarea:active, +select[multiple]:active, +input[type='text']:focus, +input[type='search']:focus, +input[type='date']:focus, +input[type='datetime']:focus, +input[type='email']:focus, +input[type='number']:focus +input[type='url']:focus, +input[type='password']:focus, +textarea:focus, +select[multiple]:focus { + -webkit-box-shadow: 0 0 5px rgba(255,170,34,0.5) , inset 0 1px 5px rgba(0, 0, 0, .1); + -moz-box-shadow: 0 0 5px rgba(255,170,34,0.5) , inset 0 1px 5px rgba(0, 0, 0, .1); + -ms-box-shadow: 0 0 5px rgba(255,170,34,0.5) , inset 0 1px 5px rgba(0, 0, 0, .1); + -o-box-shadow: 0 0 5px rgba(255,170,34,0.5) , inset 0 1px 5px rgba(0, 0, 0, .1); + box-shadow: 0 0 5px rgba(255,170,34,0.5) , inset 0 1px 5px rgba(0, 0, 0, .1); +} +.formError input[type='text'], +.formError input[type='search'], +.formError input[type='email'], +.formError input[type='url'], +.formError input[type='password'], +.formError textarea { + background-color: #ffffff; + border-color: #c95145; + -webkit-box-shadow: 0 0 5px rgba(201,81,69,0.5) , inset 0 1px 5px rgba(0, 0, 0, .1); + -moz-box-shadow: 0 0 5px rgba(201,81,69,0.5) , inset 0 1px 5px rgba(0, 0, 0, .1); + -ms-box-shadow: 0 0 5px rgba(201,81,69,0.5) , inset 0 1px 5px rgba(0, 0, 0, .1); + -o-box-shadow: 0 0 5px rgba(201,81,69,0.5) , inset 0 1px 5px rgba(0, 0, 0, .1); + box-shadow: 0 0 5px rgba(201,81,69,0.5) , inset 0 1px 5px rgba(0, 0, 0, .1); +} +.formError input[type='text']:hover, +.formError input[type='text']:focus, +.formError input[type='search']:hover, +.formError input[type='search']:focus, +.formError input[type='email']:hover, +.formError input[type='email']:focus, +.formError input[type='url']:hover, +.formError input[type='url']:focus, +.formError input[type='password']:hover, +.formError input[type='password']:focus, +.formError textarea:hover, +.formError textarea:focus { + background-color: #fff9f4; +} +.formSuccess input[type='text'], +.formSuccess input[type='search'], +.formSuccess input[type='email'], +.formSuccess input[type='url'], +.formSuccess input[type='password'], +.formSuccess textarea { + background-color: #ffffff; + border-color: #74a446; + -webkit-box-shadow: 0 0 5px rgba(116,164,70,0.5) , inset 0 1px 5px rgba(0, 0, 0, .1); + -moz-box-shadow: 0 0 5px rgba(116,164,70,0.5) , inset 0 1px 5px rgba(0, 0, 0, .1); + -ms-box-shadow: 0 0 5px rgba(116,164,70,0.5) , inset 0 1px 5px rgba(0, 0, 0, .1); + -o-box-shadow: 0 0 5px rgba(116,164,70,0.5) , inset 0 1px 5px rgba(0, 0, 0, .1); + box-shadow: 0 0 5px rgba(116,164,70,0.5) , inset 0 1px 5px rgba(0, 0, 0, .1); +} +.formSuccess input[type='text']:hover, +.formSuccess input[type='text']:focus, +.formSuccess input[type='search']:hover, +.formSuccess input[type='search']:focus, +.formSuccess input[type='email']:hover, +.formSuccess input[type='email']:focus, +.formSuccess input[type='url']:hover, +.formSuccess input[type='url']:focus, +.formSuccess input[type='password']:hover, +.formSuccess input[type='password']:focus, +.formSuccess textarea:hover, +.formSuccess textarea:focus { + background-color: #fff9f4; +} +.info, +.error, +.success, +.warning { + border-width: 0; + font-weight: bold; + -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2); + -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2); + -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2); + -o-box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2); + box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2); +} +.info { + background-color: #4674a4; + background-image: -webkit-linear-gradient(#4674a4,#304d77); + background-image: -moz-linear-gradient(#4674a4,#304d77); + background-image: -o-linear-gradient(#4674a4,#304d77); + background-image: -ms-linear-gradient(#4674a4,#304d77); + background-image: linear-gradient(#4674a4,#304d77); +} +.info:after { + background-image: url('../icon/infoInverse.svg'); +} +.error { + background-color: #c95145; + background-image: -webkit-linear-gradient(#c95145,#913d37); + background-image: -moz-linear-gradient(#c95145,#913d37); + background-image: -o-linear-gradient(#c95145,#913d37); + background-image: -ms-linear-gradient(#c95145,#913d37); + background-image: linear-gradient(#c95145,#913d37); +} +.error:after { + background-image: url('../icon/errorInverse.svg'); +} +.success { + background-color: #74a446; + background-image: -webkit-linear-gradient(#74a446,#4d7730); + background-image: -moz-linear-gradient(#74a446,#4d7730); + background-image: -o-linear-gradient(#74a446,#4d7730); + background-image: -ms-linear-gradient(#74a446,#4d7730); + background-image: linear-gradient(#74a446,#4d7730); +} +.success:after { + background-image: url('../icon/successInverse.svg'); +} +.warning { + background-color: #efcb50; + background-image: -webkit-linear-gradient(#efcb50,#e9bf2b); + background-image: -moz-linear-gradient(#efcb50,#e9bf2b); + background-image: -o-linear-gradient(#efcb50,#e9bf2b); + background-image: -ms-linear-gradient(#efcb50,#e9bf2b); + background-image: linear-gradient(#efcb50,#e9bf2b); +} +.innerError { + border-width: 0; + -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2); + -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2); + -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2); + -o-box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2); + box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2); + background-color: #c95145; + background-image: -webkit-linear-gradient(#c95145,#913d37); + background-image: -moz-linear-gradient(#c95145,#913d37); + background-image: -o-linear-gradient(#c95145,#913d37); + background-image: -ms-linear-gradient(#c95145,#913d37); + background-image: linear-gradient(#c95145,#913d37); + text-shadow: 0 1px 0 rgba(255,255,255,0.8); + text-shadow: 0 -1px 0 rgba(0,0,0,0.8); +} +.message .messageSidebar .userAvatar > a > img { + -webkit-box-reflect: below 1px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(.6,transparent),to(rgba(0,0,0,0.3))); +} +.message.dividers .userCredits { + border-top: 1px solid #b8d3ed !important; + -webkit-box-shadow: inset 0 1px 0 0 #ffffff; + -moz-box-shadow: inset 0 1px 0 0 #ffffff; + -ms-box-shadow: inset 0 1px 0 0 #ffffff; + -o-box-shadow: inset 0 1px 0 0 #ffffff; + box-shadow: inset 0 1px 0 0 #ffffff; +} +.footerContent { + text-shadow: 0 -1px 0 rgba(0,0,0,0.8); +} +.wbbBoardList .wbbLastPost { + top: 7px; +} +.wbbBoardList .wbbLastPost > div { + background-color: #ffffff; + padding: 7px; + margin-right: 7px; + border-radius: 6px 6px 6px 6px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); + -ms-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); + -o-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); +} +.messageList .messageGroupStarter > .message:before { + content: ""; + display: block; + height: 128px; + left: 0; + position: absolute; + top: 0; + width: 128px; + border-radius: 6px 0 0 0; + background-image: -webkit-linear-gradient(left top, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 40%); + background-image: -moz-linear-gradient(left top, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 40%); + background-image: -o-linear-gradient(left top, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 40%); + background-image: -ms-linear-gradient(left top, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 40%); + background-image: linear-gradient(left top, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 40%); +} +.attachmentThumbnail { + -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2); + -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2); + -ms-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2); + -o-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2); + box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2); + -webkit-transition-property: box-shadow; + -moz-transition-property: box-shadow; + -ms-transition-property: box-shadow; + -o-transition-property: box-shadow; + transition-property: box-shadow; + -webkit-transition-duration: .1s; + -moz-transition-duration: .1s; + -ms-transition-duration: .1s; + -o-transition-duration: .1s; + transition-duration: .1s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +.attachmentThumbnail:hover { + -webkit-box-shadow: 0 0 20px 0 #ffaa22; + -moz-box-shadow: 0 0 20px 0 #ffaa22; + -ms-box-shadow: 0 0 20px 0 #ffaa22; + -o-box-shadow: 0 0 20px 0 #ffaa22; + box-shadow: 0 0 20px 0 #ffaa22; +} +.container, +div.tabularBox, +.wbbBoardList > li.tabularBox, +.message { + -webkit-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.1); + -moz-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.1); + -ms-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.1); + -o-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.1); + box-shadow: 0 3px 5px 0 rgba(0,0,0,0.1); +} +.dropdown .dropdownMenu li { + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + -ms-transition-property: background-color; + -o-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: .1s; + -moz-transition-duration: .1s; + -ms-transition-duration: .1s; + -o-transition-duration: .1s; + transition-duration: .1s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +.dropdown .dropdownMenu li > a { + -webkit-transition-property: color; + -moz-transition-property: color; + -ms-transition-property: color; + -o-transition-property: color; + transition-property: color; + -webkit-transition-duration: .1s; + -moz-transition-duration: .1s; + -ms-transition-duration: .1s; + -o-transition-duration: .1s; + transition-duration: .1s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; +} +.table th > a { + -webkit-transition-property: background-color, color, box-shadow; + -moz-transition-property: background-color, color, box-shadow; + -ms-transition-property: background-color, color, box-shadow; + -o-transition-property: background-color, color, box-shadow; + transition-property: background-color, color, box-shadow; + -webkit-transition-duration: .2s; + -moz-transition-duration: .2s; + -ms-transition-duration: .2s; + -o-transition-duration: .2s; + transition-duration: .2s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; } - - - - - - - - - - - - - - - - - -/* -- -- -- -- -- EOF -- -- -- -- -- */ diff --git a/wcfsetup/setup/template/footer.tpl b/wcfsetup/setup/template/footer.tpl index cd25085d8d..18f2bf405e 100644 --- a/wcfsetup/setup/template/footer.tpl +++ b/wcfsetup/setup/template/footer.tpl @@ -1,21 +1,19 @@ - - - -