From: Luzifr Date: Mon, 12 Mar 2012 19:40:07 +0000 (+0100) Subject: Moved LESS file X-Git-Tag: 2.0.0_Beta_1~1243^2~5 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=9413a44696ae133a55dab1c8d692f6dc95d2195d;p=GitHub%2FWoltLab%2FWCF.git Moved LESS file --- diff --git a/wcfsetup/install/files/acp/style/wcf.less b/wcfsetup/install/files/acp/style/wcf.less deleted file mode 100644 index 9cd6ae6168..0000000000 --- a/wcfsetup/install/files/acp/style/wcf.less +++ /dev/null @@ -1,5030 +0,0 @@ -/** - * ######################################################################### - * ### CAUTION: This is the LESS-compatible stylesheet used in the whole ### - * ### WCF, but during WCFSetup the stylesheet wcf.css is used! ### - * ######################################################################### - */ - -/** - * 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; -} - - - -/* ############## LESS Definitions ############## */ - -/* -- -- -- LESS: Borders -- -- -- */ - -/* Appearance */ - -/* Border Widths (1px) */ -@borderWidth: 1px; -@borderWidthBadge: 1px; - -/* Border Styles (solid) */ -@borderStyle: solid; -@borderStyleBadge: solid; - -/* Border Colors */ - -/* Border Color (Middle Grey) */ -@borderColor1: rgba(153, 153, 153, 1); -@borderColor11: lighten(@borderColor1, 20%); - -/* Rounded Corners */ - -.mxBorderRadius (@radius: 5px) { - -webkit-border-radius: @radius; - -khtml-border-radius: @radius; - -moz-border-radius: @radius; - -ms-border-radius: @radius; - -o-border-radius: @radius; - border-radius: @radius; -} - -.mxBorderRadiusTL (@radius: 5px) { - -webkit-border-top-left-radius: @radius; - -khtml-border-top-left-radius: @radius; - -moz-border-radius-topleft: @radius; - -ms-border-top-left-radius: @radius; - -o-border-top-left-radius: @radius; - border-top-left-radius: @radius; -} - -.mxBorderRadiusTR (@radius: 5px) { - -webkit-border-top-right-radius: @radius; - -khtml-border-top-right-radius: @radius; - -moz-border-radius-topright: @radius; - -ms-border-top-right-radius: @radius; - -o-border-top-right-radius: @radius; - border-top-right-radius: @radius; -} - -.mxBorderRadiusBR (@radius: 5px) { - -webkit-border-bottom-right-radius: @radius; - -khtml-border-bottom-right-radius: @radius; - -moz-border-radius-bottomright: @radius; - -ms-border-bottom-right-radius: @radius; - -o-border-bottom-right-radius: @radius; - border-bottom-right-radius: @radius; -} - -.mxBorderRadiusBL (@radius: 5px) { - -webkit-border-bottom-left-radius: @radius; - -khtml-border-bottom-left-radius: @radius; - -moz-border-radius-bottomleft: @radius; - -ms-border-bottom-left-radius: @radius; - -o-border-bottom-left-radius: @radius; - border-bottom-left-radius: @radius; -} - - - -/* -- -- -- LESS: Backgrounds -- -- -- */ - -/* Back Images */ - -/* Back Color1 (White) */ -@backImage: url('../../../images/header.png'); - -/* Back Colors */ - -/* Back Color 1 (White) */ -@backColor1: rgba(255, 255, 255, 1); -@backColor10: darken(@backColor1, 1%); -@backColor11: darken(@backColor1, 20%); - -/* Back Color 2 (Lite Blue) */ -@backColor2: rgba(214, 232, 246, 1); -@backColor21: saturate(lighten(@backColor2, 3%), 10%); -@backColor22: desaturate(darken(@backColor2, 15%), 20%); - -/* Back Color 3 (Middle Blue) */ -@backColor3: rgba(51, 102, 153, 1); - -/* Back Color 4 (Dark Blue) */ -@backColor4: rgba(41, 55, 74, 1); - -/* Back Color 5 (Black) */ -@backColor5: rgba(0, 0, 0, 1); -@backColor51: lighten(@backColor5, 20%); -@backColor52: lighten(@backColor51, 20%); - - - -/* -- -- -- LESS: Fonts -- -- -- */ - -/* Font Colors */ - -/* Font Color 1 (White) */ -@fontColor1: rgba(255, 255, 255, 1); -@fontColor11: darken(@fontColor1, 20%); - -/* Font Color 2 (Lite Blue) */ -@fontColor2: rgba(214, 232, 246, 1); - -/* Font Color 3 (Middle Blue) */ -@fontColor3: rgba(51, 102, 153, 1); -@fontColor31: lighten(@fontColor3, 20%); - -/* Font Color 4 (Dark Blue) */ -@fontColor4: rgba(41, 55, 74, 1); - -/* Font Color 5 (Black) */ -@fontColor5: rgba(0, 0, 0, 1); -@fontColor51: lighten(@fontColor5, 20%); -@fontColor52: lighten(@fontColor51, 20%); -@fontColor53: lighten(@fontColor52, 20%); - -/* Text Shadows */ -@textShadowColor1: rgba(0, 0, 0, 1); -@textShadowColor2: rgba(255, 255, 255, 1); - - - -/* -- -- -- LESS: Inputs -- -- -- */ - -/* Colors */ - -@backColorInput1: rgba(255, 255, 255, 1); -@backColorInput2: rgba(255, 170, 34, 1); -@backColorInput21: lighten(@backColorInput2, 40%); - -/* Borders */ - -@borderWidthInput: 1px; -@borderStyleInput: solid; - -/* Border Colors */ - -/* Normal (Grey) */ -@borderColorInputTop1: darken(@backColorInput1, 40%); -@borderColorInputSide1: lighten(@borderColorInputTop1, 15%); -@borderColorInputBottom1: lighten(@borderColorInputSide1, 15%); - -/* Hover & Active (Orange) */ -@borderColorInputTop2: @backColorInput2; /* ToDo */ -@borderColorInputSide2: lighten(@borderColorInputTop2, 5%); -@borderColorInputBottom2: lighten(@borderColorInputSide2, 5%); - - - -/* -- -- -- LESS: Buttons -- -- -- */ - -/* Main Colors */ - -/* Button Color 1 Normal (Grey) */ -@backColorButton1: rgba(245, 245, 245, 1); -@backColorButton11: lighten(@backColorButton1, 20%); -@backColorButton12: darken(@backColorButton1, 3%); - -/* Button Color 2 Hover (Orange) */ -@backColorButton2: rgba(255, 228, 198, 1); -@backColorButton21: lighten(@backColorButton2, 20%); -@backColorButton22: darken(@backColorButton2, 3%); - -/* Button Color3 Default (Blue) */ -@backColorButton3: rgba(231, 242, 253, 1); -@backColorButton31: lighten(@backColorButton3, 20%); -@backColorButton32: darken(@backColorButton3, 3%); - - -/* Borders */ - -@borderWidthButton: 1px; -@borderStyleButton: solid; -@borderStyleButton2: dotted; - -/* Border Colors */ - -/* Button Color 1 Normal (Grey) */ -@borderColorButtonTop1: darken(@backColorButton1, 15); -@borderColorButtonSide1: darken(@borderColorButtonTop1, 5%); -@borderColorButtonBottom1: darken(@borderColorButtonSide1, 5%); - -/* Button Color 2 Hover (Orange) */ -@borderColorButtonTop2: darken(@backColorButton2, 15); /* ToDo */ -@borderColorButtonSide2: darken(@borderColorButtonTop2, 5%); -@borderColorButtonBottom2: darken(@borderColorButtonSide2, 5%); - -/* Button Color 3 Default (Blue) */ -@borderColorButtonTop3: darken(@backColorButton3, 15); -@borderColorButtonSide3: darken(@borderColorButtonTop3, 5%); -@borderColorButtonBottom3: darken(@borderColorButtonSide3, 5%); - -/* Font Colors */ - -/* Button Font Color 1 (Grey) */ -@fontColorButton1: desaturate(darken(@borderColorButtonBottom1, 10%), 30%); - -/* Button Font Color 2 (Orange = Hover) */ -@fontColorButton2: desaturate(darken(@borderColorButtonBottom2, 30%), 70%); - -/* Button Font Color 3 (Blue) */ -@fontColorButton3: desaturate(darken(@borderColorButtonBottom3, 10%), 30%); - - - - - - - - - - - - - -/* ############## Globals ############## */ - -* { - text-overflow: ellipsis; -} - -img { - vertical-align: middle !important; -} - -a { - color: @fontColor3; - text-decoration: none; - - -webkit-transition: color .1s linear; - -khtml-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 fade(@fontColor1, 50%) !important; - color: @fontColor51; - 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; -} - - - -/* -- -- -- 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); - -khtml-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); - -khtml-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);*/ -} - -/* Simple shadow for small boxes */ -.wcf-shadow3 { - -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .1); - -khtml-box-shadow: 0 1px 5px rgba(0, 0, 0, .1); - -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .1); - -ms-box-shadow: 0 1px 5px rgba(0, 0, 0, .1); - -o-box-shadow: 0 1px 5px rgba(0, 0, 0, .1); - box-shadow: 0 1px 5px 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; - .mxBorderRadius(30px); - background-color: @backColor1; - margin-right: -3px; - margin-left: 3px; - padding: 2px 5px; - display: inline-block; - position: relative; - top: -1px; -} - -/* Badge Types */ - -.wcf-badgeBorder { /* ToDo: Obsolete? */ - border: @borderWidthBadge borderStyleBadge #ccc; -} - -.wcf-badgeBlue { - color: #68b; - border: @borderWidthBadge @borderStyleBadge #9be; - background-color: #def; -} - -.wcf-badgeGreen { - color: #090; - border: @borderWidthBadge @borderStyleBadge #0c0; - background-color: #efe; -} - -.wcf-badgeYellow { - color: #990; - border: @borderWidthBadge @borderStyleBadge #cc0; - background-color: #ffd; -} - -.wcf-badgeRed { - color: #c00; - border: @borderWidthBadge @borderStyleBadge #f99; - background-color: #fee; -} - -/* Buttons */ - -.wcf-badgeButton { - cursor: pointer; - .mxBorderRadius(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; - .mxBorderRadius(30px); - 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: @fontColor1; - background-color: rgba(51, 51, 51, 1); -} - -.wcf-label a { - color: #eee; - text-decoration: none; -} - -.wcf-label a:hover { - color: @fontColor1; -} - -/* 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: @fontColor1; - border-width: @borderWidth; - border-style: @borderStyle; - border-color: rgba(255, 255, 255, .7); - .mxBorderRadius; - background-color: fade(@backColor5, 50%); - 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); - -khtml-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; - -khtml-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; - -khtml-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 { - .mxBorderRadiusTL; - .mxBorderRadiusTR; -} - -.wcf-dropdown > :last-child { - .mxBorderRadiusBR; - .mxBorderRadiusBL; -} - -.wcf-dropdown > :hover:not(ul):not(.pointer), -.wcf-dropdown > .active { - color: @fontColor1; - cursor: pointer; - background-color: fade(@backColor5, 50%); -} - -.wcf-dropdown > li.divider:not(:first-child) { - border-top: @borderWidth @borderStyle 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: @fontColor1; - background-color: fade(@backColor5, 50%); -} - - - -/* ############## Body ############## */ - -/* Globals */ - -body { - font-family: 'Trebuchet MS', Arial, sans-serif; - font-size: 80%; - color: @fontColor52; - line-height: 1; - background-color: @backColor4; -} - - - -/* ############## Page Header & Page Footer ############## */ - -/* Globals */ - -header.wcf-pageHeader { - background-image: @backImage; - 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 @textShadowColor1; -} - -.wcf-pageFooter .wcf-copyright a:hover { - text-decoration: none; - color: @fontColor31; -} - - - -/* -- -- -- Top Menu -- -- -- */ - -/* Globals */ - -nav.wcf-topMenu { - border-bottom: @borderWidth @borderStyle rgba(0, 0, 0, .1); - background-color: fade(@backColor5, 40%); - 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); - -khtml-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; - -khtml-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; - - -khtml-animation-name: showTopMenu; - -khtml-animation-duration: .3s; - -khtml-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; - } -} -/* LESS doesn't like that! Wtf? -@-khtml-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: fade(@backColor5, 50%); -} - -.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: @borderStyle; - 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: @fontColor31; -} - -.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: @fontColor1; - background-color: fade(@backColor5, 70%); -} - -/* 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: @fontColor3 !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: fade(@backColor5, 70%); - 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: @borderWidthInput @borderStyleInput rgba(0, 0, 0, .1); - .mxBorderRadius; - background-color: fade(@backColor5, 20%); - padding: 5px; - position: absolute; - top: 50px; - right: 0; - min-width: 240px; - - -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3); - -khtml-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; - -khtml-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: fade(@backColor5, 50%); -} - -.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 { - .mxBorderRadiusTL; - .mxBorderRadiusTR; - background-color: fade(@backColor5, 20%); - 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 @textShadowColor1; - color: @fontColor31; - 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; - - -khtml-transition-property: border, background-color, background-image, color; - -khtml-transition-duration: .3s; - -khtml-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: @fontColor1; -} - -.wcf-mainMenu > ul > li.activeMenuItem > a { - font-size: 110%; - font-weight: bold; - text-shadow: 0 1px 0 @textShadowColor2; - color: @fontColor3; - .mxBorderRadiusTL; - .mxBorderRadiusTR; - - background-color: @backColor21; - background-image: -webkit-linear-gradient(lighten(@backColor21, 20%), @backColor21 50%); - background-image: -khtml-linear-gradient(lighten(@backColor21, 20%), @backColor21 50%); - background-image: -moz-linear-gradient(lighten(@backColor21, 20%), @backColor21 50%); - background-image: -ms-linear-gradient(lighten(@backColor21, 20%), @backColor21 50%); - background-image: -o-linear-gradient(lighten(@backColor21, 20%), @backColor21 50%); - background-image: linear-gradient(lighten(@backColor21, 20%), @backColor21 50%); - - z-index: 10; -} - -/* Rounded Bottom Corners: Active Tab */ - -.wcf-mainMenu > ul > li.activeMenuItem > a:before { - .mxBorderRadiusBR(6px); - border-width: 0 1px 1px 0; - position: absolute; - bottom: 0; - left: -7px; - width: 7px; - height: 7px; - content: ""; - - -webkit-box-shadow: 2px 2px 0 @backColor21; - -khtml-box-shadow: 2px 2px 0 @backColor21; - -moz-box-shadow: 2px 2px 0 @backColor21; - -ms-box-shadow: 2px 2px 0 @backColor21; - -o-box-shadow: 2px 2px 0 @backColor21; - box-shadow: 2px 2px 0 @backColor21; -} - -.wcf-mainMenu > ul > li.activeMenuItem > a:after { - .mxBorderRadiusBL(6px); - border-width: 0 0 1px 1px; - position: absolute; - right: -7px; - bottom: 0; - width: 7px; - height: 7px; - content: ""; - - -webkit-box-shadow: -2px 2px 0 @backColor21; - -khtml-box-shadow: -2px 2px 0 @backColor21; - -moz-box-shadow: -2px 2px 0 @backColor21; - -ms-box-shadow: -2px 2px 0 @backColor21; - -o-box-shadow: -2px 2px 0 @backColor21; - box-shadow: -2px 2px 0 @backColor21; -} - -/* ToDo: Special */ - -.wcf-mainMenu > ul > li .wcf-badge { - font-size: 60% !important; - color: @fontColor5; - background-color: @fontColor3; /* This shows the badge in the font-color */ - margin: -10px 0; - - -webkit-box-shadow: 0 0 1px @backColor1; - -khtml-box-shadow: 0 0 1px @backColor1; - -moz-box-shadow: 0 0 1px @backColor1; - -ms-box-shadow: 0 0 1px @backColor1; - -o-box-shadow: 0 0 1px @backColor1; - box-shadow: 0 0 1px @backColor1; -} - -.wcf-mainMenu > ul > li.activeMenuItem .wcf-badge { - color: @fontColor1; - background-color: @fontColor3; /* This shows the badge in the font-color */ - margin: -10px 0; - - -webkit-box-shadow: 0 0 1px @backColor1; - -khtml-box-shadow: 0 0 1px @backColor1; - -moz-box-shadow: 0 0 1px @backColor1; - -ms-box-shadow: 0 0 1px @backColor1; - -o-box-shadow: 0 0 1px @backColor1; - box-shadow: 0 0 1px @backColor1; -} - - - -/* -- -- -- Header/Footer Navigation -- -- -- */ - -/* Menu Bars */ - -.wcf-headerNavigation, -.wcf-footerNavigation { - background-color: @backColor21; - border-style: @borderStyle; - border-color: @backColor22; - margin: 0 23px; - display: block; - min-height: 7px; - position: relative; - box-sizing: border-box; -} - -.wcf-headerNavigation { - border-width: 0 0 1px 0; - .mxBorderRadiusTL(3px); - .mxBorderRadiusTR(3px); -} - -.wcf-footerNavigation { - border-width: 1px 0 0 0; - .mxBorderRadiusBR(3px); - .mxBorderRadiusBL(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 @backColor22; -} - -.wcf-headerNavigation > ul > li a, -.wcf-headerNavigation > ul > li p, -.wcf-footerNavigation > ul > li a, -.wcf-footerNavigation > ul > li p { - text-decoration: none; - color: @fontColor3; - 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: @backColor2; - margin: 0 23px; - position: relative; - z-index: 90; - - -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1); - -khtml-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: @backColor1; - position: relative; - min-height: 100px; - z-index: 20; - box-sizing: border-box; - - -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1); - -khtml-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; - -khtml-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: @borderWidth @borderStyle rgba(187, 204, 221, 1); - margin-left: 249px; -} - -.right section.wcf-content { - border-right: @borderWidth @borderStyle 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; - -khtml-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: @backColor10; - opacity: 1; -} - -.wcf-collapsibleSidebarButton span { - background-color: @backColor1; - 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); - -khtml-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: @borderWidthButton @borderStyleButton darken(@backColor1, 10%); - background-image: url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg'); - left: 250px; - - -webkit-transition: left .1s ease; - -khtml-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: @borderWidthButton @borderStyleButton darken(@backColor1, 10%); - background-image: url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg'); - right: 250px; - - -webkit-transition: right .1s ease; - -khtml-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 @textShadowColor2; - position: relative; - overflow: hidden; - z-index: 40; -} - -.collapsed .wcf-sidebarContent > div { - width: 0; -} - -.wcf-sidebarContent a:hover { - text-decoration: none !important; - color: @fontColor3; -} - -.wcf-sidebarContent > div > h1 { - cursor: pointer; - font-weight: bold; - color: @fontColor3; - 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 @textShadowColor2; - color: @fontColor31; - padding: 5px 15px 7px 35px; - display: block; -} - -.wcf-sidebarContent > div ul > li.activeMenuItem { - background-color: @backColor1; /* ToDo */ - margin-right: -1px; - overflow: hidden; - - -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1); - -khtml-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: @fontColor3; -} - - - -/* ############## 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: @borderWidth @borderStyle @borderColor1; - 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 @textShadowColor2; - color: @fontColor52; -} - -.wcf-mainHeading > hgroup h2 { - font-size: 100%; - font-weight: normal; - color: @fontColor53; - 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: @fontColor1; -} - -/* 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 @textShadowColor1; - color: @fontColor1; -} - - - -/* -- -- -- Sub Heading -- -- -- */ - -.wcf-subHeading h1 { - font-size: 150%; - font-weight: bold; - text-shadow: 0 1px 0 @textShadowColor2; - color: @fontColor53; - border-bottom: @borderWidth @borderStyle @borderColor11; - 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: lighten(@fontColor53, 5%); -} - - - -/* ############## Fieldsets ############## */ - -fieldset { - border: @borderWidth @borderStyle @borderColor11; - .mxBorderRadius(7px); - background-color: @backColor10; /* we should remove that asap! */ - 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: @borderColor1; - 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 probably problematic */ - padding: 0; -} - - - -/* ############## 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: @fontColor53; - 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: @borderWidthInput; - border-style: @borderStyleInput; - border-color: @borderColorInputTop1 @borderColorInputSide1 @borderColorInputBottom1; - .mxBorderRadius(3px); - background-color: @backColorInput1; - - -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1); - -khtml-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; - -khtml-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-style: @borderStyleInput; - border-color: @borderColorInputTop2 @borderColorInputSide2 @borderColorInputBottom2; - background-color: @backColorInput21; -} - -/* 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-style: @borderStyleInput; - border-color: @borderColorInputTop2 @borderColorInputSide2 @borderColorInputBottom2; - background-color: @backColorInput21; - outline: none; - - -webkit-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2); - -khtml-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: @borderStyleInput; - border-color: fade(@borderColor1, 50%); - background-color: transparent; - - -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05); - -khtml-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: @borderStyleInput; - border-color: fade(@backColorInput1, 50%); - background-color: fade(@backColor1, 50%); -} - - - -/* -- -- -- 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] { - .mxBorderRadius(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: 100%; -} - -@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: @borderWidthButton @borderStyleButton2 @borderColorButtonTop3; -} - -.wcf-smallButtons > li:first-child > a { - .mxBorderRadiusTL(13px); -} - -.wcf-smallButtons > li:last-child > a { - .mxBorderRadiusBR(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: -khtml-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; -} - -/* ToDo: Separators */ -.wcf-smallButtonBar li.separator > a { - border-right: @borderWidthButton @borderStyleButton2 @borderColorButtonTop3; -} - - - -/* ############## 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; - .mxBorderRadius(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: @borderWidth @borderStyle @borderColor11; - .mxBorderRadius; - box-sizing: border-box; -} - -.wcf-boxTitle { - .mxBorderRadius(7px); - background-color: @backColor3; - background-image: @backImage; - background-position: left top; - background-repeat: repeat-x; - display: table; - width: 100%; - box-sizing: border-box; -} - -.wcf-boxPadding { - padding: 13px 23px 23px; -} - -.wcf-boxDecor { - background-color: rgba(253, 253, 253, 1); -} - -/* Headings */ - -.wcf-boxTitle > hgroup { - text-shadow: 0 -1px 0 @textShadowColor1; - color: @fontColor1; - padding: 7px; - display: inline-block; -} - -.wcf-boxTitle > a, -.wcf-boxTitle > hgroup a { - text-decoration: none; - color: @fontColor1; -} - -.wcf-boxTitle > hgroup h1 { - font-size: 120%; - display: inline-block; -} - -.wcf-boxTitle > hgroup h2 { - font-size: 85%; - color: @fontColor11; - margin-top: 5px; -} - -.wcf-boxTitle > hgroup .wcf-badge { - font-size: 65%; - color: #036; -} - -/* Leading icon */ - -.wcf-boxTitle > a { - margin: 7px 0 0 10px; - float: left; -} - -.wcf-boxTitle > a img { - height: 16px; - width: 16px; -} - - - -/* ############## Tab Menu ############## */ - -/* Globals */ - -.wcf-tabMenu { - /* Toggle for tab menu orientation (options: left|center|right) */ - text-align: center; - margin-top: 15px; - padding: 0 10px; - display: block; - position: relative; -} - -fieldset ~ .wcf-tabMenuContainer .wcf-tabMenu { - margin-top: 30px; -} - -/* -- -- -- Tabs -- -- -- */ - -/* Globals */ - -.wcf-tabMenu ul { - text-shadow: 0 1px 0 @textShadowColor2; - white-space: nowrap; - border-width: 1px 1px 0 1px; - border-style: @borderStyle; - border-color: fade(@borderColor11, 50%); - .mxBorderRadiusTL(3px); - .mxBorderRadiusTR(3px); - background-color: fade(@backColor5, 5%); - 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: @fontColor53; - 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: @fontColor52; -} - -.wcf-tabMenu li.ui-state-active a { - font-weight: bold; - color: @fontColor52 !important; - border-width: @borderWidth; - border-style: @borderStyle; - .mxBorderRadiusTL(6px); - .mxBorderRadiusTR(6px); - border-color: @borderColor11 @borderColor11 @backColor1; - background-color: @backColor1; /* ToDo: Less: make grey! */ - 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 @borderStyle @borderColor11; - left: -6px; - .mxBorderRadiusBR(6px); - border-width: 0 1px 1px 0; - - -webkit-box-shadow: 2px 2px 0 @backColor1; - -khtml-box-shadow: 2px 2px 0 @backColor1; - -moz-box-shadow: 2px 2px 0 @backColor1; - -ms-box-shadow: 2px 2px 0 @backColor1; - -o-box-shadow: 2px 2px 0 @backColor1; - box-shadow: 2px 2px 0 @backColor1; -} - -.wcf-tabMenu li.ui-state-active a:after { - position: absolute; - bottom: -1px; - width: 5px; - height: 5px; - content: ""; - border: 1px @borderStyle @borderColor11; - right: -6px; - .mxBorderRadiusBL(6px); - border-width: 0 0 1px 1px; - - -webkit-box-shadow: -2px 2px 0 @backColor1; - -khtml-box-shadow: -2px 2px 0 @backColor1; - -moz-box-shadow: -2px 2px 0 @backColor1; - -ms-box-shadow: -2px 2px 0 @backColor1; - -o-box-shadow: -2px 2px 0 @backColor1; - box-shadow: -2px 2px 0 @backColor1; -} - -@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: @backColor1; /* ToDo: Less: Grey! */ - 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: @fontColor53; -} - -.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 @textShadowColor2; - text-decoration: none; - color: @fontColor53; - border: 1px @borderStyle rgba(0, 0, 0, .2); - .mxBorderRadius(13px); - background-color: @backColor1; - padding: 2px 10px; - - -webkit-transition: color .1s linear; - -khtml-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: @fontColor52; - border-width: @borderWidth; - border-style: @borderStyle; - 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); - -khtml-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 @textShadowColor1; - color: @fontColor1; - cursor: default; - border: 1px @borderStyle rgba(0, 0, 0, .2); - background-color: fade(@backColor5, 50%); -} - -/* Special -> Menu within box-title */ - -.wcf-boxTitle > .wcf-menu { - color: @fontColor1; - 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 @textShadowColor1; - color: #eee !important; - background-color: fade(@backColor5, 10%); -} - -.wcf-boxTitle > .wcf-menu ul li a:hover { - color: @fontColor1 !important; - border: 1px @borderStyle rgba(0, 0, 0, .3); - background-color: fade(@backColor5, 20%); -} - -.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 @borderStyle rgba(0, 0, 0, .5); - - -webkit-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5); - -khtml-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: @backColor3 !important; -} - -/* Special: Menu below tab-menu */ - -.wcf-tabMenuContainer > .wcf-menu { - border-bottom: 1px @borderStyle #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: -khtml-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 @borderStyle rgba(204, 204, 204, 1); - .mxBorderRadius; - background-color: @backColor1; - 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; - -khtml-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 @backColor1; - 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 @textShadowColor2; - color: @fontColor53; - 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: @fontColor52; - 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") */ - .mxBorderRadiusTL; -} - -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") */ - .mxBorderRadiusTR; -} - -thead th { - text-shadow: 0 -1px 0 @textShadowColor1; - color: @fontColor31; - border-right: 1px @borderStyle rgba(0, 0, 0, .2); - - background-color: fade(@backColor5, 30%); - background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)); - background-image: -khtml-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; - -khtml-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 @textShadowColor1; - text-decoration: none !important; - color: @fontColor31; - margin: -7px; - padding: 7px; - display: block; -} - -thead th:last-child a { - border-right-width: 0; -} - -thead th:hover a { - color: @fontColor1; - background-color: fade(@backColor5, 20%); -} - -thead th a:active, -thead th a:focus, -thead th.active a { - color: @fontColor1; - background-color: fade(@backColor5, 10%); - - -webkit-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4); - -khtml-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: fade(@backColor5, 30%); -} - -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 */ - .mxBorderRadiusBL; -} - -tbody tr:last-child td:last-child { - /* Rounded corners for the last table cell in the last row */ - .mxBorderRadiusBR; -} - -tbody td { - background-color: #fcfdfe; - border-right: 1px @borderStyle rgba(255, 255, 255, .3); - padding: 5px; - - -webkit-transition: background .1s linear; - -khtml-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? */ - .mxBorderRadiusTL(0) !important; -} - -.wcf-menu ~ .wcf-box thead th:last-child { /* ToDo: Does this case really exist any more? */ - .mxBorderRadiusTR(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 */ - .mxBorderRadiusTL(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 */ - .mxBorderRadiusTR(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; - .mxBorderRadius(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 @borderStyleButton 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 @textShadowColor2; - text-decoration: none; - color: @fontColor53; - display: inline-block; -} - -.wcf-pageNavigation ul li:not(.disabled):hover a { - color: @fontColor52; -} - -.wcf-pageNavigation ul li:not(.skip) a { - padding: 3px 1px; -} - -.wcf-pageNavigation ul li:active a, -.wcf-pageNavigation ul li:focus a { - color: @fontColor52; -} - -.wcf-pageNavigation ul li.active, -.wcf-pageNavigation ul li.active:hover { - text-shadow: 0 1px 0 @textShadowColor1 !important; - color: @fontColor1 !important; - border: 1px @borderStyleButton 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: -khtml-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; - .mxBorderRadius(3px); - background-color: fade(@backColor5, 70%); - 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; - -khtml-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 @textShadowColor2; - line-height: 1.5; - .mxBorderRadius(7px); - margin-top: 15px; - padding: 7px 15px 7px 50px; - box-sizing: border-box; -} - -/* Types */ - -.wcf-info { - color: #68b; - border: 1px @borderStyle #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'), -khtml-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 @borderStyle #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'), -khtml-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 @borderStyle #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'), -khtml-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 @borderStyle #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'), -khtml-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 @textShadowColor2; - line-height: 1.5; - color: #c00; - border: 1px @borderStyle #f99; - .mxBorderRadius(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); - -khtml-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: @borderWidth @borderStyle 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; - -khtml-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 @borderStyle transparent; - .mxBorderRadius(15px); - background-color: fade(@backColor5, 40%); - margin-right: auto !important; - margin-left: auto !important; - position: fixed !important; - - -webkit-box-shadow: 0 1px 23px rgba(0, 0, 0, .3); - -khtml-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: @borderWidth @borderStyle #036; - .mxBorderRadiusTL(7px); - .mxBorderRadiusTR(7px); - background-color: @backColor3; - background-image: @backImage; - background-position: left top; - background-repeat: repeat-x; - padding: 10px 20px; - position: relative; - display: block; -} - -.wcf-dialogTitle { - font-size: 170%; - font-weight: bold; - text-shadow: 0 -1px 0 @textShadowColor1; - color: @fontColor1; - 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: @fontColor11; - background-color: @backColor51; - overflow: auto; -} - -.wcf-dialogContent a { - color: @fontColor2; -} - -.wcf-dialogContent a:hover { - color: @fontColor1; -} - -.wcf-dialogContainer > .wcf-dialogContent { - .mxBorderRadius(7px); - padding: 0; - /*width: auto !important;*/ -} - -.wcf-dialogTitlebar ~ .wcf-dialogContent { - .mxBorderRadiusTL(0); - .mxBorderRadiusTR(0); - .mxBorderRadiusBL(7px); - .mxBorderRadiusBR(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 @borderStyle #ccc; - padding: 3px; -} - - - -/* ############## ToDo: Overlay Spinner ############## */ - -.wcf-dialogOverlay { - background-color: fade(@backColor5, 50%); - position: fixed; - width: 100% !important; - top: 0; - left: 0; -} - - -/* ToDo: What is that and change that class-name! */ - -.wcf-overlayLoading { - background-color: @backColor1; - 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: @fontColor1; - border: 1px @borderStyle rgba(255, 255, 255, .7); - .mxBorderRadius; - background-color: fade(@backColor5, 70%); - padding: 5px 10px 7px; - position: absolute; - max-width: 300px; - z-index: 800; - - -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3); - -khtml-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; - .mxBorderRadius(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 @textShadowColor2; - color: @fontColorButton1; - border-width: @borderWidthButton; - border-style: @borderStyleButton; - border-color: @borderColorButtonTop1 @borderColorButtonSide1 @borderColorButtonBottom1; - - background-color: @backColorButton1; - background-image: -webkit-linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12); - background-image: -khtml-linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12); - background-image: -moz-linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12); - background-image: -ms-linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12); - background-image: -o-linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12); - background-image: linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12); - - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1); - -khtml-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; - - -khtml-transition-property: border, box-shadow, background-color, background-image, color; - -khtml-transition-duration: .1s; - -khtml-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: @fontColorButton2; - border-style: @borderStyleButton; - border-color: @borderColorButtonTop2 @borderColorButtonSide2 @borderColorButtonBottom2; - - background-color: @backColorButton2; - background-image: -webkit-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); - background-image: -khtml-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); - background-image: -moz-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); - background-image: -ms-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); - background-image: -o-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); - background-image: linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); -} - -/* 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: @fontColorButton2; - border-style: @borderStyleButton; - border-color: @borderColorButtonTop2 @borderColorButtonSide2 @borderColorButtonBottom2; - - background-color: @backColorButton2; - background-image: -webkit-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); - background-image: -khtml-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); - background-image: -moz-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); - background-image: -ms-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); - background-image: -o-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); - background-image: linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); - - -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1); - -khtml-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); - } -} -/* LESS doesn't like that! Wtf? -@-khtml-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: @fontColorButton3; - border-width: @borderWidthButton; - border-style: @borderStyleButton; - border-color: @borderColorButtonTop3 @borderColorButtonSide3 @borderColorButtonBottom3; - - background-color: @backColorButton3; - background-image: -webkit-linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32); - background-image: -khtml-linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32); - background-image: -moz-linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32); - background-image: -ms-linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32); - background-image: -o-linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32); - background-image: linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32); - - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369; - -khtml-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; - - -khtml-animation-name: glowButtons; - -khtml-animation-duration: 1s; - -khtml-animation-iteration-count: infinite; - -khtml-animation-direction: alternate; - -khtml-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); - } -} -/* LESS doesn't like that! Wtf? -@-khtml-keyframes glowButtonsHover { - 0% { - -khtml-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3); - } - 100% { - -khtml-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; - -khtml-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; - - -khtml-animation-name: glowButtonsHover; - -khtml-animation-duration: 1s; - -khtml-animation-iteration-count: infinite; - -khtml-animation-direction: alternate; - -khtml-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); - } -} -/* LESS doesn't like that! Wtf? -@-khtml-keyframes glowDefaultButtonsActive { - 0% { - -khtml-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1); - } - 100% { - -khtml-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; - - -khtml-animation-name: glowDefaultButtonsActive; - -khtml-animation-duration: 1s; - -khtml-animation-iteration-count: infinite; - -khtml-animation-direction: alternate; - -khtml-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: lighten(@fontColorButton1, 20%); - cursor: default; - border-style: @borderStyleButton; - border-color: lighten(@borderColorButtonTop1, 10%) lighten(@borderColorButtonSide1, 10%) lighten(@borderColorButtonBottom1, 10%); - 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; - -khtml-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: @fontColor53; - 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: @fontColor52; -} - -.wcf-infoPackagePlugin > div > a > h1 { /* ToDo: h1 inside a ??? */ - font-size: 100%; - font-weight: bold; - text-shadow: 0 1px 0 @textShadowColor2; - 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 @borderStyle 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: -khtml-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; - .mxBorderRadius(7px); - padding: 40px 5px; - display: block; - position: absolute; - top: 0; - bottom: 0; - width: 139px; - opacity: 0; - - -webkit-transition: opacity .1s linear; - -khtml-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; - -khtml-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 { - .mxBorderRadius; - 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: @borderWidth @borderStyle #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 @borderStyle rgba(216, 231, 245, 1); - padding: 7px 7px 11px 0; - display: block; /* Do not use anything other than block here, otherwise the sortables go crazy - Alex */ -} - - - - - - -/* ############## CSS Experiments (active) ############## */ - - - - -/* ############## ToDo: Action Proxy Loading ############## */ - -/* Spinner */ - -.wcf-spinner { - text-align: center; - text-shadow: 0 -1px 0 @textShadowColor1; - color: @fontColor1; - border-width: @borderWidth; - border-style: @borderStyle; - border-color: rgba(0, 0, 0, .3); - .mxBorderRadius; - - background-color: fade(@backColor5, 50%) !important; - background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important; - background-image: -khtml-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); - -khtml-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/style/wcf.less b/wcfsetup/install/files/style/wcf.less new file mode 100644 index 0000000000..9cd6ae6168 --- /dev/null +++ b/wcfsetup/install/files/style/wcf.less @@ -0,0 +1,5030 @@ +/** + * ######################################################################### + * ### CAUTION: This is the LESS-compatible stylesheet used in the whole ### + * ### WCF, but during WCFSetup the stylesheet wcf.css is used! ### + * ######################################################################### + */ + +/** + * 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; +} + + + +/* ############## LESS Definitions ############## */ + +/* -- -- -- LESS: Borders -- -- -- */ + +/* Appearance */ + +/* Border Widths (1px) */ +@borderWidth: 1px; +@borderWidthBadge: 1px; + +/* Border Styles (solid) */ +@borderStyle: solid; +@borderStyleBadge: solid; + +/* Border Colors */ + +/* Border Color (Middle Grey) */ +@borderColor1: rgba(153, 153, 153, 1); +@borderColor11: lighten(@borderColor1, 20%); + +/* Rounded Corners */ + +.mxBorderRadius (@radius: 5px) { + -webkit-border-radius: @radius; + -khtml-border-radius: @radius; + -moz-border-radius: @radius; + -ms-border-radius: @radius; + -o-border-radius: @radius; + border-radius: @radius; +} + +.mxBorderRadiusTL (@radius: 5px) { + -webkit-border-top-left-radius: @radius; + -khtml-border-top-left-radius: @radius; + -moz-border-radius-topleft: @radius; + -ms-border-top-left-radius: @radius; + -o-border-top-left-radius: @radius; + border-top-left-radius: @radius; +} + +.mxBorderRadiusTR (@radius: 5px) { + -webkit-border-top-right-radius: @radius; + -khtml-border-top-right-radius: @radius; + -moz-border-radius-topright: @radius; + -ms-border-top-right-radius: @radius; + -o-border-top-right-radius: @radius; + border-top-right-radius: @radius; +} + +.mxBorderRadiusBR (@radius: 5px) { + -webkit-border-bottom-right-radius: @radius; + -khtml-border-bottom-right-radius: @radius; + -moz-border-radius-bottomright: @radius; + -ms-border-bottom-right-radius: @radius; + -o-border-bottom-right-radius: @radius; + border-bottom-right-radius: @radius; +} + +.mxBorderRadiusBL (@radius: 5px) { + -webkit-border-bottom-left-radius: @radius; + -khtml-border-bottom-left-radius: @radius; + -moz-border-radius-bottomleft: @radius; + -ms-border-bottom-left-radius: @radius; + -o-border-bottom-left-radius: @radius; + border-bottom-left-radius: @radius; +} + + + +/* -- -- -- LESS: Backgrounds -- -- -- */ + +/* Back Images */ + +/* Back Color1 (White) */ +@backImage: url('../../../images/header.png'); + +/* Back Colors */ + +/* Back Color 1 (White) */ +@backColor1: rgba(255, 255, 255, 1); +@backColor10: darken(@backColor1, 1%); +@backColor11: darken(@backColor1, 20%); + +/* Back Color 2 (Lite Blue) */ +@backColor2: rgba(214, 232, 246, 1); +@backColor21: saturate(lighten(@backColor2, 3%), 10%); +@backColor22: desaturate(darken(@backColor2, 15%), 20%); + +/* Back Color 3 (Middle Blue) */ +@backColor3: rgba(51, 102, 153, 1); + +/* Back Color 4 (Dark Blue) */ +@backColor4: rgba(41, 55, 74, 1); + +/* Back Color 5 (Black) */ +@backColor5: rgba(0, 0, 0, 1); +@backColor51: lighten(@backColor5, 20%); +@backColor52: lighten(@backColor51, 20%); + + + +/* -- -- -- LESS: Fonts -- -- -- */ + +/* Font Colors */ + +/* Font Color 1 (White) */ +@fontColor1: rgba(255, 255, 255, 1); +@fontColor11: darken(@fontColor1, 20%); + +/* Font Color 2 (Lite Blue) */ +@fontColor2: rgba(214, 232, 246, 1); + +/* Font Color 3 (Middle Blue) */ +@fontColor3: rgba(51, 102, 153, 1); +@fontColor31: lighten(@fontColor3, 20%); + +/* Font Color 4 (Dark Blue) */ +@fontColor4: rgba(41, 55, 74, 1); + +/* Font Color 5 (Black) */ +@fontColor5: rgba(0, 0, 0, 1); +@fontColor51: lighten(@fontColor5, 20%); +@fontColor52: lighten(@fontColor51, 20%); +@fontColor53: lighten(@fontColor52, 20%); + +/* Text Shadows */ +@textShadowColor1: rgba(0, 0, 0, 1); +@textShadowColor2: rgba(255, 255, 255, 1); + + + +/* -- -- -- LESS: Inputs -- -- -- */ + +/* Colors */ + +@backColorInput1: rgba(255, 255, 255, 1); +@backColorInput2: rgba(255, 170, 34, 1); +@backColorInput21: lighten(@backColorInput2, 40%); + +/* Borders */ + +@borderWidthInput: 1px; +@borderStyleInput: solid; + +/* Border Colors */ + +/* Normal (Grey) */ +@borderColorInputTop1: darken(@backColorInput1, 40%); +@borderColorInputSide1: lighten(@borderColorInputTop1, 15%); +@borderColorInputBottom1: lighten(@borderColorInputSide1, 15%); + +/* Hover & Active (Orange) */ +@borderColorInputTop2: @backColorInput2; /* ToDo */ +@borderColorInputSide2: lighten(@borderColorInputTop2, 5%); +@borderColorInputBottom2: lighten(@borderColorInputSide2, 5%); + + + +/* -- -- -- LESS: Buttons -- -- -- */ + +/* Main Colors */ + +/* Button Color 1 Normal (Grey) */ +@backColorButton1: rgba(245, 245, 245, 1); +@backColorButton11: lighten(@backColorButton1, 20%); +@backColorButton12: darken(@backColorButton1, 3%); + +/* Button Color 2 Hover (Orange) */ +@backColorButton2: rgba(255, 228, 198, 1); +@backColorButton21: lighten(@backColorButton2, 20%); +@backColorButton22: darken(@backColorButton2, 3%); + +/* Button Color3 Default (Blue) */ +@backColorButton3: rgba(231, 242, 253, 1); +@backColorButton31: lighten(@backColorButton3, 20%); +@backColorButton32: darken(@backColorButton3, 3%); + + +/* Borders */ + +@borderWidthButton: 1px; +@borderStyleButton: solid; +@borderStyleButton2: dotted; + +/* Border Colors */ + +/* Button Color 1 Normal (Grey) */ +@borderColorButtonTop1: darken(@backColorButton1, 15); +@borderColorButtonSide1: darken(@borderColorButtonTop1, 5%); +@borderColorButtonBottom1: darken(@borderColorButtonSide1, 5%); + +/* Button Color 2 Hover (Orange) */ +@borderColorButtonTop2: darken(@backColorButton2, 15); /* ToDo */ +@borderColorButtonSide2: darken(@borderColorButtonTop2, 5%); +@borderColorButtonBottom2: darken(@borderColorButtonSide2, 5%); + +/* Button Color 3 Default (Blue) */ +@borderColorButtonTop3: darken(@backColorButton3, 15); +@borderColorButtonSide3: darken(@borderColorButtonTop3, 5%); +@borderColorButtonBottom3: darken(@borderColorButtonSide3, 5%); + +/* Font Colors */ + +/* Button Font Color 1 (Grey) */ +@fontColorButton1: desaturate(darken(@borderColorButtonBottom1, 10%), 30%); + +/* Button Font Color 2 (Orange = Hover) */ +@fontColorButton2: desaturate(darken(@borderColorButtonBottom2, 30%), 70%); + +/* Button Font Color 3 (Blue) */ +@fontColorButton3: desaturate(darken(@borderColorButtonBottom3, 10%), 30%); + + + + + + + + + + + + + +/* ############## Globals ############## */ + +* { + text-overflow: ellipsis; +} + +img { + vertical-align: middle !important; +} + +a { + color: @fontColor3; + text-decoration: none; + + -webkit-transition: color .1s linear; + -khtml-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 fade(@fontColor1, 50%) !important; + color: @fontColor51; + 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; +} + + + +/* -- -- -- 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); + -khtml-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); + -khtml-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);*/ +} + +/* Simple shadow for small boxes */ +.wcf-shadow3 { + -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .1); + -khtml-box-shadow: 0 1px 5px rgba(0, 0, 0, .1); + -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .1); + -ms-box-shadow: 0 1px 5px rgba(0, 0, 0, .1); + -o-box-shadow: 0 1px 5px rgba(0, 0, 0, .1); + box-shadow: 0 1px 5px 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; + .mxBorderRadius(30px); + background-color: @backColor1; + margin-right: -3px; + margin-left: 3px; + padding: 2px 5px; + display: inline-block; + position: relative; + top: -1px; +} + +/* Badge Types */ + +.wcf-badgeBorder { /* ToDo: Obsolete? */ + border: @borderWidthBadge borderStyleBadge #ccc; +} + +.wcf-badgeBlue { + color: #68b; + border: @borderWidthBadge @borderStyleBadge #9be; + background-color: #def; +} + +.wcf-badgeGreen { + color: #090; + border: @borderWidthBadge @borderStyleBadge #0c0; + background-color: #efe; +} + +.wcf-badgeYellow { + color: #990; + border: @borderWidthBadge @borderStyleBadge #cc0; + background-color: #ffd; +} + +.wcf-badgeRed { + color: #c00; + border: @borderWidthBadge @borderStyleBadge #f99; + background-color: #fee; +} + +/* Buttons */ + +.wcf-badgeButton { + cursor: pointer; + .mxBorderRadius(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; + .mxBorderRadius(30px); + 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: @fontColor1; + background-color: rgba(51, 51, 51, 1); +} + +.wcf-label a { + color: #eee; + text-decoration: none; +} + +.wcf-label a:hover { + color: @fontColor1; +} + +/* 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: @fontColor1; + border-width: @borderWidth; + border-style: @borderStyle; + border-color: rgba(255, 255, 255, .7); + .mxBorderRadius; + background-color: fade(@backColor5, 50%); + 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); + -khtml-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; + -khtml-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; + -khtml-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 { + .mxBorderRadiusTL; + .mxBorderRadiusTR; +} + +.wcf-dropdown > :last-child { + .mxBorderRadiusBR; + .mxBorderRadiusBL; +} + +.wcf-dropdown > :hover:not(ul):not(.pointer), +.wcf-dropdown > .active { + color: @fontColor1; + cursor: pointer; + background-color: fade(@backColor5, 50%); +} + +.wcf-dropdown > li.divider:not(:first-child) { + border-top: @borderWidth @borderStyle 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: @fontColor1; + background-color: fade(@backColor5, 50%); +} + + + +/* ############## Body ############## */ + +/* Globals */ + +body { + font-family: 'Trebuchet MS', Arial, sans-serif; + font-size: 80%; + color: @fontColor52; + line-height: 1; + background-color: @backColor4; +} + + + +/* ############## Page Header & Page Footer ############## */ + +/* Globals */ + +header.wcf-pageHeader { + background-image: @backImage; + 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 @textShadowColor1; +} + +.wcf-pageFooter .wcf-copyright a:hover { + text-decoration: none; + color: @fontColor31; +} + + + +/* -- -- -- Top Menu -- -- -- */ + +/* Globals */ + +nav.wcf-topMenu { + border-bottom: @borderWidth @borderStyle rgba(0, 0, 0, .1); + background-color: fade(@backColor5, 40%); + 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); + -khtml-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; + -khtml-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; + + -khtml-animation-name: showTopMenu; + -khtml-animation-duration: .3s; + -khtml-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; + } +} +/* LESS doesn't like that! Wtf? +@-khtml-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: fade(@backColor5, 50%); +} + +.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: @borderStyle; + 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: @fontColor31; +} + +.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: @fontColor1; + background-color: fade(@backColor5, 70%); +} + +/* 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: @fontColor3 !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: fade(@backColor5, 70%); + 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: @borderWidthInput @borderStyleInput rgba(0, 0, 0, .1); + .mxBorderRadius; + background-color: fade(@backColor5, 20%); + padding: 5px; + position: absolute; + top: 50px; + right: 0; + min-width: 240px; + + -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3); + -khtml-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; + -khtml-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: fade(@backColor5, 50%); +} + +.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 { + .mxBorderRadiusTL; + .mxBorderRadiusTR; + background-color: fade(@backColor5, 20%); + 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 @textShadowColor1; + color: @fontColor31; + 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; + + -khtml-transition-property: border, background-color, background-image, color; + -khtml-transition-duration: .3s; + -khtml-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: @fontColor1; +} + +.wcf-mainMenu > ul > li.activeMenuItem > a { + font-size: 110%; + font-weight: bold; + text-shadow: 0 1px 0 @textShadowColor2; + color: @fontColor3; + .mxBorderRadiusTL; + .mxBorderRadiusTR; + + background-color: @backColor21; + background-image: -webkit-linear-gradient(lighten(@backColor21, 20%), @backColor21 50%); + background-image: -khtml-linear-gradient(lighten(@backColor21, 20%), @backColor21 50%); + background-image: -moz-linear-gradient(lighten(@backColor21, 20%), @backColor21 50%); + background-image: -ms-linear-gradient(lighten(@backColor21, 20%), @backColor21 50%); + background-image: -o-linear-gradient(lighten(@backColor21, 20%), @backColor21 50%); + background-image: linear-gradient(lighten(@backColor21, 20%), @backColor21 50%); + + z-index: 10; +} + +/* Rounded Bottom Corners: Active Tab */ + +.wcf-mainMenu > ul > li.activeMenuItem > a:before { + .mxBorderRadiusBR(6px); + border-width: 0 1px 1px 0; + position: absolute; + bottom: 0; + left: -7px; + width: 7px; + height: 7px; + content: ""; + + -webkit-box-shadow: 2px 2px 0 @backColor21; + -khtml-box-shadow: 2px 2px 0 @backColor21; + -moz-box-shadow: 2px 2px 0 @backColor21; + -ms-box-shadow: 2px 2px 0 @backColor21; + -o-box-shadow: 2px 2px 0 @backColor21; + box-shadow: 2px 2px 0 @backColor21; +} + +.wcf-mainMenu > ul > li.activeMenuItem > a:after { + .mxBorderRadiusBL(6px); + border-width: 0 0 1px 1px; + position: absolute; + right: -7px; + bottom: 0; + width: 7px; + height: 7px; + content: ""; + + -webkit-box-shadow: -2px 2px 0 @backColor21; + -khtml-box-shadow: -2px 2px 0 @backColor21; + -moz-box-shadow: -2px 2px 0 @backColor21; + -ms-box-shadow: -2px 2px 0 @backColor21; + -o-box-shadow: -2px 2px 0 @backColor21; + box-shadow: -2px 2px 0 @backColor21; +} + +/* ToDo: Special */ + +.wcf-mainMenu > ul > li .wcf-badge { + font-size: 60% !important; + color: @fontColor5; + background-color: @fontColor3; /* This shows the badge in the font-color */ + margin: -10px 0; + + -webkit-box-shadow: 0 0 1px @backColor1; + -khtml-box-shadow: 0 0 1px @backColor1; + -moz-box-shadow: 0 0 1px @backColor1; + -ms-box-shadow: 0 0 1px @backColor1; + -o-box-shadow: 0 0 1px @backColor1; + box-shadow: 0 0 1px @backColor1; +} + +.wcf-mainMenu > ul > li.activeMenuItem .wcf-badge { + color: @fontColor1; + background-color: @fontColor3; /* This shows the badge in the font-color */ + margin: -10px 0; + + -webkit-box-shadow: 0 0 1px @backColor1; + -khtml-box-shadow: 0 0 1px @backColor1; + -moz-box-shadow: 0 0 1px @backColor1; + -ms-box-shadow: 0 0 1px @backColor1; + -o-box-shadow: 0 0 1px @backColor1; + box-shadow: 0 0 1px @backColor1; +} + + + +/* -- -- -- Header/Footer Navigation -- -- -- */ + +/* Menu Bars */ + +.wcf-headerNavigation, +.wcf-footerNavigation { + background-color: @backColor21; + border-style: @borderStyle; + border-color: @backColor22; + margin: 0 23px; + display: block; + min-height: 7px; + position: relative; + box-sizing: border-box; +} + +.wcf-headerNavigation { + border-width: 0 0 1px 0; + .mxBorderRadiusTL(3px); + .mxBorderRadiusTR(3px); +} + +.wcf-footerNavigation { + border-width: 1px 0 0 0; + .mxBorderRadiusBR(3px); + .mxBorderRadiusBL(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 @backColor22; +} + +.wcf-headerNavigation > ul > li a, +.wcf-headerNavigation > ul > li p, +.wcf-footerNavigation > ul > li a, +.wcf-footerNavigation > ul > li p { + text-decoration: none; + color: @fontColor3; + 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: @backColor2; + margin: 0 23px; + position: relative; + z-index: 90; + + -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1); + -khtml-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: @backColor1; + position: relative; + min-height: 100px; + z-index: 20; + box-sizing: border-box; + + -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1); + -khtml-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; + -khtml-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: @borderWidth @borderStyle rgba(187, 204, 221, 1); + margin-left: 249px; +} + +.right section.wcf-content { + border-right: @borderWidth @borderStyle 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; + -khtml-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: @backColor10; + opacity: 1; +} + +.wcf-collapsibleSidebarButton span { + background-color: @backColor1; + 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); + -khtml-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: @borderWidthButton @borderStyleButton darken(@backColor1, 10%); + background-image: url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg'); + left: 250px; + + -webkit-transition: left .1s ease; + -khtml-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: @borderWidthButton @borderStyleButton darken(@backColor1, 10%); + background-image: url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg'); + right: 250px; + + -webkit-transition: right .1s ease; + -khtml-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 @textShadowColor2; + position: relative; + overflow: hidden; + z-index: 40; +} + +.collapsed .wcf-sidebarContent > div { + width: 0; +} + +.wcf-sidebarContent a:hover { + text-decoration: none !important; + color: @fontColor3; +} + +.wcf-sidebarContent > div > h1 { + cursor: pointer; + font-weight: bold; + color: @fontColor3; + 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 @textShadowColor2; + color: @fontColor31; + padding: 5px 15px 7px 35px; + display: block; +} + +.wcf-sidebarContent > div ul > li.activeMenuItem { + background-color: @backColor1; /* ToDo */ + margin-right: -1px; + overflow: hidden; + + -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1); + -khtml-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: @fontColor3; +} + + + +/* ############## 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: @borderWidth @borderStyle @borderColor1; + 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 @textShadowColor2; + color: @fontColor52; +} + +.wcf-mainHeading > hgroup h2 { + font-size: 100%; + font-weight: normal; + color: @fontColor53; + 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: @fontColor1; +} + +/* 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 @textShadowColor1; + color: @fontColor1; +} + + + +/* -- -- -- Sub Heading -- -- -- */ + +.wcf-subHeading h1 { + font-size: 150%; + font-weight: bold; + text-shadow: 0 1px 0 @textShadowColor2; + color: @fontColor53; + border-bottom: @borderWidth @borderStyle @borderColor11; + 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: lighten(@fontColor53, 5%); +} + + + +/* ############## Fieldsets ############## */ + +fieldset { + border: @borderWidth @borderStyle @borderColor11; + .mxBorderRadius(7px); + background-color: @backColor10; /* we should remove that asap! */ + 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: @borderColor1; + 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 probably problematic */ + padding: 0; +} + + + +/* ############## 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: @fontColor53; + 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: @borderWidthInput; + border-style: @borderStyleInput; + border-color: @borderColorInputTop1 @borderColorInputSide1 @borderColorInputBottom1; + .mxBorderRadius(3px); + background-color: @backColorInput1; + + -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1); + -khtml-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; + -khtml-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-style: @borderStyleInput; + border-color: @borderColorInputTop2 @borderColorInputSide2 @borderColorInputBottom2; + background-color: @backColorInput21; +} + +/* 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-style: @borderStyleInput; + border-color: @borderColorInputTop2 @borderColorInputSide2 @borderColorInputBottom2; + background-color: @backColorInput21; + outline: none; + + -webkit-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2); + -khtml-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: @borderStyleInput; + border-color: fade(@borderColor1, 50%); + background-color: transparent; + + -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05); + -khtml-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: @borderStyleInput; + border-color: fade(@backColorInput1, 50%); + background-color: fade(@backColor1, 50%); +} + + + +/* -- -- -- 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] { + .mxBorderRadius(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: 100%; +} + +@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: @borderWidthButton @borderStyleButton2 @borderColorButtonTop3; +} + +.wcf-smallButtons > li:first-child > a { + .mxBorderRadiusTL(13px); +} + +.wcf-smallButtons > li:last-child > a { + .mxBorderRadiusBR(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: -khtml-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; +} + +/* ToDo: Separators */ +.wcf-smallButtonBar li.separator > a { + border-right: @borderWidthButton @borderStyleButton2 @borderColorButtonTop3; +} + + + +/* ############## 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; + .mxBorderRadius(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: @borderWidth @borderStyle @borderColor11; + .mxBorderRadius; + box-sizing: border-box; +} + +.wcf-boxTitle { + .mxBorderRadius(7px); + background-color: @backColor3; + background-image: @backImage; + background-position: left top; + background-repeat: repeat-x; + display: table; + width: 100%; + box-sizing: border-box; +} + +.wcf-boxPadding { + padding: 13px 23px 23px; +} + +.wcf-boxDecor { + background-color: rgba(253, 253, 253, 1); +} + +/* Headings */ + +.wcf-boxTitle > hgroup { + text-shadow: 0 -1px 0 @textShadowColor1; + color: @fontColor1; + padding: 7px; + display: inline-block; +} + +.wcf-boxTitle > a, +.wcf-boxTitle > hgroup a { + text-decoration: none; + color: @fontColor1; +} + +.wcf-boxTitle > hgroup h1 { + font-size: 120%; + display: inline-block; +} + +.wcf-boxTitle > hgroup h2 { + font-size: 85%; + color: @fontColor11; + margin-top: 5px; +} + +.wcf-boxTitle > hgroup .wcf-badge { + font-size: 65%; + color: #036; +} + +/* Leading icon */ + +.wcf-boxTitle > a { + margin: 7px 0 0 10px; + float: left; +} + +.wcf-boxTitle > a img { + height: 16px; + width: 16px; +} + + + +/* ############## Tab Menu ############## */ + +/* Globals */ + +.wcf-tabMenu { + /* Toggle for tab menu orientation (options: left|center|right) */ + text-align: center; + margin-top: 15px; + padding: 0 10px; + display: block; + position: relative; +} + +fieldset ~ .wcf-tabMenuContainer .wcf-tabMenu { + margin-top: 30px; +} + +/* -- -- -- Tabs -- -- -- */ + +/* Globals */ + +.wcf-tabMenu ul { + text-shadow: 0 1px 0 @textShadowColor2; + white-space: nowrap; + border-width: 1px 1px 0 1px; + border-style: @borderStyle; + border-color: fade(@borderColor11, 50%); + .mxBorderRadiusTL(3px); + .mxBorderRadiusTR(3px); + background-color: fade(@backColor5, 5%); + 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: @fontColor53; + 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: @fontColor52; +} + +.wcf-tabMenu li.ui-state-active a { + font-weight: bold; + color: @fontColor52 !important; + border-width: @borderWidth; + border-style: @borderStyle; + .mxBorderRadiusTL(6px); + .mxBorderRadiusTR(6px); + border-color: @borderColor11 @borderColor11 @backColor1; + background-color: @backColor1; /* ToDo: Less: make grey! */ + 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 @borderStyle @borderColor11; + left: -6px; + .mxBorderRadiusBR(6px); + border-width: 0 1px 1px 0; + + -webkit-box-shadow: 2px 2px 0 @backColor1; + -khtml-box-shadow: 2px 2px 0 @backColor1; + -moz-box-shadow: 2px 2px 0 @backColor1; + -ms-box-shadow: 2px 2px 0 @backColor1; + -o-box-shadow: 2px 2px 0 @backColor1; + box-shadow: 2px 2px 0 @backColor1; +} + +.wcf-tabMenu li.ui-state-active a:after { + position: absolute; + bottom: -1px; + width: 5px; + height: 5px; + content: ""; + border: 1px @borderStyle @borderColor11; + right: -6px; + .mxBorderRadiusBL(6px); + border-width: 0 0 1px 1px; + + -webkit-box-shadow: -2px 2px 0 @backColor1; + -khtml-box-shadow: -2px 2px 0 @backColor1; + -moz-box-shadow: -2px 2px 0 @backColor1; + -ms-box-shadow: -2px 2px 0 @backColor1; + -o-box-shadow: -2px 2px 0 @backColor1; + box-shadow: -2px 2px 0 @backColor1; +} + +@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: @backColor1; /* ToDo: Less: Grey! */ + 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: @fontColor53; +} + +.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 @textShadowColor2; + text-decoration: none; + color: @fontColor53; + border: 1px @borderStyle rgba(0, 0, 0, .2); + .mxBorderRadius(13px); + background-color: @backColor1; + padding: 2px 10px; + + -webkit-transition: color .1s linear; + -khtml-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: @fontColor52; + border-width: @borderWidth; + border-style: @borderStyle; + 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); + -khtml-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 @textShadowColor1; + color: @fontColor1; + cursor: default; + border: 1px @borderStyle rgba(0, 0, 0, .2); + background-color: fade(@backColor5, 50%); +} + +/* Special -> Menu within box-title */ + +.wcf-boxTitle > .wcf-menu { + color: @fontColor1; + 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 @textShadowColor1; + color: #eee !important; + background-color: fade(@backColor5, 10%); +} + +.wcf-boxTitle > .wcf-menu ul li a:hover { + color: @fontColor1 !important; + border: 1px @borderStyle rgba(0, 0, 0, .3); + background-color: fade(@backColor5, 20%); +} + +.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 @borderStyle rgba(0, 0, 0, .5); + + -webkit-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5); + -khtml-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: @backColor3 !important; +} + +/* Special: Menu below tab-menu */ + +.wcf-tabMenuContainer > .wcf-menu { + border-bottom: 1px @borderStyle #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: -khtml-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 @borderStyle rgba(204, 204, 204, 1); + .mxBorderRadius; + background-color: @backColor1; + 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; + -khtml-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 @backColor1; + 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 @textShadowColor2; + color: @fontColor53; + 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: @fontColor52; + 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") */ + .mxBorderRadiusTL; +} + +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") */ + .mxBorderRadiusTR; +} + +thead th { + text-shadow: 0 -1px 0 @textShadowColor1; + color: @fontColor31; + border-right: 1px @borderStyle rgba(0, 0, 0, .2); + + background-color: fade(@backColor5, 30%); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)); + background-image: -khtml-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; + -khtml-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 @textShadowColor1; + text-decoration: none !important; + color: @fontColor31; + margin: -7px; + padding: 7px; + display: block; +} + +thead th:last-child a { + border-right-width: 0; +} + +thead th:hover a { + color: @fontColor1; + background-color: fade(@backColor5, 20%); +} + +thead th a:active, +thead th a:focus, +thead th.active a { + color: @fontColor1; + background-color: fade(@backColor5, 10%); + + -webkit-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4); + -khtml-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: fade(@backColor5, 30%); +} + +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 */ + .mxBorderRadiusBL; +} + +tbody tr:last-child td:last-child { + /* Rounded corners for the last table cell in the last row */ + .mxBorderRadiusBR; +} + +tbody td { + background-color: #fcfdfe; + border-right: 1px @borderStyle rgba(255, 255, 255, .3); + padding: 5px; + + -webkit-transition: background .1s linear; + -khtml-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? */ + .mxBorderRadiusTL(0) !important; +} + +.wcf-menu ~ .wcf-box thead th:last-child { /* ToDo: Does this case really exist any more? */ + .mxBorderRadiusTR(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 */ + .mxBorderRadiusTL(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 */ + .mxBorderRadiusTR(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; + .mxBorderRadius(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 @borderStyleButton 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 @textShadowColor2; + text-decoration: none; + color: @fontColor53; + display: inline-block; +} + +.wcf-pageNavigation ul li:not(.disabled):hover a { + color: @fontColor52; +} + +.wcf-pageNavigation ul li:not(.skip) a { + padding: 3px 1px; +} + +.wcf-pageNavigation ul li:active a, +.wcf-pageNavigation ul li:focus a { + color: @fontColor52; +} + +.wcf-pageNavigation ul li.active, +.wcf-pageNavigation ul li.active:hover { + text-shadow: 0 1px 0 @textShadowColor1 !important; + color: @fontColor1 !important; + border: 1px @borderStyleButton 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: -khtml-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; + .mxBorderRadius(3px); + background-color: fade(@backColor5, 70%); + 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; + -khtml-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 @textShadowColor2; + line-height: 1.5; + .mxBorderRadius(7px); + margin-top: 15px; + padding: 7px 15px 7px 50px; + box-sizing: border-box; +} + +/* Types */ + +.wcf-info { + color: #68b; + border: 1px @borderStyle #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'), -khtml-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 @borderStyle #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'), -khtml-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 @borderStyle #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'), -khtml-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 @borderStyle #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'), -khtml-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 @textShadowColor2; + line-height: 1.5; + color: #c00; + border: 1px @borderStyle #f99; + .mxBorderRadius(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); + -khtml-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: @borderWidth @borderStyle 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; + -khtml-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 @borderStyle transparent; + .mxBorderRadius(15px); + background-color: fade(@backColor5, 40%); + margin-right: auto !important; + margin-left: auto !important; + position: fixed !important; + + -webkit-box-shadow: 0 1px 23px rgba(0, 0, 0, .3); + -khtml-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: @borderWidth @borderStyle #036; + .mxBorderRadiusTL(7px); + .mxBorderRadiusTR(7px); + background-color: @backColor3; + background-image: @backImage; + background-position: left top; + background-repeat: repeat-x; + padding: 10px 20px; + position: relative; + display: block; +} + +.wcf-dialogTitle { + font-size: 170%; + font-weight: bold; + text-shadow: 0 -1px 0 @textShadowColor1; + color: @fontColor1; + 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: @fontColor11; + background-color: @backColor51; + overflow: auto; +} + +.wcf-dialogContent a { + color: @fontColor2; +} + +.wcf-dialogContent a:hover { + color: @fontColor1; +} + +.wcf-dialogContainer > .wcf-dialogContent { + .mxBorderRadius(7px); + padding: 0; + /*width: auto !important;*/ +} + +.wcf-dialogTitlebar ~ .wcf-dialogContent { + .mxBorderRadiusTL(0); + .mxBorderRadiusTR(0); + .mxBorderRadiusBL(7px); + .mxBorderRadiusBR(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 @borderStyle #ccc; + padding: 3px; +} + + + +/* ############## ToDo: Overlay Spinner ############## */ + +.wcf-dialogOverlay { + background-color: fade(@backColor5, 50%); + position: fixed; + width: 100% !important; + top: 0; + left: 0; +} + + +/* ToDo: What is that and change that class-name! */ + +.wcf-overlayLoading { + background-color: @backColor1; + 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: @fontColor1; + border: 1px @borderStyle rgba(255, 255, 255, .7); + .mxBorderRadius; + background-color: fade(@backColor5, 70%); + padding: 5px 10px 7px; + position: absolute; + max-width: 300px; + z-index: 800; + + -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3); + -khtml-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; + .mxBorderRadius(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 @textShadowColor2; + color: @fontColorButton1; + border-width: @borderWidthButton; + border-style: @borderStyleButton; + border-color: @borderColorButtonTop1 @borderColorButtonSide1 @borderColorButtonBottom1; + + background-color: @backColorButton1; + background-image: -webkit-linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12); + background-image: -khtml-linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12); + background-image: -moz-linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12); + background-image: -ms-linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12); + background-image: -o-linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12); + background-image: linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12); + + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1); + -khtml-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; + + -khtml-transition-property: border, box-shadow, background-color, background-image, color; + -khtml-transition-duration: .1s; + -khtml-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: @fontColorButton2; + border-style: @borderStyleButton; + border-color: @borderColorButtonTop2 @borderColorButtonSide2 @borderColorButtonBottom2; + + background-color: @backColorButton2; + background-image: -webkit-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); + background-image: -khtml-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); + background-image: -moz-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); + background-image: -ms-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); + background-image: -o-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); + background-image: linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); +} + +/* 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: @fontColorButton2; + border-style: @borderStyleButton; + border-color: @borderColorButtonTop2 @borderColorButtonSide2 @borderColorButtonBottom2; + + background-color: @backColorButton2; + background-image: -webkit-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); + background-image: -khtml-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); + background-image: -moz-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); + background-image: -ms-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); + background-image: -o-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); + background-image: linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22); + + -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1); + -khtml-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); + } +} +/* LESS doesn't like that! Wtf? +@-khtml-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: @fontColorButton3; + border-width: @borderWidthButton; + border-style: @borderStyleButton; + border-color: @borderColorButtonTop3 @borderColorButtonSide3 @borderColorButtonBottom3; + + background-color: @backColorButton3; + background-image: -webkit-linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32); + background-image: -khtml-linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32); + background-image: -moz-linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32); + background-image: -ms-linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32); + background-image: -o-linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32); + background-image: linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32); + + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369; + -khtml-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; + + -khtml-animation-name: glowButtons; + -khtml-animation-duration: 1s; + -khtml-animation-iteration-count: infinite; + -khtml-animation-direction: alternate; + -khtml-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); + } +} +/* LESS doesn't like that! Wtf? +@-khtml-keyframes glowButtonsHover { + 0% { + -khtml-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3); + } + 100% { + -khtml-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; + -khtml-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; + + -khtml-animation-name: glowButtonsHover; + -khtml-animation-duration: 1s; + -khtml-animation-iteration-count: infinite; + -khtml-animation-direction: alternate; + -khtml-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); + } +} +/* LESS doesn't like that! Wtf? +@-khtml-keyframes glowDefaultButtonsActive { + 0% { + -khtml-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1); + } + 100% { + -khtml-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; + + -khtml-animation-name: glowDefaultButtonsActive; + -khtml-animation-duration: 1s; + -khtml-animation-iteration-count: infinite; + -khtml-animation-direction: alternate; + -khtml-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: lighten(@fontColorButton1, 20%); + cursor: default; + border-style: @borderStyleButton; + border-color: lighten(@borderColorButtonTop1, 10%) lighten(@borderColorButtonSide1, 10%) lighten(@borderColorButtonBottom1, 10%); + 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; + -khtml-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: @fontColor53; + 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: @fontColor52; +} + +.wcf-infoPackagePlugin > div > a > h1 { /* ToDo: h1 inside a ??? */ + font-size: 100%; + font-weight: bold; + text-shadow: 0 1px 0 @textShadowColor2; + 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 @borderStyle 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: -khtml-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; + .mxBorderRadius(7px); + padding: 40px 5px; + display: block; + position: absolute; + top: 0; + bottom: 0; + width: 139px; + opacity: 0; + + -webkit-transition: opacity .1s linear; + -khtml-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; + -khtml-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 { + .mxBorderRadius; + 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: @borderWidth @borderStyle #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 @borderStyle rgba(216, 231, 245, 1); + padding: 7px 7px 11px 0; + display: block; /* Do not use anything other than block here, otherwise the sortables go crazy - Alex */ +} + + + + + + +/* ############## CSS Experiments (active) ############## */ + + + + +/* ############## ToDo: Action Proxy Loading ############## */ + +/* Spinner */ + +.wcf-spinner { + text-align: center; + text-shadow: 0 -1px 0 @textShadowColor1; + color: @fontColor1; + border-width: @borderWidth; + border-style: @borderStyle; + border-color: rgba(0, 0, 0, .3); + .mxBorderRadius; + + background-color: fade(@backColor5, 50%) !important; + background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important; + background-image: -khtml-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); + -khtml-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 -- -- -- -- -- */