css-overlay.js

// ==UserScript==
// @name         CSS Overlay 2 | Ace Edition
// @namespace    overlay
// @version      1.0
// @description  For writing CSS stylesheets
// @author       Tommy Hodgins
// @match      *://*/*
// ==/UserScript==

if (document.querySelector('link[href^="https://fonts.googleapis.com/css?family="][href*="IBM+Plex+Mono"]') === null) {
  document.head.insertAdjacentHTML('beforeEnd', `
    <link rel=stylesheet href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,400i|IBM+Plex+Sans:400,400i,700,700i&display=swap">
  `)
}

const textarea = document.createElement('textarea')
const virtual_stylesheet = document.createElement('style')

textarea.id = 'css_overlay'
textarea.style.display = 'none'

document.head.append(virtual_stylesheet)
document.body.append(textarea)

const scripts = [
  'https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.3/ace.js',
  'https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.3/ext-beautify.js'
]

function loadScripts(list) {
  let script = document.head.appendChild(document.createElement('script'))

  script.src = list[0]
  console.log('loading', list[0])
  script.onload = event => {
    if (list[1]) {
      loadScripts(list.slice(1))
    } else {
      init()
    }
  }
}

loadScripts(scripts)

function init() {
  // Demo setup below
  let input = ace.edit('css_overlay')
  let beautify = ace.require('ace/ext/beautify')

  input.setOptions({
    theme: 'ace/theme/cobalt',
    mode: 'ace/mode/css',
    fontSize: 18,
    tabSize: 2,
    wrap: true,
    highlightActiveLine: true,
    highlightSelectedWord: true,
    displayIndentGuides: true,
    showPrintMargin: false,
    showInvisibles: true,
    useSoftTabs: true,
    useWorker: false,
  })
  input.container.style.lineHeight = 1.4
  input.renderer.setScrollMargin(10, 10)
  input.container.id = 'ace_overlay'

  if (localStorage.css_overlay) {
    input.getSession().setValue(localStorage.css_overlay)
  }

  ['keyup', 'blur', 'paste'].forEach(evt =>
    input.textInput.getElement().addEventListener(evt, render)
  )

  window.addEventListener('load', render)

  function render() {
    localStorage.css_overlay = virtual_stylesheet.textContent = input.getSession().getValue()
  }

  // Checkbox
  const check = document.createElement('input')

  check.type = 'checkbox'
  check.accessKey = 'a'
  check.addEventListener('change', event => input.container.classList.toggle('open'))
  check.style.cssText = `
    position: absolute;
    top: .25em;
    right: .25em;
    z-index: 10;
    width: auto;
    height: auto;
    transform: scale(2);
    transform-origin: top right;
    opacity: .5;
  `
  input.container.insertAdjacentElement('afterBegin', check)
}

document.documentElement.appendChild(document.createElement('style')).textContent = `
  #ace_overlay {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 50vh;
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    opacity: .5;
    z-index: 99999;
    transform: translateY(calc(100% - 4px));
    box-shadow: rgba(0, 0, 0, .5) 0 0 10vh;
    transition:
      opacity .2s ease-in-out,
      transform .2s ease-in-out
    ;
  }
  #ace_overlay.open,
  #ace_overlay:hover {
    opacity: .95;
    transform: translateY(0);
  }
  .ace_editor [class*="col"] {
    float: none !important;
  }
  .ace_editor {
    font-family: IBM Plex Mono, Fira Code, Hack, monospace;
  }
  :root {
    padding-bottom: 70vh;
  }
`