ant-overrides.scss 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. /* ------------------------- //
  2. HEADER
  3. // ------------------------- */
  4. .ant-layout-header {
  5. line-height: unset;
  6. height: auto;
  7. }
  8. /* ------------------------- //
  9. BUTTONS
  10. // ------------------------- */
  11. .ant-btn[disabled] {
  12. background-color: var(--theme-color-components-secondary-button-background-disabled);
  13. color: var(--theme-color-components-secondary-button-text-disabled);
  14. border-color: var(--theme-color-components-secondary-button-border-disabled);
  15. &:hover,
  16. &:focus {
  17. background-color: var(--theme-color-components-secondary-button-background-disabled);
  18. color: var(--theme-color-components-secondary-button-text-disabled);
  19. border-color: var(--theme-color-components-secondary-button-border-disabled);
  20. }
  21. }
  22. .ant-btn-default {
  23. color: currentcolor;
  24. border-width: 2px;
  25. border-color: var(--theme-color-components-primary-button-border);
  26. border-radius: var(--theme-rounded-corners);
  27. background-color: rgb(0 0 0 / 10%);
  28. &:hover,
  29. &:focus {
  30. color: currentcolor;
  31. border-color: rgb(0 0 0 / 55%);
  32. background-color: var(--theme-color-components-secondary-button-background);
  33. }
  34. }
  35. .ant-btn-primary {
  36. height: 2rem;
  37. font-size: 0.85rem;
  38. border-width: 2px;
  39. border-radius: var(--theme-rounded-corners);
  40. border-color: var(--theme-color-components-primary-button-border);
  41. &:hover,
  42. &:focus {
  43. border-color: var(--theme-color-action-hover);
  44. color: var(--theme-color-action-hover);
  45. background-color: var(--theme-color-components-secondary-button-background);
  46. }
  47. &:focus {
  48. border-color: var(--theme-color-components-secondary-button-text);
  49. }
  50. &[ant-click-animating-without-extra-node]::after {
  51. animation: 0s !important;
  52. }
  53. background-color: var(--theme-color-components-primary-button-background);
  54. color: var(--theme-color-components-primary-button-text);
  55. &:hover {
  56. background-color: var(--theme-color-action-hover);
  57. color: var(--theme-color-components-primary-button-text);
  58. border-color: var(--theme-color-action-hover);
  59. }
  60. &:focus {
  61. background-color: var(--theme-color-action-hover);
  62. color: var(--theme-color-components-primary-button-text);
  63. border-color: var(--theme-color-components-primary-button-text);
  64. }
  65. }
  66. .ant-btn-primary[disabled] {
  67. background-color: var(--theme-color-components-primary-button-background-disabled);
  68. border-color: var(--theme-color-components-primary-button-border-disabled);
  69. color: var(--theme-color-components-primary-button-text-disabled);
  70. &:hover,
  71. &:focus {
  72. background-color: var(--theme-color-components-primary-button-background-disabled);
  73. border-color: var(--theme-color-components-primary-button-border-disabled);
  74. color: var(--theme-color-components-primary-button-text-disabled);
  75. }
  76. }
  77. .ant-btn-background-ghost {
  78. border: 0;
  79. box-shadow: none !important;
  80. &:hover,
  81. &:focus {
  82. background-color: var(--theme-unknown);
  83. }
  84. }
  85. /* ------------------------- //
  86. DROPDOWN
  87. // ------------------------- */
  88. .ant-dropdown-menu {
  89. border-radius: var(--theme-rounded-corners);
  90. background-color: var(--theme-color-components-menu-background);
  91. }
  92. .ant-dropdown-menu-item {
  93. color: var(--theme-color-components-menu-item-text);
  94. &:hover {
  95. background-color: var(--theme-color-components-menu-item-hover-bg);
  96. }
  97. &:focus {
  98. background-color: var(--theme-color-components-menu-item-focus-bg);
  99. }
  100. }
  101. .ant-dropdown-menu-item,
  102. .ant-dropdown-menu-submenu-title {
  103. font-size: 0.8rem;
  104. padding: 4px 15px;
  105. }
  106. .ant-input-affix-wrapper {
  107. background-color: var(--theme-color-components-form-field-background);
  108. }
  109. .ant-input,
  110. .ant-input-number-input {
  111. background-color: var(--theme-color-components-form-field-background);
  112. color: var(--theme-color-components-form-field-text);
  113. &::placeholder {
  114. color: var(--theme-color-components-form-field-placeholder);
  115. }
  116. }
  117. .ant-alert-error {
  118. .ant-alert-icon {
  119. color: var(--theme-color-palette-error);
  120. }
  121. .ant-alert-message {
  122. color: var(--theme-color-palette-error);
  123. }
  124. }
  125. .ant-tabs-tab {
  126. padding: 0.7rem;
  127. background-color: transparent;
  128. border-radius: var(--theme-rounded-corners) var(--theme-rounded-corners) 0 0;
  129. font-weight: 600;
  130. & + .ant-tabs-tab {
  131. margin-left: var(--module-spacing);
  132. }
  133. &.ant-tabs-tab-active {
  134. background-color: var(--theme-color-palette-4);
  135. .ant-tabs-tab-btn {
  136. color: var(--theme-color-action);
  137. &:hover {
  138. color: var(--theme-color-action-hover);
  139. }
  140. }
  141. }
  142. }
  143. .ant-tabs {
  144. height: 100%;
  145. .ant-tabs-content-holder {
  146. height: 100%;
  147. }
  148. .ant-tabs-content {
  149. overflow: auto;
  150. .ant-tabs-tabpane-active {
  151. height: 100%;
  152. }
  153. }
  154. }
  155. .ant-tabs-ink-bar {
  156. background-color: var(--theme-color-action);
  157. }
  158. .ant-tabs-nav::before {
  159. border-bottom-color: var(--theme-color-components-menu-item-focus-bg) !important;
  160. }
  161. .ant-modal-close:hover {
  162. color: var(--theme-color-components-modal-header-text);
  163. }
  164. .ant-modal-title {
  165. color: var(--theme-color-components-modal-header-text);
  166. }
  167. .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  168. background-color: unset;
  169. }
  170. td.ant-table-column-sort,
  171. .ant-table-thead th.ant-table-column-sort {
  172. background-color: unset;
  173. }
  174. th {
  175. color: var(--theme-color-components-modal-header-text);
  176. font-family: var(--theme-text-display-font-family);
  177. font-weight: 700 !important;
  178. }
  179. .ant-popover {
  180. z-index: 800; // Lower the z-index so it renders under modals.
  181. }
  182. /* ------------------------- //
  183. * SIDER MENUITEM
  184. // ------------------------- */
  185. .ant-menu-light .ant-menu-submenu-title:active {
  186. background: var(--theme-color-palette-12);
  187. }
  188. .ant-menu-light .ant-menu-submenu-title:hover {
  189. color: var(--theme-color-palette-12);
  190. }
  191. .ant-menu-submenu:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow {
  192. color: var(--theme-color-palette-12);
  193. }
  194. .ant-menu-light .ant-menu-item:hover {
  195. color: var(--theme-color-palette-12);
  196. }
  197. .line-chart-container {
  198. position: relative;
  199. .download-btn {
  200. position: absolute;
  201. top: 0.3rem;
  202. right: 0.35rem;
  203. }
  204. }
  205. .ant-collapse > .ant-collapse-item {
  206. background: var(--theme-color-palette-14);
  207. }