message.mcss

Message {
  display: flex
  flex-direction: column
  box-shadow: #dadada 1px 2px 8px
  border: 1px solid #f5f5f5
  background: white
  position: relative
  font-size: 120%
  flex-shrink: 0

  (highlight) {
    background-color: yellow
  }

  :focus {
    z-index: 1
  }

  -data {
    header {
      div.main {
        font-size: 80%
        a.avatar {
          img {
            width: 25px
          }
        }
      }
    }
    (pre) {
      overflow: auto
      max-height: 200px
    }
  }

  -mini {
    header {
      margin-bottom: 15px
    }
  }

  -reply {
    font-size: 100%
    header {
      div.main {
        a.avatar {
          img {
            width: 30px
          }
        }
      }
    }
  }

  header {
    margin: 15px 15px
    margin-bottom: 5px;
    display: flex

    div.mini {
      flex: 1
    }

    div.main {
      display: flex
      flex: 1

      a.avatar {
        img {
          width: 50px
        }
      }

      div.main {
        div.name {
          font-size: 120%
          a {
            color: #444
            font-weight: bold
          }
        }
        div.meta {
          font-size: 90%
        }
        margin-left: 10px
      }

      div.meta {

      }
    }

    div.meta {

      em {
        display: inline-block
        padding: 4px
      }

      a.channel {
        display: inline-block
        padding: 4px
      }

      span.likes {
        color: #ffffff;
        background: linear-gradient(45deg, #859c88, #87d47d);
        padding: 5px 8px;
        border-radius: 10px;
        display: inline-block;
        vertical-align: top;
        margin: -2px 0;
      }

      span.private {
        display: inline-block;
        margin: -3px -3px -3px 4px;
        border: 4px solid #525050;
        position: relative;

        a {
          display: inline-block

          img {
            margin: 0
            vertical-align: bottom
            border: none
          }
        }

        :after {
          content: 'private';
          position: absolute;
          background: #525050;
          bottom: 0;
          left: -1px;
          font-size: 10px;
          padding: 2px 4px 0 2px;
          border-top-right-radius: 5px;
          color: white;
          font-weight: bold;
          pointer-events: none;
          white-space: nowrap
        }
      }
    }
  }

  section {
    margin: 0 15px
    (img) {
      max-width: 100%
    }
  }

  a.backlink {
    display: block;
    border-top: 1px solid #e2e0e0;
    margin: 0 -1px;
    padding: 10px 15px;
    background: #f3f2f2;
    border-bottom: 1px solid #d1d0d0;
    color: #8f8f8f;
    margin-top: -1px;
    font-size: 9pt;

    :hover {
      text-decoration: none
      color: #777
    }
  }

  footer {
    margin: 10px 10px;
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: 5px;
    padding-left: 5px;

    div.actions {
      a {
        margin-right: 10px;
        color: #9a9a9a;
        font-weight: bold;
        padding: 5px

        :hover {
          background: #cbeeff;
          color: #3b7ba2;
          text-decoration: none;
          border-color: #8eafc1;
        }
      }
    }
  }
}