Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.5)
// Compass (v)
// ----

@import "compass";

/* Theme - Night ------------------------------------------- */

$night-color: hsl(216, 8%, 16%);
$night-color-accent: hsl(50, 100%, 50%);


.theme-picker-item[data-theme="theme--night"] {
  background-color: $night-color;
}



/* Name space ------------------------------------------- */

html {
  background-color: $night-color;
}


/* scrollbar ---------------------------------------------------- */

::-webkit-scrollbar,
::-webkit-scrollbar {
  background-color: darken( $night-color, 5% );
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
  background-color: lighten( $night-color, 5% );
}


.button {
  text-shadow: none;
  color: hsl(0,0%,60%);
  border-color: hsla(0,0%,0%,.4);
  background-color: lighten( $night-color, 10% );
  @include background-image( linear-gradient( top, hsla(0,0%,100%,.05), hsla(0,0%,100%,0) ));
  box-shadow: none;
  &:hover {
    background-color: lighten( $night-color, 8% );
  }
  &:active {
    background-color: darken( $night-color, 5% );;
    box-shadow: none;
  }
}


.button--danger {
  color: hsl(0, 100%, 92%);
  text-shadow: 0 1px 0 hsla(0, 0%, 0%, 0.1);
  border: 1px solid hsla(0, 100%, 35%, 0.2);
  box-shadow: none;
  background-color: red;
  @include background-image( linear-gradient(top, hsla(0, 80%, 60%, 0.5), hsla(0, 80%, 36%, 0.5) ));
  &:hover {
    background-color: hsl(0,100%,60%);
  }
  &:active {
    background-color: hsl(0,100%,30%);
    box-shadow: none;
  }
}

.tooltip {
  border-color: hsla(0,0%,0%,.3);
  background-color: lighten( $night-color, 5% );
}


/* scroll down Button ---------------------------------------------------- */

.button-down {
  background-color: lighten( $night-color, 10% );
  &.show.new {
    box-shadow: 0 0 0 2px $night-color-accent;
  }
}


.input-text {
  color: hsl(0,0%,80%);
  border-color: hsla(0,0%,0%,.3);
  background-color: hsla(0,0%,0%,.2);
  box-shadow: 0 1px 1px hsla(0,0%,100%,.1);
  &::-webkit-input-placeholder { color: hsla(0,0%,100%,.3); }
  &::-moz-placeholder { color: hsla(0,0%,100%,.3); }
  &:-ms-input-placeholder { color: hsla(0,0%,100%,.3); }
}


/* Header ------------------------------------------- */

.header-bar {
  background-color: lighten( $night-color, 15% );
}

.header-icon {
  background-color: hsla(0,0%,0%,.2);
  &:hover {
    background-color: hsla(0,0%,0%,.1);
  }
  &:active {
    background-color: hsla(0,0%,0%,.3);
  }
}

.header-channel {
	color: hsla(0,0%,100%,.5);
	text-shadow: none;
}

/* Chat ------------------------------------------- */

.chat {
  color: hsl(0,0%,80%);
  text-shadow: none;
}

.post-name {
  color: hsla(0, 0%, 100%, 0.3);
  text-shadow: none;
}


.post {
  border-color: hsla(0,0%,0%,.3);
  background-color: lighten( $night-color, 5% );
  &.me {
    text-shadow: none;
    background-color: lighten( $night-color, 3% );
  }
}

.post-avatar {
  box-shadow: none;
}

