LESS Update (still work in progress!)

diff --git a/wcfsetup/install/files/style/wcf.less b/wcfsetup/install/files/style/wcf.less
index 9cd6ae6168d0cdc7f4daa2ca9002a55385eae599..236a42caa8a04a808e5278ebb589ffb3c04372db 100644 (file)
--- a/wcfsetup/install/files/style/wcf.less
+++ b/wcfsetup/install/files/style/wcf.less
@@ -1,15 +1,8 @@
 /**
- * #########################################################################
- * ### CAUTION: This is the LESS-compatible stylesheet used in the whole ###
- * ###         WCF, but during WCFSetup the stylesheet wcf.css is used!     ###
- * #########################################################################
- */
-
-/**
- * WCF Testing Styles  
+ * WCF Styles  
  *
  * @author             Harald Szekely 
- * @copyright  2011 WoltLab GmbH 
+ * @copyright  2011-2012 WoltLab GmbH 
  */
 
 /* ############## Reset ############## */
@@ -139,7 +132,7 @@ q:after {
 /* Back Images */
 
 /* Back Color1 (White) */
-@backImage:  url('../../../images/header.png');
+@backImage:  url('../images/header.png');
 
 /* Back Colors */
 
@@ -166,6 +159,18 @@ q:after {
 
 
 
+/* Just a future experiment! Has no function yet.
+
+.mxBackColorSwitch (@xxx) when (lightness(@backColor1) >= 50%) {
+  color: black;
+}
+
+.mxBackColorSwitch (@xxx) when (lightness(@backColor1) < 50%) {
+  color: white;
+}
+
+*/
+
 /* -- -- -- LESS: Fonts -- -- -- */
 
 /* Font Colors */
@@ -279,6 +284,17 @@ q:after {
 
 
 
+/* Test */
+
+.mxTransition1 (@object: color, @time: 1s, @type: linear) {
+       -webkit-transition: @arguments;
+       -khtml-transition: @arguments;
+       -moz-transition: @arguments;
+       -ms-transition: @arguments;
+       -o-transition: @arguments;
+       transition: @arguments;
+}
+
 
 
 
@@ -303,12 +319,7 @@ a {
        color: @fontColor3;
        text-decoration: none;
        
-       -webkit-transition: color .1s linear;
-       -khtml-transition: color .1s linear;
-       -moz-transition: color .1s linear;
-       -ms-transition: color .1s linear;
-       -o-transition: color .1s linear;
-       transition: color .1s linear;
+       .mxTransition1;
 }
 
 a:hover {
@@ -359,7 +370,7 @@ img[src*='enable'] {
 /* -- -- -- URLs -- -- --  */
 
 .wcf-externalURL {
-       background-image: url('../../icon/externalURL1.svg');
+       background-image: url('../icon/externalURL1.svg');
        background-position: right center;
        background-repeat: no-repeat;
        padding-right: 17px;
@@ -367,7 +378,7 @@ img[src*='enable'] {
 
 .wcf-eMailLink,
 a[href^="mailto:"] {
-       background-image: url('../../icon/email1.svg');
+       background-image: url('../icon/email1.svg');
        background-position: left center;
        background-repeat: no-repeat;
        padding-left: 17px;
@@ -503,7 +514,7 @@ a[href^="mailto:"] {
 /* Badge Types */
 
 .wcf-badgeBorder { /* ToDo: Obsolete? */
-       border: @borderWidthBadge borderStyleBadge #ccc;
+       border: @borderWidthBadge @borderStyleBadge #ccc;
 }
 
 .wcf-badgeBlue {
@@ -723,12 +734,7 @@ table .wcf-label {
        -o-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
        box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
        
-       -webkit-transition: color background .1s ease;
-       -khtml-transition: color background .1s ease;
-       -moz-transition: color background .1s ease;
-       -ms-transition: color background .1s ease;
-       -o-transition: color background .1s ease;
-       transition: color background .1s ease;
+       .mxTransition1(color background, .1s, ease); /* This multiple shorthand format seems to be deprecated! */
 }
 
 .wcf-dropdown.open {
@@ -743,12 +749,7 @@ table .wcf-label {
        color: #ccc;
        cursor: pointer; 
        
-       -webkit-transition: color background .2s linear;
-       -khtml-transition: color background .2s linear;
-       -moz-transition: color background .2s linear;
-       -ms-transition: color background .2s linear;
-       -o-transition: color background .2s linear;
-       transition: color background .2s linear;
+       .mxTransition1(color background, .2s); /* This multiple shorthand format seems to be deprecated! */
 }
 
 .wcf-dropdown > div {
@@ -896,12 +897,7 @@ nav.wcf-topMenu {
        -o-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
        box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
        
-       -webkit-transition: background .2s linear;
-       -khtml-transition: background .2s linear;
-       -moz-transition: background .2s linear;
-       -ms-transition: background .2s linear;
-       -o-transition: background .2s linear;
-       transition: background .2s linear;
+       .mxTransition1(background, .2s);
        
        -webkit-animation-name: showTopMenu;
        -webkit-animation-duration: .3s;
@@ -946,7 +942,8 @@ nav.wcf-topMenu {
                top: auto;
        }
 }
-@-moz-keyframes showTopMenu {
+/* LESS doesn't like that! Wtf? 
+@-khtml-keyframes showTopMenu {
        0% {
                opacity: 0;
                top: -50px;
@@ -962,8 +959,8 @@ nav.wcf-topMenu {
                top: auto;
        }
 }
-/* LESS doesn't like that! Wtf? 
-@-khtml-keyframes showTopMenu {
+*/
+@-moz-keyframes showTopMenu {
        0% {
                opacity: 0;
                top: -50px;
@@ -979,7 +976,6 @@ nav.wcf-topMenu {
                top: auto;
        }
 }
-*/
 @-ms-keyframes showTopMenu {
        0% {
                opacity: 0;
@@ -1088,7 +1084,7 @@ nav.wcf-topMenu {
 /* ToDo: Top-Menu Dropdown Caption */
 
 .wcf-topMenu > div > ul > li > .wcf-dropdownCaption {
-       background-image: url('../../icon/dropdown2.svg');
+       background-image: url('../icon/dropdown2.svg');
        background-position: 97% center;
        background-repeat: no-repeat;
        padding-right: 15px !important;
@@ -1224,13 +1220,7 @@ nav.wcf-topMenu {
        -o-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
        box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
        
-       -webkit-transition: background .2s linear;
-       -khtml-transition: background .2s linear;
-       -moz-transition: background .2s linear;
-       -ms-transition: background .2s linear;
-       -o-transition: background .2s linear;
-       transition: background .2s linear;
-       
+       .mxTransition1(background, .2s);
 }
 
 .wcf-search:hover {
@@ -1637,12 +1627,7 @@ section.wcf-content {
        -o-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
        box-shadow: 0 0 5px rgba(0, 0, 0, .1);*/
        
-       -webkit-transition: margin .1s ease;
-       -khtml-transition: margin .1s ease;
-       -moz-transition: margin .1s ease;
-       -ms-transition: margin .1s ease;
-       -o-transition: margin .1s ease;
-       transition: margin .1s ease;
+       .mxTransition1(margin, .1s, ease);
 }
 
 section.wcf-content:after {
@@ -1712,12 +1697,7 @@ section.wcf-content:after {
        overflow: hidden;
        z-index: 10;
        
-       -webkit-transition: width .1s ease;
-       -khtml-transition: width .1s ease;
-       -moz-transition: width .1s ease;
-       -ms-transition: width .1s ease;
-       -o-transition: width .1s ease;
-       transition: width .1s ease;
+       .mxTransition1(width, .1s, ease)
 }
 
 /* Toggle for sidebar orientation (options: left|right|top|bottom) */
@@ -1805,58 +1785,48 @@ section.wcf-content:after {
 
 .left .wcf-collapsibleSidebarButton {
        border-right: @borderWidthButton @borderStyleButton darken(@backColor1, 10%);
-       background-image: url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg');
+       background-image: url('../icon/arrowLeft1.svg'), url('../icon/arrowLeft1.svg');
        left: 250px;
        
-       -webkit-transition: left .1s ease;
-       -khtml-transition: left .1s ease;
-       -moz-transition: left .1s ease;
-       -ms-transition: left .1s ease;
-       -o-transition: left .1s ease;
-       transition: left .1s ease;
+       .mxTransition1(left, .1s, ease)
 }
 
 .left .wcf-collapsibleSidebarButton span {
-       background-image: url('../../icon/arrowLeft1.svg');
+       background-image: url('../icon/arrowLeft1.svg');
 }
 
 .right .wcf-collapsibleSidebarButton {
        border-left: @borderWidthButton @borderStyleButton darken(@backColor1, 10%);
-       background-image: url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg');
+       background-image: url('../icon/arrowRight1.svg'), url('../icon/arrowRight1.svg');
        right: 250px;
        
-       -webkit-transition: right .1s ease;
-       -khtml-transition: right .1s ease;
-       -moz-transition: right .1s ease;
-       -ms-transition: right .1s ease;
-       -o-transition: right .1s ease;
-       transition: right .1s ease;
+       .mxTransition1(wight, .1s, ease)
 }
 
 .right .wcf-collapsibleSidebarButton span {
-       background-image: url('../../icon/arrowRight1.svg');
+       background-image: url('../icon/arrowRight1.svg');
 }
 
 /* Collapsed (Left) */
 
 .left .collapsed .wcf-collapsibleSidebarButton {
-       background-image: url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg');
+       background-image: url('../icon/arrowRight1.svg'), url('../icon/arrowRight1.svg');
        left: 0;
 }
 
 .left .collapsed .wcf-collapsibleSidebarButton span {
-       background-image: url('../../icon/arrowRight1.svg');
+       background-image: url('../icon/arrowRight1.svg');
 }
 
 /* Collapsed (Right) */
 
 .right .collapsed .wcf-collapsibleSidebarButton {
-       background-image: url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg');
+       background-image: url('../icon/arrowLeft1.svg'), url('../icon/arrowLeft1.svg');
        right: 0;
 }
 
 .right .collapsed .wcf-collapsibleSidebarButton span {
-       background-image: url('../../icon/arrowLeft1.svg');
+       background-image: url('../icon/arrowLeft1.svg');
 }
 
 
@@ -1887,7 +1857,7 @@ section.wcf-content:after {
 }
 
 .wcf-sidebarContent > .collapsibleMenus > h1 {
-       background-image: url('../../icon/arrowRight.svg');
+       background-image: url('../icon/arrowRight.svg');
        background-position: 15px center;
        background-size: 16px;
        background-repeat: no-repeat;
@@ -1920,7 +1890,7 @@ section.wcf-content:after {
 }
 
 .wcf-sidebarContent > .collapsibleMenus h1.activeMenuItem {
-       background-image: url('../../icon/arrowDown.svg');
+       background-image: url('../icon/arrowDown.svg');
 }
 
 @media screen and (min-width: 480px), screen and (min-device-width: 480px) {
@@ -2397,12 +2367,7 @@ select[multiple] {
        -o-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
        box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
        
-       -webkit-transition: background-color, border .2s linear;
-       -khtml-transition: background-color, border .2s linear;
-       -moz-transition: background-color, border .2s linear;
-       -ms-transition: background-color, border .2s linear;
-       -o-transition: background-color, border .2s linear;
-       transition: background-color, border .2s linear;
+       .mxTransition1(background-color border, 2s); /* This multiple shorthand format seems to be deprecated! */
 }
 
 /* Hover State */
@@ -2647,7 +2612,7 @@ input[type=search] {
 }
 
 .wcf-preInput .wcf-dropdownCaption span.active {
-       background-image: url('../../icon/dropdown1.svg');
+       background-image: url('../icon/dropdown1.svg');
        background-position: right center;
        background-repeat: no-repeat;
        padding-right: 10px;
@@ -2659,7 +2624,7 @@ input[type=search] {
 
 .wcf-preInput .wcf-dropdown > li.missingValue { /* ToDo */
        /* color: #990; */
-       background-image: url('../../icon/systemWarning.svg');
+       background-image: url('../icon/systemWarning.svg');
        background-size: 16px;
        background-position: 95% center;
        background-repeat: no-repeat;
@@ -3126,12 +3091,7 @@ fieldset ~ .wcf-tabMenuContainer .wcf-tabMenu {
        background-color: @backColor1;
        padding: 2px 10px;
        
-       -webkit-transition: color .1s linear;
-       -khtml-transition: color .1s linear;
-       -moz-transition: color .1s linear;
-       -ms-transition: color .1s linear;
-       -o-transition: color .1s linear;
-       transition: color .1s linear;
+       .mxTransition1;
 }
 
 .wcf-menu ul li:not(.ui-state-active) a:hover {
@@ -3244,12 +3204,7 @@ fieldset ~ .wcf-tabMenuContainer .wcf-tabMenu {
        position: relative;
        max-width: 30%;
        
-       -webkit-transition: max-width .2s linear;
-       -khtml-transition: max-width .2s linear;
-       -moz-transition: max-width .2s linear;
-       -ms-transition: max-width .2s linear;
-       -o-transition: max-width .2s linear;
-       transition: max-width .2s linear;
+       .mxTransition1(max-width, .2s);
 }
 
 .wcf-breadcrumbs > ul > li:hover {
@@ -3300,7 +3255,7 @@ fieldset ~ .wcf-tabMenuContainer .wcf-tabMenu {
 
 .wcf-breadcrumbs > ul > li:first-child a {
        border-radius: 5px 0 0 5px;
-       background-image: url('../../icon/home1.svg');
+       background-image: url('../icon/home1.svg');
        background-position: 7px center;
        background-repeat: no-repeat;
        background-size: 16px;
@@ -3365,12 +3320,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;
-       transition: background .2s linear;
+       .mxTransition1(background, .2s);
 }
 
 thead th a {
@@ -3449,12 +3399,7 @@ tbody td {
        border-right: 1px @borderStyle rgba(255, 255, 255, .3);
        padding: 5px;
        
-       -webkit-transition: background .1s linear;
-       -khtml-transition: background .1s linear;
-       -moz-transition: background .1s linear;
-       -ms-transition: background .1s linear;
-       -o-transition: background .1s linear;
-       transition: background .1s linear;
+       .mxTransition1(background);
 }
 
 tbody td:last-child {
@@ -3703,12 +3648,7 @@ tr .columnIcon img {
        max-width: 250px;
        opacity: 0;
        
-       -webkit-transition: opacity .2s linear;
-       -khtml-transition: opacity .2s linear;
-       -moz-transition: opacity .2s linear;
-       -ms-transition: opacity .2s linear;
-       -o-transition: opacity .2s linear;
-       transition: opacity .2s linear;
+       .mxTransition1(opacity, .2s);
 }
 
 .wcf-pageNavigation ul li.children:hover .wcf-dropdown {
@@ -3790,12 +3730,12 @@ tr .columnIcon img {
        border: 1px @borderStyle #9be;
        background-color: #def;
        
-       background-image: url('../../icon/systemInfo.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
-       background-image: url('../../icon/systemInfo.svg'), -khtml-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
-       background-image: url('../../icon/systemInfo.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
-       background-image: url('../../icon/systemInfo.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
-       background-image: url('../../icon/systemInfo.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
-       background-image: url('../../icon/systemInfo.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
+       background-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;
@@ -3807,12 +3747,12 @@ tr .columnIcon img {
        border: 1px @borderStyle #0c0;
        background-color: #efe;
        
-       background-image: url('../../icon/systemSuccess.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-       background-image: url('../../icon/systemSuccess.svg'), -khtml-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-       background-image: url('../../icon/systemSuccess.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-       background-image: url('../../icon/systemSuccess.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-       background-image: url('../../icon/systemSuccess.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-       background-image: url('../../icon/systemSuccess.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+       background-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;
@@ -3825,12 +3765,12 @@ tr .columnIcon img {
        border: 1px @borderStyle #cc0;
        background-color: #ffd;
        
-       background-image: url('../../icon/systemWarning.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-       background-image: url('../../icon/systemWarning.svg'), -khtml-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-       background-image: url('../../icon/systemWarning.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-       background-image: url('../../icon/systemWarning.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-       background-image: url('../../icon/systemWarning.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-       background-image: url('../../icon/systemWarning.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+       background-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;
@@ -3842,12 +3782,12 @@ tr .columnIcon img {
        border: 1px @borderStyle #f99;
        background-color: #fee;
        
-       background-image: url('../../icon/systemError.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-       background-image: url('../../icon/systemError.svg'), -khtml-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-       background-image: url('../../icon/systemError.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-       background-image: url('../../icon/systemError.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-       background-image: url('../../icon/systemError.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-       background-image: url('../../icon/systemError.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+       background-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;
@@ -3863,7 +3803,7 @@ tr .columnIcon img {
        border: 1px @borderStyle #f99;
        .mxBorderRadius(7px);
        background-color: rgba(255, 238, 238, 1);
-       background-image: url('../../icon/systemError.svg');
+       background-image: url('../icon/systemError.svg');
        background-size: 16px;
        background-position: 5px center;
        background-repeat: no-repeat;
@@ -3931,12 +3871,7 @@ tr .columnIcon img {
        width: auto;
        z-index: 500;
        
-       -webkit-transition: top .5s linear;
-       -khtml-transition: top .5s linear;
-       -moz-transition: top .5s linear;
-       -ms-transition: top .5s linear;
-       -o-transition: top .5s linear;
-       transition: top .5s linear;
+       .mxTransition1(top, .5s);
 }
 
 .wcf-systemNotification.open {
@@ -4007,7 +3942,7 @@ tr .columnIcon img {
 }
 
 .wcf-dialogCloseButton {
-       background-image: url('../../icon/delete2.svg');
+       background-image: url('../icon/delete2.svg');
        background-size: 32px;
        background-position: top left;
        background-repeat: no-repeat;
@@ -4090,7 +4025,7 @@ tr .columnIcon img {
 
 .wcf-overlayLoading {
        background-color: @backColor1;
-       background-image: url('../../icon/spinner1.svg');
+       background-image: url('../icon/spinner1.svg');
        background-position: center center;
        background-size: 32px;
        background-repeat: no-repeat;
@@ -4210,7 +4145,7 @@ tr .columnIcon img {
 .wcf-clipboardEditor > ul > li span {
        text-decoration: none !important;
        cursor: pointer;
-       background-image: url('../../icon/dropdown1.svg');
+       background-image: url('../icon/dropdown1.svg');
        background-position: right center;
        background-repeat: no-repeat;
        margin-right: 5px;
@@ -4370,10 +4305,10 @@ button:not([disabled]):active {
 /* 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);
+               -khtml-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);
+               -khtml-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
        }
 }
 */
@@ -4757,12 +4692,7 @@ button[disabled] {
        height: 150px;
        overflow: hidden;
        
-       -webkit-transition: background, border, color .1s linear;
-       -khtml-transition: background, border, color .1s linear;
-       -moz-transition: background, border, color .1s linear;
-       -ms-transition: background, border, color .1s linear;
-       -o-transition: background, border, color .1s linear;
-       transition: background, border, color .1s linear;
+       .mxTransition1(background border color); /* This multiple shorthand format seems to be deprecated! */
 }
 
 .wcf-infoPackagePlugin a {
@@ -4827,12 +4757,7 @@ button[disabled] {
        width: 139px;
        opacity: 0;
        
-       -webkit-transition: opacity .1s linear;
-       -khtml-transition: opacity .1s linear;
-       -moz-transition: opacity .1s linear;
-       -ms-transition: opacity .1s linear;
-       -o-transition: opacity .1s linear;
-       transition: opacity .1s linear;
+       .mxTransition1(opacity);
 }
 
 .wcf-infoPackagePlugin:hover > div > a > small {
@@ -4851,12 +4776,7 @@ button[disabled] {
        .wcf-infoPackagePlugin footer nav {
                opacity: 0;
                
-               -webkit-transition: opacity .1s linear;
-               -khtml-transition: opacity .1s linear;
-               -moz-transition: opacity .1s linear;
-               -ms-transition: opacity .1s linear;
-               -o-transition: opacity .1s linear;
-               transition: opacity .1s linear;
+               .mxTransition1(opacity);
        }
        
        .wcf-infoPackageApplication:hover footer nav,