Display settings CSS fixes

Some adjustments in CSS to improve layout and visual style.

Change-Id: Ic215bdd64b13a5c263d3e6b2e67615f460282231

resources/css/ext.uls.css

@@ -1,25 +1,36 @@
 div#settings-block {
 	border-left: 1px solid #C9C9C9;
-	padding-left: 10px;
-	background-color: #F6F6F6;
+	padding-left: 4px;
+	line-height: 1.2em;
 }
 
-div#display-settings-block { 
+div.display-settings-block {
 	/* @embed */
-	background: #F6F6F6 url('../images/display.png') no-repeat;
+	background: transparent url('../images/display.png') no-repeat;
 	background-size: 20px auto;
 	/* This is only few pixels off from the below */
-	background-position: 10% 5px;
+	background-position: 4.5% 0;
 	/* Does not work for RTL
 	background-position-x: 15px;
 	background-position-y: 5px;
 	*/
-	padding-left: 40px;
+	color: #252525;
+	padding-left: 32px;
 	cursor: pointer;
 }
 
-div#display-settings-block:hover {
-	background-color: #F6F6F6;
+div.display-settings-block:hover {
+	color: black;
+}
+
+.uls-ui-languages button{
+	width:23%;
+	text-overflow: ellipsis;
+	margin-right:15px;
+}
+
+.uls-ui-languages button#uls-more-languages {
+	width: auto;
 }
 
 .settings-title {
@@ -31,6 +42,10 @@ div#display-settings-block:hover {
 	font-size: 9pt;
 }
 
