Stroke DOMs - CSS Checker (active) by erimus-koo

/* ==UserStyle==
@name           Stroke DOMs - CSS Checker (active)
@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 */
  /* show stroke while body active(click down) */
  body:active {
    /* 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;
    }
  }
}