variables.less 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431
  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: #fafafa;
  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. //== Buttons
  40. //
  41. //## For each of Bootstrap's buttons, define text, background and border color.
  42. // Default - non primary
  43. @btn-default-color: #757575;
  44. @btn-default-bg: #f3f3f3;
  45. @btn-default-hover-color: @text-color;
  46. @btn-default-hover-bg: #e0e0e0;
  47. @btn-default-active-color: @text-color;
  48. @btn-default-active-bg: #bdbdbd;
  49. // Submit form
  50. @btn-primary-color: #fff;
  51. @btn-primary-bg: darken(#b388ff, 5%);
  52. @btn-primary-hover-color: #fff;
  53. @btn-primary-hover-bg: #b388ff;
  54. @btn-primary-active-color: #fff;
  55. @btn-primary-active-bg: darken(#b388ff, 15%);
  56. // Success button
  57. @btn-success-color: #fff;
  58. @btn-success-bg: #00c853;
  59. @btn-success-hover-color: #fff;
  60. @btn-success-hover-bg: darken(#00c853, 5%);
  61. @btn-success-active-color: #fff;
  62. @btn-success-active-bg: darken(#00c853, 15%);
  63. // Delete something
  64. @btn-danger-color: #fff;
  65. @btn-danger-bg: #ef5350;
  66. @btn-danger-hover-color: #fff;
  67. @btn-danger-hover-bg: #ff8a80;
  68. @btn-danger-active-color: #fff;
  69. @btn-danger-active-bg: #d32f2f;
  70. // Default outlined
  71. @btn-default-outline-color: #616161;
  72. @btn-default-outline-border: #e0e0e0;
  73. @btn-default-outline-bg: #e0e0e0;
  74. @btn-default-outline-hover-color: #424242;
  75. @btn-default-outline-hover-border: #bdbdbd;
  76. @btn-default-outline-hover-bg: #bdbdbd;
  77. @btn-default-outline-active-color: #212121;
  78. @btn-default-outline-active-border: #eeeeee;
  79. @btn-default-outline-active-bg: #eeeeee;
  80. // Primary outlined
  81. @btn-primary-outline-color: #fff;
  82. @btn-primary-outline-border: #7c4dff;
  83. @btn-primary-outline-bg: #7c4dff;
  84. @btn-primary-outline-hover-color: #fff;
  85. @btn-primary-outline-hover-border: #651fff;
  86. @btn-primary-outline-hover-bg: #651fff;
  87. @btn-primary-outline-active-color: #fff;
  88. @btn-primary-outline-active-border: #6200ea;
  89. @btn-primary-outline-active-bg: #6200ea;
  90. //== Navbar
  91. //
  92. //##
  93. // Basics of a navbar
  94. @navbar-default-color: #757575;
  95. @navbar-default-bg: #fff;
  96. // Navbar links
  97. @navbar-default-link-color: #757575;
  98. @navbar-default-link-hover-color: #424242;
  99. @navbar-default-link-hover-bg: transparent;
  100. @navbar-default-link-active-color: @text-color;
  101. @navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
  102. @navbar-default-link-disabled-color: #ccc;
  103. @navbar-default-link-disabled-bg: transparent;
  104. // Navbar brand label
  105. @navbar-default-brand-color: #651fff;
  106. @navbar-default-brand-hover-color: #651fff;
  107. @navbar-default-brand-hover-bg: transparent;
  108. //== Page header
  109. //
  110. //##
  111. // Basics
  112. //** Background
  113. @page-header-bg: #f4f5f6;
  114. //** Heading color
  115. @page-header-color: @gray-dark;
  116. //** Other text color
  117. @page-header-text-color: @gray-light;
  118. //** Link color
  119. @page-header-link-color: @gray-dark;
  120. //** Text color
  121. @page-header-link-hover-color: @text-color;
  122. //** Tabs bar background
  123. @page-tabs-bg: fadeOut(#fff, 40%);
  124. @page-tabs-link-color: @gray-light;
  125. @page-tabs-link-bg: transparent;
  126. @page-tabs-link-hover-color: @text-color;
  127. @page-tabs-link-hover-bg: transparent;
  128. @page-tabs-link-focus-color: @text-color;
  129. @page-tabs-link-focus-bg: transparent;
  130. @page-tabs-link-active-color: @link-color;
  131. @page-tabs-link-active-bg: transparent;
  132. //== Footer
  133. //
  134. //##
  135. @page-footer-bg: @body-bg;
  136. @page-footer-text-color: #bdbdbd;
  137. @page-footer-link-color: #757575;
  138. @page-footer-link-hover-color: #212121;
  139. @page-footer-brand-color: #b388ff;
  140. @page-footer-brand-hover-color: #7c4dff;
  141. //== Auth Message
  142. //
  143. //##
  144. @auth-message-bg: #651fff;
  145. @auth-message-text-color: #fff;
  146. @auth-message-btn-default-color: #fff;
  147. @auth-message-btn-default-border: #4527a0;
  148. @auth-message-btn-default-bg: #4527a0;
  149. @auth-message-btn-default-hover-color: #fff;
  150. @auth-message-btn-default-hover-border: #b388ff;
  151. @auth-message-btn-default-hover-bg: #b388ff;
  152. @auth-message-btn-default-active-color: #651fff;
  153. @auth-message-btn-default-active-border: #fff;
  154. @auth-message-btn-default-active-bg: #fff;
  155. //== Form states and alerts
  156. //
  157. //## Define colors for form feedback states and, by default, alerts.
  158. @state-success-border: #00c853;
  159. @state-danger-border: #f44336;
  160. //== Alerts
  161. //
  162. //## Define alert colors, border radius, and padding.
  163. @alert-success-bg: @brand-success;
  164. @alert-success-text: #fff;
  165. @alert-success-border: @brand-success;
  166. @alert-info-bg: #448aff;
  167. @alert-info-text: #fff;
  168. @alert-info-border: #448aff;
  169. @alert-warning-bg: @brand-warning;
  170. @alert-warning-text: #fff;
  171. @alert-warning-border: @brand-warning;
  172. @alert-danger-bg: @brand-danger;
  173. @alert-danger-text: #fff;
  174. @alert-danger-border: @brand-danger;
  175. //== Modals
  176. //
  177. //##
  178. @modal-header-color: #424242;
  179. @modal-header-bg: #eeeeee;
  180. //== Dropdowns
  181. //
  182. //## Dropdown menu container and contents.
  183. //** Background for the dropdown menu.
  184. @dropdown-bg: #fff;
  185. //** Divider color for between dropdown items.
  186. @dropdown-divider-bg: #e5e5e5;
  187. //** Dropdown link text color.
  188. @dropdown-link-color: @gray-dark;
  189. //** Hover color for dropdown links.
  190. @dropdown-link-hover-color: @component-active-color;
  191. //** Hover background for dropdown links.
  192. @dropdown-link-hover-bg: @component-active-bg;
  193. //** Active dropdown menu item text color.
  194. @dropdown-link-active-color: @component-active-color;
  195. //** Active dropdown menu item background color.
  196. @dropdown-link-active-bg: @component-active-bg;
  197. //** Background for the dropdown menu.
  198. @dropdown-inverse-bg: fadeOut(@gray, 3%);
  199. //** Divider color for between dropdown items.
  200. @dropdown-inverse-divider-bg: @gray-light;
  201. //** Dropdown link text color.
  202. @dropdown-inverse-link-color: @gray-lighter;
  203. //** Hover color for dropdown links.
  204. @dropdown-inverse-link-hover-color: @component-active-color;
  205. //** Hover background for dropdown links.
  206. @dropdown-inverse-link-hover-bg: @component-active-bg;
  207. //** Text color for headers within dropdown menus.
  208. @dropdown-inverse-header-color: #fff;
  209. @dropdown-inverse-subheader-color: darken(#fff, 15%);
  210. //** Default button in inversed dropdown
  211. @dropdown-btn-default-color: darken(#fff, 30%);
  212. @dropdown-btn-default-border: darken(#fff, 30%);
  213. @dropdown-btn-default-bg: transparent;
  214. @dropdown-btn-default-hover-color: #fff;
  215. @dropdown-btn-default-hover-border: darken(#fff, 10%);
  216. @dropdown-btn-default-hover-bg: @gray;
  217. @dropdown-btn-default-active-color: @gray-darker;
  218. @dropdown-btn-default-active-border: darken(#fff, 2%);
  219. @dropdown-btn-default-active-bg: darken(#fff, 2%);
  220. //** Default button in inversed dropdown
  221. @dropdown-btn-primary-color: darken(#fff, 10%);
  222. @dropdown-btn-primary-border: #b388ff;
  223. @dropdown-btn-primary-bg: transparent;
  224. @dropdown-btn-primary-hover-color: #fff;
  225. @dropdown-btn-primary-hover-border: #b388ff;
  226. @dropdown-btn-primary-hover-bg: #b388ff;
  227. @dropdown-btn-primary-active-color: #651fff;
  228. @dropdown-btn-primary-active-border: darken(#fff, 2%);
  229. @dropdown-btn-primary-active-bg: darken(#fff, 2%);
  230. //== Progress bars
  231. //
  232. //##
  233. //** Background color of the whole progress component
  234. @progress-bg: #eee;
  235. //** Variable for setting rounded corners on progress bar.
  236. @progress-border-radius: @border-radius-small;
  237. //** Default progress bar color
  238. @progress-bar-bg: #651fff;
  239. //** Success progress bar color
  240. @progress-bar-success-bg: #00c853;
  241. //** Warning progress bar color
  242. @progress-bar-warning-bg: #ff9100;
  243. //** Danger progress bar color
  244. @progress-bar-danger-bg: #ff1744;
  245. //== Panels
  246. //
  247. //##
  248. @panel-heading-padding: 14px 15px;
  249. @panel-title-color: @gray-light;
  250. @panel-default-heading-bg: @panel-bg;
  251. @panel-footer-bg: @panel-bg;
  252. @panel-fieldset-color: @gray;
  253. //== List group
  254. //
  255. //##
  256. //** `.list-group-item` border color
  257. @list-group-border: #eee;
  258. @list-group-link-color: @gray-light;
  259. @list-group-link-hover-color: @text-color;
  260. //** Background color of single list items on hover
  261. @list-group-hover-bg: @list-group-bg;
  262. //** Text color of active list items
  263. @list-group-active-color: @link-color;
  264. //** Background color of active list items
  265. @list-group-active-bg: @list-group-bg;
  266. //** Border color of active list elements
  267. @list-group-active-border: @list-group-border;
  268. //== Wells
  269. //
  270. //##
  271. @well-bg: #fff;
  272. //== Page messages
  273. //
  274. //##
  275. @error-icon-color: #ef5350;
  276. @message-icon-color: #9575cd;
  277. @message-info-icon-color: #9575cd;
  278. @message-success-icon-color: #81c784;
  279. //== Categories list
  280. //
  281. //##
  282. @category-read-color: @gray-lighter;
  283. @category-new-color: @brand-primary;
  284. //== Threads list
  285. //
  286. //##
  287. @thread-unread-badge-color: #aa00ff;
  288. @thread-global-badge-color: #3d5afe;
  289. @thread-pinned-badge-color: #8c9eff;
  290. @thread-unapproved-badge-color: #ef6c00;
  291. @thread-unapproved-posts-badge-color: #f4511e;
  292. // Diff message
  293. @threads-diff-color: #fff;
  294. @threads-diff-bg: #7c4dff;
  295. @threads-diff-hover-color: #fff;
  296. @threads-diff-hover-bg: #6200ea;
  297. @threads-diff-active-color: #fff;
  298. @threads-diff-active-bg: darken(#6200ea, 10%);
  299. //== Posts
  300. //
  301. //##
  302. @post-unread-label: #aa00ff;
  303. @post-protected-icon: #bdbdbd;
  304. //== User status colors
  305. //
  306. //##
  307. @user-status-banned: @brand-danger;
  308. @user-status-online: @brand-success;
  309. @user-status-offline: @gray-light;