public/sass/matchinfo.scss

@charset "utf-8";

@import "colors";

ol > li:not(.active) {
  .tokenInfo, .treeInfo {
    display: none;
  }
}

.tokenInfo, .treeInfo {
  display: none;
  background-color: $dark-orange;
  margin-right: 26px;
  overflow: auto;
  &.active {
    display: block;
  }
}

.tokenInfo {
  table {
    font-size: 10pt;
    padding: 3pt 10pt; /* wie in ol > li.active p */
    /* All cells */
    > tr:nth-child(odd) {
      td {
        background-color: lighten($dark-orange, 25%);
      }
    }
    > tr {
      > * {
	padding: 1pt 6pt;
	vertical-align: top;
      }
      > td {
	text-align: center;
	background-color: $light-orange;
      }
      /* header */
      > th{
	&:not([rowspan]) {
	  color: white;
	  text-shadow: none;
	}
	&[rowspan]:first-child {
	  background-color: $light-orange;
	}
	span.switchSort {
	  cursor: pointer;
	  position: absolute;
	  display: inline-block;
	  right: 0;
	  margin-right: -11pt;
	  width: 20pt;
	}
      }
      &:first-child th {
	text-align: center;
	background-color: $darker-orange;
	/* first column header */
	&:first-child {
	  position: relative;
	  padding-right: 20pt;
	  padding-left: 5pt;
	}
	/* second column header */
	&:nth-child(2) {
	  text-align: left;
	  padding-left: 20pt;
	  padding-right: 5pt;
	}
      }
    }
  }
}

g.root > rect {
  fill: none;
  stroke-width: 5px;
  stroke: $darker-orange;
}

g.middle > rect {
  fill: $light-orange;
  stroke: $darker-orange;
  color: white;
  stroke-width: 2px;
  padding: 2px;
}

g.leaf > rect {
  display: none;
}

svg {
  background-color: $dark-orange;
  overflow: hidden;
}

text {
  font-family: verdana, tahoma, arial;
  font-size: 9pt;
  color: $dark-grey;
  text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
}

.edgePath path {
  stroke: white;
  stroke-width: 2px;
  fill: none;
}