☰

Warzone.com Wiki Dark Theme

Inverts light theme to make a dark theme and uses tints/shades when colors have intentional meaning

  1. // ==UserScript==
  2. // @name        Warzone.com Wiki Dark Theme
  3. // @namespace   Violentmonkey Scripts
  4. // @match       https://www.warzone.com/wiki/*
  5. // @version     1.2
  6. // @author      https://gf.qytechs.cn/en/users/85040-dan-wl-danwl
  7. // @description Inverts light theme to make a dark theme and uses tints/shades when colors have intentional meaning
  8. // @grant       none
  9. // @license     MIT
  10. // ==/UserScript==
  11. (function() {
  12. 	// TODO plain inversion is too bright in some cases
  13. 	// so invert then apply [tint (if dark) or shade (if light)] 2 from https://www.color-hex.com/color/<hex code>
  14.  
  15. 	/* for browser input/button color overriding */
  16. 	const ButtonBorder = '#323232';// rgb(227, 227, 227) -> #1c1c1c
  17. 	const FieldText = '#e5e5e5';// rgb(0, 0, 0) -> #fff
  18. 	const Field = '#191919';// rgb(255, 255, 255) -> #000
  19. 	const ButtonText = '#e5e5e5';// rgb(0, 0, 0) -> #fff
  20. 	const ButtonFace = '#2d2d29';// rgb(233, 233, 237) -> #161612
  21. 	const ButtonHoverText = '#e5e5e5';// rgb(0, 0, 0) -> #fff
  22. 	const ButtonHoverFace = '#43433d';// rgb(208, 208, 215) -> #2f2f28
  23.  
  24. 	const style = document.createElement('style');
  25. 	const style2 = document.createElement('style');
  26. 	const style3 = document.createElement('style');
  27. 	const style4 = document.createElement('style');
  28.  
  29. 	style.innerHTML = `/* override browser default colors */
  30.  
  31. textarea {
  32. 	color: ${FieldText};
  33. 	background: ${Field};
  34. 	border-color: ${ButtonBorder};
  35. }
  36.  
  37. input:not(type),
  38. input[type="date"],
  39. input[type="datetime-local"],
  40. input[type="email"],
  41. input[type="month"],
  42. input[type="password"],
  43. input[type="search"],
  44. input[type="tel"],
  45. input[type="text"],
  46. input[type="time"],
  47. input[type="url"],
  48. input[type="week"],
  49. input[type="datetime"] {
  50. 	color: ${FieldText};
  51. 	background-color: ${Field};
  52. 	border-color: ${ButtonBorder};
  53. }
  54.  
  55. button,
  56. input[type="button"],
  57. input[type="color"],
  58. input[type="reset"],
  59. input[type="submit"] {
  60. 	color: ${ButtonText};
  61. 	background-color: ${ButtonFace};
  62. 	/* border-radius: 4px; */
  63. }
  64.  
  65. button:hover,
  66. input[type="button"]:hover,
  67. input[type="color"]:hover,
  68. input[type="reset"]:hover,
  69. input[type="submit"]:hover {
  70. 	color: ${ButtonHoverText};
  71. 	background-color: ${ButtonHoverFace};
  72. }
  73.  
  74. input[type="number"] {
  75. 	/* cant style the up/down buttons */
  76. 	color: ${FieldText};
  77. 	background-color: ${Field};
  78. 	border-color: ${ButtonBorder};
  79. }
  80.  
  81. input[type="file"] {
  82. 	/* cant style the button itself */
  83. 	color: ${FieldText};
  84. 	background-color: ${Field};
  85. 	border-color: ${ButtonBorder};
  86. }
  87.  
  88. /* these cannot be styled: */
  89. /* input[type="checkbox"] */
  90. /* input[type="radio"] */
  91. /* input[type="range"] */
  92.  
  93. /* no need to style these: */
  94. /* input[type="hidden"] */
  95. /* input[type="image"] */
  96.  
  97. /* load.php 410 rules */
  98.  
  99. .mw-message-box {
  100. 	/* shade 6 of https://www.color-hex.com/color/eaecf0 */
  101. 	background-color: #757678;
  102.  
  103. 	color: #fff;
  104.  
  105. 	/* tint 6 of https://www.color-hex.com/color/54595d */
  106. 	border-color: #a9acae;
  107. }
  108.  
  109. .mw-message-box-error {
  110. 	/* shade 6 of https://www.color-hex.com/color/fee7e6 */
  111. 	background-color: #7f7373;
  112.  
  113. 	/* border-color can be left as #591212 */
  114. }
  115.  
  116. .mw-message-box-warning {
  117. 	/* shade 6 of https://www.color-hex.com/color/fef6e7 */
  118. 	background-color: #7f7b73;
  119.  
  120. 	/* border-color can be left as #a66200 */
  121. }
  122.  
  123. .mw-message-box-success {
  124. 	/* shade 6 of https://www.color-hex.com/color/d5fdf4 */
  125. 	background-color: #6a7e7a;
  126.  
  127. 	/* border-color can be left as #096450 */
  128. }
  129.  
  130. figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'] {
  131. 	border-color: #37332e;
  132. 	background-color: #070605;
  133. }
  134.  
  135. figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element, figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element {
  136. 	border-color: #37332e;
  137. 	background-color: #070605;
  138. }
  139.  
  140. figure[typeof~='mw:File/Thumb'] > figcaption, figure[typeof~='mw:File/Frame'] > figcaption {
  141. 	border-color: #37332e;
  142. 	background-color: #070605;
  143. }
  144.  
  145. figure[typeof~='mw:File/Thumb'] > .mw-file-description::after,
  146. figure[typeof~='mw:File/Thumb'] > .mw-file-magnify::after {
  147. 	filter: invert(100%);
  148. }
  149.  
  150. .mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-description::after,
  151. .mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-magnify::after {
  152. 	filter: invert(100%);
  153. }
  154.  
  155. .mw-content-rtl figure[typeof~='mw:File/Thumb'] > .mw-file-description::after,
  156. .mw-content-rtl figure[typeof~='mw:File/Thumb'] > .mw-file-magnify::after {
  157. 	filter: invert(100%);
  158. }
  159.  
  160. .mw-image-border .mw-file-element {
  161. 	border-color: #15130f;
  162. }
  163.  
  164. .wikitable {
  165. 	background-color: #070605;
  166. 	color: #dfdedd;
  167. 	border-color: #5d564e;
  168. }
  169.  
  170. .wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
  171. 	border-color: #5d564e;
  172. }
  173.  
  174. .wikitable > tr > th, .wikitable > * > tr > th {
  175. 	background-color: #15130f;
  176. 	color: #dfdedd;
  177. }
  178.  
  179. .catlinks {
  180. 	background-color: #070605;
  181. 	border-color: #5d564e;
  182. }
  183.  
  184. .catlinks li {
  185. 	border-color: #5d564e;
  186. }
  187.  
  188. #mw-content-subtitle, #contentSub2 {
  189. 	color: #aba6a2;
  190. }
  191.  
  192. .usermessage {
  193. 	background-color: #010918;
  194. }
  195.  
  196. a {
  197. 	/* tint 6 of https://www.color-hex.com/color/0645ad */
  198. 	color: #82a2d6;
  199. }
  200.  
  201. a:visited {
  202. 	/* tint 6 of https://www.color-hex.com/color/0b0080 */
  203. 	color: #857fbf;
  204. }
  205.  
  206. a:active {
  207. 	/* tint 6 of https://www.color-hex.com/color/faa700 */
  208. 	color: #fcd37f;
  209. }
  210.  
  211. hr {
  212. 	background-color: #5d564e;
  213. }
  214.  
  215. h1, h2, h3, h4, h5, h6 {
  216. 	color: #fff;
  217. }
  218.  
  219. .mw-heading1, h1, .mw-heading2, h2 {
  220. 	border-bottom-color: #5d564e;
  221. }
  222.  
  223. pre, code, wm-code {
  224. 	background-color: #070605;
  225. 	color: #fff;
  226. 	border-color: #15130f;
  227. }
  228.  
  229. fieldset {
  230. 	border-color: #d5b472;
  231. }
  232.  
  233. textarea {
  234. 	border-color: #5d564e;
  235. }
  236.  
  237. .toc, .toccolours {
  238. 	background-color: #070605;
  239. 	border-color: #5d564e;
  240. }
  241.  
  242. .tocnumber {
  243. 	color: #dfdedd;
  244. }
  245.  
  246. .toctogglelabel {
  247. 	/* same as a using #0645ad */
  248. 	color: #82a2d6;
  249. }
  250.  
  251. .mixin-vector-legacy-menu-heading-arrow {
  252. 	filter: invert(100%);
  253. }
  254.  
  255. @media screen {
  256. 	.vector-body blockquote {
  257. 		border-left-color: #15130f;
  258. 	}
  259.  
  260. 	.mw-parser-output a.external {
  261. 		/* dont use filter: invert(100%); */
  262. 		/* the image doesnt exist */
  263. 		/* causes bad changes */
  264. 	}
  265.  
  266. 	body {
  267. 		background-color: #090909;
  268. 	}
  269.  
  270. 	.mw-body, .parsoid-body {
  271. 		background-color: #000;
  272. 		color: #dfdedd;
  273. 	}
  274.  
  275. 	.mw-body {
  276. 		border-color: #582806;
  277. 	}
  278.  
  279. 	#mw-page-base {
  280. 		background-color: #040404;
  281. 		background-image: linear-gradient(to bottom,#000 50%,#090909 100%);
  282. 	}
  283.  
  284. 	.mw-footer li {
  285. 		color: #dfdedd;
  286. 	}
  287.  
  288. 	.vector-menu-dropdown .vector-menu-heading {
  289. 		color: #aba6a2;
  290. 	}
  291.  
  292. 	.vector-menu-dropdown .vector-menu-heading::after {
  293. 		filter: invert(100%);
  294. 	}
  295.  
  296. 	.vector-menu-dropdown .vector-menu-heading:hover,
  297. 	.vector-menu-dropdown .vector-menu-heading:focus {
  298. 		color: #dfdedd;
  299. 	}
  300.  
  301. 	.vector-menu-dropdown .vector-menu-content {
  302. 		background-color: #000;
  303. 		border-color: #5d564e;
  304. 		box-shadow:0 1px 1px 0 rgba(255,255,255,0.1);
  305. 	}
  306.  
  307. 	.vector-menu-dropdown .mw-list-item a {
  308. 		/* same as a using #0645ad */
  309. 		color: #82a2d6;
  310. 	}
  311.  
  312. 	.vector-menu-dropdown .mw-list-item.selected a, .vector-menu-dropdown .mw-list-item.selected a:visited {
  313. 		/* tint 6 of https://www.color-hex.com/color/202122 */
  314. 		color: #8f9090;
  315. 	}
  316.  
  317. 	.vector-menu-tabs-legacy li {
  318. 		background-image:linear-gradient(to top,#883e09 0,#170d07 1px,#000 100%);
  319. 	}
  320.  
  321. 	.vector-menu-tabs-legacy li a {
  322. 		/* same as a using #0645ad */
  323. 		color: #82a2d6;
  324. 	}
  325.  
  326. 	.vector-menu-tabs-legacy .new a, .vector-menu-tabs-legacy .new a:visited {
  327. 		/* tint 6 of https://www.color-hex.com/color/ba0000 */
  328. 		color: #5d0000;
  329. 	}
  330.  
  331. 	.vector-menu-tabs-legacy .selected {
  332. 		background-color: #000
  333. 	}
  334.  
  335. 	.vector-menu-tabs-legacy .selected a, .vector-menu-tabs-legacy .selected a:visited {
  336. 		/* tint 6 of https://www.color-hex.com/color/202122 */
  337. 		color: #8f9090;
  338. 	}
  339.  
  340. 	.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {
  341. 		background-image: linear-gradient(to bottom,rgba(88,40,1,0) 0,#582806 100%);
  342. 	}
  343.  
  344. 	.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading {
  345. 		color: #aba6a2;
  346. 		background-image: linear-gradient(to right,rgba(55,51,46,0) 0,#37332e 33%,#37332e 66%,rgba(55,51,46,0) 100%);
  347. 	}
  348.  
  349. 	.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a {
  350. 		/* same as a using #0645ad */
  351. 		color: #82a2d6;
  352. 	}
  353.  
  354. 	.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited {
  355. 		/* same as a using #0b0080 */
  356. 		color: #857fbf;
  357. 	}
  358.  
  359. 	.vector-search-box-input {
  360. 		background-color: rgba(0,0,0,0.5);
  361. 		color: #fff;
  362. 		border-color: #5d564e;
  363. 	}
  364.  
  365. 	.vector-search-box-inner:hover .vector-search-box-input {
  366. 		border-color: #8d8882;
  367. 	}
  368.  
  369. 	.vector-search-box-input::-webkit-input-placeholder {
  370. 		color: #8d8882;
  371. 	}
  372.  
  373. 	.vector-search-box-input:-ms-input-placeholder {
  374. 		color: #8d8882;
  375. 	}
  376.  
  377. 	.vector-search-box-input::-moz-placeholder {
  378. 		color: #8d8882;
  379. 	}
  380.  
  381. 	.vector-search-box-input::placeholder {
  382. 		color: #8d8882;
  383. 	}
  384.  
  385. 	.searchButton[name='go'] {
  386. 		/* dont use filter: invert(100%); */
  387. 		/* the image could not be found */
  388. 		/* causes negative changes */
  389.  
  390. 		/* make the Go text appear */
  391. 		text-indent: unset;
  392. 	}
  393.  
  394. 	.vector-menu-tabs #ca-unwatch.icon a::before {
  395. 		filter: invert(100%);
  396. 	}
  397.  
  398. 	.vector-menu-tabs #ca-unwatch.mw-watchlink-temp.icon a::before {
  399. 		filter: invert(100%);
  400. 	}
  401.  
  402. 	.vector-menu-tabs #ca-watch.icon a::before {
  403. 		filter: invert(100%);
  404. 	}
  405.  
  406. 	.vector-menu-tabs #ca-unwatch.icon a:hover::before,
  407. 	.vector-menu-tabs #ca-unwatch.icon a:focus::before {
  408. 		filter: invert(100%);
  409. 	}
  410.  
  411. 	.vector-menu-tabs #ca-unwatch.mw-watchlink-temp.icon a:hover::before,
  412. 	.vector-menu-tabs #ca-unwatch.mw-watchlink-temp.icon a:focus::before {
  413. 		filter: invert(100%);
  414. 	}
  415.  
  416. 	.vector-menu-tabs #ca-watch.icon a:hover::before,
  417. 	.vector-menu-tabs #ca-watch.icon a:focus::before {
  418. 		filter: invert(100%);
  419. 	}
  420.  
  421. 	.vector-user-menu-legacy #pt-anonuserpage,
  422. 	.vector-user-menu-legacy #pt-userpage a {
  423. 		/* dont use filter: invert(100%); */
  424. 		/* the image could not be found */
  425. 		/* causes negative changes */
  426. 	}
  427.  
  428. 	.vector-user-menu-legacy #pt-anonuserpage {
  429. 		color: #aba6a2;
  430. 	}
  431. }
  432.  
  433. @media print {
  434. 	.mw-body a:not(.image) {
  435. 		/* tint 6 of https://www.color-hex.com/color/aaaaaa */
  436. 		border-bottom-color: #555555;
  437. 	}
  438.  
  439. 	.firstHeading, .mw-heading2, h2 {
  440. 		border-bottom-color: #fff;
  441. 	}
  442.  
  443. 	blockquote {
  444. 		border-left-color: #fff;
  445. 	}
  446.  
  447. 	.printfooter {
  448. 		border-top-color: #fff;
  449. 	}
  450.  
  451. 	.mw-footer {
  452. 		border-top-color: #111;
  453. 	}
  454.  
  455. 	#footer-info li {
  456. 		color: #666;
  457. 	}
  458.  
  459. 	#footer-info li a {
  460. 		color: #666 !important;
  461. 	}
  462.  
  463. 	#footer-info-lastmod {
  464. 		color: #fff;
  465. 	}
  466.  
  467. 	#footer {
  468. 		background-color: #000;
  469. 		color: #fff;
  470. 		border-top-color: #555;
  471. 	}
  472. }
  473.  
  474. /* load.php 11 rules */
  475.  
  476. div.ambox {
  477. 	/* orange is FFA500 */
  478. 	/* tint 6 of https://www.color-hex.com/color/ffa500 */
  479. 	border-color: #ffd27f;
  480.  
  481. 	background-color: #040404;
  482. }
  483.  
  484. div.infobox {
  485. 	border-color: #fff;
  486. 	background-color: #202020;
  487. }
  488.  
  489. div.infobox div.plainlinks a, div.infobox div.plainlinks a:hover {
  490. 	color: #fff;
  491. }
  492.  
  493. div.infobox hr {
  494. 	color: #fff;
  495. 	background-color: #fff;
  496. }
  497.  
  498. div.navbox {
  499. 	background-color: #0e0e0e;
  500. 	border-color: #fff;
  501. }
  502.  
  503. div.navbox div.navbox-header {
  504. 	background-color: #212121;
  505. 	border-color: #fff;
  506. }
  507.  
  508. /* inline stylesheet 1 10 rules */
  509.  
  510. .suggestions-special {
  511. 	background-color: #000;
  512. 	border-color: #5d564e;
  513. }
  514.  
  515. .suggestions-results {
  516. 	background-color: #000;
  517. 	border-color: #5d564e;
  518. }
  519.  
  520. .suggestions-result {
  521. 	color: #fff;
  522. }
  523.  
  524. .suggestions-result-current {
  525. 	background-color: #d5b472;
  526. 	color: #000;
  527. }
  528.  
  529. .suggestions-special .special-label {
  530. 	color: #8d8882;
  531. }
  532.  
  533. .suggestions-special .special-query {
  534. 	color: #fff;
  535. }
  536.  
  537. .suggestions-special .special-hover {
  538. 	background-color: #37332e;
  539. }
  540.  
  541. .suggestions-result-current .special-label, .suggestions-result-current .special-query {
  542. 	color: #000;
  543. }
  544.  
  545. /* inline stylesheet 3 3 rules */
  546.  
  547. .suggestions a.mw-searchSuggest-link, .suggestions a.mw-searchSuggest-link:hover, .suggestions a.mw-searchSuggest-link:active, .suggestions a.mw-searchSuggest-link:focus {
  548. 	color: #fff;
  549. }
  550.  
  551. .suggestions-result-current a.mw-searchSuggest-link, .suggestions-result-current a.mw-searchSuggest-link:hover, .suggestions-result-current a.mw-searchSuggest-link:active, .suggestions-result-current a.mw-searchSuggest-link:focus {
  552. 	color: #000;
  553. }`;
  554.  
  555. 	style2.innerHTML = `/* load.php 1033 rules https://www.warzone.com/wiki/Special:Categories */
  556.  
  557. .mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(even) td {
  558. 	color: #070605;
  559. }
  560.  
  561. .mw-htmlform-ooui .mw-htmlform-matrix tbody tr:hover td {
  562. 	color: #15130f;
  563. }
  564.  
  565. .mw-datatable {
  566. 	border-color: #5d564e;
  567. }
  568.  
  569. .mw-datatable td, mw-datatable th {
  570. 	border-color: #5d564e;
  571. }
  572.  
  573. .mw-datatable th {
  574. 	background-color: #151100;
  575. }
  576.  
  577. .mw-datatable td {
  578. 	background-color: #000;
  579. }
  580.  
  581. .mw-datatable tr:hover td {
  582. 	background-color: #150c00;
  583. }
  584.  
  585. .oo-ui-pendingElement-pending {
  586. 	background-color: #15130f;
  587. 	background-image: linear-gradient(135deg,#000 25%,transparent 25%,transparent 50%,#000 50%,#000 75%,transparent 75%,transparent);
  588. }
  589.  
  590. .oo-ui-fieldLayout-disabled > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header > .oo-ui-labelElement-label {
  591. 	color: #8d8882;
  592. }
  593.  
  594. .oo-ui-panelLayout-framed {
  595. 	border-color: #5d564e;
  596. }
  597.  
  598. .oo-ui-optionWidget.oo-ui-widget-disabled {
  599. 	color: #8d8882;
  600. }
  601.  
  602. .oo-ui-radioSelectWidget:focus [type='radio']:checked + span::before {
  603. 	border-color: #000;
  604. }
  605.  
  606. .oo-ui-labelWidget.oo-ui-inline-help {
  607. 	color: #aba6a2;
  608. }
  609.  
  610. .oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-error {
  611. 	/* shade 6 of https://www.color-hex.com/color/fee7e6 */
  612. 	background-color: #7f7373;
  613.  
  614. 	/* border-color can be left as #b32424 */
  615. }
  616.  
  617. .oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning {
  618. 	/* shade 6 of https://www.color-hex.com/color/fef6e7 */
  619. 	background-color: #7f7b73;
  620.  
  621. 	/* tint 6 of https://www.color-hex.com/color/a66200 */
  622. 	border-color: #d2b07f;
  623. }
  624.  
  625. .oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-success {
  626. 	/* shade 6 of https://www.color-hex.com/color/d5fdf4 */
  627. 	background-color: #6a7e7a;
  628.  
  629. 	/* tint 6 of https://www.color-hex.com/color/096450 */
  630. 	border-color: #84b1a7;
  631. }
  632.  
  633. .oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-notice {
  634. 	/* shade 6 of https://www.color-hex.com/color/eaecf0 */
  635. 	background-color: #757678;
  636.  
  637. 	/* tint 6 of https://www.color-hex.com/color/54595d */
  638. 	border-color: #a9acae;
  639. }
  640.  
  641. .oo-ui-messageWidget.oo-ui-flaggedElement-error:not(.oo-ui-messageWidget-block) {
  642. 	/* can be left as #d73333 */
  643. }
  644.  
  645. .oo-ui-messageWidget.oo-ui-flaggedElement-success:not(.oo-ui-messageWidget-block) {
  646. 	/* can be left as #14866d */
  647. }
  648.  
  649. .oo-ui-popupWidget-popup {
  650. 	background-color: #000;
  651. 	border-color: #5d564e;
  652. 	box-shadow: 0 2px 2px 0 rgba(255,255,255,0.2);
  653. }
  654.  
  655. @supports (filter:drop-shadow(0 0 0)) {
  656. 	.oo-ui-popupWidget {
  657. 		filter: drop-shadow(0 2px 1px rgba(255,255,255,0.3));
  658. 	}
  659. }
  660.  
  661. .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::before {
  662. 	border-bottom-color: #847a6f;
  663. }
  664.  
  665. .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::after {
  666. 	border-bottom-color: #000;
  667. }
  668.  
  669. .oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::before {
  670. 	border-top-color: #5d564e;
  671. }
  672.  
  673. .oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::after {
  674. 	border-top-color: #000;
  675. }
  676.  
  677. .oo-ui-popupWidget-anchored-start .oo-ui-popupWidget-anchor::before {
  678. 	border-right-color: #5d564e;
  679. }
  680.  
  681. .oo-ui-popupWidget-anchored-start .oo-ui-popupWidget-anchor::after {
  682. 	border-right-color: #000;
  683. }
  684.  
  685. .oo-ui-popupWidget-anchored-end .oo-ui-popupWidget-anchor::before {
  686. 	border-left-color: #5d564e;
  687. }
  688.  
  689. .oo-ui-popupWidget-anchored-end .oo-ui-popupWidget-anchor::after {
  690. 	border-left-color: #000;
  691. }
  692.  
  693. .oo-ui-checkboxInputWidget [type='checkbox'] + span {
  694. 	background-color: #000;
  695. 	border-color: #8d8882;
  696. }
  697.  
  698. .oo-ui-checkboxInputWidget [type='checkbox']:indeterminate + span::before {
  699. 	background-color: #000;
  700. }
  701.  
  702. .oo-ui-checkboxInputWidget [type='checkbox']:disabled + span {
  703. 	background-color: #37332e;
  704. 	border-color: #37332e;
  705. }
  706.  
  707. .oo-ui-dropdownInputWidget select {
  708. 	border-color: #5d564e;
  709. }
  710.  
  711. .oo-ui-dropdownInputWidget.oo-ui-widget-enabled {
  712. 	background-color: #070605;
  713. }
  714.  
  715. .oo-ui-dropdownInputWidget.oo-ui-widget-enabled:hover {
  716. 	background-color: #000;
  717. }
  718.  
  719. .oo-ui-dropdownInputWidget.oo-ui-widget-enabled select {
  720. 	color: #dfdedd;
  721. }
  722.  
  723. .oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:hover {
  724. 	color: #bfbdbb;
  725. 	border-color: #5d564e;
  726. }
  727.  
  728. .oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:active {
  729. 	color: #fff;
  730. 	border-color: #8d8882;
  731. }
  732.  
  733. .oo-ui-dropdownInputWidget.oo-ui-widget-disabled {
  734. 	background-color: #15130f;
  735. }
  736.  
  737. .oo-ui-dropdownInputWidget.oo-ui-widget-disabled select {
  738. 	color: #8d8882;
  739. 	border-color: #37332e;
  740. }
  741.  
  742. .oo-ui-radioInputWidget [type='radio'] + span {
  743. 	background-color: #000;
  744. 	border-color: #8d8882;
  745. }
  746.  
  747. .oo-ui-radioInputWidget [type='radio']:disabled + span {
  748. 	background-color: #37332e;
  749. 	border-color: #37332e;
  750. }
  751.  
  752. .oo-ui-radioInputWidget [type='radio']:disabled:checked + span {
  753. 	background-color: #000;
  754. }
  755.  
  756. .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:focus + span::before {
  757. 	border-color: #000;
  758. }
  759.  
  760. .oo-ui-textInputWidget .oo-ui-inputWidget-input {
  761. 	background-color: #000;
  762. 	color: #fff;
  763. 	border-color: #5d564e;
  764. }
  765.  
  766. .oo-ui-textInputWidget .oo-ui-pendingElement-pending {
  767. 	background-color: #15130f;
  768. }
  769.  
  770. .oo-ui-textInputWidget > .oo-ui-labelElement-label {
  771. 	color: #8d8882;
  772. }
  773.  
  774. .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input::-webkit-input-placeholder {
  775. 	color: #8d8882;
  776. }
  777.  
  778. .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:-ms-input-placeholder {
  779. 	color: #8d8882;
  780. }
  781.  
  782. .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input::-moz-placeholder {
  783. 	color: #8d8882;
  784. }
  785.  
  786. .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input::placeholder {
  787. 	color: #8d8882;
  788. }
  789.  
  790. .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input[readonly]:not(.oo-ui-pendingElement-pending) {
  791. 	background-color: #070605;
  792. }
  793.  
  794. .oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input {
  795. 	color: #8d8882;
  796. }
  797.  
  798. .oo-ui-textInputWidget.oo-ui-widget-disabled .oo-ui-inputWidget-input {
  799. 	background-color: #15130f;
  800.  
  801. 	-webkit-text-fill-color: #8d8882;
  802. 	color: #8d8882;
  803.  
  804. 	text-shadow: 0 1px 1px #000;
  805. 	border-color: #37332e;
  806. }
  807.  
  808. .oo-ui-textInputWidget.oo-ui-widget-disabled > .oo-ui-labelElement-label {
  809. 	color: #8d8882;
  810.  
  811. 	text-shadow: 0 1px 1px #000;
  812. }
  813.  
  814. .oo-ui-menuSelectWidget {
  815. 	background-color: #000;
  816. 	border-color: #5d564e;
  817. 	box-shadow: 0 2px 2px 0 rgba(255,255,255,0.2);
  818. }
  819.  
  820. .oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
  821. 	background-color: #15130f;
  822. 	color: #fff;
  823. }
  824.  
  825. .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected, .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, .oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
  826. 	background-color: #150c00;
  827. }
  828.  
  829. .oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
  830. 	color: #dfdedd;
  831. }
  832.  
  833. .oo-ui-menuSectionOptionWidget {
  834. 	color: #8d8882;
  835. }
  836.  
  837. .oo-ui-dropdownWidget-handle {
  838. 	border-color: #5d564e;
  839. }
  840.  
  841. .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
  842. 	background-color: #070605;
  843. 	color: #dfdedd;
  844. }
  845.  
  846. .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
  847. 	background-color: #000;
  848. 	color: #bfbdbb;
  849. 	border-color: #5d564e;
  850. }
  851.  
  852. .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:active {
  853. 	color: #fff;
  854. 	border-color: #8d8882;
  855. }
  856.  
  857. .oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle {
  858. 	background-color: #000;
  859. }
  860.  
  861. .oo-ui-dropdownWidget.oo-ui-widget-disabled .oo-ui-dropdownWidget-handle {
  862. 	color: #8d8882;
  863. 	text-shadow:0 1px 1px #000;
  864. 	border-color: #37332e;
  865. 	background-color: #15130f;
  866. }
  867.  
  868. .oo-ui-comboBoxInputWidget-open .oo-ui-comboBoxInputWidget-dropdownButton > .oo-ui-buttonElement-button {
  869. 	background-color: #000;
  870. }
  871.  
  872. .oo-ui-multioptionWidget.oo-ui-widget-disabled {
  873. 	color: #8d8882;
  874. }
  875.  
  876. .oo-ui-progressBarWidget {
  877. 	border-color: #5d564e;
  878. 	box-shadow:0 2px 2px 0 rgba(255,255,255,0.2);
  879. }
  880.  
  881. .oo-ui-progressBarWidget:not(.oo-ui-pendingElement-pending) {
  882. 	background-color: #000;
  883. }
  884.  
  885. .oo-ui-progressBarWidget.oo-ui-widget-disabled .oo-ui-progressBarWidget-bar {
  886. 	background-color: #37332e;
  887. }
  888.  
  889. .oo-ui-selectFileInputWidget-dropTarget {
  890. 	background-color: #000;
  891. 	border-color: #5d564e;
  892. }
  893.  
  894. .oo-ui-selectFileInputWidget.oo-ui-widget-enabled.oo-ui-selectFileInputWidget-dropTarget {
  895. 	background-color: #000;
  896. }
  897.  
  898. .oo-ui-selectFileInputWidget.oo-ui-widget-enabled.oo-ui-selectFileInputWidget-dropTarget:hover {
  899. 	border-color: #8d8882;
  900. }
  901.  
  902. .oo-ui-selectFileInputWidget.oo-ui-widget-enabled.oo-ui-selectFileInputWidget-canDrop.oo-ui-selectFileInputWidget-dropTarget, .oo-ui-selectFileInputWidget.oo-ui-widget-enabled.oo-ui-selectFileInputWidget-canDrop .oo-ui-selectFileInputWidget-info > .oo-ui-inputWidget-input {
  903. 	background-color: #150c00;
  904. 	color: #d5b472;
  905. }
  906.  
  907. .oo-ui-selectFileInputWidget.oo-ui-widget-enabled.oo-ui-selectFileInputWidget-cantDrop.oo-ui-selectFileInputWidget-dropTarget, .oo-ui-selectFileInputWidget.oo-ui-widget-enabled.oo-ui-selectFileInputWidget-cantDrop .oo-ui-selectFileInputWidget-info > .oo-ui-inputWidget-input {
  908. 	/* shade 6 of https://www.color-hex.com/color/fee7e6 */
  909. 	background-color: #7f7373;
  910. }
  911.  
  912. .oo-ui-selectFileInputWidget.oo-ui-widget-disabled.oo-ui-selectFileInputWidget-dropTarget, .oo-ui-selectFileInputWidget.oo-ui-selectFileInputWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileInputWidget-dropTarget {
  913. 	background-color: #15130f;
  914. 	border-color: #37332e;
  915. }
  916.  
  917. .oo-ui-toggleSwitchWidget {
  918. 	background-color: #070605;
  919. 	border-color: #8d8882
  920. }
  921.  
  922. .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled .oo-ui-toggleSwitchWidget-grip {
  923. 	background-color: #070605;
  924. 	border-color: #8d8882;
  925. }
  926.  
  927. .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover {
  928. 	background-color: #000;
  929. }
  930.  
  931. .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover .oo-ui-toggleSwitchWidget-grip {
  932. 	background-color: #000;
  933. }
  934.  
  935. .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active .oo-ui-toggleSwitchWidget-grip, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover .oo-ui-toggleSwitchWidget-grip, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus .oo-ui-toggleSwitchWidget-grip {
  936. 	background-color: #000;
  937. 	border-color: #000;
  938. }
  939.  
  940. .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
  941. 	background-color: #000;
  942. 	border-color: #000;
  943. }
  944.  
  945. .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus::before {
  946. 	border-color: #000;
  947. }
  948.  
  949. .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled {
  950. 	background-color: #37332e;
  951. 	border-color: #37332e;
  952. }
  953.  
  954. .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip {
  955. 	border-color: #000;
  956. 	box-shadow: inset 0 0 0 1px #000;
  957. }
  958.  
  959. .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
  960. 	background-color: #000;
  961. }
  962.  
  963. /* 2941 onwards should be fine to ignore because its rules included in first style  */
  964.  
  965. /* inline stylesheet 3 13 rules */
  966.  
  967. .mw-widget-titleWidget-menu .mw-widget-titleOptionWidget-description {
  968. 	color: #8d8882;
  969. }
  970.  
  971. .mw-widget-titleWidget-menu-withImages .mw-widget-titleOptionWidget.oo-ui-iconElement > .oo-ui-iconElement-icon:not(.mw-widget-titleOptionWidget-hasImage) {
  972. 	background-color: #37332e;
  973. }`;
  974.  
  975. 	style3.innerHTML = `/* load.php 1090 rules https://www.warzone.com/wiki/index.php?title=Special:UserLogin&returnto=Main+Page */
  976.  
  977. .cdx-icon {
  978. 	color: #dfdedd;
  979. }
  980.  
  981. .cdx-button:enabled,
  982. .cdx-button.cdx-button--fake-button--enabled {
  983. 	background-color: #070605;
  984. 	color: #dfdedd;
  985. 	border-color: #5d564e;
  986. }
  987.  
  988. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  989. 	.cdx-button:enabled .cdx-button__icon,
  990. 	.cdx-button.cdx-button--fake-button--enabled .cdx-button__icon {
  991. 		background-color: #dfdedd;
  992. 	}
  993. }
  994.  
  995. .cdx-button:enabled:hover, .cdx-button.cdx-button--fake-button--enabled:hover {
  996. 	background-color: #000;
  997. 	color: #bfbdbb;
  998. }
  999.  
  1000. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  1001. 	.cdx-button:enabled:hover .cdx-button__icon,
  1002. 	.cdx-button.cdx-button--fake-button--enabled:hover .cdx-button__icon {
  1003. 		background-color: #bfbdbb;
  1004. 	}
  1005. }
  1006.  
  1007. .cdx-button:enabled:active, .cdx-button.cdx-button--fake-button--enabled:active,
  1008. .cdx-button:enabled.cdx-button--is-active, .cdx-button.cdx-button--fake-button--enabled.cdx-button--is-active {
  1009. 	background-color: #15130f;
  1010. 	color: #fff;
  1011. 	border-color: #8d8882;
  1012. }
  1013.  
  1014. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  1015. 	.cdx-button:enabled:active .cdx-button__icon,
  1016. 	.cdx-button.cdx-button--fake-button--enabled:active .cdx-button__icon,
  1017. 	.cdx-button:enabled.cdx-button--is-active .cdx-button__icon,
  1018. 	.cdx-button.cdx-button--fake-button--enabled.cdx-button--is-active .cdx-button__icon {
  1019. 		background-color: #fff;
  1020. 	}
  1021. }
  1022.  
  1023. .cdx-button:enabled.cdx-button--action-progressive:active,
  1024. .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive:active,
  1025. .cdx-button:enabled.cdx-button--action-progressive.cdx-button--is-active,
  1026. .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive.cdx-button--is-active {
  1027. 	background-color: #150c00;
  1028. }
  1029.  
  1030. .cdx-button:enabled.cdx-button--action-destructive:active,
  1031. .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-destructive:active,
  1032. .cdx-button:enabled.cdx-button--action-destructive.cdx-button--is-active,
  1033. .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-destructive.cdx-button--is-active {
  1034. 	/* shade 6 of https://www.color-hex.com/color/fee7e6 */
  1035. 	background-color: #7f7373;
  1036. }
  1037.  
  1038. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  1039. 	.cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive .cdx-button__icon,
  1040. 	.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive .cdx-button__icon {
  1041. 		background-color: #000;
  1042. 	}
  1043. }
  1044.  
  1045. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  1046. 	.cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive:hover .cdx-button__icon,
  1047. 	.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive:hover .cdx-button__icon {
  1048. 		background-color: #000;
  1049. 	}
  1050. }
  1051.  
  1052. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  1053. 	.cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive:active .cdx-button__icon,
  1054. 	.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive:active .cdx-button__icon,
  1055. 	.cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive.cdx-button--is-active .cdx-button__icon,
  1056. 	.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive.cdx-button--is-active .cdx-button__icon {
  1057. 		background-color: #000;
  1058. 	}
  1059. }
  1060.  
  1061. .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-destructive, .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-destructive {
  1062. 	color: #000;
  1063. }
  1064.  
  1065. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  1066. 	.cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-destructive .cdx-button__icon,
  1067. 	.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-destructive .cdx-button__icon {
  1068. 		background-color: #000;
  1069. 	}
  1070. }
  1071.  
  1072. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  1073. 	.cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-destructive:hover .cdx-button__icon,
  1074. 	.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-destructive:hover .cdx-button__icon {
  1075. 		background-color: #000;
  1076. 	}
  1077. }
  1078.  
  1079. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  1080. 	.cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-destructive:active .cdx-button__icon,
  1081. 	.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-destructive:active .cdx-button__icon,
  1082. 	.cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-destructive.cdx-button--is-active .cdx-button__icon,
  1083. 	.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-destructive.cdx-button--is-active .cdx-button__icon {
  1084. 		background-color: #000;
  1085. 	}
  1086. }
  1087.  
  1088. .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-destructive:focus:not(:active):not(.cdx-button--is-active),
  1089. .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-destructive:focus:not(:active):not(.cdx-button--is-active) {
  1090. 	box-shadow: inset 0 0 0 1px #d73333,inset 0 0 0 2px #000;
  1091. }
  1092.  
  1093. .cdx-button:enabled.cdx-button--weight-quiet:hover,
  1094. .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet:hover {
  1095. 	background-color: rgba(255,231,182,.027);
  1096. }
  1097.  
  1098. .cdx-button:enabled.cdx-button--weight-quiet:active,
  1099. .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet:active,
  1100. .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--is-active,
  1101. .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--is-active {
  1102. 	background-color: rgba(255,231,182,.082);
  1103. 	color: #fff;
  1104. 	border-color: #8d8882;
  1105. }
  1106.  
  1107. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  1108. 	.cdx-button:enabled.cdx-button--weight-quiet:active .cdx-button__icon,
  1109. 	.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet:active .cdx-button__icon,
  1110. 	.cdx-button:enabled.cdx-button--weight-quiet.cdx-button--is-active .cdx-button__icon,
  1111. 	.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--is-active .cdx-button__icon {
  1112. 		background-color: #fff;
  1113. 	}
  1114. }
  1115.  
  1116. .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-progressive:hover,
  1117. .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive:hover {
  1118. 	background-color: #150c00;
  1119. }
  1120.  
  1121. .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-progressive:active,
  1122. .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive:active,
  1123. .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-progressive.cdx-button--is-active,
  1124. .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive.cdx-button--is-active {
  1125. 	color: #000;
  1126. }
  1127.  
  1128. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  1129. 	.cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-progressive:active .cdx-button__icon,
  1130. 	.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive:active .cdx-button__icon,
  1131. 	.cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-progressive.cdx-button--is-active .cdx-button__icon,
  1132. 	.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive.cdx-button--is-active .cdx-button__icon {
  1133. 		background-color: #000;
  1134. 	}
  1135. }
  1136.  
  1137. .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-destructive:hover,
  1138. .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-destructive:hover {
  1139. 	/* shade 6 of https://www.color-hex.com/color/fee7e6 */
  1140. 	background-color: #7f7373;
  1141. }
  1142.  
  1143. .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-destructive:active,
  1144. .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-destructive:active,
  1145. .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-destructive.cdx-button--is-active,
  1146. .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-destructive.cdx-button--is-active {
  1147. 	color: #000;
  1148. }
  1149.  
  1150. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  1151. 	.cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-destructive:active .cdx-button__icon,
  1152. 	.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-destructive:active .cdx-button__icon,
  1153. 	.cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-destructive.cdx-button--is-active .cdx-button__icon,
  1154. 	.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-destructive.cdx-button--is-active .cdx-button__icon {
  1155. 		background-color: #000;
  1156. 	}
  1157. }
  1158.  
  1159. .cdx-button:disabled,
  1160. .cdx-button.cdx-button--fake-button--disabled {
  1161. 	background-color: #37332e;
  1162. 	color: #000;
  1163. }
  1164.  
  1165. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  1166. 	.cdx-button:disabled .cdx-button__icon,
  1167. 	.cdx-button.cdx-button--fake-button--disabled .cdx-button__icon {
  1168. 		background-color: #000;
  1169. 	}
  1170. }
  1171.  
  1172. .cdx-button:disabled.cdx-button--weight-quiet,
  1173. .cdx-button.cdx-button--fake-button--disabled.cdx-button--weight-quiet {
  1174. 	color: #8d8882;
  1175. }
  1176.  
  1177. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  1178. 	.cdx-button:disabled.cdx-button--weight-quiet .cdx-button__icon,
  1179. 	.cdx-button.cdx-button--fake-button--disabled.cdx-button--weight-quiet .cdx-button__icon {
  1180. 		background-color: #8d8882;
  1181. 	}
  1182. }
  1183.  
  1184. .cdx-accordion {
  1185. 	border-bottom-color: #37332e;
  1186. }
  1187.  
  1188. .cdx-accordion>summary:hover {
  1189. 	background-color: #070605;
  1190. }
  1191.  
  1192. .cdx-accordion>summary:active {
  1193. 	background-color: #15130f;
  1194. }
  1195.  
  1196. .cdx-accordion .cdx-accordion__header__description {
  1197. 	color: #aba6a2;
  1198. }
  1199.  
  1200. @supports not (((-webkit-mask-image:none) or (mask-image:none))) {
  1201. 	.cdx-accordion>summary:before {
  1202. 		filter: invert(100%);
  1203. 	}
  1204.  
  1205. 	.cdx-button:not(.cdx-button--weight-quiet):disabled .cdx-accordion>summary:before,
  1206. 	.cdx-button--weight-primary.cdx-button--action-progressive .cdx-accordion>summary:before,
  1207. 	.cdx-button--weight-primary.cdx-button--action-destructive .cdx-accordion>summary:before {
  1208. 		filter: invert(0%);
  1209.  
  1210. 		/* keep inverted #202122 background color */
  1211. 		background-color: #dfdedd;
  1212. 	}
  1213. }
  1214.  
  1215. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  1216. 	.cdx-accordion>summary:before {
  1217. 		filter: invert(100%);
  1218.  
  1219. 		/* original background-color of #202122 */
  1220. 	}
  1221. }
  1222.  
  1223. .cdx-button-group .cdx-button:disabled {
  1224. 	box-shadow: 0 -1px #000,-1px 0 #000;
  1225. }
  1226.  
  1227. .cdx-thumbnail__placeholder,
  1228. .cdx-thumbnail__image {
  1229. 	border-color: #37332e;
  1230. }
  1231.  
  1232. .cdx-thumbnail__placeholder {
  1233. 	background-color: #070605;
  1234. }
  1235.  
  1236. @supports not (((-webkit-mask-image:none) or (mask-image:none))) {
  1237. 	.cdx-thumbnail__placeholder__icon {
  1238. 		filter: invert(100%);
  1239. 	}
  1240.  
  1241. 	.cdx-button:not(.cdx-button--weight-quiet):disabled .cdx-thumbnail__placeholder__icon,
  1242. 	.cdx-button--weight-primary.cdx-button--action-progressive .cdx-thumbnail__placeholder__icon,
  1243. 	.cdx-button--weight-primary.cdx-button--action-destructive .cdx-thumbnail__placeholder__icon {
  1244. 		filter: invert(0%);
  1245.  
  1246. 		/* keep inverted background-color of #72777d */
  1247. 		background-color: #8d8882;
  1248. 	}
  1249. }
  1250.  
  1251. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  1252. 	.cdx-thumbnail__placeholder__icon {
  1253. 		filter: invert(100%);
  1254.  
  1255. 		/* original background-color is #72777d */
  1256. 	}
  1257. }
  1258.  
  1259. .cdx-thumbnail__placeholder__icon--vue.cdx-icon {
  1260. 	color: #8d8882;
  1261. }
  1262.  
  1263. .cdx-card {
  1264. 	background-color: #000;
  1265. 	border-color: #5d564e;
  1266. }
  1267.  
  1268. .cdx-card--is-link:hover {
  1269. 	border-color: #8d8882;
  1270. }
  1271.  
  1272. .cdx-card--is-link:focus {
  1273. 	box-shadow: inset 0 0 0 1px #36c,inset 0 0 0 2px #000;
  1274. }
  1275.  
  1276. .cdx-card__text__title {
  1277. 	color: #dfdedd;
  1278. }
  1279.  
  1280. .cdx-card__text__description,
  1281. .cdx-card__text__supporting-text,
  1282. .cdx-card__text__description .cdx-icon,
  1283. .cdx-card__text__supporting-text .cdx-icon {
  1284. 	color: #aba6a2;
  1285. }
  1286.  
  1287. .cdx-label:not(.cdx-label--disabled) .cdx-label__label__optional-flag,
  1288. .cdx-label:not(.cdx-label--disabled) .cdx-label__description {
  1289. 	color: #aba6a2;
  1290. }
  1291.  
  1292. .cdx-label--disabled,
  1293. .cdx-label--disabled .cdx-label__label__icon {
  1294. 	color: #8d8882;
  1295. }
  1296.  
  1297. .cdx-checkbox__icon {
  1298. 	/* originally #fff */
  1299. 	background-color: #000;
  1300. }
  1301.  
  1302. .cdx-checkbox__input:indeterminate+.cdx-checkbox__icon:before {
  1303. 	background-color: #000;
  1304. }
  1305.  
  1306. .cdx-checkbox__input:checked:not(:indeterminate)+.cdx-checkbox__icon:before {
  1307. 	filter: invert(100%);
  1308. }
  1309.  
  1310. .cdx-checkbox__input:enabled+.cdx-checkbox__icon {
  1311. 	border-color: #8d8882;
  1312. }
  1313.  
  1314. .cdx-checkbox__input:enabled:checked:focus:not(:active)+.cdx-checkbox__icon,
  1315. .cdx-checkbox__input:enabled:indeterminate:focus:not(:active)+.cdx-checkbox__icon {
  1316. 	box-shadow:inset 0 0 0 1px #36c,inset 0 0 0 2px #000;
  1317. }
  1318.  
  1319. .cdx-checkbox__input:disabled+.cdx-checkbox__icon {
  1320. 	background-color: #37332e;
  1321. 	border-color: #37332e;
  1322. }
  1323.  
  1324. .cdx-checkbox__input:disabled~.cdx-checkbox__label,
  1325. .cdx-checkbox__input:disabled~.cdx-checkbox__label.cdx-label {
  1326. 	color: #8d8882;
  1327. }
  1328.  
  1329. .cdx-input-chip {
  1330. 	background-color: #070605;
  1331. 	color: #dfdedd;
  1332. 	border-color: #37332e;
  1333. }
  1334.  
  1335. .cdx-input-chip:not(.cdx-input-chip--disabled):hover {
  1336. 	background-color: #000;
  1337. }
  1338.  
  1339. .cdx-input-chip:not(.cdx-input-chip--disabled):active {
  1340. 	background-color: #15130f;
  1341. 	border-color: #8d8882;
  1342. }
  1343.  
  1344. .cdx-input-chip--disabled {
  1345. 	background-color: #37332e;
  1346. 	color: #000;
  1347. }
  1348.  
  1349. .cdx-input-chip--disabled .cdx-icon {
  1350. 	color: #000;
  1351. }
  1352.  
  1353. .cdx-chip-input__input::placeholder {
  1354. 	color: #8d8882;
  1355. }
  1356.  
  1357. .cdx-chip-input:not(.cdx-chip-input--disabled) .cdx-chip-input__chips,
  1358. .cdx-chip-input:not(.cdx-chip-input--disabled) .cdx-chip-input__separate-input {
  1359. 	border-color: #5d564e;
  1360. }
  1361.  
  1362. .cdx-chip-input:not(.cdx-chip-input--disabled) .cdx-chip-input__chips .cdx-chip-input__input,
  1363. .cdx-chip-input:not(.cdx-chip-input--disabled) .cdx-chip-input__separate-input .cdx-chip-input__input {
  1364. 	background-color: #000;
  1365. }
  1366.  
  1367. .cdx-chip-input:not(.cdx-chip-input--disabled) .cdx-chip-input__separate-input {
  1368. 	background-color: #000;
  1369. }
  1370.  
  1371. .cdx-chip-input:not(.cdx-chip-input--disabled):not(.cdx-chip-input--has-separate-input) .cdx-chip-input__chips {
  1372. 	background-color: #000;
  1373. }
  1374.  
  1375. .cdx-chip-input:not(.cdx-chip-input--disabled).cdx-chip-input--has-separate-input .cdx-chip-input__chips {
  1376. 	background-color: #070605;
  1377. }
  1378.  
  1379. .cdx-chip-input:not(.cdx-chip-input--disabled):not(.cdx-chip-input--has-separate-input) .cdx-chip-input__chips:hover,
  1380. .cdx-chip-input:not(.cdx-chip-input--disabled).cdx-chip-input--has-separate-input .cdx-chip-input__separate-input:hover {
  1381. 	border-color: #8d8882;
  1382. }
  1383.  
  1384. .cdx-chip-input--disabled .cdx-chip-input__chips,
  1385. .cdx-chip-input--disabled .cdx-chip-input__separate-input {
  1386. 	background-color: #15130f;
  1387. 	border-color: #37332e;
  1388. }
  1389.  
  1390. .cdx-chip-input--disabled .cdx-chip-input__chips .cdx-chip-input__input,
  1391. .cdx-chip-input--disabled .cdx-chip-input__separate-input .cdx-chip-input__input {
  1392. 	color: #8d8882;
  1393. 	-webkit-text-fill-color: #8d8882;
  1394. }
  1395.  
  1396. .cdx-menu-item--enabled,
  1397. .cdx-menu-item--enabled .cdx-menu-item__content {
  1398. 	color: #dfdedd;
  1399. }
  1400.  
  1401. .cdx-menu-item--enabled .cdx-menu-item__text__supporting-text,
  1402. .cdx-menu-item--enabled .cdx-menu-item__text__description {
  1403. 	color: #aba6a2;
  1404. }
  1405.  
  1406. .cdx-menu-item--enabled.cdx-menu-item--highlighted {
  1407. 	background-color: #15130f;
  1408. }
  1409.  
  1410. .cdx-menu-item--enabled.cdx-menu-item--active {
  1411. 	background-color: #150c00;
  1412. }
  1413.  
  1414. .cdx-menu-item--enabled.cdx-menu-item--selected {
  1415. 	background-color: #150c00;
  1416. }
  1417.  
  1418. .cdx-menu-item--disabled {
  1419. 	color: #8d8882;
  1420. }
  1421.  
  1422. .cdx-menu-item--disabled .cdx-menu-item__text__description {
  1423. 	color: #8d8882;
  1424. }
  1425.  
  1426. .cdx-progress-bar:not(.cdx-progress-bar--inline) {
  1427. 	border-color: #5d564e;
  1428. 	box-shadow:0 2px 2px rgba(255,255,255,.2);
  1429. }
  1430.  
  1431. .cdx-progress-bar:not(.cdx-progress-bar--disabled).cdx-progress-bar--block {
  1432. 	background-color: #000;
  1433. }
  1434.  
  1435. .cdx-progress-bar--disabled .cdx-progress-bar__bar {
  1436. 	background-color: #37332e;
  1437. }
  1438.  
  1439. .cdx-progress-bar--disabled:not(.cdx-progress-bar--inline) {
  1440. 	background-color: #15130f;
  1441. }
  1442.  
  1443. .cdx-menu {
  1444. 	background-color: #000;
  1445. 	border-color: #5d564e;
  1446. 	box-shadow:0 2px 2px rgba(255,255,255,.2);
  1447. }
  1448.  
  1449. .cdx-menu--has-footer .cdx-menu-item:last-of-type:not(:first-of-type) {
  1450. 	border-top-color: #37332e;
  1451. }
  1452.  
  1453. .cdx-text-input__input:enabled {
  1454. 	background-color: #000;
  1455. 	color: #dfdedd;
  1456. 	border-color: #5d564e;
  1457. }
  1458.  
  1459. .cdx-text-input__input:enabled~.cdx-text-input__icon-vue {
  1460. 	color: #8d8882;
  1461. }
  1462.  
  1463. .cdx-text-input__input:enabled:hover {
  1464. 	border-color: #8d8882;
  1465. }
  1466.  
  1467. .cdx-text-input__input:enabled:focus~.cdx-text-input__icon-vue,
  1468. .cdx-text-input__input:enabled.cdx-text-input__input--has-value~.cdx-text-input__icon-vue {
  1469. 	color: #dfdedd;
  1470. }
  1471.  
  1472. .cdx-text-input__input:enabled:read-only {
  1473. 	background-color: #070605;
  1474. }
  1475.  
  1476. .cdx-text-input__input:disabled {
  1477. 	background-color: #15130f;
  1478. 	color: #8d8882;
  1479. 	-webkit-text-fill-color: #8d8882;
  1480. 	border-color: #37332e;
  1481. }
  1482.  
  1483. .cdx-text-input__input:disabled~.cdx-text-input__icon-vue {
  1484. 	color: #8d8882;
  1485. }
  1486.  
  1487. .cdx-text-input__input::placeholder {
  1488. 	color: #8d8882;
  1489. }
  1490.  
  1491. .cdx-dialog-backdrop {
  1492. 	background-color: rgba(0,0,0,.65);
  1493. }
  1494.  
  1495. .cdx-dialog {
  1496. 	background-color: #000;
  1497. 	border-color: #5d564e;
  1498. 	box-shadow: 0 2px 2px rgba(255,255,255,.2);
  1499. }
  1500.  
  1501. .cdx-dialog__header .cdx-dialog__header__subtitle {
  1502. 	color: #aba6a2;
  1503. }
  1504.  
  1505. .cdx-dialog--dividers .cdx-dialog__header {
  1506. 	border-bottom-color: #37332e;
  1507. }
  1508.  
  1509. .cdx-dialog__footer .cdx-dialog__footer__text {
  1510. 	color: #aba6a2;
  1511. }
  1512.  
  1513. .cdx-dialog--dividers .cdx-dialog__footer {
  1514. 	border-top-color: #37332e;
  1515. }
  1516.  
  1517. .cdx-message {
  1518. 	/* shade 6 of https://www.color-hex.com/color/eaecf0 */
  1519. 	background-color: #757678;
  1520.  
  1521. 	color: #dfdedd;
  1522.  
  1523. 	/* tint 6 of https://www.color-hex.com/color/54595d */
  1524. 	border-color: #a9acae;
  1525. }
  1526.  
  1527. @supports not (((-webkit-mask-image:none) or (mask-image:none))) {
  1528. 	.cdx-message .cdx-message__icon {
  1529. 		filter: invert(100%);
  1530.  
  1531. 		/* background-color can stay as inverted #202122 */
  1532. 	}
  1533.  
  1534. 	.cdx-button:not(.cdx-button--weight-quiet):disabled .cdx-message .cdx-message__icon,
  1535. 	.cdx-button--weight-primary.cdx-button--action-progressive .cdx-message .cdx-message__icon,
  1536. 	.cdx-button--weight-primary.cdx-button--action-destructive .cdx-message .cdx-message__icon {
  1537. 		filter: invert(0%);
  1538.  
  1539. 		/* use inverted #202122 as background-color */
  1540. 		background-color: #dfdedd;
  1541. 	}
  1542. }
  1543.  
  1544. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  1545. 	.cdx-message .cdx-message__icon {
  1546. 		filter: invert(100%);
  1547.  
  1548. 		/* background-color can stay as inverted #202122 */
  1549. 	}
  1550. }
  1551.  
  1552. @supports not (((-webkit-mask-image:none) or (mask-image:none))) {
  1553. 	.cdx-message .cdx-message__icon:lang(ar) {
  1554. 		filter: invert(100%);
  1555.  
  1556. 		/* background-color can remain as inverted #202122 */
  1557. 	}
  1558.  
  1559. 	.cdx-button:not(.cdx-button--weight-quiet):disabled .cdx-message .cdx-message__icon:lang(ar),
  1560. 	.cdx-button--weight-primary.cdx-button--action-progressive .cdx-message .cdx-message__icon:lang(ar),
  1561. 	.cdx-button--weight-primary.cdx-button--action-destructive .cdx-message .cdx-message__icon:lang(ar) {
  1562. 		filter: invert(0%);
  1563.  
  1564. 		/* use inverted #202122 as background color */
  1565. 		background-color: #dfdedd;
  1566. 	}
  1567. }
  1568.  
  1569. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  1570. 	.cdx-message .cdx-message__icon:lang(ar) {
  1571. 		filter: invert(100%);
  1572.  
  1573. 		/* background-color can remain as inverted #202122 */
  1574. 	}
  1575. }
  1576.  
  1577. .cdx-message--warning {
  1578. 	/* shade 6 of https://www.color-hex.com/color/fef6e7 */
  1579. 	background-color: #7f7b73;
  1580.  
  1581. 	/* tint 6 of https://www.color-hex.com/color/a66200 */
  1582. 	border-color: #d2b07f;
  1583. }
  1584.  
  1585. @supports not (((-webkit-mask-image:none) or (mask-image:none))) {
  1586. 	.cdx-message--warning .cdx-message__icon {
  1587. 		filter: invert(100%);
  1588. 	}
  1589.  
  1590. 	.cdx-button:not(.cdx-button--weight-quiet):disabled .cdx-message--warning .cdx-message__icon,
  1591. 	.cdx-button--weight-primary.cdx-button--action-progressive .cdx-message--warning .cdx-message__icon,
  1592. 	.cdx-button--weight-primary.cdx-button--action-destructive .cdx-message--warning .cdx-message__icon {
  1593. 		filter: invert(0%);
  1594. 	}
  1595. }
  1596.  
  1597. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  1598. 	.cdx-message--warning .cdx-message__icon {
  1599. 		filter: invert(100%);
  1600.  
  1601. 		/* restore original background color of #edab00 */
  1602. 		background-color: #1254ff;
  1603. 	}
  1604. }
  1605.  
  1606. .cdx-message--warning .cdx-message__icon--vue {
  1607. 	/* color can be left as #edab00 */
  1608. 	color: #edab00
  1609. }
  1610.  
  1611. .cdx-message--error {
  1612. 	/* shade 6 of https://www.color-hex.com/color/fee7e6 */
  1613. 	background-color: #7f7373;
  1614.  
  1615. 	/* border-color can be left as #b32424 */
  1616. }
  1617.  
  1618. @supports not (((-webkit-mask-image:none) or (mask-image:none))) {
  1619. 	.cdx-message--error .cdx-message__icon {
  1620. 		filter: invert(100%);
  1621. 	}
  1622.  
  1623. 	.cdx-button:not(.cdx-button--weight-quiet):disabled .cdx-message--error .cdx-message__icon,
  1624. 	.cdx-button--weight-primary.cdx-button--action-progressive .cdx-message--error .cdx-message__icon,
  1625. 	.cdx-button--weight-primary.cdx-button--action-destructive .cdx-message--error .cdx-message__icon {
  1626. 		filter: invert(0%);
  1627. 	}
  1628. }
  1629.  
  1630. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  1631. 	.cdx-message--error .cdx-message__icon {
  1632. 		filter: invert(100%);
  1633.  
  1634. 		/* restore original background color of #d73333 */
  1635. 		background-color: #28cccc;
  1636. 	}
  1637. }
  1638.  
  1639. .cdx-message--error .cdx-message__icon--vue {
  1640. 	/* color can be left as #d73333 */
  1641. }
  1642.  
  1643. .cdx-message--success {
  1644. 	/* shade 6 of https://www.color-hex.com/color/d5fdf4 */
  1645. 	background-color: #6a7e7a;
  1646.  
  1647. 	/* tint 6 of https://www.color-hex.com/color/096450 */
  1648. 	border-color: #84b1a7;
  1649. }
  1650.  
  1651. @supports not (((-webkit-mask-image:none) or (mask-image:none))) {
  1652. 	.cdx-message--success .cdx-message__icon {
  1653. 		filter: invert(100%);
  1654. 	}
  1655.  
  1656. 	.cdx-button:not(.cdx-button--weight-quiet):disabled .cdx-message--success .cdx-message__icon,
  1657. 	.cdx-button--weight-primary.cdx-button--action-progressive .cdx-message--success .cdx-message__icon,
  1658. 	.cdx-button--weight-primary.cdx-button--action-destructive .cdx-message--success .cdx-message__icon {
  1659. 		filter: invert(0);
  1660. 	}
  1661. }
  1662.  
  1663. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  1664. 	.cdx-message--success .cdx-message__icon {
  1665. 		filter: invert(100%);
  1666.  
  1667. 		/* use original background color of #14866d */
  1668. 		background-color: #eb7992;
  1669. 	}
  1670. }
  1671.  
  1672. .cdx-message--success .cdx-message__icon--vue {
  1673. 	/* color can stay as #14866d */
  1674. }
  1675.  
  1676. .cdx-message--inline.cdx-message--error {
  1677. 	/* color can stay as #d73333 */
  1678. }
  1679.  
  1680. .cdx-message--inline.cdx-message--success {
  1681. 	/* color can stay as #14866d */
  1682. }
  1683.  
  1684. .cdx-field:not(.cdx-field--disabled) .cdx-field__help-text {
  1685. 	color: #aba6a2;
  1686. }
  1687.  
  1688. .cdx-field--disabled .cdx-field__help-text {
  1689. 	color: #8d8882;
  1690. }
  1691.  
  1692. .cdx-info-chip {
  1693. 	border-color: #37332e;
  1694. }
  1695.  
  1696. .cdx-info-chip--text {
  1697. 	color: #aba6a2;
  1698. }
  1699.  
  1700. .cdx-info-chip__icon--notice.cdx-icon {
  1701. 	color: #dfdedd;
  1702. }
  1703.  
  1704. .cdx-info-chip__icon--error.cdx-icon {
  1705. 	/* color can stay as #d73333 */
  1706. }
  1707.  
  1708. .cdx-info-chip__icon--warning.cdx-icon {
  1709. 	/* color can stay as color #edab00 */
  1710. }
  1711.  
  1712. .cdx-info-chip__icon--success.cdx-icon {
  1713. 	/* color can stay as #14866d */
  1714. }
  1715.  
  1716. .cdx-lookup--pending .cdx-text-input .cdx-text-input__input {
  1717. 	background-color: #15130f;
  1718. 	background-image:linear-gradient(135deg,#000 25%,transparent 25%,transparent 50%,#000 50%,#000 75%,transparent 75%,transparent);
  1719. }
  1720.  
  1721. .cdx-radio__icon {
  1722. 	background-color: #000;
  1723. }
  1724.  
  1725. .cdx-radio__input:enabled+.cdx-radio__icon {
  1726. 	border-color: #8d8882;
  1727. }
  1728.  
  1729. .cdx-radio__input:enabled:checked:focus+.cdx-radio__icon:before {
  1730. 	border-color: #000;
  1731. }
  1732.  
  1733. .cdx-radio__input:enabled:checked:active+.cdx-radio__icon {
  1734. 	background-color: #000;
  1735. }
  1736.  
  1737. .cdx-radio__input:disabled~.cdx-radio__label,
  1738. .cdx-radio__input:disabled~.cdx-radio__label.cdx-label {
  1739. 	color: #8d8882;
  1740. }
  1741.  
  1742. .cdx-radio__input:disabled+.cdx-radio__icon {
  1743. 	background-color: #37332e;
  1744. 	border-color: #37332e;
  1745. }
  1746.  
  1747. .cdx-search-input--has-end-button {
  1748. 	background-color: #000;
  1749. 	border-color: #5d564e;
  1750. }
  1751.  
  1752. @supports not (((-webkit-mask-image:none) or (mask-image:none))) {
  1753. 	.cdx-search-input .cdx-text-input__icon.cdx-text-input__start-icon {
  1754. 		filter: invert(100%);
  1755. 	}
  1756.  
  1757. 	.cdx-button:not(.cdx-button--weight-quiet):disabled .cdx-search-input .cdx-text-input__icon.cdx-text-input__start-icon,
  1758. 	.cdx-button--weight-primary.cdx-button--action-progressive .cdx-search-input .cdx-text-input__icon.cdx-text-input__start-icon,
  1759. 	.cdx-button--weight-primary.cdx-button--action-destructive .cdx-search-input .cdx-text-input__icon.cdx-text-input__start-icon {
  1760. 		filter: invert(0%);
  1761. 	}
  1762. }
  1763.  
  1764. @supports ((-webkit-mask-image:none) or (mask-image:none)) {
  1765. 	.cdx-search-input .cdx-text-input__icon.cdx-text-input__start-icon {
  1766. 		filter: invert(100%);
  1767.  
  1768. 		/* background-color can stay as inverted #202122 */
  1769. 	}
  1770. }
  1771.  
  1772. .cdx-select:disabled {
  1773. 	filter: invert(100%);
  1774.  
  1775. 	/*
  1776. 	these can stay as inverted:
  1777. 	background-color: #eaecf0;
  1778. 	color: #72777d;
  1779. 	border-color: #c8ccd1;
  1780. 	*/
  1781. }
  1782.  
  1783. .cdx-select:enabled {
  1784. 	filter: invert(100%);
  1785.  
  1786. 	/*
  1787. 	these can stay as inverted:
  1788. 	background-color: #f8f9fa;
  1789. 	color: #202122;
  1790. 	border-color: #a2a9b1;
  1791. 	*/
  1792. }
  1793.  
  1794. .cdx-select:enabled:hover {
  1795. 	background-color: #000;
  1796. 	color: #bfbdbb;
  1797. 	border-color: #5d564e;
  1798. }
  1799.  
  1800. .cdx-select:enabled:active {
  1801. 	color: #fff;
  1802. 	border-color: #8d8882;
  1803. }
  1804.  
  1805. .cdx-select-vue__indicator.cdx-icon {
  1806. 	color: #dfdedd;
  1807. }
  1808.  
  1809. .cdx-select-vue--enabled .cdx-select-vue__handle {
  1810. 	background-color: #070605;
  1811. 	color: #dfdedd;
  1812. 	border-color: #5d564e;
  1813. }
  1814.  
  1815. .cdx-select-vue--enabled .cdx-select-vue__handle:hover {
  1816. 	background-color: #000;
  1817. 	color: #bfbdbb;
  1818. 	border-color: #5d564e;
  1819. }
  1820.  
  1821. .cdx-select-vue--enabled .cdx-select-vue__handle:active {
  1822. 	color: #fff;
  1823. 	border-color: #8d8882;
  1824. }
  1825.  
  1826. .cdx-select-vue--enabled .cdx-select-vue__handle:hover .cdx-select-vue__indicator {
  1827. 	color: #bfbdbb;
  1828. }
  1829.  
  1830. .cdx-select-vue--enabled.cdx-select-vue--expanded .cdx-select-vue__handle {
  1831. 	background-color: #000;
  1832. }
  1833.  
  1834. .cdx-select-vue--enabled.cdx-select-vue--expanded .cdx-select-vue__handle .cdx-select-vue__indicator {
  1835. 	color: #dfdedd;
  1836. }
  1837.  
  1838. .cdx-select-vue--disabled .cdx-select-vue__handle {
  1839. 	background-color: #15130f;
  1840. 	color: #8d8882;
  1841. 	border-color: #37332e;
  1842. }
  1843.  
  1844. .cdx-select-vue--disabled .cdx-select-vue__indicator,
  1845. .cdx-select-vue--disabled .cdx-select-vue__start-icon {
  1846. 	color: #8d8882;
  1847. }
  1848.  
  1849. .cdx-select-vue--status-error.cdx-select-vue--enabled .cdx-select-vue__handle {
  1850. 	/* can stay as border-color: #b32424 */
  1851. }
  1852.  
  1853. .cdx-select-vue--status-error.cdx-select-vue--enabled .cdx-select-vue__handle:focus {
  1854. 	/* can stay as border-color: #36c */
  1855. }
  1856.  
  1857. .cdx-tabs--framed>.cdx-tabs__header {
  1858. 	background-color: #15130f;
  1859. }
  1860.  
  1861. .cdx-tabs--framed>.cdx-tabs__header .cdx-tabs__prev-scroller:after {
  1862. 	background-image: linear-gradient(to right,#15130f 0,transparent 100%);
  1863. }
  1864.  
  1865. .cdx-tabs--framed>.cdx-tabs__header .cdx-tabs__next-scroller:before {
  1866. 	background-image :linear-gradient(to left,#15130f 0,transparent 100%);
  1867. }
  1868.  
  1869. .cdx-tabs--framed>.cdx-tabs__header .cdx-tabs__list__item:enabled:hover {
  1870. 	background-color: rgba(0,0,0,.3);
  1871. 	color: #dfdedd;
  1872. }
  1873.  
  1874. .cdx-tabs--framed>.cdx-tabs__header .cdx-tabs__list__item:enabled:active {
  1875. 	background-color: rgba(0,0,0,.65);
  1876. 	color: #dfdedd;
  1877. }
  1878.  
  1879. .cdx-tabs--framed>.cdx-tabs__header .cdx-tabs__list__item[aria-selected=true],
  1880. .cdx-tabs--framed>.cdx-tabs__header .cdx-tabs__list__item[aria-selected=true]:hover {
  1881. 	background-color: #000;
  1882. }
  1883.  
  1884. .cdx-tabs--framed>.cdx-tabs__header .cdx-tabs__list__item:disabled {
  1885. 	background-color: #15130f;
  1886. 	color: #8d8882;
  1887. }
  1888.  
  1889. .cdx-tabs:not(.cdx-tabs--framed)>.cdx-tabs__header {
  1890. 	background-color: #000;
  1891. 	border-bottom-color: #5d564e;
  1892. }
  1893.  
  1894. .cdx-tabs:not(.cdx-tabs--framed)>.cdx-tabs__header .cdx-tabs__prev-scroller:after {
  1895. 	background-image:linear-gradient(to right,#000 0,transparent 100%)
  1896. }
  1897.  
  1898. .cdx-tabs:not(.cdx-tabs--framed)>.cdx-tabs__header .cdx-tabs__next-scroller:before {
  1899. 	background-image:linear-gradient(to left,#000 0,transparent 100%)
  1900. }
  1901.  
  1902. .cdx-tabs:not(.cdx-tabs--framed)>.cdx-tabs__header .cdx-tabs__list__item:enabled {
  1903. 	color: #dfdedd;
  1904. }
  1905.  
  1906. .cdx-tabs:not(.cdx-tabs--framed)>.cdx-tabs__header .cdx-tabs__list__item:disabled {
  1907. 	color: #8d8882;
  1908. }
  1909.  
  1910. .cdx-text-area__textarea:enabled {
  1911. 	background-color: #000;
  1912. 	color: #dfdedd;
  1913. 	border-color: #5d564e;
  1914. }
  1915.  
  1916. .cdx-text-area__textarea:enabled~.cdx-text-area__icon-vue.cdx-icon {
  1917. 	color: #8d8882;
  1918. }
  1919.  
  1920. .cdx-text-area__textarea:enabled:hover {
  1921. 	color: #8d8882;
  1922. }
  1923.  
  1924. .cdx-text-area__textarea:enabled:focus~.cdx-text-area__icon-vue.cdx-icon,
  1925. .cdx-text-area__textarea:enabled.cdx-text-area__textarea--has-value~.cdx-text-area__icon-vue.cdx-icon {
  1926. 	color: #dfdedd;
  1927. }
  1928.  
  1929. .cdx-text-area__textarea:enabled:read-only {
  1930. 	background-color: #070605;
  1931. }
  1932.  
  1933. .cdx-text-area__textarea:disabled {
  1934. 	background-color: #15130f;
  1935. 	color: #8d8882;
  1936. 	border-color: #37332e;
  1937. }
  1938.  
  1939. .cdx-text-area__textarea:disabled~.cdx-text-area__icon-vue.cdx-icon {
  1940. 	color: #8d8882;
  1941. }
  1942.  
  1943. .cdx-text-area__textarea::placeholder {
  1944. 	color: #8d8882;
  1945. }
  1946.  
  1947. .cdx-text-area--status-error .cdx-text-area__textarea:enabled:not(:read-only) {
  1948. 	/* can stay as border-color: #b32424; */
  1949. }
  1950.  
  1951. .cdx-text-area--status-error .cdx-text-area__textarea:enabled:not(:read-only):focus {
  1952. 	/* can stay as 	border-color: #36c; */
  1953. }
  1954.  
  1955. .cdx-toggle-button:enabled {
  1956. 	color: #dfdedd;
  1957. }
  1958.  
  1959. .cdx-toggle-button:enabled:active,
  1960. .cdx-toggle-button:enabled.cdx-toggle-button--is-active {
  1961. 	color: #fff;
  1962. 	background-color: #8d8882;
  1963. }
  1964.  
  1965. .cdx-toggle-button--framed:enabled {
  1966. 	background-color: #070605;
  1967. 	border-color: #5d564e;
  1968. }
  1969.  
  1970. .cdx-toggle-button--framed:enabled:hover {
  1971. 	background-color: #000;
  1972. 	color: #bfbdbb;
  1973. }
  1974.  
  1975. .cdx-toggle-button--framed:enabled:active,
  1976. .cdx-toggle-button--framed:enabled.cdx-toggle-button--is-active {
  1977. 	background-color: #15130f;
  1978. }
  1979.  
  1980. .cdx-toggle-button--framed:disabled {
  1981. 	background-color: #37332e;
  1982. 	color: #000;
  1983. 	border-color: #37332e;
  1984. }
  1985.  
  1986. .cdx-toggle-button--framed.cdx-toggle-button--toggled-on:enabled:focus {
  1987. 	box-shadow:inset 0 0 0 1px #36c,inset 0 0 0 2px #000;
  1988. }
  1989.  
  1990. .cdx-toggle-button--framed.cdx-toggle-button--toggled-on:enabled:active,
  1991. .cdx-toggle-button--framed.cdx-toggle-button--toggled-on:enabled.cdx-toggle-button--is-active {
  1992. 	background-color: #15130f;
  1993. 	color: #000;
  1994. 	border-color: #8d8882;
  1995. }
  1996.  
  1997. .cdx-toggle-button--quiet:enabled.cdx-toggle-button--toggled-on {
  1998. 	background-color: #15130f;
  1999. }
  2000.  
  2001. .cdx-toggle-button--quiet:enabled:hover {
  2002. 	background-color: #070605;
  2003. }
  2004.  
  2005. .cdx-toggle-button--quiet:enabled:focus {
  2006. 	background-color: #070605;
  2007. }
  2008.  
  2009. .cdx-toggle-button--quiet:enabled:active,
  2010. .cdx-toggle-button--quiet:enabled.cdx-toggle-button--is-active {
  2011. 	background-color: #15130f;
  2012. }
  2013.  
  2014. .cdx-toggle-button--quiet:disabled {
  2015. 	color: #8d8882;
  2016. }
  2017.  
  2018. .cdx-toggle-button-group .cdx-toggle-button:disabled {
  2019. 	box-shadow: 0 -1px #000,-1px 0 #000;
  2020. }
  2021.  
  2022. .cdx-toggle-button-group .cdx-toggle-button--toggled-on:enabled {
  2023. 	box-shadow: 0 -1px #000,-1px 0 #000;	
  2024. }
  2025.  
  2026. .cdx-toggle-button-group .cdx-toggle-button--toggled-on:enabled:focus {
  2027. 	box-shadow: inset 0 0 0 1px #36c,inset 0 0 0 2px #000,0 0 0 1px #000;
  2028. }
  2029.  
  2030. .cdx-toggle-switch__switch {
  2031. 	background-color: #070605;
  2032. 	border-color: #8d8882;
  2033. }
  2034.  
  2035. .cdx-toggle-switch__switch__grip {
  2036. 	border-color: #8d8882;
  2037. }
  2038.  
  2039. .cdx-toggle-switch__input:checked~.cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip {
  2040. 	background-color: #000;
  2041. 	border-color: #000;
  2042. }
  2043.  
  2044. .cdx-toggle-switch__input:enabled~.cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip {
  2045. 	background-color: #070605;
  2046. }
  2047.  
  2048. .cdx-toggle-switch__input:enabled:hover~.cdx-toggle-switch__switch {
  2049. 	background-color: #000;
  2050. }
  2051.  
  2052. .cdx-toggle-switch__input:enabled:hover~.cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip {
  2053. 	background-color: #000;
  2054. }
  2055.  
  2056. .cdx-toggle-switch__input:enabled:active~.cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip {
  2057. 	border-color: #000;
  2058. }
  2059.  
  2060. .cdx-toggle-switch__input:enabled:checked~.cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip {
  2061. 	border-color: #000;
  2062. }
  2063.  
  2064. .cdx-toggle-switch__input:enabled:checked:active~.cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip {
  2065. 	background-color: #000;
  2066. 	border-color: #000;
  2067. }
  2068.  
  2069. .cdx-toggle-switch__input:enabled:checked:focus:not(:active)~.cdx-toggle-switch__switch:before,
  2070. .cdx-toggle-switch__input:enabled:checked:focus:not(:active)~.cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip {
  2071. 	border-color: #000;
  2072. }
  2073.  
  2074. .cdx-toggle-switch__input:disabled~.cdx-toggle-switch__switch {
  2075. 	background-color: #37332e;
  2076. 	border-color: #37332e;
  2077. }
  2078.  
  2079. .cdx-toggle-switch__input:disabled~.cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip {
  2080. 	border-color: #000;
  2081. 	box-shadow: inset 0 0 0 1px #000;
  2082. }
  2083.  
  2084. .cdx-toggle-switch__input:disabled:checked~.cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip {
  2085. 	background-color: #000;
  2086. }
  2087.  
  2088. .cdx-typeahead-search__search-footer.cdx-menu-item:visited {
  2089. 	color: #dfdedd;
  2090. }
  2091.  
  2092. .cdx-typeahead-search__search-footer__icon.cdx-icon {
  2093. 	color: #aba6a2;
  2094. }
  2095.  
  2096. .mw-htmlform-invalid-input td.mw-input input {
  2097. 	/* can stay as border-color: #d73333; */
  2098. }
  2099.  
  2100. .mw-icon-question {
  2101. 	filter: invert(100%);
  2102. }
  2103.  
  2104. .mw-htmlform .mw-secure {
  2105. 	filter: invert(1900%);
  2106. }
  2107.  
  2108. .fancycaptcha-captcha-container {
  2109. 	background-color: #070605;
  2110. 	border-color: #37332e;
  2111. }
  2112.  
  2113. .fancycaptcha-captcha-and-reload {
  2114. 	border-color: #37332e;
  2115. 	background-color: #000;
  2116. }
  2117.  
  2118. .fancycaptcha-captcha-container .mw-ui-input {
  2119. 	border-color: #37332e;
  2120. }
  2121.  
  2122. @supports not ((-webkit-mask-image:none) or (mask-image:none)) {
  2123. 	.cdx-message .mw-userLogin-icon--user-temporary {
  2124. 		filter: invert(100%);
  2125. 	}
  2126.  
  2127. 	.cdx-button:not(.cdx-button--weight-quiet):disabled .cdx-message .mw-userLogin-icon--user-temporary,
  2128. 	.cdx-button--weight-primary.cdx-button--action-progressive .cdx-message .mw-userLogin-icon--user-temporary,
  2129. 	.cdx-button--weight-primary.cdx-button--action-destructive .cdx-message .mw-userLogin-icon--user-temporary {
  2130. 		filter: invert(0%);
  2131. 	}
  2132. }
  2133.  
  2134. @supports (-webkit-mask-image:none) or (mask-image:none) {
  2135. 	.cdx-message .mw-userLogin-icon--user-temporary {
  2136. 		filter: invert(100%);
  2137.  
  2138. 		/* background-color can stay as inverted #202122 */
  2139. 	}
  2140. }
  2141.  
  2142. #mw-createaccount-cta {
  2143. 	/* dont filter: invert(100%); */
  2144. 	/* the image cannot be found anyway */
  2145. 	/* causes negative impact if filter is applied */
  2146. }
  2147.  
  2148. /* should be fine to ignore after 3227 as it repeats the first style */
  2149.  
  2150. /* inline stylesheet 1 563 rules */
  2151.  
  2152. .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
  2153. 	color: #dfdedd;
  2154. }
  2155.  
  2156. .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
  2157. 	background-color: rgba(255, 231, 182, 0.027);
  2158. 	color: #fff;
  2159. }
  2160.  
  2161. .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > input.oo-ui-buttonElement-button,
  2162. .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active {
  2163. 	background-color: rgba(255, 231, 182, 0.082);
  2164. 	color: #fff;
  2165. 	border-color: #8d8882;
  2166. }
  2167.  
  2168. .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
  2169. 	background-color: #37332e;
  2170. 	color: #000;
  2171. 	border-color: #37332e;
  2172. }
  2173.  
  2174. .oo-ui-buttonElement-framed.oo-ui-widget-disabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
  2175. 	background-color: #6e6046;
  2176. }
  2177.  
  2178. .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
  2179. 	background-color: #070605;
  2180. 	color: #dfdedd;
  2181. 	border-color: #5d564e;
  2182. }
  2183.  
  2184. .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
  2185. 	background-color: #000;
  2186. 	color: #bfbdbb;
  2187. 	border-color: #5d564e;
  2188. }
  2189.  
  2190. .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button:focus {
  2191. 	box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #000;
  2192. }
  2193.  
  2194. .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active,
  2195. .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
  2196. 	background-color: #15130f;
  2197. 	color: #fff;
  2198. 	border-color: #8d8882;
  2199. }
  2200.  
  2201. .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
  2202. 	background-color: #000;
  2203. }
  2204.  
  2205. .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active,
  2206. .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button,
  2207. .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button,
  2208. .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button {
  2209. 	background-color: #100c05;
  2210. }
  2211.  
  2212. .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover {
  2213. 	background-color: #000;
  2214. }
  2215.  
  2216. .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:active,
  2217. .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button,
  2218. .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button,
  2219. .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button {
  2220. 	background-color: #000;
  2221. }
  2222.  
  2223. .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus {
  2224. 	box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #000;
  2225. }
  2226.  
  2227. .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:focus {
  2228. 	box-shadow: inset 0 0 0 1px #d73333, inset 0 0 0 2px #000;
  2229. }
  2230.  
  2231. /* not sure if these need to be inverted */
  2232. /*
  2233. @media (forced-colors: active) and (prefers-color-scheme: dark) {
  2234. 	.oo-ui-iconElement-icon:not(.oo-ui-image-invert) {
  2235. 		filter: invert(1) hue-rotate(180deg);
  2236. 	}
  2237. }
  2238.  
  2239. @media (forced-colors: active) and (prefers-color-scheme: dark) {
  2240. 	.oo-ui-indicatorElement-indicator:not(.oo-ui-image-invert) {
  2241. 		filter: invert(1) hue-rotate(180deg);
  2242. 	}
  2243. }
  2244. */
  2245.  
  2246. .oo-ui-pendingElement-pending {
  2247. 	background-color: #15130f;
  2248. 	background-image: linear-gradient(135deg,#000 25%,transparent 25%,transparent 50%,#000 50%,#000 75%,transparent 75%,transparent);
  2249. }
  2250.  
  2251. .oo-ui-fieldLayout-disabled > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header > .oo-ui-labelElement-label {
  2252. 	color: #8d8882;
  2253. }
  2254.  
  2255. .oo-ui-panelLayout-framed {
  2256. 	border-color: #5d564e;
  2257. }
  2258.  
  2259. .oo-ui-optionWidget.oo-ui-widget-disabled {
  2260. 	color: #8d8882;
  2261. }
  2262.  
  2263. .oo-ui-radioSelectWidget:focus [type="radio"]:checked + span::before {
  2264. 	border-color: #000;
  2265. }
  2266.  
  2267. .oo-ui-labelWidget.oo-ui-inline-help {
  2268. 	color: #aba6a2;
  2269. }
  2270.  
  2271. .oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed.oo-ui-widget-disabled + .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
  2272. 	border-left-color: #000;
  2273. }
  2274.  
  2275. .oo-ui-buttonGroupWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-toggleWidget-on + .oo-ui-toggleWidget-on > .oo-ui-buttonElement-button,
  2276. .oo-ui-buttonGroupWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-toggleWidget-on + .oo-ui-toggleWidget-on > .oo-ui-buttonElement-button:active {
  2277. 	border-left-color: #5d564e;
  2278. }
  2279.  
  2280. .oo-ui-checkboxInputWidget [type="checkbox"] + span {
  2281. 	background-color: #000;
  2282. 	border-color: #8d8882;
  2283. }
  2284.  
  2285. .oo-ui-checkboxInputWidget [type="checkbox"]:indeterminate + span::before {
  2286. 	background-color: #000;
  2287. }
  2288.  
  2289. .oo-ui-checkboxInputWidget [type="checkbox"]:disabled + span {
  2290. 	background-color: #37332e;
  2291. 	border-color: #37332e;
  2292. }
  2293.  
  2294. .oo-ui-checkboxInputWidget.oo-ui-widget-enabled[type="checkbox"]:checked:focus + span,
  2295. .oo-ui-checkboxInputWidget.oo-ui-widget-enabled[type="checkbox"]:indeterminate:focus + span {
  2296. 	box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #000;
  2297. }
  2298.  
  2299. .oo-ui-icon-alert,
  2300. .mw-ui-icon-alert:before {
  2301. 	filter: invert(100%);
  2302. }
  2303.  
  2304. .oo-ui-image-invert.oo-ui-icon-alert,
  2305. .mw-ui-icon-alert-invert:before {
  2306. 	filter: invert(100%);
  2307. }
  2308.  
  2309. .oo-ui-image-progressive.oo-ui-icon-alert,
  2310. .mw-ui-icon-alert-progressive:before {
  2311. 	filter: invert(100%);
  2312. }
  2313.  
  2314. .oo-ui-image-warning.oo-ui-icon-alert,
  2315. .mw-ui-icon-alert-warning:before {
  2316. 	filter: invert(100%);
  2317. }
  2318.  
  2319. .oo-ui-icon-error,
  2320. .mw-ui-icon-error:before {
  2321. 	filter: invert(100%);
  2322. }
  2323.  
  2324. .oo-ui-image-invert.oo-ui-icon-error,
  2325. .mw-ui-icon-error-invert:before {
  2326. 	filter: invert(100%);
  2327. }
  2328.  
  2329. .oo-ui-image-progressive.oo-ui-icon-error,
  2330. .mw-ui-icon-error-progressive:before {
  2331. 	filter: invert(100%);
  2332. }
  2333.  
  2334. .oo-ui-image-error.oo-ui-icon-error,
  2335. .mw-ui-icon-error-error:before {
  2336. 	filter: invert(100%);
  2337. }
  2338.  
  2339. .oo-ui-icon-success,
  2340. .mw-ui-icon-success:before {
  2341. 	filter: invert(100%);
  2342. }
  2343.  
  2344. .oo-ui-image-invert.oo-ui-icon-success,
  2345. .mw-ui-icon-success-invert:before {
  2346. 	filter: invert(100%);
  2347. }
  2348.  
  2349. .oo-ui-image-progressive.oo-ui-icon-success,
  2350. .mw-ui-icon-success-progressive:before {
  2351. 	filter: invert(100%);
  2352. }
  2353.  
  2354. .oo-ui-image-success.oo-ui-icon-success,
  2355. .mw-ui-icon-success-success:before {
  2356. 	filter: invert(100%);
  2357. }
  2358.  
  2359. .oo-ui-icon-info,
  2360. .mw-ui-icon-info:before {
  2361. 	filter: invert(100%);
  2362. }
  2363.  
  2364. .oo-ui-image-invert.oo-ui-icon-info,
  2365. .mw-ui-icon-info-invert:before {
  2366. 	filter: invert(100%);
  2367. }
  2368.  
  2369. .oo-ui-image-progressive.oo-ui-icon-info,
  2370. .mw-ui-icon-info-progressive:before {
  2371. 	filter: invert(100%);
  2372. }
  2373.  
  2374. .oo-ui-icon-infoFilled,
  2375. .mw-ui-icon-infoFilled:before {
  2376. 	filter: invert(100%);
  2377. }
  2378.  
  2379. .oo-ui-image-invert.oo-ui-icon-infoFilled,
  2380. .mw-ui-icon-infoFilled-invert:before {
  2381. 	filter: invert(100%);
  2382. }
  2383.  
  2384. .oo-ui-image-progressive.oo-ui-icon-infoFilled,
  2385. .mw-ui-icon-infoFilled-progressive:before {
  2386. 	filter: invert(100%);
  2387. }
  2388.  
  2389. .oo-ui-icon-add,
  2390. .mw-ui-icon-add:before {
  2391. 	filter: invert(100%);
  2392. }
  2393.  
  2394. .oo-ui-image-invert.oo-ui-icon-add,
  2395. .mw-ui-icon-add-invert:before {
  2396. 	filter: invert(100%);
  2397. }
  2398.  
  2399. .oo-ui-image-progressive.oo-ui-icon-add,
  2400. .mw-ui-icon-add-progressive:before {
  2401. 	filter: invert(100%);
  2402. }
  2403.  
  2404. .oo-ui-icon-check,
  2405. .mw-ui-icon-check:before {
  2406. 	filter: invert(100%);
  2407. }
  2408.  
  2409. .oo-ui-image-invert.oo-ui-icon-check,
  2410. .mw-ui-icon-check-invert:before {
  2411. 	filter: invert(100%);
  2412. }
  2413.  
  2414. .oo-ui-image-progressive.oo-ui-icon-check,
  2415. .mw-ui-icon-check-progressive:before {
  2416. 	filter: invert(100%);
  2417. }
  2418.  
  2419. .oo-ui-image-destructive.oo-ui-icon-check,
  2420. .mw-ui-icon-check-destructive:before {
  2421. 	filter: invert(100%);
  2422. }
  2423.  
  2424. .oo-ui-image-success.oo-ui-icon-check,
  2425. .mw-ui-icon-check-success:before {
  2426. 	filter: invert(100%);
  2427. }
  2428.  
  2429. .oo-ui-icon-close,
  2430. .mw-ui-icon-close:before {
  2431. 	filter: invert(100%);
  2432. }
  2433.  
  2434. .oo-ui-image-invert.oo-ui-icon-close,
  2435. .mw-ui-icon-close-invert:before {
  2436. 	filter: invert(100%);
  2437. }
  2438.  
  2439. .oo-ui-image-progressive.oo-ui-icon-close,
  2440. .mw-ui-icon-close-progressive:before {
  2441. 	filter: invert(100%);
  2442. }
  2443.  
  2444. .oo-ui-icon-search,
  2445. .mw-ui-icon-search:before {
  2446. 	filter: invert(100%);
  2447. }
  2448.  
  2449. .oo-ui-image-invert.oo-ui-icon-search,
  2450. .mw-ui-icon-search-invert:before {
  2451. 	filter: invert(100%);
  2452. }
  2453.  
  2454. .oo-ui-image-progressive.oo-ui-icon-search,
  2455. .mw-ui-icon-search-progressive:before {
  2456. 	filter: invert(100%);
  2457. }
  2458.  
  2459. .oo-ui-icon-subtract,
  2460. .mw-ui-icon-subtract:before {
  2461. 	filter: invert(100%);
  2462. }
  2463.  
  2464. .oo-ui-image-invert.oo-ui-icon-subtract,
  2465. .mw-ui-icon-subtract-invert:before {
  2466. 	filter: invert(100%);
  2467. }
  2468.  
  2469. .oo-ui-image-progressive.oo-ui-icon-subtract,
  2470. .mw-ui-icon-subtract-progressive:before {
  2471. 	filter: invert(100%);
  2472. }
  2473.  
  2474. .oo-ui-image-destructive.oo-ui-icon-subtract,
  2475. .mw-ui-icon-subtract-destructive:before {
  2476. 	filter: invert(100%);
  2477. }
  2478.  
  2479. .oo-ui-indicator-clear {
  2480. 	filter: invert(100%);
  2481. }
  2482.  
  2483. .oo-ui-image-invert.oo-ui-indicator-clear {
  2484. 	filter: invert(100%);
  2485. }
  2486.  
  2487. .oo-ui-indicator-up {
  2488. 	filter: invert(100%);
  2489. }
  2490.  
  2491. .oo-ui-image-invert.oo-ui-indicator-up {
  2492. 	filter: invert(100%);
  2493. }
  2494.  
  2495. .oo-ui-indicator-down {
  2496. 	filter: invert(100%);
  2497. }
  2498.  
  2499. .oo-ui-image-invert.oo-ui-indicator-down {
  2500. 	filter: invert(100%);
  2501. }
  2502.  
  2503. .oo-ui-indicator-required {
  2504. 	filter: invert(100%);
  2505. }
  2506.  
  2507. .oo-ui-image-invert.oo-ui-indicator-required {
  2508. 	filter: invert(100%);
  2509. }
  2510.  
  2511. /* inline stylesheet 2 19 rules */
  2512.  
  2513. .oo-ui-icon-upload,
  2514. .mw-ui-icon-upload:before {
  2515. 	filter: invert(100%);
  2516. }
  2517.  
  2518. .oo-ui-image-invert.oo-ui-icon-upload,
  2519. .mw-ui-icon-upload-invert:before {
  2520. 	filter: invert(100%);
  2521. }
  2522.  
  2523. .oo-ui-image-progressive.oo-ui-icon-upload,
  2524. .mw-ui-icon-upload-progressive:before {
  2525. 	filter: invert(100%);
  2526. }
  2527.  
  2528. .oo-ui-icon-attachment,
  2529. .mw-ui-icon-attachment:before {
  2530. 	filter: invert(100%);
  2531. }
  2532.  
  2533. .oo-ui-image-invert.oo-ui-icon-attachment,
  2534. .mw-ui-icon-attachment-invert:before {
  2535. 	filter: invert(100%);
  2536. }
  2537.  
  2538. .oo-ui-image-progressive.oo-ui-icon-attachment,
  2539. .mw-ui-icon-attachment-progressive:before {
  2540. 	filter: invert(100%);
  2541. }
  2542.  
  2543. .oo-ui-icon-trash,
  2544. .mw-ui-icon-trash:before {
  2545. 	filter: invert(100%);
  2546. }
  2547.  
  2548. .oo-ui-image-invert.oo-ui-icon-trash,
  2549. .mw-ui-icon-trash-invert:before {
  2550. 	filter: invert(100%);
  2551. }
  2552.  
  2553. .oo-ui-image-progressive.oo-ui-icon-trash,
  2554. .mw-ui-icon-trash-progressive:before {
  2555. 	filter: invert(100%);
  2556. }
  2557.  
  2558. .oo-ui-image-destructive.oo-ui-icon-trash,
  2559. .mw-ui-icon-trash-destructive:before {
  2560. 	filter: invert(100%);
  2561. }
  2562.  
  2563. .oo-ui-icon-collapse,
  2564. .mw-ui-icon-collapse:before {
  2565. 	filter: invert(100%);
  2566. }
  2567.  
  2568. .oo-ui-image-invert.oo-ui-icon-collapse,
  2569. .mw-ui-icon-collapse-invert:before {
  2570. 	filter: invert(100%);
  2571. }
  2572.  
  2573. .oo-ui-image-progressive.oo-ui-icon-collapse,
  2574. .mw-ui-icon-collapse-progressive:before {
  2575. 	filter: invert(100%);
  2576. }
  2577.  
  2578. .oo-ui-icon-expand,
  2579. .mw-ui-icon-expand:before {
  2580. 	filter: invert(100%);
  2581. }
  2582.  
  2583. .oo-ui-image-invert.oo-ui-icon-expand,
  2584. .mw-ui-icon-expand-invert:before {
  2585. 	filter: invert(100%);
  2586. }
  2587.  
  2588. .oo-ui-image-progressive.oo-ui-icon-expand,
  2589. .mw-ui-icon-expand-progressive:before {
  2590. 	filter: invert(100%);
  2591. }
  2592.  
  2593. /* inline stylesheet 3 162 rules */
  2594.  
  2595. .oo-ui-bookletLayout-outlinePanel > .oo-ui-outlineControlsWidget {
  2596. 	border-top-color: #37332e;
  2597. }
  2598.  
  2599. .oo-ui-bookletLayout > .oo-ui-menuLayout-menu {
  2600. 	border-right-color: #37332e;
  2601. }
  2602.  
  2603. .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget.oo-ui-widget-disabled + .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
  2604. 	border-left-color: #000;
  2605. }
  2606.  
  2607. .oo-ui-buttonSelectWidget.oo-ui-widget-enabled:focus .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected .oo-ui-buttonElement-button {
  2608. 	box-shadow: inset 0 0 0 1px #36c,inset 0 0 0 2px #000;
  2609. }
  2610.  
  2611. .oo-ui-toggleButtonWidget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-toggleWidget-on .oo-ui-buttonElement-button {
  2612. 	background-color: rgba(255,231,182,0.082);
  2613. 	color: #fff;
  2614. }
  2615.  
  2616. .oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted {
  2617. 	background-color: #15130f;
  2618. 	color: #fff;
  2619. }
  2620.  
  2621. .oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected,
  2622. .oo-ui-outlineOptionWidget.oo-ui-optionWidget-pressed {
  2623. 	background-color: #150c00;
  2624. }
  2625.  
  2626. .oo-ui-outlineControlsWidget {
  2627. 	background-color: #000;
  2628. }
  2629.  
  2630. .oo-ui-tabSelectWidget-framed {
  2631. 	background-color: #15130f;
  2632. }
  2633.  
  2634. .oo-ui-tabSelectWidget-frameless {
  2635. 	box-shadow: inset 0 -1px 0 0 #5d564e;
  2636. }
  2637.  
  2638. .oo-ui-tabSelectWidget-mobile.oo-ui-tabSelectWidget-framed::after {
  2639. 	background-color: #15130f;
  2640. 	background-image: linear-gradient(to right,rgba(21,19,15,0) 0,#15130f 100%);
  2641. 	background-color: transparent;
  2642. }
  2643.  
  2644. .oo-ui-tabSelectWidget-mobile.oo-ui-tabSelectWidget-frameless::after {
  2645. 	background-color: #000;
  2646. 	background-image:linear-gradient(to right,rgba(0,0,0,0) 0,#000 100%);
  2647. 	background-color: transparent;
  2648. }
  2649.  
  2650. .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
  2651. 	background-color: #000;
  2652. 	color: #fff;
  2653. }
  2654.  
  2655. .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
  2656. 	border-bottom-color: #000;
  2657. }
  2658.  
  2659. .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
  2660. 	background-color: rgba(0,0,0,0.3);
  2661. 	color: #dfdedd;
  2662. }
  2663.  
  2664. .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active {
  2665. 	background-color: rgba(0,0,0,0.8);
  2666. 	color: #fff;
  2667. }
  2668.  
  2669. .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
  2670. 	background-color: #000;
  2671. }
  2672.  
  2673. .oo-ui-tagMultiselectWidget-handle {
  2674. 	border-color: #5d564e;
  2675. }
  2676.  
  2677. .oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input {
  2678. 	color: #fff;
  2679. }
  2680.  
  2681. .oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input::-webkit-input-placeholder {
  2682. 	color: #8d8882;
  2683. }
  2684.  
  2685. .oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input:-ms-input-placeholder {
  2686. 	color: #8d8882;
  2687. }
  2688.  
  2689. .oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input::-moz-placeholder {
  2690. 	color: #8d8882;
  2691. }
  2692.  
  2693. .oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input::placeholder {
  2694. 	color: #8d8882;
  2695. }
  2696.  
  2697. .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled {
  2698. 	background-color: #000;
  2699. }
  2700.  
  2701. .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined:hover .oo-ui-tagMultiselectWidget-handle {
  2702. 	border-color: #8d8882;
  2703. }
  2704.  
  2705. .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined {
  2706. 	background-color: #070605;
  2707. }
  2708.  
  2709. .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
  2710. 	background-color: #000;
  2711. }
  2712.  
  2713. .oo-ui-tagMultiselectWidget.oo-ui-widget-disabled .oo-ui-tagMultiselectWidget-handle {
  2714. 	background-color: #15130f;
  2715. 	color: #8d8882;
  2716. 	text-shadow: 0 1px 1px #000;
  2717. 	border-color: #37332e;
  2718. }
  2719.  
  2720. .oo-ui-tagItemWidget {
  2721. 	border-color: #5d564e;
  2722. }
  2723.  
  2724. .oo-ui-tagItemWidget.oo-ui-widget-enabled:hover {
  2725. 	background-color:#000;
  2726. 	color: #bfbdbb;
  2727. 	border-color: #5d564e;
  2728. }
  2729.  
  2730. .oo-ui-tagItemWidget.oo-ui-widget-enabled:not(.oo-ui-tagItemWidget-fixed) {
  2731. 	background-color: #070605;
  2732. }
  2733.  
  2734. .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover {
  2735. 	background-color: #000;
  2736. }
  2737.  
  2738. .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:active {
  2739. 	background-color: #15130f;
  2740. }
  2741.  
  2742. .oo-ui-tagItemWidget.oo-ui-widget-disabled {
  2743. 	background-color: #15130f;
  2744. 	color: #8d8882;
  2745. 	border-color: #37332e;
  2746. 	text-shadow: 0 1px 1px #000;
  2747. }
  2748.  
  2749. .oo-ui-searchWidget-query {
  2750. 	border-bottom-color: #37332e;
  2751. 	box-shadow: 0 1px 1px rgba(255,255,255,0.2);
  2752. }`;
  2753.  
  2754. 	style4.innerHTML = `/* load.php 1137 rules https://www.warzone.com/wiki/index.php?title=Special:CreateAccount&returnto=Main+Page */
  2755.  
  2756. /* TODO */
  2757.  
  2758. `;
  2759.  
  2760. 	document.head.appendChild(style);
  2761. 	document.head.appendChild(style2);
  2762. 	document.head.appendChild(style3);
  2763. 	// document.head.appendChild(style4);
  2764. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址