67P/hyperchannel

@import "colors";
@import "mixins";
@import "vendor/include_media";

@tailwind base;
@tailwind components;
@tailwind utilities;

$headerHeight: 42px;
$sidebarWidth: 168px;
$sidebarWideWidth: 320px;
$breakpoints: (desktop: 900px);

*:hover, *:active, *:focus {
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-tap-highlight-color: transparent;
}

button::-moz-focus-inner {
  border: 0;
}

html, body {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}

body {
  color: #fff;
  background-image: linear-gradient(90deg, $background-color-cyan 0, rgba(13,79,153,0.8) 100%),
  // background-image: linear-gradient(90deg, rgba(255,0,255,0.2) 0, rgba(13,79,153,0.8) 100%),
                    url('/img/bg.webp');
  background-repeat: none;

  @include media(">desktop") {
    background-size: cover;
  }

  &.app-container {
    background-image: url('/img/bg.webp');
  }
}

h1, h2, h3, h4, h5 {
  font-weight: normal;
  font-size: 1rem;
}

a {
  color: #fff;
  text-decoration: none;
}

input, button {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
}

header {
  &#sitename {
    background-color: $background-color-yellow;
  }

  a {
    text-decoration: underline;
  }
}

#global {
  .main {
    background-color: $background-color-cyan;
  }

  footer {
    background-color: $background-color-cyan;
  }
}

.no-messages {
  margin-top: 10px;
}

@layer components {
  // TODO create actual nav-tabs ember components, move directives to templates
  nav.hc-tabs {
    a, button {
      @apply border-transparent text-neutral-500
             hover:text-neutral-800 hover:border-neutral-300
             w-1/2 py-4 px-1 text-center border-b-2;
    }

    a.active, button.active {
      @apply border-blue-600 text-blue-600;
    }
  }

  a.hc-sidebar-item {
    width: 168px;
    @apply block px-4 h-7 leading-7
           overflow-hidden overflow-ellipsis
           hover:bg-white hover:bg-opacity-20;

    svg {
      @apply inline-block h-4 w-4 -mt-0.5;
    }
  }
}


@import "layout";
@import "buttons";
@import "forms";
@import "components/channel-nav";
@import "components/channel-container";
@import "components/message-chat";
@import "components/message-input";
@import "components/notification-topic-change";
@import "space";
@import "modals";