dark-theme.scss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. :root {
  2. --background: #303030;
  3. --background-secondary: #424242;
  4. --normal: #eee;
  5. --primary: #f57c00;
  6. }
  7. .dark {
  8. .app-header {
  9. display: flex;
  10. align-items: center;
  11. color: var(--normal) !important;
  12. background: #212121 !important;
  13. box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) !important;
  14. overflow: visible;
  15. z-index: 10;
  16. }
  17. .app-info {
  18. color: var(--normal);
  19. }
  20. .app-watermark {
  21. color: black !important;
  22. opacity: 0.02;
  23. }
  24. .app-flow-container {
  25. background: var(--background);
  26. }
  27. .flow-funcs__control {
  28. border-bottom: solid 1px var(--primary);
  29. }
  30. .flow-funcs__container {
  31. background: var(--background-secondary) !important;
  32. }
  33. .flow-funcs__container .flow-funcs__header {
  34. color: var(--normal);
  35. }
  36. .hx-toggle-arrow.active {
  37. color: var(--primary) !important;
  38. }
  39. .flow-funcs__inner {
  40. display: flex;
  41. flex: 1;
  42. flex-flow: column;
  43. justify-content: center;
  44. }
  45. .flow-funcs__inner .hx-collapsible {
  46. border: none !important;
  47. }
  48. .flow-funcs__container .item {
  49. color: var(--normal) !important;
  50. border: none !important;
  51. }
  52. .flow-funcs__group {
  53. padding: 10px;
  54. background: #323232;
  55. }
  56. .flow-funcs__control .item {
  57. color: var(--normal) !important;
  58. }
  59. .flow-container__control button {
  60. color: var(--normal) !important;
  61. }
  62. .flow-container__info {
  63. color: var(--normal);
  64. }
  65. .flow-node__body:hover {
  66. stroke: var(--primary) !important;
  67. }
  68. /*
  69. * LINKS
  70. */
  71. .flow-link__visible {
  72. stroke: var(--normal) !important;
  73. stroke-width: 2;
  74. }
  75. .flow-link:not(.flow-link--pointer):hover .flow-link__visible {
  76. stroke: var(--primary) !important;
  77. }
  78. .flow-link__head {
  79. fill: var(--normal) !important;
  80. }
  81. /*
  82. * NODES
  83. */
  84. .flow-container .flow-node {
  85. filter: none;
  86. }
  87. .flow-container .flow-node:hover {
  88. filter: url(#highlight-border);
  89. }
  90. .flow-container .flow-node__body {
  91. fill: transparent;
  92. stroke: attr(fill);
  93. }
  94. .flow-linking .flow-node__socket:not(.flow-node__socket--match) {
  95. fill: var(--primary) !important;
  96. stroke: var(--primary) !important;
  97. }
  98. /*
  99. * CHAT
  100. */
  101. .flow-chat {
  102. background: var(--background-secondary) !important;
  103. color: var(--normal);
  104. }
  105. .flow-chat__toggle {
  106. border: none;
  107. background: var(--background-secondary) !important;
  108. }
  109. .flow-chat .message .text {
  110. color: #999;
  111. }
  112. .flow-chat input.message {
  113. box-shadow: none !important;
  114. background: var(--background) !important;
  115. color: var(--normal);
  116. }
  117. }