variables.less 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. //
  2. // Misago Default 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-info: #ff5722; // misago uses info state for accents
  14. @brand-primary: #3498db;
  15. @brand-success: #2ecc71;
  16. @brand-warning: #ffab40;
  17. @brand-danger: #ef5350;
  18. //== Scaffolding
  19. //
  20. //## Settings for some of the most global styles.
  21. //** Background color for `<body>`.
  22. @body-bg: #fff;
  23. //** Global text color on `<body>`.
  24. @text-color: #333;
  25. //** Global textual link color.
  26. @link-color: #2196f3;
  27. //** Link hover color set via `darken()` function.
  28. @link-hover-color: #5c6bc0;
  29. //** Link hover decoration.
  30. @link-hover-decoration: underline;
  31. //** Site link styles
  32. @site-link-color: @gray-light;
  33. @site-link-hover-color: @gray-dark;
  34. @site-link-active-color: @gray;
  35. //** In-site link state default
  36. @state-default: #7f8c8d;
  37. @state-hover: @text-color;
  38. @state-clicked: @state-hover;
  39. //== Typography
  40. //
  41. //## headings
  42. //** By default, this inherits from the `<body>`.
  43. @headings-font-weight: 300;
  44. @headings-color: lighten(@text-color, 8%);;
  45. //== Navbar
  46. //
  47. //##
  48. // Basics of a navbar
  49. @navbar-height: 50px;
  50. @navbar-margin-bottom: @line-height-computed;
  51. @navbar-border-radius: @border-radius-base;
  52. @navbar-padding-horizontal: floor((@grid-gutter-width / 2));
  53. @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
  54. @navbar-collapse-max-height: 340px;
  55. @navbar-default-color: #777;
  56. @navbar-default-bg: @body-bg;
  57. @navbar-default-border: @gray-lighter;
  58. // Navbar links
  59. @navbar-default-link-color: darken(@gray-lighter, 20%);
  60. @navbar-default-link-hover-color: @gray-light;
  61. @navbar-default-link-hover-bg: transparent;
  62. @navbar-default-link-active-color: @gray-darker;
  63. @navbar-default-link-active-bg: transparent;
  64. // Navbar brand label
  65. @navbar-default-brand-color: @headings-color;
  66. @navbar-default-brand-hover-color: @headings-color;
  67. //== Site Footer
  68. //
  69. //##
  70. @footer-hr-color: @gray-lighter;
  71. @footer-color: lighten(@gray-light, 12%);
  72. @footer-noscript-color: #d35400;
  73. // Footer links
  74. @footer-link-color: @gray-light;
  75. @footer-link-hover-color: @gray;
  76. @footer-link-active-color: @gray;
  77. // Misago's branding
  78. @misago-branding-color: @gray-light;
  79. @misago-branding-size: @font-size-base + 2px;
  80. //== Loader
  81. //
  82. //##
  83. @loader-color: darken(@gray-lighter, 12%);
  84. //== Modals
  85. //
  86. //##
  87. //** Modal backdrop background color
  88. @modal-backdrop-bg: @body-bg;
  89. //** Modal backdrop opacity
  90. @modal-backdrop-opacity: .85;
  91. //== Alerts
  92. //
  93. //## Define alert colors, border radius, and padding.
  94. @alert-border-radius: @border-radius-large;
  95. @alert-success-bg: #2ecc71;
  96. @alert-success-border: #2ecc71;
  97. @alert-success-text: #fff;
  98. @alert-info-bg: #42a5f5;
  99. @alert-info-border: #42a5f5;
  100. @alert-info-text: #fff;
  101. @alert-warning-bg: #ff9800;
  102. @alert-warning-border: #ff9800;
  103. @alert-warning-text: #fff;
  104. @alert-danger-bg: #ef5350;
  105. @alert-danger-border: #ef5350;
  106. @alert-danger-text: #fff;
  107. //== Form states and alerts
  108. //
  109. //## Define colors for form feedback states and, by default, alerts.
  110. @state-success-text: #2ecc71;
  111. @state-success-bg: #2ecc71;
  112. @state-success-border: darken(spin(@state-success-bg, -10), 5%);
  113. @state-danger-text: #e74c3c;
  114. @state-danger-bg: #e74c3c;
  115. @state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
  116. //== Buttons
  117. //
  118. //## For each of Bootstrap's buttons, define text, background and border color.
  119. @btn-font-weight: 300;
  120. @btn-default-color: #95a5a6;
  121. @btn-default-bg: transparent;
  122. @btn-default-border: #bdc3c7;
  123. @btn-default-hover-color: #4fc3f7;
  124. @btn-default-hover-bg: transparent;
  125. @btn-default-hover-border: #4fc3f7;
  126. @btn-default-active-color: #2196f3;
  127. @btn-default-active-bg: transparent;
  128. @btn-default-active-border: #2196f3;
  129. @btn-primary-color: #fff;
  130. @btn-primary-bg: @brand-primary;
  131. @btn-primary-border: @btn-primary-bg;
  132. @btn-success-color: #fff;
  133. @btn-success-bg: @brand-success;
  134. @btn-success-border: @btn-success-bg;
  135. @btn-info-color: #fff;
  136. @btn-info-bg: @brand-info;
  137. @btn-info-border: @btn-info-bg;
  138. @btn-warning-color: #fff;
  139. @btn-warning-bg: @brand-warning;
  140. @btn-warning-border: @btn-warning-bg;
  141. @btn-danger-color: #fff;
  142. @btn-danger-bg: @brand-danger;
  143. @btn-danger-border: @btn-danger-bg;
  144. @btn-link-disabled-color: @gray-light;
  145. //== Form panel
  146. //
  147. //## Misago uses dedicated panel for forms
  148. @panel-form-text: @text-color;
  149. @panel-form-bg: darken(@body-bg, 4%);
  150. @panel-form-border: @body-bg;
  151. @panel-form-body-padding: 15px;
  152. @panel-form-heading-padding: 15px;
  153. @panel-form-footer-padding: @panel-heading-padding;
  154. @panel-form-inputs-only-gutter: @padding-large-vertical;
  155. @panel-form-heading-color: @gray;
  156. @panel-form-heading-bg: transparent;
  157. @panel-form-heading-border: darken(@panel-form-bg, 5%);
  158. @panel-form-footer-bg: @panel-form-bg;
  159. @panel-form-footer-border: darken(@panel-form-bg, 10%);