EventMapper/assets/styles/style.css

@import url("./components.css");
@import url("./elements.css");

@keyframes load {
  to { transform: rotate(1turn) }
}

body, html {
  margin: 0;
  height: 100%;
  width: 100vw;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #404040;
  font-family: sans-serif;
}

#map-ui {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

#map-ui #loading {
  display: inline-block;
  position: absolute;
  width: 96px;
  height: 96px;
  left: calc(50vw - 48px);
  top: calc(50vh - 48px);
  background-color: #2228;
  border-radius: 8px;
  opacity: 0;
  z-index: 9;
  transition: opacity 0.25s;
}

#map-ui.loading #loading {
  opacity: 1;
}

#map-ui #loading #loading-circle {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
  top: 16px;
  left: 16px;
  background: conic-gradient(from 0deg,#fff0,#fff);
  -webkit-mask-image: radial-gradient(circle, #fff0 0%, #fff0 33%, #ffff 33%, #ffff 66%, #fff0 66%, #fff0 100%);
  mask-image: radial-gradient(circle, #fff0 0%, #fff0 33%, #ffff 33%, #ffff 66%, #fff0 66%, #fff0 100%);
  animation: load 0.5s linear infinite;
}

#search-dialog {
  width: calc(100% - 16px);
  max-width: 624px;
}

#events-container #events,
#events-container #events-inspector {
  transition: translate 0.25s, bottom 0.25s, border-radius 0.25s;
  width: calc(100% - 16px);
  max-width: 400px;
  max-height: calc(50vh - 16px);
}

#events-container.inspector #events,
#events-container:not(.inspector) #events-inspector,
#events-container.empty #events,
#events-container.empty #events-inspector {
  translate: 0 calc(100% + 32px);
}

#events-container.minimized #events,
#events-container.inspector.minimized #events-inspector {
  bottom: 0;
  translate: 0 calc(100% - 52px);
}

#events-container div.size-fullwidth h1 {
  white-space: nowrap;
  overflow: clip;
  text-overflow: ellipsis;

  line-height: 18px;
  transition: line-height 0.25s;
}

#events-container div.size-fullwidth p {
  white-space: nowrap;
  overflow: clip;
  text-overflow: ellipsis;

  height: 20px;
  transition: height 0.25s, opacity 0.25s;
}

#events-container #events-inspector div.size-fullwidth p {
  opacity: 0.5;
}

#events-container.minimized div.size-fullwidth h1 {
  line-height: 36px;
}

#events-container.minimized div.size-fullwidth p {
  height: 0;
  opacity: 0;
}

#search-dialog div.size-fullwidth h1 {
  line-height: 36px;
}

@media (max-width: 640px) {
  #events-container #events,
  #events-container #events-inspector {
    bottom: 0;
    border-radius: 4px 4px 0 0;
    max-width: none;
    max-height: 33vh;
  }
}