regex101 - smooth by mutte-79

/* ==UserStyle==
@name           regex101 - smooth
@author         mutte
@version        1.0.0.2
@license        GPL3+
@namespace      regex101.com
@description    A smooth design with added reziser bar. Not made with acessibility in mind. (Small font and low contrast)'
@preprocessor   uso

==/UserStyle== */

@-moz-document domain("regex101.com") {

  :root {

    --test: rgb(225,240,255);
    --base-R: 225; /* Change theese three for custom theme color */
    --base-G: 240; /**/
    --base-B: 255; /**/

    --colorA: rgba(var(--base-R), var(--base-G), var(--base-B), 1);
    --colorB: rgba(var(--base-R), var(--base-G), var(--base-B), 0.8125);
    --colorC: rgba(var(--base-R), var(--base-G), var(--base-B), 0.6875);
    --colorD: rgba(calc(var(--base-R) - 16), calc(var(--base-G) - 16), calc(var(--base-B) - 16), 1);
    --colorE: rgba(calc(var(--base-R) - 16), calc(var(--base-G) - 16), calc(var(--base-B) - 16), 0.8125);
    --colorF: rgba(calc(var(--base-R) - 48), calc(var(--base-G) - 48), calc(var(--base-B) - 48), 1);

    --blackA: rgba(0, 0, 0, 0.125);
    --blackB: rgba(0, 0, 0, 0.375);
    --blackC: rgba(0, 0, 0, 0.5);
    --blackD: rgba(0, 0, 0, 0.6875);
  }

/*╭────────────╮
  │   Header   │
  ╰────────────╯*/
  header { /* ---------------------------------------------- Header       */
    height: 30px !important;
    box-shadow: 0  1px  3px #146f,
                0  2px  4px rgba(68, 170, 134, .733) !important;
  }

  .HPRlT, /* ----------------------------------------------- Header       */
  .i1N2B, /* ----------------------------------------------- Button menu  */ 
  .hIvL6, /* ----------------------------------------------- Menu column  */
  .MPQtP, /* ----------------------------------------------- Left column  */
  .IPjTl { /* ---------------------------------------------- Right column */
    margin: 0 !important;
    padding: 0 !important;
    background: var(--colorD) !important;
  }


/*╭─────────────╮
  │ Left column │
  ╰─────────────╯*/
  .AkJag { /* ---------------------------------------------- Button & selection menu frame */
    margin: 0 !important;
    padding: 0 !important;
  }

  .i1N2B { /* ---------------------------------------------- Button menu box               */
    margin: 0 !important;
    padding-top: 22px !important;
  }

  ._eLp0 { /* ---------------------------------------------- Button menu buttons           */
    color: var(--blackB) !important;
    border: none !important;
    margin: 0 0 8px 8px !important;
    padding: 0 !important;
    background: var(--colorD) !important;
    box-shadow: -0.5px -0.5px  2px var(--colorA),
                  -1px   -1px  2px var(--colorC),
                -1.5px -1.5px  2px var(--colorA),
                 0.5px  0.5px  3px var(--blackC),
                   1px    1px  4px var(--blackA) !important;
    border-radius: 15px !important;
  }

  .hIvL6 { /* ---------------------------------------------- Selection menu frame          */
    padding: 10px 10px 0 10px!important;
    margin-top: 10px !important;
  }

  .WLU1r { /* ---------------------------------------------- Selection menu lables         */
    color: #1157 !important;
    margin: 0 !important;
    padding: 1px 10px !important;
    font-size: 8px !important;
    line-height: 1em !important;
  }

  .wcfss { /* ---------------------------------------------- Selection menu containers     */
    color: var(--blackB) !important;
    border: none !important;
    padding: 2px 0 10px !important;
    box-shadow: -0.5px -0.5px  2px var(--colorA),
                  -1px   -1px  2px var(--colorC),
                -1.5px -1.5px  2px var(--colorA),
                 0.5px  0.5px  3px var(--blackC),
                   1px    1px  4px var(--blackA) !important;
    background: var(--colorD) !important;
    border-radius: 15px !important;
    margin-bottom: 10px !important;
  }

  .wcfss .bjLBV { /* --------------------------------------- Selection menu headlines  */
    color: #1157 !important;
    margin: 5px 10px !important;
    padding: 0 !important;
  }

/*╭─────────────╮
  │ Sponsor box │
  ╰─────────────╯*/
  .XNbml {
    border: none !important;
    margin: 0 10px 15px !important;
    padding: 5px 5px 10px 10px !important;
    box-shadow: 1px  1px  2px var(--colorA) inset,
               -1px -1px  2px var(--blackD) inset,
                1px  1px  2px var(--blackD) !important;
    background: var(--colorE) !important;
    border-radius: 15px !important;
  }

  .M4byA { /* ---------------------------------------------- Sponsor box logo */
    padding: 1px 5px 0 10px !important;
    box-shadow: 1px 2px 2px var(--colorB) inset !important;
    margin-left: 0 !important;
    border-radius: 20px 0 6px 0 !important;
  }

/*╭───────────────╮
  │ Center column │
  ╰───────────────╯*/
  div.AUc0W { /* ------------------------------------------- Center column - frame       */
    margin: 0 !important;
    padding: 0 !important;
  }

  div.of6uh {
    margin: 0 !important;
    padding: 0 14px 15px 10px !important;
  }

  .YZA2N .dYInr { /* --------------------------------------- Regex input heading         */
    padding: 0 !important;
    margin-bottom: 10px !important;
    }

  div.rjodX { /* ------------------------------------------- Regex input - flex          */
    padding-right: 25px !important;
    margin-bottom: 10px !important;
  }

  .XjlwO { /* ---------------------------------------------- Search match counter        */
    margin: 0 !important;
    border: 0 none !important;
    padding: 0 !important;
    background: var(--colorD) !important;
  }

  div.cO83v { /* ------------------------------------------- Regex input container       */
    color: #115f !important;
    margin: 0 0 6px 10px !important;
    font-size: 8px !important;
    box-shadow: 1px  1px  2px var(--colorA) inset,
               -1px -1px  2px var(--blackD) inset,
                1px  1px  2px var(--blackD) !important;
    background: var(--colorD) !important;
    border-style: none !important;
  }

  div.s6TnK { /* ------------------------------------------- Test string input container */
    box-shadow: 1px  1px  2px var(--colorA) inset,
               -1px -1px  2px var(--blackD) inset,
                1px  1px  2px var(--blackD) !important;
    background: var(--colorD)!important;
    border-style: none !important;
  }

  .T886D .CodeMirror,
  .Pk2Mn .CodeMirror { /* ---------------------------------- CodeMirror                  */
    color: #115f !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 8px !important;
    line-height: 1.1em !important;
  }

  .T886D .CodeMirror-lines,
  .Pk2Mn .CodeMirror-lines { /* ---------------------------- CodeMirror - lines          */
    margin: 2px 0 !important;
    padding: 4px 0 !important;
  }

/*╭─────────────╮
  │ ◆ Resizer ◆ │
  ╰─────────────╯*/
  div.RyQaE { /* ------------------------------------------- Resize bar */
    width: 3px !important;
    margin: 20px 0 !important;
    border: 0 none transparent !important;
    padding: 0 !important;
    background: var(--colorD) !important;
    box-shadow: 1px  1px  2px var(--colorA) inset,
               -1px -1px  2px var(--blackD) inset,
                1px  1px  2px var(--blackD) !important;
  }

/*╭──────────────╮
  │ Right column │
  ╰──────────────╯*/
  .gUc_7 { /* ---------------------------------------------- Right column - containers                    */
    margin: 0 10px 10px 10px !important;
    border: none !important;
    background: var(--colorD) !important;
    box-shadow: 1px  1px  2px var(--colorA) inset,
               -1px -1px  2px var(--blackD) inset,
                1px  1px  2px var(--blackD) !important;
    border-radius: 10px !important;
  }

  .AOv9F { /* ---------------------------------------------- Explanation & Match info textareas - empty   */
    color: #1157 !important;
  }

  .AOv9F, /* ----------------------------------------------- Explanation & Match info textareas - empty   */
  .IrE8B, /* ----------------------------------------------- Right column textarea              - content */
  .muBVf { /* ---------------------------------------------- Match info   textarea              - content */
    font-size: 11px !important;
    line-height: 1em !important;
  }

/*╭─────────────────╮
  │ Quick reference │
  ╰─────────────────╯*/
  .QnmOe { /* ---------------------------------------------- Quick reference search - container */
    margin: 2px 2px 12px !important;
    padding: 2px !important;
  }

  .OSM2Q { /* ---------------------------------------------- Quick reference search - box       */
    border: none !important;
    background: var(--colorF) !important;
    box-shadow: -1px -1px  2px var(--blackD),
                 1px  1px  2px var(--blackD) inset,
                 1px  1px  2px var(--colorA) !important;
  }

  .vNcES { /* ---------------------------------------------- Quick reference search - input     */
      margin: 0 4px !important;
      padding: 0 !important;
  }

}