Skip to content

Instantly share code, notes, and snippets.

Last active September 21, 2018 00:34
What would you like to do?
Paste this into your console for an easy-to-edit, live-updating CSS overlay. Demo:
// CSS Overlay
var overlay_styles = document.createElement('style')
var virtual_stylesheet = document.createElement('style')
var textarea = document.createElement('textarea');
overlay_styles.textContent = `
[data-css=overlay] {
box-sizing: border-box;
margin: 0;
padding: 1em;
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
right: 0;
font-size: 18pt;
font-family: 'Fira Code', monospace;
color: black !important;
background: white !important;
opacity: .3;
z-index: 99999;
transition: height .2s ease-in-out, opacity .2s ease-in-out;
[data-css=overlay]:hover {
opacity: .8;
height: 80%;
textarea.dataset.css = 'overlay'
if (localStorage.css_overlay) textarea.value = localStorage.css_overlay
e => localStorage.css_overlay = virtual_stylesheet.textContent = textarea.value
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment