From 8878b0c35b5c8544f4e9d3ffa41794f448584539 Mon Sep 17 00:00:00 2001 From: Luzifr Date: Mon, 12 Mar 2012 20:35:06 +0100 Subject: [PATCH] LESS support (work in progress!) MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Everything should still look as before … --- wcfsetup/install/files/acp/style/wcf.less | 1330 +++++++++++------ .../install/files/acp/templates/option.tpl | 2 +- 2 files changed, 858 insertions(+), 474 deletions(-) diff --git a/wcfsetup/install/files/acp/style/wcf.less b/wcfsetup/install/files/acp/style/wcf.less index 25dc92d86f..9cd6ae6168 100644 --- a/wcfsetup/install/files/acp/style/wcf.less +++ b/wcfsetup/install/files/acp/style/wcf.less @@ -1,8 +1,8 @@ /** - * ############################################################################# - * ### 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! ### + * ######################################################################### */ /** @@ -65,6 +65,230 @@ q:after { +/* ############## 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 ############## */ * { @@ -76,10 +300,11 @@ img { } 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; @@ -96,8 +321,8 @@ hr { } ::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); } @@ -129,11 +354,7 @@ img[src*='enable'] { top: -9000px; } -/* Uniform background image */ -.wcf-headerImage { - background-image: url('../../../images/header.png'); -} /* -- -- -- URLs -- -- -- */ @@ -197,9 +418,9 @@ a[href^="mailto:"] { /* -- -- -- 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 @@ -208,9 +429,9 @@ a[href^="mailto:"] { } /* 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 @@ -218,6 +439,16 @@ a[href^="mailto:"] { 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 ############## */ @@ -259,8 +490,8 @@ a[href^="mailto:"] { 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; @@ -271,31 +502,31 @@ a[href^="mailto:"] { /* 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; } @@ -303,7 +534,7 @@ a[href^="mailto:"] { .wcf-badgeButton { cursor: pointer; - border-radius: 30px; + .mxBorderRadius(30px); margin-right: 0; margin-left: 0; padding: 3px 10px 5px; @@ -345,7 +576,7 @@ li > .wcf-badgeButton { 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; @@ -356,7 +587,7 @@ li > .wcf-badgeButton { } .wcf-label:hover { - color: rgba(255, 255, 255, 1); + color: @fontColor1; background-color: rgba(51, 51, 51, 1); } @@ -366,7 +597,7 @@ li > .wcf-badgeButton { } .wcf-label a:hover { - color: rgba(255, 255, 255, 1); + color: @fontColor1; } /* Default Colors */ @@ -470,12 +701,12 @@ table .wcf-label { /* 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; @@ -486,12 +717,14 @@ table .wcf-label { 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; @@ -511,6 +744,7 @@ table .wcf-label { 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; @@ -522,24 +756,24 @@ table .wcf-label { } .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 { @@ -556,8 +790,8 @@ table .wcf-label { } .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%); } @@ -569,9 +803,9 @@ table .wcf-label { 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; } @@ -581,9 +815,7 @@ body { /* 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; @@ -633,12 +865,12 @@ header.wcf-pageHeader { } .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; } @@ -648,8 +880,8 @@ header.wcf-pageHeader { /* 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; @@ -658,12 +890,14 @@ nav.wcf-topMenu { 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; @@ -673,6 +907,10 @@ nav.wcf-topMenu { -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; @@ -724,6 +962,24 @@ nav.wcf-topMenu { 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; @@ -790,7 +1046,7 @@ nav.wcf-topMenu { } .wcf-topMenu:hover { - background-color: rgba(0, 0, 0, .7); + background-color: fade(@backColor5, 50%); } .wcf-topMenu > div { @@ -805,7 +1061,7 @@ nav.wcf-topMenu { .wcf-topMenu > div > ul > li { border-width: 0 1px; - border-style: solid; + border-style: @borderStyle; border-color: transparent; float: left; position: relative; @@ -814,7 +1070,7 @@ nav.wcf-topMenu { .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, @@ -846,8 +1102,8 @@ nav.wcf-topMenu { .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 */ @@ -860,7 +1116,7 @@ nav.wcf-topMenu { .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 */ @@ -876,7 +1132,7 @@ nav.wcf-topMenu { /* 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%; } @@ -952,9 +1208,9 @@ nav.wcf-topMenu { /* -- -- -- 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; @@ -962,12 +1218,14 @@ nav.wcf-topMenu { 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; @@ -976,7 +1234,7 @@ nav.wcf-topMenu { } .wcf-search:hover { - background-color: rgba(0, 0, 0, .5); + background-color: fade(@backColor5, 50%); } .wcf-search input[type='search'] { @@ -1010,9 +1268,9 @@ nav.wcf-topMenu { } .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; } @@ -1054,8 +1312,8 @@ nav.wcf-topMenu { .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; @@ -1065,6 +1323,10 @@ nav.wcf-topMenu { -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; @@ -1103,23 +1365,24 @@ nav.wcf-topMenu { } .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; } @@ -1127,24 +1390,25 @@ nav.wcf-topMenu { /* 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; @@ -1153,25 +1417,41 @@ nav.wcf-topMenu { 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; } @@ -1182,9 +1462,9 @@ nav.wcf-topMenu { .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; @@ -1194,14 +1474,14 @@ nav.wcf-topMenu { .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) { @@ -1245,7 +1525,7 @@ nav.wcf-topMenu { .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, @@ -1253,7 +1533,7 @@ nav.wcf-topMenu { .wcf-footerNavigation > ul > li a, .wcf-footerNavigation > ul > li p { text-decoration: none; - color: #369; + color: @fontColor3; padding: 3px; display: inline-block; } @@ -1307,12 +1587,13 @@ nav.wcf-topMenu { /* ############## 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); @@ -1342,13 +1623,14 @@ nav.wcf-topMenu { /* 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 @@ -1356,6 +1638,7 @@ section.wcf-content { 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; @@ -1369,12 +1652,12 @@ section.wcf-content:after { } .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; } @@ -1430,6 +1713,7 @@ section.wcf-content:after { 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; @@ -1490,13 +1774,13 @@ section.wcf-content:after { .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; @@ -1510,6 +1794,7 @@ section.wcf-content:after { .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); @@ -1519,11 +1804,12 @@ section.wcf-content:after { /* 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; @@ -1535,11 +1821,12 @@ section.wcf-content:after { } .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; @@ -1577,7 +1864,7 @@ section.wcf-content:after { /* -- -- -- 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; @@ -1589,13 +1876,13 @@ section.wcf-content:after { .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; } @@ -1654,18 +1941,19 @@ section.wcf-content:after { .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); @@ -1674,7 +1962,7 @@ section.wcf-content:after { .wcf-sidebarContent > div ul > li.activeMenuItem a { font-weight: bold; - color: #369; + color: @fontColor3; } @@ -1710,7 +1998,7 @@ section.wcf-content:after { .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; } @@ -1743,14 +2031,14 @@ section.wcf-content:after { .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; } @@ -1765,7 +2053,7 @@ section.wcf-content:after { font-size: 75%; text-decoration: none; background-color: rgba(102, 102, 102, 1); - color: rgba(255, 255, 255, 1); + color: @fontColor1; } /* Special -> Dialog */ @@ -1776,8 +2064,8 @@ section.wcf-content:after { .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; } @@ -1787,9 +2075,9 @@ section.wcf-content:after { .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; @@ -1813,7 +2101,7 @@ section.wcf-content:after { .wcf-subHeading h2 { font-weight: normal; - color: #aaa; + color: lighten(@fontColor53, 5%); } @@ -1821,9 +2109,9 @@ section.wcf-content:after { /* ############## 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; @@ -1835,7 +2123,7 @@ fieldset:only-child { } fieldset legend { - color: rgba(153, 153, 153, 1); + color: @borderColor1; padding: 0 7px 0; margin: auto -7px; } @@ -1852,16 +2140,10 @@ fieldset legend ~ p { } .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 ############## */ @@ -1939,7 +2221,7 @@ dl.wide > dd { dl > dd > small { font-size: 85%; - color: rgba(153, 153, 153, 1); + color: @fontColor53; margin: 3px 0 7px; display: block; } @@ -2102,19 +2384,21 @@ input[type='url'], input[type='password'], textarea, select[multiple] { - border-width: 1px; - border-style: solid; - border-color: rgba(153, 153, 153, 1) rgba(204, 204, 204, 1) rgba(238, 238, 238, 1); - border-radius: 3px; - background-color: rgba(255, 255, 255, 1); + 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; @@ -2131,8 +2415,9 @@ input[type='url']:hover, input[type='password']:hover, textarea:hover, select[multiple]:hover { - border: 1px solid rgba(255, 170, 34, 1); - background-color: rgba(255, 249, 244, 1); + border-style: @borderStyleInput; + border-color: @borderColorInputTop2 @borderColorInputSide2 @borderColorInputBottom2; + background-color: @backColorInput21; } /* Active & Focus State */ @@ -2154,11 +2439,13 @@ input[type='url']:focus, input[type='password']:focus, textarea:focus, select[multiple]:focus { - border: 1px solid rgba(255, 170, 34, 1); - background-color: rgba(255, 249, 244, 1); + 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); @@ -2175,11 +2462,12 @@ input[type='url'][readonly], input[type='password'][readonly], textarea[readonly], select[multiple][readonly] { - border-style: solid; - border-color: rgba(204, 204, 204, 1) rgba(221, 221, 221, 1) rgba(238, 238, 238, 1); + 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); @@ -2196,9 +2484,9 @@ input[type='url'][disabled], input[type='password'][disabled], textarea[disabled], select[multiple][disabled] { - border-style: solid; - border-color: rgba(255, 255, 255, .5); - background-color: rgba(255, 255, 255, .5); + border-style: @borderStyleInput; + border-color: fade(@backColorInput1, 50%); + background-color: fade(@backColor1, 50%); } @@ -2268,7 +2556,7 @@ select[multiple][disabled] { /* Special -> Search Input WebKit */ input[type=search] { - border-radius: 30px; + .mxBorderRadius(30px); -webkit-appearance: textfield; -webkit-box-sizing: content-box; @@ -2315,7 +2603,7 @@ input[type=search] { 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) { @@ -2411,15 +2699,15 @@ input[type=search] { } .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); } @@ -2433,6 +2721,7 @@ input[type=search] { 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)); @@ -2456,6 +2745,11 @@ input[type=search] { width: 0; } +/* ToDo: Separators */ +.wcf-smallButtonBar li.separator > a { + border-right: @borderWidthButton @borderStyleButton2 @borderColorButtonTop3; +} + /* ############## Large Buttons ############## */ @@ -2518,7 +2812,7 @@ input[type='button'], .wcf-largeButtons > li > a { font-size: 100%; font-weight: bold; - border-radius: 30px; + .mxBorderRadius(30px); margin: 3px 2px; padding: 5px 13px; display: inline-block; @@ -2549,21 +2843,20 @@ input[type='button'], /* 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 { @@ -2577,8 +2870,8 @@ input[type='button'], /* 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; } @@ -2586,7 +2879,7 @@ input[type='button'], .wcf-boxTitle > a, .wcf-boxTitle > hgroup a { text-decoration: none; - color: rgba(255, 255, 255, 1); + color: @fontColor1; } .wcf-boxTitle > hgroup h1 { @@ -2596,7 +2889,7 @@ input[type='button'], .wcf-boxTitle > hgroup h2 { font-size: 85%; - color: rgba(255, 255, 255, .9); + color: @fontColor11; margin-top: 5px; } @@ -2632,19 +2925,23 @@ input[type='button'], 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; @@ -2663,7 +2960,7 @@ input[type='button'], .wcf-tabMenu li a { text-decoration: none; - color: rgba(153, 153, 153, 1); + color: @fontColor53; cursor: pointer; display: inline-block; position: relative; @@ -2691,18 +2988,18 @@ input[type='button'], } .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; @@ -2712,38 +3009,40 @@ input[type='button'], .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) { @@ -2773,7 +3072,7 @@ input[type='button'], /* -- -- -- 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; @@ -2803,7 +3102,7 @@ input[type='button'], /* Standard */ .wcf-menu { - color: rgba(102, 102, 102, 1); + color: @fontColor53; } .wcf-menu ul { @@ -2819,15 +3118,16 @@ input[type='button'], .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; @@ -2835,9 +3135,9 @@ input[type='button'], } .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); } @@ -2845,6 +3145,7 @@ input[type='button'], .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); @@ -2853,17 +3154,17 @@ input[type='button'], .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; @@ -2874,23 +3175,24 @@ input[type='button'], } .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); @@ -2898,19 +3200,20 @@ input[type='button'], } .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)); @@ -2925,10 +3228,9 @@ input[type='button'], .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; @@ -2943,6 +3245,7 @@ input[type='button'], 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; @@ -2972,7 +3275,7 @@ input[type='button'], 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; @@ -2986,8 +3289,8 @@ input[type='button'], .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; @@ -3005,7 +3308,7 @@ input[type='button'], } .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; @@ -3038,22 +3341,23 @@ thead th { 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)); @@ -3062,6 +3366,7 @@ thead th { 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; @@ -3069,9 +3374,9 @@ thead th { } 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; @@ -3082,17 +3387,18 @@ thead th:last-child a { } 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); @@ -3104,7 +3410,7 @@ thead th.active a { } thead th.active:hover a { - background-color: rgba(0, 0, 0, .3); + background-color: fade(@backColor5, 30%); } thead th a img { @@ -3130,20 +3436,21 @@ tbody tr:last-child { 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; @@ -3168,21 +3475,21 @@ tbody tr:hover td { /* -- -- -- 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; } @@ -3283,7 +3590,7 @@ tr .columnIcon img { .wcf-pageNavigation ul li { font-weight: bold; text-align: center; - border-radius: 3px; + .mxBorderRadius(3px); margin: 1px; float: left; min-width: 19px; @@ -3300,7 +3607,7 @@ tr .columnIcon img { .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; } @@ -3314,14 +3621,14 @@ tr .columnIcon img { } .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 { @@ -3330,17 +3637,18 @@ tr .columnIcon img { .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; @@ -3382,8 +3690,8 @@ tr .columnIcon img { .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; @@ -3396,6 +3704,7 @@ tr .columnIcon img { 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; @@ -3466,9 +3775,9 @@ tr .columnIcon img { .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; @@ -3478,15 +3787,16 @@ tr .columnIcon img { .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; @@ -3494,15 +3804,16 @@ tr .columnIcon img { .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; @@ -3511,15 +3822,16 @@ tr .columnIcon img { .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; @@ -3527,15 +3839,16 @@ tr .columnIcon img { .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; @@ -3544,11 +3857,11 @@ tr .columnIcon img { /* 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; @@ -3561,6 +3874,7 @@ tr .columnIcon img { 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); @@ -3604,7 +3918,7 @@ tr .columnIcon img { .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); @@ -3618,6 +3932,7 @@ tr .columnIcon img { 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; @@ -3635,14 +3950,15 @@ tr .columnIcon img { /* 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); @@ -3670,26 +3986,23 @@ tr .columnIcon img { /* 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; } @@ -3717,22 +4030,30 @@ tr .columnIcon img { /* 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; } @@ -3748,7 +4069,7 @@ tr .columnIcon img { font-family: monospace; font-size: 90%; line-height: 1.2; - border: 1px solid #ccc; + border: 1px @borderStyle #ccc; padding: 3px; } @@ -3757,8 +4078,7 @@ tr .columnIcon img { /* ############## 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; @@ -3769,7 +4089,7 @@ tr .columnIcon img { /* 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; @@ -3788,16 +4108,17 @@ tr .columnIcon img { .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); @@ -3878,7 +4199,7 @@ tr .columnIcon img { .wcf-clipboardEditor > ul > li { font-size: .85em; - border-radius: 30px; + .mxBorderRadius(30px); margin-top: 7px; margin-right: 3px; margin-left: 3px; @@ -3928,20 +4249,22 @@ input[type='submit']:not([disabled]), input[type='button']:not([disabled]), button:not([disabled]) { text-decoration: none; - text-shadow: 0 1px 0 rgba(255, 255, 255, 1); - color: rgba(153, 153, 153, 1); - border-width: 1px; - border-style: solid; - border-color: #ccc #bbb #aaa; - - background-color: #fefefe; - background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1)); - background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1)); - background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1)); - background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1)); - background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1)); + 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); @@ -3951,6 +4274,10 @@ button:not([disabled]) { -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; @@ -3977,17 +4304,17 @@ input[type='submit']:not([disabled]):hover, input[type='button']:not([disabled]):hover, button:not([disabled]):hover { text-decoration: none; - color: rgba(102, 102, 102, 1); - border-width: 1px; - border-style: solid; - border-color: #ffc053 #fa2 #fc9e07; + 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 */ @@ -4006,19 +4333,20 @@ input[type='reset']:not([disabled]):active, input[type='submit']:not([disabled]):active, input[type='button']:not([disabled]):active, button:not([disabled]):active { - color: #333; - border-width: 1px; - border-style: solid; - border-color: #fc9e07 #fa2 #ffc053; - - background-color: #fff9f4; - background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1)); - background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1)); - background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1)); - background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1)); - background-image: linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1)); + 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); @@ -4039,6 +4367,16 @@ button:not([disabled]):active { -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); @@ -4080,19 +4418,21 @@ button:not([disabled]):active { 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; @@ -4104,6 +4444,12 @@ button:not([disabled]).default { -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; @@ -4132,46 +4478,56 @@ button:not([disabled]).default { /* 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 */ @@ -4181,6 +4537,7 @@ 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; @@ -4192,6 +4549,12 @@ button:not([disabled]).default:hover { -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; @@ -4220,46 +4583,56 @@ button:not([disabled]).default:hover { /* 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 */ @@ -4285,6 +4658,12 @@ button:not([disabled]).default:active { -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; @@ -4320,11 +4699,10 @@ button:not([disabled]).default:active { 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; } @@ -4380,6 +4758,7 @@ button[disabled] { 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; @@ -4391,7 +4770,7 @@ button[disabled] { } .wcf-infoPackagePlugin > div > a { - color: rgba(153, 153, 153, 1); + color: @fontColor53; background-size: 96px; background-position: center 70%; background-repeat: no-repeat; @@ -4403,13 +4782,13 @@ button[disabled] { } .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; @@ -4419,10 +4798,11 @@ button[disabled] { } .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)); @@ -4438,7 +4818,7 @@ button[disabled] { font-size: 85%; font-weight: normal; text-shadow: none; - border-radius: 7px; + .mxBorderRadius(7px); padding: 40px 5px; display: block; position: absolute; @@ -4448,6 +4828,7 @@ button[disabled] { 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; @@ -4471,6 +4852,7 @@ button[disabled] { 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; @@ -4503,7 +4885,7 @@ button[disabled] { /* 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; } @@ -4511,7 +4893,7 @@ button[disabled] { /* 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; } @@ -4527,7 +4909,7 @@ button[disabled] { } .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 */ } @@ -4548,15 +4930,16 @@ button[disabled] { .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; @@ -4571,6 +4954,7 @@ button[disabled] { 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); diff --git a/wcfsetup/install/files/acp/templates/option.tpl b/wcfsetup/install/files/acp/templates/option.tpl index e75f3c4664..d957ee166f 100644 --- a/wcfsetup/install/files/acp/templates/option.tpl +++ b/wcfsetup/install/files/acp/templates/option.tpl @@ -36,7 +36,7 @@ {foreach from=$optionTree item=categoryLevel1} -