style.css

/* Variables */
:root {
	--background-grey: #111215;
	--dark-grey: #22232d;
	/* --background-grey: #111215;
	--dark-grey: #22232d; */
	--light-grey: #777787;
	--lighter-grey: #d3d3de;
	--text-color: white;
	--highlight-color: blue;
}

@font-face {
  font-family: Roboto;
  src: url("media/Roboto-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}


/* PAGE */
html {
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	color: var(--text-color);
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

.page_wrap {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background: var(--dark-grey);
}

header, body {
  margin: 0;
}

header {
	padding: 1em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #004170;
	color: white;
    padding-left: 170px;
    background-image: url(https://cockpit.hub.eox.at/storage/uploads/2019/07/25/5d39b75d1c7e6EDC_logo_white.svg);
    background-repeat: no-repeat;
    background-size: 140px;
    background-position-y: 16px;
    background-position-x: 10px;
}

header h1 {
	margin: 0;
}

.btn {
	background: var(--light-grey);

	color: var(--text-color);
	font-weight: bold;
	text-decoration: none;

	border: 0;
	border-radius: 2px;
}

.github-btn {
	padding: 1em;
}

#wrapper {
	flex: 1;
	display: flex;
  flex-flow: row wrap;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#wrapper > * {
  flex: 1 100%;
}

#map {
  height: 100%;
}

@media all and (min-width: 1000px) {
	#sidebar {
		flex: 0 0 400px;
	}

	#map {
		flex: auto;
	}
}


/* SIDEBAR */

#sidebar {
	display: none;
	position: relative;
	flex-direction: column;
	align-items: center;
	padding: 0;
	background: var(--background-grey);
}

#sidebar summary {
	text-align: center;
}

#sidebar table {
	margin: 0 auto;
	text-align: center;
}

details{
	margin: 1em 0;
}

.download-btn {
	padding: 0.5em;
	cursor: pointer;
}

#sidebar-overlay {
	position: absolute;
	height: 100%;
	width: 100%;

	display: flex;
	justify-content: center;
	align-items: center;
}

.sidebar-overlay-message {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* SPINNER */
/* Source: https://tobiasahlin.com/spinkit/ */
.sk-cube-grid {
  width: 40px;
  height: 40px;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: var(--text-color);
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
          animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
  }
}


/* LEAFLET */

.leaflet-container {z-index:0}

div.leaflet-bottom.leaflet-left {
	width: 100%
}

/* TABLE */

.leaflet-table-container {
  max-width: calc(100% - 20px); /* margin + padding */
}

.leaflet-table-topbar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.leaflet-table-topbar > select {
	-moz-appearance: none;
	-webkit-appearance: none;
	padding: 0.5em;
}

.leaflet-tables-container * {
	background-color: var(--dark-grey);
	color: var(--text-color)
}

.x-supagrid th input {
  border: 0.1em var(--light-grey) solid;
}

.x-supagrid .head th {
  border: none;
}


/* ATTRIBUTION CONTROL */

.leaflet-control-attribution * {
  vertical-align: middle;
}

.leaflet-control-attribution:hover :not(.attribution-icon),
.leaflet-control-attribution .attribution-icon {
  display: inline-block;
}

.leaflet-control-attribution :not(.attribution-icon),
.leaflet-control-attribution:hover .attribution-icon {
  display: none;
}

.attribution-icon {
  cursor: pointer;
  font-size: 2em;
  margin: 0 4px;
}

/* CUSTOM CONTROLS */
.leaflet-bar a, .leaflet-control-layers, .leaflet-table-container {
	background: var(--dark-grey);
	color: var(--text-color);
}

.leaflet-bar a:hover {
	background: var(--background-grey);
	color: var(--text-color);
}

.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
	border: 0;
}

.custom-control.leaflet-control {
  min-width: 24px;
  padding: 5px 10px;

  background-color: var(--dark-grey);
  background-clip: padding-box;

  border-radius: 5px;
}


/* SWIPE CONTROL */
.leaflet-control-swipe {
	cursor: pointer;
	top: 50%;
	width: 2em;
	font-size: 48px;
	line-height: 48px;

	color: var(--dark-grey);
	text-align: center;
	text-shadow: 0 -1px #fff, 0 1px #000;
}

