FB messenger-like CSS

fb-messenger-like-css.markdown

FB messenger-like CSS

A Pen by 八雲 千秋 on CodePen.

License.

index.pug

        
section.message
  .center
    .grid-message
      .col-message-received
        .name: p FBK
        .pic: img(src='https://pbs.twimg.com/profile_images/1288431965109067776/sERaPp3S_400x400.jpg')
        .received-container
          .message-received: p こんこんきーつね！
          .message-received: p ホロライブ所属のバーチャル狐、白上フブキじゃい！
        
      .col-message-received
        .name: p マリンリン
        .pic: img(src='https://pbs.twimg.com/profile_images/1258404634885935105/BN7PIVtS_400x400.jpg')
        .received-container
          .message-received: p Ahoy!
          .message-received: p ホロライブ３期生、宝鐘海賊団船長
          .message-received: p 宝鐘マリンですー！

      .col-message-sent
        .message-sent: p ありがとうございます！
        
      .col-message-sent
        .message-sent: p Vtuberさんは絵師さんによる衣装もすごく素敵ですが
        .message-sent: p お二人は自分の衣装についてはいかがでしょう。
        
      .col-message-received
        .name: p FBK
        .pic: img(src='https://pbs.twimg.com/profile_images/1288431965109067776/sERaPp3S_400x400.jpg')
        .received-container
          .message-received: p とにかく可愛い！私はあんまり派手な服とか、胸を強調したりとかそういう系ではなくて、ゆったりとした服が好きだったりするので。特に新しく作ってもらった私服衣装は、めちゃめちゃ気に入っています。
        
      .col-message-received
        .name: p マリンリン
        .pic: img(src='https://pbs.twimg.com/profile_images/1258404634885935105/BN7PIVtS_400x400.jpg')
        .received-container
          .message-received: p 気に入っている所…そうですね、エッチな所です。
        
      .col-message-received
        .name: p FBK
        .pic: img(src='https://pbs.twimg.com/profile_images/1288431965109067776/sERaPp3S_400x400.jpg')
        .received-container
          .message-received: p わかる。お正月衣装もエッチだったね。

      .col-message-sent
        .message-sent: p あはは（笑）

    .message-box: p 輸入訊息並@千秋……

style.css

*,
*::before,
*::after {
  margin: 0;
  border: 0;
  padding: 0;
  word-wrap: break-word;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  text-rendering: optimizeLegibility;
}

body {
  font-family: "PingFang TC", "Helvetica Neue", Helvetica, Arial,
    "source-han-sans-traditional", Arial, "文泉驛正黑", "WenQuanYi Zen Hei",
    "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;
  line-height: 2;
  color: #1c1e21;
}

.name {
  line-height: 1;
  font-size: 0.5em;
  margin-left: 1.5em;
  color: rgba(0, 0, 0, 0.4);
}
.pic {
  width: 1.8em;
  position: absolute;
  bottom: -0.5em;
  left: -2.3em;
}
.pic img {
  width: 100%;
  border-radius: 50%;
}

.message-sent,
.message-received {
  clear: both;
  max-width: 90vw;
}

.message-sent::before,
.message-received::before,
.message-sent::after,
.message-received::after {
  content: "";
  display: table;
}

header,
section,
footer {
  padding: 2em;
}

.center {
  max-width: 80em;
  width: 80vh;
  margin-right: auto;
  margin-left: auto;
}

[class^="grid-"] {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 1em;
  margin-left: 2em;
}

[class^="grid-"] {
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.grid-message > [class^="col-"] {
  margin-top: 1em;
  margin-right: 1em;
  position: relative;
}

.grid-message > [class^="col-"]:nth-child(-n + 1) {
  margin-top: 0;
}

.grid-message > [class^="col-"]:nth-child(1n) {
  margin-top: 2em;
  margin-right: 0;
}

.col-message-sent {
  margin-left: calc(8% + 0.08em) !important;
}

.col-message-received {
  margin-right: calc(8% + 0.08em) !important;
}

.col-message-sent,
.col-message-received {
  width: calc(91.66666667% - 0.08235677em);
}

.message-sent,
.message-received {
  margin-top: 0.0625em;
  margin-bottom: 0.0625em;
  padding: 0.3em 0.8em;
}

.message-sent p,
.message-received p {
  margin: 0;
  line-height: 1.5;
}

.message-sent {
  float: right;
  color: white;
  background-color: dodgerblue;
  border-radius: 1em 0.25em 0.25em 1em;
}

.message-sent:first-child {
  border-radius: 1em 1em 0.25em 1em;
}

.message-sent:last-child {
  border-radius: 1em 0.25em 1em 1em;
}

.message-sent:only-child {
  border-radius: 1em;
}

.message-received {
  float: left;
  color: #000;
  background-color: #f1f0f0;
  border-radius: 0.25em 1em 1em 0.25em;
}

.message-received:first-child {
  border-radius: 1em 1em 1em 0.25em;
}

.message-received:last-child {
  border-radius: 0.25em 1em 1em 1em;
}

.message-received:only-child {
  border-radius: 1em;
}

.message-box {
  margin-top: 1em;
  padding: 1em 0.5em;
  border-top-width: 0.0625em;
  border-style: solid;
  border-color: lightgray;
  color: darkgray;
}

.message-box p {
  margin: 0;
  line-height: 1.5;
}

.col-message-sent {
  margin-top: 0.25em !important;
}

.message {
  min-height: 53.33203125em;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}