CSS adjustments on color and sizes

Small adjustments on color to make it compliant with the Agora palette,
cross-browser gradient code added according to CSS WMF guidelines, and
adjustment of element sizes.

And whitespace and new line cleanups

Change-Id: I08890009eff9ed5edec77855467529eb07eaeb57

lib/jquery.uls/css/jquery.uls.css

@@ -1,8 +1,10 @@
 .uls-trigger {
 	/* @embed */
-	background: url('../images/icon-language.png') no-repeat scroll left center transparent;
+	background: url('../images/icon-language.png') no-repeat scroll left
+		center transparent;
 	padding-left: 30px;
 }
+
 .uls-menu {
 	position: fixed;
 	z-index: 1000;
@@ -26,9 +28,11 @@
 	-moz-background-clip: padding;
 	background-clip: padding-box;
 }
+
 .uls-menu a {
-	color: #0088CC;
+	color: #3366bb;
 }
+
 .uls-menu h1 {
 	font-weight: normal;
 	padding-top: 1.25em;
@@ -39,6 +43,7 @@
 	padding-left: 15px;
 	color: #555;
 }
+
 .uls-menu h2 {
 	font-size: 16pt;
 	line-height: 1.5em;
@@ -48,6 +53,7 @@
 	border-bottom: none;
 	color: #555;
 }
+
 .uls-menu h3 {
 	font-size: 14pt;
 	line-height: 1.5em;
@@ -56,12 +62,15 @@
 	margin-bottom: 10px;
 	border-bottom: none;
 }
+
 .uls-worldmap {
 	/* @embed */
-	background: url('../images/world_map.png') no-repeat scroll right top transparent;
+	background: url('../images/world_map.png') no-repeat scroll right top
+		transparent;
 	background-size: 100%;
 }
-.uls-region {
+
+div.uls-region {
 	cursor: pointer;
 	padding: 0;
 	margin: 0;
@@ -70,37 +79,48 @@
 	border-bottom-style: solid;
 	border-bottom-width: 3px;
 }
-.uls-worldmap .uls-region {
-	/* The map doesn't flip */
+
+.uls-worldmap .uls-region { /* The map doesn't flip */
 	/* @noflip */
 	float: left;
 }
+
 .uls-region a {
-	bottom: 2px;
+	bottom: 0;
+	padding: 2px;
 	position: absolute;
 	font-size: 13px;
+	line-height: 1.2em;
+	text-decoration: none;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	width: 100%;
 }
+
 .uls-region:hover {
 	/*Cross-browser background transparency*/
 	background: #3366bb;
 	background: rgba(51, 102, 187, 0.1);
-	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb);
-	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb)";
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb,
+		endColorstr=#253366bb );
+	-ms-filter:
+		"progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb)";
 	border-bottom-color: #3366bb;
 	border-bottom-style: solid;
 }
+
 .regionselector.active {
 	/*Cross-browser background transparency*/
 	background: #3366bb;
 	background: rgba(51, 102, 187, 0.2);
-	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb);
-	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb)";
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb,
+		endColorstr=#253366bb );
+	-ms-filter:
+		"progid:DXImageTransform.Microsoft.gradient(startColorstr=#253366bb, endColorstr=#253366bb)";
 	border-bottom-color: #3366bb;
 	border-bottom-style: solid;
 }
+
 #map-block {
 	top: 1px;
 	margin-right: 0;
@@ -108,20 +128,25 @@
 	float: right;
 	overflow: hidden;
 }
+
 #map-block a {
 	color: #444;
 }
+
 #map-block .active a {
-	color:#252525;
+	color: #252525;
 	font-weight: bold;
 }
+
 .icon-close {
 	/* @embed */
-	background: url('../images/close.png') no-repeat scroll center center transparent;
+	background: url('../images/close.png') no-repeat scroll center center
+		transparent;
 	float: right;
 	padding: 15px;
 	cursor: pointer;
 }
+
 input#languagefilter {
 	border: 1px solid #c9c9c9;
 	-moz-transition: all 0.15s linear 0s;
@@ -131,29 +156,34 @@ input#languagefilter {
 	display: block;
 	background-color: transparent;
 }
+
 input:focus#languagefilter {
-	border: 1px solid #08C;
+	border: 1px solid #3366bb;
 }
 
 #search {
 	background-color: #f8f8f8;
-	border-top-color: #555;
+	border-top-color: #aaaaaa;
 	border-top-style: solid;
 	border-top-width: 1px;
 	padding: 0.8em 0;
 }
+
 .search-label {
 	/* @embed */
-	background: url('../images/search.png') no-repeat scroll right center transparent;
+	background: url('../images/search.png') no-repeat scroll right center
+		transparent;
 	background-size: 30px;
 	height: 32px;
 	width: 32px;
 	display: inline-block;
 	float: right;
 }
+
 span#languagefilter-clear {
 	/* @embed */
-	background: url('../images/clear.png') no-repeat scroll left center transparent;
+	background: url('../images/clear.png') no-repeat scroll left center
+		transparent;
 	cursor: pointer;
 	height: 32px;
 	position: absolute;
@@ -183,4 +213,4 @@ span#languagefilter-clear {
 
 #search-input-block {
 	position: relative;
-}
+}

lib/jquery.uls/css/jquery.uls.lcd.css

@@ -1,12 +1,13 @@
 .uls-lcd-region-section h3 {
 	color: #777;
 }
+
 .uls-lcd-region-section ul li:hover {
 	background-color: #eaeff7;
 }
 /* Language list */
 .uls-language-list {
-	height: 18em;
+	height: 22em;
 	overflow: auto;
 	margin: 10px;
 	width: auto;
@@ -15,18 +16,23 @@
 .uls-language-block ul {
 	margin: 0px 0px 1.6em;
 }
+
 .uls-language-list ul li {
+	cursor: pointer;
 	font-weight: normal;
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 }
+
 .uls-language-list strong {
 	text-decoration: underline;
 }
+
 .uls-language-list a {
 	font-weight: normal;
-	color: #0088CC;
+	text-decoration: none;
+	color: #3366bb;
 	font-size: 14px;
 	line-height: 1.6em;
 }
@@ -52,6 +58,6 @@
 	line-height: 1.6em;
 }
 
-.uls-lcd-region-section ul li.uls-column-break:hover{
+.uls-lcd-region-section ul li.uls-column-break:hover {
 	background: none;
-}
+}

resources/css/ext.uls.css

@@ -23,10 +23,10 @@ div.display-settings-block:hover {
 	color: black;
 }
 
-.uls-ui-languages button{
-	width:23%;
+.uls-ui-languages button {
+	width: 23%;
 	text-overflow: ellipsis;
-	margin-right:15px;
+	margin-right: 15px;
 }
 
 .uls-ui-languages button#uls-more-languages {
@@ -48,7 +48,9 @@ div.display-settings-block:hover .settings-text {
 
 button.button {
 	background-color: #E6E6E6;
+	background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);
 	background-image: -moz-linear-gradient(center top, #F0F0F0, #E6E6E6);
+	background-image: linear-gradient(#F0F0F0, #E6E6E6);
 	border: 1px solid #C9C9C9;
 	border-radius: 3px 3px 3px 3px;
 	color: #252525;
@@ -62,23 +64,30 @@ button.button {
 
 button.button:hover {
 	background-color: #F0F0F0;
+	background-image: -webkit-linear-gradient(top, #f8f8f8, #f0f0f0);
 	background-image: -moz-linear-gradient(center top, #F8F8F8, #F0F0F0);
+	background-image: linear-gradient(#F8F8F8, #F0F0F0);
 	border-color: #C9C9C9;
 }
 
 button.button:active,
 button.button.down {
 	background-color: #D8D8D8;
+	background-image: -webkit-linear-gradient(top, #d3d3d3, #d8d8d8);
 	background-image: -moz-linear-gradient(center top, #D3D3D3, #D8D8D8);
+	background-image: linear-gradient(#D3D3D3, #D8D8D8);
 	border-color: #C9C9C9;
 }
 
 button.button:disabled,
 button.button.hover:disabled,
 button.button.disabled,
-button.button.disabled:hover {
+button.button.disabled:hover
+	{
 	background-color: #F0F0F0;
+	background-image: -webkit-linear-gradient(top, #f0f0f0, #f0f0f0);
 	background-image: -moz-linear-gradient(center top, #F0F0F0, #F0F0F0);
+	background-image: linear-gradient(#F0F0F0, #F0F0F0);
 	border-color: #E3E3E3;
 	color: #C9C9C9;
 	cursor: default;
@@ -86,7 +95,9 @@ button.button.disabled:hover {
 
 button.button.blue {
 	background-color: #3366BB;
+	background-image: -webkit-linear-gradient(top, #3670c8, #3366bb);
 	background-image: -moz-linear-gradient(center top, #3670C8, #3366BB);
+	background-image: -moz-linear-gradient(#3670C8, #3366BB);
 	border: 1px solid #33589F;
 	color: #FFFFFF;
 	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
@@ -94,13 +105,17 @@ button.button.blue {
 
 button.button.blue:hover {
 	background-color: #3F77D7;
+	background-image: -webkit-linear-gradient(top, #4c84da, #3f77d7);
 	background-image: -moz-linear-gradient(center top, #4C84DA, #3F77D7);
+	background-image: -moz-linear-gradient(#4C84DA, #3F77D7);
 }
 
 button.button.blue:active,
 button.button.blue.down:active {
 	background-color: #2A549C;
+	background-image: -webkit-linear-gradient(top, #2d5ea9, #2a549c);
 	background-image: -moz-linear-gradient(center top, #2D5EA9, #2A549C);
+	background-image: linear-gradient(#2D5EA9, #2A549C);
 }
 
 button.button.blue:disabled,
@@ -108,9 +123,11 @@ button.button.blue.hover:disabled,
 button.button.blue.disabled,
 button.button.blue.disabled:hover {
 	background-color: #7297D7;
+	background-image: -webkit-linear-gradient(top, #7297d7, #7297d7);
 	background-image: -moz-linear-gradient(center top, #7297D7, #7297D7);
+	background-image: linear-gradient(#7297D7, #7297D7);
 	border-color: #5E89D1;
 	color: white;
 	cursor: default;
 	text-shadow: none;
-}
+}