293 lines
7.2 KiB
CSS
293 lines
7.2 KiB
CSS
@charset "UTF-8";
|
|
body {
|
|
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-font-smoothing: antialiased;
|
|
-ms-font-smoothing: antialiased;
|
|
-o-font-smoothing: antialiased;
|
|
font-smoothing: antialiased;
|
|
hanging-punctuation: first; }
|
|
|
|
/*
|
|
* This is a series-d manifest file.
|
|
*
|
|
* Here, we import responsive variables specified elsewhere
|
|
*
|
|
*/
|
|
/* SERIES D SHAME + WIP */
|
|
/* includes iPhone, */
|
|
.title-bar {
|
|
padding: 10px;
|
|
color: white;
|
|
background-color: #00badd;
|
|
border-bottom: 1px solid #00a5c4; }
|
|
.title-bar h1 {
|
|
padding: 0;
|
|
font-weight: normal;
|
|
margin: 0.5em 0 0 0; }
|
|
|
|
.notifications {
|
|
position: relative;
|
|
font-size: 12px; }
|
|
.notifications .notification {
|
|
padding: 12px; }
|
|
.notifications .notification p {
|
|
margin: 0; }
|
|
.notifications .notification.info {
|
|
background-color: whitesmoke;
|
|
border-bottom: 1px solid lightgray; }
|
|
.notifications .notification a.button {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
right: 10px;
|
|
top: 11px;
|
|
background-color: whitesmoke;
|
|
text-decoration: none;
|
|
color: gray;
|
|
border: 1px solid lightgray;
|
|
font-weight: bold;
|
|
font-size: 10px;
|
|
text-align: center;
|
|
padding: 2px;
|
|
box-sizing: border-box;
|
|
display: block;
|
|
height: 18px;
|
|
width: 18px;
|
|
border-radius: 18px; }
|
|
.notifications .notification a.button:hover {
|
|
background-color: lightgray; }
|
|
|
|
@media screen and (min-width: 320px) {
|
|
.search {
|
|
padding: 10px;
|
|
border-bottom: 1px solid whitesmoke; }
|
|
.search input[type=search] {
|
|
box-sizing: border-box;
|
|
font-size: 12px;
|
|
outline: 0;
|
|
width: 100%;
|
|
margin: 0;
|
|
letter-spacing: 0.25px;
|
|
padding: 4px 8px;
|
|
border: 1px solid lightgray; }
|
|
|
|
.gutter .search {
|
|
display: none; } }
|
|
@media screen and (min-width: 480px) {
|
|
.search {
|
|
display: none; }
|
|
|
|
.gutter .search {
|
|
display: block; } }
|
|
@media screen and (min-width: 320px) {
|
|
.gutter {
|
|
width: 64px;
|
|
float: left;
|
|
border-right: 1px solid lightgray;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
height: 458px;
|
|
overflow: scroll;
|
|
background-color: white;
|
|
padding-bottom: 80px; }
|
|
.gutter .contact {
|
|
cursor: pointer;
|
|
float: left;
|
|
width: 100%;
|
|
border-bottom: 1px solid whitesmoke;
|
|
color: #333; }
|
|
.gutter .contact:hover {
|
|
background-color: whitesmoke;
|
|
margin-top: -1px;
|
|
border-bottom: 1px solid lightgray;
|
|
border-top: 1px solid lightgray; }
|
|
.gutter .contact.active {
|
|
background-color: #ecfcff;
|
|
margin-top: -1px;
|
|
border-bottom: 1px solid lightgray;
|
|
border-top: 1px solid lightgray; }
|
|
.gutter .contact .avatar {
|
|
height: 42px;
|
|
width: 42px;
|
|
border-radius: 42px;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
margin: 10px;
|
|
margin-right: 14px;
|
|
float: left;
|
|
clear: both;
|
|
background-color: whitesmoke; }
|
|
.gutter .contact .contact-details {
|
|
display: none; } }
|
|
@media screen and (min-width: 480px) {
|
|
.gutter {
|
|
width: 240px;
|
|
height: auto;
|
|
z-index: 100; }
|
|
.gutter .search {
|
|
padding: 10px;
|
|
border-bottom: 1px solid whitesmoke; }
|
|
.gutter .search input[type=search] {
|
|
box-sizing: border-box;
|
|
font-size: 12px;
|
|
outline: 0;
|
|
width: 100%;
|
|
margin: 0;
|
|
letter-spacing: 0.25px;
|
|
padding: 4px 8px;
|
|
border: 1px solid lightgray; }
|
|
.gutter .search.d6 {
|
|
display: block; }
|
|
.gutter .contact .avatar {
|
|
height: 56px;
|
|
width: 56px; }
|
|
.gutter .contact .contact-details {
|
|
display: block;
|
|
position: relative;
|
|
width: 156px;
|
|
float: left;
|
|
text-align: left; }
|
|
.gutter .contact .contact-details h3 {
|
|
font-size: 13px;
|
|
margin-bottom: 4px; }
|
|
.gutter .contact .contact-details .contact-name {
|
|
width: 105px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis; }
|
|
.gutter .contact .contact-details .last-message {
|
|
color: #999999;
|
|
letter-spacing: 0.15px;
|
|
-webkit-text-stroke: 0.2px;
|
|
margin: 0;
|
|
font-size: 12px;
|
|
width: 150px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis; }
|
|
.gutter .contact .contact-details .last-timestamp {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 8px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: gray; } }
|
|
.conversation {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
padding-right: 12px;
|
|
box-sizing: border-box;
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
text-align: left; }
|
|
|
|
ul.discussion {
|
|
display: block;
|
|
overflow: auto;
|
|
padding: 0; }
|
|
|
|
.entry {
|
|
display: block;
|
|
width: 100%;
|
|
float: left;
|
|
margin-bottom: 10px; }
|
|
.entry .timestamp {
|
|
font-size: 0.75em;
|
|
display: block; }
|
|
.entry .timestamp:incoming {
|
|
color: gray; }
|
|
.entry .timestamp:outgoing {
|
|
color: whitesmoke; }
|
|
.entry.delivered .timestamp::after {
|
|
margin-left: 4px;
|
|
content: "✓"; }
|
|
|
|
.bubble {
|
|
border-radius: 16px;
|
|
padding: 12px;
|
|
bottom: 10px;
|
|
width: auto;
|
|
background-color: whitesmoke; }
|
|
.bubble:first-of-type {
|
|
margin-top: 0; }
|
|
.bubble ul, .bubble li {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0; }
|
|
.bubble .message {
|
|
position: relative;
|
|
font-size: 14px;
|
|
-webkit-text-stroke: 0.35px; }
|
|
.bubble.incoming {
|
|
float: left;
|
|
text-align: left;
|
|
margin-left: 12px; }
|
|
.bubble.sent {
|
|
float: right;
|
|
clear: right;
|
|
text-align: right;
|
|
background-color: #00badd;
|
|
color: white; }
|
|
|
|
@media screen and (min-width: 320px) {
|
|
.send-message-area {
|
|
position: fixed;
|
|
bottom: 0;
|
|
background-color: whitesmoke;
|
|
box-sizing: border-box;
|
|
float: left;
|
|
padding: 16px;
|
|
width: 100%;
|
|
border-top: 1px solid lightgray;
|
|
right: 0; }
|
|
.send-message-area .send-message {
|
|
outline: 0;
|
|
border: 0;
|
|
width: 100%;
|
|
padding: 0;
|
|
resize: auto; }
|
|
|
|
.message-composer {
|
|
vertical-align: top;
|
|
position: relative;
|
|
background-color: white;
|
|
margin-bottom: 20px;
|
|
padding: 8px;
|
|
border: 1px solid lightgray;
|
|
font-size: 14px;
|
|
color: gray;
|
|
padding-bottom: 80px; }
|
|
.message-composer .attachments {
|
|
position: absolute;
|
|
bottom: 0;
|
|
color: lightgray;
|
|
width: 64px;
|
|
text-align: center;
|
|
padding: 6px 4px 0 4px;
|
|
margin-bottom: 10px;
|
|
border-top: 1px solid lightgray; }
|
|
|
|
.extension-details {
|
|
font-size: 11px;
|
|
color: #b9b9b9; }
|
|
.extension-details a {
|
|
color: gray;
|
|
text-decoration: none; }
|
|
.extension-details ul {
|
|
padding: 0; }
|
|
.extension-details li {
|
|
display: inline-block; }
|
|
.extension-details li:after {
|
|
content: " • ";
|
|
color: lightgray; }
|
|
.extension-details li:last-of-type:after {
|
|
content: none; } }
|
|
@media screen and (min-width: 480px) {
|
|
.send-message-area {
|
|
padding-left: 258px; } }
|
|
@media screen and (min-width: 822px) {
|
|
.send-message-area {
|
|
padding-right: 258px; } }
|