violentmonkey/src/common/ui/style/style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font: 14px menu;
}

body {
  font-size: 1rem;
}

body,
// Form elements will not inherit
button,
select,
input,
textarea {
  font-family: "PingFang SC", STHeiti, "Microsoft YaHei", sans-serif;
}

h1 {
  font-size: 1.5rem;
}
h1, h2 {
  margin-top: .5em;
  margin-bottom: .5em;
}
a {
  color: dodgerblue;
}
hr {
  border: none;
  border-top: 1px solid darkgray;
}
input[disabled] ~ * {
  color: gray;
}
input[type=text] {
  display: block;
  width: 100%;
}
textarea {
  display: block;
  width: 100%;
}
code {
  background: #F7E999;
}

:focus {
  outline: none;
}

.icon {
  width: 1rem;
  height: 1rem;
}

// Firefox does not support `svg path` selector
svg {
  fill: currentColor;
}

.btn-ghost,
.sep,
button {
  display: inline-block;
  padding: 0 .5rem;
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
  vertical-align: bottom;
}
.btn-ghost {
  color: inherit;
  border: 1px solid transparent;
  &:hover {
    border-color: #bbb;
    background: white;
  }
  > .icon {
    display: block;
    height: 2rem;
  }
}

.sep {
  &::after {
    content: '';
    border-right: 1px solid #bbb;
  }
}

.pull-right {
  float: right;
}
.inline-block {
  display: inline-block;
}
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-auto {
  flex: auto;
  .flex-col > & {
    height: 0;
  }
}
.pos-rel {
  position: relative;
}
.mr-1 {
  margin-right: .5em;
}
.mt-1 {
  margin-top: .5em;
}
.mb-1 {
  margin-bottom: .5em;
}
.mb-2 {
  margin-bottom: 1em;
}
.px-2 {
  margin-left: 1em;
  margin-right: 1em;
}
.h-100 {
  height: 100%;
}
.w-1 {
  width: 4em;
}
.fixed-full {
  position: fixed;
}
.abs-full {
  position: absolute;
}
.fixed-full,
.abs-full {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.frame {
  background: #f0f0f0;
  &-block {
    padding: .5rem;
  }
}

.editor-code,
.editor-code .CodeMirror {
  height: 100%;
  /* Use `Courier New` to ensure ` ` has the same width as an original space. */
  font-family: Courier New, Courier, monospace;
}

.CodeMirror-foldmarker {
  color: blue;
  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
  font-family: arial;
  line-height: .3;
  cursor: pointer;
}
.CodeMirror-foldgutter {
  width: .7em;
}
.CodeMirror-foldgutter-open,
.CodeMirror-foldgutter-folded {
  color: #555;
  cursor: pointer;
}
.CodeMirror-foldgutter-open:after {
  content: "\25BE";
}
.CodeMirror-foldgutter-folded:after {
  content: "\25B8";
}

.vl-dropdown-menu {
  padding: .5rem;
  border: 1px solid #bbb;
  background: white;
}