/* ge CSS for weewx GE skin
 * ©2020 Graham Eddy <graham.eddy(at)gmail.com>
 * requires gereveal.css
 * last updated 2020-12-13
 */

/* global constants */
:root {
  /* colors */
  --header-fg-color: #FDFDFD;
  --header-bg-color: #BF00BF;
  --value-bg-color: rgba(0, 0, 255, 0.04); /* very pale blue, low opacity */
  --ok-bg-color: transparent;
  --warning-bg-color: #FFFF7F; /* pale yellow */
  --error-bg-color: #FF7F7F; /* pale red */
  --near-black-fg-color: #444;
  --dark-grey-fg-color: #999;
  --dark-grey-bg-color: #BBB;
  --mid-grey-bg-color: #DDD;
  --pale-grey-bg-color: #EEE;
  /* base font */
  font-size: 14px;
  font-family: "Trebuchet MS", Geneva, sans-serif;
}

/* discard those pesky margins and padding */
* {
  margin: 0;
  padding: 0;
}

/* discard decorations */
a {
  text-decoration: none;
}
ul {
  list-style: none;
}

/* error text displays */
.okay {
  background-color: var(--ok-bg-color);
  z-index: 1;
}
.warning {
  background-color: var(--warning-bg-color);
  z-index: 1;
}
.error {
  background-color: var(--error-bg-color);
  z-index: 1;
}

/* fieldset fancy borders */
fieldset {
  margin-left: 0.3em;
  padding: 0.2em;
  border-radius: 0.3em;
  border: 1px solid var(--mid-grey-bg-color);
}
/* fieldset fancy legend */
fieldset legend {
  color: var(--dark-grey-fg-color);
}

/*****************************************************************************
 * header
 *
 * banner = (title, links, location)
 * title = (logo, h1, console)
 * console = (time, status, collapser, basic-view-label) # and other widgets
 * location = (logo, list)
 *
 * responsive: title required nowrap. rather than allow locaton and links
 * to wrap, drop them if not enough space
 */

/* affix header to top always */
header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
}

/* banner is non-wrappable row */
header .banner {
  display: flex;
  margin: 0.2em 0.2em 0 0.2em;
  border-radius: 0.6em 0.6em 0 0;
  flex: row nowrap;
  justify-content: space-between;
  align-items: center;
  color: var(--header-fg-color);
  background-color: var(--header-bg-color);
}

/* all header text blocks are non-wrappable */
header .banner h1,
header .banner p {
  white-space: nowrap; /* doesn't seem to work */
}

/* header title is grid */
header .banner .title {
  /*padding-left: 0.4em;*/
  display: grid;
  grid-template-columns: repeat(2, auto);
}

/* force header logo to top left of title */
header .banner .title img.logo {
  height: 3.5em;
  padding-right: 0.2em;
  grid-column: 1;
  grid-row: 1 / 3;
}

