iris/public/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;

$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%;
}

.list {
  background: $bg0;
}

.roomListItem {
  background: $bg0;

  &:hover {
    background: $bg1;
  }

  &.active {
    background: $bg1;
  }
}

.chat, .info, .input {
  background: $bg1;
}

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

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

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

#root {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
}

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

  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;
  }

  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;
  }
}

.main {
  flex: 1 1 auto;
}

.sidebar, .main {
  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;
  }
}

.list {
  div {
    cursor: pointer;
  }
}

.roomListItem {
  height: 2rem + 2.5 * $spacing;
  display: grid;
  grid-template-columns: 2rem + 2*$spacing - 0.2rem auto;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  //border-bottom: 1px solid lighten($bg1, 3);
  padding: 1/4 * $spacing;
  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;
    height: calc(100% - 6px);
    object-fit: cover;
    border: 3px solid lighten($bg0, 10);
    border-radius: 0.4rem;
    margin: 3px;
  }

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

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

.chat {
  padding: 0 $spacing;
  position: relative;
  box-sizing: border-box;

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

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

      #name {
        font-weight: bold;
        padding-left: $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-left: $spacing * 1.2;

        .local {
          color: $bg4;
        }

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

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

        .body:hover {
          border-radius: 0.1rem;
          background-color: hsla(0, 100%, 100%, 0.05);
          transition: 0.1s;
        }
      }
    }
  }
}

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

  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;
  }
}

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

.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;
}