From 7b15032626bf1db4ba738a2b01e7fd36b9175a43 Mon Sep 17 00:00:00 2001 From: pginer Date: Fri, 17 Aug 2012 12:23:36 +0200 Subject: [PATCH] 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 | 66 +++++++++++++++++++-------- lib/jquery.uls/css/jquery.uls.lcd.css | 14 ++++-- resources/css/ext.uls.css | 27 +++++++++-- 3 files changed, 80 insertions(+), 27 deletions(-) diff --git a/lib/jquery.uls/css/jquery.uls.css b/lib/jquery.uls/css/jquery.uls.css index 34d12728..4c1b0ca3 100644 --- a/lib/jquery.uls/css/jquery.uls.css +++ b/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; -} +} \ No newline at end of file diff --git a/lib/jquery.uls/css/jquery.uls.lcd.css b/lib/jquery.uls/css/jquery.uls.lcd.css index 36369f7b..4080657e 100644 --- a/lib/jquery.uls/css/jquery.uls.lcd.css +++ b/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; -} +} \ No newline at end of file diff --git a/resources/css/ext.uls.css b/resources/css/ext.uls.css index a4083fec..5a408183 100644 --- a/resources/css/ext.uls.css +++ b/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; -} +} \ No newline at end of file