You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

theme-arc-green.less 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614
  1. @import "../chroma/dark.less";
  2. :root {
  3. --is-dark-theme: true;
  4. --color-primary: #87ab63;
  5. --color-primary-dark-1: #93b373;
  6. --color-primary-dark-2: #9fbc82;
  7. --color-primary-dark-3: #abc492;
  8. --color-primary-dark-4: #b7cda1;
  9. --color-primary-dark-5: #cfddc1;
  10. --color-primary-dark-6: #e7eee0;
  11. --color-primary-dark-7: #f8faf6;
  12. --color-primary-light-1: #7a9e55;
  13. --color-primary-light-2: #6c8c4c;
  14. --color-primary-light-3: #5f7b42;
  15. --color-primary-light-4: #516939;
  16. --color-primary-light-5: #364626;
  17. --color-primary-light-6: #1b2313;
  18. --color-primary-light-7: #080b06;
  19. --color-primary-alpha-10: #87ab6319;
  20. --color-primary-alpha-20: #87ab6333;
  21. --color-primary-alpha-30: #87ab634b;
  22. --color-primary-alpha-40: #87ab6366;
  23. --color-primary-alpha-50: #87ab6380;
  24. --color-primary-alpha-60: #87ab6399;
  25. --color-primary-alpha-70: #87ab63b3;
  26. --color-primary-alpha-80: #87ab63cc;
  27. --color-primary-alpha-90: #87ab63e1;
  28. --color-secondary: #454a57;
  29. --color-secondary-dark-1: #505665;
  30. --color-secondary-dark-2: #5b6273;
  31. --color-secondary-dark-3: #71798e;
  32. --color-secondary-dark-4: #7f8699;
  33. --color-secondary-dark-5: #8c93a4;
  34. --color-secondary-dark-6: #9aa0af;
  35. --color-secondary-dark-7: #a8adba;
  36. --color-secondary-dark-8: #b6bac5;
  37. --color-secondary-dark-9: #c4c7d0;
  38. --color-secondary-dark-10: #d2d4db;
  39. --color-secondary-dark-11: #dfe1e6;
  40. --color-secondary-dark-12: #edeef1;
  41. --color-secondary-dark-13: #fbfbfc;
  42. --color-secondary-light-1: #373b46;
  43. --color-secondary-light-2: #292c34;
  44. --color-secondary-light-3: #1c1e23;
  45. --color-secondary-light-4: #0e0f11;
  46. --color-secondary-alpha-10: #454a5719;
  47. --color-secondary-alpha-20: #454a5733;
  48. --color-secondary-alpha-30: #454a574b;
  49. --color-secondary-alpha-40: #454a5766;
  50. --color-secondary-alpha-50: #454a5780;
  51. --color-secondary-alpha-60: #454a5799;
  52. --color-secondary-alpha-70: #454a57b3;
  53. --color-secondary-alpha-80: #454a57cc;
  54. --color-secondary-alpha-90: #454a57e1;
  55. /* colors */
  56. --color-red: #db2828;
  57. --color-orange: #f2711c;
  58. --color-yellow: #fbbd08;
  59. --color-olive: #b5cc18;
  60. --color-green: #21ba45;
  61. --color-teal: #00b5ad;
  62. --color-blue: #2185d0;
  63. --color-violet: #6435c9;
  64. --color-purple: #a333c8;
  65. --color-pink: #e03997;
  66. --color-brown: #a5673f;
  67. --color-grey: #767a85;
  68. --color-black: #1e222e;
  69. --color-gold: #a1882b;
  70. --color-white: #ffffff;
  71. --color-diff-removed-word-bg: #6f3333;
  72. --color-diff-added-word-bg: #3c653c;
  73. --color-diff-removed-row-bg: #3c2626;
  74. --color-diff-moved-row-bg: #818044;
  75. --color-diff-added-row-bg: #283e2d;
  76. --color-diff-removed-row-border: #634343;
  77. --color-diff-moved-row-border: #bcca6f;
  78. --color-diff-added-row-border: #314a37;
  79. --color-diff-inactive: #353846;
  80. --color-error-border: #a53a37;
  81. --color-error-bg: #403440;
  82. --color-error-text: #d64444;
  83. --color-success-border: #458a57;
  84. --color-success-bg: #304440;
  85. --color-success-text: #6cc664;
  86. --color-warning-border: #aaa050;
  87. --color-warning-bg: #404440;
  88. --color-warning-text: #fbbd08;
  89. /* target-based colors */
  90. --color-body: #383c4a;
  91. --color-box-header: #404652;
  92. --color-box-body: #303440;
  93. --color-text-dark: #dbe0ea;
  94. --color-text: #bbc0ca;
  95. --color-text-light: #a6aab5;
  96. --color-text-light-2: #8a8e99;
  97. --color-text-light-3: #707687;
  98. --color-footer: #2e323e;
  99. --color-timeline: #4c525e;
  100. --color-input-text: #d5dbe6;
  101. --color-input-background: #292d39;
  102. --color-input-border: #454a57;
  103. --color-input-border-hover: #505667;
  104. --color-navbar: #2a2e3a;
  105. --color-light: #00000028;
  106. --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
  107. --color-light-border: #ffffff28;
  108. --color-hover: #ffffff10;
  109. --color-active: #ffffff16;
  110. --color-menu: #2e323e;
  111. --color-card: #2e323e;
  112. --color-markup-table-row: #ffffff06;
  113. --color-markup-code-block: #292d39;
  114. --color-button: #353846;
  115. --color-code-bg: #2a2e3a;
  116. --color-code-sidebar-bg: #2e323e;
  117. --color-shadow: #00000060;
  118. --color-secondary-bg: #2a2e3a;
  119. --color-text-focus: #fff;
  120. --color-expand-button: #3c404d;
  121. --color-placeholder-text: #6a737d;
  122. --color-editor-line-highlight: var(--color-primary-light-5);
  123. --color-project-board-bg: var(--color-secondary-light-2);
  124. --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */
  125. --color-reaction-bg: #ffffff12;
  126. --color-reaction-active-bg: var(--color-primary-alpha-40);
  127. }
  128. ::-webkit-calendar-picker-indicator {
  129. filter: invert(.8);
  130. }
  131. .ui.horizontal.segments > .segment {
  132. background-color: #383c4a;
  133. }
  134. .ui.green.progress .bar {
  135. background-color: #668844;
  136. }
  137. .ui.progress.success .bar {
  138. background-color: #7b9e57 !important;
  139. }
  140. .following.bar.light {
  141. background: #2e323e;
  142. border-color: var(--color-secondary-alpha-40);
  143. }
  144. .following.bar .top.menu a.item:hover {
  145. color: #fff;
  146. }
  147. .feeds .list ul li.private {
  148. background: #353945;
  149. }
  150. .ui.red.label,
  151. .ui.red.labels .label {
  152. background-color: #7d3434 !important;
  153. border-color: #8a2121 !important;
  154. }
  155. .ui.yellow.label,
  156. .ui.yellow.labels .label {
  157. border-color: #664d02 !important;
  158. background-color: #936e00 !important;
  159. }
  160. .ui.accordion .title:not(.ui) {
  161. color: #dbdbdb;
  162. }
  163. .ui.green.label,
  164. .ui.green.labels .label,
  165. .ui.basic.green.label {
  166. background-color: #2d693b !important;
  167. border-color: #2d693b !important;
  168. }
  169. .ui.green.labels a.label:hover,
  170. .ui.basic.green.labels a.label:hover,
  171. a.ui.ui.ui.green.label:hover,
  172. a.ui.basic.green.label:hover {
  173. background-color: #3d794b !important;
  174. border-color: #3d794b !important;
  175. color: #fff !important;
  176. }
  177. .ui.divider:not(.vertical):not(.horizontal) {
  178. border-bottom-color: var(--color-secondary);
  179. border-top-color: transparent;
  180. }
  181. .form .help {
  182. color: #7f8699;
  183. }
  184. .ui .text.light.grey {
  185. color: #7f8699 !important;
  186. }
  187. .ui.form .fields.error .field textarea,
  188. .ui.form .fields.error .field select,
  189. .ui.form .fields.error .field input:not([type]),
  190. .ui.form .fields.error .field input[type="date"],
  191. .ui.form .fields.error .field input[type="datetime-local"],
  192. .ui.form .fields.error .field input[type="email"],
  193. .ui.form .fields.error .field input[type="number"],
  194. .ui.form .fields.error .field input[type="password"],
  195. .ui.form .fields.error .field input[type="search"],
  196. .ui.form .fields.error .field input[type="tel"],
  197. .ui.form .fields.error .field input[type="time"],
  198. .ui.form .fields.error .field input[type="text"],
  199. .ui.form .fields.error .field input[type="file"],
  200. .ui.form .fields.error .field input[type="url"],
  201. .ui.form .field.error textarea,
  202. .ui.form .field.error select,
  203. .ui.form .field.error input:not([type]),
  204. .ui.form .field.error input[type="date"],
  205. .ui.form .field.error input[type="datetime-local"],
  206. .ui.form .field.error input[type="email"],
  207. .ui.form .field.error input[type="number"],
  208. .ui.form .field.error input[type="password"],
  209. .ui.form .field.error input[type="search"],
  210. .ui.form .field.error input[type="tel"],
  211. .ui.form .field.error input[type="time"],
  212. .ui.form .field.error input[type="text"],
  213. .ui.form .field.error input[type="file"],
  214. .ui.form .field.error input[type="url"] {
  215. background-color: #522;
  216. border: 1px solid #7d3434;
  217. color: #f9cbcb;
  218. }
  219. .ui.form .field.error select:focus,
  220. .ui.form .field.error input:not([type]):focus,
  221. .ui.form .field.error input[type="date"]:focus,
  222. .ui.form .field.error input[type="datetime-local"]:focus,
  223. .ui.form .field.error input[type="email"]:focus,
  224. .ui.form .field.error input[type="number"]:focus,
  225. .ui.form .field.error input[type="password"]:focus,
  226. .ui.form .field.error input[type="search"]:focus,
  227. .ui.form .field.error input[type="tel"]:focus,
  228. .ui.form .field.error input[type="time"]:focus,
  229. .ui.form .field.error input[type="text"]:focus,
  230. .ui.form .field.error input[type="file"]:focus,
  231. .ui.form .field.error input[type="url"]:focus {
  232. background-color: #522;
  233. border: 1px solid #a04141;
  234. color: #f9cbcb;
  235. }
  236. .ui.green.button,
  237. .ui.green.buttons .button {
  238. background-color: #87ab63;
  239. }
  240. .ui.green.button:hover,
  241. .ui.green.buttons .button:hover {
  242. background-color: #a0cc75;
  243. }
  244. .ui.search > .results {
  245. background: #383c4a;
  246. border-color: var(--color-secondary);
  247. }
  248. .ui.search > .results .result:hover,
  249. .ui.category.search > .results .category .result:hover {
  250. background: var(--color-secondary);
  251. }
  252. .ui.search > .results .result .title {
  253. color: #dbdbdb;
  254. }
  255. .ui.table > thead > tr > th {
  256. background: var(--color-secondary);
  257. color: #dbdbdb !important;
  258. }
  259. .repository.file.list #repo-files-table tr {
  260. background: #2a2e3a;
  261. }
  262. .repository.file.list #repo-files-table tr:hover {
  263. background-color: #393d4a !important;
  264. }
  265. .repository.file.editor.edit,
  266. .repository.wiki.new .CodeMirror {
  267. .editor-preview,
  268. .editor-preview-side,
  269. & + .editor-preview-side {
  270. background: #353945;
  271. .markup.ui.segment {
  272. border-width: 0;
  273. }
  274. }
  275. }
  276. .overflow.menu .items .item {
  277. color: #9d9d9d;
  278. }
  279. .overflow.menu .items .item:hover {
  280. color: #dbdbdb;
  281. }
  282. .ui.list > .item > .content {
  283. color: var(--color-secondary-dark-6) !important;
  284. }
  285. .repository .navbar .active.item,
  286. .repository .navbar .active.item:hover {
  287. border-color: transparent !important;
  288. }
  289. .repository .diff-stats li {
  290. border-color: var(--color-secondary);
  291. }
  292. .tag-code,
  293. .tag-code td {
  294. background: #353945 !important;
  295. }
  296. .tag-code td.lines-num {
  297. background-color: #3a3e4c !important;
  298. }
  299. .tag-code td.lines-type-marker,
  300. td.blob-hunk {
  301. color: #dbdbdb !important;
  302. }
  303. .ui .warning.header,
  304. .ui.warning.message {
  305. background-color: #542 !important;
  306. border-color: #ec8;
  307. }
  308. .ui.warning.message {
  309. color: #ec8;
  310. box-shadow: 0 0 0 1px #ec8;
  311. }
  312. .ui.warning.segment {
  313. border-color: #ec8;
  314. }
  315. .ui.red.message,
  316. .ui.error.message {
  317. background-color: #522;
  318. color: #f9cbcb;
  319. box-shadow: 0 0 0 1px #a04141 inset;
  320. }
  321. .ui .error.header,
  322. .ui.error.message {
  323. background-color: #522 !important;
  324. border-color: #a04141;
  325. }
  326. .ui.error.segment {
  327. border-color: #a04141;
  328. }
  329. .ui.red.button,
  330. .ui.red.buttons .button {
  331. background-color: #7d3434;
  332. }
  333. .ui.red.button:hover,
  334. .ui.red.buttons .button:hover {
  335. background-color: #984646;
  336. }
  337. .ui.positive.message {
  338. background-color: #0d491b;
  339. color: #87ab63;
  340. box-shadow: 0 0 0 1px #2d693b inset, 0 0 0 0 transparent;
  341. }
  342. .ui.negative.message {
  343. background-color: rgba(80, 23, 17, .6);
  344. color: #f9cbcb;
  345. box-shadow: 0 0 0 1px rgba(121, 71, 66, .5) inset, 0 0 0 0 transparent;
  346. }
  347. .ui.list .list > .item .header,
  348. .ui.list > .item .header {
  349. color: #dedede;
  350. }
  351. .ui.list .list > .item .description,
  352. .ui.list > .item .description {
  353. color: var(--color-secondary-dark-6);
  354. }
  355. .repository.labels .ui.basic.black.label {
  356. background-color: #bbbbbb !important;
  357. }
  358. .lines-num {
  359. color: var(--color-secondary-dark-6) !important;
  360. border-color: var(--color-secondary) !important;
  361. }
  362. td.blob-excerpt {
  363. background-color: rgba(0, 0, 0, .15);
  364. }
  365. .lines-code.active,
  366. .lines-code .active {
  367. background: #534d1b !important;
  368. }
  369. .ui.ui.ui.ui.table tr.active,
  370. .ui.ui.table td.active {
  371. color: #dbdbdb;
  372. }
  373. .ui.active.label {
  374. background: #393d4a;
  375. border-color: #393d4a;
  376. color: #dbdbdb;
  377. }
  378. .ui.header .sub.header {
  379. color: var(--color-secondary-dark-6);
  380. }
  381. .ui.dividing.header {
  382. border-bottom: 1px solid var(--color-secondary);
  383. }
  384. .ui.modal > .header {
  385. background: var(--color-secondary);
  386. color: #dbdbdb;
  387. }
  388. .ui.modal > .actions {
  389. background: var(--color-secondary);
  390. border-color: var(--color-secondary);
  391. }
  392. .ui.modal > .content {
  393. background: #383c4a;
  394. }
  395. .minicolors-panel {
  396. background: var(--color-secondary) !important;
  397. border-color: #6a737d !important;
  398. }
  399. /* invert emojis that are hard to read otherwise */
  400. .emoji[aria-label="check mark"],
  401. .emoji[aria-label="currency exchange"],
  402. .emoji[aria-label="TOP arrow"],
  403. .emoji[aria-label="END arrow"],
  404. .emoji[aria-label="ON! arrow"],
  405. .emoji[aria-label="SOON arrow"],
  406. .emoji[aria-label="heavy dollar sign"],
  407. .emoji[aria-label="copyright"],
  408. .emoji[aria-label="registered"],
  409. .emoji[aria-label="trade mark"],
  410. .emoji[aria-label="multiply"],
  411. .emoji[aria-label="plus"],
  412. .emoji[aria-label="minus"],
  413. .emoji[aria-label="divide"],
  414. .emoji[aria-label="curly loop"],
  415. .emoji[aria-label="double curly loop"],
  416. .emoji[aria-label="wavy dash"],
  417. .emoji[aria-label="paw prints"],
  418. .emoji[aria-label="musical note"],
  419. .emoji[aria-label="musical notes"] {
  420. filter: invert(100%) hue-rotate(180deg);
  421. }
  422. .edit-diff > div > .ui.table {
  423. border-left-color: var(--color-secondary) !important;
  424. border-right-color: var(--color-secondary) !important;
  425. }
  426. /* code mirror dark theme */
  427. .CodeMirror {
  428. &.cm-s-default,
  429. &.cm-s-paper {
  430. .cm-property {
  431. color: #a0cc75;
  432. }
  433. .cm-header {
  434. color: #9daccc;
  435. }
  436. .cm-quote {
  437. color: #009900;
  438. }
  439. .cm-keyword {
  440. color: #cc8a61;
  441. }
  442. .cm-atom {
  443. color: #ef5e77;
  444. }
  445. .cm-number {
  446. color: #ff5656;
  447. }
  448. .cm-def {
  449. color: #e4e4e4;
  450. }
  451. .cm-variable-2 {
  452. color: #00bdbf;
  453. }
  454. .cm-variable-3 {
  455. color: #008855;
  456. }
  457. .cm-comment {
  458. color: #8e9ab3;
  459. }
  460. .cm-string {
  461. color: #a77272;
  462. }
  463. .cm-string-2 {
  464. color: #ff5500;
  465. }
  466. .cm-meta,
  467. .cm-qualifier {
  468. color: #ffb176;
  469. }
  470. .cm-builtin {
  471. color: #b7c951;
  472. }
  473. .cm-bracket {
  474. color: #999977;
  475. }
  476. .cm-tag {
  477. color: #f1d273;
  478. }
  479. .cm-attribute {
  480. color: #bfcc70;
  481. }
  482. .cm-hr {
  483. color: #999999;
  484. }
  485. .cm-url {
  486. color: #c5cfd0;
  487. }
  488. .cm-link {
  489. color: #d8c792;
  490. }
  491. .cm-error {
  492. /* color: #ff6e00; */
  493. color: #dbdbeb;
  494. }
  495. }
  496. }
  497. footer .container .links > * {
  498. border-left-color: #888;
  499. }
  500. .repository.release #release-list > li .detail .dot {
  501. background-color: #505667;
  502. border-color: #383c4a;
  503. }
  504. .tribute-container {
  505. box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .6);
  506. }
  507. .repository .repo-header .ui.huge.breadcrumb.repo-title .repo-header-icon .avatar {
  508. color: #2a2e3a;
  509. }
  510. img[src$="/img/matrix.svg"] {
  511. filter: invert(80%);
  512. }
  513. .mermaid-chart {
  514. filter: invert(84%) hue-rotate(180deg);
  515. }
  516. .is-loading::after {
  517. border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da;
  518. }
  519. .markup-block-error {
  520. border: 1px solid rgba(121, 71, 66, .5) !important;
  521. border-bottom: none !important;
  522. }