Greasy Fork Theme Engine [BETA]

A sleek Geasy Fork redesign with light/dark mode and custom colors.

当前为 2025-01-21 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Greasy Fork Theme Engine [BETA]
  3. // @namespace https://naeembolchhi.github.io/
  4. // @version 0.18
  5. // @description A sleek Geasy Fork redesign with light/dark mode and custom colors.
  6. // @author NaeemBolchhi
  7. // @license GPL-3.0-or-later
  8. // @icon data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300" style="fill: %23D72323;"><path d="M200.3 269.9c-15.7 6.6-32.7 10.1-50.3 10.1-34.7 0-67.4-13.5-91.9-38.1C33.5 217.4 20 184.7 20 150s13.5-67.4 38.1-91.9C82.6 33.5 115.3 20 150 20s67.4 13.5 91.9 38.1C266.5 82.6 280 115.3 280 150c0 17.6-3.5 34.6-10 50.3 5 5 10 10.1 15.1 15.1 9.6-19.8 15-42 15-65.4C300 67.2 232.8 0 150 0S0 67.2 0 150s67.2 150 150 150c23.4 0 45.6-5.4 65.4-15-5.1-5-10.1-10.1-15.1-15.1z"/><path d="M267.8 300c-9.6-1.3-16.5-7-23.1-13.7-14.9-15.3-30.1-30.2-45.2-45.3-9.3-9.3-12-20.1-7.5-32.7.3-.8.3-2.1-.2-2.6-3.9-4.1-7.9-8-12-12.1-6.4 4-13.1 6.7-20.5 7.6-15.5 1.9-29-2.4-40.2-13.2-12.3-11.8-24.2-24-36.2-36.1-3.5-3.5-4.1-7.4-2.2-11.2 1.9-3.7 5.9-6.4 9.7-5.6 2.5.5 5.1 2 6.9 3.8 7.4 7.1 14.5 14.4 21.8 21.6.6.6 1.3 1.2 1.7 1.6l13.8-13.8c-6.2-6.1-12.6-12.5-18.9-18.9-1.9-1.9-3.8-3.7-5.6-5.6-3.8-4.2-3.7-9.7.2-13.6 3.9-3.9 9.5-4.1 13.6-.1 7.5 7.3 14.8 14.7 22.1 22.1.8.8 1.5 1.8 2.1 2.4l14.3-14.3c-2-1.8-4.5-4-6.8-6.3-6-5.9-11.9-11.8-17.8-17.8-2.7-2.7-3.7-5.9-2.4-9.6 1.4-3.9 4.2-6.3 8.3-6.9 3.4-.6 6 1 8.4 3.3l14.7 14.7c7.4 7.4 14.9 14.6 22 22.2 14.7 15.7 17 39.1 6.1 57.7-.4.7-.7 1.4-1.3 2.4 3.9 3.9 7.9 7.8 11.9 11.6.6.5 2 .6 2.8.3 12.5-4.4 23.3-1.7 32.7 7.6 15.1 15.1 30.1 30.3 45.3 45.2 6.7 6.5 12.4 13.4 13.7 23v5.8c-.2.5-.4 1.1-.5 1.6-1.8 9.5-6.6 17-15.5 21.2-3.3 1.6-6.9 2.3-10.4 3.5-1.9.2-3.8.2-5.8.2z"/><path d="M170 219.6c-2.7.7-5.4 1.2-8.2 1.5-3.1.4-6.2.6-9.2.6-17.9 0-34.2-6.6-47.2-19.2-10.2-9.8-20.2-20-30-29.8l-6.6-6.6c-9.5-9.5-11.7-22.7-5.8-34.3 4.9-9.6 14.4-16 24.5-16.6.5-6.9 3.5-13.6 8.9-18.9 5.2-5.1 11.8-8.2 18.7-8.7.2-2.5.7-4.9 1.6-7.4 3.8-10.8 12.6-18.1 23.9-20 1.5-.2 3.1-.4 4.6-.4 5.4 0 13.4 1.6 21.1 9.2 4.7 4.7 9.6 9.5 14.8 14.7 2.1 2.2 4.4 4.4 6.5 6.5 5.3 5.2 10.7 10.6 15.9 16.2 10.2 10.9 16.4 24.5 17.9 39.3.9 8.2.2 16.4-1.8 24.2h.1c12.8 0 24.7 5.1 34.7 14.8 3.6-10.9 5.6-22.6 5.6-34.7 0-60.8-49.2-110-110-110S40 89.2 40 150s49.2 110 110 110c12.1 0 23.8-2 34.7-5.6-9.8-10.1-14.8-22.1-14.7-34.8z"/></svg>
  9. // @match *://greasyfork.org/*
  10. // @match *://sleazyfork.org/*
  11. // @exclude */assets/*
  12. // @run-at document-start
  13. // ==/UserScript==
  14.  
  15. // Main event initiator.
  16. (() => {
  17. 'use strict';
  18.  
  19. // Pendulum
  20. const pendulum = setInterval(() => {
  21. try {
  22. if (!document.querySelector('head')) {
  23. return;
  24. }
  25. themeStyles(true);
  26. // if favicon
  27. } catch(e) {console.error("early-load-failed");catchErrors(e);}
  28. }, 100);
  29.  
  30. // Only execute if window is interactive or fully loaded at this point.
  31. if (document.readyState === 'interactive' || document.readyState === 'complete') {
  32. setTimeout((() => {
  33. clearInterval(pendulum);
  34. themeStyles();
  35. removeStyles();
  36. // check theme choice in localstorage
  37. // any favicon function
  38. // add the toggle for theme changing
  39. /* DOM Changes START */
  40. commonUpdate();
  41. /* DOM Changes END */
  42. // fix favicon again, just in case
  43. loadTime();
  44. }), 100);
  45. }
  46.  
  47. // Modifying head when available.
  48. let observer = new MutationObserver(() => {
  49. if (document.body) {
  50. clearInterval(pendulum);
  51. themeStyles();
  52. removeStyles();
  53. // any favicon function
  54. observer.disconnect();
  55. }
  56. });
  57. observer.observe(document.documentElement, {childList: true, subtree: true});
  58.  
  59. // Execute DOM modifications when ready state changes.
  60. document.onreadystatechange = () => {
  61. // Modify body when document is interactive.
  62. if (document.readyState === 'interactive') {
  63. // check theme choice in localstorage
  64. // add the toggle for theme changing
  65. /* DOM Changes */
  66. commonUpdate();
  67. }
  68. // Modify body when document is complete.
  69. if (document.readyState === 'complete') {
  70. // fix favicon again, just in case
  71. loadTime();
  72. }
  73. }
  74.  
  75. })();
  76.  
  77. // Update Sequence Common
  78. function commonUpdate() {
  79. processTheme();
  80. setBasic();
  81. forkNAV();
  82. forkHEADER();
  83. addFOOTER();
  84. forkHOME();
  85. listenEvents();
  86. }
  87.  
  88. // Catch errors.
  89. function catchErrors(e) {
  90. console.log(e instanceof TypeError)
  91. console.log(e.message)
  92. console.log(e.name)
  93. console.log(e.fileName)
  94. console.log(e.lineNumber)
  95. console.log(e.columnNumber)
  96. console.log(e.stack)
  97. }
  98.  
  99. // SVG Icons
  100. const greasySVG = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 392 72"><path d="M23.8 26.8H43v25.8c-2.7.9-5.5 1.6-8.4 2.1s-6.1.7-9.7.7c-5.2 0-9.7-1-13.3-3.1s-6.4-5.1-8.2-9C1.5 39.4.6 34.6.6 29c0-5.4 1-10 3.1-14 2.1-3.9 5.1-7 9.1-9.2s8.8-3.3 14.5-3.3c2.8 0 5.5.3 8.1.8 2.6.6 5 1.3 7.2 2.3l-3 7c-1.7-.8-3.7-1.5-5.8-2.1-2.2-.6-4.4-.8-6.7-.8-3.7 0-6.9.8-9.5 2.4-2.7 1.6-4.7 3.8-6.1 6.7-1.4 2.9-2.1 6.3-2.1 10.2 0 3.8.6 7.2 1.7 10.1s2.9 5.1 5.4 6.7c2.4 1.6 5.6 2.4 9.5 2.4 1.9 0 3.6-.1 5-.3 1.4-.2 2.6-.4 3.8-.7V34h-11v-7.2zM72.2 15c.7 0 1.4 0 2.1.1s1.4.2 2 .3l-.8 7.7c-.5-.1-1.1-.2-1.8-.3-.7-.1-1.4-.1-1.9-.1-1.5 0-2.9.2-4.2.7s-2.5 1.2-3.6 2.2c-1 1-1.8 2.2-2.4 3.6-.6 1.5-.9 3.1-.9 5.1v20.4h-8.3V15.8H59l1.1 6.9h.4c.8-1.4 1.7-2.6 2.9-3.8 1.1-1.1 2.5-2.1 4-2.8 1.4-.7 3.1-1.1 4.8-1.1zm25.1 0c3.5 0 6.4.7 8.9 2.1s4.4 3.5 5.7 6.1 2 5.8 2 9.4V37h-26c.1 3.8 1.1 6.7 3 8.7s4.6 3.1 8.1 3.1c2.5 0 4.7-.2 6.7-.7s4-1.2 6.1-2.1v6.7c-1.9.9-3.9 1.6-5.9 2s-4.4.6-7.2.6c-3.8 0-7.2-.7-10.1-2.2s-5.2-3.7-6.8-6.7c-1.6-3-2.4-6.6-2.4-11s.7-8.1 2.2-11.1 3.6-5.4 6.2-7 5.9-2.3 9.5-2.3zm0 6.3c-2.6 0-4.7.8-6.3 2.5-1.6 1.7-2.5 4.2-2.8 7.4h17.7c0-1.9-.3-3.7-1-5.2-.6-1.5-1.6-2.7-2.8-3.5-1.3-.8-2.9-1.2-4.8-1.2zm39.5-6.3c4.9 0 8.6 1.1 11.2 3.3s3.8 5.6 3.8 10.2v26.2h-5.9l-1.6-5.5h-.3c-1.1 1.4-2.2 2.6-3.4 3.5s-2.5 1.6-4.1 2.1c-1.5.5-3.4.7-5.6.7-2.3 0-4.4-.4-6.2-1.3s-3.3-2.2-4.3-3.9-1.6-4-1.6-6.7c0-4 1.5-7 4.5-9s7.5-3.1 13.6-3.3l6.7-.2v-2c0-2.7-.6-4.6-1.9-5.8-1.3-1.1-3-1.7-5.3-1.7-1.9 0-3.8.3-5.7.8s-3.6 1.3-5.3 2.1l-2.7-5.8c1.9-1 4.1-1.8 6.5-2.5 2.4-.7 4.9-1.2 7.6-1.2zm6.8 21.1-5 .2c-4.1.1-7 .8-8.7 2.1-1.7 1.3-2.5 3-2.5 5.2 0 1.9.6 3.3 1.7 4.2 1.1.9 2.7 1.3 4.5 1.3 2.9 0 5.2-.8 7.1-2.4 1.9-1.6 2.8-4 2.8-7.2l.1-3.4zm44.1 7.5c0 2.6-.6 4.7-1.9 6.5s-3.1 3.1-5.4 4-5.3 1.4-8.7 1.4c-2.7 0-5.1-.2-7-.6s-3.8-1-5.5-1.8V46c1.9.9 3.9 1.6 6.2 2.2s4.5.9 6.6.9c2.7 0 4.7-.4 5.9-1.3s1.8-2 1.8-3.4c0-.8-.2-1.6-.7-2.3s-1.4-1.4-2.7-2.1-3.2-1.6-5.7-2.6-4.5-2-6.2-3-3-2.2-3.8-3.6-1.3-3.2-1.3-5.4c0-3.4 1.4-6.1 4.1-7.9s6.3-2.7 10.8-2.7c2.4 0 4.6.2 6.8.7s4.2 1.2 6.2 2.1l-2.6 6.2c-1.8-.8-3.5-1.4-5.3-1.9s-3.6-.8-5.4-.8c-2.1 0-3.8.3-4.9 1s-1.7 1.6-1.7 2.8c0 .9.3 1.7.8 2.3s1.5 1.3 2.8 1.9 3.2 1.4 5.5 2.4c2.3.9 4.3 1.8 6 2.8s3 2.2 3.9 3.6 1.4 3.5 1.4 5.7zm1.2-27.8h9l8 22.2c.4 1 .7 2 1 3s.6 1.9.8 2.9.4 1.9.5 2.8h.2c.2-1.2.6-2.6 1-4.1s.9-3 1.5-4.6l7.7-22.2h8.9L210.6 60c-1 2.5-2.1 4.7-3.5 6.5s-3 3.2-4.9 4.1-4.1 1.4-6.5 1.4c-1.2 0-2.2-.1-3.1-.2s-1.6-.3-2.2-.4v-6.6c.5.1 1.1.2 1.9.3s1.5.1 2.3.1c1.5 0 2.8-.3 3.8-.9s2-1.4 2.7-2.5 1.4-2.3 1.9-3.6l1.4-3.7-15.5-38.7zm68.7 38.9h-8.4V3.3h29v7.1h-20.7v16H277v7.1h-19.3v21.2h-.1zm61.8-19.5c0 3.2-.4 6.1-1.3 8.6s-2.1 4.6-3.7 6.3-3.6 3-5.8 3.9-4.8 1.4-7.7 1.4c-2.7 0-5.1-.5-7.3-1.4s-4.2-2.2-5.8-3.9-2.9-3.8-3.8-6.3-1.3-5.4-1.3-8.6c0-4.3.7-7.9 2.2-10.9s3.6-5.3 6.4-6.8 6.1-2.4 9.9-2.4c3.6 0 6.8.8 9.5 2.4s4.9 3.9 6.4 6.9 2.3 6.5 2.3 10.8zm-28.3 0c0 2.8.3 5.3 1 7.3s1.8 3.6 3.2 4.6 3.3 1.6 5.6 1.6 4.2-.5 5.6-1.6 2.5-2.6 3.2-4.6 1-4.4 1-7.3-.3-5.2-1-7.2-1.7-3.5-3.2-4.5-3.3-1.6-5.7-1.6c-3.4 0-5.9 1.1-7.5 3.4s-2.2 5.6-2.2 9.9zM346.8 15c.7 0 1.4 0 2.1.1s1.4.2 2 .3l-.8 7.7c-.5-.1-1.1-.2-1.8-.3s-1.4-.1-1.9-.1c-1.5 0-2.9.2-4.2.7s-2.5 1.2-3.6 2.2-1.8 2.2-2.4 3.6-.9 3.1-.9 5.1v20.4H327V15.8h6.5l1.1 6.9h.4c.8-1.4 1.7-2.6 2.9-3.8s2.5-2.1 4-2.8 3.2-1.1 4.9-1.1zm17.8-15v26.4c0 1.2 0 2.5-.1 3.9s-.2 2.7-.3 4h.2c.6-.8 1.3-1.8 2.2-2.9s1.7-2.1 2.4-2.9l12-12.8h9.5l-15.6 16.7 16.6 22.2h-9.7l-12.4-17.1-4.6 4v13.1h-8.3V0h8.1z"/></svg>',
  101. sleazySVG = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 392 72"><path d="M45.2 40.7c0 3-.7 5.7-2.2 7.9-1.5 2.2-3.6 3.9-6.4 5.1-2.8 1.2-6.1 1.8-9.9 1.8-1.9 0-3.7-.1-5.4-.3-1.7-.2-3.3-.5-4.8-.9s-2.9-.9-4.1-1.5v-7.9c2.1.9 4.4 1.7 7 2.5 2.6.7 5.2 1.1 7.9 1.1 2.2 0 4-.3 5.4-.9s2.5-1.4 3.2-2.5 1.1-2.3 1.1-3.7c0-1.5-.4-2.8-1.2-3.9s-2.1-2-3.7-2.9c-1.6-.9-3.7-1.8-6.2-2.8-1.7-.7-3.3-1.5-4.8-2.3-1.5-.9-2.9-1.9-4.1-3.1s-2.1-2.6-2.8-4.2-1-3.5-1-5.7c0-2.9.7-5.4 2.1-7.5s3.4-3.6 5.9-4.7c2.5-1.1 5.5-1.7 8.9-1.7 2.7 0 5.2.3 7.6.8 2.4.6 4.7 1.4 7 2.4L42 12.6c-2.1-.9-4.2-1.6-6.1-2.1-2-.5-4-.8-6.1-.8-1.8 0-3.3.3-4.5.8s-2.2 1.3-2.8 2.3c-.6 1-1 2.1-1 3.5 0 1.5.4 2.8 1.1 3.8s1.9 2 3.4 2.8c1.6.8 3.6 1.8 6 2.8 2.8 1.2 5.2 2.4 7.2 3.7 2 1.3 3.5 2.8 4.6 4.6 1.1 1.8 1.4 4 1.4 6.7zm15.6 14h-8.3V0h8.3v54.7zM86.2 15c3.5 0 6.4.7 8.9 2.1s4.4 3.5 5.7 6.1 2 5.8 2 9.4V37h-26c.1 3.8 1.1 6.7 3 8.7s4.6 3.1 8.1 3.1c2.5 0 4.7-.2 6.7-.7s4-1.2 6.1-2.1v6.7c-1.9.9-3.9 1.6-5.9 2s-4.4.6-7.2.6c-3.8 0-7.2-.7-10.1-2.2s-5.2-3.7-6.8-6.7c-1.6-3-2.4-6.6-2.4-11s.7-8.1 2.2-11.1 3.6-5.4 6.2-7 5.9-2.3 9.5-2.3zm0 6.3c-2.6 0-4.7.8-6.3 2.5-1.6 1.7-2.5 4.2-2.8 7.4h17.7c0-1.9-.3-3.7-1-5.2-.6-1.5-1.6-2.7-2.8-3.5-1.2-.8-2.9-1.2-4.8-1.2zm39.5-6.3c4.9 0 8.6 1.1 11.2 3.3 2.5 2.2 3.8 5.6 3.8 10.2v26.2h-5.9l-1.6-5.5h-.3c-1.1 1.4-2.2 2.6-3.4 3.5s-2.5 1.6-4.1 2.1c-1.5.5-3.4.7-5.6.7-2.3 0-4.4-.4-6.2-1.3s-3.3-2.2-4.3-3.9-1.6-4-1.6-6.7c0-4 1.5-7 4.5-9s7.5-3.1 13.6-3.3l6.8-.2v-2c0-2.7-.6-4.6-1.9-5.8-1.3-1.1-3-1.7-5.3-1.7-1.9 0-3.8.3-5.7.8s-3.6 1.3-5.3 2.1l-2.7-5.8c1.9-1 4.1-1.8 6.5-2.5s4.9-1.2 7.5-1.2zm6.7 21.1-5 .2c-4.1.1-7 .8-8.7 2.1-1.7 1.3-2.5 3-2.5 5.2 0 1.9.6 3.3 1.7 4.2 1.1.9 2.7 1.3 4.5 1.3 2.9 0 5.2-.8 7.1-2.4 1.9-1.6 2.8-4 2.8-7.2l.1-3.4zm44 18.6h-29.6v-5.1l19.7-27.5H148v-6.4h27.8v5.6l-19.3 26.9h19.8l.1 6.5zm.8-38.9h9l8 22.2c.4 1 .7 2 1 3s.6 1.9.8 2.9.4 1.9.5 2.8h.2c.2-1.2.6-2.6 1-4.1s.9-3 1.5-4.6l7.7-22.2h8.9L199 60c-1 2.5-2.1 4.7-3.5 6.5s-3 3.2-4.9 4.1-4.1 1.4-6.5 1.4c-1.2 0-2.2-.1-3.1-.2s-1.6-.3-2.2-.4v-6.6c.5.1 1.1.2 1.9.3s1.5.1 2.3.1c1.5 0 2.8-.3 3.8-.9s2-1.4 2.7-2.5 1.4-2.3 1.9-3.6l1.4-3.7-15.6-38.7zm68.7 38.9h-8.4V3.3h29v7.1h-20.7v16h19.3v7.1h-19.3l.1 21.2zm61.7-19.5c0 3.2-.4 6.1-1.3 8.6s-2.1 4.6-3.7 6.3-3.6 3-5.8 3.9-4.8 1.4-7.7 1.4c-2.7 0-5.1-.5-7.3-1.4s-4.2-2.2-5.8-3.9-2.9-3.8-3.8-6.3-1.3-5.4-1.3-8.6c0-4.3.7-7.9 2.2-10.9s3.6-5.3 6.4-6.8 6.1-2.4 9.9-2.4c3.6 0 6.8.8 9.5 2.4s4.9 3.9 6.4 6.9 2.4 6.5 2.3 10.8zm-28.2 0c0 2.8.3 5.3 1 7.3s1.8 3.6 3.2 4.6 3.3 1.6 5.6 1.6 4.2-.5 5.6-1.6 2.5-2.6 3.2-4.6 1-4.4 1-7.3-.3-5.2-1-7.2-1.7-3.5-3.2-4.5-3.3-1.6-5.7-1.6c-3.4 0-5.9 1.1-7.5 3.4s-2.2 5.6-2.2 9.9zM335 15c.7 0 1.4 0 2.1.1s1.4.2 2 .3l-.8 7.7c-.5-.1-1.1-.2-1.8-.3s-1.4-.1-1.9-.1c-1.5 0-2.9.2-4.2.7s-2.5 1.2-3.6 2.2-1.8 2.2-2.4 3.6-.9 3.1-.9 5.1v20.4h-8.3V15.8h6.5l1.1 6.9h.4c.8-1.4 1.7-2.6 2.9-3.8s2.5-2.1 4-2.8 3.2-1.1 4.9-1.1zm17.8-15v26.4c0 1.2 0 2.5-.1 3.9s-.2 2.7-.3 4h.2c.6-.8 1.3-1.8 2.2-2.9s1.7-2.1 2.4-2.9l11.9-12.8h9.5L363 32.4l16.6 22.2H370l-12.4-17.1-4.6 4v13.1h-8.3V0h8.1z"/></svg>',
  102. forkSVG = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 92 92"><path class="logo-ring" d="M46 0C20.6 0 0 20.6 0 46s20.6 46 46 46 46-20.6 46-46S71.4 0 46 0zm0 91C21.1 91 1 70.9 1 46S21.1 1 46 1s45 20.1 45 45-20.1 45-45 45z"/><circle class="logo-bg" cx="46" cy="46" r="44"/><path class="logo-fg" d="M43 37c1 1 1.9 2 2.9 3l2.8 2.8c.8.8 1.6 1.6 2.5 2.4.7.7 1.4 1.3 2.1 2l5 5c1.4 1.4 2.8 3 4.2 4.4 1.3 1.3 2.9 2.7 4.2 4.1 1.3 1.3 2.7 2.9 4.1 4.2 1.3 1.4 2.8 2.8 4.2 4.1 1.7 1.4 2.6 3.7 1.7 5.6-1.2 2.9-4.5 3.6-6.7 1.8-1.6-1.3-3.1-2.9-4.6-4.3-2.8-2.7-5.5-5.5-8.1-8.2L44.9 51.5l-7.7-7.7c-.5-.5-.8-.5-1.3-.1-2.8 2.2-5.6 1.4-7.8-.8-2.2-2.1-4.3-4.2-6.4-6.3-1.8-1.8-3.5-3.6-5.4-5.5-1.5-1.5-3.2-3.1-4.7-4.6-.6-.6-1.1-1.1-1.5-1.8-.2-.4-.1-1.1.2-1.5.4-.6 1.1-1 1.8-.4.9.6 1.6 1.3 2.4 2.1l6.9 6.9c1.3 1.3 2.7 2.8 4.1 4.1.1.1.3.2.5.4.7-.7 1.3-1.2 2-1.9l1.4-1.4c.4-.4.5-.7 0-1.1-2-1.9-3.9-3.7-5.8-5.6s-3.8-3.9-5.7-5.9c-.5-.5-1.1-1.1-1.4-1.6-.5-.7-.3-1.5.3-2s1.3-.4 1.9.3c2.2 2.2 4.4 4.3 6.6 6.5s4.4 4.4 6.7 6.8c1.4-1.3 2.7-2.7 4.1-4-1.1-1.1-2.1-2.2-3.2-3.2-1-1-1.9-1.8-2.9-2.8-1.2-1.2-2.5-2.6-3.8-3.8-1.2-1.2-2.5-2.4-3.6-3.7-.6-.6-.5-1.3.2-1.9.6-.6 1.3-.7 2-.1 1.2 1.2 2.5 2.5 3.7 3.6l4 4c1.4 1.4 2.8 2.9 4.2 4.2l2.4 2.4c1 1 1.8 1.8 2.7 2.8.5.5 1.1 1 1.4 1.4 1.6 2.2 1.8 4.6.4 7-.2.1-.4.3-.6.7zM10.4 68.5c-1 .3-1.3-.3-1.3-1V60h1.3c0 .3.1.6.1.7 1-.3 1.9-.8 2.9-1 1.1-.1 2 .6 2.5 1.6.5-.4.9-.9 1.3-1.1 2.4-1.2 4.3-.2 4.5 2.5.1 1.9 0 3.7 0 5.7h-1.3v-5.6c-.1-1.1-.8-1.9-1.7-2-1.1-.1-2.1.6-2.3 1.7-.2 1.1-.2 2.2-.2 3.3v2.6h-1.4V63c-.1-1.4-.6-2.1-1.7-2.3-1.1-.1-2.3.7-2.5 1.9-.2 1.1-.1 2.1-.1 3.2-.1.1-.1 2.7-.1 2.7zm19 0h-1.5V57h1.4v4.6h5.6V57h1.5v11.5h-1.5v-5.6h-5.6c.1 1.8.1 3.7.1 5.6zm55.1-24.2c-.1.8-.2 1.7-.3 2.6-.3 1.6-1.2 2.7-2.7 3.2-1.6.6-3.1-.1-3.9-1.4-.6-.9-.8-2.1-1-3.2-.3-1.7 0-3.4.6-5.1.8-2.1 3.9-2.8 5.6-1.2 1.7 1.3 1.5 3.2 1.7 5.1zm-1.5 0c-.2-1.1-.3-2.1-.5-3.1s-1-1.6-1.8-1.7c-.9-.1-1.6.4-2 1.4-.8 2.3-.8 4.6.2 6.9.4 1 1.1 1.1 1.8 1 .8 0 1.5-.3 1.7-1.2l.6-3.3zM59.2 79.8v-4.6h1.3v1.3c0 2.9-.1 5.6 0 8.5 0 1.1-.3 1.4-1.3 1.5 0-.2-.1-.4-.2-.8-.8 1.4-1.9 1.7-3.2 1.5-1.3-.2-2.2-1.1-2.7-2.5-.7-1.8-.4-3.5.5-5.2 1.1-1.6 4.1-1.6 5.6.3zm.1 3.1c-.2-.8-.4-1.6-.7-2.3-.7-1.3-2.7-1.4-3.4-.2-1.1 1.5-1.1 3.4 0 4.9.7 1 3 1 3.4-.1.3-.7.5-1.5.7-2.3zm-16.6.2h-6.5c-.1 1.8 1 2.9 2.8 2.9 1.1 0 2.1-.3 3.2-.5.2 1.1.2 1.1-1.1 1.5-1.4.5-2.9.5-4.2-.1-1.7-.9-2.5-2.4-2.3-4.2.1-1.4.3-2.8 1.7-3.6 1.6-1 3.3-1.1 5 .1.6.4.9 1.2 1.1 2 .2.5.2 1.1.3 1.9zm-1.6-.9c0-1.5-.9-2.6-2.2-2.7-1.6-.1-2.7 1-2.8 2.7h5zm10.5-50.6c-2.5 0-4-1.7-3.8-4.5.1-3 1.3-4.3 3.9-4.3s3.8 1.5 3.9 4.5c0 2.6-1.7 4.4-4 4.3zm2.5-4.3c-.2-.8-.3-1.5-.6-2.2-.6-1.3-2.4-1.6-3.3-.5-1.1 1.3-1.2 3.4-.3 4.9.5.8 1.4 1.1 2.4.9 1.2-.6 1.7-1.4 1.8-3.1zm4.5 4.1h-1.5v-8.5h1.4c0 .3.1.5.1.9.1-.1.2-.1.2-.1 1.2-1.1 3.3-1.3 4.4-.4.6.5 1 1.5 1.1 2.4.2 1.9 0 3.8 0 5.7H63v-5.6c-.1-1.2-.9-1.9-1.9-1.9-1.2 0-2.4.9-2.4 2-.1-.1-.1 5.5-.1 5.5zM40.1 12.8h-1.4V4.3h1.4c0 .2.1.5.1.9.1 0 .2-.1.2-.1 1.2-1.1 3.2-1.4 4.4-.4.6.5 1 1.5 1.1 2.4.2 1.9 0 3.8 0 5.8h-1.3V7.3c-.1-1.1-1-1.9-1.9-2-1.2 0-2.3.9-2.4 2-.1 1.4 0 2.9 0 4.3-.2.3-.2.7-.2 1.2zm13.6-8.5h1.4v8.5h-1.4c0-.4 0-.7-.1-.9-.8.3-1.4.9-2.3 1-2.1.2-3-.4-3.3-2.6-.3-1.9-.1-4-.1-6h1.2c0 1.6-.1 3.3 0 5 0 .7.3 1.6.8 2 1.3 1.1 3.4.2 3.5-1.6.1-1.4 0-2.9 0-4.3.3-.3.3-.7.3-1.1zm30 56.6c0-.3 0-.6.1-1h1.1c.7 2.7-.5 4.9-1.8 7.1-.1.2-.2.3-.3.5-.3.4-.7 1.1-1 1.1-.8.1-1.7.1-2.4-.3-1.1-.7-2-1.6-2-3.1 0-1.1 0-2.5.5-3.5 1.1-2.3 3.5-2.7 5.5-1 .1.1.1.3.1.4l.2-.2zm-5 3.2c.1 0 .1 0 .2.1 0 .5.1 1 .1 1.4.2 1.2.8 1.7 1.9 1.8 1.1.1 1.9-.4 2.4-1.3.5-1.1.6-2.3.1-3.3-.3-.7-1.1-1.3-1.7-1.7-.8-.4-1.7.1-2.1.8-.5.6-.6 1.4-.9 2.2zm-2.9-32.6h-1.2V23h1.2c0 .3 0 .6.1 1 .5-.3 1-.7 1.4-.9 1.6-.8 4-.4 4.4 2.3.1.4.1.7.1 1.1v5.1h-1.3v-5.2c0-1.5-.8-2.4-1.9-2.5-1.3-.1-2.5 1-2.6 2.4s0 2.9 0 4.3c-.2.2-.2.5-.2.9zM51.4 87.1H50v-5.5c0-1-.4-1.7-1.3-2-.9-.4-1.8-.2-2.3.6-.5.6-.8 1.3-.9 2-.1 1.3 0 2.6 0 3.9v1h-1.2v-8.5h1.2c0 .3 0 .7.1 1 .4-.3.8-.5 1.1-.8 2.2-1.2 4.5-.1 4.7 2.5.1 1.9 0 3.8 0 5.8z"/><path class="logo-fg" d="M51.2 67.3v4.5h-1.3V60.1l.2-.2c.6.6 1.2 1.1 1.8 1.6.1.1 0 .4-.1.6-.9 1.6-.7 3.2.2 4.6.3.5 1.1.7 1.7.7.6 0 1.1-.4 1.7-.8.3-.2.4-.7.5-1.1 1.4 1 1.5 1.3.3 2.4-1.7 1.3-3.1 1.2-5-.6zm-24.1 17c-1.3-.3-1.3-.3-1.3-1.7v-4h1.3c0 .3 0 .6.1 1 .4-.2.7-.5 1-.7 2.1-1.3 4.8-.1 5.2 2.4.2 1.1.1 2.3-.1 3.4-.1.6-.5 1.1-1 1.4-.3.2-1-.1-1.6-.1 1.4-1.6 1.3-3.3 1-5.1-.2-.9-1.2-1.4-2.1-1.4s-1.9.9-2.1 1.9c-.4.9-.3 1.8-.4 2.9zm11.6-23.4c-.4 0-.6-.1-1-.1V60c.3-.1.6-.1.9-.2v-2.4H40v2.4h3v1h-2.9v5.6c0 .2.5.6.8.6.7.1 1.3 0 2 0v1.3c-.8 0-1.5.1-2.3 0-1.2-.2-2-1.1-2.1-2.4.2-1.5.2-3.2.2-5zm5.6 0c-.3 0-.6-.1-.9-.1V60c.3-.1.6-.1 1-.2v-2.4h1.3v2.4h3v1h-2.9v5.5c0 .6.4.9 1 .9h1.9v1.2c-.2 0-.3.1-.5.1-3.1.1-3.7-.5-3.7-3.6-.2-1.3-.2-2.5-.2-4zM20.8 38.5c.6.4.9.9.6 1.5-1.6 4-1.2 7.3 1 12-.7-.2-1.2-.3-1.4-.6-2.6-3.7-3-8.6-.2-12.9zM3.1 41.3c2.8-.1 4 1.7 4 4.6 0 2.6-1.7 4.4-4 4.2 0-.4-.1-.7-.1-1 2.1-.8 2.8-1.6 2.7-3.6-.1-1.8-.9-2.8-2.7-3.2.1-.4.1-.7.1-1zm22 27.3h-1.2v-12h1.2v12zM8.8 41.4H10c0 .4 0 .7.1 1.1 1-1.1 2.1-1.4 3.5-1.2v1.1c-2.6-.2-3.6.8-3.6 3.3v4.1c0 .1 0 .1-.1.2H8.7c.1-2.9.1-5.7.1-8.6zm18.9 7.2c.3-.9.6-1.6.8-2.4 1.4.3 1.4.3 1 1.5-.1.3-.2.6-.4.8-.8 1.5-.8 1.5-2.4 1.3-1.1-2.8-2.1-5.5-3.2-8.4 2.9 1.7 3.1 4.7 4.2 7.2zm39.3 28c-3.3 1.1-4.4 4.3-2.7 7.7-.4.2-.7.4-1.2.8-.3-.9-.7-1.6-.8-2.4-.2-1.5-.4-3.1.6-4.5.5-.8 1.1-1.5 1.9-2.1 1.1-.8 1.3-.7 2.2.5zm3.8-53.7h1.4v8.5h-1.4v-8.5zM58.6 12.8h-1.4V4.5c1.4.1 1.4.1 1.4 1.5v6.8zm17.6 51.8c-1.1-.2-2.5.6-3.3-1h2c0-2.5-1.7-3.3-4.2-2.1l-.9-.9c1.7-1.1 3.5-1.2 5.2 0 1.1.9 1.3 2.4 1.2 4zM60.5 44v-1.1h9.9V44h-9.9zm10 2.1v1.1h-9.9c0-.3 0-.7-.1-1.1h10zm-36.7.9c0 1 .4 1.6 1.3 1.8 1.2.3 2.3-.1 3.1-1.1.7.7 1.3 1.4 1.9 2.1-.1 0-.1.1-.2.2h-1.3c-.1-.4-.1-.7-.2-1.1-1.3 1.3-2.9 1.8-4.6 1-1-.6-1.5-1.5-1.3-2.8.3-.1.7-.1 1.3-.1zm28.5-34.2H61v-7c1 .1 1.3.5 1.3 1.5-.1 1.9 0 3.7 0 5.5zM18.5 79.1c1.5-1.1 2.9-.9 4-.1 1.2.9 1.5 2.2 1.7 3.7-1-.2-1.5-.7-1.9-1.5-.4-1-1.1-1.7-2.3-1.6-.4-.1-.8-.3-1.5-.5zm26-56.2h1.2V29c-.9-.9-1.5-1.8-1.3-3.2.2-.8.1-1.9.1-2.9zM7.9 26c1.2.5 1.4 1.3 1.3 2.5-.1 1 0 1.9 0 2.9H7.9V26zM32 8.9V10c-1.6 0-3.3.1-4.9 0-.4 0-.8-.6-1.4-1.1H32zm11.3 14v.9c-.9 0-1.8.2-2.6-.1-1.1-.4-1.8-1.9-1.7-3.3h1.2v2.4c1.1.1 2.1.1 3.1.1zM84 26.3c1 1.6 1.7 3.3 1.1 5.2H84v-5.2zm3.1 21.8h1.2c.5 1.2-.5 2-.8 3-.2.8-.6.8-1.2.6.3-1.1.5-2.3.8-3.6zM64.7 14.6l.9-3.6h1.2c.3 1.5-.9 3.7-2.1 3.6zM7.5 57.1l-2 3.2c-.6-1-.8-1.6 0-2.6.6-.9 1.2-.7 2-.6zM28.1 6.6c1.2-.3 2.5-.7 3.8-1.1v1.3h-3.8v-.2zm25.3 37.6c-1.1-.7-1.9-1.3-1.3-2.8h1.3v2.8zm33.5-.8v-1.7h1.4v1.7h-1.4zM52 38h1.3v1.6H52V38zm18.8-18.6h1.4V21h-1.4v-1.6zM45.7 21h-1.2v-1.6h1.2V21z"/></svg>',
  103. clearSVG = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300"><path d="M150.3 125.2c1-1.2 1.7-2.1 2.5-2.9C191.4 83.6 230 45 268.6 6.5c6.8-6.8 14.7-8.3 22.3-4.2 9.4 5.1 12 17.6 5.4 26-1 1.3-2.2 2.5-3.3 3.7-38.5 38.5-77 77.1-115.6 115.6-.7.7-1.5 1.5-2.3 2.4.9.9 1.7 1.8 2.5 2.6l116 116c6.9 6.9 8.3 15 4 22.6-5.2 9.1-17.6 11.6-25.9 5.1-1.3-1-2.5-2.2-3.7-3.3-38.5-38.5-77.1-77-115.6-115.6-.7-.7-1.5-1.5-2.4-2.3-.9.9-1.8 1.7-2.6 2.5l-116 116c-6.9 6.9-15 8.3-22.6 4-9.1-5.2-11.6-17.6-5.1-25.9 1-1.3 2.2-2.5 3.3-3.7 38.5-38.5 77-77.1 115.6-115.6.7-.7 1.5-1.5 2.3-2.4-.9-.9-1.7-1.8-2.5-2.6l-116-116c-6.9-6.9-8.3-15-4-22.6C7.6-.3 20-2.8 28.3 3.7c1.3 1 2.5 2.2 3.7 3.3 38.5 38.6 77 77.1 115.6 115.6.7.8 1.5 1.5 2.7 2.6z"/></svg>',
  104. findSVG = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300"><path d="M223.7 239.9C164.9 288.8 80.3 279.7 33 224.7c-46.3-53.8-43.6-133 6.2-184.3 48.3-49.7 128.4-54 182.6-9.8 57.6 46.9 67.8 134 17.4 194 1.1.7 2.6 1.2 3.6 2.2 17.8 17.7 35.6 35.6 53.4 53.3 3.3 3.3 4.6 7.1 3.4 11.7-1.2 4.2-4.1 6.9-8.3 8-4.6 1.1-8.3-.6-11.5-3.9l-53.1-53.1c-1-1.1-2-1.9-3-2.9zm-87.9 9.1c62.4.2 113.2-50.5 113.2-113S198.9 23.2 136.2 22.9c-62.4-.5-113.1 50-113.4 112.7-.2 62.5 50.3 113.2 113 113.4z"/></svg>',
  105. menuSVG = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300"><path d="M281.5 68.9h-263C8.3 68.9 0 60.6 0 50.4s8.3-18.5 18.5-18.5h263c10.2 0 18.5 8.3 18.5 18.5s-8.3 18.5-18.5 18.5zm0 199.2h-263C8.3 268.1 0 259.8 0 249.6s8.3-18.5 18.5-18.5h263c10.2 0 18.5 8.3 18.5 18.5s-8.3 18.5-18.5 18.5zm0-99.6h-263C8.3 168.5 0 160.2 0 150s8.3-18.5 18.5-18.5h263c10.2 0 18.5 8.3 18.5 18.5s-8.3 18.5-18.5 18.5z"/></svg>',
  106. closeSVG = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300"><path d="M5.8 268.1 268.1 5.8c7.2-7.2 18.9-7.2 26.2 0 7.2 7.2 7.2 18.9 0 26.2L31.9 294.2c-7.2 7.2-18.9 7.2-26.2 0-7.2-7.2-7.2-18.9.1-26.1z"/><path d="m31.9 5.8 262.3 262.3c7.2 7.2 7.2 18.9 0 26.2-7.2 7.2-18.9 7.2-26.2 0L5.8 31.9c-7.2-7.2-7.2-18.9 0-26.2 7.2-7.2 18.9-7.2 26.1.1z"/></svg>',
  107. colorsSVG = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300"><path d="M132.6 108.6c-10-11.5-12.7-23.6-6.8-36.9 7.1-15.9 23.6-22.9 40-17 2.4.9 3.7.3 5.4-1.4 12.4-12.5 24.8-25 37.2-37.4C224.2.1 246.7-4.3 266.8 4.4c21 9.1 33.9 28.9 33.1 51.1-.5 13.5-5.6 25.1-15.1 34.7-12.7 12.8-25.4 25.6-38.3 38.3-1.6 1.6-1.8 2.8-1.1 4.9 7.5 21.7-8.8 44.3-31.1 43.3-8.1-.4-15-3.8-21.8-10.2-.7 1.2-1.2 2.5-2.1 3.5-29.1 29.3-58.3 58.5-87.5 87.8C96 264.6 88.1 269 78.1 269c-1 0-2.2.8-3 1.6-6.2 6.1-12.4 12.2-18.4 18.4-14.3 14.8-31.8 13.2-46.7 3.1-7.9-5.4-10.3-14.8-10-24.4.3-8.8 4.1-16.1 10.2-22.2 6.3-6.3 12.6-12.6 18.8-19 1-1 1.8-2.6 1.9-4 .6-9.3 4.2-17.1 10.9-23.7 29.3-29.3 58.5-58.6 87.8-87.9.9-.8 1.9-1.4 3-2.3zm15 14.5c-23.1 23.2-46.3 46.4-69.4 69.6 0 0 .4.1.8.1 19.2 0 38.5 0 57.7-.1 1.3 0 2.9-.9 3.9-1.9 11.9-11.8 23.7-23.6 35.4-35.4.7-.7 1.3-1.5 1.8-2-10.2-10.3-20.3-20.5-30.2-30.3z"/></svg>',
  108. translateSVG = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300"><path d="M85 129.4c7.9-17.8 14-35.5 18.5-54.5H20.1C9.5 74.9 2 68.9.2 59.2c-1.8-9.8 5.1-19.6 14.9-21.3 2-.3 4.1-.4 6.2-.4H75V25.7c0-2.3-.1-4.6 0-6.9C75.4 8.1 83.4 0 93.7 0c10.3 0 18.6 8.2 18.8 18.9.1 6.1 0 12.1 0 18.5h4.7c16.8 0 33.7-.1 50.5 0 11.7.1 19.9 8.3 19.6 19.5-.2 8.8-6.8 16.8-15.6 17.5-8.6.7-17.3.5-26 .4-2.8 0-4 .6-4.7 3.5-6.3 28.8-16.3 56.3-29.7 82.5-1.3 2.5-1.5 4.1.6 6.3 4.9 5.1 9.5 10.5 14.3 15.7 7.7 8.4 7.8 19.8 0 27.2-7.9 7.5-19.5 6.8-27.4-1.5-3.1-3.3-6.1-6.6-9.3-10C84.2 205.8 79 213 73.6 220c-12.5 16-26.4 30.7-41.4 44.2-8.2 7.4-19.6 7.2-26.9-.5-7.2-7.7-6.9-19.3 1.3-26.8 19.2-17.5 36.3-36.8 50.9-58.2 1.8-2.6 3.3-5.5 5.3-7.9 2.3-2.7 1.4-4.6-.2-7.3-8.7-14.3-17.4-28.7-25.5-43.4-4.5-8-2-17.4 4.9-23 6.7-5.4 16.7-5.5 23.3.1 2.3 1.9 4 4.5 5.5 7.1 4.4 7.6 8.5 15.3 12.8 23 .2.6.6 1.1 1.4 2.1zm120.9-17.1c8.3.3 14 4.1 17.6 11.3 8.5 17.1 17.1 34.2 25.7 51.2 16 32 32 64 48.1 95.9 2.6 5.2 3.8 10.5 1.6 16.2-2.9 7.6-8.5 11.9-16.5 12.4-7.9.5-14-3-17.7-10-4.2-8-8.2-16-12.1-24.2-1.1-2.3-2.3-3.2-4.9-3.2-27.6.1-55.2.1-82.7 0-2.6 0-3.9.9-4.9 3.2-3.8 7.9-7.8 15.7-11.7 23.5-5.2 10.1-15.9 14-25.5 9.3-9.6-4.7-13.1-15.8-8-25.9 24.7-49.4 49.5-98.8 74.2-148.2 3.3-7 8.9-11.1 16.8-11.5zM232 224.4c-8.7-17.4-17.1-34.2-25.8-51.5-8.8 17.5-17.2 34.3-25.8 51.5H232z"/></svg>',
  109. pagesSVG = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300"><path d="M150 0C67.2 0 0 67.2 0 150s67.2 150 150 150 150-67.2 150-150S232.8 0 150 0zM82.1 136.1H28.2c2.2-20.1 9-38.4 20.3-55C62.4 60.7 80.8 45.9 104.4 36 89 68.2 83.8 101.7 82.1 136.1zm22 127.4c-37.1-13.6-71.4-52.6-75.8-99.6H82c1.8 34.2 6.9 67.8 22.1 99.6zm39.5-233.9c4.5-3.3 8.7-3.5 12.9.2 4.1 3.6 8 7.7 11 12.3 8.7 13.5 13.3 28.7 16.8 44.2 3.6 15.8 5.6 31.9 6.2 48.1 0 .5 0 1-.1 1.9h-80.7c0-2.1-.1-4 0-6 1.5-24.2 5.3-48 14.1-70.8 3.1-8.2 6.9-16.1 12.5-22.9 2.1-2.6 4.6-5 7.3-7zm-34 134.2h81c-.3 5.1-.6 9.9-1 14.8-1.9 21.2-5.7 41.9-13.4 61.9-3.2 8.3-7 16.2-12.6 23.1-1.9 2.3-4 4.5-6.3 6.3-5.1 3.9-9.8 4.3-14.5-.1-4.5-4.2-8.7-9.1-11.9-14.4-8.9-15-13.7-31.6-16.6-48.7-2.2-13.1-3.2-26.4-4.8-39.6 0-1 .1-2.1.1-3.3zm86.3 100c15.2-31.8 20.4-65.4 22.1-100h53.6c-2.6 36.5-28.6 81.1-75.7 100zM218 136.2c-1.8-34.3-6.9-68-22.2-99.9 43.8 17.1 72.6 59.6 75.8 99.9H218z"/></svg>',
  110. autoSVG = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300"><path d="M126 171.8h48l9 24.4c.8 2 1.9 3.6 3.6 4.7s3.4 1.7 5.4 1.7c3.5 0 6.2-1.4 8.1-4.1s2.2-5.8.9-9L162.8 88.9c-.8-2-1.9-3.6-3.6-4.7s-3.4-1.7-5.4-1.7h-7.5c-2 0-3.8.6-5.4 1.7s-2.8 2.7-3.6 4.7L99.4 189.8c-1.3 3-1 5.9.8 8.6s4.4 4.1 7.9 4.1c2 0 3.8-.6 5.4-1.7s2.8-2.7 3.6-4.7l8.9-24.3zm6-17.3 17.2-49.5h1.5l17.2 49.5H132zM150 300c-20.8 0-40.3-3.9-58.5-11.8s-34.1-18.6-47.6-32.1-24.2-29.4-32.1-47.6S0 170.8 0 150c0-8 .6-16 1.9-24s3.1-15.9 5.6-23.6c1.3-4 3.8-6.7 7.7-8.1s7.6-1.1 11.1.9c3.8 2 6.4 4.9 8.1 8.8s1.8 7.9.6 12.2c-1.5 5.5-2.7 11.1-3.6 16.7-.9 5.6-1.3 11.3-1.3 17.1 0 33.5 11.6 61.9 34.9 85.1s51.5 34.9 85 34.9 61.9-11.6 85.1-34.9S270 183.5 270 150s-11.6-61.9-34.9-85.1S183.5 30 150 30c-6 0-11.9.4-17.8 1.3s-11.7 2.2-17.4 3.9c-4.3 1.2-8.2 1.1-12-.4s-6.5-4.1-8.2-7.9-1.8-7.6-.2-11.4 4.4-6.4 8.4-7.7c7.5-2.7 15.2-4.8 23.2-6S142 0 150 0c20.7 0 40.2 3.9 58.5 11.8s34.1 18.6 47.6 32.1 24.2 29.4 32.1 47.6S300 129.3 300 150s-3.9 40.2-11.8 58.5-18.6 34.1-32.1 47.6-29.4 24.2-47.6 32.1S170.7 300 150 300zM52.5 75c-6.2 0-11.6-2.2-15.9-6.6S30 58.8 30 52.5s2.2-11.6 6.6-15.9S46.2 30 52.5 30s11.6 2.2 15.9 6.6C72.8 41 75 46.3 75 52.5s-2.2 11.6-6.6 15.9c-4.3 4.4-9.6 6.6-15.9 6.6zm7.5 75c0-25 8.8-46.2 26.2-63.8S125 60 150 60s46.2 8.7 63.8 26.2S240 125 240 150s-8.7 46.2-26.2 63.8S175 240 150 240s-46.3-8.8-63.8-26.2S60 175 60 150z"/></svg>',
  111. moonSVG = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300"><path d="M150.3 300c-42 0-77.6-14.5-106.7-43.6S0 191.7 0 149.7c0-38.4 12.5-71.7 37.6-100S94.6 5 133.6.2c3.6-.6 6.8-.1 9.6 1.5s5 3.5 6.7 6.1c1.7 2.5 2.6 5.4 2.7 8.8s-.9 6.5-3.1 9.6c-4.7 7.2-8.3 14.9-10.6 23-2.4 8.1-3.5 16.6-3.5 25.5 0 25.1 8.8 46.3 26.3 63.9s38.8 26.3 63.9 26.3c8.6 0 17.2-1.3 25.7-3.8s16.1-6 22.8-10.4c3.1-1.9 6.2-2.9 9.4-2.7 3.2.1 6.1.9 8.6 2.3 2.8 1.4 4.9 3.5 6.5 6.3 1.5 2.8 2 6.1 1.5 10-3.9 38.4-20.2 70.3-49.1 95.6S188.4 300 150.3 300z"/></svg>',
  112. sunSVG = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300"><path d="M150 218.2c-18.9 0-34.9-6.6-48.2-19.9s-20-29.4-20-48.3 6.6-34.9 19.9-48.2 29.4-19.9 48.2-19.9 34.9 6.6 48.2 19.9S218 131.2 218 150s-6.6 34.9-19.9 48.2-29.2 20-48.1 20zM13.6 163.6c-3.9 0-7.1-1.3-9.7-3.9S0 153.9 0 150s1.3-7.1 3.9-9.7c2.6-2.6 5.9-3.9 9.7-3.9h27.3c3.9 0 7.1 1.3 9.7 3.9 2.6 2.6 3.9 5.9 3.9 9.7s-1.3 7.1-3.9 9.7-5.9 3.9-9.7 3.9H13.6zm245.5 0c-3.9 0-7.1-1.3-9.7-3.9s-3.9-5.9-3.9-9.7 1.3-7.1 3.9-9.7c2.6-2.6 5.9-3.9 9.7-3.9h27.3c3.9 0 7.1 1.3 9.7 3.9 2.6 2.6 3.9 5.9 3.9 9.7s-1.3 7.1-3.9 9.7c-2.6 2.6-5.9 3.9-9.7 3.9h-27.3zM150 54.5c-3.9 0-7.1-1.3-9.7-3.9s-3.9-5.9-3.9-9.7V13.6c0-3.9 1.3-7.1 3.9-9.7S146.1 0 150 0s7.1 1.3 9.7 3.9c2.6 2.6 3.9 5.9 3.9 9.7v27.3c0 3.9-1.3 7.1-3.9 9.7-2.6 2.6-5.8 3.9-9.7 3.9zm0 245.5c-3.9 0-7.1-1.3-9.7-3.9-2.6-2.6-3.9-5.9-3.9-9.7v-27.3c0-3.9 1.3-7.1 3.9-9.7s5.9-3.9 9.7-3.9 7.1 1.3 9.7 3.9c2.6 2.6 3.9 5.9 3.9 9.7v27.3c0 3.9-1.3 7.1-3.9 9.7-2.6 2.6-5.8 3.9-9.7 3.9zM63.4 82.5 48.8 68.2c-2.7-2.5-4-5.7-3.9-9.5.1-3.9 1.4-7.2 3.9-9.9 2.7-2.7 6-4.1 9.9-4.1s7 1.4 9.5 4.1l14.3 14.7c2.5 2.7 3.8 5.9 3.8 9.5 0 3.6-1.2 6.8-3.8 9.5s-5.6 4-9.4 3.9c-3.7-.1-7-1.4-9.7-3.9zm168.4 168.7-14.3-14.7c-2.5-2.7-3.8-6-3.8-9.7s1.2-6.9 3.8-9.4c2.5-2.7 5.6-4 9.4-3.9 3.8.1 7 1.4 9.7 3.9l14.7 14.3c2.7 2.5 4 5.7 3.9 9.5s-1.4 7.2-3.9 9.9c-2.7 2.7-6 4.1-9.9 4.1s-7.1-1.2-9.6-4zM217.5 82.5c-2.7-2.5-4-5.6-3.9-9.4s1.4-7 3.9-9.7l14.3-14.7c2.5-2.7 5.7-4 9.5-3.9 3.9.1 7.2 1.4 9.9 3.9 2.7 2.7 4.1 6 4.1 9.9s-1.4 7-4.1 9.5l-14.7 14.3c-2.7 2.5-5.9 3.8-9.5 3.8s-6.8-1.2-9.5-3.7zM48.8 251.2c-2.7-2.7-4.1-6-4.1-9.9s1.4-7 4.1-9.5l14.7-14.3c2.7-2.5 6-3.8 9.7-3.8s6.9 1.2 9.4 3.8c2.7 2.5 4 5.6 3.9 9.4s-1.4 7-3.9 9.7l-14.3 14.7c-2.5 2.7-5.7 4-9.5 3.9s-7.3-1.4-10-4z"/></svg>',
  113. profileSVG = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300"><path d="M149.9 165.4c17.8 0 35.7-1.1 53.3.3 24.2 1.9 44.4 12.6 58.4 33.1 13.5 19.8 11.3 43.5-4.9 61.3-18 19.7-40.6 30.9-66.4 35.9-32.3 6.2-64.5 5.7-96.1-4-20.2-6.3-37.7-17-51.8-32.9-18.3-20.8-17.1-48.9 3.2-69.5 16.5-16.8 37.1-24.4 60.4-24.6 14.6-.2 29.3 0 43.9 0v.4zm75-92.6c1.7 40-30.9 75.5-71.1 77.1-42.3 1.8-77-30.2-78.7-72.7C73.5 37.7 105.8 2.4 144.8.1c42.7-2.4 78.7 30.2 80.1 72.7z"/></svg>',
  114. logoutSVG = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300"><path d="M150.2 300c-74.1-.3-137.3-53.8-148.3-127.4-7.7-51.8 8.3-96.3 46.1-132.7 10.3-9.9 25-9.6 34.4.2 9.3 9.7 8.7 24.5-1.6 34.4-23.3 22.4-34.3 49.6-32.7 81.9 2.2 43.4 35.3 82.8 77.7 92.5 57 13 111.4-20.6 123.9-77.5 8.1-36.8-2.4-68.9-29.1-95.4-5.8-5.8-9.9-12-9.4-20.4.5-9.8 5.4-17 14.4-20.9 9.3-4 18.1-2.4 25.6 4.4 15.6 14.1 27.6 30.8 36 50.1 39.5 89.6-16 192.4-112.6 208.4-8.1 1.3-16.3 1.6-24.4 2.4z"/><path d="M174 46.9c0-7.6 0-15.2-.1-22.8-.2-13.8-10.5-24-23.8-24.1-13.5-.1-23.9 10.3-24 24.2-.1 14.8-.1 29.6-.1 44.4 0 16.1 0 32.3.1 48.4 0 7.4 2.7 13.7 8.5 18.4 7.6 6.3 16.2 7.5 25.1 3.6 9.4-4.1 14.1-12 14.2-22.2.1-7.6.1-15.3.1-22.9v-47z"/></svg>';
  115.  
  116. const navSVGs = {
  117. "discussionsSVG": '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300"><path d="M300 148.4c-.3 74.4-51.6 135.8-123.1 149-31.4 5.8-61.5 1.7-90.4-11.9-2.4-1.1-4.5-1.3-7-.7-20.9 4.8-41.8 9.4-62.7 14.4-10.2 2.5-18.6-5.7-16-16.3 5.2-21.2 9.8-42.6 14.6-63.9.3-1.4.1-3.1-.5-4.4-24.1-55-19.3-107.4 16.6-155.9C54.7 27.5 86.4 8.9 124.8 2.2c77.6-13.4 149.6 35.2 169.7 107.2 3.7 13.4 5.4 27 5.5 39zm-150-11.2h53.2c3.5 0 7 .1 10.5-.1 7.1-.5 12.3-7.4 10.9-14.5-1.3-6.3-6.1-10.1-13.2-10.1H86.7c-8.1.7-13.3 8.2-11.1 15.9 1.6 5.4 6.3 8.7 12.7 8.7 20.8.1 41.3.1 61.7.1zm-15.4 25.5h-29.8c-6 0-12.1-.2-18.1.1-7.4.4-12.5 7.4-10.9 14.6 1.3 6.3 6.2 9.9 13.6 9.9h91.3c5.7-.1 10-2.4 12.2-7.8 3.4-8.3-2.6-16.7-12-16.8-15.5-.1-30.9 0-46.3 0z"/></svg>',
  118. "helpSVG": '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300"><path d="M125.9 212.1c-.2 6.2-2.3 12.4-7.3 17.4-17.4 17.5-34.7 35.1-52.2 52.4-9.8 9.7-23.9 10.6-34.6 2-5.8-4.6-11.2-9.9-15.9-15.7-8.8-10.8-6.9-26 3.8-36.6l41.1-40.8c2.2-2.2 4.4-4.5 6.5-6.7 12.2-12.9 29.1-13.3 41.7-.8 3.2 3.1 6.4 6.3 9.4 9.5 4.9 5 7.5 11.3 7.5 19.3zm84.9-86.2c-6.4-.1-12.3-2.2-17.3-6.8-3.8-3.6-7.5-7.3-11.2-11-11.2-11.4-11.2-27.6 0-38.9 13.4-13.6 27-27 40.5-40.5 2.8-2.8 5.5-5.6 8.2-8.4 11-11.6 28.9-14.5 41.6-.7 2.7 2.9 5.7 5.7 8.5 8.5 11.4 11.6 11.5 27.6.1 39.1-12.4 12.5-24.9 25-37.4 37.4-4.4 4.4-8.8 8.9-13.3 13.2-5.4 5.4-11.8 8.1-19.7 8.1zm-84.9-36.5c.2 6.4-2.5 11.7-6.5 16.4-3.6 4.2-7.5 8.2-11.6 12.1-11.6 11.1-27.5 10.9-38.9-.4-15-14.9-29.8-29.8-44.8-44.7-2.1-2.1-4.3-4.2-6.4-6.4-10-10.8-10-26.5.1-37.2 3.2-3.3 6.4-6.5 9.7-9.7 12.1-12 28-12.1 40.1-.1C82.7 34.1 97.6 49 112.4 64c3.4 3.4 7 6.7 9.3 10.8 2.5 4.3 3.5 9.5 5.1 14.2-.2.1-.5.3-.9.4zm163.6 163.2c0 6.4-2 12.1-6.3 16.8-4.4 4.8-8.9 9.4-13.7 13.7-10.4 9.3-26.3 8.4-36.6-1.8-11.9-11.8-23.7-23.6-35.5-35.5-5.4-5.4-10.7-10.8-15.9-16.2-9.4-9.8-10.1-24.8-1.4-35 4.5-5.2 9.4-10.2 14.7-14.6 10.5-8.9 25.8-7.8 36.1 2.4 14.4 14.2 28.6 28.5 42.9 42.8 2 2 4 3.9 6 5.8 6 5.9 9.6 12.9 9.7 21.6zM17.6 79.9c1.8 2.3 3.3 4.4 5 6.2 13.1 13.2 26.4 26.3 39.6 39.5 1 1 2 2.2 3.3 2.8 4.5 2.3 4.9 5.8 4 10.4-1.6 8.6-1.2 17.3.5 25.9.4 2.1.2 3.4-1.8 4.7-2.8 1.8-5.3 4.1-7.7 6.4-13.6 13.5-27.2 27.1-40.7 40.7-.9.9-1.4 2-2.2 3.3-23-40.5-23.9-97.1 0-139.9zM81.1 283c7-7.2 14-14.1 20.7-21.2 9.9-10.3 19.6-20.7 29.5-31 .7-.7 2.1-1.1 3.1-.9 10.4 1.9 20.8 1.9 31.3 0 .9-.2 2.3.2 2.9.8 6.5 6.9 12.7 14 19.3 20.8 9.4 9.7 19.1 19.1 28.7 28.6.9.9 1.7 1.8 2.5 2.7-38.3 21.8-94.9 24-138 .2zM220 17.7c-2.5 2.1-4.9 3.7-6.9 5.7-13 13-26 26-38.9 39.1-1.8 1.8-3.5 3.8-4.9 5.9-1.2 1.9-2.5 2-4.5 1.6-10-1.9-20-1.9-29.9 0-2.1.4-3-.2-4.4-1.8-4.5-5.3-9.1-10.4-14-15.3-11-11.1-22.1-22.1-33.1-33.1-.9-.9-1.7-1.8-2.5-2.7C119.8-5 176.5-6.6 220 17.7zm62.8 63.1c23.5 42.1 22.5 98.6-.1 138.3-4.7-4.7-9.3-9.4-14-14-10.5-10.5-21.1-20.9-31.6-31.3-1-1-2-2.3-3.2-2.9-4.1-1.9-4.4-4.7-3.7-8.8 1.7-9.2 1.3-18.4-.4-27.6-.2-1 .2-2.5.9-3.1 11.7-11.3 23.5-22.5 35.2-33.8 5.7-5.5 11.3-11.2 16.9-16.8z"/></svg>',
  119. "librariesSVG": '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300"><path d="M64.1 150.2v126.1c0 14.9-8.7 23.6-23.6 23.6H22.8C9 299.9 0 291 0 277.1V30.5c0-4.6-.2-9.2.6-13.7C2.4 7.2 10.9.3 20.8.1c7-.1 14-.1 21 0 13.1 0 22.3 9.2 22.3 22.3v127.8zm21.3-.4V23.7C85.4 8.9 94.1.1 108.8.1h18.7c12.7.1 22 9.2 22 21.9v256.3c0 12.5-9.3 21.6-21.8 21.7-6.8.1-13.6.1-20.4 0-12.7-.1-21.8-9.3-21.9-22V149.8zM300 271.2c-.2 9.4-6.1 17.8-15.1 20.5-7.3 2.2-14.7 4.3-22.2 6-11.7 2.8-22.5-4-25.7-16-7.4-27.7-14.8-55.5-22.2-83.3-14.5-54.2-29-108.4-43.4-162.6-3.6-13.6 2.6-24.6 16.1-28.3 6.1-1.7 12.2-3.3 18.3-4.9 12.8-3.3 23.8 3 27.2 15.8 7.3 27.2 14.6 54.4 21.8 81.6 14.6 54.8 29.2 109.5 43.8 164.3.6 2.3.9 4.6 1.4 6.9z"/></svg>',
  120. "moderator_actionsSVG": '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300"><path d="M.3 167.5h78.4c6.7 0 11.3-3.7 11.8-9.3.6-6.3-3.7-11.3-10.1-11.6-2.3-.1-4.6 0-6.9 0H3.9c.3-1.1.4-2 .7-2.7 6.3-16.9 16.4-30.4 33.9-36.7 4.7-1.7 10-2.3 15-2.4 14.6-.3 29.2-.1 44.3-.1-.4-1.2-.7-2.1-1.1-2.9-2.2-4.5-4.6-8.9-6.7-13.5-5.9-12.5 2-25.4 15.8-25.6 10.8-.1 21.6 0 32.4 0 7.6 0 13 3.6 16.4 10.4 4.8 9.6 9.6 19.1 14.3 28.7 1 2.2 2.2 3 4.7 3 12-.1 24-.1 36.8-.1-20.9 18.9-29.2 42.4-29 69.9h-44.1c-6.6 0-11.1 3.9-11.5 9.6-.4 6.6 4.1 11.3 11 11.3 14.8.1 29.6.1 44.5 0 2.4 0 3.5.6 4.3 3.1 4.3 14.4 11.8 26.9 23 37.1.4.4.8.8 1.1 1.2 0 0 0 .2-.1.7h-3.7c-49.8 0-99.6-.3-149.4.1-19.1.1-33.1-8-43.6-23.1C3.4 200.8-.4 185.5 0 169.1c0-.4.2-.8.3-1.6z"/><path d="M195.2 170.9c.4-18.2 5.2-34.8 17.1-48.8 19.6-23.1 49.9-23.4 69.9-.7 23.9 27 23.6 73.5-.7 99.9-10 10.9-22.2 17.1-37.4 15.9-13.1-1.1-23.5-7.6-31.8-17.4-12-14.1-16.7-30.8-17.1-48.9z"/></svg>',
  121. // "otherSVG": '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300"><path d="M135 92.2c0 9 .1 18 0 27-.1 9.2-6 15.7-14.9 15.8-19.8.1-39.6.6-59.3-.5C31.4 132.9 5.3 108 1 78.7-4.7 39.9 20.5 6.1 59.5.6c34.3-4.8 68.9 20.4 74.2 54.9 1.8 12.1 1.4 24.5 2 36.7h-.7zm72.9 42.9h-26.3c-10.5 0-16.6-6.2-16.6-16.6.1-19.2-.5-38.4.6-57.5 1.7-29.5 26.5-55.5 55.7-59.9 38.9-5.8 73.1 19.9 78.2 58.8 4.8 36.8-23.7 72.1-60.7 74.7-10.2.7-20.6.1-30.9.1v.4zm-43 74.7v-28.1c0-10.5 6.1-16.7 16.6-16.7 19.2.1 38.4-.5 57.6.6 29.6 1.7 55.2 26.1 59.8 55.4 5.8 36.6-16.9 69.7-53 77.5-38.6 8.4-77.4-20.2-80.4-59.6-.7-9.7-.1-19.4-.1-29.1h-.5zM90.3 165h28.1c10.5 0 16.7 6.1 16.6 16.6-.1 19.2.5 38.4-.6 57.6-1.7 29.5-26.2 55.2-55.4 59.8-36.6 5.7-69.7-17-77.5-53.1-8.3-38.6 20.2-77.3 59.7-80.4 9.7-.7 19.4-.1 29.1-.1v-.4z"/></svg>',
  122. "scriptsSVG": '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300"><path d="M1 150.1c0-11.2 1.1-22.2 4-33.1 1.6-6.1 6.3-9.8 12.8-9.4 17.3.9 31.5-9.8 34.6-25.5 1.7-8.7-.4-16.8-5-24.4-1.1-1.8-2.1-3.9-2.6-6-.8-3.2.2-6 2.6-8.4C63.9 26.8 83.4 15 106 8.4c6.6-1.9 10.5-.3 13.6 5.8 4.1 8.4 10.4 14.5 19.3 17.5 15.4 5.2 31.9-1.4 39.5-15.8 4.2-8 8-9.6 16.7-6.9 21.4 6.7 40.2 18 56.5 33.3 3.7 3.5 4 8.6.5 13.5-4.6 6.5-6.5 13.6-6 21.5.9 17.5 16.8 31.2 34.2 29.5 7.3-.7 11.7 2.4 13.7 9.5 3.7 13 7.1 26.1 5.8 39.7-.9 9.3-2.3 18.6-4.1 27.8-1.2 6.2-5.4 8.9-11.8 8.7-16.7-.6-30.7 8.6-34.6 23-2.6 9.4-.9 18.1 4.2 26.3 4.8 7.8 4.4 11.4-2.5 17.5-16.4 14.5-34.7 25.6-55.8 32.1-7.2 2.2-11.9.2-15.4-6.4-6.3-11.9-16.2-18.3-29.6-18.2-13.3.1-23 6.7-29.1 18.5-3.3 6.4-7.9 8.4-14.8 6.3-22.5-6.9-41.9-18.9-59.1-34.8-3.7-3.4-3.9-8.6-.5-13.5 4.6-6.5 6.4-13.7 6-21.5-.9-17.4-16.9-31.2-34.2-29.4-8.7.9-12.2-1.2-13.8-9.8-2-10.7-3.2-21.5-4.7-32.3.3-.1.6-.1 1-.2zm218.3-.1c-1.1 1.1-1.9 2-2.7 2.9-7.2 7.3-14.6 14.4-21.7 21.8-4.3 4.5-4.1 10.5.2 14.8 4.2 4.1 10.1 4.3 14.5 0 10.8-10.6 21.5-21.3 32.1-32.1 4.3-4.4 4.3-10.2 0-14.5-10.6-10.8-21.3-21.5-32.1-32.1-4.4-4.3-10.6-4.1-14.8.2-4.1 4.2-4.2 10.1 0 14.6 3 3.2 6.2 6.3 9.3 9.4 5.1 4.9 10.1 9.9 15.2 15zm-139.8.2c.9-.9 1.4-1.5 1.9-2 7.5-7.5 15.1-14.9 22.4-22.5 4.3-4.5 4.1-10.6-.1-14.8-4.2-4.1-10.2-4.3-14.6-.1-10.8 10.6-21.5 21.3-32.1 32.1-4.2 4.3-4.4 10.1-.3 14.3 10.8 11 21.7 22 32.8 32.7 4 3.9 9.7 3.6 13.8-.1 4.2-3.9 4.8-9.5 1.4-14-1-1.3-2.2-2.4-3.4-3.6-7.1-7.4-14.4-14.6-21.8-22zm48.4 52.9c4.9 0 8-2.7 10-6.8l41.7-83.4c2.7-5.5.7-11.5-4.6-14-5.4-2.6-10.3-.6-13.3 5.3-14 27.9-27.9 55.8-41.9 83.7-.4.9-.9 1.8-1.2 2.7-1.9 6.1 2.8 12.5 9.3 12.5z"/></svg>',
  123. "searchSVG": '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300"><path d="M291 250.7c-18.7-18.7-37.3-37.4-56.1-56-1.8-1.7-1.8-2.8-.6-4.9 11.7-19.7 17.3-41.1 18.1-64-1.1-8.5-1.7-17.2-3.4-25.7C234.7 28.5 159.5-16.6 89.8 5.6c-48.5 15.5-78.3 49-87.6 99.1C-4.7 142 4.6 176 28.7 205.3 68.4 254 136 265.8 190.3 234.1c1.8-1.1 2.9-1.1 4.4.5 13 13.1 26 26.2 39.1 39.2 6.4 6.4 12.6 13 19.3 19 12.4 11.2 31.7 8.9 41.5-4.6 8.4-11.5 7-26.8-3.6-37.5zm-165-47.2c-42.8 0-77.5-34.7-77.5-77.5S83.2 48.5 126 48.5s77.5 34.7 77.5 77.5-34.7 77.5-77.5 77.5z"/></svg>',
  124. "usersSVG": '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300"><path d="M150.2 285H79.9c-12.2 0-19.4-4.6-23.8-15.9-1.7-4.4-3-9.2-3.3-13.9-1-15-1.2-30 6.3-43.9 8.4-15.7 21.1-26 38.5-30.4 7.2-1.8 14.2-.8 20.8 2.6 21.1 11.1 42.1 11.2 63.2.1 8.3-4.3 16.8-4.5 25.5-1.6 24.4 8.3 40.1 30.1 40.6 56.6.2 8.8.7 17.6-2 26.1s-6.7 16.1-16.1 18.9c-2.9.8-6 1.2-9 1.2-23.5.2-46.9.2-70.4.2zm-.1-120c-37.5-.2-67.6-30.3-67.5-67.4.1-37.6 30.6-67.7 68.2-67.5 37 .2 67 30.8 66.8 68.2-.2 36.8-30.6 66.9-67.5 66.7zm-64.5-4.3c-30 11.4-48.2 32.8-54.5 64.2-4.1 0-7.9.3-11.8-.1-7.4-.6-12.9-4.4-15.6-11.3C2 209 .5 204.1.3 199.3c-.6-10.6-1-21.3 3.5-31.5 6.3-14.4 16.9-23.9 32-28.3 6.3-1.8 12.3-.8 18.5 1.7 6.3 2.6 13 4.3 19.5 6.5.8.3 2 .4 2.5 1 3.1 4 6.1 7.9 9.3 12zm129 0c3.3-4.1 6.3-8.1 9.5-12 .5-.6 1.6-.7 2.5-.9 6.4-2.1 13-3.7 19.2-6.3 6.6-2.8 12.9-3.6 19.8-1.5 20 6.1 33.9 23.8 34.4 44.7.2 7.7.2 15.6-1.4 23-2.8 12.8-9.6 17.4-22.6 17.4h-6.8c-6.5-31.4-24.5-52.9-54.6-64.4zm-18-140.6c19.8-8 38.8-6.9 55.9 5.8 19.3 14.4 26.6 34.2 21.2 57.6-4.5 19.9-17.5 32.9-37 40 9.9-43.6-3.5-77.8-40.1-103.4zM63.5 123.6c-19.5-7.1-32.1-20.2-37-40-5.5-22.1 3-44.9 21.5-57.9 17.4-12.2 36-13.5 55.7-5.5C67 45.7 53.6 79.9 63.5 123.6z"/></svg>',
  125. "homeSVG": '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 300 300"><path d="M171.7 209.3h-43.4v72.6c0 7.3-3.2 10.6-10.5 10.6H47.2c-7.1 0-10.3-3.3-10.3-10.4v-121c-1.2-.1-2.2-.2-3.2-.2h-17c-7.8-.1-13.2-3.6-15.6-10-2.4-6.4-.8-12.4 5-17.6C50.3 93 94.5 52.6 138.8 12.4c7.2-6.6 15.3-6.6 22.6 0 44.3 40.3 88.5 80.6 132.8 120.9 4.6 4.2 6.9 9.2 5.5 15.4-1.3 5.8-4.8 9.8-10.6 11.4-2.1.6-4.4.7-6.7.8-6.3.1-12.6 0-19.3 0v120.6c0 7.9-3.1 11-11 11h-69.4c-8 0-11-3-11-11.2v-72zM269.6 87c-22.8-20.7-45.1-41-67.8-61.6 1.6-.1 2.6-.2 3.5-.2h53.6c7.5 0 10.7 3.2 10.7 10.6V87z"/></svg>'
  126. };
  127.  
  128.  
  129. // Function for inserting new elements in the DOM.
  130. function elemake(tag, innr, attr) {
  131. let element = document.createElement(tag);
  132. if (innr) {element.innerHTML = innr;}
  133. if (!attr) {return element;}
  134.  
  135. for (let x = 0; x < attr.key.length; x++) {
  136. element.setAttribute(attr.key[x], attr.val[x]);
  137. }
  138. return element;
  139. }
  140.  
  141. // Get variables from URL
  142. function getVar(link) {
  143. let vars = {};
  144. link.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
  145. vars[key] = value;
  146. });
  147. return vars;
  148. }
  149.  
  150. // Light Theme Colors
  151. const lightCSS = `
  152. html, html[data-accent=default] {
  153. --engine-accent-color: #b42121;
  154. }
  155.  
  156. html, html[data-light=default] {
  157. --engine-background-1: #f6f6f6;
  158. --engine-background-2: #fbfbfb;
  159. --engine-background-2a: #e0e0e0;
  160. --engine-button-hover: #e8e8e8;
  161. --engine-search-bg: #fbfbfb;
  162. --engine-search-hover: #e8e8e8;
  163. --engine-text-1: #222222;
  164. --engine-text-2: #666666;
  165. --engine-text-2a: #444444;
  166. --engine-border-color: #e0e0e0;
  167. --engine-nav-bg-2: #f0f0f0;
  168. --engine-nav-bg-1: #f8f8f8;
  169.  
  170. --engine-logo-bg: var(--engine-text-color);
  171. --engine-logo-fg: var(--engine-background-1);
  172. }
  173. `.replace(/[\n\s]/g,'');
  174.  
  175. // Dark Theme Colors
  176. const darkCSS = `
  177. html, html[data-accent=default] {
  178. --engine-accent-color: #c42121;
  179. }
  180.  
  181. html, html[data-dark=default] {
  182. --engine-background-1: #161616;
  183. --engine-background-2: #1c1c1c;
  184. --engine-background-2a: #0e0e0e;
  185. --engine-button-hover: #262626;
  186. --engine-search-bg: #262626;
  187. --engine-search-hover: #2e2e2e;
  188. --engine-text-1: #eeeeee;
  189. --engine-text-2: #aaaaaa;
  190. --engine-text-2a: #cccccc;
  191. --engine-border-color: #2c2c2c;
  192. --engine-nav-bg-1: #161616;
  193. --engine-nav-bg-2: #212121;
  194.  
  195. --engine-logo-bg: var(--engine-background-1);
  196. --engine-logo-fg: var(--engine-text-color);
  197. }
  198. `.replace(/[\n\s]/g,'');
  199.  
  200. // General Redesign Excluding Colors
  201. const globalCSS = `
  202. :root {
  203. --header-min-height: 10.1rem;
  204. --header-main-height: 8.6rem;
  205. --engine-border-radius: 4px;
  206. --header-search-width: 70rem;
  207. --body-margin-xl2: calc(9.6rem + 3.2rem + 3.2rem);
  208. --main-nav-width: 40rem;
  209. --safe-transition: .1s;
  210. --font-sans: "Open Sans", sans-serif;
  211. --font-mono: "Fira Mono", monospace;
  212. }
  213.  
  214. html {
  215. font-size: 10px;
  216. }
  217. html.no-delay {
  218. --safe-transition: 0s;
  219. }
  220. html, html > body {
  221. height: 100%;
  222. width: 100%;
  223. line-height: 1.5;
  224. -webkit-text-size-adjust: 100%;
  225. -moz-tab-size: 4;
  226. -o-tab-size: 4;
  227. tab-size: 4;
  228. color: var(--engine-text-1);
  229. fill: var(--engine-text-1);
  230. }
  231. html > body {
  232. display: flex;
  233. flex-direction: column;
  234. background-color: var(--engine-background-2);
  235. font-size: 1.6rem;
  236. }
  237. html > body:has(#main-nav:not(.hidden)) {
  238. overflow: hidden;
  239. }
  240.  
  241. *, *::before, *::after {
  242. -webkit-tap-highlight-color: transparent;
  243. box-sizing: border-box;
  244. }
  245.  
  246. a, a:visited, a:active {
  247. text-decoration: none;
  248. color: var(--engine-text-1);
  249. fill: var(--engine-text-1);
  250. }
  251.  
  252. svg {
  253. overflow: visible;
  254. }
  255. svg .logo-bg {
  256. fill: var(--engine-logo-bg);
  257. }
  258. svg .logo-ring, svg .logo-fg {
  259. fill: var(--engine-logo-fg);
  260. }
  261.  
  262. .script-list li:not(.ad-entry) {
  263. padding: 0;
  264. }
  265.  
  266. #main-header {
  267. background: var(--engine-background-1);
  268. color: var(--engine-text-1);
  269. box-shadow: initial;
  270. padding: 0 3.2rem;
  271. min-height: -moz-fit-content;
  272. min-height: fit-content;
  273. }
  274. #main-header > .width-constraint {
  275. height: calc(var(--header-main-height) - 3.2rem);
  276. margin: 2.4rem auto 0 auto;
  277. padding: 0;
  278. display: flex;
  279. align-items: center;
  280. justify-content: space-between;
  281. }
  282. #main-header > .width-constraint:last-child {
  283. margin-bottom: 1.6rem;
  284. }
  285. #main-header > .search-options {
  286. font-size: 1.5rem;
  287. margin-top: 0.7rem;
  288. display: flex;
  289. gap: 1.3rem;
  290. transform: translateY(1px);
  291. padding-left: 14.1rem;
  292. color: var(--engine-text-2);
  293. }
  294. #main-header > .search-options a {
  295. display: flex;
  296. height: 2.75rem;
  297. font-weight: 700;
  298. transition-duration: 0.1s;
  299. }
  300. #main-header > .search-options a:hover, #main-header > .search-options a:focus {
  301. color: var(--engine-text-2a);
  302. }
  303. #main-header > .search-options a.active {
  304. color: var(--engine-accent-color);
  305. border-bottom: 2px solid var(--engine-accent-color);
  306. }
  307. #main-header a, #main-header a:visited, #main-header a:active {
  308. color: inherit;
  309. fill: inherit;
  310. }
  311. #main-header a.greasy-svg, #main-header a.sleazy-svg {
  312. height: 4.8rem;
  313. width: 9.6rem;
  314. min-width: 4.8rem;
  315. display: flex;
  316. align-items: center;
  317. justify-content: flex-end;
  318. margin-right: 3.2rem;
  319. }
  320. #main-header a.greasy-svg svg, #main-header a.sleazy-svg svg {
  321. height: 100%;
  322. width: auto;
  323. }
  324. #main-header form.engine-search-main {
  325. --_height: 5.2rem;
  326. width: var(--header-search-width);
  327. max-width: calc(100% - 4rem);
  328. }
  329. #main-header span.dummy {
  330. display: block;
  331. width: 0;
  332. flex: 1 0 auto;
  333. opacity: 0;
  334. margin-right: 3.2rem;
  335. }
  336. #main-header span.menu, #main-header a.profile, #main-header a.signout, #main-header a.notification {
  337. display: flex;
  338. align-items: center;
  339. justify-content: center;
  340. height: 4rem;
  341. width: 4rem;
  342. min-width: 4rem;
  343. font-size: 2rem;
  344. border-radius: var(--engine-border-radius);
  345. cursor: pointer;
  346. }
  347. #main-header span.menu svg, #main-header a.profile svg, #main-header a.signout svg, #main-header a.notification svg {
  348. height: 1em;
  349. width: 1em;
  350. }
  351. #main-header span.menu:hover, #main-header span.menu:focus, #main-header a.profile:hover, #main-header a.profile:focus, #main-header a.signout:hover, #main-header a.signout:focus, #main-header a.notification:hover, #main-header a.notification:focus {
  352. fill: var(--engine-accent-color);
  353. color: var(--engine-accent-color);
  354. background: var(--engine-button-hover);
  355. }
  356. #main-header span.menu:active svg, #main-header a.profile:active svg, #main-header a.signout:active svg, #main-header a.notification:active svg {
  357. transform: scale(0.8);
  358. }
  359. #main-header a.profile {
  360. min-width: -moz-fit-content;
  361. min-width: fit-content;
  362. padding: 0 1rem;
  363. border: 1px solid var(--engine-border-color);
  364. border-radius: var(--engine-border-radius);
  365. }
  366. #main-header a.profile tie {
  367. display: flex;
  368. align-items: center;
  369. justify-content: center;
  370. gap: 1rem;
  371. }
  372. #main-header a.profile span {
  373. font-size: 1.4rem;
  374. }
  375. #main-header a.profile span:active {
  376. transform: scale(0.9);
  377. }
  378. #main-header a.profile:has(+ a.signout) {
  379. border-right: 0px;
  380. border-radius: var(--engine-border-radius) 0 0 var(--engine-border-radius);
  381. }
  382. #main-header a.profile:has(+ a.signout):hover + a.signout::before, #main-header a.profile:has(+ a.signout):focus + a.signout::before {
  383. background: transparent;
  384. }
  385. #main-header a.profile:has(+ span.menu) {
  386. margin-right: 1rem;
  387. }
  388. #main-header a.signout {
  389. margin: 0 1rem 0 1px;
  390. border: 1px solid var(--engine-border-color);
  391. border-left: 0px;
  392. border-radius: 0 var(--engine-border-radius) var(--engine-border-radius) 0;
  393. position: relative;
  394. }
  395. #main-header a.signout::before {
  396. content: "";
  397. position: absolute;
  398. height: 65%;
  399. width: 1px;
  400. background: var(--engine-border-color);
  401. left: -1px;
  402. }
  403. #main-header a.signout::after {
  404. content: "";
  405. position: absolute;
  406. height: calc(100% + 2px);
  407. width: 3px;
  408. border: 1px solid var(--engine-border-color);
  409. border-left: 0;
  410. border-right: 0;
  411. left: -2px;
  412. }
  413. #main-header a.signout:hover::before, #main-header a.signout:focus::before {
  414. background: transparent;
  415. }
  416. #main-header a.notification {
  417. margin-right: 1rem;
  418. border: 1px solid var(--engine-border-color);
  419. border-radius: var(--engine-border-radius);
  420. }
  421. #main-header a.notification:hover::before, #main-header a.notification:focus::before {
  422. background: transparent;
  423. }
  424. #main-header a.notification span {
  425. font-size: 1.4rem;
  426. }
  427. #main-header a.notification:active span {
  428. transform: scale(0.8);
  429. }
  430.  
  431. .script-list,
  432. .user-list,
  433. .text-content,
  434. .discussion-list,
  435. .list-option-group ul,
  436. #script-info {
  437. border-color: transparent;
  438. box-shadow: initial;
  439. background: var(--engine-background-1);
  440. }
  441.  
  442. .width-constraint {
  443. width: 100%;
  444. max-width: unset;
  445. }
  446. @media screen and (max-width: 1228px) {
  447. .width-constraint {
  448. margin: 0 auto;
  449. }
  450. }
  451.  
  452. html:not([data-home=true]) body > .width-constraint {
  453. margin: 0 auto;
  454. width: calc(100% - var(--body-margin-xl2) * 2);
  455. }
  456. html:not([data-home=true]) body > .width-constraint .sidebarred > .sidebarred-main-content {
  457. max-width: var(--header-search-width);
  458. }
  459.  
  460. body > .width-constraint {
  461. flex-grow: 1;
  462. }
  463. body > .width-constraint .all-center-home {
  464. height: 100%;
  465. width: 100%;
  466. padding: 1.6rem 1.6rem 12.8rem 1.6rem;
  467. margin: 0;
  468. display: flex;
  469. flex-direction: column;
  470. align-items: center;
  471. justify-content: center;
  472. gap: 1.6rem;
  473. border-radius: 0;
  474. --_height: 5.6rem;
  475. }
  476. body > .width-constraint .all-center-home .engine-welcome {
  477. margin: 0.5rem 0 2rem 0;
  478. font-size: 1.5rem;
  479. }
  480. body > .width-constraint .all-center-home a.greasy-svg, body > .width-constraint .all-center-home a.sleazy-svg {
  481. height: auto;
  482. width: 24.5rem;
  483. min-width: 24.5rem;
  484. display: flex;
  485. flex-direction: column;
  486. align-items: center;
  487. justify-content: center;
  488. margin-bottom: 2.5rem;
  489. gap: 1.6rem;
  490. }
  491. body > .width-constraint .all-center-home a.greasy-svg svg[viewBox="0 0 92 92"], body > .width-constraint .all-center-home a.sleazy-svg svg[viewBox="0 0 92 92"] {
  492. width: calc(100% - 10.8rem);
  493. margin: 0 auto;
  494. border-radius: 100%;
  495. }
  496.  
  497. .engine-search-main {
  498. display: flex;
  499. width: 100%;
  500. height: var(--_height);
  501. max-width: calc(var(--_height) * 13.35714286);
  502. background: var(--engine-search-bg);
  503. border-radius: var(--engine-border-radius);
  504. overflow: hidden;
  505. box-shadow: 0 3px 0 0 var(--engine-background-2a);
  506. }
  507. .engine-search-main .engine-search-input {
  508. flex-grow: 1;
  509. background: transparent;
  510. border: 0;
  511. outline: 0;
  512. font-size: 1.7rem;
  513. padding: 1.3rem 0 1.3rem 1.3rem;
  514. color: var(--engine-text-1);
  515. fill: var(--engine-text-1);
  516. }
  517. .engine-search-main .engine-search-clear,
  518. .engine-search-main .engine-search-submit {
  519. height: var(--_height);
  520. width: calc(var(--_height) * 1.2);
  521. background: transparent;
  522. border: 0;
  523. outline: 0;
  524. display: flex;
  525. align-items: center;
  526. justify-content: center;
  527. cursor: pointer;
  528. transition: fill 0.1s ease-in-out, background 0.1s ease-in-out;
  529. }
  530. .engine-search-main .engine-search-clear:hover, .engine-search-main .engine-search-clear:focus,
  531. .engine-search-main .engine-search-submit:hover,
  532. .engine-search-main .engine-search-submit:focus {
  533. fill: var(--engine-accent-color);
  534. }
  535. .engine-search-main .engine-search-clear {
  536. display: none;
  537. }
  538. .engine-search-main .engine-search-clear svg {
  539. height: calc(var(--_height) / 3.5);
  540. width: calc(var(--_height) / 3.5);
  541. }
  542. .engine-search-main .engine-search-submit svg {
  543. height: calc(var(--_height) / 3);
  544. width: calc(var(--_height) / 3);
  545. }
  546. .engine-search-main .engine-search-submit:hover, .engine-search-main .engine-search-submit:focus {
  547. background: var(--engine-search-hover);
  548. }
  549. .engine-search-main.active .engine-search-submit {
  550. background: var(--engine-search-hover);
  551. }
  552. .engine-search-main.active .engine-search-clear {
  553. display: flex;
  554. }
  555. .engine-search-main > *:active > svg {
  556. transform: scale(0.8);
  557. }
  558.  
  559. #engine-top-sites {
  560. font-size: 1.4rem;
  561. display: flex;
  562. align-items: center;
  563. justify-content: center;
  564. gap: 0.8rem;
  565. flex-wrap: wrap;
  566. width: 100%;
  567. max-width: calc(var(--_height) * 13.35714286);
  568. }
  569. #engine-top-sites a {
  570. border: 1px solid var(--engine-border-color);
  571. border-radius: var(--engine-border-radius);
  572. padding: 0.4rem 0.7rem;
  573. color: var(--engine-text-1);
  574. }
  575. #engine-top-sites a:hover, #engine-top-sites a:focus {
  576. color: var(--engine-accent-color);
  577. background: var(--engine-button-hover);
  578. }
  579.  
  580. #main-footer {
  581. font-size: 1.44rem;
  582. padding: 1.6rem 3.2rem;
  583. background: var(--engine-background-1);
  584. }
  585. #main-footer .width-constraint {
  586. display: flex;
  587. align-items: center;
  588. justify-content: space-between;
  589. }
  590. #main-footer .width-constraint > span:first-of-type {
  591. display: flex;
  592. gap: 0.4rem;
  593. }
  594. #main-footer a {
  595. color: inherit;
  596. }
  597. #main-footer a:hover, #main-footer a:focus {
  598. color: var(--engine-accent-color);
  599. }
  600.  
  601. #main-nav {
  602. --_button-height: 4.8rem;
  603. --_button-height-top: 4rem;
  604. z-index: 20;
  605. transition: -webkit-backdrop-filter 0.1s linear;
  606. transition: backdrop-filter 0.1s linear;
  607. transition: backdrop-filter 0.1s linear, -webkit-backdrop-filter 0.1s linear;
  608. }
  609. #main-nav.hidden {
  610. display: none;
  611. }
  612. #main-nav.visible {
  613. -webkit-backdrop-filter: blur(2px);
  614. backdrop-filter: blur(2px);
  615. }
  616. #main-nav.visible backdrop {
  617. opacity: 0.25;
  618. }
  619. #main-nav.visible sidebar {
  620. right: 0;
  621. }
  622. #main-nav:not(.visible) {
  623. -webkit-backdrop-filter: blur(0);
  624. backdrop-filter: blur(0);
  625. }
  626. #main-nav:not(.visible) backdrop {
  627. opacity: 0;
  628. }
  629. #main-nav:not(.visible) sidebar {
  630. right: calc(-1 * var(--main-nav-width));
  631. }
  632. #main-nav, #main-nav backdrop {
  633. position: fixed;
  634. top: 0;
  635. right: 0;
  636. height: 100%;
  637. width: 100%;
  638. }
  639. #main-nav backdrop {
  640. transition: opacity 0.1s linear;
  641. background: var(--engine-background-2a);
  642. z-index: 0;
  643. }
  644. #main-nav sidebar {
  645. transition: right 0.1s ease-in-out;
  646. position: fixed;
  647. top: 0;
  648. height: 100%;
  649. width: var(--main-nav-width);
  650. max-width: calc(100% - 4rem);
  651. z-index: 1;
  652. background: var(--engine-nav-bg-1);
  653. box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  654. display: flex;
  655. flex-direction: column;
  656. }
  657. #main-nav sidebar > top {
  658. display: flex;
  659. align-items: center;
  660. justify-content: center;
  661. gap: 1rem;
  662. padding: 1.6rem 3.2rem;
  663. height: var(--header-min-height);
  664. }
  665. #main-nav sidebar > top span.dummy {
  666. display: block;
  667. width: 0;
  668. flex: 1 0 auto;
  669. opacity: 0;
  670. }
  671. #main-nav sidebar > top span:not(.dummy) {
  672. height: var(--_button-height-top);
  673. width: var(--_button-height-top);
  674. border-radius: var(--engine-border-radius);
  675. background: var(--engine-nav-bg-2);
  676. cursor: pointer;
  677. display: flex;
  678. align-items: center;
  679. justify-content: center;
  680. font-size: 2rem;
  681. }
  682. #main-nav sidebar > top span:not(.dummy) svg {
  683. height: 1em;
  684. width: 1em;
  685. }
  686. #main-nav sidebar > top span:not(.dummy) svg {
  687. transition-duration: 0.1s;
  688. }
  689. #main-nav sidebar > top span:not(.dummy):hover, #main-nav sidebar > top span:not(.dummy):focus {
  690. background: var(--engine-button-hover);
  691. }
  692. #main-nav sidebar > top span:not(.dummy):active:not(.active) {
  693. fill: var(--engine-accent-color);
  694. color: var(--engine-accent-color);
  695. }
  696. #main-nav sidebar > top span:not(.dummy):active:not(.active) svg {
  697. transform: scale(0.8);
  698. }
  699. #main-nav sidebar > top span:not(.dummy).active {
  700. fill: var(--engine-background-1);
  701. color: var(--engine-background-1);
  702. background: var(--engine-accent-color);
  703. }
  704. #main-nav sidebar > top span:not(.dummy).close-menu {
  705. font-size: 1.4rem;
  706. }
  707. #main-nav sidebar > top span:not(.dummy).close-menu:active svg {
  708. transform: scale(0.78);
  709. }
  710. #main-nav sidebar > bottom {
  711. padding: 0 3.2rem 1.6rem 3.2rem;
  712. }
  713. #main-nav sidebar > bottom.colors, #main-nav sidebar > bottom.translate {
  714. display: none;
  715. }
  716. #main-nav sidebar > bottom.pages {
  717. display: flex;
  718. flex-direction: column;
  719. gap: 2rem;
  720. }
  721. #main-nav sidebar > bottom.pages .theme-switch {
  722. display: flex;
  723. gap: 1rem;
  724. }
  725. #main-nav sidebar > bottom.pages .theme-switch span {
  726. height: var(--_button-height);
  727. width: 0;
  728. flex: 1 0 auto;
  729. border-radius: var(--engine-border-radius);
  730. background: var(--engine-nav-bg-2);
  731. cursor: pointer;
  732. font-size: 2rem;
  733. display: flex;
  734. align-items: center;
  735. justify-content: center;
  736. transition: flex 0.1s ease-in-out;
  737. }
  738. #main-nav sidebar > bottom.pages .theme-switch span svg {
  739. height: 1em;
  740. width: 1em;
  741. }
  742. #main-nav sidebar > bottom.pages .theme-switch span svg {
  743. transition-duration: 0.1s;
  744. }
  745. #main-nav sidebar > bottom.pages .theme-switch span:hover, #main-nav sidebar > bottom.pages .theme-switch span:focus {
  746. background: var(--engine-button-hover);
  747. }
  748. #main-nav sidebar > bottom.pages .theme-switch span:active:not(.active) {
  749. fill: var(--engine-accent-color);
  750. color: var(--engine-accent-color);
  751. }
  752. #main-nav sidebar > bottom.pages .theme-switch span:active:not(.active) svg {
  753. transform: scale(0.8);
  754. }
  755. #main-nav sidebar > bottom.pages .theme-switch span.active {
  756. flex: 2 0 auto;
  757. fill: var(--engine-background-1);
  758. color: var(--engine-background-1);
  759. background: var(--engine-accent-color);
  760. }
  761. #main-nav sidebar > bottom.pages .og-pages {
  762. display: flex;
  763. flex-direction: column;
  764. gap: 1rem;
  765. }
  766. #main-nav sidebar > bottom.pages .og-pages a {
  767. height: var(--_button-height);
  768. width: 100%;
  769. display: flex;
  770. align-items: center;
  771. gap: calc(var(--_button-height) / 2);
  772. padding: 0 calc(var(--_button-height) / 2);
  773. background: var(--engine-nav-bg-2);
  774. border-radius: var(--engine-border-radius);
  775. }
  776. #main-nav sidebar > bottom.pages .og-pages a svg {
  777. height: 1em;
  778. width: 1em;
  779. }
  780. #main-nav sidebar > bottom.pages .og-pages a, #main-nav sidebar > bottom.pages .og-pages a svg {
  781. transition-duration: var(--safe-transition);
  782. }
  783. #main-nav sidebar > bottom.pages .og-pages a:hover, #main-nav sidebar > bottom.pages .og-pages a:focus {
  784. background: var(--engine-button-hover);
  785. }
  786. #main-nav sidebar > bottom.pages .og-pages a:active:not(.active) {
  787. transform: translateY(3px);
  788. fill: var(--engine-accent-color);
  789. color: var(--engine-accent-color);
  790. }
  791. #main-nav sidebar > bottom.pages .og-pages a.active {
  792. fill: var(--engine-nav-bg-1);
  793. color: var(--engine-nav-bg-1);
  794. background: var(--engine-accent-color);
  795. }
  796.  
  797. html.delay-not #main-nav sidebar > bottom.pages .og-pages a, html.delay-not #main-nav sidebar > bottom.pages .og-pages a svg {
  798. transition-duration: 0s;
  799. }
  800. `;
  801.  
  802. // Remove Bruteforced Styles
  803. function removeStyles() {
  804. let styleTMP = document.querySelectorAll('head style[data-temp]');
  805.  
  806. for (let x = 0; x < styleTMP.length; x++) {
  807. styleTMP[x].remove();
  808. }
  809. }
  810.  
  811. // Regular Styles
  812. function themeStyles(temp) {
  813. if (document.querySelector('#globalCSS')) {return;}
  814.  
  815. let themeChoice = localStorage.themeChoice || 'system',
  816. mediaLight = '', mediaDark = '', typeLight, typeDark;
  817. if (themeChoice === 'system') {
  818. mediaDark = '(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)';
  819. mediaLight = '(prefers-color-scheme: light)';
  820. typeDark = 'text/css';
  821. typeLight = 'text/css';
  822. } else if (themeChoice === 'light') {
  823. typeDark = 'null';
  824. typeLight = 'text/css';
  825. } else if (themeChoice === 'dark') {
  826. typeDark = 'text/css';
  827. typeLight = 'null';
  828. }
  829.  
  830. if (!temp) {
  831. // document.head.appendChild(elemake("link","",{"key":["rel","href","type","id"],"val":["stylesheet","http://127.0.0.1:3407/global.css","text/css","globalCSS"]}));
  832. document.head.appendChild(elemake("style",globalCSS,{"key":["type","id"],"val":["text/css","globalCSS"]}));
  833. document.head.appendChild(elemake("style",darkCSS,{"key":["type","id","media"],"val":[typeDark,"darkCSS",mediaDark]}));
  834. document.head.appendChild(elemake("style",lightCSS,{"key":["type","id","media"],"val":[typeLight,"lightCSS",mediaLight]}));
  835. } else {
  836. // document.head.appendChild(elemake("link","",{"key":["rel","href","type","data-temp"],"val":["stylesheet","http://127.0.0.1:3407/global.css","text/css","globalCSS"]}));
  837. document.head.appendChild(elemake("style",globalCSS,{"key":["type","data-temp"],"val":["text/css","globalCSS"]}));
  838. document.head.appendChild(elemake("style",darkCSS,{"key":["type","data-temp","media"],"val":[typeDark,"darkCSS",mediaDark]}));
  839. document.head.appendChild(elemake("style",lightCSS,{"key":["type","data-temp","media"],"val":[typeLight,"lightCSS",mediaLight]}));
  840. }
  841. }
  842.  
  843. // Know Basics
  844. function setBasic() {
  845. if (window.location.origin.match(/sleazyfork/)) {
  846. window.siteMatch = 'sleazy';
  847. } else {
  848. window.siteMatch = 'greasy';
  849. }
  850.  
  851. window.currentLocale = document.documentElement.getAttribute('lang');
  852. let cPath = window.location.pathname.replace(/\//g,'');
  853.  
  854. if (cPath === '' || cPath === window.currentLocale) {
  855. window.onHomepage = true;
  856. document.documentElement.setAttribute('data-home', 'true');
  857. } else {
  858. window.onHomepage = false;
  859. document.documentElement.setAttribute('data-home', 'false');
  860. }
  861. }
  862.  
  863. // Process Theme
  864. function processTheme() {
  865. let themeLight = localStorage.themeLight || 'default',
  866. themeDark = localStorage.themeDark || 'default',
  867. themeAccent = localStorage.themeAccent || 'default',
  868. html = document.documentElement;
  869.  
  870. html.setAttribute('data-accent',themeAccent);
  871. html.setAttribute('data-light',themeLight);
  872. html.setAttribute('data-dark',themeDark);
  873.  
  874. try {
  875. let themeChoice = localStorage.themeChoice || 'system',
  876. mediaLight = '', mediaDark = '', typeLight, typeDark,
  877. lightStyle = document.querySelector('#lightCSS'),
  878. darkStyle = document.querySelector('#darkCSS');
  879. if (themeChoice === 'system') {
  880. mediaDark = '(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)';
  881. mediaLight = '(prefers-color-scheme: light)';
  882. typeDark = 'text/css';
  883. typeLight = 'text/css';
  884. } else if (themeChoice === 'light') {
  885. typeDark = 'null';
  886. typeLight = 'text/css';
  887. } else if (themeChoice === 'dark') {
  888. typeDark = 'text/css';
  889. typeLight = 'null';
  890. }
  891.  
  892. lightStyle.setAttribute('type',typeLight);
  893. darkStyle.setAttribute('type',typeDark);
  894. lightStyle.setAttribute('media',mediaLight);
  895. darkStyle.setAttribute('media',mediaDark);
  896. } catch(e) {}
  897. }
  898.  
  899. // Click primary theme toggle
  900. function toggleTheme(key) {
  901. document.documentElement.classList.add('no-delay');
  902. document.querySelector('#main-nav section.theme-switch > .active').classList.remove('active');
  903.  
  904. if (key === 'system') {
  905. document.querySelector('#main-nav section.theme-switch > span.system').classList.add('active');
  906. localStorage.themeChoice = 'system';
  907. } else if (key === 'light') {
  908. document.querySelector('#main-nav section.theme-switch > span.day').classList.add('active');
  909. localStorage.themeChoice = 'light';
  910. } else {
  911. document.querySelector('#main-nav section.theme-switch > span.night').classList.add('active');
  912. localStorage.themeChoice = 'dark';
  913. }
  914.  
  915. processTheme();
  916. setTimeout(() => {
  917. document.documentElement.classList.remove('no-delay');
  918. }, 10);
  919. }
  920.  
  921. // Calculate loading time.
  922. function loadTime() {
  923. let loadTime = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart;
  924. try {
  925. document.querySelector('#main-footer .width-constraint > span:nth-of-type(2)').textContent = 'Loaded in ' + (loadTime/1000).toFixed(2) + ' secs';
  926. } catch {}
  927. }
  928.  
  929. // Add a simple footer on EVERY page
  930. function addFOOTER() {
  931. let footerName = 'Greasy Fork';
  932.  
  933. if (window.siteMatch === 'sleazy') {
  934. footerName = 'Sleazy Fork';
  935. }
  936.  
  937. let footer = `
  938. <div class="width-constraint">
  939. <span>
  940. <a href="/">${footerName}</a>
  941. <span>|</span>
  942. <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html" target="_blank">GPL-3.0</a>
  943. </span>
  944. <span>•••</span>
  945. </div>
  946. `.replace(/>\s+</g,'><');
  947.  
  948. document.body.appendChild(elemake("footer",footer,{"key":["id"],"val":["main-footer"]}));
  949. }
  950.  
  951. function forkNAV() {
  952. let ogLinks = document.querySelectorAll('#site-nav > nav a:not([onclick])'),
  953. linkPrint = '', linkActive;
  954.  
  955. if (window.location.origin + window.location.pathname === `${window.location.origin}/${window.currentLocale}` || window.location.origin + window.location.pathname === `${window.location.origin}/${window.currentLocale}/`) {
  956. linkActive = ' class="active"';
  957. } else {
  958. linkActive = '';
  959. }
  960.  
  961. linkPrint = `<a${linkActive} href="${window.location.origin}/${window.currentLocale}">${navSVGs["homeSVG"]}<span>Home</span></a>`;
  962.  
  963. for (let x = 0; x < ogLinks.length; x++) {
  964. if (window.location.origin + window.location.pathname === ogLinks[x].href) {
  965. linkActive = ' class="active"';
  966. } else {
  967. linkActive = '';
  968. }
  969.  
  970. linkPrint += `<a${linkActive} href=${ogLinks[x].href}>${navSVGs[ogLinks[x].href.replace(/.*\/(.*)$/,'$1SVG')]}<span>${ogLinks[x].textContent}</span></a>`;
  971. }
  972.  
  973. let newNAV = `
  974. <sidebar>
  975. <top>
  976. <span class="pages active">
  977. ${pagesSVG}
  978. </span>
  979. <span class="translate">
  980. ${translateSVG}
  981. </span>
  982. <span class="colors">
  983. ${colorsSVG}
  984. </span>
  985. <span class="dummy"></span>
  986. <span class="close-menu">
  987. ${closeSVG}
  988. </span>
  989. </top>
  990. <bottom class="pages">
  991. <section class="theme-switch">
  992. <span class="system active">
  993. ${autoSVG}
  994. </span>
  995. <span class="day">
  996. ${sunSVG}
  997. </span>
  998. <span class="night">
  999. ${moonSVG}
  1000. </span>
  1001. </section>
  1002. <section class="og-pages">
  1003. ${linkPrint}
  1004. </section>
  1005. </bottom>
  1006. <bottom class="translate">
  1007. <section class="help">
  1008. </section>
  1009. <section class="options">
  1010. </section>
  1011. </bottom>
  1012. <bottom class="colors">
  1013. <section class="accents">
  1014. </section>
  1015. <section class="others">
  1016. </section>
  1017. </bottom>
  1018. </sidebar>
  1019. <backdrop></backdrop>
  1020. `.replace(/>\s+</g,'><');
  1021.  
  1022. document.body.insertBefore(elemake("nav",newNAV,{"key":["id","class"],"val":["main-nav","hidden"]}), document.body.children[0]);
  1023.  
  1024. toggleTheme(localStorage.themeChoice);
  1025. }
  1026.  
  1027. // Header is different on HOMEPAGE
  1028. function forkHEADER() {
  1029. let headerDiv = document.querySelector('#main-header > .width-constraint'),
  1030. userProfileLink = '',
  1031. userProfileName = profileSVG,
  1032. signOutLink = '',
  1033. signInLink = '',
  1034. notificationLink = '';
  1035.  
  1036. if (headerDiv.querySelector('#nav-user-info > .user-profile-link')) {
  1037. userProfileLink = ` href="${headerDiv.querySelector('#nav-user-info > .user-profile-link > a').href}"`;
  1038. userProfileName = `<span>${headerDiv.querySelector('#nav-user-info > .user-profile-link > a').textContent}</span>`;
  1039. signOutLink = `<a class="signout" href="${headerDiv.querySelector('#nav-user-info > .sign-out-link > a').href}">${logoutSVG}</a>`;
  1040. } else {
  1041. signInLink = ` href="${headerDiv.querySelector('#nav-user-info > .sign-in-link > a').href}"`;
  1042. }
  1043.  
  1044. if (headerDiv.querySelector('#nav-user-info > .notification-widget')) {
  1045. notificationLink = `<a class="notification" href="${headerDiv.querySelector('#nav-user-info > .notification-widget').getAttribute('href')}"><span>${headerDiv.querySelector('#nav-user-info > .notification-widget').textContent}</span></a>`;
  1046. }
  1047.  
  1048. let headerHTML = `
  1049. <a class="${window.siteMatch}-svg" href="/">
  1050. ${forkSVG}
  1051. </a>
  1052. <form class="engine-search-main" action="/${window.currentLocale}/scripts" accept-charset="UTF-8" method="get">
  1053. <input class="engine-search-input" name="q" value="" autocomplete="off" type="search" required>
  1054. <span class="engine-search-clear">${clearSVG}</span>
  1055. <span class="engine-search-submit">${findSVG}</span>
  1056. </form>
  1057. <span class="dummy"></span>
  1058. ${notificationLink}
  1059. <a class="profile"${userProfileLink}${signInLink}>${userProfileName}</a>
  1060. ${signOutLink}
  1061. <span class="menu">${menuSVG}</span>
  1062. `.replace(/>\s+</g,'><');
  1063.  
  1064. if (window.onHomepage) {
  1065. headerHTML = `
  1066. <span class="dummy"></span>
  1067. ${notificationLink}
  1068. <a class="profile"${userProfileLink}${signInLink}>${userProfileName}</a>
  1069. ${signOutLink}
  1070. <span class="menu">${menuSVG}</span>
  1071. `.replace(/>\s+</g,'><');
  1072. }
  1073.  
  1074. headerDiv.innerHTML = headerHTML;
  1075.  
  1076. if (!window.onHomepage) {
  1077. forkSEARCH();
  1078.  
  1079. let sInput = document.querySelector('.engine-search-input');
  1080.  
  1081. if (window.location.search.match(/q=/)) {
  1082. sInput.value = getVar(window.location.href).q.replace(/\+/g,' ');
  1083. } else if (window.location.search.match(/c=/)) {
  1084. sInput.value = getVar(window.location.href).c.replace(/\+/g,' ');
  1085. } else if (window.location.pathname.match(/\/by-site\//)) {
  1086. sInput.value = window.location.pathname.replace(/.*by-site\//,'');
  1087. }
  1088.  
  1089. function isActive(key) {
  1090. const reKey = new RegExp(key, "i");
  1091. if (!window.location.pathname.match(reKey)) {return '';}
  1092. return ' class="active"';
  1093. }
  1094.  
  1095. const searchOPTIONS = `
  1096. <a${isActive('scripts$')} href="/${window.currentLocale}/scripts?q=${sInput.value}">Scripts</a>
  1097. <a${isActive('scripts/by-site')} href="/${window.currentLocale}/scripts/by-site/${sInput.value}">Sites</a>
  1098. <a${isActive('scripts/libraries')} href="/${window.currentLocale}/scripts/libraries?q=${sInput.value}">Libraries</a>
  1099. <a${isActive('scripts/code-search')} href="/${window.currentLocale}/scripts/code-search?c=${sInput.value}">Code</a>
  1100. <a${isActive('users$')} href="/${window.currentLocale}/users?q=${sInput.value}">Users</a>
  1101. `;
  1102.  
  1103. headerDiv.parentNode.appendChild(elemake("div", searchOPTIONS, {"key":["class"],"val":["search-options"]}));
  1104.  
  1105. sInput.dispatchEvent(new Event('input', {'bubbles': true}));
  1106. }
  1107. }
  1108.  
  1109. // Update HOMEPAGE with new Search
  1110. function forkHOME() {
  1111. if (!document.getElementById('home-script-nav')) {return;}
  1112.  
  1113. let topSites = document.querySelectorAll('#home-top-sites a'),
  1114. siteTags = '';
  1115. for (let x = 0; x < topSites.length; x++) {
  1116. siteTags = siteTags + topSites[x].outerHTML;
  1117. }
  1118.  
  1119. let logoSVG = forkSVG + greasySVG;
  1120.  
  1121. if (window.siteMatch === 'sleazy') {
  1122. logoSVG = forkSVG + sleazySVG;
  1123. }
  1124.  
  1125. document.querySelector('body > div.width-constraint > section.text-content').innerHTML = `
  1126. <a class="${window.siteMatch}-svg" href="/">
  1127. ${logoSVG}
  1128. </a>
  1129. <form class="engine-search-main" action="${document.querySelector('#home-script-nav .home-search').getAttribute('action')}" accept-charset="UTF-8" method="get">
  1130. <input class="engine-search-input" name="q" value="" autocomplete="off" type="search" required>
  1131. <span class="engine-search-clear">${clearSVG}</span>
  1132. <span class="engine-search-submit">${findSVG}</span>
  1133. </form>
  1134. <span class="engine-welcome">What are we forking today?</span>
  1135. <div id="engine-top-sites">${siteTags}</div>
  1136. `.replace(/>\s+</g,'><');
  1137.  
  1138. forkSEARCH();
  1139. }
  1140.  
  1141. // New search box
  1142. function forkSEARCH() {
  1143. let input = document.querySelector('.engine-search-input'),
  1144. clear = document.querySelector('.engine-search-clear'),
  1145. submit = document.querySelector('.engine-search-submit');
  1146.  
  1147. if (window.onHomepage) {
  1148. input.parentNode.parentNode.classList.add('all-center-home');
  1149. }
  1150.  
  1151. function checkInput() {
  1152. if (input.value === '') {
  1153. input.parentNode.classList.remove('active');
  1154. } else {
  1155. input.parentNode.classList.add('active');
  1156. }
  1157. }
  1158.  
  1159. input.addEventListener('input', checkInput);
  1160. clear.addEventListener('click', () => {
  1161. setTimeout(() => {
  1162. clear.parentNode.children[0].value = '';
  1163. checkInput();
  1164. clear.parentNode.children[0].focus();
  1165. }, 100);
  1166. });
  1167. submit.addEventListener('click', () => {
  1168. submit.parentNode.submit();
  1169. });
  1170. }
  1171.  
  1172. // Event listeners in one place
  1173. function listenEvents() {
  1174. // Close Sidebar
  1175. function closeNav() {
  1176. document.querySelector('#main-nav').classList.remove('visible');
  1177. setTimeout(() => {
  1178. document.querySelector('#main-nav').classList.add('hidden');
  1179. }, 100);
  1180. }
  1181. document.querySelector('#main-nav span.close-menu').addEventListener('click', closeNav);
  1182. document.querySelector('#main-nav backdrop').addEventListener('click', closeNav);
  1183.  
  1184. // Open Sidebar
  1185. function openNav() {
  1186. document.querySelector('#main-nav').classList.remove('hidden');
  1187. setTimeout(() => {
  1188. document.querySelector('#main-nav').classList.add('visible');
  1189. }, 10);
  1190. }
  1191. document.querySelector('#main-header span.menu').addEventListener('click', openNav);
  1192.  
  1193. document.querySelector('#main-nav section.theme-switch > span.system').addEventListener('click', () => {toggleTheme('system')});
  1194. document.querySelector('#main-nav section.theme-switch > span.day').addEventListener('click', () => {toggleTheme('light')});
  1195. document.querySelector('#main-nav section.theme-switch > span.night').addEventListener('click', () => {toggleTheme('dark')});
  1196. }