variables.less 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499
  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: #f5f5f5;
  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. @navbar-btn-sign-in-color: #e0e0e0;
  109. @navbar-btn-sign-in-border: transparent;
  110. @navbar-btn-sign-in-bg: transparent;
  111. @navbar-btn-sign-in-hover-color: #fff;
  112. @navbar-btn-sign-in-hover-border: #666060;
  113. @navbar-btn-sign-in-hover-bg: #666060;
  114. @navbar-btn-sign-in-active-color: #fff;
  115. @navbar-btn-sign-in-active-border: #424242;
  116. @navbar-btn-sign-in-active-bg: #424242;
  117. @navbar-btn-sign-in-radius: 100px;
  118. // Register button
  119. @navbar-btn-register-color: #e0e0e0;
  120. @navbar-btn-register-border: #757575;
  121. @navbar-btn-register-bg: transparent;
  122. @navbar-btn-register-hover-color: #212121;
  123. @navbar-btn-register-hover-border: #fff;
  124. @navbar-btn-register-hover-bg: #fff;
  125. @navbar-btn-register-active-color: #212121;
  126. @navbar-btn-register-active-border: #bdbdbd;
  127. @navbar-btn-register-active-bg: #bdbdbd;
  128. @navbar-btn-register-radius: 100px;
  129. //== Page header
  130. //
  131. //##
  132. // Basics
  133. //** Background
  134. @page-header-bg: #6200ea;
  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. //** Heading min height
  144. @page-header-min-height: 8px;
  145. // Buttons
  146. //** Default
  147. @page-header-btn-default-color: #fff;
  148. @page-header-btn-default-bg: #7c4dff;
  149. @page-header-btn-default-hover-color: #fff;
  150. @page-header-btn-default-hover-bg: #651fff;
  151. @page-header-btn-default-active-color: #fff;
  152. @page-header-btn-default-active-bg: #6200ea;
  153. //** Primary
  154. @page-header-btn-primary-color: #424242;
  155. @page-header-btn-primary-bg: #f5f5f5;
  156. @page-header-btn-primary-hover-color: #212121;
  157. @page-header-btn-primary-hover-bg: #fff;
  158. @page-header-btn-primary-active-color: #fff;
  159. @page-header-btn-primary-active-bg: #212121;
  160. // Tabs
  161. @page-tabs-bg: transparent;
  162. @page-tabs-link-color: #ede7f6;
  163. @page-tabs-link-bg: transparent;
  164. @page-tabs-link-hover-color: #fff;
  165. @page-tabs-link-hover-bg: #7c4dff;
  166. @page-tabs-link-focus-color: #fff;
  167. @page-tabs-link-focus-bg: #7c4dff;
  168. @page-tabs-link-active-color: #424242;
  169. @page-tabs-link-active-bg: #fff;
  170. //== Footer
  171. //
  172. //##
  173. @page-footer-bg: @body-bg;
  174. @page-footer-text-color: #bdbdbd;
  175. @page-footer-link-color: #757575;
  176. @page-footer-link-hover-color: #212121;
  177. @page-footer-brand-color: #b388ff;
  178. @page-footer-brand-hover-color: lighten(#7c4dff, 5%);
  179. //== Auth Message
  180. //
  181. //##
  182. @auth-message-bg: #651fff;
  183. @auth-message-text-color: #fff;
  184. @auth-message-btn-default-color: #fff;
  185. @auth-message-btn-default-border: #4527a0;
  186. @auth-message-btn-default-bg: #4527a0;
  187. @auth-message-btn-default-hover-color: #fff;
  188. @auth-message-btn-default-hover-border: #b388ff;
  189. @auth-message-btn-default-hover-bg: #b388ff;
  190. @auth-message-btn-default-active-color: #651fff;
  191. @auth-message-btn-default-active-border: #fff;
  192. @auth-message-btn-default-active-bg: #fff;
  193. //== Form states and alerts
  194. //
  195. //## Define colors for form feedback states and, by default, alerts.
  196. @state-success-border: #00c853;
  197. @state-danger-border: #f44336;
  198. //== Alerts
  199. //
  200. //## Define alert colors, border radius, and padding.
  201. @alert-success-bg: @brand-success;
  202. @alert-success-text: #fff;
  203. @alert-success-border: @brand-success;
  204. @alert-info-bg: #448aff;
  205. @alert-info-text: #fff;
  206. @alert-info-border: #448aff;
  207. @alert-warning-bg: @brand-warning;
  208. @alert-warning-text: #fff;
  209. @alert-warning-border: @brand-warning;
  210. @alert-danger-bg: @brand-danger;
  211. @alert-danger-text: #fff;
  212. @alert-danger-border: @brand-danger;
  213. //== Modals
  214. //
  215. //##
  216. @modal-header-color: #424242;
  217. @modal-header-bg: #eeeeee;
  218. //== Dropdowns
  219. //
  220. //## Dropdown menu container and contents.
  221. //** Background for the dropdown menu.
  222. @dropdown-bg: #fff;
  223. //** Divider color for between dropdown items.
  224. @dropdown-divider-bg: #e5e5e5;
  225. //** Dropdown link text color.
  226. @dropdown-link-color: @gray-dark;
  227. //** Hover color for dropdown links.
  228. @dropdown-link-hover-color: #FAFAFA;
  229. //** Hover background for dropdown links.
  230. @dropdown-link-hover-bg: #424242;
  231. //** Active dropdown menu item text color.
  232. @dropdown-link-active-color: @component-active-color;
  233. //** Active dropdown menu item background color.
  234. @dropdown-link-active-bg: @component-active-bg;
  235. //** Default button in inversed dropdown
  236. @dropdown-btn-default-color: darken(#fff, 30%);
  237. @dropdown-btn-default-border: darken(#fff, 30%);
  238. @dropdown-btn-default-bg: transparent;
  239. @dropdown-btn-default-hover-color: #fff;
  240. @dropdown-btn-default-hover-border: darken(#fff, 10%);
  241. @dropdown-btn-default-hover-bg: @gray;
  242. @dropdown-btn-default-active-color: @gray-darker;
  243. @dropdown-btn-default-active-border: darken(#fff, 2%);
  244. @dropdown-btn-default-active-bg: darken(#fff, 2%);
  245. //** Default button in inversed dropdown
  246. @dropdown-btn-primary-color: darken(#fff, 10%);
  247. @dropdown-btn-primary-border: #b388ff;
  248. @dropdown-btn-primary-bg: transparent;
  249. @dropdown-btn-primary-hover-color: #fff;
  250. @dropdown-btn-primary-hover-border: #b388ff;
  251. @dropdown-btn-primary-hover-bg: #b388ff;
  252. @dropdown-btn-primary-active-color: #651fff;
  253. @dropdown-btn-primary-active-border: darken(#fff, 2%);
  254. @dropdown-btn-primary-active-bg: darken(#fff, 2%);
  255. //== Progress bars
  256. //
  257. //##
  258. //** Background color of the whole progress component
  259. @progress-bg: #eee;
  260. //** Variable for setting rounded corners on progress bar.
  261. @progress-border-radius: @border-radius-small;
  262. //** Default progress bar color
  263. @progress-bar-bg: #651fff;
  264. //** Success progress bar color
  265. @progress-bar-success-bg: #00c853;
  266. //** Warning progress bar color
  267. @progress-bar-warning-bg: #ff9100;
  268. //** Danger progress bar color
  269. @progress-bar-danger-bg: #ff1744;
  270. //== Panels
  271. //
  272. //##
  273. @panel-heading-padding: 14px 15px;
  274. @panel-title-color: @gray-light;
  275. @panel-default-heading-bg: @panel-bg;
  276. @panel-footer-bg: @panel-bg;
  277. @panel-fieldset-color: @gray;
  278. @panel-form-border: #ddd;
  279. //== List group
  280. //
  281. //##
  282. //** `.list-group-item` border color
  283. @list-group-border: @gray-lighter;
  284. @list-group-border-radius: @border-radius-small;
  285. @list-group-outer-border: #ddd;
  286. @list-group-link-color: @gray-light;
  287. @list-group-link-hover-color: @text-color;
  288. //** Background color of single list items on hover
  289. @list-group-hover-bg: @list-group-bg;
  290. //** Text color of active list items
  291. @list-group-active-color: @link-color;
  292. //** Background color of active list items
  293. @list-group-active-bg: @list-group-bg;
  294. //** Border color of active list elements
  295. @list-group-active-border: @list-group-border;
  296. //== Side nav
  297. //
  298. //##
  299. @side-nav-bg: #f5f5f5;
  300. @side-nav-color: #757575;
  301. @side-nav-hover-bg: #e0e0e0;
  302. @side-nav-hover-color: #424242;
  303. @side-nav-active-bg: @component-active-bg;
  304. @side-nav-active-color: @component-active-color;
  305. //== Wells
  306. //
  307. //##
  308. @well-bg: #fff;
  309. @well-border: #ddd;
  310. //== Page messages
  311. //
  312. //##
  313. @error-icon-color: #ef5350;
  314. @message-icon-color: #9575cd;
  315. @message-info-icon-color: #9575cd;
  316. @message-success-icon-color: #81c784;
  317. //== User cards
  318. //
  319. //##
  320. @user-card-bg: #f5f5f5;
  321. //== Categories list
  322. //
  323. //##
  324. @category-read-color: @gray-lighter;
  325. @category-new-color: @brand-primary;
  326. //== Threads list
  327. //
  328. //##
  329. @thread-unread-badge-color: #aa00ff;
  330. @thread-global-badge-color: #3d5afe;
  331. @thread-pinned-badge-color: #8c9eff;
  332. @thread-answered-badge-color: #388e3c;
  333. @thread-unapproved-badge-color: #ef6c00;
  334. @thread-unapproved-posts-badge-color: #f4511e;
  335. // Diff message
  336. @threads-diff-color: #fff;
  337. @threads-diff-bg: #7c4dff;
  338. @threads-diff-hover-color: #fff;
  339. @threads-diff-hover-bg: #6200ea;
  340. @threads-diff-active-color: #fff;
  341. @threads-diff-active-bg: darken(#6200ea, 10%);
  342. //== Posts
  343. //
  344. //##
  345. @post-bg: @body-bg;
  346. @post-border: #ddd;
  347. @post-unread-label: #aa00ff;
  348. @post-protected-icon: #bdbdbd;
  349. //== User status colors
  350. //
  351. //##
  352. @user-status-banned: @brand-danger;
  353. @user-status-online: @brand-success;
  354. @user-status-offline: @gray-light;