jemoji.css

.jemoji-menu {
  display: none;
}

.jemoji-icons {
  position: absolute;
  z-index: 1;

  overflow: auto;

  max-height: 250px;
  margin-top: 20px;
  padding: 5px;
  padding-bottom: 0;

  border: 1px solid rgba(143, 193, 228, .6);
  border-radius: 5px;
  background-color: #fff;
}

/* Style when info about keybindings is displayed */
.jemoji-menu .jemoji-info + .jemoji-icons {
  margin-top: 50px;

  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.jemoji-menu-arrow {
  position: absolute;
}

.jemoji-menu-arrow.up {
  width: 0;
  height: 0;
  margin-top: 10px;
  margin-left: 25px;

  border-right: 10px solid rgba(0, 0, 0, 0);
  border-bottom: 10px solid rgba(143, 193, 228, .6);
  border-left: 10px solid rgba(0, 0, 0, 0);
}

.jemoji-info {
  font-size: 14px;

  position: absolute;
  z-index: 1;

  height: 30px;
  margin-top: 20px;
  padding: 3px 10px 0 10px;

  color: #7f7f83;
  border: 1px solid rgba(143, 193, 228, .6);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: #faf8f6;
}

.jemoji-info div {
  float: left;

  margin-right: 15px;
}

.jemoji-info .jemoji-close {
  float: right;

  margin-right: 0;

  cursor: pointer;
}

.jemoji-icons > div {
  font-size: 15px;

  float: left;

  margin: 0 3px;
  margin-bottom: 5px;
  padding: 5px;

  cursor: pointer;

  color: #a0a0a0;
}

.jemoji-icons > div:hover,
.jemoji-icons > div:focus,
.jemoji-icons > div:active,
.jemoji-icons > div.active {
  color: #fff;
  border-radius: 5px;
  background-color: #439fe0;
}

.jemoji-icons > div > img {
  float: left;

  width: 20px;
  margin-right: 5px;
}

.jemoji-icons > span {
  float: left;
}

/* Themes */
.jemoji-menu.blue .jemoji-icons {
  border-color: #4688bd;
}

.jemoji-menu.blue .jemoji-info {
  color: #fff;
  border-color: #4688bd;
  background-color: #4688bd;
}

.jemoji-menu.blue .jemoji-icons > div:hover,
.jemoji-menu.blue .jemoji-icons > div:focus,
.jemoji-menu.blue .jemoji-icons > div:active,
.jemoji-menu.blue .jemoji-icons > div.active {
  background-color: #4688bd;
}

.jemoji-menu.blue .jemoji-menu-arrow.up {
  border-bottom-color: #4688bd;
}

.jemoji-menu.green .jemoji-icons {
  border-color: #63b546;
}

.jemoji-menu.green .jemoji-info {
  color: #fff;
  border-color: #63b546;
  background-color: #63b546;
}

.jemoji-menu.green .jemoji-icons > div:hover,
.jemoji-menu.green .jemoji-icons > div:focus,
.jemoji-menu.green .jemoji-icons > div:active,
.jemoji-menu.green .jemoji-icons > div.active {
  background-color: #63b546;
}

.jemoji-menu.green .jemoji-menu-arrow.up {
  border-bottom-color: #63b546;
}

.jemoji-menu.red .jemoji-icons {
  border-color: #d44a4a;
}

.jemoji-menu.red .jemoji-info {
  color: #fff;
  border-color: #d44a4a;
  background-color: #d44a4a;
}

.jemoji-menu.red .jemoji-icons > div:hover,
.jemoji-menu.red .jemoji-icons > div:focus,
.jemoji-menu.red .jemoji-icons > div:active,
.jemoji-menu.red .jemoji-icons > div.active {
  background-color: #d44a4a;
}

.jemoji-menu.red .jemoji-menu-arrow.up {
  border-bottom-color: #d44a4a;
}

.jemoji-menu.black .jemoji-icons {
  border-color: #4e4e4e;
}

.jemoji-menu.black .jemoji-info {
  color: #d2d2d2;
  border-color: #4e4e4e;
  background-color: #4e4e4e;
}

.jemoji-menu.black .jemoji-icons > div:hover,
.jemoji-menu.black .jemoji-icons > div:focus,
.jemoji-menu.black .jemoji-icons > div:active,
.jemoji-menu.black .jemoji-icons > div.active {
  background-color: #4e4e4e;
}

.jemoji-menu.black .jemoji-menu-arrow.up {
  border-bottom-color: #4e4e4e;
}