SwitchHosts/v3/app-ui/Panel/ListItem.less

@import "../styles/cfg";

.list-item {
  position: relative;
  //padding: 7px 10px 7px 10px;
  cursor: pointer;
  -webkit-app-region: no-drag;

  // &.sys-hosts {
  //font-size: 14px;
  //padding: 8px 10px 8px 10px;

  // .item-icon {
  // width: 22px;
  // font-size: 12px;
  // margin: 0 3px 0 1px;
  // }
  // }

  .bg() {
    content: '';
    display: block;
    width: 800px;
    height: 30px;
    background: var(--swh-bg-color-selected);
    //opacity: 0.5;
    position: absolute;
    right: -5px;
    z-index: -1;
    margin-top: -4px;
  }

  &.selected {
    //background: @bg_left * 1.1;

    &:before {
      .bg();
    }

    &:hover {
      .icon-edit {
        display: inline-block;
        //color: #fff;
      }
    }
  }

  //&:hover {
  //  .bg();
  //  background: @color_hover;
  //}
}

.item-icon {
  margin-left: -8px;
  margin-right: 4px;
  width: 1.5em;
}

.icon-edit {
  margin-right: 0.5em;
  font-size: 1.5em;
  transform: scale(0.7);
  cursor: pointer;
  vertical-align: baseline !important;
}

.switcher {
  cursor: pointer;
  font-size: 2em;
}

.item-buttons {
  position: absolute;
  right: 4px;
  margin-top: -1px;
}

.title {
  display: inline-block;
  width: @left_width - 110px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.sort-bg {
  //background: @sorg-bg-color;
}

.sys-hosts {
  margin-top: 10px;
  .item-icon {
    margin-left: 21px;
  }
}

.not-match {
  opacity: 0.5;
}

:global(.platform-darwin) {
  .sys-hosts {
    margin-top: 0;
  }
}