diff --git a/Resources.php b/Resources.php index 02a674b9..a88d82a8 100644 --- a/Resources.php +++ b/Resources.php @@ -15,10 +15,15 @@ $wgResourceModules['ext.uls.languagenames'] = array( 'class' => 'ResourceLoaderULSModule' ); +$wgResourceModules['ext.uls.buttons'] = array( + 'styles' => 'resources/css/ext.uls.buttons.css', +) + $resourcePaths; + $wgResourceModules['ext.uls.displaysettings'] = array( 'scripts' => 'resources/js/ext.uls.displaysettings.js', 'styles' => 'resources/css/ext.uls.displaysettings.css', 'dependencies' => array( + 'ext.uls.buttons', 'ext.uls.languagesettings', 'ext.uls.webfonts', 'jquery.i18n', @@ -60,6 +65,7 @@ $wgResourceModules['ext.uls.init'] = array( 'mediawiki.util', 'jquery.client', 'jquery.json', + 'jquery.cookie', 'jquery.uls', 'ext.uls.i18n', ), @@ -80,6 +86,7 @@ $wgResourceModules['ext.uls.inputsettings'] = array( 'scripts' => 'resources/js/ext.uls.inputsettings.js', 'styles' => 'resources/css/ext.uls.inputsettings.css', 'dependencies' => array( + 'ext.uls.buttons', 'ext.uls.languagesettings', 'ext.uls.ime', 'jquery.ime', @@ -108,7 +115,10 @@ $wgResourceModules['ext.uls.interface'] = array( $wgResourceModules['ext.uls.languagesettings'] = array( 'scripts' => 'resources/js/ext.uls.languagesettings.js', 'styles' => 'resources/css/ext.uls.languagesettings.css', - 'dependencies' => 'ext.uls.preferences', + 'dependencies' => array( + 'ext.uls.buttons', + 'ext.uls.preferences', + ), ) + $resourcePaths; $wgResourceModules['ext.uls.preferences'] = array( diff --git a/resources/css/ext.uls.buttons.css b/resources/css/ext.uls.buttons.css new file mode 100644 index 00000000..c709cab4 --- /dev/null +++ b/resources/css/ext.uls.buttons.css @@ -0,0 +1,161 @@ +button.button { + display: inline-block; + padding: 0.4065em 1.2195em 0.4065em; + font-size: 0.813em; + font-weight: bold; + line-height: 1; + color: #252525; + text-align: center; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + cursor: pointer; + background-color: #e6e6e6; + background-image: -moz-linear-gradient(top, #f0f0f0, #e6e6e6); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(100%, #e6e6e6)); + background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6); + background-image: linear-gradient(#f0f0f0, #e6e6e6); + border: 1px #c9c9c9 solid; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#e6e6e6', GradientType=0)"; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#e6e6e6', GradientType=0); +} + +button.button:hover { + background-color: #f0f0f0; + background-image: -moz-linear-gradient(top, #f8f8f8, #f0f0f0); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8f8f8), color-stop(100%, #f0f0f0)); + background-image: -webkit-linear-gradient(top, #f8f8f8, #f0f0f0); + background-image: linear-gradient(#f8f8f8, #f0f0f0); + border-color: #c9c9c9; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#f0f0f0', GradientType=0)"; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#f0f0f0', GradientType=0); +} + +button.button:active, +button.button.down { + background-color: #d8d8d8; + background-image: -moz-linear-gradient(top, #d3d3d3, #d8d8d8); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d3d3d3), color-stop(100%, #d8d8d8)); + background-image: -webkit-linear-gradient(top, #d3d3d3, #d8d8d8); + background-image: linear-gradient(#d3d3d3, #d8d8d8); + border-color: #c9c9c9; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3', endColorstr='#d8d8d8', GradientType=0)"; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d3d3d3', endColorstr='#d8d8d8', GradientType=0); +} + +button.button:disabled, +button.button:disabled.hover, +button.button.disabled, +button.button.disabled:hover { + color: #c9c9c9; + cursor: default; + background-color: #f0f0f0; + background-image: -moz-linear-gradient(top, #f0f0f0, #f0f0f0); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(100%, #f0f0f0)); + background-image: -webkit-linear-gradient(top, #f0f0f0, #f0f0f0); + background-image: linear-gradient(#f0f0f0, #f0f0f0); + border-color: #e3e3e3; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#f0f0f0', GradientType=0)"; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#f0f0f0', GradientType=0); +} + +button.button.blue { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #3366bb; + background-image: -moz-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); +} + +button.button.blue:hover { + background-color: #3f77d7; + background-image: -moz-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); +} + +button.button.blue:active { + background-color: #2a549c; + background-image: -moz-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:disabled, +button.button.blue:disabled.hover, +button.button.blue.disabled, +button.button.blue.disabled:hover { + color: white; + text-shadow: none; + cursor: default; + background-color: #7297d7; + background-image: -moz-linear-gradient(top, #7297d7, #7297d7); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7297d7), color-stop(100%, #7297d7)); + background-image: -webkit-linear-gradient(top, #7297d7, #7297d7); + background-image: linear-gradient(#7297d7, #7297d7); + border-color: #5e89d1; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#7297d7', endColorstr='#7297d7', GradientType=0)"; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#7297d7', endColorstr='#7297d7', GradientType=0); +} + +button.button.green { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #008740; + background-image: -moz-linear-gradient(top, #00974b, #008740); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00974b), color-stop(100%, #008740)); + background-image: -webkit-linear-gradient(top, #00974b, #008740); + background-image: linear-gradient(#00974b, #008740); + border: 1px #0f9b3b solid; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00974b', endColorstr='#008740', GradientType=0)"; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#00974b', endColorstr='#008740', GradientType=0); +} + +button.button.green:hover { + background-color: #119750; + background-image: -moz-linear-gradient(top, #10a65b, #119750); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #10a65b), color-stop(100%, #119750)); + background-image: -webkit-linear-gradient(top, #10a65b, #119750); + background-image: linear-gradient(#10a65b, #119750); + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#10a65b', endColorstr='#119750', GradientType=0)"; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#10a65b', endColorstr='#119750', GradientType=0); +} + +button.button.green:active { + background-color: #007236; + background-image: -moz-linear-gradient(top, #007236, #007236); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #007236), color-stop(100%, #007236)); + background-image: -webkit-linear-gradient(top, #007236, #007236); + background-image: linear-gradient(#007236, #007236); + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#007236', endColorstr='#007236', GradientType=0)"; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#007236', endColorstr='#007236', GradientType=0); +} + +button.button.green:disabled, +button.button.green:disabled.hover, +button.button.green.disabled, +button.button.green.disabled:hover { + color: white; + text-shadow: none; + cursor: default; + background-color: #2ca368; + background-image: -moz-linear-gradient(top, #2ca368, #2ca368); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2ca368), color-stop(100%, #2ca368)); + background-image: -webkit-linear-gradient(top, #2ca368, #2ca368); + background-image: linear-gradient(#2ca368, #2ca368); + border-color: #278f5b; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2ca368', endColorstr='#2ca368', GradientType=0)"; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#2ca368', endColorstr='#2ca368', GradientType=0); +} diff --git a/resources/css/ext.uls.css b/resources/css/ext.uls.css index 1206bf6c..620691a2 100644 --- a/resources/css/ext.uls.css +++ b/resources/css/ext.uls.css @@ -137,168 +137,6 @@ div.display-settings-block:hover .settings-text { opacity: 1; } -button.button { - display: inline-block; - padding: 0.4065em 1.2195em 0.4065em; - font-size: 0.813em; - font-weight: bold; - line-height: 1; - color: #252525; - text-align: center; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - cursor: pointer; - background-color: #e6e6e6; - background-image: -moz-linear-gradient(top, #f0f0f0, #e6e6e6); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(100%, #e6e6e6)); - background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6); - background-image: linear-gradient(#f0f0f0, #e6e6e6); - border: 1px #c9c9c9 solid; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#e6e6e6', GradientType=0)"; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#e6e6e6', GradientType=0); -} - -button.button:hover { - background-color: #f0f0f0; - background-image: -moz-linear-gradient(top, #f8f8f8, #f0f0f0); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8f8f8), color-stop(100%, #f0f0f0)); - background-image: -webkit-linear-gradient(top, #f8f8f8, #f0f0f0); - background-image: linear-gradient(#f8f8f8, #f0f0f0); - border-color: #c9c9c9; - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#f0f0f0', GradientType=0)"; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#f0f0f0', GradientType=0); -} - -button.button:active, -button.button.down { - background-color: #d8d8d8; - background-image: -moz-linear-gradient(top, #d3d3d3, #d8d8d8); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d3d3d3), color-stop(100%, #d8d8d8)); - background-image: -webkit-linear-gradient(top, #d3d3d3, #d8d8d8); - background-image: linear-gradient(#d3d3d3, #d8d8d8); - border-color: #c9c9c9; - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3', endColorstr='#d8d8d8', GradientType=0)"; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d3d3d3', endColorstr='#d8d8d8', GradientType=0); -} - -button.button:disabled, -button.button:disabled.hover, -button.button.disabled, -button.button.disabled:hover { - color: #c9c9c9; - cursor: default; - background-color: #f0f0f0; - background-image: -moz-linear-gradient(top, #f0f0f0, #f0f0f0); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(100%, #f0f0f0)); - background-image: -webkit-linear-gradient(top, #f0f0f0, #f0f0f0); - background-image: linear-gradient(#f0f0f0, #f0f0f0); - border-color: #e3e3e3; - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#f0f0f0', GradientType=0)"; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#f0f0f0', GradientType=0); -} - -button.button.blue { - color: #ffffff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - background-color: #3366bb; - background-image: -moz-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); -} - -button.button.blue:hover { - background-color: #3f77d7; - background-image: -moz-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); -} - -button.button.blue:active { - background-color: #2a549c; - background-image: -moz-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:disabled, -button.button.blue:disabled.hover, -button.button.blue.disabled, -button.button.blue.disabled:hover { - color: white; - text-shadow: none; - cursor: default; - background-color: #7297d7; - background-image: -moz-linear-gradient(top, #7297d7, #7297d7); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7297d7), color-stop(100%, #7297d7)); - background-image: -webkit-linear-gradient(top, #7297d7, #7297d7); - background-image: linear-gradient(#7297d7, #7297d7); - border-color: #5e89d1; - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#7297d7', endColorstr='#7297d7', GradientType=0)"; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#7297d7', endColorstr='#7297d7', GradientType=0); -} - -button.button.green { - color: #ffffff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - background-color: #008740; - background-image: -moz-linear-gradient(top, #00974b, #008740); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00974b), color-stop(100%, #008740)); - background-image: -webkit-linear-gradient(top, #00974b, #008740); - background-image: linear-gradient(#00974b, #008740); - border: 1px #0f9b3b solid; - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00974b', endColorstr='#008740', GradientType=0)"; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#00974b', endColorstr='#008740', GradientType=0); -} - -button.button.green:hover { - background-color: #119750; - background-image: -moz-linear-gradient(top, #10a65b, #119750); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #10a65b), color-stop(100%, #119750)); - background-image: -webkit-linear-gradient(top, #10a65b, #119750); - background-image: linear-gradient(#10a65b, #119750); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#10a65b', endColorstr='#119750', GradientType=0)"; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#10a65b', endColorstr='#119750', GradientType=0); -} - -button.button.green:active { - background-color: #007236; - background-image: -moz-linear-gradient(top, #007236, #007236); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #007236), color-stop(100%, #007236)); - background-image: -webkit-linear-gradient(top, #007236, #007236); - background-image: linear-gradient(#007236, #007236); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#007236', endColorstr='#007236', GradientType=0)"; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#007236', endColorstr='#007236', GradientType=0); -} - -button.button.green:disabled, -button.button.green:disabled.hover, -button.button.green.disabled, -button.button.green.disabled:hover { - color: white; - text-shadow: none; - cursor: default; - background-color: #2ca368; - background-image: -moz-linear-gradient(top, #2ca368, #2ca368); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2ca368), color-stop(100%, #2ca368)); - background-image: -webkit-linear-gradient(top, #2ca368, #2ca368); - background-image: linear-gradient(#2ca368, #2ca368); - border-color: #278f5b; - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2ca368', endColorstr='#2ca368', GradientType=0)"; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#2ca368', endColorstr='#2ca368', GradientType=0); -} - /* Interlanguage links */ #p-lang ul { font-family: 'Autonym', sans-serif;