From 6548cf68417771349f8017311b1f38e49e21c13d Mon Sep 17 00:00:00 2001 From: j <0x006A@0x2620.org> Date: Thu, 8 Aug 2013 14:21:44 +0200 Subject: [PATCH] add -ms css prefix, move declaration without prefix to end --- index.js | 1 + source/Ox.UI/Ox.UI.js | 3 +- source/Ox.UI/css/Ox.UI.css | 74 ++++++++- source/Ox.UI/css/theme.css | 235 +++++++++++++++++++++++++--- source/Ox.UI/js/Core/LoadingIcon.js | 6 +- 5 files changed, 291 insertions(+), 28 deletions(-) diff --git a/index.js b/index.js index c1474925..e932aab9 100644 --- a/index.js +++ b/index.js @@ -365,6 +365,7 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test( loadingIcon.style.MSTransform = css; loadingIcon.style.OTransform = css; loadingIcon.style.WebkitTransform = css; + loadingIcon.style.transform = css; } else { clearInterval(interval); } diff --git a/source/Ox.UI/Ox.UI.js b/source/Ox.UI/Ox.UI.js index 3b3bd754..001321ec 100644 --- a/source/Ox.UI/Ox.UI.js +++ b/source/Ox.UI/Ox.UI.js @@ -156,7 +156,8 @@ Ox.load.UI = function(options, callback) { element.css({ MozTransform: 'rotate(' + deg + 'deg)', OTransform: 'rotate(' + deg + 'deg)', - WebkitTransform: 'rotate(' + deg + 'deg)' + WebkitTransform: 'rotate(' + deg + 'deg)', + transform: 'rotate(' + deg + 'deg)' }); }, 83); }); diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index ab3a4173..b5b7e362 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -21,8 +21,10 @@ body { cursor: default; overflow: hidden; -moz-user-select: none; + -ms-user-select: none; -o-user-select: none; -webkit-user-select: none; + user-select: none; } code, pre { font-family: Menlo, Monaco, DejaVu Sans Mono, Lucida Console, Consolas, Bitstream Vera Sans Mono, monospace; @@ -41,8 +43,10 @@ h2, h3, h4, h5, h6 { } img { -moz-user-drag: none; + -ms-user-drag: none; -o-user-drag: none; -webkit-user-drag: none; + user-drag: none; } ol, ul { padding-left: 1.5em; @@ -75,8 +79,10 @@ td { .OxSelectable { cursor: text; -moz-user-select: text; + -ms-user-select: text; -o-user-select: text; -webkit-user-select: text; + user-select: text; } .OxSelectable * { cursor: text; @@ -84,8 +90,10 @@ td { body.OxDragging .OxSelectable { cursor: default; -moz-user-select: none; + -ms-user-select: none; -o-user-select: none; -webkit-user-select: none; + user-select: none; } body.OxDragging .OxSelectable * { cursor: default; @@ -616,14 +624,18 @@ input[type=button], input[type=reset], input[type=submit] { -moz-box-sizing: content-box; + -ms-box-sizing: content-box; -o-box-sizing: content-box; -webkit-box-sizing: content-box; + box-sizing: content-box; } input[type=image] { cursor: default; -moz-user-select: none; + -ms-user-select: none; -o-user-select: none; -webkit-user-select: none; + user-select: none; } input:focus, textarea:focus { @@ -635,14 +647,18 @@ input.OxXlarge { font-size: 19px; padding: 0 12px 0 12px; -moz-border-radius: 14px; + -ms-border-radius: 14px; -webkit-border-radius: 14px; + border-radius: 14px; } input.OxLarge { height: 22px; font-size: 16px; padding: 0 10px 0 10px; -moz-border-radius: 12px; + -ms-border-radius: 12px; -webkit-border-radius: 12px; + border-radius: 12px; } */ input.OxLarge { @@ -735,8 +751,10 @@ OxButton border: 1px solid rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + -ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -o-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + box-shadow: 0 0 0 rgba(0, 0, 0, 0); } /* -------------------------------------------------------------------------------- @@ -1017,8 +1035,10 @@ OxPicker z-index: 13; border-radius: 0 8px 8px 8px; -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75); + -ms-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75); -o-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75); -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75); } .OxPicker > div:first-child { background: rgb(240, 240, 240); @@ -1069,6 +1089,8 @@ OxRange -webkit-user-select: none; -o-user-select: none; -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .OxRange > .OxTrack > div > img.OxFirstChild { border-top-left-radius: 7px; @@ -1237,8 +1259,10 @@ Images .OxReflection > img { -moz-transform: scaleY(-1); + -ms-transform: scaleY(-1); -o-transform: scaleY(-1); -webkit-transform: scaleY(-1); + transform: scaleY(-1); } /* @@ -1368,6 +1392,7 @@ Lists cursor: pointer; border-radius: 4px; //-moz-user-select: text; + //-ms-user-select: text; //-o-user-select: text; //-webkit-user-select: text; } @@ -1395,6 +1420,7 @@ Lists .OxTableList .OxBar { //z-index: 10; //-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75); + //-ms-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75); //-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75); } .OxTableList .OxHead { @@ -1665,8 +1691,10 @@ Menus .OxMainMenu { z-index: 9; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); + -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .OxMainMenu.OxLarge { height: 24px; @@ -1911,8 +1939,10 @@ Panels } .OxCollapsePanel > .OxBar > .OxExtras > .OxSelect.OxFocus { -moz-box-shadow: 0 0 0; + -ms-box-shadow: 0 0 0; -o-box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0; + box-shadow: 0 0 0; } @@ -1951,39 +1981,47 @@ Panels } .OxSplitPanel_ { - display: box; display: -moz-box; + display: -ms-box; display: -o-box; display: -webkit-box; + display: box; overflow: hidden; - box-flex: 0; - -mox-box-flex: 0; + -moz-box-flex: 0; + -ms-box-flex: 0; -webkit-box-flex: 0; + box-flex: 0; } .OxSplitPanel_.OxHorizontal { - box-orient: horizontal; -moz-box-orient: horizontal; + -ms-box-orient: horizontal; -o-box-orient: horizontal; -webkit-box-orient: horizontal; + box-orient: horizontal; } .OxSplitPanel_.OxVertical { - box-orient: vertical; -moz-box-orient: vertical; + -ms-box-orient: vertical; -o-box-orient: vertical; -webkit-box-orient: vertical; + box-orient: vertical; } .OxSplitPanel_ > * { - box-flex: 0; - -mox-box-flex: 0; + -moz-box-flex: 0; + -ms-box-flex: 0; -webkit-box-flex: 0; + box-flex: 0; } .OxSplitPanel_ > .OxSeparator { display: -webkit-box; + display: -moz-box; + display: box; position: relative; z-index: 2; } .OxSplitPanel_ > .OxSeparator > * { -webkit-box-flex: 0; + box-flex: 0; } .OxSplitPanel_ > .OxSeparator > .OxLine { background-color: black; @@ -2030,8 +2068,10 @@ Requests .OxLoadingIcon { opacity: 0; -moz-user-select: none; + -ms-user-select: none; -o-user-select: none; -webkit-user-select: none; + user-select: none; } .OxLoadingIcon.OxLarge { @@ -2120,16 +2160,20 @@ SyntaxHightlighter text-align: right; cursor: default; -moz-user-select: none; + -ms-user-select: none; -o-user-select: none; -webkit-user-select: none; + user-select: none; } .OxSyntaxHighlighter > .OxSourceCode { white-space: nowrap; } .OxSyntaxHighlighter > .OxSourceCode .OxLinebreak { //-moz-user-select: none; + //-ms-user-select: none; //-o-user-select: none; //-webkit-user-select: none; + //user-select: none; } /* @@ -2248,8 +2292,10 @@ Video overflow: hidden; z-index: 7; -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); + -ms-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); -o-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); + box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } .OxLargeVideoTimeline .OxSubtitle.OxHighlight { border-color: rgb(255, 255, 0); @@ -2338,8 +2384,10 @@ Video } .OxVideoPlayer.OxFocus { -moz-box-shadow: 0 0 2px rgb(128, 128, 128); + -ms-box-shadow: 0 0 2px rgb(128, 128, 128); -o-box-shadow: 0 0 2px rgb(128, 128, 128); -webkit-box-shadow: 0 0 2px rgb(128, 128, 128); + box-shadow: 0 0 2px rgb(128, 128, 128); } .OxVideoPlayer .OxBar.OxControls > * { @@ -2369,13 +2417,17 @@ Video .OxVideoPlayer .OxInput { background: transparent; -moz-box-shadow: 0 0 0; + -ms-box-shadow: 0 0 0; -o-box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0; + box-shadow: 0 0 0; } .OxVideoPlayer div.OxInput.OxFocus { -moz-box-shadow: 0 0 0; + -ms-box-shadow: 0 0 0; -o-box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0; + box-shadow: 0 0 0; } .OxVideoPlayer input.OxInput { height: 16px; @@ -2566,13 +2618,17 @@ Video background-color: transparent; background-image: none; -moz-box-shadow: 0 0 0; + -ms-box-shadow: 0 0 0; -o-box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0; + box-shadow: 0 0 0; } .OxVideoPlayer div.OxInput.OxFocus { -moz-box-shadow: 0 0 0; + -ms-box-shadow: 0 0 0; -o-box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0; + box-shadow: 0 0 0; } @@ -2590,13 +2646,17 @@ Video .OxVideoTimelinePlayer div.OxPositionInput { background: transparent; -moz-box-shadow: 0 0 0; + -ms-box-shadow: 0 0 0; -o-box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0; + box-shadow: 0 0 0; } .OxVideoTimelinePlayer div.OxPositionInput.OxFocus { -moz-box-shadow: 0 0 0; -o-box-shadow: 0 0 0; + -ms-box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0; + box-shadow: 0 0 0; } .OxVideoTimelinePlayer .OxPositionInput > input.OxInput { height: 16px; diff --git a/source/Ox.UI/css/theme.css b/source/Ox.UI/css/theme.css index e154cc04..1a267d1a 100644 --- a/source/Ox.UI/css/theme.css +++ b/source/Ox.UI/css/theme.css @@ -7,6 +7,9 @@ body.$themeClass:fullscreen { body.$themeClass:-moz-full-screen { background-color: $bodyBackground; } +body.$themeClass:-ms-full-screen { + background-color: $bodyBackground; +} body.$themeClass:-webkit-full-screen { background-color: $bodyBackground; } @@ -19,20 +22,26 @@ body.$themeClass:-webkit-full-screen { } .$themeClass .OxHighlight { background-image: -moz-linear-gradient(top, $bodyHighlightGradient); + background-image: -ms-linear-gradient(top, $bodyHighlightGradient); background-image: -o-linear-gradient(top, $bodyHighlightGradient); background-image: -webkit-linear-gradient(top, $bodyHighlightGradient); + background-image: linear-gradient(top, $bodyHighlightGradient); color: $bodyHighlightColor; } .$themeClass .OxSpecialLink { background-image: -moz-linear-gradient(top, $bodySpecialLinkGradient); + background-image: -ms-linear-gradient(top, $bodySpecialLinkGradient); background-image: -o-linear-gradient(top, $bodySpecialLinkGradient); background-image: -webkit-linear-gradient(top, $bodySpecialLinkGradient); + background-image: linear-gradient(top, $bodySpecialLinkGradient); color: $bodySpecialLinkColor; } .$themeClass .OxSpecialLink.OxActive { background-image: -moz-linear-gradient(top, $bodySpecialLinkActiveGradient); + background-image: -ms-linear-gradient(top, $bodySpecialLinkActiveGradient); background-image: -o-linear-gradient(top, $bodySpecialLinkActiveGradient); background-image: -webkit-linear-gradient(top, $bodySpecialLinkActiveGradient); + background-image: linear-gradient(top, $bodySpecialLinkActiveGradient); color: $bodySpecialLinkActiveColor; } .$themeClass .OxBright { @@ -52,17 +61,25 @@ body.$themeClass:-webkit-full-screen { background-image: -moz-linear-gradient(45deg, $gridGradient[1] 25%, transparent 25%, transparent 75%, $gridGradient[1] 75%, $gridGradient[1]), -moz-linear-gradient(45deg, $gridGradient[1] 25%, transparent 25%, transparent 75%, $gridGradient[1] 75%, $gridGradient[1]); + background-image: + -ms-linear-gradient(45deg, $gridGradient[1] 25%, transparent 25%, transparent 75%, $gridGradient[1] 75%, $gridGradient[1]), + -ms-linear-gradient(45deg, $gridGradient[1] 25%, transparent 25%, transparent 75%, $gridGradient[1] 75%, $gridGradient[1]); background-image: -o-linear-gradient(45deg, $gridGradient[1] 25%, transparent 25%, transparent 75%, $gridGradient[1] 75%, $gridGradient[1]), -o-linear-gradient(45deg, $gridGradient[1] 25%, transparent 25%, transparent 75%, $gridGradient[1] 75%, $gridGradient[1]); background-image: -webkit-linear-gradient(45deg, $gridGradient[1] 25%, transparent 25%, transparent 75%, $gridGradient[1] 75%, $gridGradient[1]), -webkit-linear-gradient(45deg, $gridGradient[1] 25%, transparent 25%, transparent 75%, $gridGradient[1] 75%, $gridGradient[1]); + background-image: + linear-gradient(45deg, $gridGradient[1] 25%, transparent 25%, transparent 75%, $gridGradient[1] 75%, $gridGradient[1]), + linear-gradient(45deg, $gridGradient[1] 25%, transparent 25%, transparent 75%, $gridGradient[1] 75%, $gridGradient[1]); } .$themeClass .OxReflection > div { background-image: -moz-linear-gradient(top, $bodyReflectionGradient); + background-image: -ms-linear-gradient(top, $bodyReflectionGradient); background-image: -o-linear-gradient(top, $bodyReflectionGradient); background-image: -webkit-linear-gradient(top, $bodyReflectionGradient); + background-image: linear-gradient(top, $bodyReflectionGradient); } /* @@ -73,21 +90,27 @@ Bars .$themeClass .OxBar.OxHorizontal { background-image: -moz-linear-gradient(top, $barGradient); + background-image: -ms-linear-gradient(top, $barGradient); background-image: -o-linear-gradient(top, $barGradient); background-image: -webkit-linear-gradient(top, $barGradient); + background-image: linear-gradient(top, $barGradient); } .$themeClass .OxProgressbar { border-color: $formelementBorder; background-image: -moz-linear-gradient(top, $buttonGradient); + background-image: -ms-linear-gradient(top, $buttonGradient); background-image: -o-linear-gradient(top, $buttonGradient); background-image: -webkit-linear-gradient(top, $buttonGradient); + background-image: linear-gradient(top, $buttonGradient); } .$themeClass .OxProgressbar .OxTrack { border-color: $formelementBorder; background-image: -moz-linear-gradient(top, $inputGradient); + background-image: -ms-linear-gradient(top, $inputGradient); background-image: -o-linear-gradient(top, $inputGradient); background-image: -webkit-linear-gradient(top, $inputGradient); + background-image: linear-gradient(top, $inputGradient); } .$themeClass .OxProgressbar .OxProgress { border-color: $formelementBorder; @@ -99,6 +122,14 @@ Bars $progressbarBackground 75%, $progressbarBackground 100% ), -moz-linear-gradient(top, $buttonGradient); + background-image: + -ms-repeating-linear-gradient( + -45deg, transparent 0, transparent 25%, + $progressbarBackground 25%, $progressbarBackground 50%, + transparent 50%, transparent 75%, + $progressbarBackground 75%, $progressbarBackground 100% + ), + -ms-linear-gradient(top, $buttonGradient); background-image: -o-repeating-linear-gradient( -45deg, transparent 0, transparent 25%, @@ -115,6 +146,14 @@ Bars $progressbarBackground 75%, $progressbarBackground 100% ), -webkit-linear-gradient(top, $buttonGradient); + background-image: + repeating-linear-gradient( + -45deg, transparent 0, transparent 25%, + $progressbarBackground 25%, $progressbarBackground 50%, + transparent 50%, transparent 75%, + $progressbarBackground 75%, $progressbarBackground 100% + ), + linear-gradient(top, $buttonGradient); background-size: 32px 32px, 16px 16px; } .$themeClass .OxProgressbar .OxProgress.OxAnimate { @@ -126,6 +165,14 @@ Bars $progressbarAnimateBackground 75%, $progressbarAnimateBackground 100% ), -moz-linear-gradient(top, $buttonGradient); + background-image: + -ms-repeating-linear-gradient( + -45deg, transparent 0, transparent 25%, + $progressbarAnimateBackground 25%, $progressbarAnimateBackground 50%, + transparent 50%, transparent 75%, + $progressbarAnimateBackground 75%, $progressbarAnimateBackground 100% + ), + -ms-linear-gradient(top, $buttonGradient); background-image: -o-repeating-linear-gradient( -45deg, transparent 0, transparent 25%, @@ -142,6 +189,14 @@ Bars $progressbarAnimateBackground 75%, $progressbarAnimateBackground 100% ), -webkit-linear-gradient(top, $buttonGradient); + background-image: + repeating-linear-gradient( + -45deg, transparent 0, transparent 25%, + $progressbarAnimateBackground 25%, $progressbarAnimateBackground 50%, + transparent 50%, transparent 75%, + $progressbarAnimateBackground 75%, $progressbarAnimateBackground 100% + ), + linear-gradient(top, $buttonGradient); } .$themeClass .OxResizebar > .OxLine { @@ -156,14 +211,18 @@ Calendar .$themeClass .OxCalendar .OxTimeline > div.odd { background-image: -moz-linear-gradient(top, $calendarTimelineOddGradient); + background-image: -ms-linear-gradient(top, $calendarTimelineOddGradient); background-image: -o-linear-gradient(top, $calendarTimelineOddGradient); background-image: -webkit-linear-gradient(top, $calendarTimelineOddGradient); + background-image: linear-gradient(top, $calendarTimelineOddGradient); } .$themeClass .OxCalendar .OxTimeline > div.even { background-image: -moz-linear-gradient(top, $calendarTimelineEvenGradient); + background-image: -ms-linear-gradient(top, $calendarTimelineEvenGradient); background-image: -o-linear-gradient(top, $calendarTimelineEvenGradient); background-image: -webkit-linear-gradient(top, $calendarTimelineEvenGradient); + background-image: linear-gradient(top, $calendarTimelineEvenGradient); } .$themeClass .OxCalendar .OxBackground > div { @@ -184,23 +243,31 @@ Calendar } .$themeClass .OxEvent.OxDate { background-image: -moz-linear-gradient(top, $calendarEventDateGradient); + background-image: -ms-linear-gradient(top, $calendarEventDateGradient); background-image: -o-linear-gradient(top, $calendarEventDateGradient); background-image: -webkit-linear-gradient(top, $calendarEventDateGradient); + background-image: linear-gradient(top, $calendarEventDateGradient); } .$themeClass .OxEvent.OxOther { background-image: -moz-linear-gradient(top, $calendarEventOtherGradient); + background-image: -ms-linear-gradient(top, $calendarEventOtherGradient); background-image: -o-linear-gradient(top, $calendarEventOtherGradient); background-image: -webkit-linear-gradient(top, $calendarEventOtherGradient); + background-image: linear-gradient(top, $calendarEventOtherGradient); } .$themeClass .OxEvent.OxPerson { background-image: -moz-linear-gradient(top, $calendarEventPersonGradient); + background-image: -ms-linear-gradient(top, $calendarEventPersonGradient); background-image: -o-linear-gradient(top, $calendarEventPersonGradient); background-image: -webkit-linear-gradient(top, $calendarEventPersonGradient); + background-image: linear-gradient(top, $calendarEventPersonGradient); } .$themeClass .OxEvent.OxPlace { background-image: -moz-linear-gradient(top, $calendarEventPlaceGradient); + background-image: -ms-linear-gradient(top, $calendarEventPlaceGradient); background-image: -o-linear-gradient(top, $calendarEventPlaceGradient); background-image: -webkit-linear-gradient(top, $calendarEventPlaceGradient); + background-image: linear-gradient(top, $calendarEventPlaceGradient); } .$themeClass .OxCalendar .OxOverlay div:nth-child(odd) { @@ -215,8 +282,10 @@ Calendar .$themeClass .OxCalendar .OxEventControl { border-color: calendarControlBorder; background-image: -moz-linear-gradient(top, $calendarControlGradient); + background-image: -ms-linear-gradient(top, $calendarControlGradient); background-image: -o-linear-gradient(top, $calendarControlGradient); background-image: -webkit-linear-gradient(top, $calendarControlGradient); + background-image: linear-gradient(top, $calendarControlGradient); color: $calendarControlColor; } @@ -231,16 +300,19 @@ Dialog */ .$themeClass .OxDialog { - box-shadow: 0 2px 8px $dialogShadow; -moz-box-shadow: 0 2px 8px $dialogShadow; + -ms-box-shadow: 0 2px 8px $dialogShadow; -o-box-shadow: 0 2px 8px $dialogShadow; -webkit-box-shadow: 0 2px 8px $dialogShadow; + box-shadow: 0 2px 8px $dialogShadow; } .$themeClass .OxDialog .OxBar { background-image: -moz-linear-gradient(top, $dialogBarGradient); + background-image: -ms-linear-gradient(top, $dialogBarGradient); background-image: -o-linear-gradient(top, $dialogBarGradient); background-image: -webkit-linear-gradient(top, $dialogBarGradient); + background-image: linear-gradient(top, $dialogBarGradient); } .$themeClass .OxDialog .OxContent { @@ -251,8 +323,10 @@ Dialog } .$themeClass .OxDialog .OxReflection > div { background-image: -moz-linear-gradient(top, $dialogReflectionGradient); + background-image: -ms-linear-gradient(top, $dialogReflectionGradient); background-image: -o-linear-gradient(top, $dialogReflectionGradient); background-image: -webkit-linear-gradient(top, $dialogReflectionGradient); + background-image: linear-gradient(top, $dialogReflectionGradient); } .$themeClass .OxLayer { @@ -310,33 +384,42 @@ Forms .$themeClass div.OxInput, .$themeClass .OxSelect { background-image: -moz-linear-gradient(top, $buttonGradient); + background-image: -ms-linear-gradient(top, $buttonGradient); background-image: -o-linear-gradient(top, $buttonGradient); background-image: -webkit-linear-gradient(top, $buttonGradient); + background-image: linear-gradient(top, $buttonGradient); } .$themeClass div.OxInput.OxTextarea { background-color: transparent; } .$themeClass .OxButton:active { background-image: -moz-linear-gradient(top, $buttonActiveGradient); + background-image: -ms-linear-gradient(top, $buttonActiveGradient); background-image: -o-linear-gradient(top, $buttonActiveGradient); background-image: -webkit-linear-gradient(top, $buttonActiveGradient); + background-image: linear-gradient(top, $buttonActiveGradient); color: $buttonActiveColor; } .$themeClass .OxCheckbox:active { background-image: -moz-linear-gradient(top, $inputActiveGradient); + background-image: -ms-linear-gradient(top, $inputActiveGradient); background-image: -o-linear-gradient(top, $inputActiveGradient); background-image: -webkit-linear-gradient(top, $inputActiveGradient); + background-image: linear-gradient(top, $inputActiveGradient); } .$themeClass .OxButton:focus { - box-shadow: 0 0 2px $formelementFocusShadow; -moz-box-shadow: 0 0 2px $formelementFocusShadow; + -ms-box-shadow: 0 0 2px $formelementFocusShadow; -o-box-shadow: 0 0 2px $formelementFocusShadow; -webkit-box-shadow: 0 0 2px $formelementFocusShadow; + box-shadow: 0 0 2px $formelementFocusShadow; } .$themeClass .OxButton.OxDisabled { background-image: -moz-linear-gradient(top, $buttonDisabledGradient); + background-image: -ms-linear-gradient(top, $buttonDisabledGradient); background-image: -o-linear-gradient(top, $buttonDisabledGradient); background-image: -webkit-linear-gradient(top, $buttonDisabledGradient); + background-image: linear-gradient(top, $buttonDisabledGradient); color: $buttonDisabledColor; } .$themeClass .OxButton.OxSymbol, @@ -355,8 +438,10 @@ Forms .$themeClass .OxSelect.OxSelected, .$themeClass .OxCollapsePanel > .OxBar > .OxExtras > .OxSelect.OxSelected { background-image: -moz-linear-gradient(top, $buttonSelectedGradient); + background-image: -ms-linear-gradient(top, $buttonSelectedGradient); background-image: -o-linear-gradient(top, $buttonSelectedGradient); background-image: -webkit-linear-gradient(top, $buttonSelectedGradient); + background-image: linear-gradient(top, $buttonSelectedGradient); } .$themeClass .OxButton.OxSelected, .$themeClass .OxSelect.OxSelected:not(.OxColor) > .OxTitle, @@ -374,8 +459,10 @@ Forms .$themeClass .OxFileInput.OxDisabled > .OxBar { background-image: -moz-linear-gradient(top, $buttonDisabledGradient); + background-image: -ms-linear-gradient(top, $buttonDisabledGradient); background-image: -o-linear-gradient(top, $buttonDisabledGradient); background-image: -webkit-linear-gradient(top, $buttonDisabledGradient); + background-image: linear-gradient(top, $buttonDisabledGradient); } .$themeClass .OxFileInput.OxDisabled > .OxBar > div { color: $buttonDisabledColor @@ -398,25 +485,29 @@ Forms .$themeClass textarea, .$themeClass .OxTrack { background-image: -moz-linear-gradient(top, $inputGradient); + background-image: -ms-linear-gradient(top, $inputGradient); background-image: -o-linear-gradient(top, $inputGradient); background-image: -webkit-linear-gradient(top, $inputGradient); + background-image: linear-gradient(top, $inputGradient); } .$themeClass div.OxInput.OxError input { color: $inputErrorColor; } .$themeClass .OxInput:focus { border-color: $inputFocusBorder; - box-shadow: inset 0 0 2px $inputFocusShadow; -moz-box-shadow: inset 0 0 2px $inputFocusShadow; + -ms-box-shadow: inset 0 0 2px $inputFocusShadow; -o-box-shadow: inset 0 0 2px $inputFocusShadow; -webkit-box-shadow: inset 0 0 2px $inputFocusShadow; + box-shadow: inset 0 0 2px $inputFocusShadow; } .$themeClass div.OxInput.OxFocus, .$themeClass .OxSelect.OxFocus { - box-shadow: 0 0 2px $formelementFocusShadow; -moz-box-shadow: 0 0 2px $formelementFocusShadow; + -ms-box-shadow: 0 0 2px $formelementFocusShadow; -o-box-shadow: 0 0 2px $formelementFocusShadow; -webkit-box-shadow: 0 0 2px $formelementFocusShadow; + box-shadow: 0 0 2px $formelementFocusShadow; } /* FIXME: modern only? */ @@ -435,20 +526,26 @@ Forms .$themeClass input.OxCheckbox.OxDisabled, .$themeClass input.OxInput:disabled { background-image: -moz-linear-gradient(top, $inputDisabledGradient); + background-image: -ms-linear-gradient(top, $inputDisabledGradient); background-image: -o-linear-gradient(top, $inputDisabledGradient); background-image: -webkit-linear-gradient(top, $inputDisabledGradient); + background-image: linear-gradient(top, $inputDisabledGradient); } .$themeClass .OxLabelSelect > .OxTitle { border-color: $formelementBorder; background-image: -moz-linear-gradient(top, $buttonGradient); + background-image: -ms-linear-gradient(top, $buttonGradient); background-image: -o-linear-gradient(top, $buttonGradient); background-image: -webkit-linear-gradient(top, $buttonGradient); + background-image: linear-gradient(top, $buttonGradient); } .$themeClass .OxLabelSelect.OxSelected > .OxTitle { background-image: -moz-linear-gradient(top, $buttonSelectedGradient); + background-image: -ms-linear-gradient(top, $buttonSelectedGradient); background-image: -o-linear-gradient(top, $buttonSelectedGradient); background-image: -webkit-linear-gradient(top, $buttonSelectedGradient); + background-image: linear-gradient(top, $buttonSelectedGradient); } .$themeClass .OxFileInput > .OxBar, @@ -462,12 +559,15 @@ Forms .$themeClass .OxEditableContent.OxEditing { background-image: -moz-linear-gradient(top, $inputGradient); + background-image: -ms-linear-gradient(top, $inputGradient); background-image: -o-linear-gradient(top, $inputGradient); background-image: -webkit-linear-gradient(top, $inputGradient); - box-shadow: 0 0 2px $formelementFocusShadow; + background-image: linear-gradient(top, $inputGradient); -moz-box-shadow: 0 0 2px $formelementFocusShadow; + -ms-box-shadow: 0 0 2px $formelementFocusShadow; -o-box-shadow: 0 0 2px $formelementFocusShadow; -webkit-box-shadow: 0 0 2px $formelementFocusShadow; + box-shadow: 0 0 2px $formelementFocusShadow; } .$themeClass .OxEditableContent .OxHighlight @@ -489,28 +589,32 @@ Lists .$themeClass .OxInfoList .OxItem .OxIcon > img.OxLoading { border-color: $listIconLoadingBorder; background-image: -moz-linear-gradient(top, $listIconLoadingGradient); + background-image: -ms-linear-gradient(top, $listIconLoadingGradient); background-image: -o-linear-gradient(top, $listIconLoadingGradient); background-image: -webkit-linear-gradient(top, $listIconLoadingGradient); + background-image: linear-gradient(top, $listIconLoadingGradient); } .$themeClass .OxIconList .OxItem.OxSelected > .OxIcon > img, .$themeClass .OxIconList .OxItem.OxSelected > .OxIcon > .OxVideoPlayer, .$themeClass .OxInfoList .OxItem.OxSelected .OxIcon > img, .$themeClass .OxInfoList .OxItem.OxSelected .OxIcon > .OxVideoPlayer { border-color: $listIconSelectedBorder; - box-shadow: 0 0 4px $listIconSelectedShadow; -moz-box-shadow: 0 0 4px $listIconSelectedShadow; + -ms-box-shadow: 0 0 4px $listIconSelectedShadow; -o-box-shadow: 0 0 4px $listIconSelectedShadow; -webkit-box-shadow: 0 0 4px $listIconSelectedShadow; + box-shadow: 0 0 4px $listIconSelectedShadow; } .$themeClass .OxIconList.OxFocus .OxItem.OxSelected > .OxIcon > img, .$themeClass .OxIconList.OxFocus .OxItem.OxSelected > .OxIcon > .OxVideoPlayer, .$themeClass .OxInfoList.OxFocus .OxItem.OxSelected .OxIcon > img, .$themeClass .OxInfoList.OxFocus .OxItem.OxSelected .OxIcon > .OxVideoPlayer { border-color: $listIconFocusSelectedBorder; - box-shadow: 0 0 4px $listIconFocusSelectedShadow; -moz-box-shadow: 0 0 4px $listIconFocusSelectedShadow; + -ms-box-shadow: 0 0 4px $listIconFocusSelectedShadow; -o-box-shadow: 0 0 4px $listIconFocusSelectedShadow; -webkit-box-shadow: 0 0 4px $listIconFocusSelectedShadow; + box-shadow: 0 0 4px $listIconFocusSelectedShadow; } .$themeClass .OxIconList .OxItem > .OxText > div, .$themeClass .OxInfoList .OxItem .OxText > div { @@ -523,33 +627,39 @@ Lists .$themeClass .OxInfoList .OxItem.OxSelected .OxText > div:not(.OxSpecialTarget) { border-color: $listIconLabelSelectedBorder; background-image: -moz-linear-gradient(top, $listIconLabelSelectedGradient); + background-image: -ms-linear-gradient(top, $listIconLabelSelectedGradient); background-image: -o-linear-gradient(top, $listIconLabelSelectedGradient); background-image: -webkit-linear-gradient(top, $listIconLabelSelectedGradient); + background-image: linear-gradient(top, $listIconLabelSelectedGradient); color: $listItemSelectedColor; text-shadow: $listIconTextSelectedShadow -1px -1px 0, $listIconTextSelectedShadow -1px 1px 0, $listIconTextSelectedShadow 1px -1px 0, $listIconTextSelectedShadow 1px 1px 0; - box-shadow: 0 0 4px $listIconLabelSelectedShadow; -moz-box-shadow: 0 0 4px $listIconLabelSelectedShadow; + -ms-box-shadow: 0 0 4px $listIconLabelSelectedShadow; -o-box-shadow: 0 0 4px $listIconLabelSelectedShadow; -webkit-box-shadow: 0 0 4px $listIconLabelSelectedShadow; + box-shadow: 0 0 4px $listIconLabelSelectedShadow; } .$themeClass .OxIconList.OxFocus .OxItem.OxSelected > .OxText > div, .$themeClass .OxInfoList.OxFocus .OxItem.OxSelected .OxText > div:not(.OxSpecialTarget) { border-color: $listIconLabelFocusSelectedBorder; background-image: -moz-linear-gradient(top, $listIconLabelFocusSelectedGradient); + background-image: -ms-linear-gradient(top, $listIconLabelFocusSelectedGradient); background-image: -o-linear-gradient(top, $listIconLabelFocusSelectedGradient); background-image: -webkit-linear-gradient(top, $listIconLabelFocusSelectedGradient); + background-image: linear-gradient(top, $listIconLabelFocusSelectedGradient); color: $listItemFocusSelectedColor; text-shadow: $listIconTextFocusSelectedShadow -1px -1px 0, $listIconTextFocusSelectedShadow -1px 1px 0, $listIconTextFocusSelectedShadow 1px -1px 0, $listIconTextFocusSelectedShadow 1px 1px 0; - box-shadow: 0 0 4px $listIconLabelFocusSelectedShadow; -moz-box-shadow: 0 0 4px $listIconLabelFocusSelectedShadow; + -ms-box-shadow: 0 0 4px $listIconLabelFocusSelectedShadow; -o-box-shadow: 0 0 4px $listIconLabelFocusSelectedShadow; -webkit-box-shadow: 0 0 4px $listIconLabelFocusSelectedShadow; + box-shadow: 0 0 4px $listIconLabelFocusSelectedShadow; } .$themeClass .OxIconList .OxItem > .OxText > div > .OxInfo, .$themeClass .OxInfoList .OxItem .OxText > div > .OxInfo { @@ -568,10 +678,11 @@ Lists .$themeClass .OxInfoList .OxItem.OxSelected .OxInfoElement .OxText > div { border-color: transparent; background-image: none; - box-shadow: 0 0 0 transparent; -moz-box-shadow: 0 0 0 transparent; + -ms-box-shadow: 0 0 0 transparent; -o-box-shadow: 0 0 0 transparent; -webkit-box-shadow: 0 0 0 transparent; + box-shadow: 0 0 0 transparent; } .$themeClass .OxInfoList .OxItem.OxSelected .OxInfoElement .OxIcon > img, .$themeClass .OxInfoList .OxItem.OxSelected .OxInfoElement .OxIcon .OxVideoPlayer, @@ -581,17 +692,20 @@ Lists .$themeClass .OxInfoList.OxFocus .OxItem.OxSelected .OxInfoElement .OxText > div { border-color: transparent; background-image: none; - box-shadow: 0 0 0 transparent; -moz-box-shadow: 0 0 0 transparent; + -ms-box-shadow: 0 0 0 transparent; -o-box-shadow: 0 0 0 transparent; -webkit-box-shadow: 0 0 0 transparent; + box-shadow: 0 0 0 transparent; } .$themeClass .OxInfoList .OxItem.OxSelected .OxInfoElement .OxIcon > img.OxLoading, .$themeClass .OxInfoList.OxFocus .OxItem.OxSelected .OxInfoElement .OxIcon > img.OxLoading { border-color: $listIconLoadingBorder; background-image: -moz-linear-gradient(top, $listIconLoadingGradient); + background-image: -ms-linear-gradient(top, $listIconLoadingGradient); background-image: -o-linear-gradient(top, $listIconLoadingGradient); background-image: -webkit-linear-gradient(top, $listIconLoadingGradient); + background-image: linear-gradient(top, $listIconLoadingGradient); } @@ -601,56 +715,74 @@ Lists .$themeClass .OxCustomList .OxItem:nth-child(odd), .$themeClass .OxTableList .OxItem:nth-child(odd) { background-image: -moz-linear-gradient(top, $listItemOddGradient); + background-image: -ms-linear-gradient(top, $listItemOddGradient); background-image: -o-linear-gradient(top, $listItemOddGradient); background-image: -webkit-linear-gradient(top, $listItemOddGradient); + background-image: linear-gradient(top, $listItemOddGradient); } .$themeClass .OxCustomList .OxItem:nth-child(even), .$themeClass .OxTableList .OxItem:nth-child(even) { background-image: -moz-linear-gradient(top, $listItemEvenGradient); + background-image: -ms-linear-gradient(top, $listItemEvenGradient); background-image: -o-linear-gradient(top, $listItemEvenGradient); background-image: -webkit-linear-gradient(top, $listItemEvenGradient); + background-image: linear-gradient(top, $listItemEvenGradient); } .$themeClass .OxCustomList .OxItem.OxSelected:nth-child(odd), .$themeClass .OxTableList .OxItem.OxSelected:nth-child(odd) { background-image: -moz-linear-gradient(top, $listItemSelectedOddGradient); + background-image: -ms-linear-gradient(top, $listItemSelectedOddGradient); background-image: -o-linear-gradient(top, $listItemSelectedOddGradient); background-image: -webkit-linear-gradient(top, $listItemSelectedOddGradient); + background-image: linear-gradient(top, $listItemSelectedOddGradient); } .$themeClass .OxCustomList .OxItem.OxSelected:nth-child(even), .$themeClass .OxTableList .OxItem.OxSelected:nth-child(even) { background-image: -moz-linear-gradient(top, $listItemSelectedEvenGradient); + background-image: -ms-linear-gradient(top, $listItemSelectedEvenGradient); background-image: -o-linear-gradient(top, $listItemSelectedEvenGradient); background-image: -webkit-linear-gradient(top, $listItemSelectedEvenGradient); + background-image: linear-gradient(top, $listItemSelectedEvenGradient); } .$themeClass .OxCustomList .OxFocus .OxItem.OxSelected:nth-child(odd), .$themeClass .OxTableList.OxFocus .OxItem.OxSelected:nth-child(odd), .$themeClass .OxTableList .OxFocus .OxItem.OxSelected:nth-child(odd) { background-image: -moz-linear-gradient(top, $listItemFocusSelectedOddGradient); + background-image: -ms-linear-gradient(top, $listItemFocusSelectedOddGradient); background-image: -o-linear-gradient(top, $listItemFocusSelectedOddGradient); background-image: -webkit-linear-gradient(top, $listItemFocusSelectedOddGradient); + background-image: linear-gradient(top, $listItemFocusSelectedOddGradient); } .$themeClass .OxCustomList .OxFocus .OxItem.OxSelected:nth-child(even), .$themeClass .OxTableList.OxFocus .OxItem.OxSelected:nth-child(even), .$themeClass .OxTableList .OxFocus .OxItem.OxSelected:nth-child(even) { background-image: -moz-linear-gradient(top, $listItemFocusSelectedEvenGradient); + background-image: -ms-linear-gradient(top, $listItemFocusSelectedEvenGradient); background-image: -o-linear-gradient(top, $listItemFocusSelectedEvenGradient); background-image: -webkit-linear-gradient(top, $listItemFocusSelectedEvenGradient); + background-image: linear-gradient(top, $listItemFocusSelectedEvenGradient); } .$themeClass .OxTableList .OxItem.OxDroppable.OxDrop:nth-child(odd) .OxCell { background-image: -moz-linear-gradient(top, $listItemDropOddGradient); + background-image: -ms-linear-gradient(top, $listItemDropOddGradient); background-image: -o-linear-gradient(top, $listItemDropOddGradient); background-image: -webkit-linear-gradient(top, $listItemDropOddGradient); + background-image: linear-gradient(top, $listItemDropOddGradient); } .$themeClass .OxTableList .OxItem.OxDroppable.OxDrop:nth-child(even) .OxCell { background-image: -moz-linear-gradient(top, $listItemDropEvenGradient); + background-image: -ms-linear-gradient(top, $listItemDropEvenGradient); background-image: -o-linear-gradient(top, $listItemDropEvenGradient); background-image: -webkit-linear-gradient(top, $listItemDropEvenGradient); + background-image: linear-gradient(top, $listItemDropEvenGradient); } .$themeClass .OxTableList .OxHead .OxSelected { background-image: -moz-linear-gradient(top, $listHeadSelectedGradient); + background-image: -ms-linear-gradient(top, $listHeadSelectedGradient); background-image: -o-linear-gradient(top, $listHeadSelectedGradient); background-image: -webkit-linear-gradient(top, $listHeadSelectedGradient); + background-image: linear-gradient(top, $listHeadSelectedGradient); } .$themeClass .OxTableList .OxHead .OxSelected .OxTitle { color: $listHeadSelectedColor; @@ -692,8 +824,10 @@ Maps .$themeClass .OxMap .OxPlaceControl { border-color: $mapControlBorder; background-image: -moz-linear-gradient(top, $mapControlGradient); + background-image: -ms-linear-gradient(top, $mapControlGradient); background-image: -o-linear-gradient(top, $mapControlGradient); background-image: -webkit-linear-gradient(top, $mapControlGradient); + background-image: linear-gradient(top, $mapControlGradient); color: $mapControlColor; } @@ -715,36 +849,42 @@ Media } .$themeClass .OxMedia .OxReflection > div { background-image: -moz-linear-gradient(top, $mediaReflectionGradient); + background-image: -ms-linear-gradient(top, $mediaReflectionGradient); background-image: -o-linear-gradient(top, $mediaReflectionGradient); background-image: -webkit-linear-gradient(top, $mediaReflectionGradient); + background-image: linear-gradient(top, $mediaReflectionGradient); } .$themeClass .OxIconList.OxMedia .OxItem > .OxIcon > img.OxLoading, .$themeClass .OxInfoList.OxMedia .OxItem .OxIcon > img.OxLoading { border-color: $mediaListIconLoadingBorder; background-image: -moz-linear-gradient(top, $mediaListIconLoadingGradient); + background-image: -ms-linear-gradient(top, $mediaListIconLoadingGradient); background-image: -o-linear-gradient(top, $mediaListIconLoadingGradient); background-image: -webkit-linear-gradient(top, $mediaListIconLoadingGradient); + background-image: linear-gradient(top, $mediaListIconLoadingGradient); } .$themeClass .OxIconList.OxMedia .OxItem.OxSelected > .OxIcon > img, .$themeClass .OxIconList.OxMedia .OxItem.OxSelected > .OxIcon > .OxVideoPlayer, .$themeClass .OxInfoList.OxMedia .OxItem.OxSelected .OxIcon > img, .$themeClass .OxInfoList.OxMedia .OxItem.OxSelected .OxIcon > .OxVideoPlayer { border-color: $mediaListIconSelectedBorder; - box-shadow: 0 0 4px $mediaListIconSelectedShadow; -moz-box-shadow: 0 0 4px $mediaListIconSelectedShadow; + -ms-box-shadow: 0 0 4px $mediaListIconSelectedShadow; -o-box-shadow: 0 0 4px $mediaListIconSelectedShadow; -webkit-box-shadow: 0 0 4px $mediaListIconSelectedShadow; + box-shadow: 0 0 4px $mediaListIconSelectedShadow; } .$themeClass .OxIconList.OxMedia.OxFocus .OxItem.OxSelected > .OxIcon > img, .$themeClass .OxIconList.OxMedia.OxFocus .OxItem.OxSelected > .OxIcon > .OxVideoPlayer, .$themeClass .OxInfoList.OxMedia.OxFocus .OxItem.OxSelected .OxIcon > img, .$themeClass .OxInfoList.OxMedia.OxFocus .OxItem.OxSelected .OxIcon > .OxVideoPlayer { border-color: $mediaListIconFocusSelectedBorder; - box-shadow: 0 0 4px $mediaListIconFocusSelectedShadow; -moz-box-shadow: 0 0 4px $mediaListIconFocusSelectedShadow; + -ms-box-shadow: 0 0 4px $mediaListIconFocusSelectedShadow; -o-box-shadow: 0 0 4px $mediaListIconFocusSelectedShadow; -webkit-box-shadow: 0 0 4px $mediaListIconFocusSelectedShadow; + box-shadow: 0 0 4px $mediaListIconFocusSelectedShadow; } .$themeClass .OxIconList.OxMedia .OxItem > .OxText div, .$themeClass .OxInfoList.OxMedia .OxItem .OxText > div { @@ -758,33 +898,39 @@ Media .$themeClass .OxInfoList.OxMedia .OxItem.OxSelected .OxText > div:not(.OxSpecialTarget) { border-color: $mediaListIconLabelSelectedBorder; background-image: -moz-linear-gradient(top, $mediaListIconLabelSelectedGradient); + background-image: -ms-linear-gradient(top, $mediaListIconLabelSelectedGradient); background-image: -o-linear-gradient(top, $mediaListIconLabelSelectedGradient); background-image: -webkit-linear-gradient(top, $mediaListIconLabelSelectedGradient); + background-image: linear-gradient(top, $mediaListIconLabelSelectedGradient); color: $mediaListIconTextSelectedColor; text-shadow: $mediaListIconTextSelectedShadow -1px -1px 0, $mediaListIconTextSelectedShadow -1px 1px 0, $mediaListIconTextSelectedShadow 1px -1px 0, $mediaListIconTextSelectedShadow 1px 1px 0; - box-shadow: 0 0 4px $mediaListIconLabelSelectedShadow; -moz-box-shadow: 0 0 4px $mediaListIconLabelSelectedShadow; + -ms-box-shadow: 0 0 4px $mediaListIconLabelSelectedShadow; -o-box-shadow: 0 0 4px $mediaListIconLabelSelectedShadow; -webkit-box-shadow: 0 0 4px $mediaListIconLabelSelectedShadow; + box-shadow: 0 0 4px $mediaListIconLabelSelectedShadow; } .$themeClass .OxIconList.OxMedia.OxFocus .OxItem.OxSelected > .OxText > div, .$themeClass .OxInfoList.OxMedia.OxFocus .OxItem.OxSelected .OxText > div:not(.OxSpecialTarget) { border-color: $mediaListIconLabelFocusSelectedBorder; background-image: -moz-linear-gradient(top, $mediaListIconLabelFocusSelectedGradient); + background-image: -ms-linear-gradient(top, $mediaListIconLabelFocusSelectedGradient); background-image: -o-linear-gradient(top, $mediaListIconLabelFocusSelectedGradient); background-image: -webkit-linear-gradient(top, $mediaListIconLabelFocusSelectedGradient); + background-image: linear-gradient(top, $mediaListIconLabelFocusSelectedGradient); color: $mediaListIconTextFocusSelectedColor; text-shadow: $mediaListIconTextFocusSelectedShadow -1px -1px 0, $mediaListIconTextFocusSelectedShadow -1px 1px 0, $mediaListIconTextFocusSelectedShadow 1px -1px 0, $mediaListIconTextFocusSelectedShadow 1px 1px 0; - box-shadow: 0 0 4px $mediaListIconLabelFocusSelectedShadow; -moz-box-shadow: 0 0 4px $mediaListIconLabelFocusSelectedShadow; + -ms-box-shadow: 0 0 4px $mediaListIconLabelFocusSelectedShadow; -o-box-shadow: 0 0 4px $mediaListIconLabelFocusSelectedShadow; -webkit-box-shadow: 0 0 4px $mediaListIconLabelFocusSelectedShadow; + box-shadow: 0 0 4px $mediaListIconLabelFocusSelectedShadow; } .$themeClass .OxIconList.OxMedia .OxItem > .OxText > div > .OxInfo, .$themeClass .OxInfoList.OxMedia .OxItem .OxText > div > .OxInfo { @@ -806,17 +952,20 @@ Media .$themeClass .OxInfoList.OxMedia.OxFocus .OxItem.OxSelected .OxInfoElement .OxText > div { border-color: transparent; background-image: none; - box-shadow: 0 0 0 transparent; -moz-box-shadow: 0 0 0 transparent; + -ms-box-shadow: 0 0 0 transparent; -o-box-shadow: 0 0 0 transparent; -webkit-box-shadow: 0 0 0 transparent; + box-shadow: 0 0 0 transparent; } .$themeClass .OxInfoList.OxMedia .OxItem.OxSelected .OxInfoElement .OxIcon > img.OxLoading, .$themeClass .OxInfoList.OxMedia.OxFocus .OxItem.OxSelected .OxInfoElement .OxIcon > img.OxLoading { border-color: $listIconLoadingBorder; background-image: -moz-linear-gradient(top, $listIconLoadingGradient); + background-image: -ms-linear-gradient(top, $listIconLoadingGradient); background-image: -o-linear-gradient(top, $listIconLoadingGradient); background-image: -webkit-linear-gradient(top, $listIconLoadingGradient); + background-image: linear-gradient(top, $listIconLoadingGradient); } /* @@ -827,22 +976,27 @@ Menus .$themeClass .OxMainMenu > .OxTitle.OxSelected { background-image: -moz-linear-gradient(top, $barSelectedGradient); + background-image: -ms-linear-gradient(top, $barSelectedGradient); background-image: -o-linear-gradient(top, $barSelectedGradient); background-image: -webkit-linear-gradient(top, $barSelectedGradient); + background-image: linear-gradient(top, $barSelectedGradient); color: $barSelectedColor; } .$themeClass .OxMainMenu > .OxTitle.OxHighlight { background-image: -moz-linear-gradient(top, $barHighlightGradient); + background-image: -ms-linear-gradient(top, $barHighlightGradient); background-image: -o-linear-gradient(top, $barHighlightGradient); background-image: -webkit-linear-gradient(top, $barHighlightGradient); + background-image: linear-gradient(top, $barHighlightGradient); color: $barHighlightColor; } .$themeClass .OxMenu { - box-shadow: 0 2px 4px $menuShadow; -moz-box-shadow: 0 2px 4px $menuShadow; + -ms-box-shadow: 0 2px 4px $menuShadow; -o-box-shadow: 0 2px 4px $menuShadow; -webkit-box-shadow: 0 2px 4px $menuShadow; + box-shadow: 0 2px 4px $menuShadow; } .$themeClass .OxMenu .OxBottom, .$themeClass .OxMenu .OxItem, @@ -857,8 +1011,10 @@ Menus .$themeClass .OxMenu .OxItem.OxSelected, .$themeClass .OxMenu .OxScrollbar.OxSelected { background-image: -moz-linear-gradient(top, $menuSelectedGradient); + background-image: -ms-linear-gradient(top, $menuSelectedGradient); background-image: -o-linear-gradient(top, $menuSelectedGradient); background-image: -webkit-linear-gradient(top, $menuSelectedGradient); + background-image: linear-gradient(top, $menuSelectedGradient); color: $menuSelectedColor; } .$themeClass .OxMenu .OxItem.OxDisabled .OxCell { @@ -1050,13 +1206,17 @@ Video .$themeClass .OxVideoPlayer .OxFind, .$themeClass .OxVideoPlayer .OxVolume { background-image: -moz-linear-gradient(top, $videoBarGradient); + background-image: -ms-linear-gradient(top, $videoBarGradient); background-image: -o-linear-gradient(top, $videoBarGradient); background-image: -webkit-linear-gradient(top, $videoBarGradient); + background-image: linear-gradient(top, $videoBarGradient); } .$themeClass .OxVideoPlayer input.OxInput { background-image: -moz-linear-gradient(top, $videoInputGradient); + background-image: -ms-linear-gradient(top, $videoInputGradient); background-image: -o-linear-gradient(top, $videoInputGradient); background-image: -webkit-linear-gradient(top, $videoInputGradient); + background-image: linear-gradient(top, $videoInputGradient); } .$themeClass .OxVideoPlayer .OxSettings { background-image: none; @@ -1069,26 +1229,34 @@ Video } .$themeClass .OxVideoPlayer .OxSettings > div.OxSelected { background-image: -moz-linear-gradient(top, $videoMenuSelectedGradient); + background-image: -ms-linear-gradient(top, $videoMenuSelectedGradient); background-image: -o-linear-gradient(top, $videoMenuSelectedGradient); background-image: -webkit-linear-gradient(top, $videoMenuSelectedGradient); + background-image: linear-gradient(top, $videoMenuSelectedGradient); } .$themeClass .OxVideoPlayer .OxSettings > div.OxLine { background-color: $videoMenuBorder; } .$themeClass .OxVideoPlayer .OxVolume .OxRange .OxTrack { background-image: -moz-linear-gradient(top, $videoInputGradient); + background-image: -ms-linear-gradient(top, $videoInputGradient); background-image: -o-linear-gradient(top, $videoInputGradient); background-image: -webkit-linear-gradient(top, $videoInputGradient); + background-image: linear-gradient(top, $videoInputGradient); } .$themeClass .OxVideoPlayer .OxVolume .OxRange .OxThumb { background-image: -moz-linear-gradient(top, $videoButtonGradient); + background-image: -ms-linear-gradient(top, $videoButtonGradient); background-image: -o-linear-gradient(top, $videoButtonGradient); background-image: -webkit-linear-gradient(top, $videoButtonGradient); + background-image: linear-gradient(top, $videoButtonGradient); } .$themeClass .OxVideoPlayer .OxVolume .OxRange .OxThumb:active { background-image: -moz-linear-gradient(top, $videoButtonActiveGradient); + background-image: -ms-linear-gradient(top, $videoButtonActiveGradient); background-image: -o-linear-gradient(top, $videoButtonActiveGradient); background-image: -webkit-linear-gradient(top, $videoButtonActiveGradient); + background-image: linear-gradient(top, $videoButtonActiveGradient); } .$themeClass .OxVideoTimelinePlayer .OxVideoBox { @@ -1122,6 +1290,12 @@ Video transparent 50%, transparent 75%, $bodyHighlightGradient[0] 75%, $bodyHighlightGradient[1] 100% ); + background-image: -ms-repeating-linear-gradient( + -45deg, transparent 0%, transparent 25%, + $bodyHighlightGradient[0] 25%, $bodyHighlightGradient[1] 50%, + transparent 50%, transparent 75%, + $bodyHighlightGradient[0] 75%, $bodyHighlightGradient[1] 100% + ); background-image: -o-repeating-linear-gradient( -45deg, transparent 0%, transparent 25%, $bodyHighlightGradient[0] 25%, $bodyHighlightGradient[1] 50%, @@ -1134,6 +1308,12 @@ Video transparent 50%, transparent 75%, $bodyHighlightGradient[0] 75%, $bodyHighlightGradient[1] 100% ); + background-image: repeating-linear-gradient( + -45deg, transparent 0%, transparent 25%, + $bodyHighlightGradient[0] 25%, $bodyHighlightGradient[1] 50%, + transparent 50%, transparent 75%, + $bodyHighlightGradient[0] 75%, $bodyHighlightGradient[1] 100% + ); background-size: 4px 4px; } .$themeClass .OxAnnotationFolder .OxArrayEditableInput .OxEditableElement.OxSelected { @@ -1163,32 +1343,42 @@ Miscellaneous .$themeClass .OxImageElement > .OxLoadingScreen { background-image: -moz-linear-gradient(top, $imageLoadingGradient); + background-image: -ms-linear-gradient(top, $imageLoadingGradient); background-image: -o-linear-gradient(top, $imageLoadingGradient); background-image: -webkit-linear-gradient(top, $imageLoadingGradient); + background-image: linear-gradient(top, $imageLoadingGradient); } .$themeClass .OxDialog .OxImageElement > .OxLoadingScreen { background-image: -moz-linear-gradient(top, $dialogImageLoadingGradient); + background-image: -ms-linear-gradient(top, $dialogImageLoadingGradient); background-image: -o-linear-gradient(top, $dialogImageLoadingGradient); background-image: -webkit-linear-gradient(top, $dialogImageLoadingGradient); + background-image: linear-gradient(top, $dialogImageLoadingGradient); } .$themeClass .OxSelectableElement { background-image: -moz-linear-gradient(top, $listItemGradient); + background-image: -ms-linear-gradient(top, $listItemGradient); background-image: -o-linear-gradient(top, $listItemGradient); background-image: -webkit-linear-gradient(top, $listItemGradient); + background-image: linear-gradient(top, $listItemGradient); } .$themeClass .OxSelectableElement.OxSelected { background-image: -moz-linear-gradient(top, $listItemSelectedGradient); + background-image: -ms-linear-gradient(top, $listItemSelectedGradient); background-image: -o-linear-gradient(top, $listItemSelectedGradient); background-image: -webkit-linear-gradient(top, $listItemSelectedGradient); + background-image: linear-gradient(top, $listItemSelectedGradient); } .$themeClass .OxSelectableElement.OxSelected > div { color: $listItemSelectedColor; } .$themeClass .OxSelectableElement.OxSelected.OxFocus { background-image: -moz-linear-gradient(top, $listItemFocusSelectedGradient); + background-image: -ms-linear-gradient(top, $listItemFocusSelectedGradient); background-image: -o-linear-gradient(top, $listItemFocusSelectedGradient); background-image: -webkit-linear-gradient(top, $listItemFocusSelectedGradient); + background-image: linear-gradient(top, $listItemFocusSelectedGradient); } .$themeClass .OxSelectableElement.OxSelected.OxFocus > div { color: $listItemFocusSelectedColor; @@ -1200,20 +1390,25 @@ Miscellaneous } .$themeClass .OxScreen .OxReflection { background-image: -moz-linear-gradient(top, $screenReflectionGradient); + background-image: -ms-linear-gradient(top, $screenReflectionGradient); background-image: -o-linear-gradient(top, $screenReflectionGradient); background-image: -webkit-linear-gradient(top, $screenReflectionGradient); + background-image: linear-gradient(top, $screenReflectionGradient); } .$themeClass .OxTooltip { border: 1px solid $tooltipBorder; background-image: -moz-linear-gradient(top, $tooltipGradient); + background-image: -ms-linear-gradient(top, $tooltipGradient); background-image: -o-linear-gradient(top, $tooltipGradient); background-image: -webkit-linear-gradient(top, $tooltipGradient); + background-image: linear-gradient(top, $tooltipGradient); color: $tooltipColor; - box-shadow: 2px 2px 4px $tooltipShadow; -moz-box-shadow: 2px 2px 4px $tooltipShadow; + -ms-box-shadow: 2px 2px 4px $tooltipShadow; -o-box-shadow: 2px 2px 4px $tooltipShadow; -webkit-box-shadow: 2px 2px 4px $tooltipShadow; + box-shadow: 2px 2px 4px $tooltipShadow; } .$themeClass ::selection { @@ -1224,6 +1419,10 @@ Miscellaneous background: $bodySelectionBackground; color: $bodySelectionColor; } +.$themeClass ::-ms-selection { + background: $bodySelectionBackground; + color: $bodySelectionColor; +} .$themeClass ::-o-selection { background: $bodySelectionBackground; color: $bodySelectionColor; diff --git a/source/Ox.UI/js/Core/LoadingIcon.js b/source/Ox.UI/js/Core/LoadingIcon.js index ffa453b8..9fe235d5 100644 --- a/source/Ox.UI/js/Core/LoadingIcon.js +++ b/source/Ox.UI/js/Core/LoadingIcon.js @@ -48,7 +48,8 @@ Ox.LoadingIcon = function(options, self) { MozTransform: css, MsTransform: css, OTransform: css, - WebkitTransform: css + WebkitTransform: css, + transform: css }); }, 83); that.stopAnimation().animate({opacity: 1}, 250, function() { @@ -74,7 +75,8 @@ Ox.LoadingIcon = function(options, self) { MozTransform: css, MsTransform: css, OTransform: css, - WebkitTransform: css + WebkitTransform: css, + transform: css }); callback && callback(); });