2
0

Variables.less 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. // Variables
  2. // Syntax: <control>-(<sub control>)-<bg|border|text>-(<state>)-(<extra>);
  3. // Example: @btn-primary-bg-hover-hlight;
  4. @prefix: mce;
  5. // Default font
  6. @font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  7. @font-size: 14px;
  8. @line-height: 20px;
  9. @has-gradients: false;
  10. @has-radius: false;
  11. @has-boxshadow: false;
  12. @has-button-borders: false;
  13. // Text colors
  14. @text: #333;
  15. @text-inverse: white;
  16. @text-disabled: #aaa;
  17. @text-shadow: 0 1px 1px hsla(hue(@text-inverse), saturation(@text-inverse), lightness(@text-inverse), 0.75);
  18. @text-error: #b94a48;
  19. @text-warning: #c09853;
  20. @text-success: #468847;
  21. // Button
  22. @btn-text: @text;
  23. @btn-text-shadow: none;
  24. @btn-border-top: transparent;
  25. @btn-border-right: transparent;
  26. @btn-border-bottom: transparent;
  27. @btn-border-left: transparent;
  28. @btn-caret-border: @btn-text;
  29. @btn-text-disabled: @text-disabled;
  30. @btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
  31. @btn-box-shadow-active: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
  32. @btn-box-disabled-opacity: 0.4;
  33. @btn-bg: white;
  34. @btn-bg-hlight: #D9D9D9;
  35. @btn-bg-hover: darken(@btn-bg, 5%);
  36. @btn-bg-hlight-hover: darken(@btn-bg-hlight, 5%);
  37. @btn-border-hover: darken(@btn-bg, 20%);
  38. @btn-border-active: darken(@btn-bg, 20%);
  39. @btn-padding: 4px 8px;
  40. @btn-primary-bg: #2980b9;
  41. @btn-primary-bg-hlight: #3498db;
  42. @btn-primary-bg-hover: darken(@btn-primary-bg, 5%);
  43. @btn-primary-bg-hover-hlight: darken(@btn-primary-bg-hlight, 5%);
  44. @btn-primary-text: #fff;
  45. @btn-primary-text-shadow: none;
  46. @btn-primary-border-top: mix(@btn-border-top, @btn-primary-bg, 50%);
  47. @btn-primary-border-right: mix(@btn-border-right, @btn-primary-bg, 50%);
  48. @btn-primary-border-bottom: mix(@btn-border-bottom, @btn-primary-bg, 50%);
  49. @btn-primary-border-left: mix(@btn-border-left, @btn-primary-bg, 50%);
  50. @btn-primary-border: transparent;
  51. @btn-primary-border-hover: transparent;
  52. // Button group
  53. @btn-group-border-width: 1px;
  54. // Menu
  55. @menuitem-text: @text;
  56. @menu-bg: #fff;
  57. @menu-margin: -1px 0 0;
  58. @menu-border: rgba(0, 0, 0, 0.2);
  59. @menubar-border: mix(@panel-border, @panel-bg, 60%);
  60. @menuitem-text-inverse: @text-inverse;
  61. @menubar-bg-active: darken(@btn-bg, 10%);
  62. @menuitem-bg-hover: #0081C2;
  63. @menuitem-bg-selected: #2980b9;
  64. @menuitem-bg-selected-hlight: #3498db;
  65. @menuitem-bg-disabled: #CCC;
  66. @menuitem-caret: @menuitem-text;
  67. @menuitem-caret-selected: @menuitem-text-inverse;
  68. @menuitem-separator-top: transparent;
  69. @menuitem-separator-bottom: rgba(0,0,0,0.1);
  70. @menuitem-bg-active: #3498db;
  71. @menuitem-text-active: @text-inverse;
  72. @menuitem-preview-border-active: #aaa;
  73. @menubar-menubtn-text: #333;
  74. // Panel
  75. @panel-border: rgba(0,0,0,.2);
  76. @panel-bg: #FDFDFD;
  77. @panel-bg-hlight: #DDD;
  78. // Tabs
  79. @tab-border: #c5c5c5;
  80. @tab-bg: #ffffff;
  81. @tab-bg-hover: #FDFDFD;
  82. @tab-bg-active: #FDFDFD;
  83. @tabs-bg: #FFF;
  84. // Tooltip
  85. @tooltip-bg: #000;
  86. @tooltip-text: white;
  87. @tooltip-font-size: 11px;
  88. // Notification
  89. @notification-font-size: 14px;
  90. @notification-bg: #F0F0F0;
  91. @notification-border: #CCCCCC;
  92. @notification-text: #333333;
  93. @notification-success-bg: #dff0d8;
  94. @notification-success-border: #d6e9c6;
  95. @notification-success-text: #3c763d;
  96. @notification-info-bg: #d9edf7;
  97. @notification-info-border: #779ECB;
  98. @notification-info-text: #31708f;
  99. @notification-warning-bg: #fcf8e3;
  100. @notification-warning-border: #faebcc;
  101. @notification-warning-text: #8a6d3b;
  102. @notification-error-bg: #f2dede;
  103. @notification-error-border: #ebccd1;
  104. @notification-error-text: #a94442;
  105. // Infobox
  106. @infobox-bg: @notification-bg;
  107. @infobox-border: @notification-border;
  108. @infobox-text: @notification-text;
  109. @infobox-success-bg: @notification-success-bg;
  110. @infobox-success-border: @notification-success-border;
  111. @infobox-success-text: @notification-success-text;
  112. @infobox-info-bg: @notification-info-bg;
  113. @infobox-info-border: @notification-info-border;
  114. @infobox-info-text: @notification-info-text;
  115. @infobox-warning-bg: @notification-warning-bg;
  116. @infobox-warning-border: @notification-warning-border;
  117. @infobox-warning-text: @notification-warning-text;
  118. @infobox-error-bg: @notification-error-bg;
  119. @infobox-error-border: @notification-error-border;
  120. @infobox-error-text: @notification-error-text;
  121. // Window
  122. @window-border: #c5c5c5;
  123. @window-head-border: @window-border;
  124. @window-head-close: mix(@text, @window-bg, 60%);
  125. @window-head-close-hover: mix(@text, @window-bg, 40%);
  126. @window-foot-border: @window-border;
  127. @window-foot-bg: @window-bg;
  128. @window-fullscreen-bg: #FFF;
  129. @window-modalblock-bg: #000;
  130. @window-modalblock-opacity: 0.3;
  131. @window-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  132. @window-bg: #FFF;
  133. @window-title-font-size: 20px;
  134. // Popover
  135. @popover-bg: @window-bg;
  136. @popover-arrow-width: 10px;
  137. @popover-arrow: @window-bg;
  138. @popover-arrow-outer-width: @popover-arrow-width + 1;
  139. @popover-arrow-outer: rgba(0, 0, 0, 0.25);
  140. // Floatpanel
  141. @floatpanel-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  142. // Checkbox
  143. @checkbox-bg: @btn-bg;
  144. @checkbox-bg-hlight: @btn-bg-hlight;
  145. @checkbox-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
  146. @checkbox-border: #c5c5c5;
  147. @checkbox-border-focus: rgba(82, 168, 236, .8);
  148. // Path
  149. @path-text: @text;
  150. @path-bg-focus: #666;
  151. @path-text-focus: #fff;
  152. // Textbox
  153. @textbox-text-placeholder: #aaa;
  154. @textbox-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  155. @textbox-bg: #fff;
  156. @textbox-border: #c5c5c5;
  157. @textbox-border-focus: #3498db;
  158. // Selectbox
  159. @selectbox-bg: @textbox-bg;
  160. @selectbox-border: @textbox-border;
  161. // Throbber
  162. @throbber-bg: #fff url('img/loader.gif') no-repeat center center;
  163. // Combobox
  164. @combobox-border: @textbox-border;
  165. @combobox-error-text: @text-error;
  166. @combobox-warning-text: @text-warning;
  167. @combobox-success-text: @text-success;
  168. // Colorpicker
  169. @colorpicker-border: @textbox-border;
  170. @colorpicker-hue-bg: #fff;
  171. @colorpicker-hue-border: #333;
  172. // Grid
  173. @grid-bg-active: @menuitem-bg-active;
  174. @grid-border-active: @menuitem-bg-active;
  175. @grid-border: #d6d6d6;
  176. // Misc
  177. @colorbtn-backcolor-bg: #BBB;
  178. @iframe-border: @panel-border;
  179. // Slider
  180. @slider-border: #AAA;
  181. @slider-bg: #EEE;
  182. @slider-handle-border: #BBB;
  183. @slider-handle-bg: #DDD;
  184. @slider-handle-bg-focus: #BBB;
  185. // Progress
  186. @progress-border: #ccc;
  187. @progress-bar-bg: #dfdfdf;
  188. @progress-bar-bg-hlight: #cccccc;
  189. @progress-text: @text;
  190. // Flow layout
  191. @flow-layout-spacing: 2px;