|
|
| 1. satır: |
1. satır: |
| /**
| | <code> |
| * WikimediaUI Base v0.21.0
| | /* |
| * Wikimedia Foundation user interface base variables
| | Новое оформление шаблона [[Шаблон:Заглавная/Шапка]] |
| * https://gerrit.wikimedia.org/g/wikimedia-ui-base/
| |
| *
| |
| * See also https://design.wikimedia.org/style-guide/
| |
| */
| |
|
| |
|
| // == Breakpoints == | | Основано на: |
| // The following numbers are prone to change with new information. | | https://github.com/wikimedia/wikimedia-ui-base/blob/master/wikimedia-ui-base.less |
| | https://design.wikimedia.org/style-guide/ |
| | */ |
| | .main-top { |
| | font-size: 1rem; |
| | border: 1px solid #c8ccd1; |
| | /*margin-top: 1rem;*/ |
| | padding: 0.25rem; |
| | } |
|
| |
|
| // Minimum available screen width at which a device can be considered a mobile device
| | .main-top-left > p { |
| // Many older feature phones have screens smaller than this value.
| | font-size: 0.875em; |
| @width-breakpoint-mobile: 320px;
| | margin: 0; |
| | } |
|
| |
|
| // Minimum available screen width at which a device can be considered a tablet
| | .main-top-right { |
| // The number is currently based on the device width of a Samsung Galaxy S5 mini and is low
| | font-size: 0.875em; |
| // enough to cover iPad (768px).
| | margin-top: 0.5em; |
| @width-breakpoint-tablet: 720px;
| | } |
|
| |
|
| // Minimum available screen width at which a device can be considered a desktop. | | .main-top-right > ul { |
| @width-breakpoint-desktop: 1000px;
| | /*display: none;*/ |
| | margin-top: 0.5rem; |
| | } |
|
| |
|
| // Wider desktop breakpoint, currently used in Flow.
| | .main-top-right .mw-ui-button.mw-ui-quiet { |
| @width-breakpoint-desktop-wide: 1200px;
| | padding-right: 0; |
| | } |
|
| |
|
| // Extra wide desktop breakpoint
| | .main-top-header { |
| @width-breakpoint-desktop-extrawide: 2000px;
| | border-bottom: 0; |
| | margin-bottom: 0; |
| | margin-top: 0; |
| | } |
|
| |
|
| | .main-top-articleCount { |
| | margin-bottom: 0; |
| | } |
|
| |
|
| // == Colors == | | /*body.skin-minerva .main-top-articleCount {*/ |
| // WikimediaUI (`wmui`) color palette
| | /* display: none;*/ |
| // See https://design.wikimedia.org/style-guide/visual-style_colors.html
| | /*}*/ |
| // Don't use those variables directly, instead define your vars | |
| // referring to them as applied further below. | |
|
| |
|
| @wmui-color-base0: #000; // = HSB 0°, 0%, 0%
| | .main-top-mobileSearch { |
| @wmui-color-base10: #202122; // = HSB 210°, 6%, 13%
| | display: none; |
| @wmui-color-base20: #54595d; // = HSB 207°, 10%, 36%; WCAG 2.0 level AAA 7.09:1 contrast ratio on `#fff`
| | margin-top: 1rem; |
| @wmui-color-base30: #72777d; // = HSB 210°, 9%, 49%; WCAG 2.0 level AA at 4.52:1 contrast ratio on `#fff`
| | } |
| @wmui-color-base50: #a2a9b1; // = HSB 212°, 8%, 69%
| |
| @wmui-color-base70: #c8ccd1; // = HSB 213°, 4%, 82%
| |
| @wmui-color-base80: #eaecf0; // = HSB 220°, 3%, 94%
| |
| @wmui-color-base90: #f8f9fa; // = HSB 210°, 1%, 98%
| |
| @wmui-color-base100: #fff; // = HSB 0°, 0%, 100%
| |
|
| |
|
| @wmui-color-accent30: #2a4b8d; // = HSB 220°, 70%, 55%
| | body.skin-minerva .main-top-mobileSearch { |
| @wmui-color-accent50: #36c; // = HSB 220°, 75%, 80%
| | display: block; |
| @wmui-color-accent90: #eaf3ff; // = HSB 214°, 8%, 100%
| | } |
|
| |
|
| @wmui-color-red30: #b32424; // = HSB 360°, 80%, 70%
| | .main-top-mobileSearchButton { |
| @wmui-color-red50: #d33; // = HSB 360°, 77%, 87%
| | background: #fff; |
| @wmui-color-red90: #fee7e6; // = HSB 3°, 9%, 100%
| | border: none; |
| | box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ); |
| | color: #72777d; |
| | font-weight: normal; |
| | max-width: none; |
| | text-align: left; |
| | width: 100%; |
| | } |
|
| |
|
| @wmui-color-yellow30: #ac6600; // = HSB 36°, 100%, 67% | | /* |
| @wmui-color-yellow50: #edab00; // = HSB 43°, 100%, 93%
| | Планшеты |
| @wmui-color-yellow90: #fef6e7; // = HSB 39°, 9%, 100%
| | */ |
| | @media (min-width: 720px) { |
| | .main-top { |
| | background-color: #f8f9fa; |
| | border: 1px solid #c8ccd1; |
| | border-radius: 2px; |
| | box-shadow: 0 1px 1px rgba(0, 0, 0, .15); |
| | margin-bottom: 0.5rem; |
| | padding: 1rem; |
| | } |
| | |
| | .main-top-right > ul { |
| | display: flex; |
| | flex-wrap: wrap; |
| | } |
| | |
| | .main-top-articleCount { |
| | margin-bottom: 0.5rem; |
| | } |
| | |
| | body.skin-minerva .main-top-articleCount { |
| | display: block; |
| | } |
| | |
| | /*body.skin-minerva .main-top-mobileSearch {*/ |
| | /* display: none;*/ |
| | /*}*/ |
| | } |
|
| |
|
| @wmui-color-green30: #14866d; // = HSB 167°, 85%, 53%
| | /* |
| @wmui-color-green50: #00af89; // = HSB 167°, 100%, 69%
| | Стационарные компьютеры |
| @wmui-color-green90: #d5fdf4; // = HSB 166°, 16%, 99%
| | */ |
| | | @media (min-width: 1000px) { |
| // Note, this color is part of the Codex Design System, under different naming scheme.
| | .main-top { |
| @wmui-color-green700: #096450; | | align-items: center; |
| | | background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/e3/Wikipedia_logo_letters_banner.svg); |
| // Modifier colors, not part of official palette, limited to interaction state usage.
| | background-position: right; |
| @wmui-color-base10--lighten: #404244;
| | background-repeat: no-repeat; |
| @wmui-color-accent50--lighten: #447ff5; // = `lighten( @color-primary, 3 )`
| | display: flex; |
| @wmui-color-red50--lighten: #ff4242; // ~= `filter: brightness( 120% )`
| | margin-bottom: 0.5rem; |
| @wmui-color-green50--lighten: #1c6665;
| | margin-top: 0.5rem; |
| @wmui-color-purple50: #6b4ba1;
| | padding-bottom: 0; |
| | | padding-left: 0; |
| // From here on no static color values, only variable references.
| | padding-right: 1.5rem; |
| // Background Colors
| | padding-top: 0; |
| @background-color-base: @wmui-color-base100;
| | } |
| @background-color-base--hover: @wmui-color-base80;
| | |
| @background-color-base--disabled: @wmui-color-base80;
| | .main-top-left { |
| @background-color-base--read-only: @wmui-color-base90;
| | background-image: linear-gradient(to right, #f8f9fa 0%, #f8f9fa 70%, rgba(248, 249, 250, 0) 100%); |
| @background-color-code: @wmui-color-base90;
| | flex: 3; |
| // 'Framed' UI elements (Framed Buttons, Dropdowns, ToggleSwitches…)
| | padding: 2rem 0 2rem 1.5rem; |
| @background-color-framed: @wmui-color-base90;
| | } |
| @background-color-framed--hover: @wmui-color-base100;
| | |
| @background-color-framed--active: @wmui-color-base80;
| | .main-top-right { |
| // 'Filled' UI elements (Checkboxes, Radios, ProgressBars…) | | flex: 2; |
| @background-color-filled--disabled: @wmui-color-base70;
| | margin-top: 0; |
| // Binary Input elements (Checkboxes, Radios, Toggle Switches)
| | text-align: right; |
| @background-color-input-binary--active: @color-primary--active;
| | } |
| @background-color-input-binary--checked: @color-primary;
| | |
| // Quiet Buttons
| | .main-top-right > ul { |
| @background-color-quiet: @background-color-base;
| | align-items: center; |
| // Use `rgba()` values here as the quiet buttons need to blend in with background.
| | flex-direction: row-reverse; |
| @background-color-quiet--hover: rgba( 0, 24, 73, ( 7 / 255 ) ); // = `@wmui-color-base90` on white.
| | justify-content: right; |
| @background-color-quiet--active: rgba( 0, 24, 73, ( 21 / 255 ) ); // = `@wmui-color-base80` on white.
| | margin-top: 0; |
| // Toolbar and Tools
| | text-align: left; |
| @background-color-toolbar: @background-color-base;
| | } |
| @background-color-tool--hover: @background-color-base--hover;
| | |
| @background-color-tool--active: @background-color-primary;
| | .main-top-createArticle + li .mw-ui-button.mw-ui-quiet { |
| @background-color-tool--active-hover: @background-color-primary--hover;
| | padding-right: 1em; |
| // Tabs Navigation Background Color
| | } |
| @background-color-tabs: @wmui-color-base80;
| | } |
| // User system messages (errors, warnings, successes, notices)
| | </code> |
| @background-color-error--framed: @wmui-color-red90;
| |
| @background-color-warning--framed: @wmui-color-yellow90;
| |
| @background-color-success--framed: @wmui-color-green90;
| |
| @background-color-notice--framed: @wmui-color-base80;
| |
| // Highlight Colors for text highlighting, think metaphorically text marker
| |
| @background-color-highlight: rgba( 255, 182, 13, 0.4 ); // Equals to `#ffe29e` on `#fff` background.
| |
| | |
| // Foreground Colors
| |
| @color-base: @wmui-color-base10;
| |
| @color-base--hover: @wmui-color-base10--lighten;
| |
| @color-base--active: @wmui-color-base0;
| |
| @color-base--inverted: @wmui-color-base100;
| |
| @color-base--emphasized: @wmui-color-base0;
| |
| @color-base--subtle: @wmui-color-base30;
| |
| @color-base--disabled: @wmui-color-base30;
| |
| @color-filled--disabled: @color-base--inverted;
| |
| @color-accessory: @wmui-color-base20;
| |
| @color-placeholder: @wmui-color-base30;
| |
| // Primary 'Progressive' Color, Background Color and states
| |
| @background-color-primary: @wmui-color-accent90;
| |
| @background-color-primary--hover: rgba( 41, 98, 204, 0.1 );
| |
| @color-primary: @wmui-color-accent50;
| |
| @color-primary--hover: @wmui-color-accent50--lighten;
| |
| @color-primary--active: @wmui-color-accent30;
| |
| @color-primary--focus: @color-primary;
| |
| // 'Destructive' Color, Background Color and states
| |
| @background-color-destructive: @wmui-color-red90;
| |
| @color-destructive: @wmui-color-red50;
| |
| @color-destructive--hover: @wmui-color-red50--lighten;
| |
| @color-destructive--active: @wmui-color-red30;
| |
| @color-destructive--focus: @color-destructive;
| |
| // Secondary Color and states (links only)
| |
| @color-secondary: @wmui-color-green50;
| |
| @color-secondary--hover: @wmui-color-green50--lighten;
| |
| @color-secondary--active: @wmui-color-green30;
| |
| @color-secondary--focus: @color-secondary;
| |
| // User system messages (errors, warnings, successes, notices)
| |
| @color-error: @wmui-color-red50;
| |
| @color-warning: @wmui-color-base0;
| |
| @color-success: @wmui-color-green30;
| |
| @color-success--framed: @wmui-color-base0;
| |
| @color-notice: @wmui-color-base0;
| |
| // Toolbar and Tools
| |
| @color-tool--hover: @color-base--emphasized; // Used here in combination with `:hover` background-color turning light grey
| |
| @color-tool--active: @color-primary;
| |
| | |
| | |
| // Opacity
| |
| @opacity-base: 1;
| |
| @opacity-icon-base: 0.87; // = `#222` on `background-color: #fff`, closest to `#202122`
| |
| @opacity-icon-base--hover: 0.74; // = `#424242` on `background-color: #fff`, closest to `#404244`
| |
| @opacity-icon-base--selected: 1;
| |
| @opacity-icon-base--disabled: 0.51; // = `#7d7d7d` on `background-color: #fff`, closest to `#72777d`. HSB 0°, 0%, 49%.
| |
| @opacity-icon-accessory: 0.67; // = `#555`, closest to `#54595d` on background-color `#fff`.
| |
| | |
| | |
| // == Positioning ==
| |
| // Positioning Model
| |
| // Use `px` unit to prevent pixel rounding error when using `@size-input-binary / 4`.
| |
| // Works with different sizes on mobile and desktop as it negatively offsets from outside.
| |
| @position-offset-input-radio-focus: -4px;
| |
| | |
| // Z-Index
| |
| @z-index-base: 0;
| |
| @z-index-overlay: 101;
| |
| | |
| | |
| // == Box Model properties ==
| |
| // Box Sizing
| |
| @box-sizing-base: border-box;
| |
| | |
| // `@*size` variables are used for `*width` & `*height` properties.
| |
| @min-size-base: 32px; // Values used for `min-*` are defined in `px`, see T130691.
| |
| @size-base: 32px;
| |
| @size-full: 100%;
| |
| | |
| @min-size-icon: 20px;
| |
| @size-icon: 20px;
| |
| @min-size-indicator: 12px;
| |
| @size-indicator: 12px;
| |
| @size-input-binary: 20px;
| |
| @size-tool: 42px;
| |
| | |
| // Max Widths
| |
| @max-width-base: 50em;
| |
| @max-width-button: 28.75em; // = `460px` at `16px` base, see T95367
| |
| @max-width-input: @max-width-base;
| |
| @max-width-input-inline: 100%;
| |
| | |
| // Border
| |
| @border-base: @border-width-base @border-style-base @border-color-base;
| |
| @border-dialog: @border-base;
| |
| @border-menu: @border-base;
| |
| @border-input-binary: @border-width-base @border-style-base @border-color-input-binary;
| |
| // User system messages (errors, warnings, successes, notices)
| |
| @border-error: @border-width-base @border-style-base @border-color-error;
| |
| @border-warning: @border-width-base @border-style-base @border-color-warning;
| |
| @border-success: @border-width-base @border-style-base @border-color-success;
| |
| @border-notice: @border-base;
| |
| // Border Colors
| |
| @border-color-base: @wmui-color-base50;
| |
| @border-color-base--hover: @wmui-color-base50;
| |
| @border-color-base--active: @wmui-color-base30;
| |
| @border-color-base--focus: @color-primary--focus;
| |
| @border-color-base--disabled: @wmui-color-base70;
| |
| | |
| @border-color-filled--disabled: @color-filled--disabled;
| |
| // Border Colors primary buttons
| |
| @border-color-primary: @color-primary;
| |
| @border-color-primary--hover: @color-primary--hover;
| |
| @border-color-primary--active: @color-primary--active;
| |
| @border-color-primary--focus: @border-color-primary;
| |
| @border-color-destructive: @color-destructive;
| |
| @border-color-destructive--hover: @color-destructive--hover;
| |
| @border-color-destructive--active: @color-destructive--active;
| |
| @border-color-destructive--focus: @border-color-destructive;
| |
| @border-color-inset--focus: @color-base--inverted;
| |
| @border-color-input--hover: @border-color-base--active;
| |
| @border-color-input-binary: @border-color-base--active;
| |
| @border-color-input-binary--active: @color-primary--active;
| |
| @border-color-input-binary--checked: @color-primary;
| |
| @border-color-heading: @wmui-color-base70;
| |
| @border-color-divider: @wmui-color-base50;
| |
| @border-color-wikitable: rgba( 84, 89, 93, 0.3 ); // See T168029
| |
| // Border Colors user system messages
| |
| @border-color-error: @wmui-color-red30;
| |
| @border-color-warning: @wmui-color-yellow30;
| |
| @border-color-success: @wmui-color-green700;
| |
| @border-color-notice: @wmui-color-base20;
| |
| // Border Styles
| |
| @border-style-base: solid;
| |
| // Border Widths
| |
| @border-width-base: 1px;
| |
| // Border Radius
| |
| @border-radius-base: 2px;
| |
| // Use for circle or ellipsis.
| |
| // See https://stackoverflow.com/a/29966500
| |
| @border-radius-circle: 50%;
| |
| // Use for rounded rectangle.
| |
| // Corner overlap reduce radii to half of size of smallest side.
| |
| // See https://www.w3.org/TR/css-backgrounds-3/#corner-overlap
| |
| @border-radius-round: 9999px;
| |
| @border-radius-input-radio: @border-radius-circle;
| |
| | |
| // Paddings
| |
| @padding-base: @padding-vertical-base @padding-horizontal-base;
| |
| @padding-input-text: @padding-vertical-base @padding-horizontal-input-text;
| |
| @padding-horizontal-base: 12px;
| |
| // Must be < `8` as it cuts off scripts like Burmese. Directly connected to `line-height` further down.
| |
| @padding-vertical-base: 5px;
| |
| @padding-horizontal-input-text: 8px;
| |
| // Menu items don't have a border. So add it to padding.
| |
| @padding-vertical-menu: @padding-vertical-base + @border-width-base;
| |
| | |
| // Box Shadows
| |
| // Base `box-shadow` set to `transparent` for transition purpose.
| |
| @box-shadow-base: inset 0 0 0 1px transparent;
| |
| @box-shadow-base--focus: inset 0 0 0 1px @wmui-color-accent50;
| |
| @box-shadow-primary--focus: inset 0 0 0 1px @color-primary, inset 0 0 0 2px @color-base--inverted;
| |
| @box-shadow-destructive--focus: inset 0 0 0 1px @color-destructive, inset 0 0 0 2px @color-base--inverted;
| |
| @box-shadow-filled--disabled: inset 0 0 0 1px @color-filled--disabled;
| |
| @box-shadow-card: 0 1px 1px rgba( 0, 0, 0, 0.15 );
| |
| @box-shadow-dialog: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
| |
| @box-shadow-menu: @box-shadow-dialog;
| |
| | |
| // Outlines
| |
| // Enable Windows high contrast mode on certain widgets, that have default outlines overridden.
| |
| @outline-base--focus: @border-width-base @border-style-base transparent;
| |
| | |
| | |
| // == Typography incl. print properties ==
| |
| // See https://design.wikimedia.org/style-guide/visual-style_typography.html
| |
| // Font Families
| |
| @font-family-base: @font-family-sans;
| |
| @font-family-heading-main: @font-family-serif;
| |
| // To be deprecated, see T247166.
| |
| @font-family-sans: 'Helvetica Neue', 'Helvetica', 'Liberation Sans', 'Arial', sans-serif;
| |
| @font-family-sans--fallback: sans-serif;
| |
| // Provide better operating system-specific readability, see T175877.
| |
| // `system-ui` is currently not an option due to OS/language combination issues, see T175877#4776576.
| |
| @font-family-system-sans: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Inter', 'Helvetica', 'Arial', sans-serif;
| |
| @font-family-serif: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif;
| |
| @font-family-serif--fallback: serif;
| |
| // Provide better operating system-specific monospace stack, see T209915.
| |
| @font-family-monospace: 'Menlo', 'Consolas', 'Liberation Mono', 'Fira Code', 'Courier New', monospace;
| |
| @font-family-monospace--fallback: monospace, monospace; // See T176636.
| |
| // Font Weights
| |
| @font-weight-base: @font-weight-normal;
| |
| // See https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Common_weight_name_mapping
| |
| @font-weight-hairline: 100;
| |
| @font-weight-light: 300;
| |
| @font-weight-normal: 400;
| |
| @font-weight-semi-bold: 600;
| |
| @font-weight-bold: 700;
| |
| // Line Heights
| |
| @line-height-base: 1.6;
| |
| @line-height-heading: 1.375;
| |
| @text-decoration-link--hover: none;
| |
| // Text Shadows
| |
| @text-shadow-base: 0 1px 1px @color-base--inverted; // 'coined' effect
| |
| @text-shadow-base--disabled: @text-shadow-base;
| |
| | |
| | |
| // == Other Properties == | |
| // Cursors
| |
| @cursor-base--disabled: default;
| |
| | |
| | |
| // == Animation & Transition ==
| |
| // Transitions
| |
| @transition-base: @transition-duration-base; // `ease` is the initial value
| |
| | |
| // Transitions > Durations
| |
| @transition-duration-base: 100ms;
| |
| @transition-duration-medium: 250ms;
| |
| | |
| | |
| // == Deprecated variables ==
| |
| // Since v0.22.0
| |
| @opacity-base--disabled: @opacity-icon-base--disabled;
| |
| // Use non-shorthand properties instead.
| |
| @transition-ease-medium: @transition-duration-medium;
| |
| // `ease-out` is preferably used on human initiated transitions, for example dialogs
| |
| @transition-ease-out-medium: ease-out @transition-duration-medium;
| |
