variables.less 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. //
  2. // Flavor Theme Variables
  3. // --------------------------------------------------
  4. //== Colors
  5. //
  6. //## Gray and brand colors for use across Bootstrap.
  7. @gray-base: #000;
  8. @gray-darker: lighten(@gray-base, 13.5%); // #222
  9. @gray-dark: lighten(@gray-base, 20%); // #333
  10. @gray: lighten(@gray-base, 33.5%); // #555
  11. @gray-light: lighten(@gray-base, 46.7%); // #777
  12. @gray-lighter: lighten(@gray-base, 93.5%); // #eee
  13. @brand-primary: #651fff;
  14. @brand-success: #43a047;
  15. @brand-info: #3d5afe;
  16. @brand-warning: #ef6c00;
  17. @brand-danger: #f44336;
  18. //== Scaffolding
  19. //
  20. //## Settings for some of the most global styles.
  21. //** Background color for `<body>`.
  22. @body-bg: #f5f5f5;
  23. //** Global text color on `<body>`.
  24. @text-color: #212121;
  25. //** Global textual link color.
  26. @link-color: @brand-primary;
  27. //** Link hover color set via `darken()` function.
  28. @link-hover-color: darken(@link-color, 15%);
  29. //** Link hover decoration.
  30. @link-hover-decoration: underline;
  31. //** Shadows
  32. @shadow-key-umbra-opacity: 0.06;
  33. @shadow-key-penumbra-opacity: 0.04;
  34. @shadow-ambient-shadow-opacity: 0.12;
  35. //** Global color for active items (e.g., navs or dropdowns).
  36. @component-active-color: #fff;
  37. //** Global background color for active items (e.g., navs or dropdowns).
  38. @component-active-bg: @link-color;
  39. //== Navbar
  40. //
  41. //##
  42. // Basics of a navbar
  43. @navbar-default-color: #757575;
  44. @navbar-default-bg: #fff;
  45. // Navbar links
  46. @navbar-default-link-color: #757575;
  47. @navbar-default-link-hover-color: #424242;
  48. @navbar-default-link-hover-bg: transparent;
  49. @navbar-default-link-active-color: @text-color;
  50. @navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
  51. @navbar-default-link-disabled-color: #ccc;
  52. @navbar-default-link-disabled-bg: transparent;
  53. // Navbar brand label
  54. @navbar-default-brand-color: #aa00ff;
  55. @navbar-default-brand-hover-color: #aa00ff;
  56. @navbar-default-brand-hover-bg: transparent;
  57. //== Page header
  58. //
  59. //##
  60. // Basics
  61. //** Background
  62. @page-header-bg: #f4f5f6;
  63. //** Heading color
  64. @page-header-color: @gray-dark;
  65. //** Other text color
  66. @page-header-text-color: @gray-light;
  67. //** Link color
  68. @page-header-link-color: @gray-dark;
  69. //** Text color
  70. @page-header-link-hover-color: @text-color;
  71. //** Default btn
  72. @page-header-btn-default-color: @gray-light;
  73. @page-header-btn-default-border: lighten(@gray-light, 20%);
  74. @page-header-btn-default-bg: fadeOut(@page-header-bg, 50%);
  75. @page-header-btn-default-hover-color: #651fff;
  76. @page-header-btn-default-hover-border: #651fff;
  77. @page-header-btn-default-hover-bg: #f5f5f5;
  78. @page-header-btn-default-active-color: #fff;
  79. @page-header-btn-default-active-border: #651fff;
  80. @page-header-btn-default-active-bg: #651fff;
  81. //** Success btn
  82. @page-header-btn-success-color: #aa00ff;
  83. @page-header-btn-success-border: #aa00ff;
  84. @page-header-btn-success-bg: fadeOut(@page-header-bg, 50%);
  85. @page-header-btn-success-hover-color: #d500f9;
  86. @page-header-btn-success-hover-border: #d500f9;
  87. @page-header-btn-success-hover-bg: #f5f5f5;
  88. @page-header-btn-success-active-color: #fff;
  89. @page-header-btn-success-active-border: #d500f9;
  90. @page-header-btn-success-active-bg: #d500f9;
  91. //** Tabs bar background
  92. @page-tabs-bg: fadeOut(#fff, 40%);
  93. @page-tabs-link-color: @gray-light;
  94. @page-tabs-link-bg: transparent;
  95. @page-tabs-link-hover-color: @text-color;
  96. @page-tabs-link-hover-bg: transparent;
  97. @page-tabs-link-focus-color: @text-color;
  98. @page-tabs-link-focus-bg: transparent;
  99. @page-tabs-link-active-color: @link-color;
  100. @page-tabs-link-active-bg: transparent;
  101. //== Footer
  102. //
  103. //##
  104. @page-footer-bg: @body-bg;
  105. @page-footer-text-color: #bdbdbd;
  106. @page-footer-link-color: #757575;
  107. @page-footer-link-hover-color: #212121;
  108. @page-footer-brand-color: #b388ff;
  109. @page-footer-brand-hover-color: #7c4dff;
  110. //== Auth Message
  111. //
  112. //##
  113. @auth-message-bg: #651fff;
  114. @auth-message-text-color: #fff;
  115. @auth-message-btn-default-color: #fff;
  116. @auth-message-btn-default-border: #4527a0;
  117. @auth-message-btn-default-bg: #4527a0;
  118. @auth-message-btn-default-hover-color: #fff;
  119. @auth-message-btn-default-hover-border: #b388ff;
  120. @auth-message-btn-default-hover-bg: #b388ff;
  121. @auth-message-btn-default-active-color: #651fff;
  122. @auth-message-btn-default-active-border: #fff;
  123. @auth-message-btn-default-active-bg: #fff;
  124. //== Alerts
  125. //
  126. //## Define alert colors, border radius, and padding.
  127. @alert-success-bg: @brand-success;
  128. @alert-success-text: #fff;
  129. @alert-success-border: @brand-success;
  130. @alert-info-bg: #448aff;
  131. @alert-info-text: #fff;
  132. @alert-info-border: #448aff;
  133. @alert-warning-bg: @brand-warning;
  134. @alert-warning-text: #fff;
  135. @alert-warning-border: @brand-warning;
  136. @alert-danger-bg: @brand-danger;
  137. @alert-danger-text: #fff;
  138. @alert-danger-border: @brand-danger;
  139. //== Dropdowns
  140. //
  141. //## Dropdown menu container and contents.
  142. //** Background for the dropdown menu.
  143. @dropdown-bg: #fff;
  144. //** Divider color for between dropdown items.
  145. @dropdown-divider-bg: #e5e5e5;
  146. //** Dropdown link text color.
  147. @dropdown-link-color: @gray-dark;
  148. //** Hover color for dropdown links.
  149. @dropdown-link-hover-color: @component-active-color;
  150. //** Hover background for dropdown links.
  151. @dropdown-link-hover-bg: @component-active-bg;
  152. //** Active dropdown menu item text color.
  153. @dropdown-link-active-color: @component-active-color;
  154. //** Active dropdown menu item background color.
  155. @dropdown-link-active-bg: @component-active-bg;
  156. //** Background for the dropdown menu.
  157. @dropdown-inverse-bg: fadeOut(@gray, 3%);
  158. //** Divider color for between dropdown items.
  159. @dropdown-inverse-divider-bg: @gray-light;
  160. //** Dropdown link text color.
  161. @dropdown-inverse-link-color: @gray-lighter;
  162. //** Hover color for dropdown links.
  163. @dropdown-inverse-link-hover-color: @component-active-color;
  164. //** Hover background for dropdown links.
  165. @dropdown-inverse-link-hover-bg: @component-active-bg;
  166. //** Text color for headers within dropdown menus.
  167. @dropdown-inverse-header-color: #fff;
  168. @dropdown-inverse-subheader-color: darken(#fff, 15%);
  169. //** Default button in inversed dropdown
  170. @dropdown-btn-default-color: darken(#fff, 30%);
  171. @dropdown-btn-default-border: darken(#fff, 30%);
  172. @dropdown-btn-default-bg: transparent;
  173. @dropdown-btn-default-hover-color: #fff;
  174. @dropdown-btn-default-hover-border: darken(#fff, 10%);
  175. @dropdown-btn-default-hover-bg: @gray;
  176. @dropdown-btn-default-active-color: @gray-darker;
  177. @dropdown-btn-default-active-border: darken(#fff, 2%);
  178. @dropdown-btn-default-active-bg: darken(#fff, 2%);
  179. //** Default button in inversed dropdown
  180. @dropdown-btn-primary-color: darken(#fff, 10%);
  181. @dropdown-btn-primary-border: #b388ff;
  182. @dropdown-btn-primary-bg: transparent;
  183. @dropdown-btn-primary-hover-color: #fff;
  184. @dropdown-btn-primary-hover-border: #b388ff;
  185. @dropdown-btn-primary-hover-bg: #b388ff;
  186. @dropdown-btn-primary-active-color: #651fff;
  187. @dropdown-btn-primary-active-border: darken(#fff, 2%);
  188. @dropdown-btn-primary-active-bg: darken(#fff, 2%);
  189. //== List group
  190. //
  191. //##
  192. //** `.list-group-item` border color
  193. @list-group-border: #eee;