Created
April 28, 2014 03:11
-
-
Save simurai/11360838 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // 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% ); | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment