| Server IP : 167.235.224.122 / Your IP : 216.73.216.110 Web Server : Apache/2.4.58 (Ubuntu) System : Linux newplayground 6.8.0-136-generic #136-Ubuntu SMP PREEMPT_DYNAMIC Wed Jul 1 21:33:11 UTC 2026 aarch64 User : deploy ( 1000) PHP Version : 8.4.23 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/html/wiki/resources/src/mediawiki.ui.icon/ |
Upload File : |
/**
* MediaWiki UI icons specification 2.0
*
* Applies the MinervaNeue icon styles, adding more mobile-friendly
* features like increased touch-area sizes and highlights.
*
* - mw-ui-icon = base class. 20px square with icon.
* - mw-ui-icon + mw-ui-icon-element = icon with padding & pseudo-states.
* - mw-ui-icon + mw-ui-icon-before = *deprecated*, icon with text.
* Labels should be placed in a separate element beside the icon.
*
*/
@import 'mediawiki.skin.variables.less';
@import 'mediawiki.mixins.less';
// == Icons ==
@icon-touch-area-sm: 32; // This is also used for touch areas at DESKTOP resolutions.
@icon-touch-area-md: 44;
@font-size-browser: 16; // Assumed browser default of `16px`.
// Medium icon
@icon-glyph-size-md: 20;
@icon-size-md: unit( ( @icon-glyph-size-md / @font-size-browser ), em );
@icon-padding-md: unit( ( ( @icon-touch-area-md - @icon-glyph-size-md ) / 2 / @font-size-browser ), em );
// Includes 2px mw-ui-button border
@icon-padding-md-button: unit( ( ( @icon-touch-area-md - @icon-glyph-size-md - 2 ) / 2 / @font-size-browser ), em );
// At desktop resolution the icon touch area will shrink from @icon-touch-area-md to @icon-touch-area-sm
@icon-padding-md-button--desktop: unit( ( ( @icon-touch-area-sm - @icon-glyph-size-md - 2 ) / 2 / @font-size-browser ), em );
// Colors
@icon-color: @color-subtle;
@margin-icon-md-labelled: 6px;
/**
* Mixin for a pseudo-element with a background image.
*/
.mixin-background-square( @size ) {
// Sizing properties
content: '';
display: block;
width: 100%;
height: 100%;
// In case display: block is overridden and display gets set to `flex`
// because of inheritance T233521.
min-width: @size;
min-height: @size;
// Background properties.
background-repeat: no-repeat;
// Using static value instead of `background-size: contain` because of T233521#5545513.
background-size: @size @size;
background-position: center;
}
/**
* A standalone 20px square with screen-reader text. Contains a :before element
* to house the icon as a background image. Total size is increased with padding via
* `box-sizing: content-box`. This separates control over size of icon vs the size of
* the touch-area.
*/
.mw-ui-icon {
// reset font-size so the "em" value is relative to the more
// predictable rem font size ...and no rems because we can't have nice things.
font-size: initial;
// sizing
position: relative;
display: inline-block;
// this is important for increasing the size via padding. Overrides `.view-border-box *`.
/* stylelint-disable declaration-no-important */
box-sizing: content-box !important;
width: @icon-size-md;
height: @icon-size-md;
// Guarding against flex-box variability.
min-width: @icon-size-md;
min-height: @icon-size-md;
flex-basis: @icon-size-md;
/* stylelint-enable declaration-no-important */
// alignment
vertical-align: middle;
line-height: 0;
// Overflow ellipsis.
.text-overflow( @visible: false );
// resetting styles for <button> elements
-moz-appearance: none;
-webkit-appearance: none;
background-color: transparent;
margin: 0;
padding: 0;
&:not( .mw-ui-button ) {
border: 0;
}
&::before {
.mixin-background-square( @icon-size-md );
}
// Use `not` selector to ensure we don't add space for machine readable markup. More info: T307233
& + span:not( :empty ) {
// Margin is added to separate accompanying text.
margin-left: @margin-icon-md-labelled;
}
}
.mw-ui-icon-element {
border-radius: @border-radius-base;
padding: @icon-padding-md;
// Override line-height applied by `.mw-ui-button`.
line-height: 0;
transition: background-color @transition-duration-base;
&.mw-ui-button {
padding: @icon-padding-md-button;
}
// Combined with nowrap & ellipsis from .mw-ui-icon, forms safe "screen-reader" text.
color: transparent;
&:focus,
&:active,
&:visited {
color: transparent;
}
// In desktop these icons shrink in size as touch area no longer important.
@media ( min-width: @min-width-breakpoint-desktop ) {
&.mw-ui-button {
padding: @icon-padding-md-button--desktop;
}
}
}
.mw-ui-icon-before {
width: auto;
max-width: 100%;
&::before {
// sizing
display: inline-block;
font-size: initial;
width: auto;
min-width: @icon-size-md;
min-height: @icon-size-md;
// alignment. Margin is added to separate accompanying text.
margin-right: @margin-icon-md-labelled;
vertical-align: middle;
}
span {
vertical-align: middle;
}
}
@media all and ( min-width: @min-width-breakpoint-desktop ) {
.mw-ui-icon-with-label-desktop {
// stylelint-disable-next-line declaration-no-important
color: @icon-color !important;
width: auto;
line-height: inherit;
flex-basis: auto;
// Special case outside of standard buttons styling due to surrounding
// interface elements, see T237019.
// stylelint-disable-next-line declaration-no-important
font-weight: 500 !important;
&:hover,
&:focus,
&:active,
&:visited {
color: @icon-color;
text-decoration: none;
}
&::before {
width: auto;
display: inline-block;
// Don't use `@icon-padding-md` as we are adjacent to text.
margin-right: @margin-icon-md-labelled;
// Seems to be more visually centered than `middle`.
vertical-align: text-bottom;
}
}
}