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 @background-color-base: #fff;
40 // Blue; for contextual use of a continuing action
41 @colorProgressive: #36c;
42 @colorProgressiveHighlight: #447ff5;
43 @colorProgressiveActive: #2a4b8d;
44 // Orange; for contextual use of returning to a past action
45 @colorRegressive: #ff5d00;
46 // Red; for contextual use of a negative action of high severity
47 @colorDestructive: #d33;
48 @colorDestructiveHighlight: #ff4242;
49 @colorDestructiveActive: #b32424;
50 // Orange; for contextual use of a potentially negative action of medium severity
51 @colorMediumSevere: #ff5d00;
52 // Yellow; for contextual use of a potentially negative action of low severity
53 @colorLowSevere: #fc3;
55 // Used in mixins to darken contextual colors by the same amount (eg. focus)
56 @colorDarkenPercentage: 13.5%;
57 // Used in mixins to lighten contextual colors by the same amount (eg. hover)
58 @colorLightenPercentage: 13.5%;
61 @colorText: @colorGray2;
62 @colorTextEmphasized: @colorGray1;
63 @colorTextLight: @colorGray5;
64 @colorButtonText: @colorGray2;
65 @colorButtonTextHighlight: @colorGray4;
66 @colorButtonTextActive: @colorGray1;
67 @colorDisabledText: @colorGray7;
68 @colorErrorText: #d33;
69 @colorWarningText: #705000;
72 @backgroundColorInputBinaryChecked: @colorProgressive;
73 @backgroundColorInputBinaryActive: @colorProgressiveActive;
74 @colorFieldBorder: #a2a9b1;
75 @colorShadow: @colorGray14;
76 @colorPlaceholder: @colorGray10;
77 @colorNeutral: @colorGray7;
80 @border-color-base: #a2a9b1;
81 @borderColorInputBinaryChecked: @colorProgressive;
82 @borderColorInputBinaryActive: @colorProgressiveActive;
85 @border-style-base: solid;
88 @border-width-base: 1px;
90 // Checked radio input border-width, equal to OOUI at 14px base font-size
91 @borderWidthRadioChecked: 0.4285em;
93 // Global border radius to be used to buttons and inputs
97 @boxShadowWidget: inset 0 0 0 1px transparent;
98 @boxShadowWidgetFocus: inset 0 0 0 1px @colorProgressive;
99 @boxShadowProgressiveFocus: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px @colorBaseInverted;
100 @boxShadowInputBinaryActive: inset 0 0 0 1px @colorProgressiveActive;
102 // Icon related variables
104 @iconGutterWidth: 1em;
106 // Form input sizes, equal to OOUI at 14px base font-size
107 @sizeInputBinary: 1.5625em;
110 @backgroundColorError: #fee7e6;
111 @borderColorError: #d33;
112 @backgroundColorWarning: #fef6e7;
113 @borderColorWarning: #fc3;