violentmonkey/src/popup/style.css

body {
  min-width: 20rem;
}

.logo {
  margin-top: 1rem;
  text-align: center;
  img {
    width: 4em;
  }
  &.disabled > img {
    opacity: .5;
  }
}
.menu {
  border-top: 1px solid silver;
  &-item {
    position: relative;
    display: flex;
    align-items: center;
    height: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    .submenu & {
      text-align: left;
    }
    &.disabled {
      color: gray;
      &:hover {
        color: silver;
      }
    }
    &:hover {
      background: cornflowerblue;
      color: white;
    }
    .icon {
      flex: 0 0 1rem;
    }
    > .icon:first-child {
      margin-right: 1rem;
    }
    > .flex-auto {
      &:first-child {
        padding-left: 1rem;
      }
      &:last-child {
        padding-right: 1rem;
      }
    }
    > .flex-1 {
      padding-right: 2rem;
    }
  }
  &.expand {
    background: #fbfbfb;
    > .submenu {
      display: block;
    }
    .icon-collapse {
      transform: rotateZ(90deg);
    }
  }
}
.submenu {
  display: none;
  min-height: 4rem;
  max-height: 16rem;
  margin-left: 2rem;
  overflow-y: auto;
  background: white;
  border-top: 1px dashed #ddd;
  > * {
    position: relative;
    &:not(:hover) > .submenu-buttons {
      visibility: hidden;
    }
  }
  &-buttons {
    display: flex;
    position: absolute;
    top: .3rem;
    right: 1rem;
  }
  &-button {
    padding: .2rem;
    background: white;
    cursor: pointer;
    &:hover {
      color: white;
      background: cornflowerblue;
    }
    .icon {
      display: block;
    }
  }
}