nitropage/src/features/editor/components/viewport/handles.module.css

A free and open source, extensible visual page builder based on SolidStart.

.handle {
  position: absolute;
  z-index: 9999;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  color: white;
  font-size: 3rem;
  line-height: 1;
  user-select: none;
  opacity: 0;
}

.handle--hover {
  opacity: 1;
  background-image: var(--bg);
}

.handle:global(.selectable):active {
  background-color: #fff5;
}

.outline {
  background-color: var(--np-accent-50);
  --size: calc(1px / var(--zoom));
  --translate: 2px;
  --translate-: calc(var(--translate) * -1);
  position: absolute;
  z-index: 8888;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-style: dashed;
  border-color: var(--np-accent-700);
}

.outline--top {
  bottom: unset;
  height: var(--size);
  border-top-width: var(--size);
  transform: translateY(var(--translate-));
}

.outline--bottom {
  top: unset;
  height: var(--size);
  border-bottom-width: var(--size);
  transform: translateY(var(--translate));
}

.outline--left {
  width: var(--size);
  right: unset;
  border-left-width: var(--size);
  transform: translateX(var(--translate-));
}

.outline--right {
  width: var(--size);
  left: unset;
  border-right-width: var(--size);
  transform: translateX(var(--translate));
}