toloframework/ker/mod/tfw.message.css

Javascript/HTML/CSS compiler for Firefox OS or nodewebkit apps using modules in the nodejs style.

.tfw-message.info {
  background-color: #333;
  color: #eee;
  font-weight: normal;
}

.tfw-message.error {
  background-color: #e00;
  color: #fff;
  font-weight: bold;
}

.tfw-message.show {
  transform: translateY(0);
  opacity: 1;
  transition: all .3s;
}

/* Depend on screen size */
.tfw-message {
  position: fixed;
  z-index: 999999;
  cursor: pointer;
  padding: 1rem;
  margin: 0;
  opacity: 0;
  transition: all .2s;
  left: auto;
  top: auto;
  right: 1rem;
  bottom: 1rem;
  width: 440px;
  margin-left: -150px;
  transform: translateY(100%);
}

@media (max-width: 480px) {
  .tfw-message {
    left: 0;
    top: auto;
    right: 0;
    bottom: 0;
    width: 100vw;
    margin: 0;
    transform: translateY(100%);
  }
}