Variables.less 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  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: true;
  11. @has-boxshadow: false;
  12. @has-button-borders: false;
  13. // Text colors
  14. @text: #454545;
  15. @text-inverse: #ffffff;
  16. @text-disabled: #aaaaaa;
  17. @text-shadow: 0 1px 1px hsla(hue(@text-inverse), saturation(@text-inverse), lightness(@text-inverse), 0.75);
  18. @text-error: #aa0000;
  19. // Button
  20. @btn-text: #333333;
  21. @btn-text-shadow: #ffffff;
  22. @btn-border-top: #CFD3D6;
  23. @btn-border-right: #CFD3D6;
  24. @btn-border-bottom: #CFD3D6;
  25. @btn-border-left: #CFD3D6;
  26. @btn-caret-border: @btn-text;
  27. @btn-text-disabled: @text-disabled;
  28. @btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
  29. @btn-box-shadow-active: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
  30. @btn-box-disabled-opacity: 0.4;
  31. @btn-bg: #ffffff;
  32. @btn-bg-hlight: #f5f5f5;
  33. @btn-bg-hover: darken(@btn-bg, 5%);
  34. @btn-bg-hlight-hover: darken(@btn-bg-hlight, 5%);
  35. @btn-border-hover: darken(@btn-bg, 20%);
  36. @btn-border-active: darken(@btn-bg, 20%);
  37. @btn-padding: 5px 10px;
  38. @btn-primary-bg: #1B2531;
  39. @btn-primary-bg-hlight: #1b2531;
  40. @btn-primary-bg-hover: darken(@btn-primary-bg, 5%);
  41. @btn-primary-bg-hover-hlight: darken(@btn-primary-bg-hlight, 5%);
  42. @btn-primary-text: #ffffff;
  43. @btn-primary-text-shadow: #333333;
  44. @btn-primary-border-top: mix(@btn-border-top, @btn-primary-bg, 50%);
  45. @btn-primary-border-right: mix(@btn-border-right, @btn-primary-bg, 50%);
  46. @btn-primary-border-bottom: mix(@btn-border-bottom, @btn-primary-bg, 50%);
  47. @btn-primary-border-left: mix(@btn-border-left, @btn-primary-bg, 50%);
  48. @btn-primary-border: transparent;
  49. @btn-primary-border-hover: transparent;
  50. // Button group
  51. @btn-group-border-width: 1px;
  52. // Menu
  53. @menuitem-text: #333333;
  54. @menu-bg: #ffffff;
  55. @menu-margin: -1px 0 0;
  56. @menu-border: #CFD3D6;
  57. @menubar-border: mix(@panel-border, @panel-bg, 60%);
  58. @menuitem-text-inverse: #333;
  59. @menubar-bg-active: darken(@btn-bg, 10%);
  60. @menuitem-bg-hover: #0081C2;
  61. @menuitem-bg-selected: #f5f5f5;
  62. @menuitem-bg-selected-hlight: #f5f5f5;
  63. @menuitem-bg-disabled: #CCC;
  64. @menuitem-caret: @menuitem-text;
  65. @menuitem-caret-selected: @menuitem-text-inverse;
  66. @menuitem-separator-top: #CFD3D6;
  67. @menuitem-separator-bottom: #ffffff;
  68. @menuitem-bg-active: #F5F5F5;
  69. @menuitem-text-active: #333333;
  70. @menuitem-preview-border-active: #CFD3D6;
  71. @menubar-menubtn-text: ;
  72. // Panel
  73. @panel-border: #cfd3d6;
  74. @panel-bg: #f5f5f5;
  75. @panel-bg-hlight: #f5f5f5;
  76. // Tabs
  77. @tab-border: #c5c5c5;
  78. @tab-bg: #e3e3e3;
  79. @tab-bg-hover: #fdfdfd;
  80. @tab-bg-active: #fdfdfd;
  81. @tabs-bg: #ffffff;
  82. // Tooltip
  83. @tooltip-bg: #000;
  84. @tooltip-text: white;
  85. @tooltip-font-size: 11px;
  86. // Notification
  87. @notification-font-size: 14px;
  88. @notification-bg: #f0f0f0;
  89. @notification-border: #cccccc;
  90. @notification-text: #333333;
  91. @notification-success-bg: #dff0d8;
  92. @notification-success-border: #d6e9c6;
  93. @notification-success-text: #3c763d;
  94. @notification-info-bg: #d9edf7;
  95. @notification-info-border: #779ecb;
  96. @notification-info-text: #31708f;
  97. @notification-warning-bg: #fcf8e3;
  98. @notification-warning-border: #faebcc;
  99. @notification-warning-text: #8a6d3b;
  100. @notification-error-bg: #f2dede;
  101. @notification-error-border: #ebccd1;
  102. @notification-error-text: #a94442;
  103. // Window
  104. @window-border: #cfd3d6;
  105. @window-head-border: @window-border;
  106. @window-head-close: mix(@text, @window-bg, 60%);
  107. @window-head-close-hover: mix(@text, @window-bg, 40%);
  108. @window-foot-border: @window-border;
  109. @window-foot-bg: @window-bg;
  110. @window-fullscreen-bg: #FFF;
  111. @window-modalblock-bg: #000;
  112. @window-modalblock-opacity: 0.3;
  113. @window-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  114. @window-bg: #ffffff;
  115. @window-title-font-size: 20px;
  116. // Popover
  117. @popover-bg: @window-bg;
  118. @popover-arrow-width: 10px;
  119. @popover-arrow: @window-bg;
  120. @popover-arrow-outer-width: @popover-arrow-width + 1;
  121. @popover-arrow-outer: rgba(0, 0, 0, 0.25);
  122. // Floatpanel
  123. @floatpanel-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  124. // Checkbox
  125. @checkbox-bg: @btn-bg;
  126. @checkbox-bg-hlight: @btn-bg-hlight;
  127. @checkbox-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
  128. @checkbox-border: #cfd3d6;
  129. @checkbox-border-focus: #CFD3D6;
  130. // Path
  131. @path-text: @text;
  132. @path-bg-focus: #666;
  133. @path-text-focus: #fff;
  134. // Textbox
  135. @textbox-text-placeholder: #aaa;
  136. @textbox-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  137. @textbox-bg: #ffffff;
  138. @textbox-border: #c5c5c5;
  139. @textbox-border-focus: #59a5e1;
  140. // Selectbox
  141. @selectbox-bg: @textbox-bg;
  142. @selectbox-border: @textbox-border;
  143. // Throbber
  144. @throbber-bg: #fff url('img/loader.gif') no-repeat center center;
  145. // Combobox
  146. @combobox-border: @textbox-border;
  147. // Colorpicker
  148. @colorpicker-border: @textbox-border;
  149. @colorpicker-hue-bg: #fff;
  150. @colorpicker-hue-border: #333;
  151. // Grid
  152. @grid-bg-active: @menuitem-bg-active;
  153. @grid-border-active: #a1a1a1;
  154. @grid-border: #d6d6d6;
  155. // Misc
  156. @colorbtn-backcolor-bg: #bbbbbb;
  157. @iframe-border: @panel-border;
  158. // Slider
  159. @slider-border: #aaaaaa;
  160. @slider-bg: #eeeeee;
  161. @slider-handle-border: #bbbbbb;
  162. @slider-handle-bg: #dddddd;
  163. // Progress
  164. @progress-border: #cccccc;
  165. @progress-bar-bg: #dfdfdf;
  166. @progress-bar-bg-hlight: #cccccc;
  167. @progress-text: #333333;
  168. @progress-text-shadow: #ffffff;
  169. // Flow layout
  170. @flow-layout-spacing: 2px;