pytest-html/src/layout/css/style.scss

$font-size-text: 12px;
$font-size-h1: 24px;
$font-size-h2: 16px;

$border-width: 1px;

$spacing: 5px;

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: $font-size-text;
  /* do not increase min-width as some may use split screens */
  min-width: 800px;
  color: #999;
}

h1 {
  font-size: $font-size-h1;
  color: black;
}

h2 {
  font-size: $font-size-h2;
  color: black;
}

p {
  color: black;
}

a {
  color: #999;
}

table {
  border-collapse: collapse;
}

/******************************
 * SUMMARY INFORMATION
 ******************************/

#environment {
  td {
    padding: $spacing;
    border: $border-width solid #e6e6e6;
    vertical-align: top;
  }

  tr:nth-child(odd) {
    background-color: #f6f6f6;
  }
  ul {
    margin: 0;
    padding: 0 20px;
  }
}

/******************************
 * TEST RESULT COLORS
 ******************************/
span.passed,
.passed .col-result {
  color: green;
}

span.skipped,
span.xfailed,
span.rerun,
.skipped .col-result,
.xfailed .col-result,
.rerun .col-result {
  color: orange;
}

span.error,
span.failed,
span.xpassed,
.error .col-result,
.failed .col-result,
.xpassed .col-result {
  color: red;
}

.col-links__extra {
  margin-right: 3px;
}

/******************************
 * RESULTS TABLE
 *
 * 1. Table Layout
 * 2. Extra
 * 3. Sorting items
 *
 ******************************/

/*------------------
 * 1. Table Layout
 *------------------*/

#results-table {
  border: $border-width solid #e6e6e6;
  color: #999;
  font-size: $font-size-text;
  width: 100%;

  th,
  td {
    padding: $spacing;
    border: $border-width solid #e6e6e6;
    text-align: left;
  }

  th {
    font-weight: bold;
  }
}

/*------------------
 * 2. Extra
 *------------------*/

$extra-height: 240px;
$extra-media-width: 320px;

.log {
  background-color: #e6e6e6;
  border: $border-width solid #e6e6e6;
  color: black;
  display: block;
  font-family: 'Courier New', Courier, monospace;
  height: $extra-height - 2 * $spacing;
  overflow-y: scroll;
  padding: $spacing;
  white-space: pre-wrap;

  &:only-child {
    height: inherit;
  }
}

div.media {
  border: $border-width solid #e6e6e6;
  float: right;
  height: $extra-height;
  margin: 0 $spacing;
  overflow: hidden;
  width: $extra-media-width;
}

.media-container {
  display: grid;
  grid-template-columns: 25px auto 25px;
  align-items: center;
  flex: 1 1;
  overflow: hidden;
  height: 200px;
}
.media-container__nav--right,
.media-container__nav--left {
  text-align: center;
  cursor: pointer;
}

.media-container__viewport {
  cursor: pointer;
  text-align: center;
  height: inherit;
  img,
  video {
    object-fit: cover;
    width: 100%;
    max-height: 100%;
  }
}

.media__name,
.media__counter {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex: 0 0 25px;
  align-items: center;
}
.collapsed {
  display: none;
}

@mixin rowToggle {
  color: #bbb;
  font-style: italic;
  cursor: pointer;
}

.col-result {
  cursor: pointer;
  &:hover::after {
    @include rowToggle;
  }
}
.col-result.collapser {
  &:hover::after {
    content: ' (hide details)';
  }
}
.col-result.expander {
  &:hover::after {
    content: ' (show details)';
  }
}

/*------------------
 * 3. Sorting items
 *------------------*/
.sortable {
  cursor: pointer;
  &.asc {
    &:after {
      content: ' ';
      position: relative;
      left: 5px;
      bottom: -12.5px;
      border: 10px solid #4caf50;
      border-bottom: 0;
      border-left-color: transparent;
      border-right-color: transparent;
    }
  }
  &.desc {
    &:after {
      content: ' ';
      position: relative;
      left: 5px;
      bottom: 12.5px;
      border: 10px solid #4caf50;
      border-top: 0;
      border-left-color: transparent;
      border-right-color: transparent;
    }
  }
}

.sort-icon {
  // font-size: 0px;
  // float: left;
  // margin-right: $spacing;
  // margin-top: $spacing;

  // /*triangle*/
  // $triangle-width: 8px;
  // width: 0;
  // height: 0;
  // border-left: $triangle-width solid transparent;
  // border-right: $triangle-width solid transparent;

  // .asc {
  //   /*finish triangle*/
  //   border-bottom: $triangle-width solid #999;
  // }

  // .desc {
  //   /*finish triangle*/
  //   border-top: $triangle-width solid #999;
  // }
}

.hidden {
  display: none;
}

.summary {
  &__data {
    flex: 0 0 550px;
  }
  &__reload {
    flex: 1 1;
    display: flex;
    justify-content: center;
    &__button {
      flex: 0 0 300px;
      display: flex;
      color: white;
      font-weight: bold;
      background-color: #4caf50;
      text-align: center;
      justify-content: center;
      align-items: center;
      border-radius: 3px;
      cursor: pointer;
      &.hidden {
        @extend .hidden;
      }
      &:hover {
        background-color: #46a049;
      }
    }
  }
  &__spacer {
    flex: 0 0 550px;
  }
}
.controls {
  display: flex;
  justify-content: space-between;
}
.filters,
.collapse {
  display: flex;
  align-items: center;
  button {
    color: #999;
    border: none;
    background: none;
    cursor: pointer;
    text-decoration: underline;
    &:hover {
      color: #ccc;
    }
  }
}
.filter__label {
  margin-right: 10px;
}