iris/public/scss/style.scss

$bg:  #1b1b1b;
$bg0: #2c2c2c;
$bg1: #353535;
$bg2: #4b4b4b;
$bg3: #888888;
$bg4: #ebebeb;
$bg5: #ffffff;

$red: #e15151;
$green: #75e151;
$yellow: #e1da51;
$amber: #e18151;
$blue: #5294e2;
$purple: #df51e1;
$cyan: #51dfe1;

$spacing: 0.7rem;

@font-face {
  font-family: "Roboto Mono";
  src: url(RobotoMono-Regular.ttf) format("truetype");
}

@font-face {
  font-family: "Roboto Mono Bold";
  src: url(RobotoMono-Bold.ttf) format("truetype");
}

html, body {
  margin: 0;
  padding: 0;
  background: $bg;
  color: white;
  font-family: "Roboto Mono", monospace;
}

input {
  // override gtk styling
  font-family: "Roboto Mono", monospace;
}

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 {
    margin-bottom: $spacing;

    input {
      width: 100%;
      box-sizing: border-box;
      padding: $spacing;
      background: $bg2;
      border: none;
      color: white;
      font-size: 1rem;
    }
  }
}

.list {
  background: $bg0;

  div {
    cursor: pointer;
  }
}

.roomListItem {
  height: 2rem + 2* $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);
  transition: 0.2s;
  background: $bg0;

  &:hover {
    background: $bg1;
  }

  &.active {
    background: $bg1;

    #avatar, #name {
      transition: 0.2s;
    }

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

    #name {
      color: $amber;
      font-weight: bold;
      font-family: "Roboto Mono Bold", monospace;
    }
  }

  #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 {
  background: $bg1;
  padding: $spacing;
  color: $amber;
  font-weight: bold;
  font-family: "Roboto Mono Bold", monospace;
}

.chat {
  padding: $spacing;
  background: $bg0;
  position: relative;

  .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;
        font-family: "Roboto Bold";
        margin-bottom: 0.3 * $spacing;
      }

      #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/4 - 0.2rem;
        //align-self: flex-end;
        //bottom: $spacing/4 - 0.2rem;
      }

      .col {
        grid-area: content;
        padding-left: $spacing * 1.2;

        .body {
          /* debug */
          //border: 1px solid $red;
          padding: $spacing/4;

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

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

.input {
  background: $bg1;
  display: flex;

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

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