/* header console is non-wrappable row */
header .banner .console {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

/* small header console collapser button */
header .banner .console button {
  padding: 0;
  font-size: 80%;
}

/* header console basic-view-label shown only for basic-view */
body:not(.basic-view) header .banner .console .basic-view-label {
  display: none;
}

/* location is nonwrap row of logo and latlong. it is optional, if pushed
   for space. further, the logo is even more optional and can be sacrificed */
header .banner .location {
  display: none; /* change to flex if room */
  font-size: 95%;
  flex-flow: row nowrap;
  text-align: center;
  align-items: center;
  align-self: center; /* as flexitem */
}
/* force logo to right */
header .banner .location .logo {
  display: none; /* change to inline if room to be included as flexitem */
  order: 99; /* make it last item */
}
header .banner .location .logo img {
  height: 2.5em;
  padding: 0 0.2em 0 0.1em;
}

/* links is optional, if pushed for space */
header .banner .links {
  display: none; /* change to block if room */
  font-size: 95%;
  text-align: center;
  align-self: center; /* as flexitem */
}
header .banner .links li:first-of-type {
  font-weight: bold;
  font-style: italic;
}
header .banner .links a {
  color: var(--header-fg-color);
}

/* separator at bottom of header !and footer! */
header .separator,
footer .separator {
  height: 0.2em;
  width: 100%;
  background-color: var(--header-bg-color);
}
header .separator {
  margin-bottom: 0.2em;
}

/* responsive: show optional location */
@media screen and (min-width: 490px) {
  header .banner .location {
    display: flex;
  }
}
/* responsive: show optional links */
@media screen and (min-width: 600px) {
  header .banner .links {
    display: block;
  }
}
/* responsive: show optional location logo */
@media screen and (min-width: 650px) {
  header .banner .location .logo {
    display: inline;
  }
}

/*****************************************************************************
 * bulletin aside
 */

.bulletin {
  margin-top: 4.0em;  /* height of header, which is affixed */
}
body.basic-view .bulletin {
  border-bottom: 0.05em solid var(--header-bg-color);
}

/* bulleted list. horizontal when space permits, otherwise vertical */
.bulletin li {
  display: inline-block;
  font-size: 90%;
  padding-left: 0.5em;
  text-indent: -0.5em;
}
.bulletin li::before {
  content: "\2022"; /* bullet */
}

/*****************************************************************************
 * main
 *
 * header = (title, time, location, links, collapser)
 */

/* any section's reveal handle.
   highlight when activated or hover. handle indicator shows activated */
main section > .reveal-handle.toggler {
  display: block;
  width: 100%;
  margin-bottom: 0.2em;
  height: auto;
  border: none;
  /*padding-bottom: 0.1em;*/ padding: 0.2em 0 0.2em 0.2em;
  font-size: 1.0em;
  text-align: left;
  color: var(--near-black-fg-color);
  background-color: var(--mid-grey-bg-color);
}
main section > .reveal-handle.toggler::before {
  padding: 0 0.2em 0 0.2em;
  content: "\25B8"; /* small right triangle */
  /*content: "\25BE"; /* small down triangle */
  /*content: "\25B6"; /* big right triangle */
  /*content: "\25BC"; /* big down triangle */
  /*content: "\25B7"; /* big empty right triangle */
  /*content: "\25BD"; /* big empty down triangle */
}
main section > .reveal-handle.toggler:hover,
main section > .reveal-handle.toggler.activated {
  font-weight: bold;
  background-color: var(--dark-grey-bg-color);
}
main section > .reveal-handle.toggler.activated::before {
  content: "\25BE"; /* small down triangle */
}

/*****************************************************************************
 * current section
 *
 * dashboard = ([gauge-panel, ...], forecast)
 * gauge-panel = [gauge=(obstype, meter, value, unit), ...]
 */

/* dashboard is wrappable row */
.current .dashboard {
  height: auto;
  margin-bottom: 0.2em;
  display: flex;
  flex-flow: row wrap;
  justify-content: /*space-between;*/ flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

/* groupings of gauge-panels are non-wrappable columns */
.dashboard > section {
  display: flex;
  flex-flow: column nowrap;
}

/* gauge-panel is grid, each row a gauge */
.current .dashboard .gauge-panel {
  display: grid;
  grid-template-columns: repeat(4, auto);
  /*padding: 0.2em;*/
  border-radius: 0.3em;
}

/* fields inside a gauge (row of gauge-panel) */
.current .dashboard .gauge-panel .obstype {
  width: 3.5em;
  white-space: nowrap;
}
.current .dashboard .gauge-panel .value {
  width: 2.4em;
  padding: 0 0.2em;
  border-radius: 0.4em;
  background-color: var(--value-bg-color);
  text-align: right;
}
.current .dashboard .gauge-panel .unit {
  width: 3.0em;
  align-self: center;
  font-size: 70%;
}
.current .dashboard .gauge-panel .dial {
  width: 2.0em;
  height: auto;
}
/* most gauges have meters. there are some other types */
/* html5 meter bug: the high must be in upper half of min-max interval */
.current .dashboard .gauge-panel meter.dial {
  /*background: none;
  /*background-color: white; /* *any* color seems to make it 3D */
}
/* wind direction gauge has compass instead of meter.
   no idea yet what this will look like */
.current .dashboard .gauge-panel .compass.dial {
  background-color: var(--pale-grey-bg-color);
}

/* fc_compact (inside mini-forecast) is generated/provided.
   updates to provided css follow... */
.current .mini-forecast .fc_compact table {
  border-spacing: 0.2em;
}
.current .mini-forecast .fc_compact td {
  text-align: center;
}
.current .mini-forecast .fc_compact .last-column {
  display: none;
} 
.current .mini-forecast .fc_compact .row-outlook {
  height: 1.5em;
}
.current .mini-forecast .fc_compact .outlook-img,
.current .mini-forecast .fc_compact .precip-img,
.current .mini-forecast .fc_compact .obvis-img {
  width: 1.5em;
}
/* highlight mini-forecast values */
.current .mini-forecast .fc_compact td:not(.first-column):not(.last-column) > .row-temp,
.current .mini-forecast .fc_compact td:not(.first-column):not(.last-column) > .row-wind {
  background-color: var(--value-bg-color);
  border-radius: 0.4em;
}
/* units removed from last table column and added as line below table */
.current .mini-forecast .fc_compact ~ p {
  text-align: right;
  font-size: 70%;
}

/* changes/simplifications for basic-view */
body.basic-view main {
  margin-top: 0.2em;
  display: flex;
  flex-flow: column nowrap;
}
body.basic-view .current .dashboard {
  display: flex;
  flex-flow: column wrap;
}
body.basic-view .current .dashboard {
  height: 11.2em;
}
body.basic-view .day > div {
  display: block;
}
/* further modification just-for-paul */
body.basic-view.just-for-paul h2 {
  margin: 0.2em 0 0 1.0em;
}
body.basic-view.just-for-paul .current .dashboard {
  height: 15.8em;
}
/* responsiveness: for basic-view and just-for-paul (they overlap) */
@media screen and (min-width: 436px) {
  body.basic-view main {
    flex-flow: row nowrap;
  }
  body.basic-view .current .dashboard,
  body.basic-view.just-for-paul .current .dashboard {
    height: auto;
  }
}
@media screen and (min-width: 391px) and (max-width: 435px) {
  body.basic-view.just-for-paul .current .dashboard {
    height: 10.6em;
  }
}

/*****************************************************************************
 * chart wall sections
 *
 * chart-wall = [chart, ...]
 * chart = (plot, highlights)
 * highlights = [highlight=(obstype, (agg, value, time)*2 ), ...]
 */

/* wall of charts is wrappable row of charts */
.chart-wall {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}

.chart-wall .chart {
}

/* a chart is non-wrappable column of plot and highlights */
.chart-wall .chart {
  display: flex;
  flex-flow: column nowrap;
  margin: 0 0 0.4em 0.4em;
}

.chart-wall .chart img.plot {
  width: 100%;
}

.chart-wall .chart .highlights {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, auto);
  font-size: 80%;
  white-space: nowrap;
}

.chart-wall .chart .highlights .obstype {
  width: 2.5em;
  font-weight: bold;
}
.chart-wall .chart .highlights .agg {
  width: 1.8em;
  font-style: italic;
}
.chart-wall .chart .highlights .value {
  width: 5.0em;
  text-align: right;
  background-color: var(--value-bg-color);
  /*border-radius: 0.4em;*/
}
.chart-wall .chart .highlights time {
  width: 5.4em;
  color: var(--dark-grey-fg-color);
}

/*****************************************************************************
 * forecast section
 */

/* fc_strip (inside forecast) is generated/provided.
   updates to provided css follow... */
  /* updates to distributed forecast_strip.css, especially change px to em */
.forecast  .fc_strip {
  overflow-x: auto;
}
.forecast  .fc_strip table {
  padding-right: 0.4em;
}
.forecast  .fc_strip td {
  padding: 0 0.2em 0 0;
}
.forecast  .fc_strip .windDir img {
  height: 0.8em;
  width: auto;
}
.forecast  .fc_strip .clouds img {
  width: 1.6em;
  margin-right: -0.3em; /* crop rightmost edge */
}
.forecast  .fc_strip .legend-img {
  width: 1.2em;
}
.forecast  .fc_strip .sources {
  padding-top: 0;
  white-space: nowrap; /* allow to overflow viewport under scrolling table */
  font-size: 0.8em;
}
/* fix when too many date columns (config should be 6) of generated code */
.forecast  .fc_strip > table > tr.date > td:not([colspan]) {
  display: none;
}

/*****************************************************************************
 * reports section
 *
 * reports = ((report-year, report-year-month), report-text)
 */

/* bit of space after the select/report sections */
.reports fieldset {
  margin-bottom: 0.2em;
}
#report-year { /* id because javascript uses this singleton */
  margin-right: 0.4em;
}

