codesandbox.io: collapse header for larger editor

Pull header and social buttons to side panel

  1. /* ==UserStyle==
  2. @name codesandbox.io: collapse header for larger editor
  3. @namespace myfonj
  4. @version 1.0.0
  5. @description Pull header and social buttons to side panel
  6. @author myf
  7. @license CC0
  8. ==/UserStyle== */
  9.  
  10. /*
  11. https://greasyfork.org/en/scripts/441676/versions/new
  12. */
  13.  
  14. @-moz-document domain("codesandbox.io") {
  15. /* categorisation */
  16. }
  17. @-moz-document url-prefix("https://codesandbox.io/s/") {
  18. header:not(:hover):not(:focus-within) {
  19. width: 55px;
  20. overflow: hidden;
  21. }
  22. header:not(:hover):not(:focus-within) a[href="/dashboard"] {
  23. opacity: 0;
  24. }
  25. header {
  26. z-index: 100;
  27. position: fixed;
  28. right: auto;
  29. left: 0;
  30. }
  31. /* reclaim header space */
  32. nav[aria-label="Sandbox Navigation"] + div {
  33. top: 0 !important;
  34. }
  35. /* sweep social buttons to panel */
  36. nav[aria-label="Sandbox Navigation"] + div > .SplitPane > .Pane1 > [class*="elements__Container"] > :last-child {
  37. position: fixed;
  38. bottom: .33em; left: .33em;
  39. display: flex;
  40. flex-direction: column;
  41. }
  42. nav[aria-label="Sandbox Navigation"] + div > .SplitPane > .Pane1 > [class*="elements__Container"] > :last-child > div {
  43. display: contents;
  44. }
  45. }