visbug-lib/app/components/vis-bug/vis-bug.element.css

<p align="center"> <img src="./assets/visbug.png" width="300" height="300" alt="visbug"> <br> <a href="https://www.npmjs.org/package/visbug"><img src="https://img.shields.io/npm/v/visbug.svg?style=flat" alt="npm latest version number"></a> <a href

@import "../_variables.css";

:host {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--layer-1);
  max-width: min-content;
}

:host > ol {
  all: initial;
  cursor: inherit;
  font-size: 16px;
  font-family: system-ui;
  display: flex;
  flex-direction: column;
  margin: 1em 0 0.5em 1em;
  padding: 0;
  list-style-type: none;
  border-radius: 2em;
  backdrop-filter: blur(0);

  &:first-of-type {
    box-shadow: 0 0.25em 0.5em hsla(0,0%,0%,10%);
    backdrop-filter: blur(5px);
    background-color: var(--theme-bd-2);

    &:active {
      cursor: grabbing !important;
    }

    @media (prefers-color-scheme: dark) {
      box-shadow: 0 0.25em 0.5em hsla(0,0%,0%,50%);
    }
  }
}

:host li {
  height: 2.25em;
  width: 2.25em;
  margin: 0.05em 0.25em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 50%;

  &:first-child { margin-top: 0.25em; }
  &:last-child { margin-bottom: 0.25em; }

  &[data-tool] {
    &:hover {
      cursor: pointer;
      background-color: var(--theme-icon_hover-bg);
    }
    &:active {
      background-color: var(--theme-icon_active-bg);
    }
  }

  &[data-active=true] {
    background-color: var(--theme-bg);

    & > .icon-cursor {
      stroke: var(--theme-color);
    }

    & > svg:not(.icon-cursor) {
      fill: var(--theme-color);
    }
  }

  @media (max-height: 768px) {
    &:matches(:nth-of-type(7),:nth-of-type(8), :nth-of-type(9), :nth-of-type(10), :nth-of-type(11), :nth-of-type(12), :nth-of-type(13)) > aside {
      top: auto;
    }
  }

  & > aside {
    overflow: hidden;
    position: absolute;
    direction: ltr;
    text-align: left;
    left: 3em;
    top: 0;
    z-index: -2;
    pointer-events: none;
    background: var(--theme-bg);
    color: var(--theme-text_color);
    box-shadow: 0 0.1em 4.5em hsla(0,0%,0%,15%);
    border-radius: 1em;

    transition: opacity 0.3s ease, transform 0.2s ease;
    opacity: 0;
    transform: translateX(-1em);
    will-change: transform, opacity;

    & > figure {
      margin: 0;
      display: grid;
    }

    & figcaption {
      padding: 1em;
      display: grid;
      gap: 1em;

      & > :matches(h2,p) {
        margin: 0;
      }

      & > h2 {
        font-size: 1.5em;
        line-height: 1.1;
        display: grid;
        grid-auto-flow: column;
        justify-content: space-between;
        align-items: center;
      }

      & > p {
        font-size: 1em;
        line-height: 1.5;
        color: var(--theme-icon_color);
      }

      & [table] {
        display: grid;
        gap: 0.5em;

        & > div {
          display: grid;
          grid-auto-flow: column;
          grid-template-columns: 1fr auto;
          justify-content: space-between;
        }
      }
    }

    & [hotkey] {
      border-radius: .25em;
      height: 1.5em;
      width: 1.5em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--theme-color);
      color: var(--theme-color);
      font-weight: 300;
      font-size: 0.5em;
      text-transform: uppercase;
      box-shadow: 0 2px 2px hsla(0 0% 0% / .25)
    }
  }

  &:hover:not([data-tool="search"]) > aside,
  &[data-tool="search"] > svg:hover + aside {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.75s;
  }

  & input::-webkit-calendar-picker-indicator {
    background: inherit;
    color: var(--theme-color);
  }
}

:host [colors] {
  margin-top: .5em;
}

:host [colors] > li {
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--theme-bg), 0 0.25em 0.5em hsla(0,0%,0%,25%);
  background: var(--contextual_color);
  margin-bottom: 0.5em;

  &:first-child {
    margin-top: 0;
  }
}

:host [colors] li:hover:after {
  top: 0;
}

:host li > svg {
  width: 50%;
  fill: var(--theme-icon_color);
}

:host li > svg.icon-cursor {
  width: 35%;
  fill: white;
  stroke: var(--theme-icon_color);
  stroke-width: 2px;
}

:host li[data-tool="search"] {
  &:before {
    transform: translateX(-1em);
    opacity: 0;
  }
}

:host li[data-tool="search"] > .search {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  z-index: -1;
  box-shadow: 0 0.25em 0.5em hsla(0,0%,0%,10%);
  border-radius: 2em;
  overflow: hidden;
}

:host li[data-tool="search"] > .search > input {
  direction: ltr;
  border: none;
  font-size: 1em;
  padding: 0.4em 0.4em 0.4em 3em;
  outline: none;
  height: 100%;
  width: 250px;
  box-sizing: border-box;
  caret-color: hotpink;
  background-color: var(--theme-bg);
  color: var(--theme-text_color);
  cursor: initial;

  &::placeholder {
    font-weight: lighter;
    font-size: 0.8em;
    color: var(--theme-icon_color);
  }
}

:host [colors] > li > svg {
  fill: var(--icon_color);
  mix-blend-mode: luminosity;
  filter: brightness(0.5);
}

:host [colors] > li > svg > rect:last-child {
  stroke: hsla(0,0%,0%,20%);
  stroke-width: 0.5px;
}

:host input[type='color'] {
  opacity: 0.01;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  box-sizing: border-box;
  border: white;
  padding: 0;
  cursor: pointer;
}

:host input[type='color']:focus {
  outline: none;
}

:host input[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
}

:host input[type='color']::-webkit-color-swatch {
  border: none;
}

:host input[type='color'][value='']::-webkit-color-swatch {
  background-color: transparent !important;
  background-image: linear-gradient(155deg, #ffffff 0%,#ffffff 46%,#ff0000 46%,#ff0000 54%,#ffffff 55%,#ffffff 100%);
}