☰

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. }