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