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

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

.selection-border {
  position: absolute;
  --inset: 0px;
  top: var(--inset);
  right: var(--inset);
  bottom: var(--inset);
  left: var(--inset);
  pointer-events: none;
  outline-style: solid;
  outline-width: calc(1px / var(--zoom));
  outline-color: var(--np-accent-50);
}
.selection-border--inner {
  outline-color: var(--np-accent-700);
  outline-style: dashed;
}

.popover__border {
  pointer-events: none !important;
}

.popover__label {
  pointer-events: none !important;
  outline: none !important;
  left: 0;
  z-index: 10001;
}

.popover__label-box {
  color: white;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  top: calc(18px / var(--zoom));
  font-size: calc(0.875rem / var(--zoom));
  font-weight: 500;
  letter-spacing: -0.0025em;
  text-align: center;
  box-shadow:
    0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1);
  border: calc(1px / var(--zoom)) solid #fff3;
  border-radius: 9999rem;
  display: flex;
  gap: 0.5rem;
  padding: 0 calc(0.75rem / var(--zoom));
  background-color: var(--np-accent-600);
}

.popover__label-box span {
  font-size: calc(0.85rem / var(--zoom));
}