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": {
"scripts": "js/ext.uls.interface.js",
"styles": "css/ext.uls.interface.css",
"styles": "css/ext.uls.interface.less",
"dependencies": [
"ext.uls.common",
"mediawiki.jqueryMsg",
@@ -219,7 +219,7 @@
},
"ext.uls.languagesettings": {
"scripts": "js/ext.uls.languagesettings.js",
"styles": "css/ext.uls.languagesettings.css",
"styles": "css/ext.uls.languagesettings.less",
"dependencies": [
"ext.uls.messages",
"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;
}

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

@@ -2,13 +2,11 @@
@import 'ext.uls.mixins.less';
/* stylelint-disable selector-no-id */
#p-lang .body ul .uls-trigger,
#p-lang .pBody ul .uls-trigger {
background-image: none;
padding: 0;
}
/* stylelint-enable selector-no-id */
.mw-interlanguage-selector,
@@ -27,8 +25,8 @@
.mw-interlanguage-selector:active,
.mw-interlanguage-selector.selector-open {
color: #555;
background-color: #ccc;
background-color: #c8ccd1;
color: #54595d;
}
.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-image-svg( '../images/display.svg', '../images/display.png' );
background-size: 20px auto;
color: #252525;
color: #222;
padding-left: 26px;
cursor: pointer;
}
@@ -22,7 +22,7 @@ div.display-settings-block {
}
.ext-uls-sub-panel {
border-top: 1px solid #eee;
border-top: 1px solid #eaecf0;
padding-top: 25px;
top: -20px;
position: relative;
@@ -34,38 +34,30 @@ div.display-settings-block {
}
.uls-font-item {
border-bottom: 1px solid #eee;
background: #fbfbfb;
border-bottom: 1px solid #eaecf0;
background: #f8f9fa;
padding: 10px 0;
&:first-child {
border-top: 1px solid #eee;
border-top: 1px solid #eaecf0;
}
}
.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;
}
.uls-content-fonts:hover,
.uls-ui-fonts:hover {
background-color: #f6f6f6;
}
.uls-font-label strong {
color: #252525;
}
.uls-font-label {
color: #555;
color: #54595d;
font-size: 10pt;
}
.uls-font-label strong {
color: #222;
}
.uls-display-settings-anon-label {
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-image-svg( '../images/input.svg', '../images/input.png' );
background-size: 20px auto;
color: #252525;
color: #222;
padding-left: 26px;
cursor: pointer;
}
@@ -25,9 +25,9 @@
}
.uls-ime-menu-settings-item {
background-color: #f0f0f0;
background-color: #f8f9fa;
border-radius: 0 0 5px 5px;
border-top: 1px solid #ddd;
border-top: 1px solid #c8ccd1;
margin-top: 6px;
padding: 4px 2px;
color: #444;
@@ -48,7 +48,7 @@
background: transparent no-repeat center top;
.background-image-svg( '../images/cog.svg', '../images/cog.png' );
background-size: auto 14px;
border-left: 1px solid #ccc;
border-left: 1px solid #c8ccd1;
width: 22px;
height: 14px;
position: absolute;
@@ -57,7 +57,7 @@
}
.uls-ime-menu-settings-item > a:hover {
background-color: #f0f0f0;
background-color: #f8f9fa;
color: #000;
}
@@ -80,7 +80,7 @@
border-top: 0;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-bottom: 8px solid #f0f0f0;
border-bottom: 8px solid #f8f9fa;
content: '';
position: relative;
vertical-align: bottom;
@@ -97,7 +97,7 @@
.uls-input-settings .uls-input-settings-inputmethods-list {
margin: 12px 0;
padding: 6px 10px;
background: #f0f0f0;
background: #f8f9fa;
.uls-input-settings-name {
unicode-bidi: -moz-isolate;
@@ -110,7 +110,7 @@
}
.uls-ime-notification-bubble .link {
color: #0645ad;
color: #36c;
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 */
@import 'mediawiki.mixins';
#p-lang .uls-settings-trigger {
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 {
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 );
.vertical-gradient( #fbfbfb, #f0f0f0 );
border-top: 1px solid #c8ccd1;
padding-left: 10px;
line-height: 1.2em;
border-radius: 0 0 5px 5px;
@@ -32,12 +28,12 @@
}
.settings-text {
color: #555;
color: #54595d;
font-size: 9pt;
}
.display-settings-block:hover .settings-text {
color: #252525;
color: #222;
}
.languagesettings-menu h1 {
@@ -47,17 +43,17 @@
font-weight: normal;
border: 0;
padding: 15px 0 3px 15px;
color: #555;
color: #54595d;
}
#languagesettings-settings-panel {
padding: 0 15px;
color: #252525;
color: #222;
background: #fff;
}
#languagesettings-settings-panel h3 {
color: #252525;
color: #222;
padding-top: 15px;
margin-top: 1pt;
line-height: 20pt;
@@ -65,13 +61,13 @@
}
#languagesettings-settings-panel h4 {
color: #252525;
color: #222;
font-size: 12pt;
}
/* Buttons in the selector panel */
.menu-section {
color: #777;
color: #72777d;
padding: 5px 0 5px 50px;
border-left: 3px solid transparent;
display: block;
@@ -79,7 +75,7 @@
}
#language-settings-dialog {
background: #fbfbfb;
background: #f8f9fa;
/* Ensure base font size is same in different skins */
font-size: medium;
}
@@ -90,9 +86,9 @@
#languagesettings-panels .menu-section.active,
#languagesettings-panels .menu-section.active:hover {
background-color: #fff;
color: #000;
background-color: #f0f0f0;
border-left-color: #36b;
border-left-color: #36c;
}
.settings-menu-items .menu-section {
@@ -102,11 +98,11 @@
}
.settings-menu-items .menu-section:hover {
background-color: #f5f5f5;
background-color: #fff;
}
.language-settings-buttons {
border-top: 1px solid #f0f0f0;
border-top: 1px solid #eaecf0;
margin-top: 25px;
padding: 15px;
width: auto;
@@ -119,13 +115,14 @@
.uls-ui-languages p,
.checkbox {
color: #555;
color: #54595d;
font-size: 10pt;
}
/* mediawiki.ui does not have a pressed state style. */
#languagesettings-panels .mw-ui-pressed {
background-color: #d8d8d8;
background-color: #2a4b8d;
color: #fff;
}
.checkbox input[type='checkbox'] {
@@ -133,7 +130,7 @@
}
.checkbox strong {
color: #252525;
color: #222;
}
label.checkbox input[type='checkbox'] {

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

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

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

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