flamingo-carotene-dev-server/dist/socketClient.css

Provide the functionality to add file watchers for developing projects with the Flamingo Carotene tooling

.caroteneDisplay {
  position: fixed;
  z-index: 999999;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 10px 20px;
  transition: transform 300ms ease-in-out;
}
.caroteneDisplay.caroteneDisplayShowMessage {
  transform: translateY(0);
}

.caroteneDisplayTop {
  top: 0;
  bottom: auto;
  border-top: 1px solid #F80;
  transform: translateY(-100%);
}
.caroteneDisplayTop.caroteneDisplayFullscreen {
  bottom: 0;
}

.caroteneDisplayBottom {
  top: auto;
  bottom: 0;
  border-bottom: 1px solid #F80;
  transform: translateY(100%);
}
.caroteneDisplayBottom.caroteneDisplayFullscreen {
  top: 0;
}

.caroteneDisplayIcon {
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  align-items: center;
  justify-content: center;
}
.caroteneDisplayFullscreen .caroteneDisplayIcon {
  display: flex;
}

.caroteneDisplayFullScreenCloseButton {
  display: none;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 25px;
}
.caroteneDisplayFullscreen .caroteneDisplayFullScreenCloseButton {
  display: block;
}

.caroteneDisplayBigCarrotIconWrapper {
  display: none;
  width: 100px;
  height: 100px;
  animation: rotatingBigCarrot 2s linear infinite;
}
.caroteneDisplayBigCarrotIconWrapper.caroteneDisplayBigCarrotIconWrapperShow {
  display: block;
}

.caroteneDisplayMessageContainer {
  display: flex;
}

.caroteneDisplayMessageIcon {
  width: 20px;
  flex-grow: 0;
  height: 20px;
  margin-right: 20px;
  animation: none;
}
.caroteneDisplayMessageIcon.caroteneDisplayMessageIconAnimated {
  animation: rotatingBigCarrot 2s linear infinite;
}

.caroteneDisplayMessage {
  color: #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black;
  flex-grow: 1;
  margin: 0;
}

@keyframes rotatingBigCarrot {
  from {
    transform: rotate3d(0.2, 1, 0.2, 0deg);
  }
  to {
    transform: rotate3d(-0.2, 1, 0.2, 360deg);
  }
}
.caroteneDisplayButton {
  z-index: 999998;
  width: 20px;
  height: 20px;
  position: fixed;
  left: 20px;
  border: 1px solid #F80;
  background-color: #000;
  border-radius: 10px;
  transform: scale(1);
  transition: transform 500ms cubic-bezier(0.515, 0.01, 0.425, 1.42) 300ms;
}
.caroteneDisplayTop + .caroteneDisplayButton {
  top: 10px;
}
.caroteneDisplayBottom + .caroteneDisplayButton {
  bottom: 10px;
}
.caroteneDisplayShowMessage + .caroteneDisplayButton {
  transform: scale(0);
}