.post-avatar--troll {
  color: hsla(0, 0%, 100%, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

.time {
  color: hsla(0, 0%, 100%, 0.2);
}

.post-time-dot {
  background-color: hsl(0, 0%, 25%);
}

.post-message {
  &.deleted,
  &.expired {
    color: hsl(0,0%,35%);
  }
}

.post-message.unread .post-time-dot {
  background-color: $night-color-accent;
}

.post-time-tag {
  border-color: hsla(0,0%,0%,.4);
  background: hsl(0, 0%, 12%);
}


/* Markdown -------------- */

.chat code,
.chat pre {
  color: hsl(50, 30%, 60%);
  border: 1px solid hsla(0, 0%, 0%, .2);
  background-color: hsl(50, 10%, 15%);
}

.chat pre code {
  border: none;
}

.chat blockquote {
  color: hsl(208, 90%, 70%);
  border: none;
  border-left: 4px solid hsl(208, 90%, 60%);
  background: lighten( $night-color, 10% );
}

.chat hr {
  border-color: hsla(0,0%,100%,.1);
}



/* Footer ------------------------------------------- */

.message-avatar {
  box-shadow: none;
}

.message-input {
  color: #fff;
  border-color: hsla(0,0%,0%,.3);
  background-color: hsla(0,0%,0%,.15);
  box-shadow: inset 0 1px 3px hsla(0,0%,0%,.06), 0 1px 1px hsla(0,0%,100%,.1);
  -webkit-font-smoothing: antialiased;
  &:hover {
    border-color: hsla(0,0%,0%,.5);
  }
  &:focus {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
  }
  &::-webkit-input-placeholder { color: hsla(0,0%,100%,.3); }
  &::-moz-placeholder { color: hsla(0,0%,100%,.3); }
  &:-ms-input-placeholder { color: hsla(0,0%,100%,.3); }
}

.join {
  color: hsl(0,0%,40%);
  border-color: hsla(0,0%,0%,.3);
  background-color: hsla(0,0%,0%,.2);
}

.join-hl {
  color: hsl(0,0%,60%);
}

.join-hint {
  color: hsl(0,0%,30%);
}

.footer-title,
.footer-description {
  color: hsl(0,0%,80%);
}



.typePicker-item {
  color: hsl(0,0%,80%);
  border: 2px solid hsla(0,0%,100%,.1);
  background: hsla(0,0%,0%,.2);
  &:hover {
    border-color: hsl(0,0%,50%);
  }
  &:active {
    border-color: hsla(0,0%,0%,0);
  }
  & strong {
    color: hsl(0, 0%, 100%);
  }
  & h2 {
    color: hsl(0, 0%, 80%);
  }
  & h2 > em {
    color: hsl(0,0%,100%);
  }
}



/* Side ------------------------------------------- */

.aside {
  background-color: $night-color;
}

.menu-item {
  border-color: hsla(0,0%,0%,.4);
  background-color: lighten( $night-color, 10% );
  &:active {
    box-shadow: none;
  }
  &.isOn {
    border: 1px solid hsl(0, 0%, 15%);
    border-left: none;
    box-shadow: none;
    background-color: lighten( $night-color, 2% );
  }
}

.participants {
  color: hsl(0,0%,80%);
  border-color: hsla(0,0%,0%,.3);
  background-color: lighten( $night-color, 5% );
}

.participant-list-item {
  text-shadow: none;
}

.counter {
  color: hsl(0,0%,40%);
  border-color: hsla(0,0%,0%,.2);
  background-color: lighten( $night-color, 2% );
}


/* Popup */

.popup-box {
  color: hsl(0,0%,60%);
  text-shadow: none;
}

.popup-header {
  border-color: hsla(0,0%,0%,.3);
  background-color: lighten( $night-color, 5% );
}

.popup-header-title {
  color: hsl(0,0%,80%);
}

.popup-content {
  background-color: $night-color;
}

.popup-link {
  text-shadow: none;
  color: hsl(0,0%,50%);
  border-color: hsla(0,0%,0%,.3);
  background: hsla(0,0%,0%,.2);
}

.popup-footer {
  color: hsl(0,0%,50%);
  border-color: hsla(0,0%,100%,.06);
  background-color: lighten( $night-color, 5% );
}

SassMeister-output.css

/* Theme - Night ------------------------------------------- */
.theme-picker-item[data-theme="theme--night"] {
  background-color: #26282c;
}

/* Name space ------------------------------------------- */
html {
  background-color: #26282c;
}

/* scrollbar ---------------------------------------------------- */
::-webkit-scrollbar,
::-webkit-scrollbar {
  background-color: #1a1c1e;
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
  background-color: #31353a;
}

.button {
  text-shadow: none;
  color: #999999;
  border-color: rgba(0, 0, 0, 0.4);
  background-color: #3d4148;
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  box-shadow: none;
}
.button:hover {
  background-color: #383c42;
}
.button:active {
  background-color: #1a1c1e;
  box-shadow: none;
}

.button--danger {
  color: #ffd6d6;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(179, 0, 0, 0.2);
  box-shadow: none;
  background-color: red;
  background-image: -moz-linear-gradient(top, rgba(235, 71, 71, 0.5), rgba(165, 18, 18, 0.5));
  background-image: -webkit-linear-gradient(top, rgba(235, 71, 71, 0.5), rgba(165, 18, 18, 0.5));
  background-image: linear-gradient(to bottom, rgba(235, 71, 71, 0.5), rgba(165, 18, 18, 0.5));
}
.button--danger:hover {
  background-color: #ff3333;
}
.button--danger:active {
  background-color: #990000;
  box-shadow: none;
}

.tooltip {
  border-color: rgba(0, 0, 0, 0.3);
  background-color: #31353a;
}

/* scroll down Button ---------------------------------------------------- */
.button-down {
  background-color: #3d4148;
}
.button-down.show.new {
  box-shadow: 0 0 0 2px #ffd500;
}

.input-text {
  color: #cccccc;
  border-color: rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);
}
.input-text::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.input-text::-moz-placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.input-text:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Header ------------------------------------------- */
.header-bar {
  background-color: #494e55;
}

.header-icon {
  background-color: rgba(0, 0, 0, 0.2);
}
.header-icon:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.header-icon:active {
  background-color: rgba(0, 0, 0, 0.3);
}

.header-channel {
  color: rgba(255, 255, 255, 0.5);
  text-shadow: none;
}

/* Chat ------------------------------------------- */
.chat {
  color: #cccccc;
  text-shadow: none;
}

.post-name {
  color: rgba(255, 255, 255, 0.3);
  text-shadow: none;
}

.post {
  border-color: rgba(0, 0, 0, 0.3);
  background-color: #31353a;
}
.post.me {
  text-shadow: none;
  background-color: #2d3034;
}

.post-avatar {
  box-shadow: none;
}

.post-avatar--troll {
  color: rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

.time {
  color: rgba(255, 255, 255, 0.2);
}

.post-time-dot {
  background-color: #404040;
}

.post-message.deleted, .post-message.expired {
  color: #595959;
}

.post-message.unread .post-time-dot {
  background-color: #ffd500;
}

.post-time-tag {
  border-color: rgba(0, 0, 0, 0.4);
  background: #1f1f1f;
}

/* Markdown -------------- */
.chat code,
.chat pre {
  color: #b8ad7a;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: #2a2922;
}

.chat pre code {
  border: none;
}

.chat blockquote {
  color: #6eb7f7;
  border: none;
  border-left: 4px solid #3d9ff5;
  background: #3d4148;
}

.chat hr {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Footer ------------------------------------------- */
.message-avatar {
  box-shadow: none;
}

.message-input {
  color: #fff;
  border-color: rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(255, 255, 255, 0.1);
  -webkit-font-smoothing: antialiased;
}
.message-input:hover {
  border-color: rgba(0, 0, 0, 0.5);
}
.message-input:focus {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
}
.message-input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.message-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.message-input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.join {
  color: #666666;
  border-color: rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.2);
}

.join-hl {
  color: #999999;
}

.join-hint {
  color: #4d4d4d;
}

.footer-title,
.footer-description {
  color: #cccccc;
}

.typePicker-item {
  color: #cccccc;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}
.typePicker-item:hover {
  border-color: gray;
}
.typePicker-item:active {
  border-color: transparent;
}
.typePicker-item strong {
  color: white;
}
.typePicker-item h2 {
  color: #cccccc;
}
.typePicker-item h2 > em {
  color: white;
}

/* Side ------------------------------------------- */
.aside {
  background-color: #26282c;
}

.menu-item {
  border-color: rgba(0, 0, 0, 0.4);
  background-color: #3d4148;
}
.menu-item:active {
  box-shadow: none;
}
.menu-item.isOn {
  border: 1px solid #262626;
  border-left: none;
  box-shadow: none;
  background-color: #2a2d32;
}

.participants {
  color: #cccccc;
  border-color: rgba(0, 0, 0, 0.3);
  background-color: #31353a;
}

.participant-list-item {
  text-shadow: none;
}

.counter {
  color: #666666;
  border-color: rgba(0, 0, 0, 0.2);
  background-color: #2a2d32;
}

/* Popup */
.popup-box {
  color: #999999;
  text-shadow: none;
}

.popup-header {
  border-color: rgba(0, 0, 0, 0.3);
  background-color: #31353a;
}

.popup-header-title {
  color: #cccccc;
}

.popup-content {
  background-color: #26282c;
}

.popup-link {
  text-shadow: none;
  color: gray;
  border-color: rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.2);
}

.popup-footer {
  color: gray;
  border-color: rgba(255, 255, 255, 0.06);
  background-color: #31353a;
}