Merge pull request #21417 from J0WI/css-fixes

css fallbacks and code style fixes

core/css/apps.css

@@ -573,11 +573,11 @@ h3 {
 }
 .appear {
 	opacity: 1;
-	transition: opacity 500ms ease 0s;
+	-webkit-transition: opacity 500ms ease 0s;
 	-moz-transition: opacity 500ms ease 0s;
 	-ms-transition: opacity 500ms ease 0s;
 	-o-transition: opacity 500ms ease 0s;
-	-webkit-transition: opacity 500ms ease 0s;
+	transition: opacity 500ms ease 0s;
 }
 .appear.transparent {
 	opacity: 0;

core/css/fonts.css

@@ -4,7 +4,7 @@
 		font-family: 'Open Sans';
 		font-style: normal;
 		font-weight: normal;
-		src: local('Open Sans'), local('OpenSans'), url(../fonts/OpenSans-Regular.woff) format('woff');
+		src: local('Open Sans'), local('OpenSans'), url('../fonts/OpenSans-Regular.woff') format('woff');
 	}
 }
 
@@ -12,12 +12,12 @@
 	font-family: 'Open Sans';
 	font-style: normal;
 	font-weight: 300;
-	src: local('Open Sans Light'), local('OpenSans-Light'), url(../fonts/OpenSans-Light.woff) format('woff');
+	src: local('Open Sans Light'), local('OpenSans-Light'), url('../fonts/OpenSans-Light.woff') format('woff');
 }
 
 @font-face {
 	font-family: 'Open Sans';
 	font-style: normal;
 	font-weight: 600;
-	src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(../fonts/OpenSans-Semibold.woff) format('woff');
+	src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('../fonts/OpenSans-Semibold.woff') format('woff');
 }

core/css/header.css

@@ -68,7 +68,7 @@
 }
 
 #header .logo {
-	background-image: url(../img/logo-icon.svg);
+	background-image: url('../img/logo-icon.svg');
 	background-repeat: no-repeat;
 	background-size: 175px;
 	background-position: center 30px;

core/css/inputs.css

@@ -57,7 +57,8 @@ input[type="email"],
 input[type="tel"],
 input[type="url"],
 input[type="time"] {
-	-webkit-appearance:textfield; -moz-appearance:textfield;
+	-webkit-appearance:textfield;
+	-moz-appearance:textfield;
 	box-sizing:content-box;
 }
 input[type="text"]:hover, input[type="text"]:focus, input[type="text"]:active,

core/css/jquery-ui-fixes.css