/* big blank textarea to display the report content */
#report-text { /* id because javascript uses this singleton */
  width: 100%;
  border: none;
  white-space: pre;
  word-break: keep-all; /* not working on safari 13.1.2 */
  overflow: auto;
  font-family: Courier;
}

/*****************************************************************************
 * health section
 *
 * dashboard = [subsystem, ...]
 * subsystem = [component, ...]
 * component = (name, value, unit, status)
 */

/* health status indicator
   also shown in header console */
.health-status {
  width: 1.0em;
  height: 1.0em;
  display: inline-block;
  border-radius: 50%;
}
.health .health-status {
  vertical-align: text-bottom;
}

/* dashboard is wrappable column
   responsiveness: height must be rigidly controlled to get it wrapping
   and filling horizontally */
.health .dashboard {
  height: auto; /* start with no restriction on height (one column) */
  display: flex;
  flex-flow: column wrap;
  justify-content: /*space-between;*/ flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

/* server is row of computer subsystems */
.health .dashboard .server {
  /* chrome ok, breaks safari: align-self: stretch; /* as element of parent flexbox */
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

/* health subsystem is a grid, rows being components */
.health .dashboard .subsystem {
  display: grid;
  grid-template-columns: repeat(3, auto);
}
.health .dashboard > fieldset {
  margin-bottom: 0.2em;
}

/* health subsystem component name */
.health .dashboard .subsystem .name {
  width: /*5.2em;*/ 5.9em; /* kludge to make narrow and wide subsystems align */
  white-space: nowrap;
}
/* health subsystem component long.name is just longer name */
.health .dashboard .subsystem .name.long {
  width: 15.2em;
}
/* health subsystem component sub.name prefixes bullet to name */
.health .dashboard .subsystem .name.sub::before {
  content: "\2022 "; /* bullet */
}

/* health subsystem component value. this should be augmented by an
   error class 'error' or 'warning' */
.health .dashboard .subsystem .value {
  width: 2.2em;
  border-radius: 0.2em;
  padding: 0 0.2em;
  text-align: right;
  background-color: var(--value-bg-color);
}
/* override value's 'okay' color to just be normal value background color */
.health .dashboard .subsystem .value.okay {
  background-color: var(--value-bg-color);
}
.health .dashboard .subsystem .value.warning {
  background-color: var(--warning-bg-color);
}
.health .dashboard .subsystem .value.error {
  background-color: var(--error-bg-color);
}
/* health subsystem component long.value spans value and unit */
.health .dashboard .subsystem .value.long {
  grid-column: span 2;
}

/* health subsystem component value's unit */
.health .dashboard .subsystem .unit {
  width: 2.0em;
  padding-left: 0.2em;
  align-self: center;
  font-size: 70%;
}

/* responsive: break into 2 columns */
@media screen and (min-width: 568px) {
  .health .dashboard {
    height: 18.4em;
  }
}
/* responsive: break into 3 columns */
@media screen and (min-width: 850px) {
  .health .dashboard {
    height: 11.8em;
  }
}

/*****************************************************************************
 * footer
 * banner = (copyright, address)
 */

footer {
  opacity: var(--header-opacity);
}

/* separator at top of footer */
footer .separator {
  /* copies from 'header .separator' above */
}

/* footer is row nowrap centered */
footer .banner {
  margin: 0 0.2em 0.2em 0.2em;
  border-radius: 0 0 0.6em 0.6em;
  padding-bottom: 0.1em;
  color: var(--header-fg-color);
  background-color: var(--header-bg-color);
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center; /*baseline;*/
}

/* copyright text is "fine print" */
footer .banner .copyright {
  font-size: 70%;
  padding-right: 1.0em; /* separator between copyright and address */
}

/* email rendered as img not text to avoid web address harvesting */
footer .banner .email img {
  height: 0.95em;
  margin-bottom: 0.071em;
  vertical-align: text-bottom;
}