Created
June 6, 2013 15:14
-
-
Save Zyber17/5722287 to your computer and use it in GitHub Desktop.
I liked what Nate had sone for the most part (https://alpha.app.net/nkb/post/6449416), but wanted to make a few changes to best suit my style.
This file contains 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
| /* basic text and background properties */ | |
| /* ------------------------------------------------------------------------------------------ */ | |
| body { | |
| -webkit-user-select: none; | |
| word-wrap: break-word; | |
| margin:0; | |
| padding: 0; | |
| border: 0; | |
| widows: 100%; | |
| overflow-x: hidden; | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: 200; | |
| -webkit-font-smoothing: subpixel-antialiased; | |
| text-rendering:optimizeLegibility; | |
| -webkit-user-select: none; | |
| color:rgba(55,55,60,1.0); | |
| cursor: default; | |
| } | |
| @media only screen and (-webkit-device-pixel-ratio: 2){ | |
| body {font-family: "Proxima Nova", "Helvetica Neue";} | |
| } | |
| .filler { | |
| display:block; | |
| position:relative; | |
| width:100%; | |
| height:1500px; | |
| } | |
| .separator { | |
| display:block; | |
| position:relative; | |
| padding:5px; | |
| background-color:hsla(0, 0%, 30%, 1.0); | |
| color:hsla(0, 0%, 85%, 1.0); | |
| text-align:center; | |
| font-size: 0.9em; | |
| line-height: 1.25em; | |
| text-shadow: 0px 1px 1px hsla(0, 0%, 0%, 1.0); | |
| } | |
| a { text-decoration: none;} | |
| .post, .user, .channel { | |
| display:block; | |
| position:relative; | |
| margin:0; | |
| padding:0px 0px; | |
| border-top:1px solid hsla(0, 0%, 99%, 1.0); | |
| border-bottom:1px solid hsla(0, 0%, 90%, 1.0); | |
| background-color:hsla(0, 0%, 97%, 1.0); | |
| } | |
| .post.you { | |
| background-image: | |
| -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(105, 0%, 94%, 1.0)), | |
| to(hsla(105, 0%, 94%, 1.0)) | |
| ); | |
| } | |
| .post.mentionsYou { | |
| background-image: | |
| -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(105, 0%, 90%, 1.0)), | |
| to(hsla(105, 0%, 90%, 1.0)) | |
| ); | |
| } | |
| /*.post.selected, post.me.selected, .channel.selected { | |
| border-top: 1px solid hsla(205, 10%, 60%, 1.0); | |
| border-bottom: 1px solid hsla(205, 10%, 80%, 1.0); | |
| background-image: | |
| -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(205, 10%, 85%, 1.0)), | |
| to(hsla(205, 20%, 95%, 1.0)) | |
| ); | |
| }*/ | |
| .post.new { | |
| background-color:rgba(0, 250, 250, 1.0); | |
| } | |
| .inner { | |
| margin:15px 15px 0px 15px; | |
| } | |
| /* ------------------------------------------------------------------------------------------ */ | |
| /* starred and reposted ribbons */ | |
| /* ------------------------------------------------------------------------------------------ */ | |
| @media only screen and (-webkit-device-pixel-ratio: 1){ | |
| .post.starred .star-ribbon { background: url("starred.png") no-repeat center; } | |
| .post.reposted .repost-ribbon { background: url("reposted.png") no-repeat center; } | |
| } | |
| @media only screen and (-webkit-device-pixel-ratio: 2){ | |
| .post.starred .star-ribbon { background: url("starred@2x.png") no-repeat center; } | |
| .post.reposted .repost-ribbon { background: url("reposted@2x.png") no-repeat center; } | |
| } | |
| .post.starred .star-ribbon, .post.reposted .repost-ribbon { | |
| display:hidden; | |
| position:absolute; | |
| top:-1px; | |
| width:40px; | |
| height:40px; | |
| z-index:100; | |
| background-size: 40px 40px; | |
| } | |
| .star-ribbon { left: 0px;} | |
| .repost-ribbon { right: 0px;} | |
| .post.starred .star-ribbon, .post.reposted .repost-ribbon { display:block; } | |
| /* ------------------------------------------------------------------------------------------ */ | |
| /* buttons */ | |
| /* ------------------------------------------------------------------------------------------ */ | |
| .buttons { | |
| display:block; | |
| position:absolute; | |
| top:7px; | |
| right:12; | |
| margin:0px; | |
| width:90px; | |
| height: 25px; | |
| z-index:101; | |
| } | |
| .button { | |
| display:block; | |
| position:absolute; | |
| margin:0px; | |
| width:30px; | |
| height: 25px; | |
| background-image:none; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| } | |
| .button.reply {right:60px;background-size: 20px 16px;} | |
| .button.star {right:30px;background-size: 16px 16px;} | |
| .button.repost {right: 0px;background-size: 20px 16px;} | |
| @media only screen and (-webkit-device-pixel-ratio: 1){ | |
| .button.reply {background-image: url("post_reply.png");} | |
| .button.star {background-image: url("post_star.png");} | |
| .button.repost {background-image: url("post_repost.png");} | |
| } | |
| @media only screen and (-webkit-device-pixel-ratio: 2){ | |
| .button.reply {background-image: url("post_reply@2x.png");} | |
| .button.star {background-image: url("post_star@2x.png");} | |
| .button.repost {background-image: url("post_repost@2x.png");} | |
| } | |
| .button { opacity:0.5; -webkit-transition: opacity 200ms;} | |
| .button:hover { opacity:1.0; -webkit-transition: opacity 0ms;} | |
| .post .buttons { opacity:0.0; -webkit-transition: opacity 0ms;} | |
| .post:hover .buttons { opacity:1.0; -webkit-transition: opacity 0ms;} | |
| .post.selected .buttons { opacity:1.0; -webkit-transition: opacity 0ms;} | |
| /* ------------------------------------------------------------------------------------------ */ | |
| /* date */ | |
| /* ------------------------------------------------------------------------------------------ */ | |
| .date { | |
| display:block; | |
| position:absolute; | |
| top:0px; | |
| right:0px; | |
| text-align:right; | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-size: 12; | |
| font-weight: 200; | |
| color: rgba(100, 100, 100, 1.0); | |
| } | |
| .post .date { opacity:1.0; -webkit-transition: opacity 0ms;} | |
| .post:hover .date { opacity:0.0; -webkit-transition: opacity 0ms;} | |
| .post.selected .date { opacity:0.0; -webkit-transition: opacity 0ms;} | |
| /* ------------------------------------------------------------------------------------------ */ | |
| /* user image */ | |
| /* ------------------------------------------------------------------------------------------ */ | |
| .user-image { | |
| position:absolute; | |
| top:0px; | |
| left:0px; | |
| width:50px; | |
| height: 50px; | |
| border-radius: 4px; | |
| margin:16px; | |
| background-color:white; | |
| background-size:50px 50px; | |
| } | |
| .user-image-border { | |
| display:block; | |
| position:absolute; | |
| top:0px; | |
| left:0px; | |
| width:50px; | |
| height: 50px; | |
| margin:15px; | |
| border:1px solid rgba(255, 255, 255, 0.5); | |
| border-radius: 5px; | |
| -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20); | |
| } | |
| /* ------------------------------------------------------------------------------------------ */ | |
| /* embedded image */ | |
| /* ------------------------------------------------------------------------------------------ */ | |
| .embedded-image { | |
| display:none; | |
| position:relative; | |
| float:right; | |
| margin: 2px 2px 0px 15px; | |
| background-color:white; | |
| background-size: cover; | |
| background-position:center; | |
| background-repeat: no-repeat; | |
| cursor:pointer; | |
| width: 70px; | |
| height: 70px; | |
| border: 5px solid white; | |
| -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20); | |
| } | |
| .embeddedMedia.smallThumb .embedded-image { | |
| display:block; | |
| } | |
| /* | |
| .embeddedMedia .embedded-image { -webkit-filter: grayscale(50%); } | |
| .embeddedMedia.selected .embedded-image { -webkit-filter: grayscale( 0%); } | |
| */ | |
| .embedded-detailed-image { | |
| display:none; | |
| position:relative; | |
| float:none; | |
| margin: 15px auto; | |
| cursor:pointer; | |
| max-width: 90%; | |
| max-height: 300px; | |
| border:8px solid white; | |
| -webkit-box-sizing: border-box; | |
| -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20); | |
| } | |
| .embeddedMedia .embedded-detailed-image { | |
| display:block; | |
| } | |
| /* ------------------------------------------------------------------------------------------ */ | |
| /* main text block */ | |
| /* ------------------------------------------------------------------------------------------ */ | |
| .bubble { | |
| display: block; | |
| position: relative; | |
| overflow: hidden; | |
| margin: 0px 0px 0px 65px; | |
| min-height: 50px; /*ensure the text margin always defines the height of the post*/ | |
| padding-bottom: 15px; | |
| } | |
| .bubble { | |
| display: block; | |
| position: relative; | |
| overflow: hidden; | |
| margin: 0px 0px 0px 65px; | |
| min-height: 50px; /*ensure the text margin always defines the height of the post*/ | |
| padding-bottom: 15px; | |
| } | |
| .name { | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-size: 18; | |
| padding-bottom: 5px; | |
| } | |
| @media only screen and (-webkit-device-pixel-ratio: 2){ | |
| .name { | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: normal; | |
| } | |
| } | |
| /* when a user chooses to display both a real name a screen name this class is applied to */ | |
| /* differentiate the two */ | |
| .name .screenname { | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| @media only screen and (-webkit-device-pixel-ratio: 2){ | |
| .name .screenname { | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| } | |
| .post .name { margin-right: 0px; } | |
| .post:hover .name { margin-right: 100px; } | |
| .post.selected .name { margin-right: 100px; } | |
| .link { color: #c88a0c; } | |
| .link:hover { color: #e6a809; } | |
| .link:active { color: #d1900c; } | |
| .mention, .hashtag { | |
| color: rgba(21, 89, 123, 1.0); | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: 200; | |
| font-style: normal; | |
| } | |
| @media only screen and (-webkit-device-pixel-ratio: 2){ | |
| .mention, .hashtag { | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| } | |
| .repost-by { | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: 200; | |
| font-style: normal; | |
| } | |
| @media only screen and (-webkit-device-pixel-ratio: 2){ | |
| .repost-by { | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: 200; | |
| font-style: normal; | |
| } | |
| } | |
| /* note about repost class names */ | |
| /* "repost" => this post was reposted by someone you follow */ | |
| /* "reposted" => this post was reposted by you */ | |
| .repost-by { display:none; } | |
| .post.repost .repost-by { display:block; } | |
| .repost-bullet { | |
| display:inline-block; | |
| width:1.25em; | |
| height:1.25em; | |
| background-size: 100%; | |
| background-image:none; | |
| background-repeat:no-repeat; | |
| background-position:center; | |
| vertical-align: bottom; | |
| } | |
| @media only screen and (-webkit-device-pixel-ratio: 1){ | |
| .repost-bullet {background-image: url("post_repost.png");} | |
| } | |
| @media only screen and (-webkit-device-pixel-ratio: 2){ | |
| .repost-bullet {background-image: url("post_repost@2x.png");} | |
| } | |
| /* ------------------------------------------------------------------------------------------ */ | |
| /* my own post */ | |
| /* ------------------------------------------------------------------------------------------ */ | |
| .post.you .bubble { | |
| margin: 0px 65px 0px 0px; | |
| } | |
| .post.you .user-image { | |
| left: auto; | |
| right: 0px; | |
| } | |
| .post.you .user-image-border { | |
| left: auto; | |
| right: 0px; | |
| } | |
| .post.you .button { opacity:0.0; display:none; } | |
| .post.you .button:hover { opacity:0.0; display:none; } | |
| .post.you .post .buttons { opacity:0.0; display:none; } | |
| .post.you .post:hover .buttons { opacity:0.0; display:none; } | |
| .post.you .post.selected .buttons { opacity:0.0; display:none; } | |
| .post.detailed.you .button { opacity:0.0; display:none; } | |
| .post.detailed.you .button:hover { opacity:0.0; display:none; } | |
| .post.detailed.you .post .buttons { opacity:0.0; display:none; } | |
| .post.detailed.you .post:hover .buttons { opacity:0.0; display:none; } | |
| .post.detailed.you .post.selected .buttons { opacity:0.0; display:none; } | |
| .post.you .date { | |
| text-align:right; | |
| float: right; | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: 200; | |
| color: rgba(100, 100, 100, 1.0); | |
| opacity: 1.0; | |
| } | |
| /* ------------------------------------------------------------------------------------------ */ | |
| /* detail for a post */ | |
| /* ------------------------------------------------------------------------------------------ */ | |
| .post.detailed { | |
| font-size: 1.1em; | |
| line-height: 1.15em; | |
| margin:0; | |
| padding:0; | |
| border-top: 1px solid hsla(0,0%,100%,1.0); | |
| border-bottom:1px solid rgba(0,0,0,0.5); | |
| background-image: | |
| -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(0, 0%, 100%, 1.0)), | |
| to( hsla(0, 0%, 98%, 1.0)) | |
| ); | |
| } | |
| .post.detailed .inner { | |
| margin:0; | |
| padding:0; | |
| } | |
| .post.detailed .user-image { | |
| position:absolute; | |
| top: 0px; | |
| left: 0px; | |
| width: 100px; | |
| height: 100px; | |
| border-radius: 4px; | |
| background-color:white; | |
| background-size:100px 100px; | |
| } | |
| .post.detailed .user-image-border { | |
| display:block; | |
| position:absolute; | |
| top: 0px; | |
| left: 0px; | |
| width: 100px; | |
| height: 100px; | |
| border:1px solid rgba(255, 255, 255, 1); | |
| border-radius: 5px; | |
| -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25); | |
| } | |
| .post.detailed .name { | |
| margin:75px 0px 0px 130px; | |
| font-size: 1.1em; | |
| line-height: 1.30em; | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: 200; | |
| font-style: normal; | |
| } | |
| @media only screen and (-webkit-device-pixel-ratio: 2){ | |
| .post.detailed .name { | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: 200; | |
| font-style: normal; | |
| } | |
| } | |
| .post.detailed .screenname { | |
| margin:0px 0px 0px 130px; | |
| font-size: 1.1em; | |
| line-height: 1.20em; | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: 200; | |
| font-style: normal; | |
| } | |
| @media only screen and (-webkit-device-pixel-ratio: 2){ | |
| .post.detailed .screenname { | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| } | |
| .post.detailed .bubble { | |
| margin:15px; | |
| padding:0; | |
| font-size: 1.1em; | |
| line-height: 1.15em; | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: 200; | |
| font-style: normal; | |
| min-height:0; | |
| } | |
| @media only screen and (-webkit-device-pixel-ratio: 2){ | |
| .post.detailed .bubble { | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| } | |
| .post.detailed .text { | |
| } | |
| .post.detailed .date { | |
| display:block; | |
| position:relative; | |
| margin-top:5px; | |
| opacity:1.0; | |
| } | |
| .post.detailed .buttons { | |
| } | |
| .post.detailed .star-ribbon { | |
| } | |
| .post.detailed .repost-ribbon { | |
| } | |
| .post.detailed .button { opacity:1.0; } | |
| .post.detailed .buttons { opacity:1.0; } | |
| /* user */ | |
| /* ------------------------------------------------------------------------------------------ */ | |
| .user { | |
| display:block; | |
| overflow:hidden; | |
| margin:0; | |
| padding:0; | |
| background-color:rgba(245, 245, 245, 1); | |
| border-bottom: 1px solid rgba(200,200,200,1); | |
| } | |
| .user .section.top { | |
| display:block; | |
| position:relative; | |
| overflow:hidden; | |
| margin:15px 10px 0px 75px; | |
| padding:0; | |
| height:65px; | |
| } | |
| .user .section.bottom { | |
| display:block; | |
| position:relative; | |
| width: 100%; | |
| overflow:hidden; | |
| margin:0; | |
| padding:2px 0px; | |
| } | |
| .user .section-inner { | |
| display:block; | |
| position:relative; | |
| width: 93%; | |
| overflow:hidden; | |
| float:right; | |
| } | |
| .user .row { | |
| display:block; | |
| position:relative; | |
| overflow:hidden; | |
| float:left; | |
| width:23%; | |
| margin:0; | |
| border-right:1px solid hsla(0, 0%, 85%, 1.0); | |
| } | |
| .user .row.top { | |
| width:auto; | |
| margin:0; | |
| border:0px; | |
| } | |
| .user .row.bottom { | |
| border:0; | |
| } | |
| .user.detailed .content { | |
| } | |
| .user .label { | |
| display:block; | |
| position:relative; | |
| width:100%; | |
| text-align:center; | |
| margin:0px 0px 0px 0px; | |
| font-size: 0.85em; | |
| line-height: 1.25em; | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: 200; | |
| font-style: normal; | |
| } | |
| @media only screen and (-webkit-device-pixel-ratio: 2){ | |
| .user .label { | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: 200; | |
| font-style: normal; | |
| } | |
| } | |
| .user .count { | |
| display:block; | |
| position:relative; | |
| width:80%; | |
| text-align:center; | |
| color:hsla(205, 70%, 45%, 1.0); | |
| text-shadow: 0px 0px 1px hsla(0, 0%, 100%, 1.0); | |
| font-size: 1em; | |
| line-height: 0.75em; | |
| margin:0 auto; | |
| padding:2px 0px; | |
| } | |
| .user .count:hover { | |
| background-color: hsla(205, 10%, 75%, 1.0); | |
| border-radius:2em; | |
| } | |
| .user .count:active { | |
| color:hsla(205, 70%, 25%, 1.0); | |
| background-color: hsla(205, 20%, 65%, 1.0); | |
| border-radius:2em; | |
| } | |
| .user .stats, .user .description { | |
| display:none; | |
| } | |
| .user .follow-button, .user .unfollow-button, .user .mute-button, .user .unmute-button { | |
| display:block; | |
| position:relative; | |
| float:right; | |
| top: 0px; | |
| right: 0px; | |
| margin: 0px 15px 0px 0px; | |
| text-align:left; | |
| padding:2px 10px; | |
| color:white; | |
| text-shadow: 0px -1px 0px hsla(0, 0%, 0%, 0.15); | |
| border-radius:5px; | |
| -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25); | |
| font-size:12px !important; | |
| line-height:14px !important; | |
| } | |
| .user .follow-button, .user .unfollow-button { | |
| margin: 0px 0px 0px 0px; | |
| } | |
| .user .unfollow-button, .user .mute-button { | |
| background-image: | |
| -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(0, 80%, 50%, 1.0)), | |
| to(hsla(5, 100%, 35%, 1.0))); | |
| border: 1px solid hsla(0, 90%, 25%, 1); | |
| } | |
| .user .follow-button, .user .unmute-button { | |
| background-image: | |
| -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(73, 80%, 45%, 1.0)), | |
| to(hsla(78, 100%, 30%, 1.0))); | |
| border: 1px solid hsla(80, 90%, 25%, 1); | |
| } | |
| .user .unfollow-button, .user .mute-button { | |
| background-image: | |
| -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(0, 80%, 50%, 1.0)), | |
| to(hsla(5, 100%, 35%, 1.0))); | |
| border: 1px solid hsla(0, 90%, 25%, 1); | |
| } | |
| .user .follow-button:active, .user .unmute-button:active { | |
| color:hsla(0, 0%, 95%, 1.0); | |
| background-image: | |
| -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(73, 80%, 35%, 1.0)), | |
| to(hsla(78, 100%, 25%, 1.0))); | |
| border: 1px solid hsla(80, 90%, 15%, 1); | |
| -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.25); | |
| } | |
| .user .unfollow-button:active, .user .mute-button:active { | |
| color:hsla(0, 0%, 95%, 1.0); | |
| background-image: | |
| -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(0, 80%, 40%, 1.0)), | |
| to(hsla(5, 100%, 25%, 1.0))); | |
| border: 1px solid hsla(0, 90%, 15%, 1); | |
| -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.25); | |
| } | |
| .user .follow-button { display:block; } | |
| .user.following .follow-button { display:none; } | |
| .user.you .follow-button { display:none; } | |
| .user .unfollow-button { display:none; } | |
| .user.following .unfollow-button { display:block; } | |
| .user.you .unfollow-button { display:none; } | |
| .user .mute-button { display:block; } | |
| .user.muted .mute-button { display:none; } | |
| .user.you .mute-button { display:none; } | |
| .user .unmute-button { display:none; } | |
| .user.muted .unmute-button { display:block; } | |
| .user.you .unmute-button { display:none; } | |
| /* ------------------------------------------------------------------------------------------ */ | |
| /* detail for a user */ | |
| /* ------------------------------------------------------------------------------------------ */ | |
| .user.detailed { | |
| display:block; | |
| overflow:hidden; | |
| margin:0; | |
| padding:0; | |
| background-color:rgba(245, 245, 245, 1); | |
| border-top: 0; | |
| border-bottom: 1px solid hsla(0,0%,40%,1.0); | |
| } | |
| .user.detailed .cover { | |
| position:absolute; | |
| top: 0px; | |
| left: 0px; | |
| min-width: 100%; | |
| height: 79px; | |
| overflow:hidden; | |
| background-size:cover; | |
| background-position:center; | |
| border-top:1px solid hsla(0,0%,100%,0.5); | |
| border-bottom:1px solid rgba(0,0,0,0.5); | |
| opacity:1.0; | |
| } | |
| .user.detailed .section.top { | |
| display:block; | |
| position:relative; | |
| width:100%; | |
| height:auto; | |
| overflow:hidden; | |
| margin:81px 0px 0px 0px; | |
| padding-top:10px; | |
| padding-bottom:10px; | |
| border-top: 1px solid hsla(0,0%,100%,1.0); | |
| border-bottom:1px solid rgba(0,0,0,0.25); | |
| background-image: | |
| -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(0, 0%, 95%, 1.0)), | |
| to(hsla(0, 0%, 90%, 1.0))); | |
| } | |
| .user.detailed .section.bottom { | |
| display:block; | |
| position:relative; | |
| width: 100%; | |
| overflow:hidden; | |
| margin:0; | |
| padding:5px 0px; | |
| border-top: 1px solid hsla(0,0%,100%,1.0); | |
| background-image: | |
| -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(0, 0%, 85%, 1.0)), | |
| to(hsla(0, 0%, 80%, 1.0))); | |
| } | |
| .user.detailed .section-inner { | |
| display:block; | |
| position:relative; | |
| width: 100%; | |
| overflow:hidden; | |
| float:right; | |
| } | |
| .user.detailed .user-image { | |
| position:absolute; | |
| top: 0px; | |
| left: 0px; | |
| width: 100px; | |
| height: 100px; | |
| border-radius: 4px; | |
| background-color:white; | |
| background-size:100px 100px; | |
| } | |
| .user.detailed .user-image-border { | |
| display:block; | |
| position:absolute; | |
| top: 0px; | |
| left: 0px; | |
| width: 100px; | |
| height: 100px; | |
| border:1px solid rgba(255, 255, 255, 1); | |
| border-radius: 5px; | |
| -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25); | |
| } | |
| .user.detailed .row { | |
| display:block; | |
| position:relative; | |
| box-sizing: border-box; | |
| overflow:hidden; | |
| float:left; | |
| width:25%; | |
| margin:0px 0px 0px 0px; | |
| border-right:1px solid hsla(0, 0%, 75%, 1.0); | |
| } | |
| .user.detailed .row.top { | |
| width:100%; | |
| padding:15px 15px 0px 15px; | |
| border:0px; | |
| } | |
| .user.detailed .row.bottom { | |
| border:0; | |
| } | |
| .user.detailed .content { | |
| } | |
| .user.detailed .name { | |
| font-size: 1.25em; | |
| line-height: 1.25em; | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: bold; | |
| font-style: normal; | |
| } | |
| @media only screen and (-webkit-device-pixel-ratio: 2){ | |
| .user.detailed .name { | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| } | |
| .user.detailed .description { | |
| display:block; | |
| } | |
| .user.detailed .screenname { | |
| font-size: 1.25em; | |
| line-height: 1.25em; | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| @media only screen and (-webkit-device-pixel-ratio: 2){ | |
| .user.detailed .screenname { | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| } | |
| .user.detailed .label { | |
| display:block; | |
| position:relative; | |
| width:100%; | |
| text-align:center; | |
| margin:2px 0px 0px 0px; | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: bold; | |
| font-style: normal; | |
| font-size: 0.9em; | |
| line-height: 1.30em; | |
| } | |
| @media only screen and (-webkit-device-pixel-ratio: 2){ | |
| .user.detailed .label { | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| } | |
| .user.detailed .count { | |
| display:block; | |
| position:relative; | |
| width:80%; | |
| text-align:center; | |
| color:hsla(205, 70%, 45%, 1.0); | |
| text-shadow: 0px 0px 1px hsla(0, 0%, 100%, 1.0); | |
| font-size: 1.5em; | |
| line-height: 1em; | |
| margin:0 auto; | |
| padding:2px 0px; | |
| } | |
| .user.detailed .count:hover { | |
| background-color: hsla(205, 10%, 75%, 1.0); | |
| border-radius:2em; | |
| } | |
| .user.detailed .count:active { | |
| color:hsla(205, 70%, 25%, 1.0); | |
| background-color: hsla(205, 20%, 65%, 1.0); | |
| border-radius:2em; | |
| } | |
| .user .follows-you { display:none; } | |
| .user.detailed .follows-you { display:block; } | |
| .user.detailed .follows-you { | |
| position:relative; | |
| width:100%; | |
| text-align:center; | |
| margin:2px 0px 0px 0px; | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: 200; | |
| font-style: normal; | |
| font-size: 0.9em; | |
| line-height: 1.25em; | |
| } | |
| @media only screen and (-webkit-device-pixel-ratio: 2){ | |
| .user.detailed .follows-you { | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| } | |
| .user.detailed .follow-button, | |
| .user.detailed .unfollow-button, | |
| .user.detailed .mute-button, | |
| .user.detailed .unmute-button, | |
| .user.detailed .signout-button { | |
| display:block; | |
| position:relative; | |
| float:right; | |
| top: 0px; | |
| right: 0px; | |
| margin:0px 15px 0px 0px; | |
| text-align:left; | |
| padding:3px 15px; | |
| color:white; | |
| text-shadow: 0px -1px 0px hsla(0, 0%, 0%, 0.15); | |
| border-radius:5px; | |
| -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25); | |
| font-size:13px !important; | |
| line-height:15px !important; | |
| } | |
| .user.detailed .follow-button, .user.detailed .unmute-button { | |
| background-image: | |
| -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(73, 80%, 45%, 1.0)), | |
| to(hsla(78, 100%, 30%, 1.0))); | |
| border: 1px solid hsla(80, 90%, 25%, 1); | |
| } | |
| .user.detailed .unfollow-button, .user.detailed .mute-button { | |
| background-image: | |
| -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(0, 80%, 50%, 1.0)), | |
| to(hsla(5, 100%, 35%, 1.0))); | |
| border: 1px solid hsla(0, 90%, 25%, 1); | |
| } | |
| .user.detailed .signout-button { | |
| background-image: | |
| -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(0, 80%, 50%, 1.0)), | |
| to(hsla(5, 100%, 35%, 1.0))); | |
| border: 1px solid hsla(0, 90%, 25%, 1); | |
| } | |
| .user.detailed .follow-button:active, .user.detailed .unmute-button:active { | |
| color:hsla(0, 0%, 95%, 1.0); | |
| background-image: | |
| -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(73, 80%, 35%, 1.0)), | |
| to(hsla(78, 100%, 25%, 1.0))); | |
| border: 1px solid hsla(80, 90%, 15%, 1); | |
| -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.25); | |
| } | |
| .user.detailed .unfollow-button:active, .user.detailed .mute-button:active { | |
| color:hsla(0, 0%, 95%, 1.0); | |
| background-image: | |
| -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(0, 80%, 40%, 1.0)), | |
| to(hsla(5, 100%, 25%, 1.0))); | |
| border: 1px solid hsla(0, 90%, 15%, 1); | |
| -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.25); | |
| } | |
| .user.detailed .signout-button:active { | |
| color:hsla(0, 0%, 95%, 1.0); | |
| background-image: | |
| -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(0, 80%, 40%, 1.0)), | |
| to(hsla(5, 100%, 25%, 1.0))); | |
| border: 1px solid hsla(0, 90%, 15%, 1); | |
| -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.25); | |
| } | |
| .user.detailed .follow-button { display:block; } | |
| .user.detailed.following .follow-button { display:none; } | |
| .user.detailed.you .follow-button { display:none; } | |
| .user.detailed .unfollow-button { display:none; } | |
| .user.detailed.following .unfollow-button { display:block; } | |
| .user.detailed.you .unfollow-button { display:none; } | |
| .user.detailed .mute-button { display:block; } | |
| .user.detailed.muted .mute-button { display:none; } | |
| .user.detailed.you .mute-button { display:none; } | |
| .user.detailed .unmute-button { display:none; } | |
| .user.detailed.muted .unmute-button { display:block; } | |
| .user.detailed.you .unmute-button { display:none; } | |
| .user .signout-button { display:none; } | |
| .user.detailed .signout-button { display:none; } | |
| .user.detailed.you .signout-button { display:block; } | |
| /* ------------------------------------------------------------------------------------------ */ | |
| /* Class for a cell view that needs to tell the user there is nothing available. */ | |
| .waiting { | |
| width:100%; | |
| height:100%; | |
| background-repeat: no-repeat; | |
| background-position:center; | |
| background-size:55px 55px; | |
| opacity:0.5; | |
| } | |
| .filler { | |
| width:100%; | |
| height:50%; | |
| background-repeat: no-repeat; | |
| background-position:center 100px; | |
| background-size:50px 50px; | |
| text-align:center; | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: bold; | |
| font-style: normal; | |
| padding-top:160px; | |
| background-image: url("fruit_bg.png"); | |
| } | |
| @media only screen and (-webkit-device-pixel-ratio: 2){ | |
| .filler { | |
| font-family: "Proxima Nova", "Helvetica Neue"; | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| } | |
| @media only screen and (-webkit-device-pixel-ratio: 1) { | |
| .waiting { background-image: url("fruit_wait.gif"); } | |
| .filler { background-image: url("fruit_bg.png"); } | |
| } | |
| @media only screen and (-webkit-device-pixel-ratio: 2) { | |
| .waiting { background-image: url("fruit_wait@2x.gif"); } | |
| .filler { background-image: url("fruit_bg@2x.png"); } | |
| } | |
| /* ------------------------------------------------------------------------------------------ */ | |
| /* messages */ | |
| /* ------------------------------------------------------------------------------------------ */ | |
| .channel .chevron { | |
| display:block; | |
| position:absolute; | |
| top: 30px; | |
| right: 15px; | |
| width: 22px; | |
| height: 22px; | |
| padding-left:1px; | |
| border-radius:20px; | |
| background-image: -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(200, 10%, 87%, 1.0)), | |
| to(hsla(200, 10%, 80%, 1.0)) | |
| ); | |
| border: 1px solid white; | |
| box-shadow: 0px 1px 3px hsla(0, 0%, 0%, 0.10); | |
| font-size:29px !important; | |
| line-height:17px !important; | |
| text-align:center; | |
| } | |
| .channel.unread .chevron { | |
| background-image: -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(200, 70%, 87%, 1.0)), | |
| to(hsla(200, 70%, 80%, 1.0)) | |
| ); | |
| } | |
| .message { | |
| display:block; | |
| position:relative; | |
| margin:0px; | |
| padding:0; | |
| overflow:hidden; | |
| } | |
| .message-inner { | |
| display:block; | |
| position:relative; | |
| margin-top:15px; | |
| padding:0; | |
| border: 1px solid transparent; | |
| } | |
| .message .bubble { | |
| display: block; | |
| position: relative; | |
| overflow: hidden; | |
| margin: 10px 15px 10px 80px; | |
| min-height: 30px; /*ensure the text margin always defines the height of the post 50px image - 2*10padding*/ | |
| padding: 10px; | |
| border-top: 1px solid hsla(0, 0%, 100%, 1.0); | |
| border-left: 1px solid hsla(0, 0%, 98%, 1.0); | |
| border-right: 1px solid hsla(0, 0%, 98%, 1.0); | |
| border-bottom: 1px solid hsla(0, 0%, 97%, 1.0); | |
| border-radius: 5px; | |
| box-shadow: 0px 1px 3px hsla(0, 0%, 0%, 0.10); | |
| background-image: -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(0, 0%, 90%, 1.0)), | |
| to(hsla(0, 0%, 95%, 1.0)) | |
| ); | |
| clear:both; | |
| } | |
| .message.selected .bubble { | |
| border: 1px solid hsla(0, 100%, 100%, 1.0); | |
| box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.25); | |
| } | |
| .channel .bubble { | |
| margin-right:37px; | |
| } | |
| .message .name { | |
| display:block; | |
| position:relative; | |
| float:left; | |
| margin-left:80px; | |
| font-size:0.90em; | |
| line-height:1.20em; | |
| } | |
| .message .date { | |
| display:block; | |
| position:relative; | |
| float:right; | |
| margin-right:15px; | |
| font-size:0.90em; | |
| line-height:1.20em; | |
| } | |
| .message.you .user-image { | |
| left:auto; | |
| right:0px; | |
| } | |
| .message.you .user-image-border { | |
| left:auto; | |
| right:0px; | |
| } | |
| .message.you .bubble { | |
| margin: 10px 80px 10px 15px; | |
| border-top: 1px solid hsla(200, 50%, 92%, 1.0); | |
| border-left: 1px solid hsla(200, 50%, 90%, 1.0); | |
| border-right: 1px solid hsla(200, 50%, 90%, 1.0); | |
| border-bottom: 1px solid hsla(200, 50%, 88%, 1.0); | |
| background-image: -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(200, 50%, 83%, 1.0)), | |
| to(hsla(200, 50%, 87%, 1.0)) | |
| ); | |
| } | |
| .message.selected.you .bubble { | |
| border: 1px solid hsla(0, 100%, 100%, 1.0); | |
| box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.25); | |
| } | |
| .message.you .name { | |
| display:none; | |
| } | |
| .message.you .date { | |
| float:left; | |
| margin-left:15px; | |
| } | |
| .message .buttons { | |
| display: none; | |
| } | |
| .users { | |
| display:block; | |
| position:relative; | |
| margin:0px 15px 15px 15px; | |
| padding:5px 0px 0px 5px; | |
| overflow:hidden; | |
| background-image: | |
| -webkit-gradient(linear, left top, left bottom, | |
| from(hsla(205, 0%, 75%, 1.0)), | |
| to(hsla(205, 0%, 85%, 1.0)) | |
| ); | |
| border: 1px solid white; | |
| border-radius: 5px; | |
| } | |
| .direct .users { | |
| display:none; | |
| } | |
| .message-user-image { | |
| display:block; | |
| position:relative; | |
| float:left; | |
| width:25px; | |
| height:25px; | |
| border-radius:2px; | |
| background-color:white; | |
| } | |
| .message-user-image-border { | |
| display:block; | |
| position:relative; | |
| float:left; | |
| top:0px; | |
| left:0px; | |
| width:25px; | |
| height: 25px; | |
| margin:0px 5px 5px 0px; | |
| border:1px solid rgba(255, 255, 255, 0.5); | |
| border-radius: 3px; | |
| -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20); | |
| } | |
| /* ------------------------------------------------------------------------------------------ */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment