☰

GreasyFork Beautify Mod! *Deprecated*

Custom Themes, premade themes and more

  1. // ==UserScript==
  2. // @name         GreasyFork Beautify Mod! *Deprecated*
  3. // @namespace    GreasyFork Beautify Mod! *Deprecated*
  4. // @version      2
  5. // @description  Custom Themes, premade themes and more
  6. // @author       TigerYT
  7. // @match        *://greatest.deepsurf.us/*
  8. // @require      https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
  9. // ==/UserScript==
  10.  
  11. /* Theme Menu */
  12.  
  13. $('body').prepend('<div class="container"> <div class="theme-menu"> <div class="name"><a href="#">Theme</a></div> <div class="close-menu"><a href="#">X</a></div> <div id="theme-list"> <div class="item defaultthemebutton"><a href="#">Default</a></div> <div class="item orangethemebutton"><a href="#">Oranganic Fruits</a></div> <div class="item bluethemebutton"><a href="#">Blue My Mind</a></div> <div class="item tealthemebutton"><a href="#">Teal I Die</a></div> <div class="item greythemebutton"><a href="#">Greyvy</a></div> <div class="item cyanthemebutton"> <a href="#">Cyantific Facts</a></div><div class="item brownthemebutton"> <a href="#">Brownie Goods</a></div> </div> </div></div>');
  14.  
  15. $(".name").click(function () {
  16.     $(".theme-menu").addClass("expanded");
  17.     $("#theme-list").addClass("visible");
  18.     $(".close-menu").addClass("visible");
  19.     $(".name").removeClass("move-down").addClass("move-up");
  20. });
  21.  
  22. $(".close-menu").click(function () {
  23.     $(".theme-menu").removeClass("expanded");
  24.     $("#theme-list").removeClass("visible");
  25.     $(".close-menu").removeClass("visible");
  26.     $(".name").removeClass("move-up").addClass("move-down");
  27. });
  28.  
  29. /* End of Theme Menu */
  30.  
  31. /* Main Design */
  32.  
  33. (function() {var maincss = [
  34.     "* {",
  35.     "  transition: background 1s;",
  36.     "}",
  37.     ".theme-menu {",
  38.     "  font-family: Tahoma, Verdana, Segoe, sans-serif;",
  39.     "  display: block;",
  40.     "  border: none;",
  41.     "  outline: none;",
  42.     "  margin: auto;",
  43.     "  margin-top: 100px;",
  44.     "  background-color: var(--title-or-link-text-primary-colour-hover);",
  45.     "  color: var(--title-or-link-text-secondary-colour);",
  46.     "  width: 80px;",
  47.     "  height: 50px;",
  48.     "  border-radius: 50px;",
  49.     "  font-size: 14px;",
  50.     "  letter-spacing: 1px;",
  51.     "  text-align: center;",
  52.     "  padding-top: 2px;",
  53.     "  transition: all 0.5s ease-in-out;",
  54.     "  box-sizing: border-box;",
  55.     "  position: absolute;",
  56.     "  top: 75px;",
  57.     "  right: 80px;",
  58.     "}",
  59.     "",
  60.     ".theme-menu:hover {",
  61.     "  box-shadow: 0 5px 10px rgba(0, 0, 0, 29.8);",
  62.     "}",
  63.     "",
  64.     ".theme-menu.expanded {",
  65.     "  width: 200px;",
  66.     "  height: auto;",
  67.     "  background-color: var(--title-or-link-text-primary-colour-hover);",
  68.     "  color: var(--quaternary-background);",
  69.     "  font-size: 15px;",
  70.     "  letter-spacing: 3px;",
  71.     "  border-radius: 25px;",
  72.     "  right: 25px;",
  73.     "}",
  74.     "",
  75.     ".theme-menu #theme-list {",
  76.     "  display: none;",
  77.     "  opacity: 0;",
  78.     "  transition: all 0.6s ease-in;",
  79.     "}",
  80.     "",
  81.     "#theme-list.visible {",
  82.     "  position: relative;",
  83.     "  bottom: 20px;",
  84.     "  display: block;",
  85.     "  opacity: 1;",
  86.     "}",
  87.     "",
  88.     "#theme-list .item {",
  89.     "  width: 170px;",
  90.     "  height: 30px;",
  91.     "  margin: auto;",
  92.     "  padding-top: 8px;",
  93.     "  margin-bottom: 10px;",
  94.     "}",
  95.     "",
  96.     ".item:after {",
  97.     "  display:block;",
  98.     "  content: '';",
  99.     "  padding-bottom: 3px;",
  100.     "  border-bottom: solid 3px var(--secondary-background);",
  101.     "  transform: scaleX(0);",
  102.     "  transition: 0.3s;",
  103.     "}",
  104.     "",
  105.     ".item:hover:after {",
  106.     "  transform: scaleX(1);",
  107.     "}",
  108.     "",
  109.     ".theme-menu .name {",
  110.     "  position: relative;",
  111.     "  display: block;",
  112.     "  width: 100%;",
  113.     "  height: 20px;",
  114.     "  margin: 15px auto;",
  115.     "  box-sizing: border-box;",
  116.     "}",
  117.     "",
  118.     ".name.move-up {",
  119.     "  top: 0;",
  120.     "  animation: moveup 0.6s ease-in-out;",
  121.     "  animation-fill-mode: forwards;",
  122.     "}",
  123.     "",
  124.     "@keyframes moveup {",
  125.     "  from {",
  126.     "    top: 0;",
  127.     "  }",
  128.     "  to {",
  129.     "    top: -40px;",
  130.     "  }",
  131.     "}",
  132.     "",
  133.     ".name.move-down {",
  134.     "  top: -40px;",
  135.     "  animation: movedown 0.6s ease-in-out;",
  136.     "  animation-fill-mode: forwards;",
  137.     "}",
  138.     "",
  139.     "@keyframes movedown {",
  140.     "  from {",
  141.     "    top: -40px;",
  142.     "  }",
  143.     "  to {",
  144.     "    top: 0px;",
  145.     "  }",
  146.     "}",
  147.     "",
  148.     ".theme-menu .close-menu {",
  149.     "  position: relative;",
  150.     "  margin: 5px;",
  151.     "  display: none;",
  152.     "  opacity: 0;",
  153.     "  animation: move 0.6s ease-out;",
  154.     "  animation-fill-mode: forwards;",
  155.     "}",
  156.     "",
  157.     ".close-menu.visible {",
  158.     "  position: relative;",
  159.     "  bottom: 30px;",
  160.     "  display: block;",
  161.     "  opacity: 1;",
  162.     "}",
  163.     "",
  164.     "@keyframes move {",
  165.     "  from {",
  166.     "    top: 0;",
  167.     "  }",
  168.     "  to {",
  169.     "    top: -40px;",
  170.     "  }",
  171.     "}",
  172.     "",
  173.     "a {",
  174.     "  text-decoration: none !important;",
  175.     "  font-size: inherit;",
  176.     "  color: inherit;",
  177.     "}",
  178.     "",
  179.     "a:link {",
  180.     "  color: inherit;",
  181.     "  text-decoration: none !important;",
  182.     "  text-align: center;",
  183.     "}",
  184.     "",
  185.     "a:visited {",
  186.     "  color: inherit;",
  187.     "  text-decoration: none !important;",
  188.     "}",
  189.     "",
  190.     "a:hover {",
  191.     "  color: inherit;",
  192.     "  text-decoration: none !important;",
  193.     "}",
  194.     "",
  195.     "a:active {",
  196.     "  color: inherit;",
  197.     "  text-decoration: none !important;",
  198.     "}",
  199.     "",
  200.     "body:not(.Settings) #Head, ",
  201.     "body:not(.Settings) {",
  202.     "  background: var(--primary-background);",
  203.     "}",
  204.     "   ",
  205.     "#Body {",
  206.     "  margin: 50px 150px;",
  207.     "  margin-left: 75px;",
  208.     "  width: 75%;",
  209.     "}",
  210.     "   ",
  211.     "#Content {",
  212.     "  margin: 0!important;",
  213.     "}",
  214.     "   ",
  215.     ".width-constraint {",
  216.     "  margin: auto;",
  217.     "  max-width: none;",
  218.     "}",
  219.     "   ",
  220.     ".sidebarred {",
  221.     "  display: flex;",
  222.     "  width: 75%;",
  223.     "  margin-left: 50px;",
  224.     "}",
  225.     "   ",
  226.     ".sidebarred-main-content > p {",
  227.     "  text-align: center;",
  228.     "}",
  229.     "   ",
  230.     ".script-list,",
  231.     ".user-list,",
  232.     ".text-content,",
  233.     "#script-info, ",
  234.     "#Content {",
  235.     "  list-style-type: none;",
  236.     "  box-shadow: 0 0 5px var(--secondary-background);",
  237.     "  background-color: var(--secondary-background);",
  238.     "  border: 0px solid var(--secondary-background);",
  239.     "  border-radius: 50px;",
  240.     "  box-sizing: border-box;",
  241.     "  margin: 25px 250px 14px 75px;",
  242.     "  color: var(--primary-text-colour);",
  243.     "  padding: 5px 50px;",
  244.     "}",
  245.     "   ",
  246.     "body,",
  247.     "select,",
  248.     "input  {",
  249.     "  font-family: \'Open Sans\' sans-serif;",
  250.     "  color: var(--primary-text-colour);",
  251.     "}",
  252.     "   ",
  253.     "#main-header, ",
  254.     "body:not(.Settings) #Head {",
  255.     "  background-image: linear-gradient(var(--title-or-link-text-primary-colour-hover), var(--title-or-link-text-primary-colour));",
  256.     "  padding: 0.25em 0;",
  257.     "}",
  258.     "   ",
  259.     "#site-name {",
  260.     "    margin: 10px 50px;",
  261.     "}",
  262.     "   ",
  263.     "p.subtitle  {",
  264.     "  margin: -8px 0 0 10px;",
  265.     "  font-size: 0.7em;",
  266.     "  text-shadow: -1px -1px 0px var(--title-or-link-text-primary-colour), 1px -1px 0px var(--title-or-link-text-primary-colour), -1px 1px 0px var(--title-or-link-text-primary-colour), 1px 1px 0px var(--title-or-link-text-primary-colour) !important;",
  267.     "}",
  268.     "   ",
  269.     "a,",
  270.     "a:visited  {",
  271.     "  color: var(--title-or-link-text-primary-colour-hover);",
  272.     "}",
  273.     "   ",
  274.     "a:hover  {",
  275.     "  color: var(--title-or-link-text-primary-colour);",
  276.     "}",
  277.     "   ",
  278.     "figure  {",
  279.     "  padding: 5px;",
  280.     "  border: none;",
  281.     "  border-radius: 5px;",
  282.     "}",
  283.     "   ",
  284.     "nav {",
  285.     "  position: absolute!important;",
  286.     "  right: 0!important;",
  287.     "  background-color: var(--title-or-link-text-primary-colour)!important;",
  288.     "  min-width: 100%!important;",
  289.     "  display: none;",
  290.     "  padding: 5px 0!important;",
  291.     "  z-index: 10!important;",
  292.     "}",
  293.     "   ",
  294.     ":focus  {",
  295.     "  outline: -webkit-focus-ring-color auto 5px;",
  296.     "  outline-color: transparent;",
  297.     "  outline-style: auto;",
  298.     "  outline-width: 5px;",
  299.     "}",
  300.     "   ",
  301.     ".script-list li {",
  302.     "  background: var(--secondary-background);",
  303.     "  border: 5px solid var(--secondary-background);",
  304.     "  border-radius: 75px;",
  305.     "  padding: 2em;",
  306.     "  margin-bottom: 10px;",
  307.     "}",
  308.     "   ",
  309.     ".script-list,",
  310.     ".user-list {",
  311.     "  list-style-type: none;",
  312.     "  box-shadow: 0 0 5px var(--primary-background);",
  313.     "  background-color: var(--primary-background);",
  314.     "  border: 0px solid var(--primary-background);",
  315.     "  border-radius: 5px;",
  316.     "  box-sizing: border-box;",
  317.     "  margin: 14px 0;",
  318.     "}",
  319.     "   ",
  320.     ".list-option-group ul  {",
  321.     "  margin: .5em 0 0;",
  322.     "  list-style-type: none;",
  323.     "  padding: 1em 0;",
  324.     "  box-shadow: 0 0 5px var(--primary-background);",
  325.     "  border: 0px solid var(--primary-background);",
  326.     "  border-radius: 5px;",
  327.     "  background-color: var(--secondary-background);",
  328.     "}",
  329.     "   ",
  330.     ".list-option-group .list-current  {",
  331.     "  border-right: 20px solid var(--secondary-background);",
  332.     "  margin: 0em -21px 0em 0px;",
  333.     "  padding: 0.4em 1em 0.4em calc(1em - 3px);",
  334.     "  background: var(--primary-background);",
  335.     "  border-left: none;",
  336.     "  box-shadow: none;",
  337.     "}",
  338.     "   ",
  339.     ".list-option-group a:hover,",
  340.     ".list-option-group a:focus  {",
  341.     "  background: var(--primary-background);",
  342.     "  text-decoration: none;",
  343.     "  box-shadow: none;",
  344.     "}",
  345.     "   ",
  346.     ".tabs .current  {",
  347.     "  background: rgba(0,0,0,0.03);",
  348.     "  position: relative;",
  349.     "  top: -4px;",
  350.     "  font-weight: bold;",
  351.     "  border-top: 7px solid var(--title-or-link-text-primary-colour);",
  352.     "  box-shadow: inset 1px 0 rgba(0,0,0,0.1),",
  353.     "  inset -1px 0 rgba(0,0,0,0.1),",
  354.     "inset 0 -1px rgba(0,0,0,0.1);",
  355.     "}",
  356.     "   ",
  357.     ".install-help-link,",
  358.     ".install-help-link:visited,",
  359.     ".install-help-link:active {",
  360.     "  background-color: var(--title-or-link-text-primary-colour-hover)!important;",
  361.     "  color: ",
  362.     "        var(--tertiary-text-colour);",
  363.     "}",
  364.     "   ",
  365.     ".install-link,",
  366.     ".install-link:visited,",
  367.     ".install-link:active  {",
  368.     "  display: inline-block;",
  369.     "  background-color: var(--title-or-link-text-primary-colour)!important;",
  370.     "  padding: 0.5em 1em;",
  371.     "  color: var(--tertiary-text-colour);",
  372.     "  text-decoration: none;",
  373.     "}",
  374.     "   ",
  375.     "div#install-link+#install-help-link:hover > .install-link {",
  376.     "  background:  var(--title-or-link-text-primary-colour-hover);",
  377.     "}",
  378.     "   ",
  379.     "div#install-link+#install-help-link:hover > .install-help-link {",
  380.     "  background:  var(--title-or-link-text-primary-colour);",
  381.     "}",
  382.     "   ",
  383.     "select  {",
  384.     "  -webkit-appearance: menulist;",
  385.     "  box-sizing: border-box;",
  386.     "  align-items: center;",
  387.     "  white-space: pre;",
  388.     "  -webkit-rtl-ordering: logical;",
  389.     "  color: var(--secondary-text-colour);",
  390.     "  background-color: var(--title-or-link-text-primary-colour-hover);",
  391.     "  cursor: pointer;",
  392.     "  border-width: 1px;",
  393.     "  border-style: solid;",
  394.     "  border-color: var(--secondary-background);",
  395.     "  border-image: initial;",
  396.     "}",
  397.     "   ",
  398.     "#additional-info > div  {",
  399.     "  margin: 1em 0;",
  400.     "  padding: 1em;",
  401.     "  border: none;",
  402.     "  border-radius: 10px;",
  403.     "  background-color: var(--primary-background);",
  404.     "}",
  405.     "   ",
  406.     "textarea, #ace-editor {",
  407.     "  background: var(--primary-background);",
  408.     "  color: var(--primary-text-colour);",
  409.     "  border: none;",
  410.     "  padding: 25px;",
  411.     "}",
  412.     "   ",
  413.     ".ace_gutter-cell,",
  414.     ".ace-tm .ace_gutter, ",
  415.     ".preview-results {",
  416.     "  background: var(--tertiary-background);",
  417.     "}",
  418.     "",
  419.     "   #script-version-additional-info-0  {",
  420.     "  border: none;",
  421.     "  border-radius: 10px;",
  422.     "  background: var(--primary-background);",
  423.     "  color: var(--primary-text-colour);",
  424.     "  padding: 25px;",
  425.     "}",
  426.     "   ",
  427.     "   select#language-selector-locale {",
  428.     "  background: var(--tertiary-text-colour);",
  429.     "   }",
  430.     "   ",
  431.     "pre,",
  432.     "code,",
  433.     "#code-container {",
  434.     "  border-radius: 2px;",
  435.     "  border: none;",
  436.     "  color: var(--primary-background);",
  437.     "  background-color: var(--title-or-link-text-primary-colour)!important;",
  438.     "   }",
  439.     "   ",
  440.     "    .Message pre ol {",
  441.     "  background-color: var(--title-or-link-text-primary-colour)!important;",
  442.     "    }",
  443.     "   ",
  444.     "   .CodeRay .line-numbers {",
  445.     "  background-color: var(--tertiary-background) !important;",
  446.     "   }",
  447.     "   ",
  448.     "   #code-container > table > tbody > tr > td.code {",
  449.     "  border-radius: 2px;",
  450.     "  border: 1px solid var(--primary-background) !important;",
  451.     "  background-color: var(--primary-background) !important;",
  452.     "   }",
  453.     "   ",
  454.     "   #code-container {",
  455.     "  border: none;",
  456.     "   }",
  457.     "   ",
  458.     "   .expander {",
  459.     "  cursor: pointer;",
  460.     "  padding: 2px 5px;",
  461.     "  color: var(--primary-text-colour);",
  462.     "  font-weight: bolder;",
  463.     "  border-radius: 3px;",
  464.     "  background-color: var(--primary-background);",
  465.     "  text-decoration: none;",
  466.     "   }",
  467.     "   ",
  468.     "   a:-webkit-any-link {",
  469.     "  text-decoration: none;",
  470.     "   }",
  471.     "   ",
  472.     "input[type=search] {",
  473.     "  -webkit-appearance: textfield;",
  474.     "  background-color: var(--secondary-background);",
  475.     "  -webkit-rtl-ordering: logical;",
  476.     "  cursor: text;",
  477.     "  padding: 1px;",
  478.     "  border-width: 10px;",
  479.     "  border-style: solid;",
  480.     "  border-color: var(--secondary-background);",
  481.     "  border-image: initial;",
  482.     "  border-radius: 7px;",
  483.     "}",
  484.     "   ",
  485.     "input[type=text] {",
  486.     "  background-color: var(--primary-background);",
  487.     "  -webkit-rtl-ordering: logical;",
  488.     "  cursor: text;",
  489.     "  border-width:10px;",
  490.     "  border-style: solid;",
  491.     "  border-color: var(--primary-background);",
  492.     "  border-radius: 7px;",
  493.     "  margin-top: 15px;",
  494.     "}",
  495.     "   ",
  496.     "input[type=url] {",
  497.     "  background-color: var(--primary-background);",
  498.     "  -webkit-rtl-ordering: logical;",
  499.     "  cursor: text;",
  500.     "  border-width:10px;",
  501.     "  border-style: solid;",
  502.     "  border-color: var(--primary-background);",
  503.     "  border-radius: 7px;",
  504.     "  margin-top: 15px;",
  505.     "}",
  506.     "   ",
  507.     "button#add-additional-info {",
  508.     "  color: var(--quaternary-text-colour);",
  509.     "  background-color: var(--title-or-link-text-primary-colour);",
  510.     "  border: 5px solid var(--title-or-link-text-primary-colour-hover);",
  511.     "  margin-top: 5px;",
  512.     "  margin-left: 15px;",
  513.     "  height: 50px;",
  514.     "  width: 300px;",
  515.     "  cursor: pointer;",
  516.     "  font-family: Agency FB;",
  517.     "  font-size: x-large;",
  518.     "}",
  519.     "   ",
  520.     "button.g-recaptcha {",
  521.     "  color: var(--quinary-text-colour);",
  522.     "  background-color: var(--title-or-link-text-primary-colour-hover);",
  523.     "  border: 5px solid var(--title-or-link-text-primary-colour);",
  524.     "  margin-top: 5px;",
  525.     "  margin-left: 15px;",
  526.     "  height: 50px;",
  527.     "  width: 300px;",
  528.     "  cursor: pointer;",
  529.     "  font-family: Agency FB;",
  530.     "  font-size: x-large;",
  531.     "}",
  532.     "   ",
  533.     "input.add-screenshot-captions {",
  534.     "  background-color: var(--primary-background);",
  535.     "  -webkit-rtl-ordering: logical;",
  536.     "  cursor: text;",
  537.     "  border-width: 10px;",
  538.     "  border-style: solid;",
  539.     "  border-color: var(--primary-background);",
  540.     "  border-radius: 7px;",
  541.     "  margin-top: 15px;",
  542.     "}",
  543.     "   ",
  544.     "form.script-in-sets {",
  545.     "  background-color: var(--primary-background);",
  546.     "  padding: 15px;",
  547.     "  border-radius: 10px;",
  548.     "  width: 408px;",
  549.     "}",
  550.     "   ",
  551.     ".install-help-link:hover {",
  552.     "  box-shadow: 15px 0px 18px 3px rgba(0,0,0,0.75) !important;",
  553.     "  z-index: 999;",
  554.     "}",
  555.     "   ",
  556.     ".install-link:hover {",
  557.     "  box-shadow: -15px 0px 18px 3px rgba(0,",
  558.     "    0,",
  559.     "    0,",
  560.     "    0.75) !important;",
  561.     "  z-index: 999;",
  562.     "}",
  563.     "   ",
  564.     "#install-area .install-link:hover,",
  565.     "#install-area .install-link:focus,",
  566.     "#install-area .install-help-link:hover,",
  567.     "#install-area .install-help-link:focus {",
  568.     "  box-shadow: none;",
  569.     "}",
  570.     "   ",
  571.     "   ",
  572.     "#replaced_by_script_id {",
  573.     "  background-color: var(--primary-background);",
  574.     "  -webkit-rtl-ordering: logical;",
  575.     "  cursor: text;",
  576.     "  border-width:10px;",
  577.     "  border-style: solid;",
  578.     "  border-color: var(--primary-background);",
  579.     "  border-radius: 7px;",
  580.     "  margin-top: 15px;",
  581.     "}",
  582.     "    ",
  583.     "input[type=\'submit\'], .Button {",
  584.     "  background: var(--title-or-link-text-primary-colour-hover);",
  585.     "  border: 2px solid var(--title-or-link-text-primary-colour);",
  586.     "  color: var(--senary-text-colour)!important;",
  587.     "  font-weight: 100;",
  588.     "  cursor: pointer;",
  589.     "}",
  590.     "   ",
  591.     "input[type=\'submit\']:hover, .Button:hover {",
  592.     "  background: var(--title-or-link-text-primary-colour);",
  593.     "  border: 2px solid var(--title-or-link-text-primary-colour-hover);",
  594.     "  color: var(--tertiary-text-colour);",
  595.     "}",
  596.     "   ",
  597.     ".pagination>*,",
  598.     ".script-list+.pagination>*,",
  599.     ".user-list+.pagination>* {",
  600.     "  display: inline-block;",
  601.     "  background-color: var(--primary-background);",
  602.     "  padding: 0.5em;",
  603.     "  border-radius: 5px;",
  604.     "  text-decoration: none;",
  605.     "}",
  606.     "   ",
  607.     "tr {",
  608.     "  background: var(--primary-background);",
  609.     "}",
  610.     "   ",
  611.     ".notice {",
  612.     "  background-color: var(--title-or-link-text-secondary-colour);",
  613.     "  border: none;",
  614.     "  border-left: 6px solid var(--title-or-link-text-primary-colour-hover);",
  615.     "  padding: 0.5em;",
  616.     "  color: var(--tertiary-text-colour) !important;",
  617.     "}",
  618.     "   ",
  619.     "form.inline-form.external-login-form {",
  620.     "  background: var(--primary-background);",
  621.     "  border: none;",
  622.     "}",
  623.     "   ",
  624.     "   ",
  625.     "   ",
  626.     "form#new_user {",
  627.     "  background: var(--primary-background);",
  628.     "  border: none;",
  629.     "}",
  630.     "   ",
  631.     "form.new_user input[type=\'submit\'] {",
  632.     "  background-image: linear-gradient(var(--title-or-link-text-primary-colour-hover), var(--title-or-link-text-primary-colour));",
  633.     "  border: none;",
  634.     "}",
  635.     "   ",
  636.     "#home-script-nav {",
  637.     "  max-width: 700px;",
  638.     "  margin: 0 auto;",
  639.     "  padding-bottom: 20px;",
  640.     "  border-bottom: none;",
  641.     "  margin-bottom: 15px;",
  642.     "}",
  643.     "   ",
  644.     ".search-submit {",
  645.     "  display: none;",
  646.     "}",
  647.     "   ",
  648.     ".home-search > input[name=\'q\'] {",
  649.     "  background: var(--primary-background);",
  650.     "  border: 10px solid var(--primary-background);",
  651.     "}",
  652.     "   ",
  653.     "#Panel .FilterMenu, ",
  654.     "#Panel .PanelCategories, ",
  655.     "#Panel .MeBox {",
  656.     "  box-shadow: 0",
  657.     "   0 5px var(--primary-background);",
  658.     "  border: 0px solid var(--primary-background);",
  659.     "  background-color: var(--secondary-background);",
  660.     "}",
  661.     "   ",
  662.     "body:not(.Settings) a:not(.Button):not(.ChangePicture) {",
  663.     "  color: var(--primary-text-colour)",
  664.     "}",
  665.     "   ",
  666.     "#Panel .FilterMenu a:hover, ",
  667.     "#Panel .PanelCategories a:hover, ",
  668.     "#Panel .FilterMenu a:focus, ",
  669.     "#Panel .PanelCategories a:focus {",
  670.     "  background: var(--primary-background);",
  671.     "  text-decoration: none;",
  672.     "  box-shadow: none;",
  673.     "}",
  674.     ".SiteSearch .InputBox{",
  675.     "  background: var(--secondary-background);",
  676.     "  border-width:5px;",
  677.     "  border-style: solid;",
  678.     "  border-color: var(--secondary-background);",
  679.     "  border-radius: 7px;",
  680.     "}",
  681.     "   ",
  682.     ".SiteSearch .Button {",
  683.     "  display: none;",
  684.     "}",
  685.     "   ",
  686.     "#Panel .FilterMenu .Active a, #Panel .PanelCategories .Active a {",
  687.     "  border-left: 20px solid var(--secondary-background);",
  688.     "  margin: .25em 0 .25em -20px;",
  689.     "  background: var(--primary-background);",
  690.     "}",
  691.     "   ",
  692.     "a[href*=\'#latest\'] {",
  693.     "  color:  var(--secondary-text-colour) !important;",
  694.     "}",
  695.     "   ",
  696.     "h1.H.HomepageTitle {",
  697.     "  border-top: 7px solid var(--title-or-link-text-primary-colour);",
  698.     "}",
  699.     "   ",
  700.     ".rating-image {",
  701.     "  height: 16px !important;",
  702.     "  width: 16px !important;",
  703.     "  filter: brightness(65%);",
  704.     "}",
  705.     "   ",
  706.     ".SpDashboard, .SpOptions, .SpCog {",
  707.     "  background-position: 0 -276px;",
  708.     "}",
  709.     "   ",
  710.     ".SpBookmarks, .SpStar {",
  711.     "  background-position: -80px -308px;",
  712.     "}",
  713.     "   ",
  714.     ".SpInbox, .SpEnvelope {",
  715.     "  background-position: 0 -292px;",
  716.     "}",
  717.     "   ",
  718.     ".SpNotifications, .SpGlobe {",
  719.     "  background-position: -32px -276px;",
  720.     "}",
  721.     "   ",
  722.     ".Item.Read {",
  723.     "  background: var(--primary-background);",
  724.     "}",
  725.     "   ",
  726.     ".Item.Read:first-child {",
  727.     "  border-top-left-radius: 10px;",
  728.     "  border-top-right-radius: 10px;",
  729.     "}",
  730.     "   ",
  731.     ".Item.Read:last-child {",
  732.     "  border-bottom-left-radius: 10px;",
  733.     "  border-bottom-right-radius: 10px;",
  734.     "}",
  735.     "   ",
  736.     "#Content .HomepageTitle {",
  737.     "  border-top: 7px solid var(--title-or-link-text-primary-colour);",
  738.     "  color: var(--tertiary-text-colour);",
  739.     "}",
  740.     "   ",
  741.     ".Tag {",
  742.     "  background: var(--quaternary-background);",
  743.     "  color: var(--tertiary-text-colour);",
  744.     "}",
  745.     "   ",
  746.     "#site-nav > nav {",
  747.     "  display: block!important;",
  748.     "  background: none!important;",
  749.     "}",
  750.     "",
  751.     ".Count {",
  752.     "  background-color: var(--primary-background);",
  753.     "}",
  754.     "   ",
  755.     "form.new_user input[type='text'], form.new_user input[type='email'], form.new_user input[type='password'] {",
  756.     "  background-color: var(--quaternary-text-colour)!important;",
  757.     "  border: none!important;",
  758.     "}",
  759.     "   ",
  760.     "textarea#Form_Body {",
  761.     "  background-color: var(--quinary-text-colour);",
  762.     "}"
  763. ].join("\n");
  764. if (typeof GM_addStyle != "undefined") {
  765.     GM_addStyle(css);
  766. } else if (typeof PRO_addStyle != "undefined") {
  767.     PRO_addStyle(css);
  768. } else if (typeof addStyle != "undefined") {
  769.     addStyle(css);
  770. } else {
  771.     var node = document.createElement("style");
  772.     node.type = "text/css";
  773.     $(node).text(maincss);
  774.     var heads = document.getElementsByTagName("head");
  775.     if (heads.length > 0) {
  776.         heads[0].appendChild(node);
  777.     } else {
  778.         // no head yet, stick it whereever
  779.         document.documentElement.appendChild(node);
  780.     }
  781. }
  782. })();
  783.  
  784. /* End of Main Design */
  785.  
  786. /* Default Theme */
  787.  
  788. (function() {var defaultcss = [
  789.     ":root {",
  790.     "  --primary-background: #16151D;",
  791.     "  --secondary-background: #1D1B26;",
  792.     "  --tertiary-background: #0F0F14;",
  793.     "  --quaternary-background: #6B4CA7;",
  794.     "      ",
  795.     "  --primary-text-colour: #888888;",
  796.     "  --secondary-text-colour: #BBBBBB;",
  797.     "  --tertiary-text-colour: #EEEEEE;",
  798.     "  --quaternary-text-colour: #999999;",
  799.     "  --quinary-text-colour: #333333;",
  800.     "  --senary-text-colour: #ffffff;",
  801.     "      ",
  802.     "  --title-or-link-text-primary-colour: #694BA1;",
  803.     "  --title-or-link-text-secondary-colour: #B793F9;",
  804.     "  --title-or-link-text-primary-colour-hover: #493372;",
  805.     "}"
  806. ].join("\n");
  807. if (typeof GM_addStyle != "undefined") {
  808.     GM_addStyle(css);
  809. } else if (typeof PRO_addStyle != "undefined") {
  810.     PRO_addStyle(css);
  811. } else if (typeof addStyle != "undefined") {
  812.     addStyle(css);
  813. } else {
  814.     var node = document.createElement("style");
  815.     node.type = "text/css";
  816.     $(node).attr("class", "theme");
  817.     $(node).text(defaultcss);
  818.     var heads = document.getElementsByTagName("head");
  819.     if (heads.length > 0) {
  820.         $('head').append(node);
  821.     } else {
  822.         $('body').append(node);
  823.     }
  824.     $('.defaultthemebutton').click(function() {
  825.       $('.theme').text(defaultcss);
  826.     });
  827. }
  828. })();
  829.  
  830. /* End of the Default Theme */
  831.  
  832. /* Orange Theme */
  833.  
  834. (function() {var orangecss = [
  835.     ":root {",
  836.     "  --primary-background: #1e1b15;",
  837.     "  --secondary-background: #27231c;",
  838.     "  --tertiary-background: #14130f;",
  839.     "  --quaternary-background: #ffaa00;",
  840.     "      ",
  841.     "  --primary-text-colour: #888888;",
  842.     "  --secondary-text-colour: #BBBBBB;",
  843.     "  --tertiary-text-colour: #EEEEEE;",
  844.     "  --quaternary-text-colour: #999999;",
  845.     "  --quinary-text-colour: #333333;",
  846.     "  --senary-text-colour: #ffffff;",
  847.     "      ",
  848.     "  --title-or-link-text-primary-colour: #ffb318;",
  849.     "  --title-or-link-text-secondary-colour: #ffcc66;",
  850.     "  --title-or-link-text-primary-colour-hover: #c16315;",
  851.     "}"
  852. ].join("\n");
  853. if (typeof GM_addStyle != "undefined") {
  854.     GM_addStyle(css);
  855. } else if (typeof PRO_addStyle != "undefined") {
  856.     PRO_addStyle(css);
  857. } else if (typeof addStyle != "undefined") {
  858.     addStyle(css);
  859. } else {
  860.     $('.orangethemebutton').click(function() {
  861.       $('.theme').text(orangecss);
  862.     });
  863. }
  864. })();
  865.  
  866. /* End of the Orange Theme */
  867.  
  868. /* Brown Theme */
  869.  
  870. (function() {var browncss = [
  871.     ":root {",
  872.     "  --primary-background: #1e1b15;",
  873.     "  --secondary-background: #27231c;",
  874.     "  --tertiary-background: #14130f;",
  875.     "  --quaternary-background: #a8894d;",
  876.     "      ",
  877.     "  --primary-text-colour: #888888;",
  878.     "  --secondary-text-colour: #BBBBBB;",
  879.     "  --tertiary-text-colour: #EEEEEE;",
  880.     "  --quaternary-text-colour: #999999;",
  881.     "  --quinary-text-colour: #333333;",
  882.     "  --senary-text-colour: #ffffff;",
  883.     "      ",
  884.     "  --title-or-link-text-primary-colour: #a0834b;",
  885.     "  --title-or-link-text-secondary-colour: #f9d895;",
  886.     "  --title-or-link-text-primary-colour-hover: #483a20;",
  887.     "}"
  888. ].join("\n");
  889. if (typeof GM_addStyle != "undefined") {
  890.     GM_addStyle(css);
  891. } else if (typeof PRO_addStyle != "undefined") {
  892.     PRO_addStyle(css);
  893. } else if (typeof addStyle != "undefined") {
  894.     addStyle(css);
  895. } else {
  896.     $('.brownthemebutton').click(function() {
  897.       $('.theme').text(browncss);
  898.     });
  899. }
  900. })();
  901.  
  902. /* End of the Brown Theme */
  903.  
  904. /* Blue Theme */
  905.  
  906. (function() {var bluecss = [
  907.     ":root {",
  908.     "  --primary-background: #16151D;",
  909.     "  --secondary-background: #1D1B26;",
  910.     "  --tertiary-background: #0F0F14;",
  911.     "  --quaternary-background: #4c53a7;",
  912.     "      ",
  913.     "  --primary-text-colour: #888888;",
  914.     "  --secondary-text-colour: #BBBBBB;",
  915.     "  --tertiary-text-colour: #EEEEEE;",
  916.     "  --quaternary-text-colour: #999999;",
  917.     "  --quinary-text-colour: #333333;",
  918.     "  --senary-text-colour: #ffffff;",
  919.     "      ",
  920.     "  --title-or-link-text-primary-colour: #4b4da1;",
  921.     "  --title-or-link-text-secondary-colour: #9f93f9;",
  922.     "  --title-or-link-text-primary-colour-hover: #333f72;",
  923.     "}"
  924. ].join("\n");
  925. if (typeof GM_addStyle != "undefined") {
  926.     GM_addStyle(css);
  927. } else if (typeof PRO_addStyle != "undefined") {
  928.     PRO_addStyle(css);
  929. } else if (typeof addStyle != "undefined") {
  930.     addStyle(css);
  931. } else {
  932.     $('.bluethemebutton').click(function() {
  933.       $('.theme').text(bluecss);
  934.     });
  935. }
  936. })();
  937.  
  938. /* End of the Blue Theme */
  939.  
  940. /* Teal Theme */
  941.  
  942. (function() {var tealcss = [
  943.     ":root {",
  944.     "  --primary-background: #16151D;",
  945.     "  --secondary-background: #1D1B26;",
  946.     "  --tertiary-background: #0F0F14;",
  947.     "  --quaternary-background: #4da891;",
  948.     "      ",
  949.     "  --primary-text-colour: #888888;",
  950.     "  --secondary-text-colour: #BBBBBB;",
  951.     "  --tertiary-text-colour: #EEEEEE;",
  952.     "  --quaternary-text-colour: #999999;",
  953.     "  --quinary-text-colour: #333333;",
  954.     "  --senary-text-colour: #ffffff;",
  955.     "      ",
  956.     "  --title-or-link-text-primary-colour: #4ba090;",
  957.     "  --title-or-link-text-secondary-colour: #95f9e3;",
  958.     "  --title-or-link-text-primary-colour-hover: #234d46;",
  959.     "}"
  960. ].join("\n");
  961. if (typeof GM_addStyle != "undefined") {
  962.     GM_addStyle(css);
  963. } else if (typeof PRO_addStyle != "undefined") {
  964.     PRO_addStyle(css);
  965. } else if (typeof addStyle != "undefined") {
  966.     addStyle(css);
  967. } else {
  968.     $('.tealthemebutton').click(function() {
  969.       $('.theme').text(tealcss);
  970.     });
  971. }
  972. })();
  973.  
  974. /* End of the Teal Theme */
  975.  
  976. /* Grey Theme */
  977.  
  978. (function() {var greycss = [
  979.     ":root {",
  980.     "  --primary-background: #16151D;",
  981.     "  --secondary-background: #1D1B26;",
  982.     "  --tertiary-background: #0F0F14;",
  983.     "  --quaternary-background: #a2a2a2;",
  984.     "      ",
  985.     "  --primary-text-colour: #888888;",
  986.     "  --secondary-text-colour: #BBBBBB;",
  987.     "  --tertiary-text-colour: #EEEEEE;",
  988.     "  --quaternary-text-colour: #999999;",
  989.     "  --quinary-text-colour: #333333;",
  990.     "  --senary-text-colour: #ffffff;",
  991.     "      ",
  992.     "  --title-or-link-text-primary-colour: #949494;",
  993.     "  --title-or-link-text-secondary-colour: #f3f3f3;",
  994.     "  --title-or-link-text-primary-colour-hover: #4c4c4c;",
  995.     "}"
  996. ].join("\n");
  997. if (typeof GM_addStyle != "undefined") {
  998.     GM_addStyle(css);
  999. } else if (typeof PRO_addStyle != "undefined") {
  1000.     PRO_addStyle(css);
  1001. } else if (typeof addStyle != "undefined") {
  1002.     addStyle(css);
  1003. } else {
  1004.     $('.greythemebutton').click(function() {
  1005.       $('.theme').text(greycss);
  1006.     });
  1007. }
  1008. })();
  1009.  
  1010. /* End of the Grey Theme */
  1011.  
  1012. /* Cyan Theme */
  1013.  
  1014. (function() {var cyancss = [
  1015.     ":root {",
  1016.     "  --primary-background: #16151D;",
  1017.     "  --secondary-background: #1D1B26;",
  1018.     "  --tertiary-background: #0F0F14;",
  1019.     "  --quaternary-background: #449396;",
  1020.     "      ",
  1021.     "  --primary-text-colour: #888888;",
  1022.     "  --secondary-text-colour: #BBBBBB;",
  1023.     "  --tertiary-text-colour: #EEEEEE;",
  1024.     "  --quaternary-text-colour: #999999;",
  1025.     "  --quinary-text-colour: #333333;",
  1026.     "  --senary-text-colour: #ffffff;",
  1027.     "      ",
  1028.     "  --title-or-link-text-primary-colour: #41b5bb;",
  1029.     "  --title-or-link-text-secondary-colour: #93f0f9;",
  1030.     "  --title-or-link-text-primary-colour-hover: #007b71;",
  1031.     "}"
  1032. ].join("\n");
  1033. if (typeof GM_addStyle != "undefined") {
  1034.     GM_addStyle(css);
  1035. } else if (typeof PRO_addStyle != "undefined") {
  1036.     PRO_addStyle(css);
  1037. } else if (typeof addStyle != "undefined") {
  1038.     addStyle(css);
  1039. } else {
  1040.     $('.cyanthemebutton').click(function() {
  1041.       $('.theme').text(cyancss);
  1042.     });
  1043. }
  1044. })();
  1045.  
  1046. /* End of the Cyan Theme */