bryce/mediawiki-extensions-UniversalLanguageSelector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace outdated colors with WikimediaUI palette ones

Browse Source 
Replacing all colors with current WikimediaUI palette ones.
Also:
- changing two files over to LESS in order to
 - make use of central gradient mixin instead of one with
   unnecessary vendor extensions and
 - concatenating selectors in one occurrence.

Bug: T174237
Change-Id: I5d302f29b079f6abdba5abf3b58d6ba254e1a4ac
This commit is contained in:
Volker E
2017-08-26 01:13:41 -07:00
parent aebe0ea7c2
commit fd0bb2600b
11 changed files with 73 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
extension.json
View File

@@ -199,7 +199,7 @@
}, },
"ext.uls.interface": { "ext.uls.interface": {
"scripts": "js/ext.uls.interface.js", "scripts": "js/ext.uls.interface.js",
"styles": "css/ext.uls.interface.css", "styles": "css/ext.uls.interface.less",
"dependencies": [ "dependencies": [
"ext.uls.common", "ext.uls.common",
"mediawiki.jqueryMsg", "mediawiki.jqueryMsg",
@@ -219,7 +219,7 @@
}, },
"ext.uls.languagesettings": { "ext.uls.languagesettings": {
"scripts": "js/ext.uls.languagesettings.js", "scripts": "js/ext.uls.languagesettings.js",
"styles": "css/ext.uls.languagesettings.css", "styles": "css/ext.uls.languagesettings.less",
"dependencies": [ "dependencies": [
"ext.uls.messages", "ext.uls.messages",
"ext.uls.preferences", "ext.uls.preferences",

2
resources/css/ext.uls-monobook.css
View File

@@ -1,3 +1,3 @@
#pt-uls { /* stylelint-disable selector-no-id */ #pt-uls { /* stylelint-disable-line selector-no-id */
text-transform: none; text-transform: none;
} }

6
resources/css/ext.uls.compactlinks.less
View File

@@ -2,13 +2,11 @@
@import 'ext.uls.mixins.less'; @import 'ext.uls.mixins.less';
/* stylelint-disable selector-no-id */ /* stylelint-disable selector-no-id */
#p-lang .body ul .uls-trigger, #p-lang .body ul .uls-trigger,
#p-lang .pBody ul .uls-trigger { #p-lang .pBody ul .uls-trigger {
background-image: none; background-image: none;
padding: 0; padding: 0;
} }
/* stylelint-enable selector-no-id */ /* stylelint-enable selector-no-id */
.mw-interlanguage-selector, .mw-interlanguage-selector,
@@ -27,8 +25,8 @@
.mw-interlanguage-selector:active, .mw-interlanguage-selector:active,
.mw-interlanguage-selector.selector-open { .mw-interlanguage-selector.selector-open {
color: #555; background-color: #c8ccd1;
background-color: #ccc; color: #54595d;
} }
.interlanguage-uls-menu { .interlanguage-uls-menu {

32
resources/css/ext.uls.displaysettings.less
View File

@@ -4,7 +4,7 @@ div.display-settings-block {
background: transparent no-repeat left top; background: transparent no-repeat left top;
.background-image-svg( '../images/display.svg', '../images/display.png' ); .background-image-svg( '../images/display.svg', '../images/display.png' );
background-size: 20px auto; background-size: 20px auto;
color: #252525; color: #222;
padding-left: 26px; padding-left: 26px;
cursor: pointer; cursor: pointer;
} }
@@ -22,7 +22,7 @@ div.display-settings-block {
} }
.ext-uls-sub-panel { .ext-uls-sub-panel {
border-top: 1px solid #eee; border-top: 1px solid #eaecf0;
padding-top: 25px; padding-top: 25px;
top: -20px; top: -20px;
position: relative; position: relative;
@@ -34,38 +34,30 @@ div.display-settings-block {
} }
.uls-font-item { .uls-font-item {
border-bottom: 1px solid #eee; border-bottom: 1px solid #eaecf0;
background: #fbfbfb; background: #f8f9fa;
padding: 10px 0; padding: 10px 0;
&:first-child { &:first-child {
border-top: 1px solid #eee; border-top: 1px solid #eaecf0;
} }
} }
.uls-font-label, .uls-font-label,
.uls-font-select { .uls-font-select,
#uls-display-settings-anon-log-in-cta { /* stylelint-disable-line selector-no-id */
font-size: 10pt; font-size: 10pt;
} }
.uls-content-fonts:hover,
.uls-ui-fonts:hover {
background-color: #f6f6f6;
}
.uls-font-label strong {
color: #252525;
}
.uls-font-label { .uls-font-label {
color: #555; color: #54595d;
font-size: 10pt; font-size: 10pt;
} }
.uls-font-label strong {
color: #222;
}
.uls-display-settings-anon-label { .uls-display-settings-anon-label {
font-weight: bold; font-weight: bold;
} }
#uls-display-settings-anon-log-in-cta { /* stylelint-disable-line selector-no-id */
font-size: 10pt;
}

16
resources/css/ext.uls.inputsettings.less
View File

@@ -4,7 +4,7 @@
background: transparent no-repeat left top; background: transparent no-repeat left top;
.background-image-svg( '../images/input.svg', '../images/input.png' ); .background-image-svg( '../images/input.svg', '../images/input.png' );
background-size: 20px auto; background-size: 20px auto;
color: #252525; color: #222;
padding-left: 26px; padding-left: 26px;
cursor: pointer; cursor: pointer;
} }
@@ -25,9 +25,9 @@
} }
.uls-ime-menu-settings-item { .uls-ime-menu-settings-item {
background-color: #f0f0f0; background-color: #f8f9fa;
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
border-top: 1px solid #ddd; border-top: 1px solid #c8ccd1;
margin-top: 6px; margin-top: 6px;
padding: 4px 2px; padding: 4px 2px;
color: #444; color: #444;
@@ -48,7 +48,7 @@
background: transparent no-repeat center top; background: transparent no-repeat center top;
.background-image-svg( '../images/cog.svg', '../images/cog.png' ); .background-image-svg( '../images/cog.svg', '../images/cog.png' );
background-size: auto 14px; background-size: auto 14px;
border-left: 1px solid #ccc; border-left: 1px solid #c8ccd1;
width: 22px; width: 22px;
height: 14px; height: 14px;
position: absolute; position: absolute;
@@ -57,7 +57,7 @@
} }
.uls-ime-menu-settings-item > a:hover { .uls-ime-menu-settings-item > a:hover {
background-color: #f0f0f0; background-color: #f8f9fa;
color: #000; color: #000;
} }
@@ -80,7 +80,7 @@
border-top: 0; border-top: 0;
border-right: 8px solid transparent; border-right: 8px solid transparent;
border-left: 8px solid transparent; border-left: 8px solid transparent;
border-bottom: 8px solid #f0f0f0; border-bottom: 8px solid #f8f9fa;
content: ''; content: '';
position: relative; position: relative;
vertical-align: bottom; vertical-align: bottom;
@@ -97,7 +97,7 @@
.uls-input-settings .uls-input-settings-inputmethods-list { .uls-input-settings .uls-input-settings-inputmethods-list {
margin: 12px 0; margin: 12px 0;
padding: 6px 10px; padding: 6px 10px;
background: #f0f0f0; background: #f8f9fa;
.uls-input-settings-name { .uls-input-settings-name {
unicode-bidi: -moz-isolate; unicode-bidi: -moz-isolate;
@@ -110,7 +110,7 @@
} }
.uls-ime-notification-bubble .link { .uls-ime-notification-bubble .link {
color: #0645ad; color: #36c;
cursor: pointer; cursor: pointer;
} }

26
resources/css/ext.uls.interface.css
View File

@@ -1,26 +0,0 @@
/* stylelint-disable selector-no-id */
#uls-settings-block {
border-top: 1px solid #c9c9c9;
background: #f8f8f8;
background: -webkit-gradient( linear, left top, left bottom, from( #fbfbfb ), to( #f0f0f0 ) );
background: -webkit-linear-gradient( top, #fbfbfb, #f0f0f0 );
background: -moz-linear-gradient( top, #fbfbfb, #f0f0f0 );
background: -o-linear-gradient( top, #fbfbfb, #f0f0f0 );
background: linear-gradient( #fbfbfb, #f0f0f0 );
padding-left: 10px;
line-height: 1.2em;
border-radius: 0 0 5px 5px;
}
#uls-settings-block div.display-settings-block,
#uls-settings-block div.input-settings-block {
display: inline-block;
margin: 8px 15px;
color: #565656;
}
#uls-settings-block div.display-settings-block:hover,
#uls-settings-block div.input-settings-block:hover {
color: #252525;
}

22
resources/css/ext.uls.interface.less Normal file
View File

@@ -0,0 +1,22 @@
/* stylelint-disable selector-no-id */
@import 'mediawiki.mixins';
#uls-settings-block {
border-top: 1px solid #c8ccd1;
.vertical-gradient( #fbfbfb, #f0f0f0 );
padding-left: 10px;
line-height: 1.2em;
border-radius: 0 0 5px 5px;
}
#uls-settings-block div.display-settings-block,
#uls-settings-block div.input-settings-block {
display: inline-block;
margin: 8px 15px;
color: #54595d;
}
#uls-settings-block div.display-settings-block:hover,
#uls-settings-block div.input-settings-block:hover {
color: #222;
}

3
resources/css/ext.uls.interlanguage.less
View File

@@ -1,6 +1,5 @@
@import 'mediawiki.mixins';
/* stylelint-disable selector-no-id */ /* stylelint-disable selector-no-id */
@import 'mediawiki.mixins';
#p-lang .uls-settings-trigger { #p-lang .uls-settings-trigger {
background: transparent no-repeat right top; background: transparent no-repeat right top;

43
resources/css/ext.uls.languagesettings.css → resources/css/ext.uls.languagesettings.less
View File

@@ -1,13 +1,9 @@
/* stylelint-disable selector-no-id */ @import 'mediawiki.mixins';
/* stylelint-disable selector-no-id */
#uls-settings-block { #uls-settings-block {
border-top: 1px solid #c9c9c9; .vertical-gradient( #fbfbfb, #f0f0f0 );
background: #f8f8f8; border-top: 1px solid #c8ccd1;
background: -webkit-gradient( linear, left top, left bottom, from( #fbfbfb ), to( #f0f0f0 ) );
background: -webkit-linear-gradient( top, #fbfbfb, #f0f0f0 );
background: -moz-linear-gradient( top, #fbfbfb, #f0f0f0 );
background: -o-linear-gradient( top, #fbfbfb, #f0f0f0 );
background: linear-gradient( #fbfbfb, #f0f0f0 );
padding-left: 10px; padding-left: 10px;
line-height: 1.2em; line-height: 1.2em;
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
@@ -32,12 +28,12 @@
} }
.settings-text { .settings-text {
color: #555; color: #54595d;
font-size: 9pt; font-size: 9pt;
} }
.display-settings-block:hover .settings-text { .display-settings-block:hover .settings-text {
color: #252525; color: #222;
} }
.languagesettings-menu h1 { .languagesettings-menu h1 {
@@ -47,17 +43,17 @@
font-weight: normal; font-weight: normal;
border: 0; border: 0;
padding: 15px 0 3px 15px; padding: 15px 0 3px 15px;
color: #555; color: #54595d;
} }
#languagesettings-settings-panel { #languagesettings-settings-panel {
padding: 0 15px; padding: 0 15px;
color: #252525; color: #222;
background: #fff; background: #fff;
} }
#languagesettings-settings-panel h3 { #languagesettings-settings-panel h3 {
color: #252525; color: #222;
padding-top: 15px; padding-top: 15px;
margin-top: 1pt; margin-top: 1pt;
line-height: 20pt; line-height: 20pt;
@@ -65,13 +61,13 @@
} }
#languagesettings-settings-panel h4 { #languagesettings-settings-panel h4 {
color: #252525; color: #222;
font-size: 12pt; font-size: 12pt;
} }
/* Buttons in the selector panel */ /* Buttons in the selector panel */
.menu-section { .menu-section {
color: #777; color: #72777d;
padding: 5px 0 5px 50px; padding: 5px 0 5px 50px;
border-left: 3px solid transparent; border-left: 3px solid transparent;
display: block; display: block;
@@ -79,7 +75,7 @@
} }
#language-settings-dialog { #language-settings-dialog {
background: #fbfbfb; background: #f8f9fa;
/* Ensure base font size is same in different skins */ /* Ensure base font size is same in different skins */
font-size: medium; font-size: medium;
} }
@@ -90,9 +86,9 @@
#languagesettings-panels .menu-section.active, #languagesettings-panels .menu-section.active,
#languagesettings-panels .menu-section.active:hover { #languagesettings-panels .menu-section.active:hover {
background-color: #fff;
color: #000; color: #000;
background-color: #f0f0f0; border-left-color: #36c;
border-left-color: #36b;
} }
.settings-menu-items .menu-section { .settings-menu-items .menu-section {
@@ -102,11 +98,11 @@
} }
.settings-menu-items .menu-section:hover { .settings-menu-items .menu-section:hover {
background-color: #f5f5f5; background-color: #fff;
} }
.language-settings-buttons { .language-settings-buttons {
border-top: 1px solid #f0f0f0; border-top: 1px solid #eaecf0;
margin-top: 25px; margin-top: 25px;
padding: 15px; padding: 15px;
width: auto; width: auto;
@@ -119,13 +115,14 @@
.uls-ui-languages p, .uls-ui-languages p,
.checkbox { .checkbox {
color: #555; color: #54595d;
font-size: 10pt; font-size: 10pt;
} }
/* mediawiki.ui does not have a pressed state style. */ /* mediawiki.ui does not have a pressed state style. */
#languagesettings-panels .mw-ui-pressed { #languagesettings-panels .mw-ui-pressed {
background-color: #d8d8d8; background-color: #2a4b8d;
color: #fff;
} }
.checkbox input[type='checkbox'] { .checkbox input[type='checkbox'] {
@@ -133,7 +130,7 @@
} }
.checkbox strong { .checkbox strong {
color: #252525; color: #222;
} }
label.checkbox input[type='checkbox'] { label.checkbox input[type='checkbox'] {

2
resources/css/ext.uls.less
View File

@@ -47,7 +47,7 @@
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 0;
border-right: 1px solid #c9c9c9; border-right: 1px solid #c8ccd1;
opacity: 0.8; opacity: 0.8;
} }

8
resources/css/ext.uls.mixins.less
View File

@@ -14,13 +14,13 @@
&.selector-right { &.selector-right {
&:before { &:before {
/* @noflip */ /* @noflip */
border-left: 10px solid #c9c9c9; border-left: 10px solid #c8ccd1;
/* @noflip */ /* @noflip */
right: -11px; right: -11px;
} }
&:after { &:after {
/* @noflip */ /* @noflip */
border-left: 10px solid #fcfcfc; border-left: 10px solid #f8f9fa;
/* @noflip */ /* @noflip */
right: -10px; right: -10px;
} }
@@ -28,13 +28,13 @@
&.selector-left { &.selector-left {
&:before { &:before {
/* @noflip */ /* @noflip */
border-right: 10px solid #c9c9c9; border-right: 10px solid #c8ccd1;
/* @noflip */ /* @noflip */
left: -11px; left: -11px;
} }
&:after { &:after {
/* @noflip */ /* @noflip */
border-right: 10px solid #fcfcfc; border-right: 10px solid #f8f9fa;
/* @noflip */ /* @noflip */
left: -10px; left: -10px;
} }