variables.less 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. //
  2. // Misago Variables
  3. // --------------------------------------------------
  4. //== Colors
  5. //
  6. //## Basic colors for use in this flavor
  7. @brand-primary: #c0392b;
  8. @brand-secondary: #3498db;
  9. @brand-success: #2ecc71;
  10. @brand-info: #5bc0de;
  11. @brand-warning: #f0ad4e;
  12. @brand-danger: #e74c3c;
  13. // Background color for `<body>`.
  14. @body-bg: darken(#fff, 2%);
  15. // Global text color on `<body>`.
  16. @text-color: #444;
  17. // Headings color
  18. @headings-small-color: darken(@body-bg, 30%);
  19. // Global textual link color.
  20. @link-color: @brand-secondary;
  21. @link-hover-color: darken(@link-color, 15%);
  22. // Text muted color
  23. @text-muted: darken(@body-bg, 40%);
  24. @link-muted-color: @gray;
  25. @link-muted-hover-color: @gray-darker;
  26. // Components
  27. @component-active-bg: @brand-secondary;
  28. @component-active-color: #fff;
  29. //== Navbar
  30. //
  31. //## Navbar style
  32. @navbar-inverse-bg: darken(@body-bg, 5%);
  33. @navbar-inverse-link-color: darken(@navbar-inverse-bg, 30%);
  34. @navbar-inverse-link-hover-color: darken(@navbar-inverse-bg, 60%);
  35. @navbar-inverse-link-hover-bg: transparent;
  36. @navbar-inverse-link-active-color: darken(@navbar-inverse-bg, 70%);
  37. @navbar-inverse-link-active-bg: @navbar-inverse-bg;
  38. @navbar-default-bg: darken(@body-bg, 10%);
  39. @navbar-default-link-color: darken(@navbar-default-bg, 40%);
  40. @navbar-default-link-hover-color: darken(@navbar-default-bg, 60%);
  41. @navbar-default-link-hover-bg: darken(@navbar-default-bg, 3%);
  42. @navbar-default-link-active-color: darken(@navbar-inverse-bg, 70%);
  43. @navbar-default-link-active-bg: @navbar-inverse-bg;
  44. @navbar-border: 3px solid darken(@body-bg, 20%);
  45. //== Dropdowns
  46. //
  47. //## Misago dropdowns flavor
  48. // Dropdown link text color.
  49. @dropdown-link-color: lighten(@text-color, 10%);
  50. // Hover color for dropdown links.
  51. @dropdown-link-hover-color: #fff;
  52. // Hover background for dropdown links.
  53. @dropdown-link-hover-bg: #666;
  54. // Active dropdown menu item text color.
  55. @dropdown-link-active-color: #fff;
  56. // Active dropdown menu item background color.
  57. @dropdown-link-active-bg: #333;
  58. // Open dropdown shadow color.
  59. @dropdown-shadow: fadeOut(#333, 50%);
  60. //== Navs
  61. //
  62. //##
  63. //=== Shared nav styles
  64. @nav-link-hover-bg: transparent;
  65. @nav-link-color: @gray-light;
  66. @nav-link-hover-color: @text-color;
  67. //== Tabs
  68. @nav-tabs-padding: 10px 12px;
  69. @nav-tabs-border-color: #ddd;
  70. @nav-tabs-link-hover-border-color: darken(@nav-tabs-border-color, 40%);
  71. @nav-tabs-link-active-border-color: @brand-secondary;
  72. @nav-tabs-active-link-hover-bg: transparent;
  73. @nav-tabs-active-link-hover-color: @text-color;
  74. @nav-tabs-active-link-hover-border-color: @brand-primary;
  75. @nav-tabs-justified-link-border-color: #ddd;
  76. @nav-tabs-justified-active-link-border-color: @body-bg;
  77. //== Pills
  78. @nav-pills-padding: 8px 10px;
  79. @nav-pills-border-radius: @border-radius-base;
  80. @nav-pills-active-link-hover-bg: #666;
  81. @nav-pills-active-link-hover-color: #fff;
  82. //== Page header
  83. @page-header-border-color: darken(@body-bg, 9%);
  84. //== Breadcrumbs
  85. //
  86. //##
  87. @breadcrumb-padding-vertical: 8px;
  88. @breadcrumb-padding-horizontal: 0px;
  89. @breadcrumb-bg: transparent;
  90. @breadcrumb-color: darken(@body-bg, 40%);
  91. @breadcrumb-active-color: @text-color;
  92. //== Page footer
  93. //
  94. //## For each of Bootstrap's buttons, define text, background and border color.
  95. @footer-color: darken(@body-bg, 35%);
  96. // Size of Misago's branding in footer
  97. @misago-branding-size: @font-size-large * 1.6;
  98. //== Buttons
  99. //
  100. //## For each of Bootstrap's buttons, define text, background and border color.
  101. @btn-font-weight: normal;
  102. @btn-default-color: #777;
  103. @btn-default-bg: darken(@body-bg, 5%);
  104. @btn-default-border: darken(@btn-default-bg, 10%);
  105. @btn-default-hover-color: @text-color;
  106. @btn-default-hover-bg: darken(@body-bg, 2%);
  107. @btn-default-hover-border: #999;
  108. @btn-default-active-color: @text-color;
  109. @btn-default-active-bg: darken(@body-bg, 6%);
  110. @btn-default-active-border: #999;
  111. @btn-primary-color: #fff;
  112. @btn-primary-bg: @brand-secondary;
  113. @btn-primary-border: darken(@btn-primary-bg, 15%);
  114. @btn-success-color: #fff;
  115. @btn-success-bg: @brand-success;
  116. @btn-success-border: darken(@btn-success-bg, 15%);
  117. @btn-warning-color: #fff;
  118. @btn-warning-bg: @brand-warning;
  119. @btn-warning-border: darken(@btn-warning-bg, 15%);
  120. @btn-danger-color: #fff;
  121. @btn-danger-bg: @brand-danger;
  122. @btn-danger-border: darken(@btn-danger-bg, 15%);
  123. //== Forms
  124. //
  125. @legend-color: darken(@body-bg, 40%);
  126. @field-help-block-color: darken(@body-bg, 50%);
  127. //## Misago wraps forms into panels
  128. @form-panel-bg: #fff;
  129. @form-panel-border: darken(@body-bg, 15%);
  130. @form-panel-shadow: darken(@body-bg, 5%);
  131. @form-panel-footer-bg: darken(@body-bg, 1%);
  132. @form-panel-padding-vertical: (@padding-large-vertical * 1.5);
  133. @form-panel-padding-horizontal: @padding-large-horizontal;
  134. @form-panel-padding: @form-panel-padding-vertical @form-panel-padding-horizontal;
  135. //== Tables
  136. //
  137. @table-panel-bg: #fff;
  138. @table-panel-border: darken(@body-bg, 15%);
  139. @table-panel-shadow: darken(@body-bg, 5%);
  140. @table-header-color: @gray;
  141. @table-header-bg: darken(@body-bg, 5%);
  142. @table-header-border: darken(@body-bg, 15%);
  143. //== Error panel
  144. //
  145. //##
  146. @error-panel-bg: darken(@body-bg, 1%);
  147. @error-panel-border: darken(@body-bg, 15%);
  148. @error-panel-shadow: darken(@body-bg, 5%);
  149. //== Miscellaneous
  150. //
  151. //##
  152. //** Horizontal line color.
  153. @hr-border: darken(@body-bg, 10%);
  154. //== Alerts
  155. //
  156. //## Define alert colors, border radius, and padding.
  157. @alert-padding: 12px;
  158. @alert-border-radius: @border-radius-large;
  159. @alert-success-bg: #27ae60;
  160. @alert-success-text: #fff;
  161. @alert-info-bg: #2980b9;
  162. @alert-info-text: #fff;
  163. @alert-warning-bg: #e67e22;
  164. @alert-warning-text: #fff;
  165. @alert-danger-bg: #c0392b;
  166. @alert-danger-text: #fff;