@@ -9,7 +9,7 @@
 }
 .ui-widget-content {
 	border: 1px solid #dddddd;
-	background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x;
+	background: #eeeeee url('images/ui-bg_highlight-soft_100_eeeeee_1x100.png') 50% top repeat-x;
 	color: #333333;
 }
 .ui-widget-content a {
@@ -17,7 +17,7 @@
 }
 .ui-widget-header {
 	border: 1px solid #1d2d44;
-	background: #1d2d44 url(images/ui-bg_flat_35_1d2d44_40x100.png) 50% 50% repeat-x;
+	background: #1d2d44 url('images/ui-bg_flat_35_1d2d44_40x100.png') 50% 50% repeat-x;
 	color: #ffffff;
 }
 .ui-widget-header a {
@@ -30,7 +30,7 @@
 .ui-widget-content .ui-state-default,
 .ui-widget-header .ui-state-default {
 	border: 1px solid #ddd;
-	background: #f8f8f8 url(images/ui-bg_glass_100_f8f8f8_1x400.png) 50% 50% repeat-x;
+	background: #f8f8f8 url('images/ui-bg_glass_100_f8f8f8_1x400.png') 50% 50% repeat-x;
 	font-weight: bold;
 	color: #555;
 }
@@ -46,7 +46,7 @@
 .ui-widget-content .ui-state-focus,
 .ui-widget-header .ui-state-focus {
 	border: 1px solid #ddd;
-	background: #ffffff url(images/ui-bg_flat_100_ffffff_40x100.png) 50% 50% repeat-x;
+	background: #ffffff url('images/ui-bg_flat_100_ffffff_40x100.png') 50% 50% repeat-x;
 	font-weight: bold;
 	color: #333;
 }
@@ -60,7 +60,7 @@
 .ui-widget-content .ui-state-active,
 .ui-widget-header .ui-state-active {
 	border: 1px solid #1d2d44;
-	background: #f8f8f8 url(images/ui-bg_glass_100_f8f8f8_1x400.png) 50% 50% repeat-x;
+	background: #f8f8f8 url('images/ui-bg_glass_100_f8f8f8_1x400.png') 50% 50% repeat-x;
 	font-weight: bold;
 	color: #1d2d44;
 }
@@ -76,7 +76,7 @@
 .ui-widget-content .ui-state-highlight,
 .ui-widget-header .ui-state-highlight {
 	border: 1px solid #ddd;
-	background: #f8f8f8 url(images/ui-bg_highlight-hard_100_f8f8f8_1x100.png) 50% top repeat-x;
+	background: #f8f8f8 url('images/ui-bg_highlight-hard_100_f8f8f8_1x100.png') 50% top repeat-x;
 	color: #555;
 }
 .ui-state-highlight a,
@@ -88,7 +88,7 @@
 .ui-widget-content .ui-state-error,
 .ui-widget-header .ui-state-error {
 	border: 1px solid #cd0a0a;
-	background: #b81900 url(images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat;
+	background: #b81900 url('images/ui-bg_diagonals-thick_18_b81900_40x40.png') 50% 50% repeat;
 	color: #ffffff;
 }
 .ui-state-error a,
@@ -105,34 +105,34 @@
 /* Icons
 ----------------------------------*/
 .ui-state-default .ui-icon {
-	background-image: url(images/ui-icons_1d2d44_256x240.png);
+	background-image: url('images/ui-icons_1d2d44_256x240.png');
 }
 .ui-state-hover .ui-icon,
 .ui-state-focus .ui-icon {
-	background-image: url(images/ui-icons_1d2d44_256x240.png);
+	background-image: url('images/ui-icons_1d2d44_256x240.png');
 }
 .ui-state-active .ui-icon {
-	background-image: url(images/ui-icons_1d2d44_256x240.png);
+	background-image: url('images/ui-icons_1d2d44_256x240.png');
 }
 .ui-state-highlight .ui-icon {
-	background-image: url(images/ui-icons_ffffff_256x240.png);
+	background-image: url('images/ui-icons_ffffff_256x240.png');
 }
 .ui-state-error .ui-icon,
 .ui-state-error-text .ui-icon {
-	background-image: url(images/ui-icons_ffd27a_256x240.png);
+	background-image: url('images/ui-icons_ffd27a_256x240.png');
 }
 
 /* Misc visuals
 ----------------------------------*/
 /* Overlays */
 .ui-widget-overlay {
-	background: #666666 url(images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
+	background: #666666 url('images/ui-bg_diagonals-thick_20_666666_40x40.png') 50% 50% repeat;
 	opacity: .5;
 }
 .ui-widget-shadow {
 	margin: -5px 0 0 -5px;
 	padding: 5px;
-	background: #000000 url(images/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x;
+	background: #000000 url('images/ui-bg_flat_10_000000_40x100.png') 50% 50% repeat-x;
 	opacity: .2;
 	border-radius: 5px;
 }

core/css/mobile.css

@@ -10,15 +10,25 @@
 	-webkit-box-pack: center;
 	-webkit-box-align: center;
 
+	display: -webkit-flex;
+	-webkit-flex-direction: row;
+	-webkit-align-self: center;
+	-webkit-align-items: center;
+
 	display: -moz-box;
 	-moz-box-orient: horizontal;
 	-moz-box-pack: center;
 	-moz-box-align: center;
 
-	display: box;
-	box-orient: horizontal;
-	box-pack: center;
-	box-align: center;
+	display: -ms-flexbox;
+	-ms-flex-direction: row;
+	-ms-flex-pack: center;
+	-ms-flex-align: center;
+
+	display: flex;
+	flex-direction: row;
+	align-self: center;
+	align-items: center;
 }
 
 /* on mobile public share, show only the icon of the logo, hide the text */

core/css/styles.css

@@ -897,11 +897,11 @@ div.crumb:active {
 
 .appear {
 	opacity: 1;
-	transition: opacity 500ms ease 0s;
+	-webkit-transition: opacity 500ms ease 0s;
 	-moz-transition: opacity 500ms ease 0s;
 	-ms-transition: opacity 500ms ease 0s;
 	-o-transition: opacity 500ms ease 0s;
-	-webkit-transition: opacity 500ms ease 0s;
+	transition: opacity 500ms ease 0s;
 }
 .appear.transparent {
 	opacity: 0;