☰

Greasy Fork Theme Engine [BETA]

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

  1. // ==UserScript==
  2. // @name         Greasy Fork Theme Engine [BETA]
  3. // @namespace    https://naeembolchhi.github.io/
  4. // @version      0.21
  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. --engine-link-default: #adc2fc;
  155. --engine-link-visited: #a591dc;
  156. }
  157.  
  158. html, html[data-light=default] {
  159. --engine-background-1: #f6f6f6;
  160. --engine-background-2: #fbfbfb;
  161. --engine-background-2a: #e0e0e0;
  162. --engine-button-hover: #e8e8e8;
  163. --engine-search-bg: #fbfbfb;
  164. --engine-search-hover: #e8e8e8;
  165. --engine-text-1: #222222;
  166. --engine-text-2: #666666;
  167. --engine-text-2a: #444444;
  168. --engine-border-color: #e0e0e0;
  169. --engine-nav-bg-2: #f0f0f0;
  170. --engine-nav-bg-1: #f8f8f8;
  171.  
  172. --engine-logo-bg: var(--engine-text-color);
  173. --engine-logo-fg: var(--engine-background-1);
  174. }
  175. `.replace(/[\n\s]/g,'');
  176.  
  177. // Dark Theme Colors
  178. const darkCSS = `
  179. html, html[data-accent=default] {
  180. --engine-accent-color: #c42121;
  181. --engine-link-default: #adc2fc;
  182. --engine-link-visited: #a591dc;
  183. }
  184.  
  185. html, html[data-dark=default] {
  186. --engine-background-1: #161616;
  187. --engine-background-2: #1c1c1c;
  188. --engine-background-2a: #0e0e0e;
  189. --engine-button-hover: #262626;
  190. --engine-search-bg: #262626;
  191. --engine-search-hover: #2e2e2e;
  192. --engine-text-1: #eeeeee;
  193. --engine-text-2: #aaaaaa;
  194. --engine-text-2a: #cccccc;
  195. --engine-border-color: #2c2c2c;
  196. --engine-nav-bg-1: #161616;
  197. --engine-nav-bg-2: #212121;
  198.  
  199. --engine-logo-bg: var(--engine-background-1);
  200. --engine-logo-fg: var(--engine-text-color);
  201. }
  202. `.replace(/[\n\s]/g,'');
  203.  
  204. // General Redesign Excluding Colors
  205. const globalCSS = `
  206. :root {
  207.   --header-min-height: 10.1rem;
  208.   --header-main-height: 8.6rem;
  209.   --engine-border-radius: 4px;
  210.   --header-search-width: 70rem;
  211.   --body-margin-xl2: calc(9.6rem + 3.2rem + 3.2rem);
  212.   --main-nav-width: 40rem;
  213.   --safe-duration: .1s;
  214.   --stable-duration: .1s;
  215.   --font-sans: "Open Sans", sans-serif;
  216.   --font-mono: "Fira Mono", monospace;
  217. }
  218.  
  219. html {
  220.   font-size: 10px;
  221. }
  222. html.no-delay {
  223.   --safe-duration: 0s;
  224. }
  225. html, html > body {
  226.   height: 100%;
  227.   width: 100%;
  228.   line-height: 1.5;
  229.   -webkit-text-size-adjust: 100%;
  230.   -moz-tab-size: 4;
  231.   -o-tab-size: 4;
  232.   tab-size: 4;
  233.   color: var(--engine-text-1);
  234.   fill: var(--engine-text-1);
  235. }
  236. html > body {
  237.   display: flex;
  238.   flex-direction: column;
  239.   background-color: var(--engine-background-1);
  240.   font-size: 1.6rem;
  241. }
  242. html > body:has(#main-nav:not(.hidden)) {
  243.   overflow: hidden;
  244. }
  245.  
  246. *, *::before, *::after {
  247.   -webkit-tap-highlight-color: transparent;
  248.   box-sizing: border-box;
  249. }
  250.  
  251. a, a:visited, a:active {
  252.   color: var(--engine-text-1);
  253.   fill: var(--engine-text-1);
  254.   text-decoration: none;
  255. }
  256.  
  257. svg {
  258.   overflow: visible;
  259. }
  260. svg .logo-bg {
  261.   fill: var(--engine-logo-bg);
  262. }
  263. svg .logo-ring, svg .logo-fg {
  264.   fill: var(--engine-logo-fg);
  265. }
  266.  
  267. #main-header {
  268.   background: var(--engine-background-1);
  269.   color: var(--engine-text-1);
  270.   box-shadow: initial;
  271.   padding: 0 3.2rem;
  272.   min-height: -moz-fit-content;
  273.   min-height: fit-content;
  274. }
  275. #main-header > .width-constraint {
  276.   height: calc(var(--header-main-height) - 3.2rem);
  277.   margin: 2.4rem auto 0 auto;
  278.   padding: 0;
  279.   display: flex;
  280.   align-items: center;
  281.   justify-content: space-between;
  282. }
  283. #main-header > .width-constraint:last-child {
  284.   margin-bottom: 1.6rem;
  285. }
  286. #main-header > .search-options {
  287.   font-size: 1.5rem;
  288.   margin-top: 0.7rem;
  289.   display: flex;
  290.   gap: 1.3rem;
  291.   transform: translateY(1px);
  292.   padding-left: 14.1rem;
  293.   color: var(--engine-text-2);
  294. }
  295. #main-header > .search-options a {
  296.   display: flex;
  297.   height: 2.75rem;
  298.   font-weight: 700;
  299.   transition-duration: var(--stable-duration);
  300. }
  301. #main-header > .search-options a:hover, #main-header > .search-options a:focus {
  302.   color: var(--engine-text-2a);
  303. }
  304. #main-header > .search-options a.active {
  305.   color: var(--engine-accent-color);
  306.   border-bottom: 2px solid var(--engine-accent-color);
  307. }
  308. #main-header a, #main-header a:visited, #main-header a:active {
  309.   color: inherit;
  310.   fill: inherit;
  311. }
  312. #main-header a.greasy-svg, #main-header a.sleazy-svg {
  313.   height: 4.8rem;
  314.   width: 9.6rem;
  315.   min-width: 4.8rem;
  316.   display: flex;
  317.   align-items: center;
  318.   justify-content: flex-end;
  319.   margin-right: 3.2rem;
  320. }
  321. #main-header a.greasy-svg svg, #main-header a.sleazy-svg svg {
  322.   height: 100%;
  323.   width: auto;
  324. }
  325. #main-header form.engine-search-main {
  326.   --_height: 5.2rem;
  327.   width: var(--header-search-width);
  328.   max-width: calc(100% - 4rem);
  329. }
  330. #main-header span.dummy {
  331.   display: block;
  332.   width: 0;
  333.   flex: 1 0 auto;
  334.   opacity: 0;
  335.   margin-right: 3.2rem;
  336. }
  337. #main-header span.menu, #main-header a.profile, #main-header a.signout, #main-header a.notification {
  338.   display: flex;
  339.   align-items: center;
  340.   justify-content: center;
  341.   height: 4rem;
  342.   width: 4rem;
  343.   min-width: 4rem;
  344.   font-size: 2rem;
  345.   border-radius: var(--engine-border-radius);
  346.   cursor: pointer;
  347. }
  348. #main-header span.menu svg, #main-header a.profile svg, #main-header a.signout svg, #main-header a.notification svg {
  349.   height: 1em;
  350.   width: 1em;
  351. }
  352. #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 {
  353.   fill: var(--engine-accent-color);
  354.   color: var(--engine-accent-color);
  355.   background: var(--engine-button-hover);
  356. }
  357. #main-header span.menu:active svg, #main-header a.profile:active svg, #main-header a.signout:active svg, #main-header a.notification:active svg {
  358.   transform: scale(0.8);
  359. }
  360. #main-header a.profile {
  361.   min-width: -moz-fit-content;
  362.   min-width: fit-content;
  363.   padding: 0 1rem;
  364.   border: 1px solid var(--engine-border-color);
  365.   border-radius: var(--engine-border-radius);
  366. }
  367. #main-header a.profile tie {
  368.   display: flex;
  369.   align-items: center;
  370.   justify-content: center;
  371.   gap: 1rem;
  372. }
  373. #main-header a.profile span {
  374.   font-size: 1.4rem;
  375. }
  376. #main-header a.profile span:active {
  377.   transform: scale(0.9);
  378. }
  379. #main-header a.profile:has(+ a.signout) {
  380.   border-right: 0px;
  381.   border-radius: var(--engine-border-radius) 0 0 var(--engine-border-radius);
  382. }
  383. #main-header a.profile:has(+ a.signout):hover + a.signout::before, #main-header a.profile:has(+ a.signout):focus + a.signout::before {
  384.   background: transparent;
  385. }
  386. #main-header a.profile:has(+ span.menu) {
  387.   margin-right: 1rem;
  388. }
  389. #main-header a.signout {
  390.   margin: 0 1rem 0 1px;
  391.   border: 1px solid var(--engine-border-color);
  392.   border-left: 0px;
  393.   border-radius: 0 var(--engine-border-radius) var(--engine-border-radius) 0;
  394.   position: relative;
  395. }
  396. #main-header a.signout::before {
  397.   content: "";
  398.   position: absolute;
  399.   height: 65%;
  400.   width: 1px;
  401.   background: var(--engine-border-color);
  402.   left: -1px;
  403. }
  404. #main-header a.signout::after {
  405.   content: "";
  406.   position: absolute;
  407.   height: calc(100% + 2px);
  408.   width: 3px;
  409.   border: 1px solid var(--engine-border-color);
  410.   border-left: 0;
  411.   border-right: 0;
  412.   left: -2px;
  413. }
  414. #main-header a.signout:hover::before, #main-header a.signout:focus::before {
  415.   background: transparent;
  416. }
  417. #main-header a.notification {
  418.   margin-right: 1rem;
  419.   border: 1px solid var(--engine-border-color);
  420.   border-radius: var(--engine-border-radius);
  421. }
  422. #main-header a.notification:hover::before, #main-header a.notification:focus::before {
  423.   background: transparent;
  424. }
  425. #main-header a.notification span {
  426.   font-size: 1.4rem;
  427. }
  428. #main-header a.notification:active span {
  429.   transform: scale(0.8);
  430. }
  431.  
  432. .script-list,
  433. .user-list,
  434. .text-content,
  435. .discussion-list,
  436. .list-option-group ul,
  437. #script-info {
  438.   border-color: transparent;
  439.   box-shadow: initial;
  440.   background: transparent;
  441. }
  442.  
  443. .width-constraint {
  444.   width: 100%;
  445.   max-width: unset;
  446. }
  447. @media screen and (max-width: 1228px) {
  448.   .width-constraint {
  449.     margin: 0 auto;
  450.   }
  451. }
  452.  
  453. html:not([data-home=true]) body {
  454.   background-color: var(--engine-background-2);
  455. }
  456. html:not([data-home=true]) body > .width-constraint {
  457.   margin: 0 auto;
  458.   width: calc(100% - var(--body-margin-xl2) * 2);
  459. }
  460. html:not([data-home=true]) body > .width-constraint .sidebarred > .sidebarred-main-content {
  461.   max-width: var(--header-search-width);
  462. }
  463.  
  464. body > .width-constraint {
  465.   flex-grow: 1;
  466. }
  467. body > .width-constraint .all-center-home {
  468.   height: 100%;
  469.   width: 100%;
  470.   padding: 1.6rem 1.6rem 12.8rem 1.6rem;
  471.   margin: 0;
  472.   display: flex;
  473.   flex-direction: column;
  474.   align-items: center;
  475.   justify-content: center;
  476.   gap: 1.6rem;
  477.   border-radius: 0;
  478.   --_height: 5.6rem;
  479. }
  480. body > .width-constraint .all-center-home .engine-welcome {
  481.   margin: 0.5rem 0 2rem 0;
  482.   font-size: 1.5rem;
  483. }
  484. body > .width-constraint .all-center-home a.greasy-svg, body > .width-constraint .all-center-home a.sleazy-svg {
  485.   height: auto;
  486.   width: 24.5rem;
  487.   min-width: 24.5rem;
  488.   display: flex;
  489.   flex-direction: column;
  490.   align-items: center;
  491.   justify-content: center;
  492.   margin-bottom: 2.5rem;
  493.   gap: 1.6rem;
  494. }
  495. 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"] {
  496.   width: calc(100% - 10.8rem);
  497.   margin: 0 auto;
  498.   border-radius: 100%;
  499. }
  500.  
  501. .engine-search-main {
  502.   display: flex;
  503.   width: 100%;
  504.   height: var(--_height);
  505.   max-width: calc(var(--_height) * 13.35714286);
  506.   background: var(--engine-search-bg);
  507.   border-radius: var(--engine-border-radius);
  508.   overflow: hidden;
  509.   box-shadow: 0 3px 0 0 var(--engine-background-2a);
  510. }
  511. .engine-search-main .engine-search-input {
  512.   flex-grow: 1;
  513.   background: transparent;
  514.   border: 0;
  515.   outline: 0;
  516.   font-size: 1.7rem;
  517.   padding: 1.3rem 0 1.3rem 1.3rem;
  518.   color: var(--engine-text-1);
  519.   fill: var(--engine-text-1);
  520. }
  521. .engine-search-main .engine-search-clear,
  522. .engine-search-main .engine-search-submit {
  523.   height: var(--_height);
  524.   width: calc(var(--_height) * 1.2);
  525.   background: transparent;
  526.   border: 0;
  527.   outline: 0;
  528.   display: flex;
  529.   align-items: center;
  530.   justify-content: center;
  531.   cursor: pointer;
  532.   transition: fill var(--stable-duration) ease-in-out, background var(--stable-duration) ease-in-out;
  533. }
  534. .engine-search-main .engine-search-clear:hover, .engine-search-main .engine-search-clear:focus,
  535. .engine-search-main .engine-search-submit:hover,
  536. .engine-search-main .engine-search-submit:focus {
  537.   fill: var(--engine-accent-color);
  538. }
  539. .engine-search-main .engine-search-clear {
  540.   display: none;
  541. }
  542. .engine-search-main .engine-search-clear svg {
  543.   height: calc(var(--_height) / 3.5);
  544.   width: calc(var(--_height) / 3.5);
  545. }
  546. .engine-search-main .engine-search-submit svg {
  547.   height: calc(var(--_height) / 3);
  548.   width: calc(var(--_height) / 3);
  549. }
  550. .engine-search-main .engine-search-submit:hover, .engine-search-main .engine-search-submit:focus {
  551.   background: var(--engine-search-hover);
  552. }
  553. .engine-search-main.active .engine-search-submit {
  554.   background: var(--engine-search-hover);
  555. }
  556. .engine-search-main.active .engine-search-clear {
  557.   display: flex;
  558. }
  559. .engine-search-main > *:active > svg {
  560.   transform: scale(0.8);
  561. }
  562.  
  563. #engine-top-sites {
  564.   font-size: 1.4rem;
  565.   display: flex;
  566.   align-items: center;
  567.   justify-content: center;
  568.   gap: 0.8rem;
  569.   flex-wrap: wrap;
  570.   width: 100%;
  571.   max-width: calc(var(--_height) * 13.35714286);
  572. }
  573. #engine-top-sites a {
  574.   border: 1px solid var(--engine-border-color);
  575.   border-radius: var(--engine-border-radius);
  576.   padding: 0.4rem 0.7rem;
  577.   color: var(--engine-text-1);
  578. }
  579. #engine-top-sites a:hover, #engine-top-sites a:focus {
  580.   color: var(--engine-accent-color);
  581.   background: var(--engine-button-hover);
  582. }
  583.  
  584. #main-footer {
  585.   font-size: 1.44rem;
  586.   padding: 1.6rem 3.2rem;
  587.   background: var(--engine-background-1);
  588. }
  589. #main-footer .width-constraint {
  590.   display: flex;
  591.   align-items: center;
  592.   justify-content: space-between;
  593. }
  594. #main-footer .width-constraint > span:first-of-type {
  595.   display: flex;
  596.   gap: 0.4rem;
  597. }
  598. #main-footer a {
  599.   color: inherit;
  600. }
  601. #main-footer a:hover, #main-footer a:focus {
  602.   color: var(--engine-accent-color);
  603. }
  604.  
  605. #main-nav {
  606.   --_button-height: 4.8rem;
  607.   --_button-height-top: 4rem;
  608.   z-index: 20;
  609.   transition: -webkit-backdrop-filter var(--stable-duration) linear;
  610.   transition: backdrop-filter var(--stable-duration) linear;
  611.   transition: backdrop-filter var(--stable-duration) linear, -webkit-backdrop-filter var(--stable-duration) linear;
  612. }
  613. #main-nav.hidden {
  614.   display: none;
  615. }
  616. #main-nav.visible {
  617.   -webkit-backdrop-filter: blur(2px);
  618.           backdrop-filter: blur(2px);
  619. }
  620. #main-nav.visible backdrop {
  621.   opacity: 0.25;
  622. }
  623. #main-nav.visible sidebar {
  624.   right: 0;
  625. }
  626. #main-nav:not(.visible) {
  627.   -webkit-backdrop-filter: blur(0);
  628.           backdrop-filter: blur(0);
  629. }
  630. #main-nav:not(.visible) backdrop {
  631.   opacity: 0;
  632. }
  633. #main-nav:not(.visible) sidebar {
  634.   right: calc(-1 * var(--main-nav-width));
  635. }
  636. #main-nav, #main-nav backdrop {
  637.   position: fixed;
  638.   top: 0;
  639.   right: 0;
  640.   height: 100%;
  641.   width: 100%;
  642. }
  643. #main-nav backdrop {
  644.   transition: opacity var(--stable-duration) linear;
  645.   background: var(--engine-background-2a);
  646.   z-index: 0;
  647. }
  648. #main-nav sidebar {
  649.   transition: right var(--stable-duration) ease-in-out;
  650.   position: fixed;
  651.   top: 0;
  652.   height: 100%;
  653.   width: var(--main-nav-width);
  654.   max-width: calc(100% - 4rem);
  655.   z-index: 1;
  656.   background: var(--engine-nav-bg-1);
  657.   box-shadow: var(--engine-background-2a) 0px 1px 2px 0px, var(--engine-background-2a) 0px 2px 6px 2px;
  658.   display: flex;
  659.   flex-direction: column;
  660. }
  661. #main-nav sidebar > top {
  662.   display: flex;
  663.   align-items: center;
  664.   justify-content: center;
  665.   gap: 1rem;
  666.   padding: 1.6rem 3.2rem;
  667.   height: var(--header-min-height);
  668. }
  669. #main-nav sidebar > top span.dummy {
  670.   display: block;
  671.   width: 0;
  672.   flex: 1 0 auto;
  673.   opacity: 0;
  674. }
  675. #main-nav sidebar > top span:not(.dummy) {
  676.   height: var(--_button-height-top);
  677.   width: var(--_button-height-top);
  678.   border-radius: var(--engine-border-radius);
  679.   background: var(--engine-nav-bg-2);
  680.   cursor: pointer;
  681.   display: flex;
  682.   align-items: center;
  683.   justify-content: center;
  684.   font-size: 2rem;
  685. }
  686. #main-nav sidebar > top span:not(.dummy) svg {
  687.   height: 1em;
  688.   width: 1em;
  689. }
  690. #main-nav sidebar > top span:not(.dummy) svg {
  691.   transition-duration: var(--safe-duration);
  692. }
  693. #main-nav sidebar > top span:not(.dummy):hover, #main-nav sidebar > top span:not(.dummy):focus {
  694.   background: var(--engine-button-hover);
  695. }
  696. #main-nav sidebar > top span:not(.dummy):active:not(.active) {
  697.   fill: var(--engine-accent-color);
  698.   color: var(--engine-accent-color);
  699. }
  700. #main-nav sidebar > top span:not(.dummy):active:not(.active) svg {
  701.   transform: scale(0.8);
  702. }
  703. #main-nav sidebar > top span:not(.dummy).active {
  704.   fill: var(--engine-background-1);
  705.   color: var(--engine-background-1);
  706.   background: var(--engine-accent-color);
  707. }
  708. #main-nav sidebar > top span:not(.dummy).close-menu {
  709.   font-size: 1.4rem;
  710. }
  711. #main-nav sidebar > top span:not(.dummy).close-menu:active svg {
  712.   transform: scale(0.78);
  713. }
  714. #main-nav sidebar > bottom {
  715.   padding: 0 3.2rem 1.6rem 3.2rem;
  716. }
  717. #main-nav sidebar > bottom.colors, #main-nav sidebar > bottom.translate {
  718.   display: none;
  719. }
  720. #main-nav sidebar > bottom.pages {
  721.   display: flex;
  722.   flex-direction: column;
  723.   gap: 2rem;
  724. }
  725. #main-nav sidebar > bottom.pages .theme-switch {
  726.   display: flex;
  727.   gap: 1rem;
  728. }
  729. #main-nav sidebar > bottom.pages .theme-switch span {
  730.   height: var(--_button-height);
  731.   width: 0;
  732.   flex: 1 0 auto;
  733.   border-radius: var(--engine-border-radius);
  734.   background: var(--engine-nav-bg-2);
  735.   cursor: pointer;
  736.   font-size: 2rem;
  737.   display: flex;
  738.   align-items: center;
  739.   justify-content: center;
  740.   transition: flex var(--stable-duration) ease-in-out;
  741. }
  742. #main-nav sidebar > bottom.pages .theme-switch span svg {
  743.   height: 1em;
  744.   width: 1em;
  745. }
  746. #main-nav sidebar > bottom.pages .theme-switch span svg {
  747.   transition-duration: var(--stable-duration);
  748. }
  749. #main-nav sidebar > bottom.pages .theme-switch span:hover, #main-nav sidebar > bottom.pages .theme-switch span:focus {
  750.   background: var(--engine-button-hover);
  751. }
  752. #main-nav sidebar > bottom.pages .theme-switch span:active:not(.active) {
  753.   fill: var(--engine-accent-color);
  754.   color: var(--engine-accent-color);
  755. }
  756. #main-nav sidebar > bottom.pages .theme-switch span:active:not(.active) svg {
  757.   transform: scale(0.8);
  758. }
  759. #main-nav sidebar > bottom.pages .theme-switch span.active {
  760.   flex: 2 0 auto;
  761.   fill: var(--engine-background-1);
  762.   color: var(--engine-background-1);
  763.   background: var(--engine-accent-color);
  764. }
  765. #main-nav sidebar > bottom.pages .og-pages {
  766.   display: flex;
  767.   flex-direction: column;
  768.   gap: 1rem;
  769. }
  770. #main-nav sidebar > bottom.pages .og-pages a {
  771.   height: var(--_button-height);
  772.   width: 100%;
  773.   display: flex;
  774.   align-items: center;
  775.   gap: calc(var(--_button-height) / 2);
  776.   padding: 0 calc(var(--_button-height) / 2);
  777.   background: var(--engine-nav-bg-2);
  778.   border-radius: var(--engine-border-radius);
  779. }
  780. #main-nav sidebar > bottom.pages .og-pages a svg {
  781.   height: 1em;
  782.   width: 1em;
  783. }
  784. #main-nav sidebar > bottom.pages .og-pages a, #main-nav sidebar > bottom.pages .og-pages a svg {
  785.   transition-duration: var(--safe-duration);
  786. }
  787. #main-nav sidebar > bottom.pages .og-pages a:hover, #main-nav sidebar > bottom.pages .og-pages a:focus {
  788.   background: var(--engine-button-hover);
  789. }
  790. #main-nav sidebar > bottom.pages .og-pages a:active:not(.active) {
  791.   transform: translateY(3px);
  792.   fill: var(--engine-accent-color);
  793.   color: var(--engine-accent-color);
  794. }
  795. #main-nav sidebar > bottom.pages .og-pages a.active {
  796.   fill: var(--engine-nav-bg-1);
  797.   color: var(--engine-nav-bg-1);
  798.   background: var(--engine-accent-color);
  799. }
  800.  
  801. html.delay-not #main-nav sidebar > bottom.pages .og-pages a, html.delay-not #main-nav sidebar > bottom.pages .og-pages a svg {
  802.   transition-duration: 0s;
  803. }
  804.  
  805. /* User Content */
  806. .user-content {
  807.   background: transparent;
  808. }
  809.  
  810. /* Search Results */
  811. #browse-script-list a.script-link {
  812.   color: var(--engine-link-default);
  813.   fill: var(--engine-link-default);
  814. }
  815. #browse-script-list a.script-link:visited {
  816.   color: var(--engine-link-visited);
  817.   fill: var(--engine-link-visited);
  818. }
  819.  
  820. html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebarred-main-content .list-current, html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebarred-main-content .script-list h2 {
  821.   font-weight: 400;
  822. }
  823. html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebarred-main-content .list-current a, html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebarred-main-content .script-list h2 a {
  824.   font-size: 2.125rem;
  825.   line-height: 1;
  826. }
  827. html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebarred-main-content .script-list li:not(.ad-entry) {
  828.   padding: 0 1.3rem;
  829.   border: 0;
  830. }
  831. html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebarred-main-content .script-list li:not(.ad-entry) h2 {
  832.   display: flex;
  833.   flex-wrap: wrap;
  834. }
  835. html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebarred-main-content .script-list li:not(.ad-entry) h2 .badge-js, html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebarred-main-content .script-list li:not(.ad-entry) h2 .badge-css {
  836.   display: unset;
  837.   height: -moz-fit-content;
  838.   height: fit-content;
  839.   margin: auto 1rem;
  840.   padding: 0.2rem 0.6rem;
  841.   border-radius: 3px;
  842. }
  843. html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebarred-main-content .script-list li:not(.ad-entry) h2 .description {
  844.   width: 100%;
  845. }
  846. html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebar .sidebar-search {
  847.   display: none;
  848. }
  849. html:not([data-home=true]) > body > .width-constraint > .sidebarred > .sidebar .list-option-group .list-current {
  850.   background: transparent;
  851. }
  852. `;
  853.  
  854. // Remove Bruteforced Styles
  855. function removeStyles() {
  856.   let styleTMP = document.querySelectorAll('head style[data-temp]');
  857.  
  858.   for (let x = 0; x < styleTMP.length; x++) {
  859.       styleTMP[x].remove();
  860.   }
  861. }
  862.  
  863. // Regular Styles
  864. function themeStyles(temp) {
  865.   if (document.querySelector('#globalCSS')) {return;}
  866.  
  867.   let themeChoice = localStorage.themeChoice || 'system',
  868.       mediaLight = '', mediaDark = '', typeLight, typeDark;
  869.   
  870.   if (themeChoice === 'system') {
  871.       mediaDark = '(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)';
  872.       mediaLight = '(prefers-color-scheme: light)';
  873.       typeDark = 'text/css';
  874.       typeLight = 'text/css';
  875.   } else if (themeChoice === 'light') {
  876.       typeDark = 'null';
  877.       typeLight = 'text/css';
  878.   } else if (themeChoice === 'dark') {
  879.       typeDark = 'text/css';
  880.       typeLight = 'null';
  881.   }
  882.  
  883.   if (!temp) {
  884.       // document.head.appendChild(elemake("link","",{"key":["rel","href","type","id"],"val":["stylesheet","http://127.0.0.1:10974/global.css","text/css","globalCSS"]}));
  885.       document.head.appendChild(elemake("style",globalCSS,{"key":["type","id"],"val":["text/css","globalCSS"]}));
  886.       document.head.appendChild(elemake("style",darkCSS,{"key":["type","id","media"],"val":[typeDark,"darkCSS",mediaDark]}));
  887.       document.head.appendChild(elemake("style",lightCSS,{"key":["type","id","media"],"val":[typeLight,"lightCSS",mediaLight]}));
  888.   } else {
  889.       // document.head.appendChild(elemake("link","",{"key":["rel","href","type","data-temp"],"val":["stylesheet","http://127.0.0.1:10974/global.css","text/css","globalCSS"]}));
  890.       document.head.appendChild(elemake("style",globalCSS,{"key":["type","data-temp"],"val":["text/css","globalCSS"]}));
  891.       document.head.appendChild(elemake("style",darkCSS,{"key":["type","data-temp","media"],"val":[typeDark,"darkCSS",mediaDark]}));
  892.       document.head.appendChild(elemake("style",lightCSS,{"key":["type","data-temp","media"],"val":[typeLight,"lightCSS",mediaLight]}));
  893.   }
  894. }
  895.  
  896. // Know Basics
  897. function setBasic() {
  898.   if (window.location.origin.match(/sleazyfork/)) {
  899.       window.siteMatch = 'sleazy';
  900.   } else {
  901.       window.siteMatch = 'greasy';
  902.   }
  903.  
  904.   window.currentLocale = document.documentElement.getAttribute('lang');
  905.   let cPath = window.location.pathname.replace(/\//g,'');
  906.  
  907.   if (cPath === '' || cPath === window.currentLocale) {
  908.       window.onHomepage = true;
  909.       document.documentElement.setAttribute('data-home', 'true');
  910.   } else {
  911.       window.onHomepage = false;
  912.       document.documentElement.setAttribute('data-home', 'false');
  913.   }
  914. }
  915.  
  916. // Process Theme
  917. function processTheme() {
  918.   let themeLight = localStorage.themeLight || 'default',
  919.       themeDark = localStorage.themeDark || 'default',
  920.       themeAccent = localStorage.themeAccent || 'default',
  921.       html = document.documentElement;
  922.  
  923.   html.setAttribute('data-accent',themeAccent);
  924.   html.setAttribute('data-light',themeLight);
  925.   html.setAttribute('data-dark',themeDark);
  926.  
  927.   try {
  928.       let themeChoice = localStorage.themeChoice || 'system',
  929.           mediaLight = '', mediaDark = '', typeLight, typeDark,
  930.           lightStyle = document.querySelector('#lightCSS'),
  931.           darkStyle = document.querySelector('#darkCSS');
  932.   
  933.       if (themeChoice === 'system') {
  934.           mediaDark = '(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)';
  935.           mediaLight = '(prefers-color-scheme: light)';
  936.           typeDark = 'text/css';
  937.           typeLight = 'text/css';
  938.       } else if (themeChoice === 'light') {
  939.           typeDark = 'null';
  940.           typeLight = 'text/css';
  941.       } else if (themeChoice === 'dark') {
  942.           typeDark = 'text/css';
  943.           typeLight = 'null';
  944.       }
  945.  
  946.       lightStyle.setAttribute('type',typeLight);
  947.       darkStyle.setAttribute('type',typeDark);
  948.       lightStyle.setAttribute('media',mediaLight);
  949.       darkStyle.setAttribute('media',mediaDark);
  950.   } catch(e) {}
  951. }
  952.  
  953. // Click primary theme toggle
  954. function toggleTheme(key) {
  955.   document.documentElement.classList.add('no-delay');
  956.   document.querySelector('#main-nav section.theme-switch > .active').classList.remove('active');
  957.  
  958.   if (key === 'system') {
  959.       document.querySelector('#main-nav section.theme-switch > span.system').classList.add('active');
  960.       localStorage.themeChoice = 'system';
  961.   } else if (key === 'light') {
  962.       document.querySelector('#main-nav section.theme-switch > span.day').classList.add('active');
  963.       localStorage.themeChoice = 'light';
  964.   } else {
  965.       document.querySelector('#main-nav section.theme-switch > span.night').classList.add('active');
  966.       localStorage.themeChoice = 'dark';
  967.   }
  968.  
  969.   processTheme();
  970.   setTimeout(() => {
  971.       document.documentElement.classList.remove('no-delay');
  972.   }, 10);
  973. }
  974.  
  975. // Calculate loading time.
  976. function loadTime() {
  977.   let loadTime = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart;
  978.   try {
  979.       document.querySelector('#main-footer .width-constraint > span:nth-of-type(2)').textContent = 'Loaded in ' + (loadTime/1000).toFixed(2) + ' secs';
  980.   } catch {}
  981. }
  982.  
  983. // Add a simple footer on EVERY page
  984. function addFOOTER() {
  985.   let footerName = 'Greasy Fork';
  986.  
  987.   if (window.siteMatch === 'sleazy') {
  988.       footerName = 'Sleazy Fork';
  989.   }
  990.  
  991.   let footer = `
  992.       <div class="width-constraint">
  993.           <span>
  994.               <a href="/">${footerName}</a>
  995.               <span>|</span>
  996.               <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html" target="_blank">GPL-3.0</a>
  997.           </span>
  998.           <span>•••</span>
  999.       </div>
  1000.   `.replace(/>\s+</g,'><');
  1001.  
  1002.   document.body.appendChild(elemake("footer",footer,{"key":["id"],"val":["main-footer"]}));
  1003. }
  1004.  
  1005. // Update Navigation
  1006. function forkNAV() {
  1007.   let ogLinks = document.querySelectorAll('#site-nav > nav a:not([onclick])'),
  1008.       linkPrint = '', linkActive;
  1009.  
  1010.   if (window.location.origin + window.location.pathname === `${window.location.origin}/${window.currentLocale}` || window.location.origin + window.location.pathname === `${window.location.origin}/${window.currentLocale}/`) {
  1011.       linkActive = ' class="active"';
  1012.   } else {
  1013.       linkActive = '';
  1014.   }
  1015.  
  1016.   linkPrint = `<a${linkActive} href="${window.location.origin}/${window.currentLocale}">${navSVGs["homeSVG"]}<span>Home</span></a>`;
  1017.  
  1018.   for (let x = 0; x < ogLinks.length; x++) {
  1019.       if (window.location.origin + window.location.pathname === ogLinks[x].href) {
  1020.           linkActive = ' class="active"';
  1021.       } else {
  1022.           linkActive = '';
  1023.       }
  1024.  
  1025.       linkPrint += `<a${linkActive} href=${ogLinks[x].href}>${navSVGs[ogLinks[x].href.replace(/.*\/(.*)$/,'$1SVG')]}<span>${ogLinks[x].textContent}</span></a>`;
  1026.   }
  1027.  
  1028.   let newNAV = `
  1029.       <sidebar>
  1030.           <top>
  1031.               <span class="pages active">
  1032.                   ${pagesSVG}
  1033.               </span>
  1034.               <span class="translate">
  1035.                   ${translateSVG}
  1036.               </span>
  1037.               <span class="colors">
  1038.                   ${colorsSVG}
  1039.               </span>
  1040.               <span class="dummy"></span>
  1041.               <span class="close-menu">
  1042.                   ${closeSVG}
  1043.               </span>
  1044.           </top>
  1045.           <bottom class="pages">
  1046.               <section class="theme-switch">
  1047.                   <span class="system active">
  1048.                       ${autoSVG}
  1049.                   </span>
  1050.                   <span class="day">
  1051.                       ${sunSVG}
  1052.                   </span>
  1053.                   <span class="night">
  1054.                       ${moonSVG}
  1055.                   </span>
  1056.               </section>
  1057.               <section class="og-pages">
  1058.                   ${linkPrint}
  1059.               </section>
  1060.           </bottom>
  1061.           <bottom class="translate">
  1062.               <section class="help">
  1063.               </section>
  1064.               <section class="options">
  1065.               </section>
  1066.           </bottom>
  1067.           <bottom class="colors">
  1068.               <section class="accents">
  1069.               </section>
  1070.               <section class="others">
  1071.               </section>
  1072.           </bottom>
  1073.       </sidebar>
  1074.       <backdrop></backdrop>
  1075.   `.replace(/>\s+</g,'><');
  1076.  
  1077.   document.body.insertBefore(elemake("nav",newNAV,{"key":["id","class"],"val":["main-nav","hidden"]}), document.body.children[0]);
  1078.  
  1079.   toggleTheme(localStorage.themeChoice);
  1080. }
  1081.  
  1082. // Header is different on HOMEPAGE
  1083. function forkHEADER() {
  1084.   let headerDiv = document.querySelector('#main-header > .width-constraint'),
  1085.       userProfileLink = '',
  1086.       userProfileName = profileSVG,
  1087.       signOutLink = '',
  1088.       signInLink = '',
  1089.       notificationLink = '';
  1090.  
  1091.   if (headerDiv.querySelector('#nav-user-info > .user-profile-link')) {
  1092.       userProfileLink = ` href="${headerDiv.querySelector('#nav-user-info > .user-profile-link > a').href}"`;
  1093.       userProfileName = `<span>${headerDiv.querySelector('#nav-user-info > .user-profile-link > a').textContent}</span>`;
  1094.       signOutLink = `<a class="signout" href="${headerDiv.querySelector('#nav-user-info > .sign-out-link > a').href}">${logoutSVG}</a>`;
  1095.   } else {
  1096.       signInLink = ` href="${headerDiv.querySelector('#nav-user-info > .sign-in-link > a').href}"`;
  1097.   }
  1098.  
  1099.   if (headerDiv.querySelector('#nav-user-info > .notification-widget')) {
  1100.       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>`;
  1101.   }
  1102.  
  1103.   let headerHTML = `
  1104.       <a class="${window.siteMatch}-svg" href="/">
  1105.           ${forkSVG}
  1106.       </a>
  1107.       <form class="engine-search-main" action="/${window.currentLocale}/scripts" accept-charset="UTF-8" method="get">
  1108.           <input class="engine-search-input" name="q" value="" autocomplete="off" type="search" required>
  1109.           <span class="engine-search-clear">${clearSVG}</span>
  1110.           <span class="engine-search-submit">${findSVG}</span>
  1111.       </form>
  1112.       <span class="dummy"></span>
  1113.       ${notificationLink}
  1114.       <a class="profile"${userProfileLink}${signInLink}>${userProfileName}</a>
  1115.       ${signOutLink}
  1116.       <span class="menu">${menuSVG}</span>
  1117.   `.replace(/>\s+</g,'><');
  1118.  
  1119.   if (window.onHomepage) {
  1120.       headerHTML = `
  1121.           <span class="dummy"></span>
  1122.           ${notificationLink}
  1123.           <a class="profile"${userProfileLink}${signInLink}>${userProfileName}</a>
  1124.           ${signOutLink}
  1125.           <span class="menu">${menuSVG}</span>
  1126.       `.replace(/>\s+</g,'><');
  1127.   }
  1128.  
  1129.   headerDiv.innerHTML = headerHTML;
  1130.  
  1131.   if (!window.onHomepage) {
  1132.       forkSEARCH();
  1133.  
  1134.       let sInput = document.querySelector('.engine-search-input');
  1135.  
  1136.       if (window.location.search.match(/q=/)) {
  1137.           sInput.value = getVar(window.location.href).q.replace(/\+/g,' ');
  1138.       } else if (window.location.search.match(/c=/)) {
  1139.           sInput.value = getVar(window.location.href).c.replace(/\+/g,' ');
  1140.       } else if (window.location.pathname.match(/\/by-site\//)) {
  1141.           sInput.value = window.location.pathname.replace(/.*by-site\//,'');
  1142.       }
  1143.  
  1144.       function isActive(key) {
  1145.           const reKey = new RegExp(key, "i");
  1146.           if (!window.location.pathname.match(reKey)) {return '';}
  1147.           return ' class="active"';
  1148.       }
  1149.  
  1150.       const searchOPTIONS = `
  1151.           <a${isActive('scripts$')} href="/${window.currentLocale}/scripts?q=${sInput.value}">Scripts</a>
  1152.           <a${isActive('scripts/by-site')} href="/${window.currentLocale}/scripts/by-site/${sInput.value}">Sites</a>
  1153.           <a${isActive('scripts/libraries')} href="/${window.currentLocale}/scripts/libraries?q=${sInput.value}">Libraries</a>
  1154.           <a${isActive('scripts/code-search')} href="/${window.currentLocale}/scripts/code-search?c=${sInput.value}">Code</a>
  1155.           <a${isActive('users$')} href="/${window.currentLocale}/users?q=${sInput.value}">Users</a>
  1156.       `;
  1157.  
  1158.       headerDiv.parentNode.appendChild(elemake("div", searchOPTIONS, {"key":["class"],"val":["search-options"]}));
  1159.  
  1160.       sInput.dispatchEvent(new Event('input', {'bubbles': true}));
  1161.   }
  1162. }
  1163.  
  1164. // Update HOMEPAGE with new Search
  1165. function forkHOME() {
  1166.   if (!document.getElementById('home-script-nav')) {return;}
  1167.  
  1168.   let topSites = document.querySelectorAll('#home-top-sites a'),
  1169.       siteTags = '';
  1170.   for (let x = 0; x < topSites.length; x++) {
  1171.       siteTags = siteTags + topSites[x].outerHTML;
  1172.   }
  1173.  
  1174.   let logoSVG = forkSVG + greasySVG;
  1175.  
  1176.   if (window.siteMatch === 'sleazy') {
  1177.       logoSVG = forkSVG + sleazySVG;
  1178.   }
  1179.  
  1180.   document.querySelector('body > div.width-constraint > section.text-content').innerHTML = `
  1181.       <a class="${window.siteMatch}-svg" href="/">
  1182.           ${logoSVG}
  1183.       </a>
  1184.       <form class="engine-search-main" action="${document.querySelector('#home-script-nav .home-search').getAttribute('action')}" accept-charset="UTF-8" method="get">
  1185.           <input class="engine-search-input" name="q" value="" autocomplete="off" type="search" required>
  1186.           <span class="engine-search-clear">${clearSVG}</span>
  1187.           <span class="engine-search-submit">${findSVG}</span>
  1188.       </form>
  1189.       <span class="engine-welcome">What are we forking today?</span>
  1190.       <div id="engine-top-sites">${siteTags}</div>
  1191.   `.replace(/>\s+</g,'><');
  1192.  
  1193.   forkSEARCH();
  1194. }
  1195.  
  1196. // New search box
  1197. function forkSEARCH() {
  1198.   let input = document.querySelector('.engine-search-input'),
  1199.       clear = document.querySelector('.engine-search-clear'),
  1200.       submit = document.querySelector('.engine-search-submit');
  1201.  
  1202.   if (window.onHomepage) {
  1203.       input.parentNode.parentNode.classList.add('all-center-home');
  1204.   }
  1205.  
  1206.   function checkInput() {
  1207.       if (input.value === '') {
  1208.           input.parentNode.classList.remove('active');
  1209.       } else {
  1210.           input.parentNode.classList.add('active');
  1211.       }
  1212.   }
  1213.  
  1214.   input.addEventListener('input', checkInput);
  1215.   clear.addEventListener('click', () => {
  1216.       setTimeout(() => {
  1217.           clear.parentNode.children[0].value = '';
  1218.           checkInput();
  1219.           clear.parentNode.children[0].focus();
  1220.       }, 100);
  1221.   });
  1222.   submit.addEventListener('click', () => {
  1223.       submit.parentNode.submit();
  1224.   });
  1225. }
  1226.  
  1227. // Event listeners in one place
  1228. function listenEvents() {
  1229.   // Close Sidebar
  1230.   function closeNav() {
  1231.       document.querySelector('#main-nav').classList.remove('visible');
  1232.       setTimeout(() => {
  1233.           document.querySelector('#main-nav').classList.add('hidden');
  1234.       }, 100);
  1235.   }
  1236.   document.querySelector('#main-nav span.close-menu').addEventListener('click', closeNav);
  1237.   document.querySelector('#main-nav backdrop').addEventListener('click', closeNav);
  1238.  
  1239.   // Open Sidebar
  1240.   function openNav() {
  1241.       document.querySelector('#main-nav').classList.remove('hidden');
  1242.       setTimeout(() => {
  1243.           document.querySelector('#main-nav').classList.add('visible');
  1244.       }, 10);
  1245.   }
  1246.   document.querySelector('#main-header span.menu').addEventListener('click', openNav);
  1247.  
  1248.   document.querySelector('#main-nav section.theme-switch > span.system').addEventListener('click', () => {toggleTheme('system')});
  1249.   document.querySelector('#main-nav section.theme-switch > span.day').addEventListener('click', () => {toggleTheme('light')});
  1250.   document.querySelector('#main-nav section.theme-switch > span.night').addEventListener('click', () => {toggleTheme('dark')});
  1251. }