style.css

/* Copyright 2023 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
============================================================================
*/
/* =============================== */
/* GENERAL */
/* =============================== */
body {
  background-color: #113;
}

#tf-help-modal * {
  line-height: 1.1em;
}
#tf-help-modal .modal-body li {
  margin-bottom: 0.5em;
}
#tf-help-modal .modal-body li ul li:first-child {
  margin-top: 0.5em;
}


/* =============================== */
/* NAVBAR AND TOGGLE FEATURES */
/* =============================== */
.navbar-dark {
  background-color: #002 !important;
}

/* Failures section starts off hidden, but appears if the body tag gets */
/* the .tf-show-buildcop class from JS. */
.tf-failures-section {
  display: none;
}
.tf-show-buildcop .tf-failures-section {
  display: block;
}

/* =============================== */
/* JOB CARDS */
/* Note that we're layering this config on top of bootstrap's card class */
/* =============================== */
.card h5 {
  color: #161616;
}

.card {
  /* Pretty decent configuration to fit a good number of cards on the screen
  /* at once while supporting zooming and wrapping and stuff. Could probably */
  /* be better. */
  flex-basis: 20em;
  max-width: 33em;
  /* Darkens the background color of all cards so that the dots are visible */
  background-image: linear-gradient(rgb(0 0 0/32%) 0 0);
}

/* Needed to overwrite default bootstrap badge styling for empty badges */
.card .badge:empty {
  display: inline-block;
  cursor: pointer;
  filter: brightness(100%);
  transition: filter 1s linear;
}
.card .badge:empty:hover {
  transition: filter 0s linear;
  filter: brightness(200%);
}

/* Configure the little dots */
.card .badge {
  line-height: 0;
  color: rgba(0,0,0,0.7);
}
.card .badge.tf-date {
  background-color: rgba(255, 255, 255, 0.1);
}
.card .badge.tf-public {
  background-color: rgba(255, 255, 255, 0.2);
}
.card .badge.tf-internal {
  background-color: rgba(0, 0, 0, 0.3);
  color: rgba(255,255,255,0.7);
}
.card .badge.tf-revealed {
  outline: 3px solid #fffA;
}
.card .badge.tf-last-clicked {
  outline: 3px solid #111A;
}

/* =============================== */
/* RECORD STATUSES */
/* Note that these apply to job cards, commit dots, and commit modals */
/* These statuses match the status enums that the github API can return. */
/* They are automatically populated as classes from the dashboard generator. */

/* See https://www.w3schools.com/cssref/css_colors.php */
/* See https://htmlcolorcodes.com/color-names/ */
/* =============================== */
.EXPECTED, .PENDING, .QUEUED, .IN_PROGRESS {
  background-color: rebeccapurple;
}
.SUCCESS {
  background-color: forestgreen;
}
/* If the body tag gets .tf-colorblind, then use different colors */
.tf-colorblind .SUCCESS {
  background-color: steelblue;
}
.CANCELLED {
  background-color: #333;
}
.NEUTRAL {
  background-color: gainsboro;
  color: #333;
}
.FAILURE {
  background-color: firebrick;
}
.TIMED_OUT {
  background-color: orange;
}
.ERROR {
  background-color: #343434;
}
.ERROR h5 {
  color: lightgray;
}


/* =============================== */
/* Commit modals */
/* =============================== */
.tf-commit-modal .tf-date {
  background-color: darkgoldenrod;
}
.tf-commit-modal .tf-cl {
  background-color: green;
}
.tf-commit-modal .tf-nocl {
  background-color: darkslategray;
}
.tf-commit-modal .tf-hash {
  background-color: darkolivegreen;
}
.tf-commit-modal .tf-diff {
  background-color: saddlebrown;
}
.tf-commit-modal .tf-nodiff {
  background-color: gray;
}
.tf-commit-modal .tf-public {
  background-color: darkslategray;
}
.tf-commit-modal .tf-internal {
  background-color: gray;
}
.tf-commit-modal .tf-selected-row {
  /* TensorFlow orange, partially transparent */
  background-color: #FF6F0099;
}
.tf-commit-modal table td {
  line-height: 0;
}
.tf-commit-modal table td:last-child {
  vertical-align: bottom;
  line-height: 1.2;
}
.tf-commit-modal .tf-reveal {
  background-color: #25231d;
  cursor: pointer;
}