resources/lib/oojs-ui/wikimedia-ui-base.less

   1 /**
   2  * WikimediaUI Base v0.9.2
   3  * Wikimedia Foundation user interface base variables
   4  */
   5
   6 /* Colors */
   7 // WikimediaUI (WMUI) color palette
   8 @wmui-color-base0:    #000;    // = HSB 0°, 0%, 0%
   9 @wmui-color-base10:   #222;    // = HSB 0°, 0%, 13%
  10 @wmui-color-base20:   #54595d; // = HSB 207°, 10%, 36%; WCAG 2.0 level AAA 7.09:1 contrast ratio on `#fff`
  11 @wmui-color-base30:   #72777d; // = HSB 210°, 9%, 49%; WCAG 2.0 level AA at 4.52:1 contrast ratio on `#fff`
  12 @wmui-color-base50:   #a2a9b1; // = HSB 212°, 8%, 69%
  13 @wmui-color-base70:   #c8ccd1; // = HSB 213°, 4%, 82%
  14 @wmui-color-base80:   #eaecf0; // = HSB 220°, 3%, 94%
  15 @wmui-color-base90:   #f8f9fa; // = HSB 210°, 1%, 98%
  16 @wmui-color-base100:  #fff;    // = HSB 0°, 0%, 100%
  17
  18 @wmui-color-accent30: #2a4b8d; // = HSB 220°, 70%, 55%
  19 @wmui-color-accent50: #36c;    // = HSB 220°, 75%, 80%
  20 @wmui-color-accent90: #eaf3ff; // = HSB 214°, 8%, 100%
  21
  22 @wmui-color-red30:    #b32424; // = HSB 360°, 80%, 70%
  23 @wmui-color-red50:    #d33;    // = HSB 360°, 77%, 87%
  24 @wmui-color-red90:    #fee7e6; // = HSB 3°, 9%, 100%
  25
  26 @wmui-color-yellow30: #ac6600; // = HSB 36°, 100%, 67%
  27 @wmui-color-yellow50: #fc3;    // = HSB 45°, 80%, 100%
  28 @wmui-color-yellow90: #fef6e7; // = HSB 39°, 9%, 100%
  29
  30 @wmui-color-green30:  #14866d; // = HSB 167°, 85%, 53%
  31 @wmui-color-green50:  #00af89; // = HSB 167°, 100%, 69%
  32 @wmui-color-green90:  #d5fdf4; // = HSB 166°, 16%, 99%
  33
  34 // Background Colors
  35 @background-color-base:       @wmui-color-base100;
  36 @background-color-code:       @wmui-color-base90;
  37 // 'Framed' UI elements (Framed Buttons, Dropdowns, ToggleSwitches...)
  38 @background-color-framed:     @wmui-color-base90;
  39 @background-color-framed--hover: @wmui-color-base100;
  40 @background-color-framed--active: @wmui-color-base70;
  41 // Tabs Navigation Background Color
  42 @background-color-tabs:       @wmui-color-base80;
  43 // Highlight Colors, RGBA Colors include hex fallback on `#fff` for IE 6/7/8
  44 @background-color-highlight:  rgba( 255, 182, 13, 0.4 );
  45 @background-color-highlight--fallback: #ffe29e;
  46
  47 // Foreground Colors
  48 @color-base:                  @wmui-color-base10;
  49 @color-base--hover:           #444;
  50 @color-base--active:          @wmui-color-base0;
  51 @color-base--inverted:        @wmui-color-base100;
  52 @color-base--emphasized:      @wmui-color-base0;
  53 @color-base--subtle:          @wmui-color-base30;
  54 @color-base--disabled:        @wmui-color-base30;
  55 @color-filled--disabled:      @color-base--inverted;
  56 @color-placeholder:           @wmui-color-base30;
  57 // Primary 'Progressive' Color, Background Color and states
  58 @background-color-primary:    @wmui-color-accent90;
  59 @background-color-primary--hover: rgba( 41, 98, 204, 0.1 );
  60 @color-primary:               @wmui-color-accent50;
  61 @color-primary--hover:        #447ff5; // = `lighten( @color-primary, 3 )`
  62 @color-primary--active:       @wmui-color-accent30;
  63 @color-primary--focus:        @color-primary;
  64 // 'Destructive' Color, Background Color and states
  65 @background-color-destructive: @wmui-color-red90;
  66 @color-destructive:           @wmui-color-red50;
  67 @color-destructive--hover:    #ff4242;
  68 @color-destructive--active:   @wmui-color-red30;
  69 @color-destructive--focus:    @color-destructive;
  70 // Secondary Color and states (links only)
  71 @color-secondary:             @wmui-color-green50;
  72 @color-secondary--hover:      #1c6665;
  73 @color-secondary--active:     @wmui-color-green30;
  74 @color-secondary--focus:      @color-secondary;
  75 // Validation error feedback
  76 @color-erroneous:             @wmui-color-red50;
  77
  78
  79 // Opacity
  80 @opacity-base:                1;
  81 @opacity-base--disabled:      0.51; // = `#7d7d7d` on `background-color: #fff`; HSB 0°, 0%, 49%
  82 @opacity-icon-base:           0.87; // = `#222` on `background-color: #fff`
  83 @opacity-icon-base--hover:    0.73; // = `#454545` on `background-color: #fff`, closest to `#444`
  84 @opacity-icon-base--selected: 1;
  85
  86
  87 /* Positioning */
  88 // Z-Index
  89 @z-index-base:                0;
  90
  91
  92 /* Box Model properties */
  93 /* Max Widths */
  94 @max-width-button:            28.75em; // = `460px` at `16px` base, see T95367
  95 @max-width-input-inline:      100%;
  96
  97 // Border
  98 @border-base:                 @border-width-base solid @border-color-base;
  99 @border-dialog:               @border-base;
 100 @border-menu:                 @border-base;
 101 // Border Colors
 102 @border-color-base:           @wmui-color-base50;
 103 @border-color-base--hover:    @wmui-color-base50;
 104 @border-color-base--active:   @wmui-color-base30;
 105 @border-color-base--disabled: @color-base--disabled;
 106 @border-color-filled--disabled: @color-filled--disabled;
 107 @border-color-primary--active: #859dcc;
 108 @border-color-destructive--active: #b77c79;
 109 @border-color-inset--focus:   @color-base--inverted;
 110 @border-color-heading:        @wmui-color-base70;
 111 // Border Widths
 112 @border-width-base:           1px;
 113 // Border Radius
 114 @border-radius-base:          2px;
 115
 116 // Box Shadows
 117 @box-shadow-base--focus:      inset 0 0 0 1px @wmui-color-accent50;
 118 @box-shadow-primary--focus:   inset 0 0 0 1px @color-primary, inset 0 0 0 2px @color-base--inverted;
 119 @box-shadow-inset--inverted:  inset 0 0 0 1px @color-base--inverted;
 120 @box-shadow-filled--disabled: inset 0 0 0 1px @color-filled--disabled;
 121 @box-shadow-dialog:           0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
 122 @box-shadow-menu:             @box-shadow-dialog;
 123
 124
 125 /* Typography incl. print properties */
 126 // Font Families
 127 @font-family-base:            @font-family-sans;
 128 @font-family-heading-main:    @font-family-serif;
 129 @font-family-sans:            'Helvetica Neue', 'Helvetica', 'Nimbus Sans L', 'Arial', 'Liberation Sans', sans-serif;
 130 @font-family-sans--fallback:  sans-serif;
 131 @font-family-serif:           'Linux Libertine', 'Georgia', 'Times', serif;
 132 @font-family-serif--fallback: serif;
 133 // Line Heights
 134 @line-height-base:            1.6;
 135 @line-height-heading:         1.25;
 136 @text-decoration-link--hover: none;
 137 // Text Shadows
 138 @text-shadow-base:            0 1px 1px @color-base--inverted; // 'coined' effect
 139 @text-shadow-base--disabled:  @text-shadow-base;
 140
 141
 142 /* Other Properties */
 143 // Cursors
 144 @cursor-base--disabled:       default;
 145
 146
 147 /* Animation & Transition */
 148 // Transitions
 149 @transition-base:             @transition-duration-base;
 150 @transition-medium:           @transition-duration-medium;
 151 // Transitions > Durations
 152 @transition-duration-base:    100ms;
 153 @transition-duration-medium:  250ms;