perf/modules/chart-tooltip-sk/chart-tooltip-sk.scss

@import '../themes/themes.scss';

chart-tooltip-sk {
  display: block;
  margin: 10px;

  > div.container {
    display: none;
    opacity: 90%;
    font-size: 12px;
    font-family: var(--font-family);
    position: absolute;
    z-index: 100;
    min-width: 300px;
    max-width: 360px;
    margin: 20px;
    padding: 4px;
    word-wrap: break-word;
    background: var(--surface-2dp);
    box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
    md-elevation {
      transition-duration: 0.3s;
    }

    button#closeIcon {
      position: absolute;
      right: 4px;
      top: 4px;
      border: none;
      cursor: pointer;
      padding: 4px;
    }

    close-icon-sk#unassociate-bug-button {
      fill: var(--negative);
      cursor: pointer;
    }

    h3 {
      margin-bottom: 4px;
      padding-right: 20px;
      text-shadow: 0px 1px var(--md-sys-color-background);
    }

    h4 {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      text-decoration: underline;
    }
    ul.table {
      display: table;
      list-style: none;
      padding: 0;
      margin: 0;
      border-collapse: collapse;
      li {
        display: table-row;
        .regression {
          color: #e36041;
        }
        .improvement {
          color: #3fab46;
        }
      }
      a {
        color: var(--primary);
      }
    }
    .revlink {
      margin-bottom: 4px;
    }

    button[hidden] {
      display: None;
    }

    #close {
      float: right;
    }

    .see-more-text {
      text-decoration: underline;
      font-style: italic;
      display: flex;
      justify-content: center;
    }

    .buttons {
      display: flex;
      width: 100%;
      align-items: center;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-evenly;
    }

    #bisect {
      float: left;
      position: relative;
    }

    #tooltip-key {
      font-weight: bold;
      display: table-cell;
      text-align: left;
      padding-right: 0.5em;
      padding-top: 0.5em;
      min-width: 90px;
      max-width: 100px;
      text-shadow: 0px 1px var(--md-sys-color-background);
    }
    #tooltip-link {
      font-weight: bold;
      display: table-cell;
      text-align: left;
      min-width: 80px;
      max-width: 200px;
    }
    #tooltip-text {
      display: table-cell;
      text-align: left;
      padding-right: 1em;
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}