From b1d09e91866ae2d112e57afef6628d4ec98981ca Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Wed, 7 Mar 2012 18:30:19 +0100 Subject: [PATCH] Added wcf.css for backwards compatibility during WCFSetup --- wcfsetup/install/files/acp/style/wcf.css | 4655 +++++++++++++++++++++ wcfsetup/install/files/acp/style/wcf.less | 7 + wcfsetup/setup/template/header.tpl | 2 +- 3 files changed, 4663 insertions(+), 1 deletion(-) create mode 100644 wcfsetup/install/files/acp/style/wcf.css diff --git a/wcfsetup/install/files/acp/style/wcf.css b/wcfsetup/install/files/acp/style/wcf.css new file mode 100644 index 0000000000..7569ba6ca8 --- /dev/null +++ b/wcfsetup/install/files/acp/style/wcf.css @@ -0,0 +1,4655 @@ +/** + * ################################################################# + * ### 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; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} + + + +/* ############## Globals ############## */ + +* { + text-overflow: ellipsis; +} + +img { + vertical-align: middle !important; +} + +a { + color: #369; + text-decoration: none; + + -webkit-transition: color .1s linear; + -moz-transition: color .1s linear; + -ms-transition: color .1s linear; + -o-transition: color .1s linear; + transition: color .1s linear; +} + +a:hover { + text-decoration: underline; + color: #036; +} + +hr { + display: none; +} + +::selection { + text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important; + color: #300; + background-color: rgba(255, 170, 34, .7); +} + +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; +} + + + +/* ############## ToDo: Global Structural Classes ############## */ + +/* -- -- -- Misc -- -- -- */ + +.hot { + color: #b00; +} + +.invisible { + position: absolute; + left: -9000px; + top: -9000px; +} + +/* Uniform background image */ + +.wcf-headerImage { + background-image: url('../../../images/header.png'); +} + +/* -- -- -- URLs -- -- -- */ + +.wcf-externalURL { + background-image: url('../../icon/externalURL1.svg'); + background-position: right center; + background-repeat: no-repeat; + padding-right: 17px; +} + +.wcf-eMailLink, +a[href^="mailto:"] { + background-image: url('../../icon/email1.svg'); + background-position: left center; + background-repeat: no-repeat; + padding-left: 17px; +} + +/* -- -- -- Margins -- -- -- */ + +.wcf-marginTop { + margin-top: 15px; +} + +.wcf-marginBottom { + margin-bottom: 15px; +} + +/* -- -- -- Paddings -- -- -- */ + +/* ToDo: Columns */ + +.wcf-columns-2 { + width: 45%; +} + +.wcf-columns-3 { + width: 30%; +} + + +/* -- -- -- ToDo: Floated Elements -- -- -- */ + +/* possibly obsolete */ + +.floatContainer:after { + content: ""; + height: 0; + display: block; + clear: both; +} + +.floated { + margin-right: 5px; + margin-left: 5px; + float: left; +} + + + +/* -- -- -- 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);*/ +} + +/* 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);*/ +} + + + +/* ############## 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; +} + +.wcf-containerIcon { + float: left; + margin-right: 5px; +} + +.wcf-containerContent { + padding: 1px; + overflow: hidden; +} + + + +/* ############## 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; +} + +/* Badge Types */ + +.wcf-badgeBorder { + border: 1px solid #ccc; +} + +.wcf-badgeBlue { + color: #68b; + border: 1px solid #9be; + background-color: #def; +} + +.wcf-badgeGreen { + color: #090; + border: 1px solid #0c0; + background-color: #efe; +} + +.wcf-badgeYellow { + color: #990; + border: 1px solid #cc0; + background-color: #ffd; +} + +.wcf-badgeRed { + color: #c00; + border: 1px solid #f99; + background-color: #fee; +} + +/* Buttons */ + +.wcf-badgeButton { + cursor: pointer; + border-radius: 30px; + margin-right: 0; + margin-left: 0; + padding: 3px 10px 5px; + display: inline-block; +} + +li.wcf-badgeButton, +li > .wcf-badgeButton { + margin-top: 7px; + margin-right: 3px; + margin-left: 3px; + float: left; +} + +.wcf-badgeButton, +.wcf-badgeButton a { + text-decoration: none !important; +} + + + +/* ############## Labels ############## */ + +/* -- -- -- Label List -- -- -- */ + +.wcf-labelList { + margin: 0; + padding: 5px 0 0; + display: inline-block; +} + +/* -- -- -- 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; +} + +.wcf-label:hover { + color: rgba(255, 255, 255, 1); + background-color: rgba(51, 51, 51, 1); +} + +.wcf-label a { + color: #eee; + text-decoration: none; +} + +.wcf-label a:hover { + color: rgba(255, 255, 255, 1); +} + +/* Default Colors */ + +.wcf-label.black { + background-color: #333; +} + +.wcf-label.black:hover { + background-color: #000; +} + +.wcf-label.brown { + background-color: #c63; +} + +.wcf-label.brown:hover { + background-color: #930; +} + +.wcf-label.red { + background-color: #c00; +} + +.wcf-label.red:hover { + background-color: #900; +} + +.wcf-label.orange { + background-color: #f90; +} + +.wcf-label.orange:hover { + background-color: #f60; +} + +.wcf-label.yellow { + background-color: #ff0; +} + +.wcf-label.yellow:hover { + background-color: #cc0; +} + +.wcf-label.green { + background-color: #0c0; +} + +.wcf-label.green:hover { + background-color: #090; +} + +.wcf-label.blue { + background-color: #09f; +} + +.wcf-label.blue:hover { + background-color: #06c; +} + +.wcf-label.purple { + background-color: #c0f; +} + +.wcf-label.purple:hover { + background-color: #90c; +} + +.wcf-label.pink { + background-color: #f0c; +} + +.wcf-label.pink:hover { + background-color: #c09; +} + +/* Special */ + +table .wcf-label { + padding: 1px 6px 2px; +} + + + +/* ############## ToDo: Dropdown ############## */ + +/* Dropdown Caption */ + +.wcf-dropdownCaption, +.wcf-dropdownCaption a { + text-decoration: none; + cursor: pointer; + display: inline-block; +} + +.wcf-dropdownCaption:hover, +.wcf-dropdownCaption a:hover { + text-decoration: none; +} + +/* 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; +} + +.wcf-dropdown.open { + display: block; +} + +/* 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; +} + +.wcf-dropdown > div { + padding: 5px 7px; +} + +.wcf-dropdown > :first-child { + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} + +.wcf-dropdown > :last-child { + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; +} + +.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); +} + +.wcf-dropdown > li.divider:not(:first-child) { + border-top: 1px solid rgba(255, 255, 255, .7); +} + +.wcf-dropdown > li { + text-decoration: none; + padding: 5px 7px; + display: block; +} + +.wcf-dropdown > li a { + text-decoration: none; + color: #ccc; + padding: -5px -7px; /* ToDo: what's that? ;-) */ + display: block; +} + +.wcf-dropdown > li a:hover { + color: rgba(255, 255, 255, 1); + background-color: rgba(0, 0, 0, .5); +} + + + +/* ############## 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); +} + + + +/* ############## 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; +} + +@media screen and (min-width: 480px), screen and (min-device-width: 480px) { + + header.wcf-pageHeader, + header.wcf-pageFooter { + min-width: 800px; + } +} + +@media screen and (max-width: 480px), screen and (max-device-width: 480px) { + + header.wcf-pageHeader, + header.wcf-pageFooter { + /* none */ + } +} + +.wcf-pageHeader:after, +.wcf-pageFooter:after { + content: ''; + display: block; + clear: both; +} + +.wcf-pageFooter { + text-align: center; + padding-bottom: 23px; + position: relative; + z-index: 80; +} + + + +/* -- -- -- Copyright -- -- -- */ + +.wcf-pageFooter .wcf-copyright { + padding-top: 20px; + display: inline-block; +} + +.wcf-pageFooter .wcf-copyright a { + text-shadow: 0 -1px 0 #000; +} + +.wcf-pageFooter .wcf-copyright a:hover { + text-decoration: none; + color: #69c; +} + + + +/* -- -- -- 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; +} + +/* 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; + } +} + +@media screen and (min-width: 480px), screen and (min-device-width: 480px) { + + nav.wcf-topMenu { + min-width: 800px; + } +} + +@media screen and (max-width: 480px), screen and (max-device-width: 480px) { + + nav.wcf-topMenu { + /* none */ + } +} + +.wcf-topMenu:hover { + background-color: rgba(0, 0, 0, .7); +} + +.wcf-topMenu > div { + padding: 0 23px 0; +} + +.wcf-topMenu ul li { + white-space: nowrap; +} + +/* Menu Items (1st level) */ + +.wcf-topMenu > div > ul > li { + border-width: 0 1px; + border-style: solid; + border-color: transparent; + float: left; + position: relative; +} + +.wcf-topMenu > div > ul > li, +.wcf-topMenu > div > ul > li a { + text-shadow: 0 -1px 0 rgba(0, 0, 0, .7); + color: #69c; +} + +.wcf-topMenu > div > ul > li:hover, +.wcf-topMenu > div > ul > li:hover a { + border-color: rgba(255, 255, 255, .5); +} + +/* 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; +} + +/* -- -- -- 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); + margin-top: 15px; + 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; +} + +.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-dialogContainer > .wcf-dialogContent { + border-radius: 7px; + padding: 0; + /*width: auto !important;*/ +} + +.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; +} + +/* Special */ + +#ajaxExceptionStacktrace { + white-space: nowrap; + overflow: scroll; + overflow-y: hidden; +} + +#ajaxExceptionStacktrace { + font-family: monospace; + font-size: 90%; + line-height: 1.2; + border: 1px solid #ccc; + padding: 3px; +} + + + +/* ############## ToDo: Overlay Spinner ############## */ + +.wcf-dialogOverlay { + background-color: rgba(0, 0, 0, 1); + opacity: .5; + position: fixed; + width: 100% !important; + top: 0; + left: 0; +} + + +/* 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; +} + + + +/* ############## Balloon Tooltips ############## */ + +/* Globals */ + +.jsTooltip { /* Do not change this style */ + cursor: pointer; +} + +.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); +} + +/* 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%; +} + +.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; +} + + + +/* ############## 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; +} + +/* Buttons */ + +.wcf-likesWidget > ul { + float: right; + margin-right: 7px; + margin-left: 10px; +} + +.wcf-likesWidget > ul > li { + text-align: right; + margin-top: 3px; + display: inline-block; +} + +.wcf-likesWidget > ul > li > a { + padding: 2px 4px 3px; +} + +.wcf-likesWidget > ul > li:first-child { + margin-right: -5px; +} + + + +/* ############## 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; +} + +.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; +} + + + +/* ############## ToDo: CK-Editor ############## */ + +.wcf-wideEditor dt { + display: none; +} + +.wcf-wideEditor dd { + margin-left: 0; +} + + + +/* ############## 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, +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, +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, +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; +} + +.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) ############## */ + +/* what is that? */ +/* Once we're determing the dimensions of an element (by JS) we move it into body and wrap it with + a container with class 'wcfDimensions' in order to calculate the precise dimensions. We could also + embed it directly in JS (using style-attribute) but I thought it was better this way. - Alex */ +.wcfDimensions { + display: inline-block; +} + + + + + +/* ############## 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%; +} + + + + + +/* Like colors */ + +.wcf-liked { + color: #090; +} + +.wcf-disliked { + color: #900; +} + + + + + + + + + + + + + + + + + +/* -- -- -- -- -- EOF -- -- -- -- -- */ diff --git a/wcfsetup/install/files/acp/style/wcf.less b/wcfsetup/install/files/acp/style/wcf.less index 965c1643ca..dd39a4ac5a 100644 --- a/wcfsetup/install/files/acp/style/wcf.less +++ b/wcfsetup/install/files/acp/style/wcf.less @@ -1,3 +1,10 @@ +/** + * ############################################################################# + * ### CAUTION: This is the LESS-compatible stylesheet used within the whole ### + * ### WCF, but during WCFSetup the stylesheet wcf.css is used! ### + * ############################################################################# + */ + /** * WCF Testing Styles * diff --git a/wcfsetup/setup/template/header.tpl b/wcfsetup/setup/template/header.tpl index 204669b628..93574b6b44 100644 --- a/wcfsetup/setup/template/header.tpl +++ b/wcfsetup/setup/template/header.tpl @@ -5,7 +5,7 @@ {lang}wcf.global.progressBar{/lang} - {lang}wcf.global.pageTitle{/lang} - + {if !$lastStep|isset}