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 @colorErrorText: #d33;
  69 @colorWarningText: #705000;
  70
  71 // UI colors
  72 @backgroundColorInputBinaryChecked: @colorProgressive;
  73 @backgroundColorInputBinaryActive: @colorProgressiveActive;
  74 @colorFieldBorder: #a2a9b1;
  75 @colorShadow: @colorGray14;
  76 @colorPlaceholder: @colorGray10;
  77 @colorNeutral: @colorGray7;
  78
  79 // Border colors
  80 @border-color-base: #a2a9b1;
  81 @borderColorInputBinaryChecked: @colorProgressive;
  82 @borderColorInputBinaryActive: @colorProgressiveActive;
  83
  84 // Border styles
  85 @border-style-base: solid;
  86
  87 // Border widths
  88 @border-width-base: 1px;
  89
  90 // Checked radio input border-width, equal to OOUI at 14px base font-size
  91 @borderWidthRadioChecked: 0.4285em;
  92
  93 // Global border radius to be used to buttons and inputs
  94 @borderRadius: 2px;
  95
  96 // Box shadows
  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;
 101
 102 // Icon related variables
 103 @iconSize: 1.5em;
 104 @iconGutterWidth: 1em;
 105
 106 // Form input sizes, equal to OOUI at 14px base font-size
 107 @sizeInputBinary: 1.5625em;
 108
 109 // Messages
 110 @backgroundColorError: #fee7e6;
 111 @borderColorError: #d33;
 112 @backgroundColorWarning: #fef6e7;
 113 @borderColorWarning: #fc3;