+div.display-settings-block:hover .settings-text {
+	color: #252525;
+}
+
 button.button {
 	background-color: #E6E6E6;
 	background-image: -moz-linear-gradient(center top, #F0F0F0, #E6E6E6);
@@ -51,14 +66,17 @@ button.button:hover {
 	border-color: #C9C9C9;
 }
 
-button.button:active,button.button.down {
+button.button:active,
+button.button.down {
 	background-color: #D8D8D8;
 	background-image: -moz-linear-gradient(center top, #D3D3D3, #D8D8D8);
 	border-color: #C9C9C9;
 }
 
-button.button:disabled,button.button.hover:disabled,button.button.disabled,button.button.disabled:hover
-	{
+button.button:disabled,
+button.button.hover:disabled,
+button.button.disabled,
+button.button.disabled:hover {
 	background-color: #F0F0F0;
 	background-image: -moz-linear-gradient(center top, #F0F0F0, #F0F0F0);
 	border-color: #E3E3E3;
@@ -79,16 +97,20 @@ button.button.blue:hover {
 	background-image: -moz-linear-gradient(center top, #4C84DA, #3F77D7);
 }
 
-button.button.blue:active,button.button.blue.down:active {
+button.button.blue:active,
+button.button.blue.down:active {
 	background-color: #2A549C;
 	background-image: -moz-linear-gradient(center top, #2D5EA9, #2A549C);
 }
 
-button.button.blue:disabled,button.button.blue.hover:disabled,button.button.blue.disabled,button.button.blue.disabled:hover {
+button.button.blue:disabled,
+button.button.blue.hover:disabled,
+button.button.blue.disabled,
+button.button.blue.disabled:hover {
 	background-color: #7297D7;
 	background-image: -moz-linear-gradient(center top, #7297D7, #7297D7);
 	border-color: #5E89D1;
 	color: white;
 	cursor: default;
 	text-shadow: none;
-}
+}

resources/css/ext.uls.languagesettings.css

@@ -87,15 +87,33 @@
 	font-size: 12pt;
 }
 
-.menu-section.active {
+#languagesettings-panels .menu-section.active {
 	color: black;
 	background-color: #F6F6F6;
 	border-left-color: #3366BB;
 }
 
-.language-settings-buttons {
+
+#languagesettings-panels div#settings-block {
+	border-left: 1px solid #C9C9C9;
+	padding-left: 10px;
+	background-color: #F6F6F6;
+	line-height: 1.2em;
+}
+
+#languagesettings-panels div#display-settings-block {
+	background-position: 6% 6px;
+	padding-left: 40px;
+	cursor: pointer;
+}
+
+#languagesettings-panels div#display-settings-block:hover {
+	background-color: #F6F6F6;
+}
+
+#languagesettings-settings-panel .language-settings-buttons {
 	border-top: 1px solid #F0F0F0;
-	margin-top: 15px;
+	margin-top: 25px;
 	padding: 15px;
 	width: auto;
 }
@@ -113,7 +131,7 @@
 	margin-left: 0;
 }
 
-.checkbox b {
+.checkbox strong {
 	color: #252525;
 }
 

resources/js/ext.uls.displaysettings.js

@@ -20,27 +20,31 @@
 ( function( $ ) {
 	"use strict";
 
-	var template = '<div class="row"><h3>Display Settings</h3></div>'
-			+ '<div><h4>Language used for menus</h4></div>'
-			+ '<div class="uls-ui-languages row">'
-			+ '</div>'
-			+ '<div class="row"><h4>Font Settings</h4></div>'
+	var template = '<div class="row"><div class="twelve columns"><h3>Display Settings</h3></div></div>'
+			+ '<div class="row"><div class="eleven columns"><h4>Select Language</h4></div></div>'
+			+ '<div class="row"><div class="uls-ui-languages eleven columns">'
+			+ '</div></div>'
+			+ '<div class="row"><div class="twelve columns"><h4>Font Settings</h4></div></div>'
 			+ '<div class="row">'
+			+ '<div class="eleven columns">'
 			+ '<label class="checkbox"><input type="checkbox" checked id="webfonts-enable-checkbox" />'
 			+ '<strong>Download fonts automatically when needed</strong> '
 			+ 'Web fonts will be downloaded when text in special scripts is displayed. '
 			+ '<a href="#">More Information</a>'
 			+ '</span></label>'
 			+ '</div>'
-			+ '<div class="row"><h5>Set your preferred fonts to use</h5></div>'
+			+ '</div>'
+			+ '<div class="row"><h5 class="twelve columns">Select your preferred fonts</h5></div>'
 			+ '<div class="row">'
 			+ '<div class="six columns"><label class="uls-font-label" id="font-selector"></label></div>'
 			+ '<select class="three columns end uls-font-select"></select></div>'
 			+ '</div>'
 			+ '<div class="row"></div>'
 			+ '<div class="row language-settings-buttons">'
-			+ '<button class="three columns offset-by-three button uls-settings-close">Cancel</button>'
-			+ '<button id="uls-displaysettings-apply" class="four columns offset-by-one active blue button">Apply changes</button>'
+			+ '<div class="eleven columns">'
+			+ '<button class="button uls-settings-close">Cancel</button>'
+			+ '<button id="uls-displaysettings-apply" class="active blue button">Apply changes</button>'
+			+ '</div>'
 			+ '</div>'; // FIXME i18n and too much hardcoding.
 
 	var DisplaySettings = function ( $parent ) {
@@ -82,14 +86,11 @@
 			for ( var i = 0; i < 3; i++ ) {
 				var language = languages[i];
 				var $button = $( '<button>' )
-					.addClass( 'two columns button' )
+					.addClass( 'button' )
 					.text( $.uls.data.autonym( language ) );
 				if ( language === this.language ) {
 					$button.addClass( 'down' );
 				}
-				if ( i > 0 ) {
-					$button.addClass( 'offset-by-one' );
-				}
 				$button.data( 'language', language );
 				$languages.append( $button );
 				$button.on ( 'click', function () {
@@ -98,7 +99,7 @@
 			}
 			var $moreLanguagesButton = $( '<button>' )
 				.prop( 'id', 'uls-more-languages' )
-				.addClass( 'two columns offset-by-one button' )
+				.addClass( 'button' )
 				.text( '...' );
 			$languages.append( $moreLanguagesButton );
 		},