/**
- * #############################################################################
- * ### CAUTION: This is the LESS-compatible stylesheet used within the whole ###
- * ### WCF, but during WCFSetup the stylesheet wcf.css is used! ###
- * #############################################################################
+ * #########################################################################
+ * ### CAUTION: This is the LESS-compatible stylesheet used in the whole ###
+ * ### WCF, but during WCFSetup the stylesheet wcf.css is used! ###
+ * #########################################################################
*/
/**
+/* ############## 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 ############## */
* {
}
a {
- color: #369;
+ 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;
}
::selection {
- text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important;
- color: #300;
+ text-shadow: 0 1px 0 fade(@fontColor1, 50%) !important;
+ color: @fontColor51;
background-color: rgba(255, 170, 34, .7);
}
top: -9000px;
}
-/* Uniform background image */
-.wcf-headerImage {
- background-image: url('../../../images/header.png');
-}
/* -- -- -- URLs -- -- -- */
/* -- -- -- 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
}
/* 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
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 ############## */
font-weight: bold;
text-shadow: none;
text-decoration: none;
- border-radius: 13px;
- background-color: rgba(255, 255, 255, 1);
+ .mxBorderRadius(30px);
+ background-color: @backColor1;
margin-right: -3px;
margin-left: 3px;
padding: 2px 5px;
/* Badge Types */
-.wcf-badgeBorder {
- border: 1px solid #ccc;
+.wcf-badgeBorder { /* ToDo: Obsolete? */
+ border: @borderWidthBadge borderStyleBadge #ccc;
}
.wcf-badgeBlue {
color: #68b;
- border: 1px solid #9be;
+ border: @borderWidthBadge @borderStyleBadge #9be;
background-color: #def;
}
.wcf-badgeGreen {
color: #090;
- border: 1px solid #0c0;
+ border: @borderWidthBadge @borderStyleBadge #0c0;
background-color: #efe;
}
.wcf-badgeYellow {
color: #990;
- border: 1px solid #cc0;
+ border: @borderWidthBadge @borderStyleBadge #cc0;
background-color: #ffd;
}
.wcf-badgeRed {
color: #c00;
- border: 1px solid #f99;
+ border: @borderWidthBadge @borderStyleBadge #f99;
background-color: #fee;
}
.wcf-badgeButton {
cursor: pointer;
- border-radius: 30px;
+ .mxBorderRadius(30px);
margin-right: 0;
margin-left: 0;
padding: 3px 10px 5px;
color: #eee;
text-shadow: none;
text-decoration: none;
- border-radius: 13px;
+ .mxBorderRadius(30px);
background-color: rgba(102, 102, 102, 1);
margin-right: 3px;
padding: 3px 8px 4px;
}
.wcf-label:hover {
- color: rgba(255, 255, 255, 1);
+ color: @fontColor1;
background-color: rgba(51, 51, 51, 1);
}
}
.wcf-label a:hover {
- color: rgba(255, 255, 255, 1);
+ color: @fontColor1;
}
/* Default Colors */
/* Dropdown */
.wcf-dropdown {
- color: rgba(255, 255, 255, 1);
- border-width: 1px;
- border-style: solid;
+ color: @fontColor1;
+ border-width: @borderWidth;
+ border-style: @borderStyle;
border-color: rgba(255, 255, 255, .7);
- border-radius: 5px;
- background-color: rgba(0, 0, 0, .7);
+ .mxBorderRadius;
+ background-color: fade(@backColor5, 50%);
margin-top: 25px;
display: none;
position: absolute;
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;
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;
}
.wcf-dropdown > :first-child {
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
+ .mxBorderRadiusTL;
+ .mxBorderRadiusTR;
}
.wcf-dropdown > :last-child {
- border-bottom-left-radius: 5px;
- border-bottom-right-radius: 5px;
+ .mxBorderRadiusBR;
+ .mxBorderRadiusBL;
}
.wcf-dropdown > :hover:not(ul):not(.pointer),
.wcf-dropdown > .active {
- color: rgba(255, 255, 255, 1);
+ color: @fontColor1;
cursor: pointer;
- background-color: rgba(0, 0, 0, .5);
+ background-color: fade(@backColor5, 50%);
}
.wcf-dropdown > li.divider:not(:first-child) {
- border-top: 1px solid rgba(255, 255, 255, .7);
+ border-top: @borderWidth @borderStyle rgba(255, 255, 255, .7);
}
.wcf-dropdown > li {
}
.wcf-dropdown > li a:hover {
- color: rgba(255, 255, 255, 1);
- background-color: rgba(0, 0, 0, .5);
+ color: @fontColor1;
+ background-color: fade(@backColor5, 50%);
}
body {
font-family: 'Trebuchet MS', Arial, sans-serif;
font-size: 80%;
- color: rgba(102, 102, 102, 1);
+ color: @fontColor52;
line-height: 1;
- background-color: rgba(41, 55, 74, 1);
+ background-color: @backColor4;
}
/* Globals */
header.wcf-pageHeader {
- /* Disabled, because the WoltLab header-image is not LGPL
- Activate it if you want to test your own header image */
- /* background-image: url('../../../images/header.png'); */
+ background-image: @backImage;
background-position: center top;
background-repeat: repeat-x;
background-attachment: fixed;
}
.wcf-pageFooter .wcf-copyright a {
- text-shadow: 0 -1px 0 #000;
+ text-shadow: 0 -1px 0 @textShadowColor1;
}
.wcf-pageFooter .wcf-copyright a:hover {
text-decoration: none;
- color: #69c;
+ color: @fontColor31;
}
/* Globals */
nav.wcf-topMenu {
- border-bottom: 1px solid rgba(0, 0, 0, .1);
- background-color: rgba(0, 0, 0, .4);
+ border-bottom: @borderWidth @borderStyle rgba(0, 0, 0, .1);
+ background-color: fade(@backColor5, 40%);
position: fixed;
top: 0;
right: 0;
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;
-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;
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;
}
.wcf-topMenu:hover {
- background-color: rgba(0, 0, 0, .7);
+ background-color: fade(@backColor5, 50%);
}
.wcf-topMenu > div {
.wcf-topMenu > div > ul > li {
border-width: 0 1px;
- border-style: solid;
+ 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: #69c;
+ color: @fontColor31;
}
.wcf-topMenu > div > ul > li:hover,
.wcf-topMenu > div > ul > li:hover > .wcf-dropdownCaption,
.wcf-topMenu > div > ul > li:hover > .wcf-dropdownCaption a {
text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
- color: rgba(255, 255, 255, 1);
- background-color: rgba(0, 0, 0, .7);
+ color: @fontColor1;
+ background-color: fade(@backColor5, 70%);
}
/* Badges */
.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > .wcf-badge,
.wcf-topMenu > div > ul > li:hover > .wcf-dropdownCaption > .wcf-badge {
font-size: 75%;
- color: #369 !important;
+ color: @fontColor3 !important;
}
/* Images in front of the caption */
/* Auto-Opening Dropdowns */
.wcf-topMenu ul li .wcf-dropdownCaption ~ .wcf-dropdown {
border-color: rgba(255, 255, 255, .5);
- background-color: rgba(0, 0, 0, .7);
+ background-color: fade(@backColor5, 70%);
left: -1px;
min-width: 100%;
}
/* -- -- -- Search -- -- -- */
.wcf-search {
- border: 1px solid rgba(0, 0, 0, .1);
- border-radius: 5px;
- background-color: rgba(0, 0, 0, .2);
+ border: @borderWidthInput @borderStyleInput rgba(0, 0, 0, .1);
+ .mxBorderRadius;
+ background-color: fade(@backColor5, 20%);
padding: 5px;
position: absolute;
top: 50px;
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;
}
.wcf-search:hover {
- background-color: rgba(0, 0, 0, .5);
+ background-color: fade(@backColor5, 50%);
}
.wcf-search input[type='search'] {
}
.wcf-mainMenu > ul {
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
- background-color: rgba(0, 0, 0, .4);
+ .mxBorderRadiusTL;
+ .mxBorderRadiusTR;
+ background-color: fade(@backColor5, 20%);
display: inline-block;
position: relative;
}
.wcf-mainMenu > ul > li > a {
font-weight: normal;
text-decoration: none;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
- color: #69c;
+ text-shadow: 0 -1px 0 @textShadowColor1;
+ color: @fontColor31;
cursor: pointer;
white-space: nowrap;
display: inline-block;
-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;
}
.wcf-mainMenu > ul > li:not(.activeMenuItem):hover > a {
- color: rgba(255, 255, 255, 1);
+ color: @fontColor1;
}
.wcf-mainMenu > ul > li.activeMenuItem > a {
font-size: 110%;
font-weight: bold;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- color: #369;
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
-
- background-color: #e7f2fd;
- background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
- background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
- background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
- background-image: -o-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
- background-image: linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
+ 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 {
- border-bottom-right-radius: 6px;
- border-width: 0 1px 1px 0;
- position: absolute;
- bottom: 0;
- left: -7px;
- width: 7px;
- height: 7px;
- content: "";
-
- -webkit-box-shadow: 2px 2px 0 #e7f2fd;
- -moz-box-shadow: 2px 2px 0 #e7f2fd;
- -ms-box-shadow: 2px 2px 0 #e7f2fd;
- -o-box-shadow: 2px 2px 0 #e7f2fd;
- box-shadow: 2px 2px 0 #e7f2fd;
+ .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 {
- border-bottom-left-radius: 6px;
+ .mxBorderRadiusBL(6px);
border-width: 0 0 1px 1px;
position: absolute;
right: -7px;
height: 7px;
content: "";
- -webkit-box-shadow: -2px 2px 0 #e7f2fd;
- -moz-box-shadow: -2px 2px 0 #e7f2fd;
- -ms-box-shadow: -2px 2px 0 #e7f2fd;
- -o-box-shadow: -2px 2px 0 #e7f2fd;
- box-shadow: -2px 2px 0 #e7f2fd;
+ -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 {
- font-size: 65% !important;
- color: rgba(255, 255, 255, 1);
- background-color: #369;
+ color: @fontColor1;
+ background-color: @fontColor3; /* This shows the badge in the font-color */
+ margin: -10px 0;
- -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
- -moz-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
- -ms-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
- -o-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
- box-shadow: 0 0 1px rgba(255, 255, 255, 1);
+ -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-headerNavigation,
.wcf-footerNavigation {
- background-color: #e7f2fd;
- border-style: solid;
- border-color: #bcd;
+ background-color: @backColor21;
+ border-style: @borderStyle;
+ border-color: @backColor22;
margin: 0 23px;
display: block;
min-height: 7px;
.wcf-headerNavigation {
border-width: 0 0 1px 0;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
+ .mxBorderRadiusTL(3px);
+ .mxBorderRadiusTR(3px);
}
.wcf-footerNavigation {
border-width: 1px 0 0 0;
- border-bottom-left-radius: 3px;
- border-bottom-right-radius: 3px;
+ .mxBorderRadiusBR(3px);
+ .mxBorderRadiusBL(3px);
}
@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
.wcf-headerNavigation > ul > li.separator,
.wcf-footerNavigation > ul > li.separator {
- border-right: 1px dotted #bcd;
+ border-right: 1px dotted @backColor22;
}
.wcf-headerNavigation > ul > li a,
.wcf-footerNavigation > ul > li a,
.wcf-footerNavigation > ul > li p {
text-decoration: none;
- color: #369;
+ color: @fontColor3;
padding: 3px;
display: inline-block;
}
/* ############## Main ############## */
.wcf-main {
- background-color: rgba(216, 231, 245, 1);
+ 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);
/* ToDo: Change the class name, since now we have the class "content" 2 times! */
section.wcf-content {
- background-color: rgba(255, 255, 255, 1);
+ 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
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;
}
.left section.wcf-content {
- border-left: 1px solid rgba(187, 204, 221, 1);
+ border-left: @borderWidth @borderStyle rgba(187, 204, 221, 1);
margin-left: 249px;
}
.right section.wcf-content {
- border-right: 1px solid rgba(187, 204, 221, 1);
+ border-right: @borderWidth @borderStyle rgba(187, 204, 221, 1);
margin-right: 249px;
}
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;
.wcf-collapsibleSidebarButton:hover,
.wcf-collapsibleSidebarButton:hover span {
- background-color: rgba(252, 252, 252, 1);
+ background-color: @backColor10;
opacity: 1;
}
.wcf-collapsibleSidebarButton span {
- background-color: rgba(255, 255, 255, 1);
- background-position: center center;
+ background-color: @backColor1;
+ background-position: center center;
background-size: 10px 10px;
background-repeat: no-repeat;
margin-top: -300px;
.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);
/* Orientation */
.left .wcf-collapsibleSidebarButton {
- border-right: 1px solid rgba(187, 204, 221, .5);
+ 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;
}
.right .wcf-collapsibleSidebarButton {
- border-left: 1px solid rgba(187, 204, 221, .5);
+ 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;
/* -- -- -- Sidebar Content -- -- -- */
.wcf-sidebarContent > div {
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+ text-shadow: 0 1px 0 @textShadowColor2;
position: relative;
overflow: hidden;
z-index: 40;
.wcf-sidebarContent a:hover {
text-decoration: none !important;
- color: #369;
+ color: @fontColor3;
}
.wcf-sidebarContent > div > h1 {
cursor: pointer;
font-weight: bold;
- color: #369;
+ color: @fontColor3;
margin-top: 5px;
}
.wcf-sidebarContent > div ul > li > a,
.wcf-sidebarContent > div ul > li > div {
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- color: #69c;
+ text-shadow: 0 1px 0 @textShadowColor2;
+ color: @fontColor31;
padding: 5px 15px 7px 35px;
display: block;
}
.wcf-sidebarContent > div ul > li.activeMenuItem {
- background-color: rgba(255, 255, 255, 1);
+ 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);
.wcf-sidebarContent > div ul > li.activeMenuItem a {
font-weight: bold;
- color: #369;
+ color: @fontColor3;
}
.wcf-mainHeading > hgroup h1 {
font-weight: bold;
- border-bottom: 1px solid rgba(153, 153, 153, 1);
+ border-bottom: @borderWidth @borderStyle @borderColor1;
padding: 1px 0 10px;
}
.wcf-mainHeading > hgroup h1,
.wcf-mainHeading > hgroup h1 a {
text-decoration: none;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- color: rgba(102, 102, 102, 1);
+ text-shadow: 0 1px 0 @textShadowColor2;
+ color: @fontColor52;
}
.wcf-mainHeading > hgroup h2 {
font-size: 100%;
font-weight: normal;
- color: rgba(153, 153, 153, 1);
+ color: @fontColor53;
padding-top: 5px;
}
font-size: 75%;
text-decoration: none;
background-color: rgba(102, 102, 102, 1);
- color: rgba(255, 255, 255, 1);
+ color: @fontColor1;
}
/* Special -> Dialog */
.wcf-dialogContainer .wcf-mainHeading > hgroup h1,
.wcf-dialogContainer .wcf-mainHeading > hgroup h1 a {
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
- color: rgba(255, 255, 255, 1);
+ text-shadow: 0 -1px 0 @textShadowColor1;
+ color: @fontColor1;
}
.wcf-subHeading h1 {
font-size: 150%;
font-weight: bold;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- color: rgba(153, 153, 153, 1);
- border-bottom: 1px solid #ccc;
+ text-shadow: 0 1px 0 @textShadowColor2;
+ color: @fontColor53;
+ border-bottom: @borderWidth @borderStyle @borderColor11;
margin: 10px 0;
padding: 10px 0;
box-sizing: border-box;
.wcf-subHeading h2 {
font-weight: normal;
- color: #aaa;
+ color: lighten(@fontColor53, 5%);
}
/* ############## Fieldsets ############## */
fieldset {
- border: 1px solid #ccc;
- border-radius: 7px;
- background-color: rgba(250, 250, 250, 1);
+ 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 legend {
- color: rgba(153, 153, 153, 1);
+ color: @borderColor1;
padding: 0 7px 0;
margin: auto -7px;
}
}
.wcf-sidebar fieldset legend {
- text-transform: uppercase; /* That's possibly problematic */
+ text-transform: uppercase; /* That's probably problematic */
padding: 0;
}
-.fieldsetDecor {
- border: 1px solid #ccc;
- border-radius: 7px;
- background-color: rgba(250, 250, 250, 1);
-}
-
/* ############## Labeled Content ############## */
dl > dd > small {
font-size: 85%;
- color: rgba(153, 153, 153, 1);
+ color: @fontColor53;
margin: 3px 0 7px;
display: block;
}
input[type='password'],
textarea,
select[multiple] {
- border-width: 1px;
- border-style: solid;
- border-color: rgba(153, 153, 153, 1) rgba(204, 204, 204, 1) rgba(238, 238, 238, 1);
- border-radius: 3px;
- background-color: rgba(255, 255, 255, 1);
+ 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;
input[type='password']:hover,
textarea:hover,
select[multiple]:hover {
- border: 1px solid rgba(255, 170, 34, 1);
- background-color: rgba(255, 249, 244, 1);
+ border-style: @borderStyleInput;
+ border-color: @borderColorInputTop2 @borderColorInputSide2 @borderColorInputBottom2;
+ background-color: @backColorInput21;
}
/* Active & Focus State */
input[type='password']:focus,
textarea:focus,
select[multiple]:focus {
- border: 1px solid rgba(255, 170, 34, 1);
- background-color: rgba(255, 249, 244, 1);
+ 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);
input[type='password'][readonly],
textarea[readonly],
select[multiple][readonly] {
- border-style: solid;
- border-color: rgba(204, 204, 204, 1) rgba(221, 221, 221, 1) rgba(238, 238, 238, 1);
+ 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);
input[type='password'][disabled],
textarea[disabled],
select[multiple][disabled] {
- border-style: solid;
- border-color: rgba(255, 255, 255, .5);
- background-color: rgba(255, 255, 255, .5);
+ border-style: @borderStyleInput;
+ border-color: fade(@backColorInput1, 50%);
+ background-color: fade(@backColor1, 50%);
}
/* Special -> Search Input WebKit */
input[type=search] {
- border-radius: 30px;
+ .mxBorderRadius(30px);
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
border-radius: 0 3px 3px 0;
margin: 0 !important;
display: table-cell;
- width: 99%;
+ width: 100%;
}
@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
}
.wcf-smallButtons > li.separator > a {
- border-right: 1px dotted #bcd;
+ border-right: @borderWidthButton @borderStyleButton2 @borderColorButtonTop3;
}
.wcf-smallButtons > li:first-child > a {
- border-top-left-radius: 13px;
+ .mxBorderRadiusTL(13px);
}
.wcf-smallButtons > li:last-child > a {
- border-bottom-right-radius: 7px;
+ .mxBorderRadiusBR(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));
width: 0;
}
+/* ToDo: Separators */
+.wcf-smallButtonBar li.separator > a {
+ border-right: @borderWidthButton @borderStyleButton2 @borderColorButtonTop3;
+}
+
/* ############## Large Buttons ############## */
.wcf-largeButtons > li > a {
font-size: 100%;
font-weight: bold;
- border-radius: 30px;
+ .mxBorderRadius(30px);
margin: 3px 2px;
padding: 5px 13px;
display: inline-block;
/* Globals */
.wcf-box {
- border: 1px solid rgba(204, 204, 204, 1);
- border-radius: 5px;
+ border: @borderWidth @borderStyle @borderColor11;
+ .mxBorderRadius;
box-sizing: border-box;
}
.wcf-boxTitle {
- border-radius: 7px;
- background-color: #369;
- /* Disabled, because the WoltLab header-image is not LGPL
- Activate it if you want to test your own header image */
- /* background-image: url('../../../images/header.png'); */
+ .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 {
/* Headings */
.wcf-boxTitle > hgroup {
- text-shadow: 0 -1px 0 #000;
- color: rgba(255, 255, 255, 1);
+ text-shadow: 0 -1px 0 @textShadowColor1;
+ color: @fontColor1;
padding: 7px;
display: inline-block;
}
.wcf-boxTitle > a,
.wcf-boxTitle > hgroup a {
text-decoration: none;
- color: rgba(255, 255, 255, 1);
+ color: @fontColor1;
}
.wcf-boxTitle > hgroup h1 {
.wcf-boxTitle > hgroup h2 {
font-size: 85%;
- color: rgba(255, 255, 255, .9);
+ color: @fontColor11;
margin-top: 5px;
}
position: relative;
}
+fieldset ~ .wcf-tabMenuContainer .wcf-tabMenu {
+ margin-top: 30px;
+}
+
/* -- -- -- Tabs -- -- -- */
/* Globals */
.wcf-tabMenu ul {
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+ text-shadow: 0 1px 0 @textShadowColor2;
white-space: nowrap;
border-width: 1px 1px 0 1px;
- border-style: solid;
- border-color: #ddd;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- background-color: rgba(0, 0, 0, .05);
+ 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 a {
text-decoration: none;
- color: rgba(153, 153, 153, 1);
+ color: @fontColor53;
cursor: pointer;
display: inline-block;
position: relative;
}
.wcf-tabMenu li:not(.ui-state-active) a:hover {
- color: rgba(102, 102, 102, 1);
+ color: @fontColor52;
}
.wcf-tabMenu li.ui-state-active a {
font-weight: bold;
- color: #333 !important;
- border-width: 1px;
- border-style: solid;
- border-top-right-radius: 6px;
- border-top-left-radius: 6px;
- border-color: #ccc #ccc #fff;
- background-color: rgba(255, 255, 255, 1);
+ 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;
.wcf-tabMenu li.ui-state-active a:before {
position: absolute;
- bottom: -1px;
- width: 5px;
- height: 5px;
- content: " ";
- border: 1px solid #ccc;
- left: -6px;
- border-bottom-right-radius: 6px;
- border-width: 0 1px 1px 0;
-
- -webkit-box-shadow: 2px 2px 0 #fff;
- -moz-box-shadow: 2px 2px 0 #fff;
- -ms-box-shadow: 2px 2px 0 #fff;
- -o-box-shadow: 2px 2px 0 #fff;
- box-shadow: 2px 2px 0 #fff;
+ 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 solid #ccc;
- right: -6px;
- border-bottom-left-radius: 6px;
- border-width: 0 0 1px 1px;
-
- -webkit-box-shadow: -2px 2px 0 #fff;
- -moz-box-shadow: -2px 2px 0 #fff;
- -ms-box-shadow: -2px 2px 0 #fff;
- -o-box-shadow: -2px 2px 0 #fff;
- box-shadow: -2px 2px 0 #fff;
+ 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) {
/* -- -- -- Tab Menu Content -- -- -- */
.wcf-tabMenuContent {
- background-color: rgba(255, 255, 255, 1);
+ background-color: @backColor1; /* ToDo: Less: Grey! */
margin-top: -1px;
display: block;
position: relative;
/* Standard */
.wcf-menu {
- color: rgba(102, 102, 102, 1);
+ color: @fontColor53;
}
.wcf-menu ul {
.wcf-menu ul li a {
font-size: 85%;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+ text-shadow: 0 1px 0 @textShadowColor2;
text-decoration: none;
- color: rgba(153, 153, 153, 1);
- border: 1px solid rgba(0, 0, 0, .2);
- border-radius: 13px;
- background-color: rgba(255, 255, 255, .5);
+ 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;
}
.wcf-menu ul li:not(.ui-state-active) a:hover {
- color: #333;
- border-width: 1px;
- border-style: solid;
+ 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);
.wcf-menu ul li.ui-state-active a {
font-weight: bold;
- text-shadow: 0 1px 0 #000;
- color: rgba(255, 255, 255, 1);
+ text-shadow: 0 1px 0 @textShadowColor1;
+ color: @fontColor1;
cursor: default;
- border: 1px solid rgba(0, 0, 0, .2);
- background-color: rgba(0, 0, 0, .5);
+ border: 1px @borderStyle rgba(0, 0, 0, .2);
+ background-color: fade(@backColor5, 50%);
}
/* Special -> Menu within box-title */
.wcf-boxTitle > .wcf-menu {
- color: rgba(255, 255, 255, 1);
+ color: @fontColor1;
border: none;
margin: 0 !important;
padding: 6px 7px !important;
}
.wcf-boxTitle > .wcf-menu ul li a {
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
+ text-shadow: 0 -1px 0 @textShadowColor1;
color: #eee !important;
- background-color: rgba(0, 0, 0, .1);
+ background-color: fade(@backColor5, 10%);
}
.wcf-boxTitle > .wcf-menu ul li a:hover {
- color: rgba(255, 255, 255, 1) !important;
- border: 1px solid rgba(0, 0, 0, .3);
- background-color: rgba(0, 0, 0, .2);
+ 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 solid rgba(0, 0, 0, .5);
+ 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);
}
.wcf-boxTitle > .wcf-menu ul li a .wcf-badge {
- color: #369 !important;
+ color: @backColor3 !important;
}
/* Special: Menu below tab-menu */
.wcf-tabMenuContainer > .wcf-menu {
- border-bottom: 1px solid #ccc;
+ 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));
.wcf-breadcrumbs {
text-align: left;
- border: 1px solid rgba(204, 204, 204, 1);
- border-radius: 5px;
- background-color: rgba(255, 255, 255, 1);
- margin-top: 15px;
+ border: 1px @borderStyle rgba(204, 204, 204, 1);
+ .mxBorderRadius;
+ background-color: @backColor1;
display: block;
position: relative;
overflow: hidden;
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;
text-indent: -9000px;
border-width: 15px;
border-style: solid none solid solid;
- border-color: transparent transparent transparent rgba(255, 255, 255, 1);
+ border-color: transparent transparent transparent @backColor1;
display: block;
position: absolute;
width: 0;
.wcf-breadcrumbs > ul > li a {
text-decoration: none;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- color: rgba(153, 153, 153, 1);
+ text-shadow: 0 1px 0 @textShadowColor2;
+ color: @fontColor53;
margin: 0;
padding: 5px 1px 5px 20px;
display: block;
}
.wcf-breadcrumbs > ul > li:hover a {
- color: rgba(102, 102, 102, 1);
+ color: @fontColor52;
background-color: rgba(249, 249, 249, 1);
position: relative;
z-index: 10;
thead th:first-child {
/* Rounded corners for the first table header cell
(only in effect if the table is not inside a "div" with class ".boxTitle") */
- border-top-left-radius: 5px;
+ .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") */
- border-top-right-radius: 5px;
+ .mxBorderRadiusTR;
}
thead th {
- text-shadow: 0 -1px 0 #000;
- color: #69c;
- border-right: 1px solid rgba(0, 0, 0, .2);
+ text-shadow: 0 -1px 0 @textShadowColor1;
+ color: @fontColor31;
+ border-right: 1px @borderStyle rgba(0, 0, 0, .2);
- background-color: rgba(0, 0, 0, .3);
+ 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));
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;
}
thead th a {
- text-shadow: 0 -1px 0 #000;
+ text-shadow: 0 -1px 0 @textShadowColor1;
text-decoration: none !important;
- color: #69c;
+ color: @fontColor31;
margin: -7px;
padding: 7px;
display: block;
}
thead th:hover a {
- color: rgba(255, 255, 255, 1);
- background-color: rgba(0, 0, 0, .2);
+ color: @fontColor1;
+ background-color: fade(@backColor5, 20%);
}
thead th a:active,
thead th a:focus,
thead th.active a {
- color: rgba(255, 255, 255, 1);
- background-color: rgba(0, 0, 0, .1);
+ 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);
}
thead th.active:hover a {
- background-color: rgba(0, 0, 0, .3);
+ background-color: fade(@backColor5, 30%);
}
thead th a img {
tbody tr:last-child td:first-child {
/* Rounded corners for the first table cell in the last row */
- border-bottom-left-radius: 5px;
+ .mxBorderRadiusBL;
}
tbody tr:last-child td:last-child {
/* Rounded corners for the last table cell in the last row */
- border-bottom-right-radius: 5px;
+ .mxBorderRadiusBR;
}
tbody td {
background-color: #fcfdfe;
- border-right: 1px solid rgba(255, 255, 255, .3);
+ 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;
/* -- -- -- Special -> Table Header -- -- -- */
.wcf-menu ~ .wcf-box thead th:first-child { /* ToDo: Does this case really exist any more? */
- border-top-left-radius: 0 !important;
+ .mxBorderRadiusTL(0) !important;
}
.wcf-menu ~ .wcf-box thead th:last-child { /* ToDo: Does this case really exist any more? */
- border-top-right-radius: 0 !important;
+ .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 */
- border-top-left-radius: 0 !important;
+ .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 */
- border-top-right-radius: 0 !important;
+ .mxBorderRadiusTR(0) !important;
}
.wcf-pageNavigation ul li {
font-weight: bold;
text-align: center;
- border-radius: 3px;
+ .mxBorderRadius(3px);
margin: 1px;
float: left;
min-width: 19px;
.wcf-pageNavigation ul li.disabled {
cursor: not-allowed;
- border: 1px solid rgba(0, 0, 0, .1) !important;
+ border: 1px @borderStyleButton rgba(0, 0, 0, .1) !important;
background-image: none !important;
}
}
.wcf-pageNavigation ul li a {
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+ text-shadow: 0 1px 0 @textShadowColor2;
text-decoration: none;
- color: rgba(153, 153, 153, 1);
+ color: @fontColor53;
display: inline-block;
}
.wcf-pageNavigation ul li:not(.disabled):hover a {
- color: rgba(102, 102, 102, 1);
+ color: @fontColor52;
}
.wcf-pageNavigation ul li:not(.skip) a {
.wcf-pageNavigation ul li:active a,
.wcf-pageNavigation ul li:focus a {
- color: #333;
+ color: @fontColor52;
}
.wcf-pageNavigation ul li.active,
.wcf-pageNavigation ul li.active:hover {
- text-shadow: 0 1px 0 #000 !important;
- color: rgba(255, 255, 255, 1) !important;
- border: 1px solid rgba(0, 0, 0, .3) !important;
+ 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;
.wcf-pageNavigation ul li.children .wcf-dropdown {
text-align: left;
border-color: transparent;
- border-radius: 3px;
- background-color: rgba(0, 0, 0, .7);
+ .mxBorderRadius(3px);
+ background-color: fade(@backColor5, 70%);
margin-top: 28px;
margin-left: -2px;
padding: 2px 1px;
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;
.wcf-error,
.wcf-success,
.wcf-warning {
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+ text-shadow: 0 1px 0 @textShadowColor2;
line-height: 1.5;
- border-radius: 7px;
+ .mxBorderRadius(7px);
margin-top: 15px;
padding: 7px 15px 7px 50px;
box-sizing: border-box;
.wcf-info {
color: #68b;
- border: 1px solid #9be;
+ 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'), -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-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 solid #0c0;
+ 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'), -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-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 solid #cc0;
+ 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'), -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-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 solid #f99;
+ 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'), -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-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 rgba(255, 255, 255, 1);
+ text-shadow: 0 1px 0 @textShadowColor2;
line-height: 1.5;
color: #c00;
- border: 1px solid #f99;
- border-radius: 7px;
+ border: 1px @borderStyle #f99;
+ .mxBorderRadius(7px);
background-color: rgba(255, 238, 238, 1);
background-image: url('../../icon/systemError.svg');
background-size: 16px;
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);
.wcf-systemNotification { /* declarations taken from .success */
background-color: rgba(238, 255, 238, 1);
- border: 1px solid rgba(0, 204, 0, 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);
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;
/* Globals */
.wcf-dialogContainer {
- border: 23px solid transparent;
- border-radius: 15px;
- background-color: rgba(0, 0, 0, .4);
+ 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);
/* Titlebar */
.wcf-dialogTitlebar {
- border-bottom: 1px solid #036;
- border-top-left-radius: 7px;
- border-top-right-radius: 7px;
- background-color: #29374a;
- /* Disabled, because the WoltLab header-image is not LGPL
- Activate it if you want to test your own header image */
- /* background-image: url('../../../images/header.png'); */
+ 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;
- /*cursor: move;*/
}
.wcf-dialogTitle {
font-size: 170%;
font-weight: bold;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
- color: rgba(255, 255, 255, 1);
+ text-shadow: 0 -1px 0 @textShadowColor1;
+ color: @fontColor1;
display: block;
}
/* Content */
.wcf-dialogContent {
- color: rgba(238, 238, 238, 1);
- background-color: #333;
+ color: @fontColor11;
+ background-color: @backColor51;
overflow: auto;
}
+.wcf-dialogContent a {
+ color: @fontColor2;
+}
+
+.wcf-dialogContent a:hover {
+ color: @fontColor1;
+}
+
.wcf-dialogContainer > .wcf-dialogContent {
- border-radius: 7px;
+ .mxBorderRadius(7px);
padding: 0;
/*width: auto !important;*/
}
.wcf-dialogTitlebar ~ .wcf-dialogContent {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- border-bottom-left-radius: 7px;
- border-bottom-right-radius: 7px;
+ .mxBorderRadiusTL(0);
+ .mxBorderRadiusTR(0);
+ .mxBorderRadiusBL(7px);
+ .mxBorderRadiusBR(7px);
padding: 10px 20px 20px;
}
font-family: monospace;
font-size: 90%;
line-height: 1.2;
- border: 1px solid #ccc;
+ border: 1px @borderStyle #ccc;
padding: 3px;
}
/* ############## ToDo: Overlay Spinner ############## */
.wcf-dialogOverlay {
- background-color: rgba(0, 0, 0, 1);
- opacity: .5;
+ background-color: fade(@backColor5, 50%);
position: fixed;
width: 100% !important;
top: 0;
/* ToDo: What is that and change that class-name! */
.wcf-overlayLoading {
- background-color: rgba(255, 255, 255, 1);
+ background-color: @backColor1;
background-image: url('../../icon/spinner1.svg');
background-position: center center;
background-size: 32px;
.wcf-balloonTooltip {
font-size: .85em;
- color: rgba(255, 255, 255, 1);
- border: 1px solid rgba(255, 255, 255, .7);
- border-radius: 5px;
- background-color: rgba(0, 0, 0, .7);
+ 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);
.wcf-clipboardEditor > ul > li {
font-size: .85em;
- border-radius: 30px;
+ .mxBorderRadius(30px);
margin-top: 7px;
margin-right: 3px;
margin-left: 3px;
input[type='button']:not([disabled]),
button:not([disabled]) {
text-decoration: none;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- color: rgba(153, 153, 153, 1);
- border-width: 1px;
- border-style: solid;
- border-color: #ccc #bbb #aaa;
-
- background-color: #fefefe;
- background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
- background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
- background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
- background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
- background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
+ 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);
-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;
input[type='button']:not([disabled]):hover,
button:not([disabled]):hover {
text-decoration: none;
- color: rgba(102, 102, 102, 1);
- border-width: 1px;
- border-style: solid;
- border-color: #ffc053 #fa2 #fc9e07;
+ color: @fontColorButton2;
+ border-style: @borderStyleButton;
+ border-color: @borderColorButtonTop2 @borderColorButtonSide2 @borderColorButtonBottom2;
- background-color: #fff9f4;
- background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+ 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 */
input[type='submit']:not([disabled]):active,
input[type='button']:not([disabled]):active,
button:not([disabled]):active {
- color: #333;
- border-width: 1px;
- border-style: solid;
- border-color: #fc9e07 #fa2 #ffc053;
-
- background-color: #fff9f4;
- background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+ 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);
-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);
input[type='submit']:not([disabled]),
input[type='button']:not([disabled]).default,
button:not([disabled]).default {
- color: #69c;
- border-width: 1px;
- border-style: solid;
- border-color: #7aade0 #69c #5285b8;
-
- background-color: #e7f2fd;
- background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
- background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
- background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
- background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
- background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+ 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;
-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;
/* 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);
- }
+ 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);
- }
+ 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);
- }
+ 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);
- }
+ 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);
- }
+ 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 */
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;
-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;
/* 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);
- }
+ 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);
- }
+ 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);
- }
+ 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);
- }
+ 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);
- }
+ 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 */
-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;
input[disabled],
input[type='button'][disabled],
button[disabled] {
- color: rgba(153, 153, 153, 1);
+ color: lighten(@fontColorButton1, 20%);
cursor: default;
- border-width: 1px;
- border-style: solid;
- border-color: #ccc #bbb #aaa;
+ border-style: @borderStyleButton;
+ border-color: lighten(@borderColorButtonTop1, 10%) lighten(@borderColorButtonSide1, 10%) lighten(@borderColorButtonBottom1, 10%);
background-color: transparent;
}
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;
}
.wcf-infoPackagePlugin > div > a {
- color: rgba(153, 153, 153, 1);
+ color: @fontColor53;
background-size: 96px;
background-position: center 70%;
background-repeat: no-repeat;
}
.wcf-infoPackagePlugin:hover > div > a {
- color: rgba(102, 102, 102, 1);
+ color: @fontColor52;
}
.wcf-infoPackagePlugin > div > a > h1 { /* ToDo: h1 inside a ??? */
font-size: 100%;
font-weight: bold;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+ text-shadow: 0 1px 0 @textShadowColor2;
word-wrap: break-word;
margin: 0 -1px;
padding: 3px 1px;
}
.wcf-infoPackagePlugin:hover > div > a > h1 {
- border-bottom: 1px solid rgba(204, 204, 204, 1);
+ 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));
font-size: 85%;
font-weight: normal;
text-shadow: none;
- border-radius: 7px;
+ .mxBorderRadius(7px);
padding: 40px 5px;
display: block;
position: absolute;
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;
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;
/* This is the placeholder (or ghost) which will be inserted on runtime in order to show the possible insertation point - Alex */
.wcf-sortableListContainer .wcf-badgeYellow {
- border-radius: 5px;
+ .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: 1px solid #f99;
+ border: @borderWidth @borderStyle #f99;
background-color: #fee;
}
}
.wcf-sortableNodeLabel {
- border-bottom: 1px solid rgba(216, 231, 245, 1);
+ 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 */
}
.wcf-spinner {
text-align: center;
- text-shadow: 0 -1px 0 #000;
- color: #fff;
- border-width: 1px;
- border-style: solid;
+ text-shadow: 0 -1px 0 @textShadowColor1;
+ color: @fontColor1;
+ border-width: @borderWidth;
+ border-style: @borderStyle;
border-color: rgba(0, 0, 0, .3);
- border-radius: 5px;
+ .mxBorderRadius;
- background-color: rgba(0, 0, 0, .5) !important;
+ 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;
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);
projects / GitHub / WoltLab / WCF.git / commitdiff