Reddit Animated Sidebar

Best side bar cover up.

  1. // ==UserScript==
  2. // @name Reddit Animated Sidebar
  3. // @namespace http://userstyles.org
  4. // @description Best side bar cover up.
  5. // @author anonnow
  6. // @homepage https://userstyles.org/styles/109720
  7. // @include http://reddit.com/*
  8. // @include https://reddit.com/*
  9. // @include http://*.reddit.com/*
  10. // @include https://*.reddit.com/*
  11. // @run-at document-start
  12. // @version 0.20150125230053
  13. // ==/UserScript==
  14. (function() {var css = [
  15. "@namespace url(http://www.w3.org/1999/xhtml);",
  16. "html {",
  17. " overflow-x: hidden;",
  18. "}",
  19. "",
  20. ".side {",
  21. " margin-left: 0px;",
  22. " margin-right: -280px;",
  23. " opacity: 0.6;",
  24. " transition: opacity 0.5s, margin 0.5s;",
  25. " -webkit-transition: opacity 0.5s, margin 0.5s;",
  26. " -moz-transition: opacity 0.5s, margin 0.5s;",
  27. " -o-transition: opacity 0.5s, margin 0.5s;",
  28. " transition-delay: 1s;",
  29. " -webkit-transition-delay: 1s;",
  30. " -moz-transition-delay: 1s;",
  31. " -o-transition-delay: 1s;",
  32. " transition-timing-function: ease-in-out;",
  33. " -webkit-transition-timing-function: ease-in-out;",
  34. " -moz-transition-timing-function: ease-in-out;",
  35. " -o-transition-timing-function: ease-in-out;",
  36. "}",
  37. "",
  38. "body>.content, body {",
  39. " /* This MUST apply to prevent showing stuff through the side bar */",
  40. " z-index: -1 ;",
  41. " position: relative ;",
  42. "}",
  43. "",
  44. ".side:hover, .side:focus {",
  45. " transition: opacity 0.2s, margin 0.2s;",
  46. " -webkit-transition: opacity 0.2s, margin 0.2s;",
  47. " -moz-transition: opacity 0.2s, margin 0.2s;",
  48. " -o-transition: opacity 0.2s, margin 0.2s;",
  49. " /* Apply a negative margin to the left to prevent the content from",
  50. " being shuffled around by the side bar */",
  51. " margin-left: -280px;",
  52. " margin-right: 0px;",
  53. " opacity: 1;",
  54. " transition-delay: 0s;",
  55. " -webkit-transition-delay: 0s;",
  56. " -moz-transition-delay: 0s;",
  57. " -o-transition-delay: 0s;",
  58. "}",
  59. "",
  60. ".content {",
  61. " margin-right: 40px ;",
  62. "}"
  63. ].join("\n");
  64. if (typeof GM_addStyle != "undefined") {
  65. GM_addStyle(css);
  66. } else if (typeof PRO_addStyle != "undefined") {
  67. PRO_addStyle(css);
  68. } else if (typeof addStyle != "undefined") {
  69. addStyle(css);
  70. } else {
  71. var node = document.createElement("style");
  72. node.type = "text/css";
  73. node.appendChild(document.createTextNode(css));
  74. var heads = document.getElementsByTagName("head");
  75. if (heads.length > 0) {
  76. heads[0].appendChild(node);
  77. } else {
  78. // no head yet, stick it whereever
  79. document.documentElement.appendChild(node);
  80. }
  81. }
  82. })();