Adding skin styles for the changeslist module.

The changeslist module is the list of results on special
pages such as recent changes, watchlist, and parts of action history.

Adds a skin style to special.changeslist module.

Bug: T228419
Change-Id: I324b1f136f5314cb6acdba3155b07136bbde363a
This commit is contained in:
Jan Drewniak 2019-07-29 11:50:05 +02:00
parent 725383771e
commit 5e7a35946c
6 changed files with 132 additions and 3 deletions

View file

@ -36,13 +36,14 @@
}
.changeslist-row() {
font-size: 0.85em;
list-style: none;
position: relative;
min-height: 100px;
min-height: 80px;
/* !important to override the too-specific rule .content ol li, .content ul li */
margin: 0 !important;
padding: 12px 0;
border-bottom: 1px solid @colorGray14;
padding-bottom: 32px;
}
.changeslist-row-item() {

View file

@ -27,6 +27,13 @@
@grayLight: @colorGray12;
@grayLightest: @colorGray14;
/*
* FIXME: Use these variables directly from mediawiki-ui-base when available.
*/
@wmui-color-green30: #14866d;
@wmui-color-red30: #b32424;
@wmui-color-grey30: #a2a9b1;
@skinContentBgColor: #fff;
// Navigation Drawers

View file

@ -185,6 +185,12 @@
],
"mediawiki.content.json": [
"skinStyles/mediawiki.content-json/minerva.less"
],
"mediawiki.special.changeslist": [
"skinStyles/mediawiki.special.changeslist.less"
],
"mediawiki.special.changeslist.legend": [
"skinStyles/mediawiki.special.changeslist.legend.less"
]
}
},

View file

@ -171,7 +171,6 @@
li {
min-height: inherit;
padding: 12px 0;
font-size: 0.85em;
}
li:after {
@ -214,6 +213,7 @@
.mw-changeslist-date {
float: left;
font-weight: bold;
clear: none;
}
// user name

View file

@ -0,0 +1,8 @@
/**
* Changeslist legends are hidden on Minerva due to their complexity
* on mobile displays.
*/
.mw-changeslist-legend {
display: none !important;
}

View file

@ -0,0 +1,107 @@
/**
* The "changeslist" module appears on Special pages such
* as recent changes, watchlist, and parts of the action history page.
*/
@import '../minerva.less/minerva.mixins';
@import '../minerva.less/minerva.variables';
@import 'mediawiki.ui/mixins.buttons';
@import 'mediawiki.ui/variables';
ul.special {
padding-left: 0 !important; // overriding `.content ul`
// the following selector are nested due to their
// generic names.
.mw-title {
font-weight: bold;
}
.comment {
clear: both;
font-style: italic;
line-height: 1.4em;
padding: 0.5em 0;
}
}
.mw-changeslist-line {
.changeslist-row();
}
.mw-changeslist-line-inner {
display: block;
}
.mw-changeslist-line-inner > * {
float: left;
margin-right: 0.5em;
}
.mw-changeslist-line-inner:before,
.mw-changeslist-line-inner:after {
.clearfix();
}
.mw-changeslist-date,
.mw-tag-markers {
clear: left;
}
/**
* Colored watchlist and recent changes numbers.
*/
.mw-plusminus-pos {
color: @wmui-color-green30;
}
.mw-plusminus-neg {
color: @wmui-color-red30;
}
.mw-plusminus-null {
color: @wmui-color-grey30;
}
/*
* Bidi-isolate these numbers.
* See https://phabricator.wikimedia.org/T93484
*/
.mw-plusminus-pos,
.mw-plusminus-neg,
.mw-plusminus-null {
unicode-bidi: -moz-isolate;
unicode-bidi: isolate;
}
/**
* "pill" style tags meant to emulate the OOUI ".oo-ui-tagItemWidget" style.
*/
.mw-tag-markers {
margin: 0 0 0.5em 0;
}
.mw-tag-marker {
// due to the extra space afforded by padding,
// we can make the font-size a bit smaller to save space.
font-size: @taglineFontSize;
display: inline-block;
box-sizing: border-box;
height: 1.6em;
border: 1px solid #a2a9b1;
border-radius: 1.6em;
line-height: 1.6em;
padding: 0 0.6em;
vertical-align: middle;
white-space: nowrap;
}
/**
* Button style rollback link, visible to admins.
*/
.mw-rollback-link {
.mw-ui-button();
float: right;
font-size: @taglineFontSize;
}