Файловый менеджер - Редактировать - /var/www/html/mediawiki-1.43.1/resources/src/mediawiki.ui.icon/icons-2.less
Ðазад
/** * 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-next-line 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; // 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; } } }
| ver. 1.1 | |
.
| PHP 8.4.18 | Ð“ÐµÐ½ÐµÑ€Ð°Ñ†Ð¸Ñ Ñтраницы: 0 |
proxy
|
phpinfo
|
ÐаÑтройка