Skip to content

codesandbox.io: collapse header for larger editor by myfonj

Screenshot of codesandbox.io: collapse header for larger editor

Details

Authormyfonj

LicenseCC0

Categorycodesandbox

Created

Updated

Size1.2 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Pull header and social buttons to side panel, expand on hover.

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name           codesandbox.io: collapse header for larger editor
@namespace      myfonj
@version        1.0.0
@description    Pull header and social buttons to side panel, expand on hover
@author         myf
@license        CC0
==/UserStyle== */

/*
https://greasyfork.org/en/scripts/441676/versions/new
*/

@-moz-document domain("codesandbox.io") {
 /* categorisation */
}
@-moz-document url-prefix("https://codesandbox.io/s/") {
 header:not(:hover):not(:focus-within) {
   width: 55px;
   overflow: hidden;
 }
 header:not(:hover):not(:focus-within) a[href="/dashboard"] {
  opacity: 0;
 }
 header {
  z-index: 100;
  position: fixed;
  right: auto;
  left: 0;
 }
 /* reclaim header space */
 nav[aria-label="Sandbox Navigation"] + div {
  top: 0 !important;
 }
 /* sweep social buttons to panel */
 nav[aria-label="Sandbox Navigation"] + div > .SplitPane > .Pane1 > [class*="elements__Container"] > :last-child {
  position: fixed;
  bottom: .33em; left: .33em;
  display: flex;
  flex-direction: column;
 }
 nav[aria-label="Sandbox Navigation"] + div > .SplitPane > .Pane1 > [class*="elements__Container"] > :last-child  > div {
  display: contents;
 }
}

Reviews

No reviews yet.