@geogirafe/lib-geoportal/styles/mobile.css

GeoGirafe is a flexible application to build online geoportals.

/* SPDX-License-Identifier: Apache-2.0 */
html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-size: 0.9rem;
  max-width: 100vw;
  max-height: 100dvh;
  overflow: hidden;
}

body {
  --bx-shdw: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.16);
  --t-bkg: #ffffffbb;
  --text-color: #222;
  --text-color-grad1: #444;
  --text-color-grad2: #666;
  --bkg-color: rgb(255, 255, 255);
  --bkg-color-grad1: #ddd;
  --bkg-color-grad2: #bbb;
  --lnk: #0000ff;
  --lnk-visited: #800080;
  --lnk-hover: #0099ff;
  --lnk-active: #ff0000;
  --tst: #ff0000;
  --error-color: #bb0000;
  --svg-filter: none;
  --warning-color: #ffa500;
}

girafe-oauth {
  width: 4rem;
  height: 4rem;
}

.bottom-button-container-mobile {
  position: absolute;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-items: center;
  pointer-events: none;
}

@media (orientation: portrait) {
  .bottom-button-container-mobile {
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 5px;
    grid-auto-rows: 1fr;
    left: 0;
    bottom: calc(env(safe-area-inset-bottom) + 2rem);
    width: min(70vw, 400px);
    right: 0;
    margin: auto;
  }
}

@media (orientation: landscape) {
  .bottom-button-container-mobile {
    height: 35dvh;
    right: 1rem;
    grid-template-rows: repeat(4, 1fr);
    grid-row-gap: 5px;
    grid-auto-columns: 1fr;
    bottom: 0;
    top: 0;
    margin: auto;
  }
}

.bottom-button-container-mobile > * {
  pointer-events: auto;
}

girafe-search {
  position: fixed;
  top: max(2.5em, calc(env(safe-area-inset-top) + 0.5rem));
  left: 1rem;
  right: 1rem;
  z-index: 20;
}

#content {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

girafe-map {
  position: relative;
  width: 100%;
  height: 100%;
}

girafe-infobox {
  display: block;
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: max(7.5em, calc(env(safe-area-inset-top) + 5.5rem));
  margin: auto;
  width: fit-content;
}

#color-picker-container {
  position: absolute;
}