Pull header and social buttons to side panel, expand on hover.
codesandbox.io: collapse header for larger editor by myfonj
Details
Authormyfonj
LicenseCC0
Categorycodesandbox
Created
Updated
Size1.2 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
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;
}
}