resources/src/mediawiki.less/mediawiki.ui/variables.less

   1 /**
   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.
   5  * @since 1.31
   6  */
   7 @width-breakpoint-mobile: 320px;
   8
   9 /**
  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.
  13  * @since 1.31
  14  */
  15 @width-breakpoint-tablet: 720px;
  16 /**
  17  * Minimum available screen width at which a device can be considered a desktop
  18  * Number is prone to change with new information.
  19  * @since 1.31
  20  */
  21 @width-breakpoint-desktop: 1000px;
  22
  23 // Colors for use in mediawiki.ui and elsewhere
  24
  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
  28 @colorGray2: #222;
  29 @colorGray4: #444;
  30 @colorGray5: #54595d;
  31 @colorGray7: #72777d;
  32 @colorGray10: #a2a9b1;
  33 @colorGray12: #c8ccd1;
  34 @colorGray14: #eaecf0;
  35 @colorGray15: #f8f9fa; // lightest
  36 @colorBaseInverted: #fff;
  37
  38 // Semantic colors
  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;
  54
  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%;
  59
  60 // Text colors
  61 @colorText: @colorGray2;
  62 @colorTextEmphasized: @colorGray1;
  63 @colorTextLight: @colorGray5;
  64 @colorButtonText: @colorGray2;
  65 @colorButtonTextHighlight: @colorGray4;
  66 @colorButtonTextActive: @colorGray1;
  67 @colorDisabledText: @colorGray7;
  68
  69 // Messages
  70 // Messages: Error
  71 @backgroundColorError: #fee7e6;
  72 // Use only for inlined messages, boxed messages require `@colorTextEmphasized` for
  73 // minimum contrast ratio.
  74 @colorError: #d33;
  75 @borderColorError: @colorError;
  76 // Messages: Warning
  77 @backgroundColorWarning: #fef6e7;
  78 @colorWarning: @colorTextEmphasized;
  79 @borderColorWarning: #fc3;
  80 // Messages: Success
  81 @backgroundColorSuccess: #d5fdf4;
  82 @colorSuccess: #14866d;
  83 @borderColorSuccess: @colorSuccess;
  84
  85 // FIXME: Remove after a few weeks, when extensions got updated
  86 @colorErrorText: @colorError;
  87 @colorWarningText: @colorWarning;
  88
  89 // UI colors
  90 @backgroundColorInputBinaryChecked: @colorProgressive;
  91 @backgroundColorInputBinaryActive: @colorProgressiveActive;
  92 @colorFieldBorder: #a2a9b1;
  93 @colorShadow: @colorGray14;
  94 @colorPlaceholder: @colorGray10;
  95 @colorNeutral: @colorGray7;
  96
  97 // Border colors
  98 @border-color-base: #a2a9b1;
  99 @borderColorInputBinaryChecked: @colorProgressive;
 100 @borderColorInputBinaryActive: @colorProgressiveActive;
 101
 102 // Border styles
 103 @border-style-base: solid;
 104
 105 // Border widths
 106 @border-width-base: 1px;
 107
 108 // Checked radio input border-width, equal to OOUI at 14px base font-size
 109 @borderWidthRadioChecked: 0.4285em;
 110
 111 // Global border radius to be used to buttons and inputs
 112 @borderRadius: 2px;
 113
 114 // Box shadows
 115 @boxShadowWidget: inset 0 0 0 1px transparent;
 116 @boxShadowWidgetFocus: inset 0 0 0 1px @colorProgressive;
 117 @boxShadowProgressiveFocus: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px @colorBaseInverted;
 118 @boxShadowInputBinaryActive: inset 0 0 0 1px @colorProgressiveActive;
 119
 120 // Icon related variables
 121 @iconSize: 1.5em;
 122 @iconGutterWidth: 1em;
 123
 124 // Form input sizes, equal to OOUI at 14px base font-size
 125 @sizeInputBinary: 1.5625em;