CSS for coronabuddy

@require library

Этот скрипт недоступен для установки пользователем. Он является библиотекой, которая подключается к другим скриптам мета-ключом // @require https://update.sleazyfork.org/scripts/403974/808229/CSS%20for%20coronabuddy.js

  1. // CSS rules for coronabuddy
  2. let darkModeSet = false;
  3. let darkModeEnabled = false;
  4. let darkModeInjected = false;
  5.  
  6. let darkCSS = /*css*/ `
  7. ::selection {
  8. background: #B4D5FE;
  9. }
  10.  
  11. ::-moz-selection {
  12. background: #B4D5FE;
  13. }
  14.  
  15. blockquote {
  16. border: 1px solid linen !important;
  17. }
  18.  
  19. html:not(root) body {
  20. background-color: #121212 !important;
  21. }
  22.  
  23. html:not(root) div {
  24. border: 0px !important;
  25. }
  26.  
  27. html:not(root) p {
  28. color: white !important;
  29. }
  30.  
  31. #af-wrapper a {
  32. color: lime !important;
  33. outline: 0;
  34. }
  35.  
  36. #af-wrapper small .profile-link {
  37. /* This fixes a critical bug with the forum addon that seems to allow arbitrarily long user names without truncation, breaking UX */
  38. display: inline-block !important;
  39. vertical-align: bottom !important;
  40. max-width: 5vw !important;
  41. max-height: 2em;
  42. overflow: hidden;
  43. white-space: nowrap;
  44. text-overflow: ellipsis;
  45. }
  46.  
  47. #af-wrapper .forum-description {
  48. color: linen;
  49. }
  50.  
  51. #af-wrapper #forum-header {
  52. background-color: #006600 !important;
  53. }
  54.  
  55. #af-wrapper #forum-navigation a {
  56. border-color: green !important;
  57. }
  58.  
  59. #af-wrapper .pages > strong {
  60. background-color: rgba(50, 255, 50, 0.6) !important;
  61. color: linen !important;
  62. }
  63.  
  64. #af-wrapper #profile-content {
  65. background-color: #232323 !important;
  66. color: linen !important;
  67. }
  68.  
  69. #af-wrapper #profile-layer {
  70. background-color: #232323 !important;
  71. }
  72.  
  73. #af-wrapper #profile-navigation {
  74. /* Override random !important in the WP CSS */
  75. background-color: green !important;
  76. }
  77.  
  78. #af-wrapper #profile-navigation a.active {
  79. /* Override random !important in the WP CSS */
  80. background-color: #006600 !important;
  81. }
  82.  
  83. #af-wrapper .button-normal {
  84. /* Override random !important in the WP CSS */
  85. background-color: #006600 !important;
  86. border: 0px;
  87. }
  88.  
  89. #af-wrapper .content-element:nth-child(2n):not(.topic-sticky) {
  90. background-color: #121212 !important;
  91. }
  92.  
  93. #af-wrapper .topic-sticky {
  94. background-color: #121212 !important;
  95. border-left: none !important;
  96. border-right: none !important;
  97. border-top: none !important;
  98. }
  99.  
  100. #af-wrapper .topic-sticky .fa-comments {
  101. color: tomato !important;
  102. }
  103.  
  104. #af-wrapper .topic-sticky .topic-name > a {
  105. color: #d6203b !important;
  106. font-weight: 700 !important;
  107. }
  108.  
  109. #af-wrapper .editor-row-subject {
  110. background-color: black !important;
  111. color: gray !important;
  112. }
  113.  
  114. #af-wrapper .editor-row-subject > span > input {
  115. background-color: #232323 !important;
  116. color: linen !important;
  117. }
  118.  
  119.  
  120. #af-wrapper .forum-post-menu a {
  121. color: green !important;
  122. }
  123.  
  124. #af-wrapper .pages {
  125. background-color: #232323 !important;
  126. border-color: gray !important;
  127. border: 1px solid gray !important;
  128. }
  129.  
  130. #af-wrapper .pages > a {
  131. border-right: 1px solid gray !important;
  132. border-left: 1px solid gray !important;
  133. color: lime !important;
  134. }
  135.  
  136. #af-wrapper .pages a:hover {
  137. background-color: lime !important;
  138. color: black !important;
  139. }
  140.  
  141. #af-wrapper .pages strong {
  142. border-right: none;
  143. color: black !important;
  144. }
  145.  
  146. #af-wrapper .post-author .topic-author {
  147. color: red !important;
  148. font-weight: 900;
  149. font-size: 1.1em;
  150. -webkit-text-stroke: 1px black !important;
  151. }
  152.  
  153. #af-wrapper .post-message > blockquote::after {
  154. background: linear-gradient(rgba(0, 0, 0, 0), rgba(249, 249, 249, .4)) !important;
  155. }
  156.  
  157. #af-wrapper .post-element {
  158. border: 2px gray solid !important;
  159. }
  160.  
  161. #af-wrapper .title-element {
  162. background-color: #006600 !important;
  163. }
  164.  
  165. #af-wrapper .topic-sticky .topic-poster {
  166. border-left: 0px;
  167. background: none !important;
  168. }
  169.  
  170. #af-wrapper .unread {
  171. color: lime !important;
  172. }
  173.  
  174. #forum-breadcrumbs > span > a > span {
  175. color: linen;
  176. }
  177.  
  178. #forum-search {
  179. background-color: #232323 !important;
  180. }
  181.  
  182. #poll-panel {
  183. background-color: #000000 !important;
  184. color: linen !important;
  185. }
  186.  
  187. #read-unread {
  188. display: none !important;
  189. }
  190.  
  191. .avatar {
  192. border: none !important;
  193. }
  194.  
  195. .background-contrast {
  196. background-color: #232323 !important;
  197. }
  198.  
  199. .content-container {
  200. background-color: #232323 !important;
  201. border-color: black !important;
  202. }
  203.  
  204. .dark .site-container {
  205. background-color: #121212 !important;
  206. }
  207.  
  208. .editor-row {
  209. background-color: #121212 !important;
  210. }
  211.  
  212. .forum {
  213. border-bottom: 0px !important;
  214. }
  215.  
  216. .forum-editor-button {
  217. border: none !important;
  218. }
  219.  
  220. .forum-poster {
  221. border-left: 0px !important;
  222. }
  223.  
  224. .forum-post-date:after {
  225. content: '';
  226. width: 40vw !important;
  227. height: 1px !important;
  228. display: block;
  229. position: absolute;
  230. border-bottom: 1px solid gray !important;
  231. }
  232.  
  233. .forum-post-header {
  234. border-color: gray !important;
  235. }
  236.  
  237. .footer-widgets {
  238. background-color: #232323;
  239. }
  240.  
  241. .mce-container-body {
  242. background-color: #121212 !important;
  243. }
  244.  
  245. .poll-result-numbers {
  246. color: linen !important;
  247. }
  248.  
  249. .poll-result-total {
  250. color: linen !important;
  251. }
  252.  
  253. .post-counter {
  254. color: linen;
  255. }
  256.  
  257. .post-element {
  258. background-color: #232323 !important;
  259. }
  260.  
  261. .post-wrapper {
  262. background-color: #121212 !important;
  263. color: linen !important;
  264. border: 0px !important;
  265. border-right: 1px gray solid !important;
  266. }
  267.  
  268. .quotetitle {
  269. color: linen;
  270. }
  271.  
  272. .reaction.up:hover {
  273. color: lime !important;
  274. }
  275.  
  276. .reaction.up > .reaction-icon {
  277. color: lime !important;
  278. }
  279.  
  280. .reaction.up > .reaction-icon.reaction-inactive {
  281. color: gray !important;
  282. }
  283.  
  284. .reaction.up > .reaction-number {
  285. color: lime !important;
  286. }
  287.  
  288. .reaction.down:hover {
  289. color: red !important;
  290. }
  291.  
  292. .reaction.down > .reaction-icon {
  293. color: red !important;
  294. }
  295.  
  296. .reaction.down > .reaction-icon.reaction-inactive {
  297. color: gray !important;
  298. }
  299. .reaction.down > .reaction-number {
  300. color: red !important;
  301. }
  302.  
  303. .spoiler-head {
  304. background-color: black !important;
  305. border: 1px solid linen !important;
  306. }
  307.  
  308. .topic {
  309. border-bottom: 0px !important;
  310. }
  311.  
  312. .topic-poster {
  313. border-left: 0px !important;
  314. }
  315. `;
  316.  
  317. GM.getValue("darkmodeEnabled", false).then((value) => {
  318. if (value === true) {
  319. darkModeEnabled = true;
  320. const OBSERVER = new MutationObserver(parseNodes);
  321.  
  322. OBSERVER.observe(document, {
  323. attributes: true,
  324. childList: true,
  325. subtree: true,
  326. });
  327.  
  328. function parseNodes(mutations) {
  329. if (darkModeEnabled && document.head && darkModeSet === false) {
  330. darkModeSet = true;
  331. document.head.lastChild.after(
  332. templateDOMElement({
  333. tag: "style",
  334. innerHTML: darkCSS,
  335. id: "coronaBuddyDarkMode__selector",
  336. classList: "",
  337. style: "",
  338. })
  339. );
  340. }
  341. // sloppy injection fix for iframes
  342. try {
  343. if (
  344. document.querySelector("#message_ifr") &&
  345. document.querySelector("#message_ifr").contentWindow.document.body &&
  346. !darkModeInjected &&
  347. darkModeEnabled
  348. ) {
  349. document.head.lastChild.after(
  350. templateDOMElement({
  351. tag: "style",
  352. innerHTML: darkCSS,
  353. id: "coronaBuddyDarkMode__selector",
  354. classList: "",
  355. style: "",
  356. })
  357. );
  358.  
  359. console.log("Injected darkmode.");
  360. darkModeInjected = true;
  361. document
  362. .querySelector("#message_ifr")
  363. .contentWindow.document.head.querySelector("style").innerHTML +=
  364. "body {background-color: #121212 !important; color: white !important;} blockquote {border: 1px solid linen !important;}";
  365. }
  366. } catch (error) {
  367. console.log(error);
  368. }
  369. }
  370. } else {
  371. }
  372. });
  373.  
  374. let popupCSS = /*css*/ `
  375. @import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
  376.  
  377. .popup {
  378. position: relative;
  379. }
  380. .popup__banner {
  381. background-color: $black;
  382. height: 2.5em;
  383. margin-top: 2em;
  384. box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
  385. }
  386. .popup__banner--text {
  387. color: lime !important;
  388. font-size: 0.8em;
  389. font-family: 'Press Start 2P', cursive;
  390. text-align: center;
  391. }
  392. .popup__textarea {
  393. color: lime !important;
  394. background-color: black !important;
  395. font-size: 1.1em;
  396. padding: 0.5em 0.5em 0.5em 0.5em;
  397. width: 60%;
  398. height: 20em;
  399. resize: none;
  400. margin-bottom: 0.3em;
  401. margin-top: 1em;
  402. }
  403. .popup__textarea:focus {
  404. outline: none;
  405. }
  406. .popup__button {
  407. background-color: rgb(45, 45, 45);
  408. width: 50%;
  409. height: 3em;
  410. border: 0px solid lime !important;
  411. font-size: 1em;
  412. display: block;
  413. margin: 0 auto;
  414. border: none;
  415. box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.12);
  416. transition: border 0.3s;
  417. }
  418. .popup__button:focus {
  419. outline: none;
  420. }
  421. .popup__button:hover {
  422. border: 4px solid lime !important;
  423. transition: border 0.3s;
  424. }
  425. .popup__button:active {
  426. background-color: lime !important;
  427. }
  428. .popup__button--invert {
  429. background-color: lime !important;
  430. color: $black !important;
  431. }
  432. .popup__button--black {
  433. background-color: rgb(45, 45, 45);
  434. }
  435. .popup__button--center {
  436. display: block;
  437. text-align: center;
  438. }
  439. .popup__button--text {
  440. color: lime !important;
  441. font-weight: 500;
  442. font-family: 'Press Start 2P', cursive;
  443. margin: 0;
  444. font-size: 0.5em;
  445. &:active {
  446. color: $black !important;
  447. }
  448. }
  449. .popup__button--save {
  450. margin-bottom: 0.5em;
  451. }
  452. .popup__button--clear {
  453. }
  454. .popup__notification {
  455. color: $red;
  456. font-weight: 700;
  457. margin-top: 0.5em;
  458. }
  459. .popup__darkmode {
  460. margin-top: 1em;
  461. text-align: center;
  462. }
  463. .popup__darkmode--text {
  464. display: inline-block;
  465. color: lime !important;
  466. font-size: 0.6em;
  467. font-family: 'Press Start 2P', cursive;
  468. margin-right: 0.5em;
  469. }
  470. .popup__darkmode--checkbox {
  471. display: inline-block;
  472. height: 0.8em;
  473. width: 0.8em;
  474. background-color: #555;
  475. border-radius: 0.1em;
  476. margin-bottom: -0.08em;
  477. user-select: none;
  478. }
  479. .popup__darkmode--checkbox--check:after {
  480. content: '✓';
  481. position: absolute;
  482. color: lime !important;
  483. font-size: 0.6em;
  484. font-weight: 900;
  485. margin-left: -0.42em;
  486. margin-top: 0.1em;
  487. }
  488. `;
  489.  
  490. window.addEventListener("DOMContentLoaded", function () {
  491. document.head.lastChild.after(
  492. templateDOMElement({
  493. tag: "style",
  494. innerHTML: popupCSS,
  495. id: "coronaBuddyPopup__selector",
  496. classList: "",
  497. style: "",
  498. })
  499. );
  500. });