darktheme.css 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696
  1. /*
  2. Darktheme CSS
  3. This file contains the CSS for the dark theme.
  4. This will override the default CSS (white theme) for semantic UI
  5. */
  6. body.darkTheme {
  7. background-color: var(--theme_bg);
  8. color: var(--text_color);
  9. }
  10. body.darkTheme h1,
  11. body.darkTheme h2,
  12. body.darkTheme h3,
  13. body.darkTheme h4,
  14. body.darkTheme h5,
  15. body.darkTheme h6,
  16. body.darkTheme a {
  17. color: var(--text_color);
  18. }
  19. body.darkTheme .ui.header {
  20. color: var(--text_color) !important;
  21. }
  22. body.darkTheme p,
  23. body.darkTheme span{
  24. color: var(--text_color_secondary);
  25. }
  26. body.darkTheme .ui.secondary.menu .dropdown.item:hover,
  27. body.darkTheme .ui.secondary.menu .link.item:hover,
  28. body.darkTheme .ui.secondary.menu a.item:hover {
  29. color: var(--text_color) !important;
  30. }
  31. body.darkTheme .ui.basic.white.icon.button {
  32. background-color: transparent !important;
  33. border: none !important;
  34. }
  35. body.darkTheme .ui.basic.white.icon.button:hover {
  36. border: none !important;
  37. opacity: 0.8;
  38. }
  39. body.darkTheme .ui.basic.white.icon.button:disabled {
  40. border: none !important;
  41. opacity: 0.5;
  42. }
  43. body.darkTheme .ui.basic.buttons .button i.icon {
  44. color: #ffffff !important;
  45. }
  46. body.darkTheme .ui.basic.button:not(.red) {
  47. color: #ffffff !important;
  48. border: 1px solid var(--button_border_color) !important;
  49. }
  50. body.darkTheme .ui.basic.button:not(.red):hover {
  51. border: 1px solid var(--button_border_color) !important;
  52. background-color: var(--theme_bg) !important;
  53. opacity: 0.8;
  54. }
  55. body.darkTheme .ui.basic.button.red:hover {
  56. background-color: #380a0a !important;
  57. opacity: 0.8;
  58. }
  59. body.darkTheme .ui.basic.button:disabled {
  60. border: none !important;
  61. background-color: transparent !important;
  62. opacity: 0.5;
  63. }
  64. body.darkTheme .ui.basic.button:focus,
  65. body.darkTheme .ui.basic.buttons .button:focus {
  66. background: transparent !important;
  67. background-color: transparent !important;
  68. border: none !important;
  69. }
  70. body.darkTheme .ui.table thead th,
  71. body.darkTheme .ui.table tbody td,
  72. body.darkTheme .ui.table tfoot td {
  73. color: #ffffff !important;
  74. }
  75. body.darkTheme .ui.input input,
  76. body.darkTheme .ui.input input::placeholder,
  77. body.darkTheme .ui.input input:focus,
  78. body.darkTheme .ui.input input:active {
  79. color: #ffffff !important;
  80. border-color: #ffffff !important;
  81. }
  82. body.darkTheme .ui.input input {
  83. background-color: var(--theme_bg_active) !important;
  84. border: 1px solid var(--button_border_color) !important;
  85. }
  86. body.darkTheme .ui.input input:focus,
  87. body.darkTheme .ui.input input:active {
  88. border-color: var(--theme_highlight) !important;
  89. }
  90. body.darkTheme .ui.input input::placeholder {
  91. opacity: 0.7;
  92. }
  93. body.darkTheme .ui.label,
  94. body.darkTheme .ui.label .detail,
  95. body.darkTheme .ui.label .icon {
  96. color: #ffffff !important;
  97. }
  98. body.darkTheme .advanceoptions .title {
  99. color: var(--text_color_secondary) !important;
  100. }
  101. body.darkTheme .ui.toggle.checkbox input ~ .box,
  102. body.darkTheme .ui.toggle.checkbox input ~ label,
  103. body.darkTheme .ui.toggle.checkbox input ~ label:focus {
  104. color: var(--text_color_secondary) !important;
  105. }
  106. body.darkTheme .ui.toggle.checkbox input ~ label::before{
  107. background-color: var(--theme_bg_secondary) !important;
  108. }
  109. body.darkTheme .ui.toggle.checkbox input:checked ~ label::before{
  110. background-color: var(--theme_highlight) !important;
  111. }
  112. body.darkTheme .ui.segment:not(.basic) {
  113. background-color: var(--theme_bg) !important;
  114. color: var(--text_color) !important;
  115. border: 1px solid transparent !important;
  116. }
  117. body.darkTheme .sub.header {
  118. color: var(--text_color) !important;
  119. }
  120. body.darkTheme .ui.radio.defaultsite.checkbox label {
  121. color: var(--text_color) !important;
  122. }
  123. body.darkTheme .ui.radio.defaultsite.checkbox label small {
  124. color: var(--text_color_secondary) !important;
  125. }
  126. body.darkTheme .ui.form .field input{
  127. color: var(--text_color) !important;
  128. background-color: var(--theme_bg_active) !important;
  129. border-color: var(--button_border_color) !important;
  130. }
  131. body.darkTheme .ui.form .field input::placeholder,
  132. body.darkTheme .ui.form .field input:focus,
  133. body.darkTheme .ui.form .field input:active {
  134. border-color: var(--theme_highlight) !important;
  135. }
  136. body.darkTheme .ui.form .field input::placeholder {
  137. opacity: 0.7;
  138. }
  139. body.darkTheme .ui.form .field label,
  140. body.darkTheme .ui.form .field .ui.checkbox input:checked ~ label {
  141. color: var(--text_color) !important;
  142. }
  143. body.darkTheme .ui.basic.label {
  144. background-color: var(--theme_bg_secondary) !important;
  145. color: var(--text_color) !important;
  146. }
  147. body.darkTheme .ui.form .grouped.fields label {
  148. color: var(--text_color) !important;
  149. }
  150. /*
  151. HTTP Proxy Table
  152. */
  153. body.darkTheme .ui.table{
  154. background-color: transparent !important;
  155. }
  156. body.darkTheme .ui.celled.sortable.unstackable.compact.table thead th,
  157. body.darkTheme .ui.celled.sortable.unstackable.compact.table tbody td,
  158. body.darkTheme .ui.celled.sortable.unstackable.compact.table tfoot td {
  159. background-color: var(--theme_bg) !important;
  160. color: var(--text_color) !important;
  161. border-color: var(--divider_color) !important;
  162. }
  163. body.darkTheme .ui.celled.sortable.unstackable.compact.table thead th {
  164. background-color: var(--theme_bg_secondary) !important;
  165. }
  166. body.darkTheme .ui.celled.sortable.unstackable.compact.table tbody tr:hover {
  167. background-color: var(--theme_bg_hover) !important;
  168. }
  169. body.darkTheme .ui.celled.sortable.unstackable.compact.table tbody td a {
  170. color: var(--link_color) !important;
  171. }
  172. body.darkTheme .ui.celled.sortable.unstackable.compact.table tbody td a:hover {
  173. color: var(--link_hover_color) !important;
  174. }
  175. body.darkTheme .ui.celled.sortable.unstackable.compact.table tbody td small {
  176. color: var(--text_color_secondary) !important;
  177. }
  178. body.darkTheme .ui.celled.sortable.unstackable.compact.table tbody td .ui.toggle.checkbox input ~ .box,
  179. body.darkTheme .ui.celled.sortable.unstackable.compact.table tbody td .ui.toggle.checkbox input ~ label,
  180. body.darkTheme .ui.celled.sortable.unstackable.compact.table tbody td .ui.toggle.checkbox input ~ label:focus {
  181. color: var(--text_color_secondary) !important;
  182. }
  183. body.darkTheme .ui.celled.sortable.unstackable.compact.table tbody td .ui.toggle.checkbox input ~ label::before {
  184. background-color: var(--theme_bg_secondary) !important;
  185. }
  186. body.darkTheme .ui.celled.sortable.unstackable.compact.table tbody td .ui.toggle.checkbox input:checked ~ label::before {
  187. background-color: var(--theme_highlight) !important;
  188. }
  189. body.darkTheme .ui.celled.sortable.unstackable.compact.table tbody td .ui.circular.mini.basic.icon.button {
  190. color: var(--button_color) !important;
  191. border: 1px solid var(--button_border_color) !important;
  192. }
  193. body.darkTheme .ui.celled.sortable.unstackable.compact.table tbody td .ui.circular.mini.basic.icon.button:hover {
  194. background-color: var(--button_hover_bg) !important;
  195. color: var(--button_hover_color) !important;
  196. border: 1px solid var(--button_border_color) !important;
  197. }
  198. body.darkTheme .ui.celled.sortable.unstackable.compact.table tbody td .ui.circular.mini.red.basic.icon.button {
  199. color: var(--button_red_color) !important;
  200. border: 1px solid var(--button_red_border_color) !important;
  201. }
  202. body.darkTheme .ui.celled.sortable.unstackable.compact.table tbody td .ui.circular.mini.red.basic.icon.button:hover {
  203. background-color: #380a0a !important;
  204. color: var(--button_red_hover_color) !important;
  205. }
  206. body.darkTheme .ui.basic.small.icon.circular.button {
  207. color: var(--button_color) !important;
  208. border: 1px solid var(--button_border_color) !important;
  209. }
  210. body.darkTheme .ui.basic.small.icon.circular.button:hover {
  211. background-color: var(--button_hover_bg) !important;
  212. color: var(--button_hover_color) !important;
  213. border: 1px solid var(--button_border_color) !important;
  214. opacity: 0.8;
  215. }
  216. body.darkTheme .ui.checkbox input ~ .box,
  217. body.darkTheme .ui.checkbox input ~ label,
  218. body.darkTheme .ui.checkbox input ~ label:focus {
  219. color: var(--text_color_secondary) !important;
  220. }
  221. body.darkTheme .ui.basic.advance.segment {
  222. background-color: var(--theme_bg) !important;
  223. color: var(--text_color) !important;
  224. border: 1px solid var(--divider_color) !important;
  225. }
  226. body.darkTheme .ui.endpointAdvanceConfig.accordion .title {
  227. color: var(--text_color) !important;
  228. }
  229. body.darkTheme .RateLimit input {
  230. border-color: var(--theme_highlight) !important;
  231. }
  232. /*
  233. Virtual Directorie Table
  234. */
  235. body.darkTheme .ui.fluid.search.selection.dropdown {
  236. background-color: var(--theme_bg) !important;
  237. color: var(--text_color) !important;
  238. border-color: var(--divider_color) !important;
  239. }
  240. body.darkTheme .ui.fluid.search.selection.dropdown .menu {
  241. background-color: var(--theme_bg) !important;
  242. color: var(--text_color) !important;
  243. }
  244. body.darkTheme .ui.fluid.search.selection.dropdown .menu .item {
  245. color: var(--text_color) !important;
  246. }
  247. body.darkTheme .ui.selection.dropdown .menu > .item {
  248. border-top: 1px solid var(--divider_color) !important;
  249. }
  250. body.darkTheme .ui.selection.active.dropdown .menu {
  251. border-color: var(--divider_color) !important;
  252. }
  253. body.darkTheme .ui.fluid.search.selection.dropdown .menu .item:hover {
  254. background-color: var(--theme_bg_hover) !important;
  255. color: var(--text_color) !important;
  256. }
  257. body.darkTheme .ui.fluid.search.selection.dropdown .menu .item.active.selected {
  258. background-color: var(--theme_highlight) !important;
  259. color: var(--text_color) !important;
  260. }
  261. body.darkTheme .ui.fluid.search.selection.dropdown .search {
  262. background-color: var(--theme_bg) !important;
  263. color: var(--text_color) !important;
  264. border-color: transparent !important;
  265. }
  266. body.darkTheme .ui.fluid.search.selection.dropdown .text {
  267. color: var(--text_color) !important;
  268. }
  269. body.darkTheme .ui.fluid.search.selection.dropdown .dropdown.icon {
  270. color: var(--text_color) !important;
  271. }
  272. /*
  273. New Proxy Rule
  274. */
  275. body.darkTheme .ui.horizontal.divider.transition.visible {
  276. color: var(--text_color) !important;
  277. }
  278. body.darkTheme #basicAuthCredPassword, body.darkTheme #basicAuthCredUsername {
  279. color: var(--text_color) !important;
  280. background-color: var(--theme_bg_active) !important;
  281. border: 1px solid var(--button_border_color) !important;
  282. }
  283. body.darkTheme #rules .field label {
  284. color: var(--text_color) !important;
  285. }
  286. body.darkTheme #rules .field .ui.selection.dropdown {
  287. background-color: var(--theme_bg_primary) !important;
  288. color: var(--text_color) !important;
  289. border-color: transparent !important;
  290. }
  291. body.darkTheme #rules .field .ui.selection.dropdown .menu {
  292. background-color: var(--theme_bg) !important;
  293. color: var(--text_color) !important;
  294. }
  295. body.darkTheme #rules .field .ui.selection.dropdown .menu .item {
  296. color: var(--text_color) !important;
  297. }
  298. body.darkTheme #rules .field .ui.selection.dropdown .menu .item:hover {
  299. background-color: var(--theme_bg_hover) !important;
  300. color: var(--text_color) !important;
  301. }
  302. body.darkTheme #rules .field .ui.selection.dropdown .menu .item.active.selected {
  303. background-color: var(--theme_highlight) !important;
  304. color: var(--text_color) !important;
  305. }
  306. body.darkTheme #rules .field .ui.selection.dropdown .text {
  307. color: var(--text_color) !important;
  308. }
  309. body.darkTheme #rules .field small {
  310. color: var(--text_color_secondary) !important;
  311. }
  312. /*
  313. Stream Proxy
  314. */
  315. body.darkTheme #streamproxy {
  316. background-color: var(--theme_bg) !important;
  317. color: var(--text_color) !important;
  318. border: 1px solid var(--divider_color) !important;
  319. }
  320. body.darkTheme #proxyTable {
  321. background-color: transparent !important;
  322. color: var(--text_color) !important;
  323. border: 1px solid var(--divider_color) !important;
  324. }
  325. body.darkTheme #proxyTable thead th {
  326. background-color: var(--theme_bg_secondary) !important;
  327. color: var(--text_color) !important;
  328. border-color: var(--divider_color) !important;
  329. }
  330. body.darkTheme #proxyTable tbody tr td:not(:first-child) {
  331. background-color: var(--theme_bg) !important;
  332. color: var(--text_color) !important;
  333. border-color: var(--divider_color) !important;
  334. }
  335. body.darkTheme #proxyTable tbody tr:hover {
  336. background-color: var(--theme_bg_hover) !important;
  337. }
  338. body.darkTheme #proxyTable tbody td .statusText {
  339. color: var(--text_color_secondary) !important;
  340. }
  341. body.darkTheme #proxyTable tbody td .ui.basic.mini.circular.icon.button {
  342. color: var(--button_color) !important;
  343. border: 1px solid var(--button_border_color) !important;
  344. }
  345. body.darkTheme #proxyTable tbody td .ui.basic.mini.circular.icon.button:hover {
  346. background-color: var(--button_hover_bg) !important;
  347. color: var(--button_hover_color) !important;
  348. border: 1px solid var(--button_border_color) !important;
  349. }
  350. body.darkTheme #proxyTable tbody td .ui.circular.red.basic.mini.icon.button {
  351. color: var(--button_red_color) !important;
  352. border: 1px solid var(--button_red_border_color) !important;
  353. }
  354. body.darkTheme #proxyTable tbody td .ui.circular.red.basic.mini.icon.button:hover {
  355. background-color: #380a0a !important;
  356. color: var(--button_red_hover_color) !important;
  357. }
  358. /*
  359. Redirect
  360. */
  361. body.darkTheme #redirectset .ui.sortable.unstackable.celled.table thead th {
  362. background-color: var(--theme_bg_secondary) !important;
  363. color: var(--text_color) !important;
  364. border-color: var(--divider_color) !important;
  365. }
  366. body.darkTheme #redirectset .ui.sortable.unstackable.celled.table tbody tr td {
  367. background-color: var(--theme_bg) !important;
  368. color: var(--text_color) !important;
  369. border-color: var(--divider_color) !important;
  370. }
  371. body.darkTheme #redirectset .ui.sortable.unstackable.celled.table tbody tr:hover {
  372. background-color: var(--theme_bg_hover) !important;
  373. }
  374. body.darkTheme #redirectset .ui.sortable.unstackable.celled.table tbody td .icon {
  375. color: var(--icon_color) !important;
  376. }
  377. body.darkTheme #redirectset .ui.sortable.unstackable.celled.table tbody td .ui.button {
  378. color: var(--button_color) !important;
  379. border: 1px solid var(--button_border_color) !important;
  380. }
  381. body.darkTheme #redirectset .ui.sortable.unstackable.celled.table tbody td .ui.button:hover {
  382. background-color: var(--button_hover_bg) !important;
  383. color: var(--button_hover_color) !important;
  384. border: 1px solid var(--button_border_color) !important;
  385. }
  386. body.darkTheme #redirectset .ui.sortable.unstackable.celled.table tbody td .ui.red.button {
  387. color: var(--button_red_color) !important;
  388. border: 1px solid var(--button_red_border_color) !important;
  389. }
  390. body.darkTheme #redirectset .ui.sortable.unstackable.celled.table tbody td .ui.red.button:hover {
  391. background-color: #380a0a !important;
  392. color: var(--button_red_hover_color) !important;
  393. }
  394. body.darkTheme #redirectset .ui.checkbox input:checked ~ label,
  395. body.darkTheme #redirectset .ui.checkbox input:checked ~ label small,
  396. body.darkTheme #redirectset .ui.checkbox input:checked ~ label a {
  397. color: var(--text_color_secondary) !important;
  398. }
  399. body.darkTheme .ui.message {
  400. color: var(--text_color) !important;
  401. background-color: var(--theme_bg_active) !important;
  402. border: 1px solid var(--message_border_color) !important;
  403. }
  404. /*
  405. Access Rules
  406. */
  407. /* Access Rule Selector */
  408. body.darkTheme .ui.selection.fluid.dropdown#accessRuleSelector {
  409. background-color: var(--theme_bg) !important;
  410. color: var(--text_color) !important;
  411. border-color: transparent !important;
  412. }
  413. body.darkTheme .ui.selection.fluid.dropdown#accessRuleSelector .menu {
  414. background-color: var(--theme_bg) !important;
  415. color: var(--text_color) !important;
  416. }
  417. body.darkTheme .ui.selection.fluid.dropdown#accessRuleSelector .menu .item {
  418. color: var(--text_color) !important;
  419. }
  420. body.darkTheme .ui.selection.fluid.dropdown#accessRuleSelector .menu .item:hover {
  421. background-color: var(--theme_bg_hover) !important;
  422. color: var(--text_color) !important;
  423. }
  424. body.darkTheme .ui.selection.fluid.dropdown#accessRuleSelector .menu .item.active.selected {
  425. background-color: var(--theme_highlight) !important;
  426. color: var(--text_color) !important;
  427. }
  428. body.darkTheme .ui.selection.fluid.dropdown#accessRuleSelector .text {
  429. color: var(--text_color) !important;
  430. }
  431. body.darkTheme .ui.selection.fluid.dropdown#accessRuleSelector .dropdown.icon {
  432. color: var(--text_color) !important;
  433. }
  434. /* Tab Menu in access control */
  435. body.darkTheme .ui.top.attached.tabular.menu {
  436. background-color: var(--theme_bg) !important;
  437. color: var(--text_color) !important;
  438. }
  439. body.darkTheme .ui.top.attached.tabular.menu .item {
  440. color: var(--text_color) !important;
  441. }
  442. body.darkTheme .ui.top.attached.tabular.menu .item:hover {
  443. background-color: var(--theme_bg_hover) !important;
  444. color: var(--text_color) !important;
  445. }
  446. body.darkTheme .ui.top.attached.tabular.menu .item.active {
  447. background-color: var(--theme_bg) !important;
  448. color: var(--text_color) !important;
  449. }
  450. /* Tables in access control */
  451. body.darkTheme #access .ui.unstackable.basic.celled.table{
  452. border: 1px solid var(--divider_color) !important;
  453. }
  454. body.darkTheme #access .ui.unstackable.basic.celled.table thead th {
  455. background-color: var(--theme_bg_secondary) !important;
  456. color: var(--text_color) !important;
  457. border-color: var(--divider_color) !important;
  458. }
  459. body.darkTheme #access .ui.unstackable.basic.celled.table tbody tr td {
  460. background-color: var(--theme_bg) !important;
  461. color: var(--text_color) !important;
  462. border-color: var(--divider_color) !important;
  463. }
  464. body.darkTheme #access .ui.unstackable.basic.celled.table tbody tr:hover {
  465. background-color: var(--theme_bg_hover) !important;
  466. }
  467. body.darkTheme #access .ui.unstackable.basic.celled.table tbody td .icon {
  468. color: var(--icon_color) !important;
  469. }
  470. body.darkTheme #access .ui.unstackable.basic.celled.table tbody td .ui.button {
  471. color: var(--button_color) !important;
  472. border: 1px solid var(--button_border_color) !important;
  473. }
  474. body.darkTheme #access .ui.unstackable.basic.celled.table tbody td .ui.button:hover {
  475. background-color: var(--button_hover_bg) !important;
  476. color: var(--button_hover_color) !important;
  477. border: 1px solid var(--button_border_color) !important;
  478. }
  479. body.darkTheme #access .ui.unstackable.basic.celled.table tbody td .ui.red.button {
  480. color: var(--button_red_color) !important;
  481. border: 1px solid var(--button_red_border_color) !important;
  482. }
  483. body.darkTheme #access .ui.unstackable.basic.celled.table tbody td .ui.red.button:hover {
  484. background-color: #380a0a !important;
  485. color: var(--button_red_hover_color) !important;
  486. }
  487. /* Fixing the color of the sel;ector label in country selector */
  488. body.darkTheme .ui.search.multiple.selection.dropdown .ui.label {
  489. background-color: var(--theme_bg_secondary) !important;
  490. color: var(--text_color) !important;
  491. }
  492. /* Quick band IP table *(ipTable) */
  493. body.darkTheme #ipTable {
  494. background-color: transparent !important;
  495. color: var(--text_color) !important;
  496. border: 1px solid var(--divider_color) !important;
  497. }
  498. body.darkTheme #ipTable thead th {
  499. background-color: var(--theme_bg_secondary) !important;
  500. color: var(--text_color) !important;
  501. border-color: var(--divider_color) !important;
  502. }
  503. body.darkTheme #ipTable tbody tr td {
  504. background-color: var(--theme_bg) !important;
  505. color: var(--text_color) !important;
  506. border-color: var(--divider_color) !important;
  507. }
  508. body.darkTheme #ipTable tbody tr:hover {
  509. background-color: var(--theme_bg_hover) !important;
  510. }
  511. body.darkTheme #ipTable tbody td .ui.basic.red.tiny.icon.button {
  512. color: var(--button_red_color) !important;
  513. border: 1px solid var(--button_red_border_color) !important;
  514. }
  515. body.darkTheme #ipTable tbody td .ui.basic.red.tiny.icon.button:hover {
  516. background-color: #380a0a !important;
  517. color: var(--button_red_hover_color) !important;
  518. }
  519. /*
  520. TLS / SSL Certificates
  521. */
  522. body.darkTheme .ui.selection.dropdown#defaultCA {
  523. background-color: var(--theme_bg) !important;
  524. color: var(--text_color) !important;
  525. border-color: transparent !important;
  526. }
  527. body.darkTheme .ui.selection.dropdown#defaultCA .menu {
  528. background-color: var(--theme_bg) !important;
  529. color: var(--text_color) !important;
  530. }
  531. body.darkTheme .ui.selection.dropdown#defaultCA .menu .item {
  532. color: var(--text_color) !important;
  533. }
  534. body.darkTheme .ui.selection.dropdown#defaultCA .menu .item:hover {
  535. background-color: var(--theme_bg_hover) !important;
  536. color: var(--text_color) !important;
  537. }
  538. body.darkTheme .ui.selection.dropdown#defaultCA .menu .item.active.selected {
  539. background-color: var(--theme_highlight) !important;
  540. color: var(--text_color) !important;
  541. }
  542. body.darkTheme .ui.selection.dropdown#defaultCA .default.text {
  543. color: var(--text_color) !important;
  544. }
  545. body.darkTheme .ui.selection.dropdown#defaultCA .dropdown.icon {
  546. color: var(--text_color) !important;
  547. }