Cable-Desktop/stylesheets/manifest.css
2015-07-08 14:28:09 -07:00

745 lines
18 KiB
CSS

@font-face {
font-family: 'Roboto-Light';
src: url("/fonts/Roboto-Light.ttf") format("truetype"); }
@font-face {
font-family: 'Roboto';
src: url("/fonts/Roboto-Regular.ttf") format("truetype"); }
@font-face {
font-family: 'Roboto';
src: url("/fonts/Roboto-Italic.ttf") format("truetype");
font-style: italic; }
@font-face {
font-family: 'Roboto';
src: url("/fonts/Roboto-Bold.ttf") format("truetype");
font-weight: bold; }
* {
box-sizing: border-box; }
html {
height: 100%;
border: solid 1px #ccc; }
body {
position: relative;
height: 100%;
width: 100%;
margin: 0;
font-family: Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 14px; }
.clearfix:before,
.clearfix:after {
display: table;
content: " "; }
.clearfix:after {
clear: both; }
.hide {
display: none; }
#header {
position: fixed;
top: 1px;
width: calc(100% - 2px);
z-index: 1;
height: 36px;
line-height: 24px;
color: #f2f2f2;
box-shadow: 0 -4px 3px 4px rgba(10, 62, 103, 0.8);
background-color: #2090ea;
-webkit-app-region: drag; }
#header button {
-webkit-app-region: no-drag;
color: inherit;
background-color: #2090ea; }
#header button:hover {
background-color: rgba(19, 117, 196, 0.8); }
.window-controls {
float: right; }
.title-text {
display: block;
text-align: center;
height: 36px;
line-height: 36px;
font-family: Roboto-Light, "Helvetica Neue", Arial, Helvetica, sans-serif; }
.title-bar button {
width: 36px;
height: 36px;
line-height: 36px;
padding: 0;
border: 0;
outline: 0; }
button {
cursor: pointer; }
button.back {
float: left;
background: #2090ea url("/images/back.png") no-repeat center center; }
button.back + .title-text {
text-indent: -36px; }
.menu {
position: relative;
float: left;
height: 36px;
padding-right: 8px; }
.menu .hamburger {
width: 36px;
background: url("/images/menu.png") no-repeat center; }
.menu .menu-list {
display: none;
position: absolute;
color: #454545;
z-index: 1;
top: 100%;
left: 0;
margin: 0;
padding: 0;
border: solid 1px #2090ea;
background-color: white;
box-shadow: 0 4px 3px 0px rgba(10, 62, 103, 0.8); }
.menu .menu-list li {
display: block;
white-space: nowrap; }
.menu .menu-list li a {
cursor: pointer;
display: block;
padding: 5px 15px 5px 10px; }
.menu .menu-list li a:hover {
background-color: #f3f3f3; }
.file-input {
position: relative;
margin-right: 10px;
cursor: pointer; }
.file-input .paperclip {
width: 36px;
height: 100%;
background: url("/images/paperclip.png") no-repeat center center;
background-size: 90%;
margin-top: 4px; }
.file-input input[type=file] {
display: none;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
top: 0;
left: 0;
cursor: pointer;
z-index: 1; }
.file-input .close {
font-family: sans-serif;
color: white;
position: absolute;
top: 0;
right: -8px;
cursor: default;
border-radius: 50%;
width: 20px;
height: 20px;
padding: 0px;
background: #666;
color: #fff;
text-align: center; }
img.emoji {
height: 1em;
width: 1em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em; }
.avatar {
display: inline-block;
height: 44px;
width: 44px;
background: #f3f3f3 url("/images/default.png") no-repeat center;
border-radius: 50%;
background-size: cover;
vertical-align: middle;
text-align: center;
line-height: 44px;
overflow-x: hidden;
text-overflow: ellipsis;
color: white; }
.new-group-update-form {
background: white; }
.new-group-update-form .group-avatar {
float: left; }
.new-group-update-form .group-default {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
border-radius: 50%;
background: #f3f3f3 url("/images/group_default.png") no-repeat center; }
.new-group-update-form .file-input .thumbnail, .new-group-update-form .thumbnail .avatar,
.new-group-update-form img {
height: 54px;
width: 54px;
border-radius: 27px; }
.new-group-update-form .thumbnail:after {
content: '';
position: absolute;
height: 0;
width: 0;
bottom: 0;
right: 0;
border-bottom: 10px solid #616161;
border-left: 10px solid transparent; }
.new-group-update-form input.name {
padding: 0.5em;
border: solid 1px #ccc;
border-width: 0 0 1px 0;
width: calc(100% - 64px); }
.new-group-update-form .results {
width: calc(100% - 20px);
margin: 0 0 0 20px; }
.new-group-update-form .results .contact {
z-index: 10; }
.new-group-update-form .members .contact {
box-shadow: none;
border-bottom: 1px solid #eee; }
.new-group-update-form .members .contact .last-message, .new-group-update-form .members .contact .last-timestamp {
display: none; }
.new-group-update-form .members .contact:hover {
background: white;
cursor: auto; }
.title-bar .check {
float: right;
background: url("/images/check.png") no-repeat center center; }
.contact {
position: relative;
padding: 12px;
background: white;
cursor: pointer;
transition: background 0.2s;
white-space: nowrap;
overflow: hidden;
box-shadow: 0 1px 3px rgba(170, 170, 170, 0.8); }
.contact:hover {
background: #f8f8f8; }
.contact:last-child::after {
display: none; }
.contact .contact-details {
vertical-align: top;
display: inline-block;
margin: 4px 0 0 8px;
width: calc(100% - 44px - 8px); }
.contact .contact-details p {
overflow-x: hidden;
text-overflow: ellipsis; }
.contact .contact-name {
margin: 0;
font-size: 1em;
font-weight: 400; }
.recipients-input .recipients-container {
background-color: white;
padding: 2px;
border-bottom: 1px solid #f2f2f2;
line-height: 24px; }
.recipients-input .recipient {
display: inline-block;
margin: 0 2px 2px 0;
padding: 0 5px;
border-radius: 10px;
background-color: #2090ea;
color: white; }
.recipients-input .recipient.error {
background-color: #f00; }
.recipients-input .recipient .remove {
margin-left: 5px;
padding: 0 2px; }
.recipients-input .contact .number {
display: inline-block; }
.recipients-input .contact .last-message, .recipients-input .contact .last-timestamp {
display: none; }
.recipients-input .contact .number {
color: #616161;
font-size: small; }
.attachment-preview {
width: 100%;
height: 100%;
background: white; }
.attachment-preview img {
width: 100%; }
.avatar.colorgray {
background-color: #999999; }
.avatar.color0 {
background-color: #e57373; }
.avatar.color1 {
background-color: #f06292; }
.avatar.color2 {
background-color: #ba68c8; }
.avatar.color3 {
background-color: #9575cd; }
.avatar.color4 {
background-color: #7986cb; }
.avatar.color5 {
background-color: #64b5f6; }
.avatar.color6 {
background-color: #4fc3f7; }
.avatar.color7 {
background-color: #4dd0e1; }
.avatar.color8 {
background-color: #4db6ac; }
.avatar.color9 {
background-color: #81c784; }
.avatar.color10 {
background-color: #aed581; }
.avatar.color11 {
background-color: #ff8a65; }
.avatar.color12 {
background-color: #d4e157; }
.avatar.color13 {
background-color: #ffd54f; }
.avatar.color14 {
background-color: #ffb74d; }
.avatar.color15 {
background-color: #a1887f; }
.avatar.color16 {
background-color: #90a4ae; }
.gutter {
padding: 36px 0 0; }
.new-conversation, .inbox, .gutter {
height: 100%; }
.scrollable {
height: 100%;
overflow: auto; }
.socket-status {
float: left;
padding: 6px;
-webkit-app-region: no-drag; }
.socket-status * {
cursor: pointer;
padding-left: 20px;
border-radius: 36px;
min-height: 20px; }
.socket-status *:hover {
background: #2090ea url("/images/refresh.png") center; }
.socket-status .connecting .icon {
background-color: #2090ea; }
.socket-status .closing {
background-color: #a2d2f4; }
.socket-status .closed {
background: url("/images/error_red.png") no-repeat left center; }
.contact .number, .contact .checkbox {
display: none; }
input.search {
border: none;
padding: 0;
margin: 0;
outline: 0; }
.fab {
z-index: 1;
position: fixed;
right: 25px;
bottom: 22px;
height: 50px;
width: 50px;
border: 0;
border-radius: 30px;
outline: 0;
font: 300 36px Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
color: white;
background: #2090ea url("/images/pencil.png") no-repeat center center;
box-shadow: 0 8px 8px -8px rgba(1, 6, 10, 0.8);
transition: box-shadow 0.33s, transform 0.33s, background 0.33s; }
.fab:hover {
background-color: #1689e5;
box-shadow: 0 8px 18px -8px rgba(1, 6, 10, 0.9);
transform: translate3d(0, -1px, 0); }
.last-timestamp {
font-size: smaller; }
.new-contact {
display: none; }
.new-contact .contact-name {
display: none; }
.new-contact .contact-details::before {
content: 'Create new contact';
display: block;
font-style: italic;
opacity: 0.7;
padding-right: 8px; }
.index {
color: #454545;
background: #eee; }
.index .new-group-update-form {
display: none;
padding: 0.5em; }
.index .last-message {
margin: 6px 0;
font-size: small;
font-weight: 300; }
.index .timestamp {
position: absolute;
top: 14px;
right: 12px;
color: #888; }
.settings {
height: 100%;
width: 100%;
background: red;
display: none; }
.settings-open .settings {
display: block; }
.conversations .unread .contact-details .contact-name,
.conversations .unread .contact-details .last-message,
.conversations .unread .contact-details .last-timestamp {
font-weight: bold; }
.conversation .file-input .close {
top: -10px; }
.conversation .conversation-title {
display: block;
line-height: 36px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.conversation #header {
position: inherit; }
.conversation .discussion-container {
height: calc(100% - 2 * 36px); }
.conversation + .new-group-update-form,
.conversation, .message-list, .message-detail, .key-verification {
height: 100%; }
.key-verification {
padding: 36px 0 0; }
.key-verification .container {
height: 100%;
overflow: auto; }
.key-verification p {
padding: 1em; }
.key-verification .key {
font-family: monospace;
padding: 0 1em; }
.message-detail {
padding: 36px 0 0;
background: #f3f3f3; }
.message-detail .container {
height: 100%;
overflow: auto; }
.message-detail .message-container {
background: white;
padding: 1em 0; }
.message-detail .message-container .sender {
display: none; }
.message-detail .info {
padding: 1em; }
.message-detail .info .label {
text-align: right;
font-weight: bold;
padding-right: 1em; }
.message-detail .conflict {
border: none;
border-radius: 5px;
color: white;
padding: 0.5em;
font-weight: bold;
background: #d00; }
.message-detail .conflict:before {
content: '';
display: inline-block;
vertical-align: middle;
width: 18px;
height: 18px;
background: url("/images/error.png") no-repeat center center;
background-size: 100%; }
.message-detail .conflict span {
vertical-align: middle;
padding-left: 5px; }
.group-update {
font-size: smaller; }
.new-group-update-form .container {
height: 100%;
padding-top: 36px; }
.new-group-update-form .scrollable {
padding: 0.5em; }
.private .sender,
.outgoing .sender {
display: none; }
.sender {
font-size: smaller;
opacity: 0.8; }
.timestamp {
font-size: smaller; }
.entry.delivered .checkmark {
display: inline; }
.message-list {
margin: 0;
padding: 1em 0;
overflow-y: auto; }
.message-list .timestamp {
cursor: pointer; }
.message-list .timestamp:hover {
text-decoration: underline; }
.message-detail,
.message-list {
list-style: none; }
.message-detail li,
.message-list li {
margin: 0 8px 16px; }
.message-detail li::after,
.message-list li::after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0; }
.message-detail .bubble,
.message-list .bubble {
position: relative;
left: -2px;
display: inline-block;
vertical-align: top;
max-width: calc(100% - 20px - 2 * 12px);
padding: 9px 12px;
border-radius: 4px;
box-shadow: 0 3px 3px -4px black;
word-wrap: break-word; }
.message-detail .bubble::before, .message-detail .bubble::after,
.message-list .bubble::before,
.message-list .bubble::after {
content: '';
position: absolute;
height: 0;
width: 0; }
.message-detail .bubble::before,
.message-list .bubble::before {
top: 9px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent; }
.message-detail .bubble::after,
.message-list .bubble::after {
top: 11px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent; }
.message-detail .bubble .content,
.message-list .bubble .content {
-webkit-user-select: text; }
.message-detail .bubble .content a,
.message-list .bubble .content a {
word-break: break-all; }
.message-detail .bubble p,
.message-list .bubble p {
margin: 0; }
.message-detail .outgoing .bubble,
.message-list .outgoing .bubble {
opacity: 0.7; }
.message-detail .outgoing.sent .bubble,
.message-list .outgoing.sent .bubble {
opacity: 1.0; }
.message-detail .incoming .bubble,
.message-list .incoming .bubble {
color: #454545;
background: #f3f3f3; }
.message-detail .incoming .bubble::before,
.message-list .incoming .bubble::before {
left: -10px;
border-right: 10px solid white; }
.message-detail .incoming .bubble::after,
.message-list .incoming .bubble::after {
left: -8px;
border-right: 8px solid #f3f3f3; }
.message-detail .outgoing .avatar, .message-detail .outgoing .bubble,
.message-list .outgoing .avatar,
.message-list .outgoing .bubble {
float: right; }
.message-detail .outgoing .bubble,
.message-list .outgoing .bubble {
clear: left;
color: white;
background: #2090ea; }
.message-detail .outgoing .bubble .meta,
.message-list .outgoing .bubble .meta {
color: #a2d2f4; }
.message-detail .outgoing .bubble::before,
.message-list .outgoing .bubble::before {
right: -10px;
border-left: 10px solid white; }
.message-detail .outgoing .bubble::after,
.message-list .outgoing .bubble::after {
right: -8px;
border-left: 8px solid #2090ea; }
.message-detail .control .bubble .content,
.message-list .control .bubble .content {
font-style: italic; }
.message-detail .control .bubble::before, .message-detail .control .bubble::after,
.message-list .control .bubble::before,
.message-list .control .bubble::after {
display: none; }
.message-detail .attachments img, .message-detail .attachments audio, .message-detail .attachments video,
.message-list .attachments img,
.message-list .attachments audio,
.message-list .attachments video {
max-width: 100%; }
.message-detail .attachments video,
.message-list .attachments video {
background: black; }
.message-detail .outgoing .avatar,
.message-list .outgoing .avatar {
display: none; }
.message-detail .avatar,
.message-list .avatar {
height: 36px;
width: 36px;
line-height: 36px; }
.message-detail .meta,
.message-list .meta {
margin-top: 3px;
float: right; }
.message-detail .end-session,
.message-list .end-session {
font: small;
font-style: italic;
opacity: 0.8; }
.message-detail .error,
.message-list .error {
font-style: italic; }
.message-detail .key-conflict,
.message-list .key-conflict {
padding: 15px 10px; }
.message-detail .key-conflict button,
.message-list .key-conflict button {
margin-top: 5px; }
.key-conflict-dialogue {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: 36px; }
.key-conflict-dialogue .content {
padding: 1em;
background: white;
color: black;
box-shadow: 0 0 5px 0 black; }
.key-conflict-dialogue .verify {
color: #2090ea;
text-decoration: underline;
cursor: pointer; }
.bottom-bar {
position: fixed;
bottom: 1px;
height: 36px;
width: calc(100% - 2px);
border-top: 1px solid #f3f3f3;
background: white; }
.bottom-bar button, .bottom-bar input, .bottom-bar textarea {
color: #454545; }
.bottom-bar button {
position: absolute;
top: 0;
height: 100%;
width: 36px;
padding: 0;
border: 0;
outline: 0;
font-size: 24px;
background: transparent; }
.bottom-bar .attachments {
float: left;
height: 100%; }
.bottom-bar .send-btn {
float: right;
height: 100%;
width: 36px;
border: none;
outline: none;
background: url("/images/send.png") no-repeat;
background-size: 75%;
background-position: center center;
cursor: pointer; }
.bottom-bar .send-btn::before {
content: '+'; }
.bottom-bar form, .bottom-bar input, .bottom-bar textarea {
height: 100%; }
.bottom-bar .send-message {
display: block;
width: calc(100% - 2 * 36px - 20px);
min-height: 35px;
max-height: 100px;
padding: 10px;
border: 0;
outline: 0;
z-index: 5;
resize: none; }
.toast {
position: absolute;
bottom: 0;
margin: 0 2em 3em;
padding: 0.5em 1.5em;
background: rgba(0, 0, 0, 0.75);
color: white;
box-shadow: 0 0 5px 0 black;
border-radius: 20px;
font-size: small; }
.confirmation-dialog {
position: absolute;
top: 36px;
padding: 1em;
background: white;
border: solid 2px #2090ea; }
.confirmation-dialog .message {
text-align: center; }
.confirmation-dialog button {
float: right;
margin-left: 10px; }
/*# sourceMappingURL=manifest.css.map */