.leaflet-swipe-pane {
	visibility: hidden;
	border-right: 0.1em var(--dark-grey) solid;,
}


/* TIMESTACK CONTROL */
.leaflet-control-timestack {
	width: 30px;
	height: 30px;
	font-size: 1.5em;
	cursor: pointer;
}

.leaflet-control-timestack.active {
	background-color: var(--light-grey);
}


/* LEGEND */

.legend.leaflet-control:hover .legend-description  {
  display: inline-block;
  vertical-align: middle;
}

.legend-row {
  margin-bottom: 5px;
}

.legend-row:last-child {
  margin: 0;
}

.legend-colour {
  display: inline-block;
  vertical-align: middle;
	width: 2em;
	height: 2em;
	cursor: pointer;
}

.legend-description {
  display: none;
  margin-left: 5px;
	cursor: pointer;
}

/* MAGNIFIYING GLASS  CONTROL */

.leaflet-control-magnifying-glass {
  font-size: 1.5em;
}

.leaflet-control-magnifying-glass.active {
	background-color: var(--light-grey);
}

/* MINIMAP CONTROL */
.leaflet-control-minimap {
	border: 0;
}

.leaflet-control-minimap a {
	background-color: var(--dark-grey);
}

.leaflet-control-minimap a:hover {
	background-color: var(--background-grey);
}


/* CHART */
svg {
	margin-bottom: 1.5em;
}
.area {
	fill: var(--light-grey);
	stroke: var(--light-grey);
	stroke-width: 2;
	stroke-linecap: square;
}

.line-segments {
	fill: none;
	stroke: var(--text-color);
	stroke-width: 2px;
	stroke-linecap: square;
}

.line-gaps {
	fill: none;
	stroke: var(--text-color);
	stroke-width: 2px;
	stroke-linecap: butt;
}

circle {
	fill: var(--light-grey);
	r: 2px;
}
.circles-cloudfree {
	stroke: var(--text-color);
	stroke-width: 1.25;
}

.tooltip {
	z-index: 1000;
	display: none;
	position: absolute;
	padding: 6px;

	background-color: var(--dark-grey);
}

.tooltip-line {
	visibility: hidden;
	stroke: var(--text-color);
}


/* TIMESERIES TABLE */
#points-table {
    border-collapse: collapse;
}

#points-table td, #points-table th {
  border: black solid 1px;
  padding: 4px;
}

#points-table th {
  background-color: var(--dark-grey);
}

#points-table tr:nth-child(even) {
	background-color: var(--dark-grey);
}

/* MODAL */

.modal-open {
	height: 100vh;
	overflow: hidden;
}

#ie-modal-container {
	width: 100%;
	height: 100%;
	top: 0;
	position: absolute;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 999;
	background: rgba(0,0,0,.8);
}

#ie-info {
	background: var(--background-grey);
	max-width: 90vw;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
}
@media (min-width: 960px) {
	#ie-info {
		max-width: 60vw;
	}
}
#ie-info .modal-content {
	padding: 40px 20px;
	font-family: "Roboto", sans-serif;
	text-align: center;
}
#ie-info .modal-header h2 {
	font-size: 34px;
	font-weight: 300;
	/* margin-bottom: 10px; */
}
#ie-info .modal-body {
	margin: 30px 0;
	font-size: 16px;
}
#ie-info .btn-primary {
	background: var(--light-grey);
	color: var(--text-color);
	font-weight: bold;
	padding: 16px 40px;
	border-radius: 2px;
	text-transform: uppercase;
}
.leaflet-container.crosshair-cursor-enabled {
  cursor:crosshair;
}
.photon-input, .photon-autocomplete {
	background: var(--background-grey);
	color: var(--text-color);
}
.photon-input::placeholder {
	color: var(--lighter-grey);
}
.search-results-title {
	font-size: 0.95em;
}
.search-results-details {
	font-size: 0.85em;
}
.leaflet-photon, .photon-autocomplete {
	transform: translate(-100px,0px);
}
.leaflet-photon {
	display: flex;
  align-items: center;
  justify-content: center;
}
.photon-icon {
	background: var(--background-grey);
	color: var(--text-color);
}

.photon-autocomplete li.on {
	background: var(--dark-grey);
}