+++ /dev/null
-/**
- * #########################################################################
- * ### 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 -- -- -- -- -- */
--- /dev/null
+/**
+ * #########################################################################
+ * ### 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 -- -- -- -- -- */
projects / GitHub / WoltLab / WCF.git / commitdiff