diff --git a/UniversalLanguageSelector.php b/UniversalLanguageSelector.php index 725dee61..b98cc727 100644 --- a/UniversalLanguageSelector.php +++ b/UniversalLanguageSelector.php @@ -79,7 +79,7 @@ $wgResourceModules['ext.uls.init'] = array( $wgResourceModules['ext.uls.languagesettings'] = array( 'scripts' => 'resources/js/ext.uls.languagesettings.js', - 'styles' => 'resources/css/ext.languagesettings.css', + 'styles' => 'resources/css/ext.uls.languagesettings.css', 'localBasePath' => $dir, 'remoteExtPath' => 'UniversalLanguageSelector', ); @@ -96,6 +96,7 @@ $wgResourceModules['ext.uls.webfonts'] = array( $wgResourceModules['ext.uls.displaysettings'] = array( 'scripts' => 'resources/js/ext.uls.displaysettings.js', + 'styles' => 'resources/css/ext.uls.displaysettings.css', 'localBasePath' => $dir, 'dependencies' => array( 'ext.uls.languagesettings', diff --git a/resources/css/ext.uls.css b/resources/css/ext.uls.css index b512283a..99a1ee2e 100644 --- a/resources/css/ext.uls.css +++ b/resources/css/ext.uls.css @@ -1,16 +1,23 @@ div#settings-block { border-left: 1px solid #C9C9C9; padding-left: 10px; + background-color: #F6F6F6; } div#display-settings-block { /* @embed */ background: #F6F6F6 url('../images/display.png') no-repeat; background-size: 20px auto; - padding-left: 25px; + background-position-x: 15px; + background-position-y: 5px; + padding-left: 40px; cursor: pointer; } +div#display-settings-block:hover { + background-color: #F6F6F6; +} + .settings-title { font-size: 11pt; } @@ -21,59 +28,63 @@ div#display-settings-block { } button.button { - display: inline-block; - padding: 0.4065em 1.2195em 0.4065em; - font: bold 0.813em Arial, sans-serif; - line-height: 1; - color: black; - text-align: center; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #E6E6E6; + background-image: -moz-linear-gradient(center top, #F0F0F0, #E6E6E6); + border: 1px solid #C9C9C9; + border-radius: 3px 3px 3px 3px; + color: #252525; cursor: pointer; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; + display: inline-block; + font: bold 0.813em/1 Arial, sans-serif; + padding: 0.4065em 1.2195em; + text-align: center; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); +} + +button.button:hover { + background-color: #F0F0F0; + background-image: -moz-linear-gradient(center top, #F8F8F8, #F0F0F0); + border-color: #C9C9C9; +} + +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 + { + background-color: #F0F0F0; + background-image: -moz-linear-gradient(center top, #F0F0F0, #F0F0F0); + border-color: #E3E3E3; + color: #C9C9C9; + cursor: default; } button.button.blue { - background-color: #3366bb; - color: white; - background-image: -moz-linear-gradient(top, #3670c8, #3366bb); - background-image: -ms-linear-gradient(top, #3670c8, #3366bb); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3670c8), - color-stop(100%, #3366bb) ); - background-image: -webkit-linear-gradient(top, #3670c8, #3366bb); - background-image: linear-gradient(#3670c8, #3366bb); - border: 1px #33589f solid; - -ms-filter: - "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3670c8', endColorstr='#3366bb', GradientType=0)"; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#3670c8', - endColorstr='#3366bb', GradientType=0 ); + background-color: #3366BB; + background-image: -moz-linear-gradient(center top, #3670C8, #3366BB); + border: 1px solid #33589F; + color: #FFFFFF; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } button.button.blue:hover { - background-color: #3f77d7; - background-image: -moz-linear-gradient(top, #4c84da, #3f77d7); - background-image: -ms-linear-gradient(top, #4c84da, #3f77d7); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4c84da), - color-stop(100%, #3f77d7) ); - background-image: -webkit-linear-gradient(top, #4c84da, #3f77d7); - background-image: linear-gradient(#4c84da, #3f77d7); - -ms-filter: - "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c84da', endColorstr='#3f77d7', GradientType=0)"; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#4c84da', - endColorstr='#3f77d7', GradientType=0 ); + background-color: #3F77D7; + background-image: -moz-linear-gradient(center top, #4C84DA, #3F77D7); } -button.button.blue:active { - background-color: #2a549c; - background-image: -moz-linear-gradient(top, #2d5ea9, #2a549c); - background-image: -ms-linear-gradient(top, #2d5ea9, #2a549c); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2d5ea9), - color-stop(100%, #2a549c) ); - background-image: -webkit-linear-gradient(top, #2d5ea9, #2a549c); - background-image: linear-gradient(#2d5ea9, #2a549c); - -ms-filter: - "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2d5ea9', endColorstr='#2a549c', GradientType=0)"; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#2d5ea9', - endColorstr='#2a549c', GradientType=0 ); +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 { + background-color: #7297D7; + background-image: -moz-linear-gradient(center top, #7297D7, #7297D7); + border-color: #5E89D1; + color: white; + cursor: default; + text-shadow: none; } \ No newline at end of file diff --git a/resources/css/ext.uls.displaysettings.css b/resources/css/ext.uls.displaysettings.css new file mode 100644 index 00000000..c800dd0a --- /dev/null +++ b/resources/css/ext.uls.displaysettings.css @@ -0,0 +1,18 @@ +.uls-font-label,.uls-font-select { + font-size: 10pt; + line-height: 16pt; +} + +.uls-font-select { + height: 16pt; +} + +.uls-ui-languages button { + width: 23%; + text-overflow: ellipsis; + margin-right: 15px; +} + +.uls-ui-languages button#uls-more-languages { + width: auto; +} \ No newline at end of file diff --git a/resources/css/ext.languagesettings.css b/resources/css/ext.uls.languagesettings.css similarity index 66% rename from resources/css/ext.languagesettings.css rename to resources/css/ext.uls.languagesettings.css index a5641a3a..fe7b495f 100644 --- a/resources/css/ext.languagesettings.css +++ b/resources/css/ext.uls.languagesettings.css @@ -31,16 +31,24 @@ } .uls-menu h3 { + border-bottom: medium none; font-size: 14pt; line-height: 1.5em; - padding-left: 0; - margin-top: 0; margin-bottom: 10px; - border-bottom: none; + margin-top: 0; + padding-left: 0; +} + +.languagesettings-menu { + padding-left: 0px; +} + +.languagesettings-menu .settings-title { + font-size: 13pt; } .languagesettings-menu h1 { - font-size: 18pt; + font-size: 16pt; line-height: 20pt; margin-top: 0; padding-top: 15px; @@ -50,6 +58,26 @@ text-align: right; } +#languagesettings-settings-panel { + padding-left: 5%; + color: #252525; +} + +#languagesettings-settings-panel h3 { + padding-top: 15px; + margin-top: 1pt; + line-height: 20pt; + font-size: 16pt; +} + +#languagesettings-settings-panel h4 { + font-size: 12pt; +} + +#languagesettings-settings-panel h5 { + font-size: 10pt; +} + /* Buttons in the selector panel */ .menu-section { color: #777; @@ -65,27 +93,6 @@ border-left-color: #3366BB; } -button.button { - background-color: #E6E6E6; - background-image: -moz-linear-gradient(center top, #F0F0F0, #E6E6E6); - border: 1px solid #C9C9C9; - border-radius: 3px 3px 3px 3px; - color: #252525; - cursor: pointer; - display: inline-block; - font: bold 0.813em/1 Arial, sans-serif; - padding: 0.4065em 1.2195em; - text-align: center; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); -} - -button.button:active, -button.button.down { - background-color: #D8D8D8; - background-image: -moz-linear-gradient(center top, #D3D3D3, #D8D8D8); - border-color: #C9C9C9; -} - .language-settings-buttons { border-top: 1px solid #F0F0F0; margin-top: 15px; @@ -93,8 +100,23 @@ button.button.down { width: auto; } -label.checkbox input[type="checkbox"] { - padding-left: -20px; - float: left; - color: #777777; +.language-settings-buttons button { + margin-left: 15px; +} + +.checkbox { + color: #555555; + font-size: 10pt; +} + +.checkbox input[type="checkbox"] { + margin-left: 0; +} + +.checkbox b { + color: #252525; +} + +label.checkbox input[type="checkbox"] { + float: left; } diff --git a/resources/js/ext.uls.displaysettings.js b/resources/js/ext.uls.displaysettings.js index 11e39ba2..20a581b6 100644 --- a/resources/js/ext.uls.displaysettings.js +++ b/resources/js/ext.uls.displaysettings.js @@ -34,7 +34,7 @@ + '' + '
Set your preferred fonts to use
' + '
' - + '
' + + '
' + '
' + '' + '
'