@geogirafe/lib-geoportal/components/offline/style.css

GeoGirafe is a flexible application to build online geoportals.

/* SPDX-License-Identifier: Apache-2.0 */
#container {
  width: calc(100% - 50px);
  margin: 25px;
}

#title {
  color: #3f68a7;
  text-transform: uppercase;
  text-align: center;
  margin: 0.5em 0;
  font-size: 1.8em;
  font-weight: 600;
}

#download-button {
  width: 100%;
  height: 100px;
  padding: 1em;
  transition: all 0.2s;
}

.rounded-brick {
  background: white;
  border: none;
  filter: drop-shadow(0px 4px 7px #0004382c);
  border-radius: 8px;
}

#download-button img {
  height: 100%;
}

button:disabled {
  background-color: rgb(196, 158, 158);
}

.hidden {
  display: none;
}

.disabled-button {
  pointer-events: none;
  opacity: 0.3;
}

.disabled-button img {
  filter: invert(27%) sepia(50%) saturate(5000%) brightness(100%) contrast(2);
}

.enabled-button img {
  filter: brightness(0) saturate(100%) invert(54%) sepia(97%) saturate(2988%) hue-rotate(187deg) brightness(123%)
    contrast(100%);
}

.offline-status {
  font-size: 1.5em;
  text-align: center;
  background: #dd0000;
  text-transform: uppercase;
  color: white;
  font-weight: 700;
  padding: 3px 0;
  border-radius: 8px;
  margin-bottom: 1em;
  filter: drop-shadow(0 4px 7px #f005);
}

#progress-bar {
  background-color: #00adff94;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
}

#cleaning-section {
  margin-top: 25px;
  height: 100px;
  width: 100%;
  display: flex;
}

#monitor-container {
  height: 100%;
  width: calc(50% - 10px);
  margin-right: 20px;
  overflow: hidden;
}

#remove-button {
  height: 100%;
  width: calc(50% - 10px);
  border: none;
}

#remove-button img {
  height: 60%;
  filter: invert(27%) sepia(50%) saturate(5000%) brightness(100%) contrast(2);
}

#offline-data-title {
  font-size: 1.3em;
  text-align: center;
  line-height: 1.5em;
  background: #187196;
  color: #ffffff;
}

#offline-data-counter {
  line-height: 2em;
  color: #00bfff;
  font-size: 2em;
  font-weight: 600;
  text-align: center;
}

.wmts-warning {
  font-size: 1.5em;
  text-align: center;
  background: #ff9100;
  color: white;
  font-weight: 700;
  padding: 3px 0;
  border-radius: 8px;
  margin-top: 1em;
  filter: drop-shadow(0 4px 7px #ff910088);
}