_variables.scss 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. /*
  2. * Customizable variables
  3. * Update these variable to create theme
  4. */
  5. /*
  6. * General
  7. */
  8. $background-color: #eff6f5;
  9. $text-color: #62a29c;
  10. $dim-text-color: #cceae4;
  11. $error-text-color: #c14747;
  12. $link-color: #7FB1DC;
  13. $hover-link-color: #44b78b;
  14. $font: Arial, sans-serif;
  15. $font-size: 14px;
  16. /*
  17. * Sidebar
  18. */
  19. $sidebar-width: 250px;
  20. $sidebar-background-color: #2e5955;
  21. $sidebar-contrast-background-color: #254d49;
  22. $sidebar-contrast-text-color: #62a29c;
  23. $sidebar-arrow-color: #7FB1DC;
  24. $sidebar-hover-arrow-color: #7FB1DC;
  25. $sidebar-action-color: #44b78b;
  26. $sidebar-hover-action-color: #7FB1DC;
  27. $sidebar-title-action-color: #44b78b;
  28. $sidebar-hover-title-action-item-color: #7FB1DC;
  29. $sidebar-text-color: #62a29c;
  30. $sidebar-icon-color: #62a29c;
  31. $sidebar-link-color: #bbddd9;
  32. $sidebar-hover-link-color: #fff;
  33. $sidebar-hover-background-color: #254d49;
  34. $sidebar-popup-search-input-background-color: #cceae4;
  35. $sidebar-popup-search-input-text-color: #62a29c;
  36. $sidebar-popup-search-input-placeholder-color: transparentize(#6f7e95, 0.5);
  37. $sidebar-popup-background-color: #eff6f5;
  38. $sidebar-popup-text-color: #62a29c;
  39. $sidebar-popup-overlay-color: #000;
  40. $sidebar-popup-link-text-color: #62a29c;
  41. $sidebar-popup-hover-link-color: #fff;
  42. $sidebar-popup-hover-link-background-color: #7FB1DC;
  43. /*
  44. * Top
  45. */
  46. $top-height: 32px;
  47. $top-text-color: #62a29c;
  48. $top-separator-color: #B4DCD4;
  49. $top-link-color: #B4DCD4;
  50. $top-hover-link-color: #7FB1DC;
  51. $top-border-color: #B4DCD4;
  52. $top-icon-color: #44b78b;
  53. $top-dropdown-background-color: #62a29c;
  54. $top-dropdown-text-color: #eff6f5;
  55. $top-dropdown-contrast-background-color: #3c706b;
  56. $top-dropdown-contrast-text-color: #bbddd9;
  57. $top-dropdown-border-color: #6aa6a1;
  58. $top-dropdown-link-color: #eff6f5;
  59. $top-dropdown-hover-link-color: #eff6f5;
  60. $top-dropdown-icon-color: #eff6f5;
  61. $top-dropdown-selected-color: #e5e2a5;
  62. /*
  63. * Content
  64. */
  65. $content-background-color: #fff;
  66. $content-contrast-background-color: #f5fdfa; //inline list bg
  67. $content-contrast2-background-color: #3c706b; //table header
  68. $content-contrast3-background-color: #cceae4; //delete collapsable
  69. $content-selected-background-color: #fffcc0;
  70. $content-contrast2-text-color: #fff;
  71. $content-border-color: #f5f3f4; //row bottom
  72. $content-border2-color: #cceae4; //table bottom
  73. $content-selected-border-color: #e5e2a5;
  74. $tab-selected-border-color: #7FB1DC;
  75. $tab-error-border-color: #c14747;
  76. /*
  77. * Buttons
  78. */
  79. $button-background-color: #cceae4;
  80. $button-hover-background-color: #7FB1DC;
  81. $button-active-background-color: #62a29c;
  82. $button-text-color: #62a29c;
  83. $button-hover-text-color: #fff;
  84. $button-active-text-color: #fff;
  85. $primary-button-background-color: #44b78b;
  86. $primary-button-text-color: #fff;
  87. $danger-button-background-color: #c14747;
  88. $danger-button-text-color: #fff;
  89. $background-button-background-color: #fff;
  90. $background-button-text-color: #62a29c;
  91. /*
  92. * Inputs
  93. */
  94. $input-background-color: #fff;
  95. $input-contrast-background-color: #cceae4;
  96. $input-border-color: #eff6f5;
  97. $input-hover-background-color: #7FB1DC;
  98. $input-icon-color: #44b78b;
  99. $input-text-color: #62a29c;
  100. $input-contrast-text-color: #62a29c;
  101. $input-hover-text-color: #fff;
  102. $input-selected-text-color: #44b78b;
  103. $input-disabled-text-color: #cceae4;
  104. $input-placeholder-color: #cceae4;
  105. $input-shadow-color: transparentize(#44b78b, 0.25);
  106. $background-input-background-color: #fff;
  107. $background-input-border-color: #fff;
  108. $background-input-text-color: #62a29c;
  109. /*
  110. * Messages
  111. */
  112. $warning-color: #f0dada;
  113. $warning-text-color: #dba4a4;
  114. $info-color: #e8e8bd;
  115. $info-text-color: #bebe92;
  116. $success-color: #e0eec5;
  117. $success-text-color: #bcd386;
  118. /*
  119. * Login
  120. */
  121. $login-background-color: #2e5955;
  122. $login-title-text-color: #62a29c;
  123. $login-title-contrast-text-color: #fff;
  124. $login-header-background-color: #3c706b;
  125. $login-header-text-color: #fff;
  126. $login-content-background-color: #fff;
  127. /*
  128. * jQuery UI
  129. */
  130. $jquery-ui-buttonpane-background: #eff6f5;
  131. $jquery-ui-state-default-background-color: #fff;
  132. $jquery-ui-state-default-border-color: #eff6f5;
  133. $jquery-ui-state-default-text-color: #62a29c;
  134. $jquery-ui-state-hover-background-color: #7FB1DC;
  135. $jquery-ui-state-hover-border-color: #7FB1DC;
  136. $jquery-ui-state-hover-text-color: #fff;
  137. $jquery-ui-state-active-background-color: #44b78b;
  138. $jquery-ui-state-active-border-color: #44b78b;
  139. $jquery-ui-state-active-text-color: #fff;
  140. $jquery-ui-state-highlight-background-color: #fff;
  141. $jquery-ui-state-highlight-border-color: #7FB1DC;
  142. $jquery-ui-state-highlight-text-color: #7FB1DC;
  143. $jquery-ui-overlay-color: #000;
  144. $jquery-ui-tooltip-background-color: #000;
  145. $jquery-ui-tooltip-text-color: #fff;
  146. /*
  147. * Charts
  148. */
  149. $chart-fillColor: transparentize($hover-link-color, 0.75);
  150. $chart-strokeColor: $hover-link-color;
  151. $chart-pointColor: $content-contrast2-text-color;
  152. $chart-pointHighlightFill: $hover-link-color;
  153. $chart-scaleGridLineColor: transparentize(#000, 0.9);
  154. $chart-scaleLineColor: transparentize(#000, 0.9);
  155. $chart-scaleFontColor: $content-contrast2-text-color;