twip-chat-dokidoki.css

/* (c) 2018 kuriyama hibiya - MIT */

@font-face {
  font-family: 'NanumSquare';
  font-style: regular;
  font-weight: 400;
  src: local('NanumSquare'), url('https://cdn.rawgit.com/krynen/yeokka/cd4f89c7/theme/_shared/fonts/nanumsq.ttf');
}

* {
  box-sizing: border-box;
}
html {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  position: absolute;
  bottom: 0;
  margin: 0;
  padding: 0.5rem;
  width: 100%;
}
#log {
  width: 100%;
  display: flex;
  flex-direction: column;
  line-height: 1.5rem;
  word-wrap: break-word;
}
#log > div {
  margin: 0.25rem;
  width: calc(100% - 0.5rem);
}
.meta {
  display: flex;
  align-items: flex-end;
  margin: 0 0.25rem;

  font-weight: 700;
  font-family: 'godoMaum', 'a어린이M', 'AsiaERINL', 'NanumSquare', sans-serif;
}
.name {
  order: 1;

  min-width: 10rem;
  text-align: center;
  margin-left: 0.5rem;
  margin-right: auto;
  padding: 0.25rem 1.5rem;
  border-top-right-radius: 0.75rem;
  border-top-left-radius: 0.75rem;
  color: #fff !important;
  font-size: 1.125rem;
  background: rgba(255, 239, 246, 0.7);
  text-shadow:
   -0.12rem -0.12rem 0 #b59,
   -0.12rem -0.05rem 0 #b59,
   -0.12rem  0.05rem 0 #b59,
   -0.12rem  0.12rem 0 #b59,
   -0.05rem -0.12rem 0 #b59,
   -0.05rem -0.05rem 0 #b59,
   -0.05rem  0.05rem 0 #b59,
   -0.05rem  0.12rem 0 #b59,
    0.05rem -0.12rem 0 #b59,
    0.05rem -0.05rem 0 #b59,
    0.05rem  0.05rem 0 #b59,
    0.05rem  0.12rem 0 #b59,
    0.12rem -0.12rem 0 #b59,
    0.12rem -0.05rem 0 #b59,
    0.12rem  0.05rem 0 #b59,
    0.12rem  0.12rem 0 #b59,
    0        0       0.1rem #b59,
    0        0       0.1rem #b59;
}
.badge {
  order: 2;

  width: 1.375rem;
  height: 1.375rem;
  border: 0.125rem solid #fff;
  border-radius: 50%;
  margin: 0 0 0.25rem 0;
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.75);
}
.colon {
  display: none;
}
.message {
  display: block;
  position: relative;
  background: linear-gradient(to bottom, rgba(254, 167, 209, 1), rgba(254, 167, 209, 0.7));
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 0.15rem solid rgba(255, 223, 238, 0.9);
  color: #fff;
  font-weight: 400;
  font-family: 'NanumSquare', 'Noto Sans KR', sans-serif;

  overflow: hidden;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
  text-shadow:
   -0.06em  0.06em 0.01em rgba(31, 31, 31, 0.75),
   -0.06em  0.06em 0.01em rgba(31, 31, 31, 0.75),
    0       0.06em 0.01em rgba(31, 31, 31, 0.75),
    0       0.06em 0.01em rgba(31, 31, 31, 0.75),
    0.06em  0.06em 0.01em rgba(31, 31, 31, 0.75),
    0.06em  0.06em 0.01em rgba(31, 31, 31, 0.75),
   -0.06em  0      0.01em rgba(31, 31, 31, 0.75),
   -0.06em  0      0.01em rgba(31, 31, 31, 0.75),
    0       0      0.01em rgba(31, 31, 31, 0.75),
    0       0      0.01em rgba(31, 31, 31, 0.75),
    0.06em  0      0.01em rgba(31, 31, 31, 0.75),
    0.06em  0      0.01em rgba(31, 31, 31, 0.75),
   -0.06em -0.06em 0.01em rgba(31, 31, 31, 0.75),
   -0.06em -0.06em 0.01em rgba(31, 31, 31, 0.75),
    0      -0.06em 0.01em rgba(31, 31, 31, 0.75),
    0      -0.06em 0.01em rgba(31, 31, 31, 0.75),
    0.06em -0.06em 0.01em rgba(31, 31, 31, 0.75),
    0.06em -0.06em 0.01em rgba(31, 31, 31, 0.75);
}
.message::before, .message::after {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: -1;
}
.message::before {
  background:
  radial-gradient(rgba(0, 0, 0, 0.1) 20%, transparent 30%) 0 0,
  radial-gradient(rgba(0, 0, 0, 0.1) 20%, transparent 30%) 1.5rem 1.5rem;
  background-size: 3rem 3rem;
}
.message::after {
  height: 33%;
  top: unset;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
}