2 * Minimum available screen width at which a device can be considered a mobile device
3 * Many older feature phones have screens smaller than this value.
4 * Number is prone to change with new information.
7 @width-breakpoint-mobile: 320px;
10 * Minimum available screen width at which a device can be considered a tablet
11 * The number is currently based on the device width of a Samsung Galaxy S5 mini and is low
12 * enough to cover iPad (768px). Number is prone to change with new information.
15 @width-breakpoint-tablet: 720px;
17 * Minimum available screen width at which a device can be considered a desktop
18 * Number is prone to change with new information.
21 @width-breakpoint-desktop: 1000px;
23 // Colors for use in mediawiki.ui and elsewhere
25 // Although this defines many shades, be parsimonious in your own use of grays.
26 // Prefer semantic color names such as `@colorText` below.
27 @colorGray1: #000; // darkest
32 @colorGray10: #a2a9b1;
33 @colorGray12: #c8ccd1;
34 @colorGray14: #eaecf0;
35 @colorGray15: #f8f9fa; // lightest
36 @colorBaseInverted: #fff;
39 // Blue; for contextual use of a continuing action
40 @colorProgressive: #36c;
41 @colorProgressiveHighlight: #447ff5;
42 @colorProgressiveActive: #2a4b8d;
43 // Orange; for contextual use of returning to a past action
44 @colorRegressive: #ff5d00;
45 // Red; for contextual use of a negative action of high severity
46 @colorDestructive: #d33;
47 @colorDestructiveHighlight: #ff4242;
48 @colorDestructiveActive: #b32424;
49 // Orange; for contextual use of a potentially negative action of medium severity
50 @colorMediumSevere: #ff5d00;
51 // Yellow; for contextual use of a potentially negative action of low severity
52 @colorLowSevere: #fc3;
54 // Used in mixins to darken contextual colors by the same amount (eg. focus)
55 @colorDarkenPercentage: 13.5%;
56 // Used in mixins to lighten contextual colors by the same amount (eg. hover)
57 @colorLightenPercentage: 13.5%;
60 @colorText: @colorGray2;
61 @colorTextLight: @colorGray5;
62 @colorButtonText: @colorGray2;
63 @colorButtonTextHighlight: @colorGray4;
64 @colorButtonTextActive: @colorGray1;
65 @colorDisabledText: @colorGray12;
66 @colorErrorText: #d33;
67 @colorWarningText: #705000;
70 @backgroundColorInputBinaryChecked: @colorProgressive;
71 @backgroundColorInputBinaryActive: @colorProgressiveActive;
72 @colorFieldBorder: #a2a9b1;
73 @colorShadow: @colorGray14;
74 @colorPlaceholder: @colorGray10;
75 @colorNeutral: @colorGray7;
78 @borderColorInputBinaryChecked: @colorProgressive;
79 @borderColorInputBinaryActive: @colorProgressiveActive;
81 // Checked radio input border-width, equal to OOUI at 14px base font-size
82 @borderWidthRadioChecked: 0.4285em;
84 // Global border radius to be used to buttons and inputs
88 @boxShadowWidget: inset 0 0 0 1px transparent;
89 @boxShadowWidgetFocus: inset 0 0 0 1px @colorProgressive;
90 @boxShadowProgressiveFocus: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px @colorBaseInverted;
91 @boxShadowInputBinaryActive: inset 0 0 0 1px @colorProgressiveActive;
93 // Icon related variables
95 @iconGutterWidth: 1em;
97 // Form input sizes, equal to OOUI at 14px base font-size
98 @sizeInputBinary: 1.5625em;
100 // Deprecated color variables from when WikimediaUI color palette wasn't around
101 // See https://wikimedia.github.io/WikimediaUI-Style-Guide/visual-style_colors.html