web-annotation-discovery-webextension/src/content_script

html {
  // Support hidden overflow into the right margin.
  // (would be better to not have to change the page’s style; but not sure how)
  position: relative;
}

html body {
  /* Increase specifity above that of our style reset */
  .annotationOuterContainer {
    --container-width: 300px;
    --toolbar-height: 40px;
    z-index: 999998;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--container-width);
    max-width: 50vw;
    display: flex;
    flex-flow: column;
    pointer-events: none;
    box-sizing: border-box;
    font-family: sans-serif;
  }

  .singleAnnotationOuterContainer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--container-width);
    max-width: 50vw;
    display: flex;
    flex-flow: column;
    pointer-events: none;
    box-sizing: border-box;
  }

  .annotationContainer {
    flex-grow: 1;
    pointer-events: none;
    & > *:not(.singleAnnotationOuterContainer) {
      pointer-events: all;
    }
  }

  .singleAnnotationContainer {
    flex-grow: 1;
    pointer-events: none;
    & .annotation {
      pointer-events: all;
    }
  }

  .annotationWrapper {
    overflow: hidden;
    position: sticky; // TODO Fix sticky position.
    top: --toolbar-height;
    bottom: 0;
  }

  .annotationContainer > :nth-last-child(2) .annotationWrapper {
    top: calc(var(--toolbar-height) + 4px);
  }
  .annotationContainer > :nth-last-child(1) .annotationWrapper {
    top: calc(var(--toolbar-height) + 8px);
  }
  .annotationContainer > :nth-child(1) .annotationWrapper {
    bottom: 8px;
  }
  .annotationContainer > :nth-child(2) .annotationWrapper {
    bottom: 4px;
  }

  .annotation {
    border: #999 1px solid;
    border-radius: 10px;
    box-shadow: 10px 10px 10px #9996;
    margin: 10px 0px;
    padding: 5px 40px 5px 10px;
    background-color: lightyellow;
    transition: transform 200ms, background-color 200ms;
    transform: translateX(calc(var(--container-width) - 40px));

    &.dirty {
      opacity: 0.8;
    }

    .dirtyNotice {
      font-size: smaller;
      font-style: italic;
    }

    .cardBottom {
      padding-left: 10px;
      display: flex;
      justify-content: space-between;
    }

    .creator {
      font-style: italic;
    }
  }

  .annotationContainer.showAll .annotation,
  .annotation.highlightClicked,
  .annotation.highlightHovered,
  .annotation:hover,
  .annotation:focus-within {
    transform: none;
  }

  .annotation button,
  .toolbar button {
    font-size: 1em;
    border: none;
    background: none;
    cursor: pointer;

    &:hover {
      background: yellow;
    }

    .icon {
      width: 0.9em;
    }
  }

  .toolbarContainer {
    z-index: 999999;
    position: sticky;
    top: 0;
    display: flex;
    justify-content: end;

    .toolbar {
      max-width: var(--container-width);
      display: flex;
      flex-flow: column nowrap;
      align-items: flex-end;
      background-color: lightyellow;
      border-bottom-left-radius: 10px;
      border-left: #999 1px solid;
      border-bottom: #999 1px solid;
      box-shadow: 10px 10px 10px #9996;
      overflow: hidden;

      & > * {
        padding: 10px;
      }

      details {
        font-size: smaller;
      }
      summary {
        font-size: larger;
        list-style: none;
        cursor: pointer;
      }
    }
  }

  .hiddenWhenClosed {
    display: none;
  }

  .annotationContainer.showAll .hiddenWhenClosed {
    display: unset;
  }

  mark.highlight {
    background: #ff99;
  }
  mark.highlight.clicked,
  .annotation.highlightClicked,
  .showAll .showAllButton {
    background: #ff9;
  }
  mark.highlight.hovered,
  .annotation.highlightHovered {
    background: yellow;
  }
}