Handles

by Nicholas Berlette

HTML

<div class="box">
  <visbug-handles></visbug-handles>
</div>

CSS

.box {
  background: #ff9044;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* border: 4px dashed #d00; */
  box-sizing: border-box;
  box-shadow: 
    inset 0 0 0 40px #0001, 
    inset 0 0 0 32px #0001, 
    inset 0 0 0 24px #0002, 
    inset 0 0 0 16px #0002, 
    inset 0 0 0 08px #0003,
    +20px 32px 48px -16px #0009,
    -20px 32px 48px -16px #0009,
    0px 10px 10px -5px #0003
    ;
  mix-blend-mode: overlay;
  border-radius: 8px;
}

JavaScript

import $ from 'https://unpkg.com/blingblingjs?module'

function createCSS(styles, stylesheet = new CSSStyleSheet()) {
  stylesheet.replaceSync(styles);
  return stylesheet;
}

const variables_css = `
:host {
  --theme-bg: hsl(0 0% 100%);
  --theme-bd: hsl(0 0% 100% / var(--theme-bd-opacity));
  --theme-bd-2: hsl(0 0% 100% / var(--theme-bd-2-opacity));
  --theme-bd-opacity: 1;
  --theme-bd-2-opacity: 1;
  --theme-color: hotpink;
  --theme-blue: hsl(188 90% 45%);
  --theme-purple: hsl(267 100% 58%);

  --theme-text_color: hsl(0 0% 10%);
  --theme-icon_color: hsl(0 0% 20%);
  --theme-icon_hover-bg: hsl(0 0% 95%);
  --theme-icon_active-bg: hsl(0 0% 90%);

  --layer-top: 2147483647;
  --layer-1: 2147483646;
  --layer-2: 2147483645;
  --layer-3: 2147483644;
  --layer-4: 2147483643;
  --layer-5: 2147483642;

  --text-shadow: 0 1px hsl(0 0% 0% / 40%);

  @media (-webkit-min-device-pixel-ratio: 2) {
    --text-shadow: 0 .5px hsl(0 0% 0% / 50%);
  }

  @media (prefers-color-scheme: dark) {
    --theme-bg: hsl(0 0% 10%);
    --theme-bd: hsl(0 0% 10% / var(--theme-bd-opacity));
    --theme-bd-2: hsl(0 0% 10% / var(--theme-bd-2-opacity));
    --theme-color: hsl(330deg 65% 75%);
    --theme-text_color: hsl(0 0% 90%);
    --theme-icon_color: hsl(0 0% 80%);
    --theme-icon_hover-bg: hsl(0 0% 15%);
    --theme-icon_active-bg: hsl(0 0% 20%);
  }

  @supports (backdrop-filter: blur(5px)) {
    --theme-bd-opacity: .8;
    --theme-bd-2-opacity: .9;
  }

  @supports (-webkit-backdrop-filter: blur(5px)) {
    --theme-bd-opacity: .8;
    --theme-bd-2-opacity: .9;
  }
}
`;

const variables_dark_css = `
:host {
  --theme-bg: hsl(0 0% 10%);
  --theme-bd: hsl(0 0% 10% / var(--theme-bd-opacity));
  --theme-bd-2: hsl(0 0% 10% / var(--theme-bd-2-opacity));
  --theme-color: hsl(330deg 65% 75%);
  --theme-text_color: hsl(0 0% 90%);
  --theme-icon_color: hsl(0 0% 80%);
  --theme-icon_hover-bg: hsl(0 0% 15%);
  --theme-icon_active-bg: hsl(0 0% 20%);
}
`;

const variables_light_css = `
:host {
 ...