Mailspring/app/static/components/scroll-region.less

@import 'ui-variables';

@tooltip-border-color: rgba(54, 56, 57, 0.9);
@tooltip-background: -webkit-gradient(linear, left top, left bottom, from(rgba(99, 102, 103, 0.9)), to(rgba(82, 85, 86, 0.9)));

.scroll-tooltip {
  background: @tooltip-background;
  color: white;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25);
  padding: @padding-base-vertical @padding-base-horizontal @padding-base-vertical
    @padding-base-horizontal;
  border: 1px solid @tooltip-border-color;
  border-radius: @border-radius-base;
  transform: translate(-15px, 0);
  position: relative;
  white-space: nowrap;
  pointer-events: none;
}
.scroll-tooltip:after,
.scroll-tooltip:before {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.scroll-tooltip:after {
  border-color: transparent;
  border-left-color: lighten(rgba(99, 102, 103, 1), 3%);
  border-width: 8px;
  margin-top: -8px;
}
.scroll-tooltip:before {
  border-color: transparent;
  border-left-color: darken(@tooltip-border-color, 20%);
  border-width: 9px;
  margin-top: -9px;
}

.scroll-region {
  ::-webkit-scrollbar {
    display: none;
  }

  position: relative;

  .scroll-region-content {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    touch-action: pan-y;
    z-index: 1; // Important so that content does not repaint with container
  }

  .scroll-region-content-inner {
    transform: translate3d(0, 0, 0);
  }
}

.scroll-region.scrolling {
  .scroll-region-content-inner {
    pointer-events: none;
  }
}

.scrollbar-track {
  position: relative;
  opacity: 0;
  transition: opacity 0.3s;
  transition-delay: 0.5s;
  padding: 3px;
  width: 17px;
  background: @list-bg;
  border-left: 1px solid @border-color-divider;

  &:hover {
    opacity: 1;
    transition-delay: 0s;
  }

  &.scrolling {
    opacity: 1;
    transition-delay: 0s;
  }

  &.with-ticks {
    opacity: 1;
    transition-delay: 0s;
  }

  &.dragging {
    opacity: 1;
    .scrollbar-handle {
      cursor: default;
      background-color: lighten(@gray, 30%);
      border: 1px solid lighten(@gray, 20%);
      .tooltip {
        opacity: 1;
        display: block;
      }
    }
  }

  /* Used to read the track height with padding applied. */
  .scrollbar-track-inner {
    height: 100%;
  }

  .scrollbar-handle {
    background-color: lighten(@gray, 40%);
    border: 1px solid lighten(@gray, 30%);
    border-radius: 8px;
    .tooltip {
      opacity: 0;
      display: none;
      transition: opacity 0.3s;
      top: 50%;
      transform: translate(-100%, -50%);
      position: absolute;
      pointer-events: none;
    }
  }

  .scrollbar-ticks {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    .t {
      &.match {
        background: @text-color-search-current-match;
        z-index: 2;
      }
      position: absolute;
      width: 90%;
      left: 5%;
      height: 2px;
      background: @text-color-search-match;
      box-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.25);
    }
  }
}
body.platform-win32 {
  .scroll-tooltip {
    border-radius: 0;
  }
  .scrollbar-track {
    .scrollbar-handle {
      border-radius: 0;
    }
  }
}