From 0b59e7990a28d264432a644a95bff9b6646efa8a Mon Sep 17 00:00:00 2001 From: Luzifr Date: Tue, 13 Mar 2012 20:48:15 +0100 Subject: [PATCH] LESS Update (still work in progress!) --- wcfsetup/install/files/style/wcf.less | 272 +++++++++----------------- 1 file changed, 96 insertions(+), 176 deletions(-) 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, -- 2.20.1