.config-block {
margin-top: 2em;
display: block;
-
}
.config-block-label {
"karma-qunit": "2.1.0",
"postcss-less": "2.0.0",
"qunit": "2.6.2",
- "stylelint": "9.2.0",
- "stylelint-config-wikimedia": "0.4.3",
+ "stylelint": "9.6.0",
+ "stylelint-config-wikimedia": "0.5.0",
"wdio-junit-reporter": "0.2.0",
"wdio-mediawiki": "file:tests/selenium/wdio-mediawiki",
"wdio-mocha-framework": "0.5.13",
z-index: 100000;
cursor: default;
}
+
.tipsy-inner {
padding: 5px 8px 4px 8px;
- /*background-color: #e8f2f8;*/
+ /* background-color: #e8f2f8; */
background-color: #fff;
border: solid 1px #a7d7f9;
color: #000;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=0, OffY=2, Strength=6, Direction=90, Color='#cccccc');
*/
}
+
.tipsy-arrow {
position: absolute;
/* @embed */
width: 11px;
height: 6px;
}
-/* @noflip */ .tipsy-n .tipsy-arrow {
+
+/* @noflip */
+.tipsy-n .tipsy-arrow {
top: 0;
left: 50%;
margin-left: -5px;
}
-/* @noflip */ .tipsy-nw .tipsy-arrow {
+
+/* @noflip */
+.tipsy-nw .tipsy-arrow {
top: 0;
left: 10px;
}
-/* @noflip */ .tipsy-ne .tipsy-arrow {
+
+/* @noflip */
+.tipsy-ne .tipsy-arrow {
top: 0;
right: 10px;
}
-/* @noflip */ .tipsy-s .tipsy-arrow {
+
+/* @noflip */
+.tipsy-s .tipsy-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
background-position: bottom left;
}
-/* @noflip */ .tipsy-sw .tipsy-arrow {
+
+/* @noflip */
+.tipsy-sw .tipsy-arrow {
bottom: 0;
left: 10px;
background-position: bottom left;
}
-/* @noflip */ .tipsy-se .tipsy-arrow {
+
+/* @noflip */
+.tipsy-se .tipsy-arrow {
bottom: 0;
right: 10px;
background-position: bottom left;
}
-/* @noflip */ .tipsy-e .tipsy-arrow {
+
+/* @noflip */
+.tipsy-e .tipsy-arrow {
top: 50%;
margin-top: -5px;
right: 0;
height: 11px;
background-position: top right;
}
-/* @noflip */ .tipsy-w .tipsy-arrow {
+
+/* @noflip */
+.tipsy-w .tipsy-arrow {
top: 50%;
margin-top: -5px;
left: 0;
-ms-user-select: none;
user-select: none;
}
+
.mw-collapsible-toggle-default:before {
content: '[';
}
+
.mw-collapsible-toggle-default:after {
content: ']';
}
cursor: pointer;
}
-/* collapse links in captions should be inline */
+/* Collapse links in captions should be inline */
caption .mw-collapsible-toggle,
.mw-content-ltr caption .mw-collapsible-toggle,
.mw-content-rtl caption .mw-collapsible-toggle,
@exclude: ~'.mw-made-collapsible';
.client-js {
-
ol.mw-collapsible:before,
ul.mw-collapsible:before,
.mw-collapsible-toggle-li {
// Avoid FOUC/reflows on collapsed elements by making sure they are opened by default (T42812)
> p,
> table,
- // Manual:Collapsible_elements/Demo/Simple#Collapsed_by_default
- > thead + tbody,
+ > thead + tbody, // 'https://www.mediawiki.org/wiki/Manual:Collapsible_elements/Demo/Simple#Collapsed_by_default'
tr:not( :first-child ),
.mw-collapsible-content {
display: none;
.mw-category {
.column-count(3);
.column-width(24em);
+
.mw-category-group {
ul {
margin-top: 0;
margin-bottom: 0;
}
+
li {
.column-break-inside-avoid;
}
.api-main-links {
text-align: center;
}
+
.api-main-links ul:before {
content: '[';
}
+
.api-main-links ul:after {
content: ']';
}
margin-bottom: 1em;
}
-/* Overwriting OOUI is no fun */
+/* Overwriting OOUI */
.mw-feedbackDialog-feedback-form .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
min-width: 4.2em;
width: 20%;
}
+
.mw-feedbackDialog-feedback-form .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
width: 80%;
}
.hlist dt:after {
content: ':';
}
+
.hlist dd:after,
.hlist li:after {
content: ' ·';
font-weight: bold;
}
+
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
content: none;
}
+
/* For IE8 */
.hlist dd.hlist-last-child:after,
.hlist dt.hlist-last-child:after,
.hlist li.hlist-last-child:after {
content: none;
}
+
/* Add parentheses around nested lists */
.hlist dd dd:first-child:before,
.hlist dd dt:first-child:before,
content: '(';
font-weight: normal;
}
+
.hlist dd dd:last-child:after,
.hlist dd dt:last-child:after,
.hlist dd li:last-child:after,
content: ')';
font-weight: normal;
}
+
/* For IE8 */
.hlist dd dd.hlist-last-child:after,
.hlist dd dt.hlist-last-child:after,
content: ')';
font-weight: normal;
}
+
/* Put ordinals in front of ordered list items */
.hlist ol {
counter-reset: list-item;
}
+
.hlist ol > li {
counter-increment: list-item;
}
+
.hlist ol > li:before {
content: counter( list-item ) ' ';
}
+
.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
}
}
-// Flatlist styling for PHP widgets...
+// Flatlist styling for PHP (`.oo-ui-fieldLayout-align-inline`) &
+// JS (`.oo-ui-radioOptionWidget, .oo-ui-checkboxMultioptionWidget`) widgets
.mw-htmlform-flatlist .oo-ui-fieldLayout-align-inline,
-// ...and for JS widgets
.mw-htmlform-flatlist .oo-ui-radioOptionWidget,
.mw-htmlform-flatlist .oo-ui-checkboxMultioptionWidget {
display: inline-block;
margin-left: 4px;
}
-/* stylelint-disable indentation */
.mw-icon-question:lang( ar ),
.mw-icon-question:lang( fa ),
.mw-icon-question:lang( ur ) {
}
.hyphens( @value: auto ) {
- & when ( @value = auto ){
+ & when ( @value = auto ) {
// Legacy `word-wrap`; IE 6-11, Edge 12+, Firefox 3.5+, Chrome 4+, Safari 3.1+,
// Opera 11.5+, iOS 3.2+, Android 2.1+
// `overflow-wrap` is W3 standard, but it doesn't seem as if browser vendors
// and remaining parameters are additional transitions."
.transition-transform( ... ) {
-webkit-backface-visibility: hidden; // Older Webkit browsers: Promote element to a composite layer & involve the GPU
-
-webkit-transition: -webkit-transform @arguments; // Safari 3.1-8, iOS 3.2-8.4, Android 2.1-4.4.4
-moz-transition: -moz-transform @arguments; // Firefox 4-15 for `-moz-transition`
transition: transform @arguments; // Chrome 36+, Firefox 16+, IE 10+, Safari 9+, Opera 12.1+, iOS 9.2+, Android 36+
-webkit-box-flex: @grow; // iOS 6-, Safari 3.1-6
-moz-box-flex: @grow; // Firefox 21-
width: @width; // Fallback for flex-basis
-
-ms-flex: @grow @shrink @width; // IE 10
flex: @grow @shrink @width;
-
-webkit-box-ordinal-group: @order; // iOS 6-, Safari 3.1-6
-moz-box-ordinal-group: @order; // Firefox 21-
-ms-flex-order: @order; // IE 10
from {
.transform-rotate( 0deg );
}
+
to {
.transform-rotate( 360deg );
}
background-color: #fff;
/* Click handler in mediawiki.notification.js */
cursor: pointer;
-
opacity: 0;
-webkit-transform: translateX( 35px );
transform: translateX( 35px );
white-space: normal;
overflow: visible;
}
-
// On the watchlist, reserve a bit more
.mw-special-Watchlist .rcfilters-head {
min-height: @rcfilters-wl-head-min-height;
-
}
.mw-rcfilters-collapsed {
.cloptions {
display: none;
}
-
}
}
.animation-delay( 0s );
}
}
+
body:not( .mw-rcfilters-ui-initialized ) .rcfilters-spinner {
display: block;
// When initializing, display the spinner on top of the area where the UI will appear
margin-top: -( @rcfilters-head-min-height + @rcfilters-head-margin-bottom ) / 1.5;
}
+
body.mw-rcfilters-ui-loading .rcfilters-spinner {
display: block;
// When loading new results, display the spinner on top of the results area
100% {
-webkit-transform: scale( 0.625 );
}
+
20% { // equals 320ms
opacity: 0.87;
-webkit-transform: scale( 1 );
100% {
-moz-transform: scale( 0.625 );
}
+
20% {
opacity: 0.87;
-moz-transform: scale( 1 );
100% {
transform: scale( 0.625 );
}
+
20% { // equals 320ms
opacity: 0.87;
transform: scale( 1 );
.mw-rcfilters-circle-color( @highlight-bluedot, true, @highlight-bluedot );
}
}
-
}
// Watchlist unseen highlighted fixes
60% {
border-top-color: @colorProgressive;
}
+
100% {
border-top-color: @colorGray12;
}
&-c1 {
.mw-rcfilters-circle-color( @highlight-c1 );
}
+
&-c2 {
.mw-rcfilters-circle-color( @highlight-c2 );
}
+
&-c3 {
.mw-rcfilters-circle-color( @highlight-c3 );
}
+
&-c4 {
.mw-rcfilters-circle-color( @highlight-c4 );
}
+
&-c5 {
.mw-rcfilters-circle-color( @highlight-c5 );
}
padding: 0.6em 0; // Same top padding as the handle
flex: 0 0 auto;
}
+
&-queryName {
flex: 1 1 auto;
padding: 0.6em 0; // Same top padding as the handle
&-bottom {
.flex-display;
.flex;
-
margin-top: 1em;
}
}
background-color: @highlight-none;
}
}
+
&-c1 {
.mw-rcfilters-circle-color( @highlight-c1, false );
border-color: @highlight-c1;
background-color: @highlight-c1;
}
}
+
&-c2 {
.mw-rcfilters-circle-color( @highlight-c2, true );
border-color: @highlight-c2;
background-color: @highlight-c2;
}
}
+
&-c3 {
.mw-rcfilters-circle-color( @highlight-c3, true );
border-color: @highlight-c3;
background-color: @highlight-c3;
}
}
+
&-c4 {
.mw-rcfilters-circle-color( @highlight-c4, true );
border-color: @highlight-c4;
background-color: @highlight-c4;
}
}
+
&-c5 {
.mw-rcfilters-circle-color( @highlight-c5, true );
border-color: @highlight-c5;
border-top: 4px solid @colorGray12;
}
- // Don't show border for first namespace
+ // Don't show border for first namespace & hide for every 'talk' option in second selector
&-view-default + &-view-namespaces,
- // Hide for every 'talk' option
&-view-namespaces&.mw-rcfilters-ui-itemMenuOptionWidget-identifier-subject + &-view-namespaces.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk {
border-top: 0;
}
font-size: 1.15em;
color: @colorGray2;
}
+
&-desc {
color: @colorGray5;
white-space: normal;
.transform( scale( 0 ) );
opacity: 1;
}
+
50% {
.transform( scale( 1.5 ) );
opacity: 0.8;
}
+
80%,
100% {
opacity: 0;
width: 100%;
line-height: normal;
}
-
}
.oo-ui-labelElement-label {
color: @colorGray7;
}
+
.oo-ui-buttonWidget {
opacity: @muted-opacity;
}
/* IE7 and earlier */
zoom: 1;
*display: inline; /* stylelint-disable declaration-block-no-duplicate-properties */
-
padding: 7px;
}
/* @noflip */
margin: 0.5em 1.4em 1.3em 0;
}
+
&.mw-halign-right {
/* @noflip */
margin: 0.5em 0 1.3em 1.4em;
display: inline-block;
height: 100%;
}
+
> * {
vertical-align: middle;
display: inline-block;
.mw-valign-middle > & {
vertical-align: middle;
}
+
.mw-valign-baseline > & {
vertical-align: baseline;
}
+
.mw-valign-sub > & {
vertical-align: sub;
}
+
.mw-valign-super > & {
vertical-align: super;
}
+
.mw-valign-top > & {
vertical-align: top;
}
+
.mw-valign-text-top > & {
vertical-align: text-top;
}
+
.mw-valign-bottom > & {
vertical-align: bottom;
}
+
.mw-valign-text-bottom > & {
vertical-align: text-bottom;
}
font-weight: bold;
text-decoration: inherit;
}
+
a.mw-selflink:hover {
cursor: inherit;
text-decoration: inherit;
}
+
a.mw-selflink:active,
a.mw-selflink:visited {
color: inherit;
.mw-block-page-restrictions {
margin-left: 2em;
+
.oo-ui-widget {
max-width: 48em;
}
&:before {
content: '@{msg-parentheses-start}';
}
+
&:after {
content: '@{msg-parentheses-end}';
}
#preferences > fieldset table {
width: 100%;
}
+
#preferences > fieldset table.mw-htmlform-matrix {
width: auto;
}
-/* interwiki search results */
-/*==========================*/
+/* Interwiki search results */
+/* ======================== */
@import 'mediawiki.ui/variables.less';
@import 'mediawiki.mixins';
.mw-searchresults-has-iw {
-
.iw-headline {
font-weight: bold;
}
}
.iw-result__title {
- font-size: 108%; /* matching regular search title */
+ font-size: 108%; /* Matching regular search title */
}
.iw-result:after,
- .iw-result__content:after { /* clearfix */
+ .iw-result__content:after { /* Clearfix */
visibility: hidden;
display: block;
font-size: 0;
.iw-result__footer {
float: right;
- font-size: 97%; /* matching main search result font-size */
+ font-size: 97%; /* Matching main search result font-size */
margin-top: 0.5em;
}
+
.iw-result__footer a {
vertical-align: middle;
font-style: italic;
padding-right: 1em;
}
- /* image search result */
+ /* Image search result */
.iw-result__mini-gallery {
position: relative;
float: left;
padding: 0.25rem;
}
- /* second and third images are small */
+ /* Second and third images are small */
.iw-result__mini-gallery:nth-child( 2 ),
.iw-result__mini-gallery:nth-child( 3 ) { /* stylelint-disable-line indentation */
width: 50%;
background-position: center center;
}
- /* image gallery text */
+ /* Image gallery text */
.iw-result__mini-gallery__image > .iw-result__mini-gallery__caption {
visibility: hidden;
position: absolute;
visibility: visible;
}
- /* tablet and up */
-
+ /* Tablet and up */
@media only screen and ( min-width: @width-breakpoint-tablet ) {
-
#mw-interwiki-results {
width: 30%;
- display: inline-block; /* used to align interwiki sidebar with the top of the main search results */
- margin-left: 8%; /* since inline-block causes whitespace issues, this is 8 instead of 10% */
+ display: inline-block; /* Used to align interwiki sidebar with the top of the main search results */
+ margin-left: 8%; /* Since inline-block causes whitespace issues, this is 8 instead of 10% */
}
+
.mw-search-createlink,
.mw-search-nonefound,
.mw-search-results,
.searchresult {
display: inline !ie;
}
+
.searchresults {
margin: 1em 0 1em 0.4em;
}
+
/* needs extra specificity to override `.mw-body p` selector */
.mw-body .mw-search-nonefound {
margin: 0;
.mw-search-visualclear {
clear: both;
}
+
.mw-search-results li {
padding-bottom: 1.2em;
list-style: none;
list-style-image: none;
}
+
.mw-search-results li a {
font-size: 108%;
}
+
.mw-search-result-data {
color: #008000;
font-size: 97%;
}
+
.mw-search-profile-tabs {
background-color: #f8f9fa;
margin-top: 1em;
border: 1px solid #c8ccd1;
border-radius: 2px;
}
+
.search-types {
float: left;
padding-left: 0.25em;
}
+
.search-types ul {
margin: 0;
padding: 0;
list-style: none;
}
+
.search-types li {
float: left;
margin: 0;
padding: 0;
}
+
.search-types a {
display: block;
padding: 0.5em;
}
+
.search-types .current a {
color: #222;
cursor: default;
}
+
.search-types .current a:hover {
text-decoration: none;
}
+
.results-info {
float: right;
padding: 0.5em;
color: #54595d;
font-size: 95%;
}
+
#mw-search-top-table div.oo-ui-actionFieldLayout {
float: left;
width: 100%;
}
/* Advanced options menu */
-/*==========================*/
+/* ===================== */
#mw-searchoptions {
/* Support: Firefox, needs `clear: both` on `fieldset` when zoom level > 100%, see T176499 */
border: 1px solid #c8ccd1;
border-radius: 0 0 2px 2px;
}
+
#mw-searchoptions legend {
display: none;
}
+
#mw-searchoptions h4 {
padding: 0;
margin: 0;
float: left;
}
+
#mw-searchoptions table {
float: left;
margin-right: 3em;
border-collapse: collapse;
}
+
#mw-searchoptions table td {
padding: 0 1em 0 0;
white-space: nowrap;
}
+
#mw-searchoptions .divider {
clear: both;
border-bottom: 1px solid #eaecf0;
padding-top: 0.5em;
margin-bottom: 0.5em;
}
+
#mw-search-menu {
padding-left: 6em;
font-size: 85%;
#mw-search-interwiki li {
font-size: 95%;
}
+
.mw-search-interwiki-more {
float: right;
font-size: 90%;
}
+
#mw-search-interwiki-caption {
text-align: center;
font-weight: bold;
font-size: 95%;
}
+
.mw-search-interwiki-project {
font-size: 97%;
text-align: left;
#mw-search-togglebox {
float: right;
}
+
#mw-search-togglebox label {
margin-right: 0.25em;
}
+
#mw-search-togglebox input {
margin-left: 0.25em;
}
background-color: #f8f9fa;
color: #36c;
}
+
#mw-createaccount-join:hover {
background-color: #fff;
border-color: #859ecc;
box-shadow: none;
}
+
#mw-createaccount-join:active {
background-color: #eff3fa;
color: #2a4b8d;
border-color: #2a4b8d;
}
+
#mw-createaccount-join:focus {
border-color: #36c;
box-shadow: inset 0 0 0 1px #36c;
.mw-uctop {
font-weight: bold;
}
+
.mw-contributions-form select {
vertical-align: middle;
}
.mw-listgrouprights-table tr {
vertical-align: top;
}
+
.listgrouprights-revoked {
text-decoration: line-through;
}
white-space: nowrap;
font-size: 90%;
}
+
.mw-protectedpages-unknown {
color: #72777d;
font-size: 90%;
.mw-userrights-disabled {
color: #72777d;
}
+
.mw-userrights-groups * td,
.mw-userrights-groups * th {
padding-right: 1.5em;
&:hover {
color: @mainColor;
}
+
&:focus,
&:active {
color: darken( @mainColor, @colorDarkenPercentage );
// Styleguide 5.1.
.mw-ui-vform {
.box-sizing( border-box );
-
width: @defaultFormWidth;
// MW currently doesn't use the type attribute everywhere on inputs.
display: block;
margin-top: 5px;
}
-
}
// --------------------------------------------------------------------------
@marginIcon: 2 * @iconGutterWidth;
@width: @iconSize + @marginIcon;
@sizeIconLarge: ( @iconSize * 1.75) + @marginIcon;
-
text-indent: -999px;
overflow: hidden;
width: @width;
vertical-align: middle;
// Normalize & style placeholder text, see T139034
- /* stylelint-disable indentation */
.mixin-placeholder( {
color: @colorGray7;
opacity: 1;
} );
- /* stylelint-enable indentation */
// Firefox: Remove red outline when `required` attribute set and invalid content.
// See https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid
&.mw-ui-progressive {
color: @colorProgressive;
}
+
&.mw-ui-destructive {
color: @colorDestructive;
}
margin-left: 0;
}
}
+
.mw-widgets-datetime-calendarWidget-next {
float: right;
}
// 7x7 grid
width: @calendarWidth / 7;
line-height: @calendarHeight / 7;
+
// Don't overlap the hacked-up fake box-shadow border we get when focussed
&:nth-child( 7n ) {
width: @calendarWidth / 7 - 0.2em;
margin-right: 0.2em;
}
+
&:nth-child( 7n+1 ) {
width: @calendarWidth / 7 - 0.2em;
margin-left: 0.2em;
}
+
&:nth-child( 42 ) ~ & {
line-height: @calendarHeight / 7 - 0.2em;
margin-bottom: 0.2em;
// 2x6 grid
width: @calendarWidth / 2;
line-height: @calendarHeight / 6;
+
// Don't overlap the hacked-up fake box-shadow border we get when focussed
&:nth-child( 2n ) {
width: @calendarWidth / 2 - 0.2em;
margin-right: 0.2em;
}
+
&:nth-child( 2n+1 ) {
width: @calendarWidth / 2 - 0.2em;
margin-left: 0.2em;
}
+
&:nth-child( 10 ) ~ & {
line-height: @calendarHeight / 6 - 0.2em;
margin-bottom: 0.2em;
// 5x4 grid
width: @calendarWidth / 5;
line-height: @calendarHeight / 4;
+
// Don't overlap the hacked-up fake box-shadow border we get when focussed
&:nth-child( 5n ) {
width: @calendarWidth / 5 - 0.2em;
margin-right: 0.2em;
}
+
&:nth-child( 5n+1 ) {
width: @calendarWidth / 5 - 0.2em;
margin-left: 0.2em;
}
+
&:nth-child( 15 ) ~ & {
line-height: @calendarHeight / 4 - 0.2em;
margin-bottom: 0.2em;
> .mw-widgets-stashedFileWidget-fileName {
float: left;
}
+
> .mw-widgets-stashedFileWidget-fileType {
color: #72777d;
float: right;
width: 3.75em;
height: 3.75em;
left: 0;
+
&:not( .mw-widget-titleOptionWidget-hasImage ) {
background-color: #c8ccd1;
opacity: 0.4;
}
+
&.mw-widget-titleOptionWidget-hasImage {
border: 0;
background-size: cover;