Last active
August 29, 2015 13:56
-
-
Save liliakai/9341048 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
/* how wide should the windows/screens be? */ | |
.convo { | |
background-color: #eeeeee; | |
} | |
.bubble { | |
background-color: #fafafa; | |
color: #333333; | |
} | |
.metadata { | |
color: #cccccc; | |
} | |
.incoming .bubble { | |
background-color: #ffffff; | |
} | |
.sms .bubble { | |
border-color: #64a926; | |
} | |
.push .bubble { | |
border-color: #3a7ef2; | |
} | |
.sending .bubble { | |
opacity: 0.7; | |
} | |
.key-exchange { | |
padding-bottom: 1em; | |
} | |
.key-exchange div { | |
margin-top: 2em; | |
height: 1em; | |
padding-bottom: 1em; | |
border: 1px solid #ddd; | |
border-width: 1px 0; | |
font-size: 0.5em; | |
text-align: center; | |
vertical-align: top; | |
text-transform: uppercase; | |
color: #aaa; | |
} | |
.key-exchange div .lock { | |
background: url(https://raw.github.com/WhisperSystems/TextSecure/master/res/drawable-hdpi/icon_lock.png) no-repeat; | |
background-position: center 40%; | |
background-size: 60%; | |
display: inline-block; | |
width: 4em; | |
height: 4em; | |
border-radius: 4em; | |
border: 1px solid #ddd; | |
margin: -1em 1em 0; | |
} | |
/* Style variants */ | |
.green-stripe { | |
border-top: 0.3em solid #64a926; | |
} | |
.blue-stripe { | |
border-top: 0.3em solid #3a7ef2; | |
} | |
.green-background { | |
background: #64a926; | |
} | |
.light-green-background { | |
background: #d9e6cf; | |
} | |
.blue-background { | |
background: #3a7ef2; | |
} | |
.yellow-background { | |
background: #fff6df; | |
} | |
.light-blue-background, .encrypted.msg, .key-exchange, .key-exchange div .lock { | |
background-color: #dfe8f7; | |
} | |
.bluish { | |
background-color: #d0d0da; | |
} | |
/* Formatting */ | |
.msg-text { | |
display: block; | |
padding: 0.5em 0.6em 0em; | |
} | |
.metadata { | |
display: block; | |
font-size: 0.70em; | |
padding: 0.2em 0.6em; | |
} | |
.convo { | |
width: 480px; | |
font-family: sans-serif; | |
font-size: 20.36364px; | |
line-height: 1.2em; | |
} | |
.avatar { | |
display: inline-block; | |
background: url(https://whispersystems.org/assets/header/raven-46e547e5d71484be52060be1155f6ff2.png) 30% 10%; | |
background-size: 200%; | |
width: 53.81818px; | |
height: 53.81818px; | |
border-radius: 53.81818px; | |
float: left; | |
} | |
.bubble { | |
position: relative; | |
border-radius: 4.36364px; | |
max-width: 75%; | |
border-bottom: 2.25px solid #dddddd; | |
} | |
.incoming .bubble { | |
float: left; | |
} | |
.incoming .bubble:after { | |
content: ''; | |
display: block; | |
position: absolute; | |
width: 0; | |
height: 0; | |
top: 1em; | |
left: -0.8em; | |
border-right: solid 0.5em #ffffff; | |
border-top: solid 10px transparent; | |
border-left: solid 0.4em transparent; | |
border-bottom: solid 10px transparent; | |
} | |
.outgoing .bubble { | |
float: right; | |
} | |
.outgoing .bubble:after { | |
content: ''; | |
display: block; | |
position: absolute; | |
width: 0; | |
height: 0; | |
top: 1em; | |
right: -0.8em; | |
border-left: solid 0.5em #ffffff; | |
border-top: solid 10px transparent; | |
border-right: solid 0.4em transparent; | |
border-bottom: solid 10px transparent; | |
} | |
.outgoing .bubble, .outgoing .metadata { | |
text-align: right; | |
} | |
.msg { | |
padding: 0.3em 11.63636px; | |
} | |
.msg:after { | |
content: ''; | |
display: block; | |
height: 0; | |
clear: both; | |
} | |
/* android elements */ | |
.notification-bar { | |
background: url(https://whispersystems.org/blog/images/textsecure2-imessage.png) no-repeat; | |
background-size: 100%; | |
width: 480px; | |
height: 34.28571px; | |
} | |
.header-bar { | |
background: url(https://whispersystems.org/blog/images/textsecure2-imessage.png) no-repeat; | |
background-size: 100%; | |
background-position: 0px -34.90909px; | |
height: 62.47619px; | |
width: 480px; | |
} | |
.entry-bar { | |
background: url(https://whispersystems.org/blog/images/textsecure2-imessage.png) no-repeat; | |
background-size: 100%; | |
background-position: 0px -789.81818px; | |
height: 64.7619px; | |
width: 480px; | |
} | |
.checkmark { | |
display: inline-block; | |
background: green url(https://github.com/WhisperSystems/TextSecure/blob/master/res/drawable-mdpi/check.png?raw=true) center; | |
background-size: 90%; | |
width: 1em; | |
height: 1em; | |
border-radius: 1em; | |
border: 0.15em solid #ffffff; | |
margin: 6% 62%; | |
} | |
/* debug styles */ | |
/* | |
.convo { border: 1px solid red; } | |
.msg { border: 1px solid blue; } | |
*/ |
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
<div class='notification-bar'></div> | |
<div class='header-bar'> | |
<!--<span class='checkmark'></span> | |
--> | |
</div> | |
<div class='convo'> | |
<div class='incoming sms msg unencrypted'> | |
<span class='avatar'></span> | |
<span class='bubble'> | |
<span class='msg-text'>This is a plaintext SMS. Unencrypted conversations are always SMS and have a plain jane, neutral gray backdrop.</span> | |
<span class='metadata'>Feb 6</span> | |
</span> | |
</div> | |
<div class='outgoing sms msg unencrypted'> | |
<span class='bubble'> | |
<span class='msg-text'>SMS shows a touch of green, like the money they'll cost you (if you're American).</span> | |
<span class='metadata'>1:42pm</span> | |
</span> | |
</div> | |
<div class='key-exchange'><div>Secure <span class='lock'></span>Session</div></div> | |
<div class='incoming sms msg encrypted'> | |
<span class='avatar'></span> | |
<span class='bubble'> | |
<span class='msg-text'>Blue skies, all is well. This SMS is encrypted.</span> | |
<span class='metadata'>1:52pm</span> | |
</span> | |
</div> | |
<div class='outgoing sms msg encrypted'> | |
<span class='bubble'> | |
<span class='msg-text'>Blue for security, green for SMS.</span> | |
<span class='metadata'>1:36pm</span> | |
</span> | |
</div> | |
<div class='incoming push msg encrypted'> | |
<span class='avatar'></span> | |
<span class='bubble'> | |
<span class='msg-text'>Push messages are always secure, so they are extra blue.</span> | |
<span class='metadata'>1:56pm</span> | |
</span> | |
</div> | |
<div class='outgoing push msg encrypted'> | |
<span class='bubble'> | |
<span class='msg-text'>Plus they're free as in freedom, beer, and bird.</span> | |
<span class='metadata'>1:56pm</span> | |
</span> | |
</div> <div class='sending outgoing push msg encrypted'> | |
<span class='bubble'> | |
<span class='msg-text'>Not sent yet...</span> | |
<span class='metadata'>2:46pm</span> | |
</span> | |
</div> | |
</div> | |
<div class='entry-bar'></div> |
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
<div class='notification-bar'></div> | |
<div class='header-bar'></div> | |
<div class='convo'> | |
<div class='incoming sms msg unencrypted'> | |
<span class='avatar'></span> | |
<span class='bubble'> | |
As incoming unencrypted SMS. | |
<span class='metadata'>1:06pm</span> | |
</span> | |
</div> | |
<div class='outgoing sms msg unencrypted'> | |
<span class='bubble'> | |
An outgoing unencrypted SMS. | |
<span class='metadata'>1:16pm</span> | |
</span> | |
</div> | |
<div class='incoming sms msg encrypted'> | |
<span class='avatar'></span> | |
<span class='bubble'> | |
An incoming encrypted SMS. | |
<span class='metadata'>1:26pm</span> | |
</span> | |
</div> | |
<div class='outgoing sms msg encrypted'> | |
<span class='bubble'> | |
An outgoing encrypted SMS. | |
<span class='metadata'>1:36pm</span> | |
</span> | |
</div> | |
<div class='incoming push msg encrypted'> | |
<span class='avatar'></span> | |
<span class='bubble'> | |
An incoming push message. | |
<span class='metadata'>1:56pm</span> | |
</span> | |
</div> | |
<div class='outgoing push msg encrypted'> | |
<span class='bubble'> | |
Push messages are always encrypted. | |
<span class='metadata'>1:46pm</span> | |
</span> | |
</div> | |
</div> |
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
// ---- | |
// Sass (v3.3.0.rc.5) | |
// Compass (v1.0.0.alpha.18) | |
// ---- | |
/* how wide should the windows/screens be? */ | |
$width: 480px; // background image is 630px | |
$green: #64a926; | |
$blue: #3a7ef2; | |
.convo { background-color: #eeeeee; } | |
.bubble { | |
background-color: #fafafa; | |
color: #333333; | |
} | |
.metadata { color: #cccccc; } | |
.incoming .bubble { | |
background-color: #ffffff; | |
} | |
.sms .bubble { | |
border-color: $green; | |
} | |
.push .bubble { | |
border-color: $blue; | |
} | |
.sending .bubble { opacity: 0.7; } | |
.encrypted.msg { @extend .light-blue-background; } | |
.key-exchange { | |
@extend .light-blue-background; | |
padding-bottom: 1em; | |
div { | |
margin-top: 2em; | |
height: 1em; | |
padding-bottom: 1em; | |
border: 1px solid #ddd; | |
border-width: 1px 0; | |
font-size: 0.5em; | |
text-align: center; | |
vertical-align: top; | |
text-transform: uppercase; | |
color: #aaa; | |
.lock { | |
background: url(https://raw.github.com/WhisperSystems/TextSecure/master/res/drawable-hdpi/icon_lock.png) no-repeat; | |
background-position: center 40%; | |
background-size: 60%; | |
@extend .light-blue-background; | |
display: inline-block; | |
width: 4em; | |
height: 4em; | |
border-radius: 4em; | |
border: 1px solid #ddd; | |
margin: -1em 1em 0; | |
} | |
} | |
} | |
/* Style variants */ | |
.green-stripe { border-top: 0.3em solid #64a926; } | |
.blue-stripe { border-top: 0.3em solid #3a7ef2; } | |
.green-background { background: #64a926; } | |
.light-green-background { background: #d9e6cf; } | |
.blue-background { background: #3a7ef2; } | |
.yellow-background { background: #fff6df; } | |
.light-blue-background { background-color: #dfe8f7; } | |
.bluish { background-color: #d0d0da; } | |
/* Formatting */ | |
.msg-text { | |
display: block; | |
padding: 0.5em 0.6em 0em; | |
} | |
.metadata { | |
display: block; | |
font-size: 0.70em; | |
padding: 0.2em 0.6em; | |
} | |
.convo { | |
width: $width; | |
font-family: sans-serif; | |
font-size: $width * 14 / 330; | |
line-height: 1.2em; | |
} | |
$avatar-size: $width * 37 / 330; | |
.avatar { | |
display: inline-block; | |
// background: url(http://placekitten.com/g/200/300/); | |
background: url(https://whispersystems.org/assets/header/raven-46e547e5d71484be52060be1155f6ff2.png) 30% 10%; | |
background-size: 200%; | |
width: $avatar-size; | |
height: $avatar-size; | |
border-radius: $avatar-size; | |
float: left; | |
} | |
.bubble { | |
position: relative; | |
border-radius: ($width * 3 / 330); | |
max-width: 75%; | |
border-bottom: ($width * 3 / 640) solid #dddddd; | |
} | |
.incoming .bubble { | |
float: left; | |
&:after { | |
content: ''; | |
display: block; | |
position: absolute; | |
width: 0; | |
height: 0; | |
top: 1em; | |
left: -0.8em; | |
border-right: solid 0.5em #ffffff; | |
border-top: solid 10px transparent; | |
border-left: solid 0.4em transparent; | |
border-bottom: solid 10px transparent; | |
} | |
} | |
.outgoing .bubble { | |
float: right; | |
&:after { | |
content: ''; | |
display: block; | |
position: absolute; | |
width: 0; | |
height: 0; | |
top: 1em; | |
right: -0.8em; | |
border-left: solid 0.5em #ffffff; | |
border-top: solid 10px transparent; | |
border-right: solid 0.4em transparent; | |
border-bottom: solid 10px transparent; | |
} | |
} | |
.outgoing .bubble, .outgoing .metadata { | |
text-align: right; | |
} | |
.msg { padding: 0.3em (8 * $width/ 330); } | |
.msg:after { | |
content: ''; | |
display: block; | |
height: 0; | |
clear: both; | |
} | |
/* android elements */ | |
.notification-bar { | |
background: url(https://whispersystems.org/blog/images/textsecure2-imessage.png) no-repeat; | |
background-size: 100%; | |
width: $width; | |
height: $width * 45 / 630; | |
} | |
.header-bar { | |
background: url(https://whispersystems.org/blog/images/textsecure2-imessage.png) no-repeat; | |
background-size: 100%; | |
background-position: 0px ($width * -24 / 330); | |
height: $width * 82 / 630; | |
width: $width; | |
} | |
.entry-bar { | |
background: url(https://whispersystems.org/blog/images/textsecure2-imessage.png) no-repeat; | |
background-size: 100%; | |
background-position: 0px ($width * -543 / 330); | |
height: $width * 85 / 630; | |
width: $width; | |
} | |
.checkmark { | |
display: inline-block; | |
background: green url(https://github.com/WhisperSystems/TextSecure/blob/master/res/drawable-mdpi/check.png?raw=true) center; | |
background-size: 90%; | |
width: 1em; | |
height: 1em; | |
border-radius: 1em; | |
border: 0.15em solid #ffffff; | |
margin: 6% 62%; | |
} | |
/* debug styles */ | |
/* | |
.convo { border: 1px solid red; } | |
.msg { border: 1px solid blue; } | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment