visbug-lib/app/components/metatip/metatip.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: absolute;
  z-index: var(--layer-top);

  --arrow-width: 15px;
  --arrow-height: 8px;

  --shadow-up: 5px;
  --shadow-down: -5px;
  --shadow-direction: var(--shadow-up);

  --arrow-up: polygon(0 0, 100% 0, 50% 100%);
  --arrow-down: polygon(50% 0, 0 100%, 100% 100%);
  --arrow: var(--arrow-up);
}

:host figure {
  all: initial;
  direction: ltr;
  font-size: 16px;
  font-family: system-ui;
  max-width: 50vw;
  background: var(--theme-bd);
  backdrop-filter: blur(5px);
  color: var(--theme-text_color);
  line-height: initial;
  padding: 0.5em;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  border-radius: 0.25em;
  line-height: initial;
  filter: drop-shadow(0 var(--shadow-direction) 0.5em hsla(0,0%,0%,35%));

  border: 1px solid var(--theme-bg);
  &:after {
    content: "";
    background: var(--theme-bg);
    width: var(--arrow-width);
    height: var(--arrow-height);
    clip-path: var(--arrow);
    position: absolute;
    top: var(--arrow-top);
    left: var(--arrow-left);
  }

  & a {
    text-decoration: none;
    color: inherit;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;

    &:hover {
      color: var(--theme-color);
      text-decoration: underline;
    }

    &:empty {
      display: none;
    }

    &[node]:before {
      content: "\003c";
    }

    &[node]:after {
      content: "\003e";
    }
  }
}

:host h5 {
  display: flex;
  font-size: 1em;
  font-weight: bolder;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
}

:host h6 {
  margin-top: 1em;
  margin-bottom: 0;
  font-weight: normal;
}

:host small {
  font-size: 0.7em;
  color: var(--theme-icon_color);

  & > span {
    color: hsl(0,0%,20%);
  }
}

:host a:not(:hover) {
  text-decoration: none;
}

:host [brand],
:host [divider] {
  color: var(--theme-color);
}

:host div {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 0.25em 0.5em;
  margin: 0.5em 0 0;
  padding: 0;
  list-style-type: none;
  color: var(--theme-icon_color);
  font-size: 0.8em;
  font-family: 'Dank Mono', 'Operator Mono', 'Inconsolata', 'Fira Mono', 'SF Mono', 'Monaco', 'Droid Sans Mono', 'Source Code Pro', monospace;
}

:host [value],
:host [local-change] {
  color: var(--theme-text_color);
  display: inline-grid;
  grid-auto-flow: column;
  gap: .5em;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  /* white-space: pre; */
}

:host [text] {
  white-space: normal;
}

:host [longform] {
  background: var(--theme-icon_hover-bg);
  padding: 0.5em 0.75em;
  border-radius: 0.25em;
  font-family: sans-serif;
  text-align: left;
  line-height: 1.5;
}

:host [color] {
  position: relative;
  top: 1px;
  display: inline-block;
  width: 1em;
  min-width: 1em;
  height: 1em;
  border-radius: 50%;
}

:host [local-modifications] {
  margin-top: 1rem;
  color: var(--theme-color);
  font-weight: bold;

  & + div {
    margin-bottom: 1em;
  }
}

:host [contrast] > span {
  padding: 0 0.5em 0.1em;
  border-radius: 1em;
  box-shadow: 0 0 0 1px var(--theme-icon_active-bg);
}