mediawiki-skins-Citizen/skinStyles/mediawiki/special/mediawiki.special.changeslist.less
alistair3149 243738a282
perf(RecentChanges): ️ disable sticky header on RC page due to performance issue
The auto-hide sticky header can cause some performance issue on long RC pages.
Disabling it for now until we have a better solution.
2024-10-22 14:36:49 -04:00

203 lines
4 KiB
Plaintext

/*
* Citizen
*
* SkinStyles for Special:RecentChanges and Watchlist
* Module: mediawiki.special.changeslist
* Version: 1.39.0
*
* Date: 2023-05-29
*/
@import '../../../resources/variables.less';
@import '../../../resources/mixins.less';
/* default.less */
.mw-plusminus {
&-pos {
color: var( --color-success );
}
&-neg {
color: var( --color-destructive );
}
&-null {
color: var( --color-subtle );
}
}
.mw-changeslist {
h4 {
z-index: @z-index-above-content; // Needed to cover the timeline dots
padding: var( --space-sm ) 0;
margin-bottom: 0;
font-size: var( --font-size-x-small );
font-weight: var( --font-weight-normal );
color: var( --color-subtle );
letter-spacing: 0.05em;
}
&-line {
/* Disable timeline dot for nested changeline */
.mw-changeslist-line::before {
content: none;
}
&-inner {
color: var( --color-subtle );
}
/* Add nested indent line */
> td:first-child {
position: relative;
&::before {
position: absolute;
top: 0;
bottom: 0;
left: 5px;
width: 2px;
content: '';
background: var( --border-color-base );
}
}
}
&-separator {
color: var( --color-subtle );
}
}
.cloptions {
padding: 0;
margin: 0;
border: 0;
> legend {
display: none; // Eh it is difficult to style legend
}
&:not( .oo-ui-widget ) {
padding: var( --space-md );
font-size: var( --font-size-small );
background: var( --color-surface-2 );
border-radius: var( --border-radius-medium );
}
}
.client-js {
.mw-recentchanges-toplinks {
padding-left: 0;
}
.mw-recentchanges-toplinks:not( .mw-recentchanges-toplinks-collapsed ) {
padding: 0; /* Shift padding to button only */
margin-bottom: 16px; /* Same margin between rcfilter and saved filter */
border-color: var( --border-color-base );
border-radius: var( --border-radius-base );
/* Extend button to full width */
.oo-ui-buttonElement-frameless.oo-ui-labelElement:first-child {
display: block;
background: var( --color-surface-2 );
border-top-left-radius: var( --border-radius-base );
border-top-right-radius: var( --border-radius-base );
.oo-ui-buttonElement-button {
display: block;
}
.oo-ui-indicatorElement-indicator {
right: 6px !important;
}
}
}
}
.mw-recentchanges-toplinks {
.oo-ui-buttonElement-frameless.oo-ui-labelElement:first-child {
margin: 0;
}
}
/*
* Only apply stick header style on the special pages
* Sometimes wiki transclude those pages and these styles will break regular pages
*/
.ns-special {
/* Disable sticky header due to performance issue on long RC */
#citizen-page-header-sticky-sentinel {
display: none;
}
.mw-changeslist h4 {
.citizen-sticky-header( false, false );
}
}
/*
* Make changelist looks like a timeline
* And also sync different history lists into the same styles
*/
.mw-changeslist,
.mw-contributions-list {
position: relative;
font-size: var( --font-size-small );
/* Timeline line */
&::before {
position: absolute;
top: 0;
bottom: 0;
left: ~'calc( var( --border-width-thick ) + 1px )';
width: var( --border-width-thick );
content: '';
background: var( --border-color-base );
}
}
.mw-changeslist ul,
.mw-contributions-list {
margin: 0 !important;
list-style: none;
}
.mw-changeslist-line,
.mw-contributions-list li {
padding: var( --space-sm ) var( --space-xs ) !important;
margin: 0 0 0 16px !important;
color: var( --color-subtle );
border-radius: var( --border-radius-base );
&:hover {
background-color: var( --background-color-button-quiet--hover );
&::before {
background-color: var( --color-emphasized );
}
}
/* Timeline dot */
&::before {
position: absolute;
left: 0;
display: block;
width: 8px;
height: 8px;
margin-top: 7px;
content: '';
background-color: var( --color-subtle );
border-radius: 100%;
outline: 4px solid var( --color-surface-0 );
}
.comment {
color: var( --color-base ); // Make comment more readable
}
}
.mw-pager-navigation-bar {
margin: var( --space-md ) 0;
color: var( --color-subtle );
}