blob: 470c123a9ec38b1be1370b4fa4fec783d5ca240f [file] [log] [blame]
/* 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 {
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;
padding-top: 1px;
}
div.header div.title {
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 22px;
height: 22px;
}
div.header div.time {
font-size: 10px;
height: 12px;
line-height: 12px;
padding-left: 1px;
}
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;
}
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;
}