twip-chat-copious.css

@charset "UTF-8";

/*
  (c) 2018 kuriyama hibiya - MIT
  designed by (c) 2011 KDE
*/

@import url('https://fonts.googleapis.com/css?family=Poppins:300,600');

/*
@font-face {
  font-family: 'Copious Sans';
  font-style: regular;
  font-weight: 300;
  src: local('Copious Sans'), url('https://cdn.rawgit.com/krynen/yeokka/cd4f89c7/theme/_shared/fonts/CopiousSans-Regular.ttf');
}
@font-face {
  font-family: 'Copious Sans';
  font-style: regular;
  font-weight: 600;
  src: local('Copious Sans'), url('https://cdn.rawgit.com/krynen/yeokka/cd4f89c7/theme/_shared/fonts/CopiousSans-Medium.ttf');
}
*/
@font-face {
  font-family: 'SeoulNamsan';
  font-style: regular;
  font-weight: 300;
  src: local('서울남산체 L'), url('https://cdn.rawgit.com/krynen/yeokka/cd4f89c7/theme/_shared/fonts/SeoulNamsanL.otf');
}
@font-face {
  font-family: 'SeoulNamsan';
  font-style: regular;
  font-weight: 600;
  src: local('서울남산체 B'), url('https://cdn.rawgit.com/krynen/yeokka/cd4f89c7/theme/_shared/fonts/SeoulNamsanB.otf');
}

* {
  box-sizing: border-box;
}
html {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Copious Sans', 'Poppins', 'ITCAvantGarde', 'Segoe UI', 'SeoulNamsan', sans-serif;
}
body {
  position: absolute;
  bottom: 0;
  margin: 0;
  width: 100%;
}
#log {
  width: 100%;
  display: flex;
  flex-direction: column;
  line-height: 1.5rem;
  word-wrap: break-word;
}
#log > div {
  margin: 0.25rem 0;
  padding: 0;
  width: 100%;
  background: linear-gradient(
    to bottom,
    rgba(12, 21, 47, 0.4),
    rgba(12, 21, 47, 0.2)
  );
  text-shadow: 0 0 0.25rem #000, 0 0 0.25rem #000, 0 0 0.125rem rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}
.meta {
  display: flex;
  position: relative;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="170" height="36"><path fill="none" stroke="#aaa" d="M107.3,18l9,18z"/><path fill="none" stroke="#fff" d="M35,19l14,3l23-9l35,6l20-10l2-9"/><path fill="#fff" d="M32.5,19l2.5,2.5l2.5-2.5L35,16.5L32.5,19z M45.5,22l3.5,3.5l3.5-3.5L49,18.5L45.5,22z M69.5,13l2.5,2.5l2.5-2.5L72,10.5L69.5,13z M102.5,18l4.5,4.5l4.5-4.5l-4.5-4.5L102.5,18z M123.5,9l3.5,3.5l3.5-3.5L127,5.5L123.5,9zM17,9.5l2.5,2.5L22,9.5L19.5,7L17,9.5z"/></svg>'),
  linear-gradient(
    to bottom,
    rgba(12, 21, 47, 0.8),
    rgba(12, 21, 47, 0.6)
  );
  background-position: right top;
  background-repeat: no-repeat;
  padding: 0.375rem 0.375rem;
}
.meta::after {
  display: block;
  content: '';
  position: absolute;
  bottom: -2.25rem;
  right: 0;
  width: 11.5rem;
  height: 2.25rem;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="170" height="36"><polyline fill="none" stroke="#ccc" points="86.3,28 121.3,11 116.3,0"/><path fill="#ccc" d="M118.5,11l2.5,2.5l2.5-2.5L121,8.5L118.5,11z M83.5,28l2.5,2.5l2.5-2.5L86,25.5L83.5,28z M72,8l4,4l4-4l-4-4L72,8z"/></svg>');
  background-position: right top;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 15;
}
.name {
  display: flex;
  flex-grow: 1;
  padding: 0 0 0 0.125rem;
  color: #fff !important;
}
.colon {
  display: none;
}
.badge {
  order: 10;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0 0 0 0.125rem;
  mix-blend-mode: lighten;
  opacity: 0.75;
  overflow: hidden;
}
.message {
  display: block;
  position: relative;
  color: #fff;
  background: linear-gradient(
    to bottom,
    rgba(12, 21, 47, 0.3),
    rgba(12, 21, 47, 0.1)
  );

  padding: 0.25rem 0.5rem;
  max-height: 14rem; /* 텍스트 영역 최대 높이 */
  font-size: 0.9rem;
  z-index: 10;
}
.message::before,
.message::after {
  display: block;
  content: '';
  position: absolute;
  z-index: 11;
}
.message::before {
  right: 1rem;
  top: -0.4375rem;
  width: 0.875rem;
  height: 0.875rem;
  background: hsla(150, 100%, 97%, 1);
  transform: rotate(45deg);
  box-shadow:
   -0.625rem 0.625rem 0.125rem -0.1625rem hsla(30, 100%, 90%, 1),
   -0.625rem 0.625rem 0rem     -0.1625rem hsla(30, 100%, 97%, 1),
    0.4rem  -0.4rem   0.25rem  -0.125rem  hsla(270, 100%, 90%, 1),
    0.4rem  -0.4rem   0rem     -0.125rem  hsla(270, 100%, 97%, 1);
  opacity: 0.95;
}
.message::after {
  top: -0.0625rem;
  right: 0;
  left: 0;
  width: 100%;
  height: 0.125rem;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 3rem,
    rgba(255, 255, 255, 0.8) 25%,
    rgba(255, 255, 255, 0.9) 100%
  );
  box-shadow:
    1rem   0 0.5rem  rgba(255, 255, 255, 0.5),
    2.5rem 0 0.5rem  rgba(255, 255, 255, 0.125),
    4rem   0 0.75rem rgba(255, 255, 255, 0.75);
  mix-blend-mode: color-dodge;
}