variables.less 12 KB

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