iris/src/scss/style.scss

$bg:  hsla(228, 12%, 12%, 1);
$bg0: hsla(228, 12%, 15%, 1);
$bg1: hsla(228, 12%, 18%, 1);
$bg2: hsla(228, 12%, 30%, 1);
$bg3: hsla(228, 12%, 36%, 1);
$bg4: hsla(228, 12%, 60%, 1);
$bg5: hsla(228, 12%, 100%, 1);

$red: #CC6666;
$amber: #DE935F;
$yellow: #F0C674;
$green: #B5BD68;
$cyan: #8ABEB7;
$blue: #81A2BE;
$purple: #B294BB;
$brown: #A3685A;

$accent: $blue;
$hover: hsla(0, 100%, 100%, 0.05);

$spacing: 0.7rem;
$borderwidth: 0.2rem;

@font-face {
  font-family: "Open Sans";
  font-weight: normal;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(OpenSans-Regular.ttf) format("truetype");
}

@font-face {
  font-family: "Open Sans";
  font-weight: bold;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(OpenSans-Bold.ttf) format("truetype");
}

html, body {
  margin: 0;
  padding: 0;
  background: $bg;
  color: white;
  font-family: "Open Sans";
  font-size: 110%;
  line-height: 1em;
  height: 100vh;
  width: 100vw;
  position: absolute;
}

.list {
  background: $bg0;
}

.roomListItem {
  background: $bg0;

  &:hover {
    background: $bg1;
  }

  &.active {
    background: $bg1;
  }
}

.chat, .info, .input, .sidebar .filter {
  background: $bg1;
  border-color: $bg1;
}

.input, .info {
  background: $bg2;
}

input {
  // override gtk styling
  font-family: "Open Sans", sans-serif;
}

body {
  height: 100vh;
  display: flex;
}

.loginwrapper {
  margin-top: -15rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  grid-column-start: span 2;

  input, label, button, span {
    font-size: 140%;
  }

  img {
    height: 15rem;
    width: 15rem;
    text-align: center;
    align-self: center;
  }
}

.errorMessage {
  color: $red;
  font-size: 140%;
}

.login {
  align-self: center;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;

  $grey: #999;

  label, input, button, span {
    margin: 0.3em;
    padding: 0.3em;
    line-height: 140%;
  }

  label {
    background: $blue;
    justify-self: left;
  }

  label.inactive {
    background: $grey;
  }

  label.error {
    background: $red;

    & ~ input, & ~ span {
      border-color: $red;
    }
  }

  label.validated {
    background: $green;

    & ~ input, & ~ span {
      border-color: $green;
    }
  }

  span {
    display: inline-block;
    border: 0.05rem solid $grey;
  }

  input {
    border: 0.1rem solid $blue;
    background: transparent;
    color: white;
  }

  button {
    grid-column-start: 2;
    background: $blue;
    color: white;
    justify-self: right;
    border: none;
  }
}

#root {
  height: 100%;
  width: 100%;
  position: relative;
  display: grid;
  box-sizing: border-box;
  justify-content: center;
  grid-template-columns: 15% 85%;
}

.sidebar, .main {
  position: relative;
  box-sizing: border-box;
  height: calc(100% - 2*$spacing);
  width: calc(100% - 2*$spacing);
  overflow-y: auto;
  margin: $spacing;
  display: flex;
  flex-direction: column;

  & > div:nth-child(2) { // Room list & Chat
    flex: 1 1 auto;
    overflow-y: auto;
  }
}

.sidebar {
  margin-right: 0;
  flex: 0 0 15vw;
  max-width: 15vw;

  .filter {
    border: none;
    border-bottom: $borderwidth solid transparent;
    width: 100%;
    box-sizing: border-box;
    padding: $spacing;
    color: white;
    font-size: 1rem;
    margin: 0;
    font-weight: bold;
  }
}

.main {
  flex: 1 1 auto;
}

.list {
  div {
    cursor: pointer;
  }
}

.roomListItem {
  height: 2rem + 2.5 * $spacing;
  display: grid;
  grid-template-columns: 4.2rem auto;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  transition: 0.2s;

  &.active {
    #avatar, #name {
      transition: 0.2s;
    }

    #avatar {
      border: 3px solid $accent;
      transform: rotate(-5deg);
    }

    #name {
      color: $accent;
      font-weight: bold;
    }
  }

  #avatar {
    box-sizing: border-box;
    justify-self: center;
    height: calc(100% - 0.5rem);
    width: 80%;
    object-fit: cover;
    border: 3px solid lighten($bg0, 10);
    border-radius: 0.4rem;
  }

  #name {
    font-size: 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: $spacing;
    padding-left: 0;
  }
}

.info {
  padding: $spacing;
  color: $accent;
  font-size: 1rem;
  font-weight: bold;
  border-bottom: $borderwidth solid transparent;
  box-sizing: border-box;
}

.chat {
  padding: 0 $spacing;
  box-sizing: border-box;
  word-wrap: anywhere;

  .events {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100%;

    .paginateBackwards {
      align-self: center;
      border: 0.2rem solid $bg3;
      background: $bg3;
      color: $bg5;
      border-radius: 0.2rem;
      padding: 0.4rem;
      cursor: pointer;
      margin-top: 1rem;
    }

    .eventGroup {
      padding-top: $spacing;
      display: grid;
      grid-template-columns: 3rem auto;
      grid-template-areas: "avatar content";
      margin-bottom: $spacing/2;

      #avatar {
        height: 3rem;
        width: 3rem;
        object-fit: cover;

        box-sizing: border-box;
        object-fit: cover;
        border: 0.2rem solid lighten($bg0, 10);

        position: sticky;
        top: $spacing;
        //align-self: flex-end;
        //bottom: $spacing;
      }

      .col {
        grid-area: content;
        padding: 0 $spacing/2;

        .user {
          font-weight: bold;
          padding-left: $spacing/2;
        }

        h1, h2, h3, h4, h5, h6 {
          margin: 0;
        }

        .reply + .event {
          margin-bottom: $spacing;
        }


        .event {
          padding: $spacing/8 $spacing/2;

          .reply {
            border-left: $borderwidth solid $blue;
            padding-left: 1/2 * $spacing;
            margin-top: $spacing/2;

            .user {
              padding: 0;
            }
          }

          &:nth-child(2) .reply {
            margin-top: 0;
          }

          .body {
            padding: $spacing/4 0;
            white-space: pre-wrap;

            img {
              max-height: 40vh;
              max-width: 90%;
              object-fit: contain;
            }
          }

          code {
            font-size: 1rem
          }

          //border: 1px solid red;

          &:hover {
            border-radius: 0.1rem;
            background: $hover;
            transition: 0.1s;
          }

          & .local {
            color: $bg4;
          }
        }
      }
    }
  }
}

.input {
  display: flex;
  flex-direction: column;
  border-top: $borderwidth solid transparent;

  .replyEvent, .imgPreview {
    border-bottom: $borderwidth/2 solid $bg3;
    padding: $spacing/2 $spacing;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .imgPreview {
    object-fit: cover;
    display: flex;
  }

  .imgPreview div {
    height: 5rem;
    width: 5rem;
    object-fit: cover;
    margin: 2px;
    margin-right: $spacing;
    position: relative;

    img {
      height: 5rem;
      width: 5rem;
      object-fit: cover;
    }

    span {
      position: absolute;
      top: 2px;
      right: 2px;
    }
  }

  .fileUpload {
    input {
      display: none;
    }
    label img {
      height: 1.5em;
    }
  }

  .content {
    display: flex;

    textarea {
      background: transparent;
      box-sizing: border-box;
      flex: 1 1 auto;
      padding: $spacing;
      font-size: 1.2rem;
      border: none;

      resize: none;
      overflow: hidden;
      overflow-y: auto;
      outline: none;
      max-height: 150px;
    }

    .fileUpload {
      flex: 0 0 auto;
      display: inline-block;
      margin: $spacing;
      align-self: center;
      cursor: pointer;
    }
  }
}

.noselect {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.fg-palet-red {
  color: $red;
}

.fg-palet-green {
  color: $green;
}

.fg-palet-yellow {
  color: $yellow;
}

.fg-palet-blue {
  color: $blue;
}

.fg-palet-purple {
  color: $purple;
}

.fg-palet-cyan {
  color: $cyan;
}

.spinner {
  align-self: center;
  text-align: center;
}

.spinner > div {
  width: 1rem;
  height: 1rem;
  margin: 0.2rem;
  background-color: white;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}