violentmonkey/src/popup/style.css

$fontSize: 12px;
$padding: 8px;
$itemPaddingX: 14px;

$scriptIconSize: 18px;
$scriptIconMLR: 2px;

$iconSize: 14px;
$iconML: calc($scriptIconSize + 2 * $scriptIconMLR);
$iconMR: 10px;

$leftPaneWidth: calc($iconML + $iconSize + $iconMR);

$logoSize: 32px;
$logoMLR: calc(($leftPaneWidth - $logoSize) / 2);

$topIconSize: 20px;

$findIconSize: 16px;
$findIconML: calc($leftPaneWidth - $findIconSize - $iconMR);

body {
  width: 320px;
  max-width: 100%;
  /* Latest Chrome renders an extra blank for a nonexistent scrollbar */
  overflow: hidden;
  background: var(--fill-0-5);
  @media (min-width: 360px) {
    width: 100%;
  }
}

.page-popup {
  /* hardcoded popup height in Chrome */
  max-height: 600px;
  overflow: hidden;
  .incognito {
    padding: $padding $padding 0 $leftPaneWidth;
  }
}

footer {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: $fontSize;
  color: var(--fill-6);
  > span {
    cursor: pointer;
    &:hover {
      color: var(--fill-9);
    }
  }
}

.logo {
  text-align: center;
  margin: 0 $logoMLR;
  img {
    width: $logoSize;
  }
  &.disabled > img {
    opacity: .5;
  }
}

.menu-area {
  cursor: pointer;
  &:hover {
    background: cornflowerblue;
    color: var(--bg);
  }
  .disabled > & {
    color: var(--fill-8);
    &:hover {
      color: var(--fill-4);
    }
  }
}

.ext-name {
  &.disabled {
    color: var(--fill-8);
  }
}

.script-icon {
  &:not([src]) {
    display: none;
  }
  max-width: $scriptIconSize;
  max-height: $scriptIconSize;
  margin-left: $scriptIconMLR;
  position: absolute;
  & + .icon {
    margin-left: $iconML;
    margin-right: $iconMR;
  }
}

.menu-buttons {
  align-items: center;
  padding: $padding $padding $padding 0;
  background: var(--bg);
  > .menu-area {
    padding: $padding;
  }
  .icon {
    display: block;
    width: $topIconSize;
    height: $topIconSize;
  }
}

.menu {
  background: var(--bg);
  border-top: 1px solid var(--fill-4);
  &-item {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 2rem;
    padding-left: $itemPaddingX;
    padding-right: $itemPaddingX;
    text-align: left;
    white-space: nowrap;
    .submenu & {
      text-align: left;
    }
    .icon {
      flex: 0 0 $iconSize;
    }
    > .icon:first-child {
      margin-right: $iconMR;
    }
    > .flex-auto {
      &:last-child {
        padding-right: $itemPaddingX;
      }
    }
    > .flex-1 {
      padding-right: 2rem;
    }
  }
  &-find {
    padding-left: 0;
    /* using the same selector as above to override it */
    > .icon:first-child {
      flex-basis: $findIconSize;
      width: $findIconSize;
      height: $findIconSize;
      margin: 0 $iconMR 0 $findIconML;
    }
  }
  &-group {
    padding-left: $leftPaneWidth;
    & [data-totals]::after {
      content: ": " attr(data-totals);
    }
  }
  &.expand {
    background: var(--fill-0-5);
    > .submenu {
      display: block;
    }
    .icon-collapse {
      transform: rotateZ(90deg);
    }
  }
}

.submenu {
  display: none;
  min-height: 4rem;
  max-height: 30rem;
  overflow-y: auto;
  background: var(--bg);
  border-top: 1px dashed var(--fill-2);
  > * {
    position: relative;
    &:not(:hover) > .submenu-buttons {
      visibility: hidden;
    }
    .menu-item {
      padding-left: 0;
    }
  }
  &-buttons {
    display: flex;
    position: absolute;
    top: .3rem;
    right: $itemPaddingX;
  }
  &-button {
    padding: .2rem;
    background: var(--bg);
    cursor: pointer;
    &:hover {
      color: var(--bg);
      background: cornflowerblue;
    }
    .icon {
      display: block;
    }
  }
  &-commands {
    font-size: .8rem;
    color: var(--fill-12);
    > .menu-item {
      padding-left: $leftPaneWidth;
      > .icon {
        margin-right: .5rem;
      }
    }
  }
}

.message {
  position: absolute;
  max-width: 100%;
  left: 0;
  bottom: 0;
  padding: 4px $padding;
  word-wrap: break-word;
  font-size: $fontSize;
  line-height: 1;
  background: var(--fill-0-5);
  border: 1px solid var(--fill-2);
  > div {
    max-height: 2em;
    overflow: hidden;
  }
}

.failure-reason {
  padding: .75rem $itemPaddingX .75rem $leftPaneWidth;
  code {
    max-width: 100%;
  }
}