☰

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. })();