Stroke DOMs - 👀 CSS Checker (always) by erimus-koo

/* ==UserStyle==
@name           Stroke DOMs - 👀 CSS Checker (always)
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Check all front-end DOMs on the web for layout.
@author         Erimus
@preprocessor   less
==/UserStyle== */
@-moz-document regexp(".*") {
  /* Stroke DOMs */
  /* html / body */
  html {
    box-shadow: 0 0 0 1px #00f inset!important;
  }

  body {
    box-shadow: 0 0 0 1px #f00 inset!important;
  }

  /* blocks */
  div, article, section, nav, header, pre, form, summary {
    outline: 1px solid #06f6!important;
  }

  /* the deepest div */
  div:not(:has(div)) {
    outline: 1px solid #60f9!important;
  }

  /* paragraphs */
  p, ul, ol, li {
    outline: 1px dashed #f0f9!important;
  }

  /* headers */
  h1, h2, h3, h4, h5, h6 {
    outline: 1px dashed #f0f9!important;
  }

  /* inline */
  span, i, em, strong, b, code, kbd, cite, ruby {
    outline: 1px dotted #f339!important;
  }

  a {
    outline: 1px solid #f339 !important;
  }

  /* reactive objects */
  button, input {
    outline: 1px solid #0909 !important;
  }

  /* media */
  img, video, audio, svg {
    outline: 2px solid #f609!important;
  }

  /* others / spacial elements */
  wbr {
    outline: 1px solid #f33!important;
  }

  /* Pseudo-class */
  *::before, *::after {
    outline: 1px dotted #0669!important;
  }
}