67P/hyperchannel

#channel {

  main {
    // TODO move to channel header component
    header {
      display: flex;
      align-items: stretch;
      flex-direction: row;
      justify-content: flex-start;

      h2#channel-name {
        flex: 0 0;
        padding: 0 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        background-color: $background-color-magenta;
        color: #fff;
        transition: color 0.2s;

        &.disconnected {
          color: rgba(255,255,255,0.6);
        }
      }

      p#channel-title {
        flex: 1;
        display: inline;
        line-height: $headerHeight;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 1rem;
        background-color: $background-color-magenta;
        font-style: italic;
        color: rgba(255,255,255,0.6);
        transition: color 0.2s;

        a {
          color: rgba(255,255,255,0.6);
        }

        &:hover {
          color: #fff;

          a {
            color: #fff;
          }
        }

        @include media("<desktop") {
          text-indent: -1000000px;
        }
      }

      nav {
        flex: 0 0 $sidebarWidth;

        a, button {
          @include media(">desktop") {
            background-color: $background-color-yellow;
            &:hover  { background-color: rgba(255,255,255,0.3); }
            &.active { background-color: $background-color-cyan; }
          }

          @include media("<desktop") {
            background-color: $background-color-magenta;
            border-bottom: none;
            transition: all 0.2s;

            &.active {
              border-bottom: 2px solid yellowgreen;
              background-color: $background-color-magenta;
            }
          }
        }
      }
    }

    aside {
      background-color: $background-color-cyan;

      // TODO move to component file when components have been created1
      section {
        .item {
          @include channel_sidebar_item;
        }

        .header {
          margin-bottom: 1.5rem;
        }

        @include media(">desktop") {
          .header {
            button.back {
              display: none;
            }
          }
        }

        @include media("<desktop") {
          .header {
            display: flex;
            padding: 0 1rem;
            line-height: 1.4rem;

            button.back {
              display: inline-block;
              flex: 0 0 1.4rem;
              padding: 0;
              color: #fff;
              background: none;
              border: none;

              svg {
                width: 1.4rem;
                height: 1.4rem;
              }
            }

            h2 {
              display: inline-block;
              flex: 1;
              font-size: 1.4rem;
            }
          }
        }
      }
    }

    footer {
      background-color: #efefef;
    }
  }

  #channel-content {
    a {
      color: #aaa;
      text-decoration: underline;

      &:hover {
        color: #333;
      }
    }

    ul {
      li {
        line-height: 1.5em;

        .chat-me-message {
          .username {
            &::after {
              content: '';
            }
          }
        }
      }
    }
  }

}

@include media("<desktop") {
  .app-container:not(.channel-menu-open) {
    #channel {
      main {
        header {
          nav {
            a, button {
              &.active {
                border-bottom: none;
              }
            }
          }
        }
      }
    }
  }
}