From: Luzifr <szekely@woltlab.com>
Date: Tue, 13 Mar 2012 19:48:15 +0000 (+0100)
Subject: LESS Update (still work in progress!)
X-Git-Tag: 2.0.0_Beta_1~1237
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=0b59e7990a28d264432a644a95bff9b6646efa8a;p=GitHub%2FWoltLab%2FWCF.git

LESS Update (still work in progress!)
---

diff --git a/wcfsetup/install/files/style/wcf.less b/wcfsetup/install/files/style/wcf.less
index 9cd6ae6168..236a42caa8 100644
--- 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,