oncall/client/stylesheets/components/header.css

/* Copyright 2015 The Vanadium Authors. All rights reserved. */
/* Use of this source code is governed by a BSD-style */
/* license that can be found in the LICENSE file. */

div.header {
  position: fixed;
  top: 0;
  z-index: 900;
  width: 100%;
}

div.header div.info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-height);
  color: var(--dark-green-grey);
  background-color: #EAEBEB;
}

div.header div.info.stale-data {
  background-color: #ffbb55 !important;
  color: red !important;
}

.darkTheme div.header div.info {
  background-color: black;
  color: var(--light-green-grey);
}

div.header div.dashboard-title {
  width: 120px;
  padding-left: 10px;
  display: flex;
}

div.header div.info div#logo {
  width: 36px;
  height: 36px;
  background-image: url('logo.svg');
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-position: 0px 4px;
  transition: opacity 1s ease;
}

div.header div.info.stale-data div#logo {
  background-image: url('red-logo.svg') !important;
}

.darkTheme div.header div.info div#logo {
  background-image: url('light-logo.svg');
}

div.header div.title-and-time {
  display: flex;
  flex-direction: column;
  align-items: center;
}

div.header div.title {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  padding-bottom: 4px;
}

div.header div.time {
  font-size: 10px;
  height: 12px;
  line-height: 12px;
}

div.header div.time.failure {
  background-color: #AA0000;
  color: white;
  font-weight: var(--font-weight-medium);
}

div.header div.time.loading {
  color: var(--deeporange-A200);
  font-weight: var(--font-weight-medium);
}

div.header div.pics {
  display: flex;
  padding-right: 5px;
  width: 120px;
  justify-content: flex-end;
}

div.header div.pics img {
  border: 1px solid #AAA;
  margin-left: 3px;
  height: 48px;
  object-fit: cover;
}

.darkTheme div.header div.pics img {
  border: 1px solid #666;
}

div.header div.navtitle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 92px;
}

div.header div.navtitle {
  height: var(--header-height);
  line-height: var(--header-height);
  text-align: center;
  color: var(--dark-green-grey);
  font-weight: var(--font-weight-medium);
  font-size: 20px;
  text-align: center;
}

div.header div.info.stale-data div.navtitle {
  color: red;
}

.darkTheme div.header div.navtitle {
  color: var(--light-green-grey);
}

div.header div.navitems-container {
  display: flex;
}

div.header div.navitem {
  margin-right: 6px;
  cursor: pointer;
  opacity: 0.8;
  font-size: 12px;
  color: var(--dark-green-grey);
}

div.header div.info.stale-data div.navitem {
  color: red;
}

.darkTheme div.header div.navitem {
  color: var(--light-green);
}

div.header div.navitem:hover {
  opacity: 1;
}