123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221 |
- @font-face {
- font-family: 'Roboto';
- src: url("/fonts/Roboto-Regular.ttf") format("truetype"); }
- body, input {
- font-family: Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif; }
- body {
- margin: 0; }
- .title-bar {
- position: relative;
- z-index: 1;
- height: 36px;
- line-height: 24px;
- background: #2a92e7;
- box-shadow: 0 -4px 3px 4px rgba(12, 65, 108, 0.8); }
- .title-bar button {
- height: 36px;
- line-height: 36px;
- float: right;
- margin-right: 8px;
- padding: 0;
- border: 0;
- outline: 0;
- font-size: 36px;
- color: white;
- background: transparent; }
- .fab {
- z-index: 1;
- position: fixed;
- right: 16px;
- bottom: 22px;
- height: 60px;
- width: 60px;
- border: 0;
- border-radius: 30px;
- outline: 0;
- font: 300 36px Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
- color: white;
- background: #2a92e7;
- box-shadow: 0 8px 8px -8px rgba(2, 10, 16, 0.8);
- transition: box-shadow 0.33s, transform 0.33s, background 0.33s; }
- .fab:hover {
- background: #1c8be5;
- box-shadow: 0 8px 18px -8px rgba(2, 10, 16, 0.9);
- transform: translate3d(0, -1px, 0); }
- button {
- cursor: pointer; }
- .timestamp {
- font-size: 12px; }
- .message-list {
- margin-bottom: 52px;
- padding: 0;
- list-style: none;
- font-size: 16px;
- font-weight: 300; }
- .message-list li {
- margin: 0 8px 16px; }
- .message-list li::after {
- visibility: hidden;
- display: block;
- font-size: 0;
- content: " ";
- clear: both;
- height: 0; }
- .message-list p {
- margin: 0; }
- .message-list .bubble {
- position: relative;
- left: -2px;
- display: inline-block;
- vertical-align: top;
- max-width: calc(100% - 2 * 54px - 2 * 12px - 8px);
- padding: 9px 12px;
- border-radius: 4px;
- box-shadow: 0 3px 3px -4px black; }
- .message-list .bubble::before, .message-list .bubble::after {
- content: '';
- position: absolute;
- height: 0;
- width: 0; }
- .message-list .bubble::before {
- top: 19px;
- border-top: 8px solid transparent;
- border-bottom: 8px solid transparent; }
- .message-list .bubble::after {
- top: 21px;
- border-top: 6px solid transparent;
- border-bottom: 6px solid transparent; }
- .message-list .incoming .bubble {
- color: #454545;
- background: #f3f3f3; }
- .message-list .incoming .bubble::before {
- left: -10px;
- border-right: 10px solid white; }
- .message-list .incoming .bubble::after {
- left: -8px;
- border-right: 8px solid #f3f3f3; }
- .message-list .outgoing img, .message-list .outgoing .bubble {
- float: right; }
- .message-list .outgoing .bubble {
- clear: left;
- color: white;
- background: #2a92e7; }
- .message-list .outgoing .bubble .timestamp {
- color: #a2d2f4; }
- .message-list .outgoing .bubble::before {
- right: -10px;
- border-left: 10px solid white; }
- .message-list .outgoing .bubble::after {
- right: -8px;
- border-left: 8px solid #2a92e7; }
- .message-list img {
- height: 54px;
- width: 54px;
- box-sizing: border-box;
- border: 27px #2a92e7 solid;
- border-radius: 27px; }
- .message-list .timestamp {
- margin-top: 3px;
- float: right; }
- .bottom-bar {
- position: fixed;
- bottom: 0;
- height: 36px;
- width: 100%;
- border-top: 1px solid #f3f3f3;
- background: white; }
- .bottom-bar button, .bottom-bar input {
- 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-btn {
- left: 0; }
- .bottom-bar .send-btn {
- right: 0; }
- .bottom-bar form, .bottom-bar input {
- height: 100%;
- width: 100%; }
- .bottom-bar input {
- height: 100%;
- width: 100%;
- box-sizing: border-box;
- padding: 0 36px;
- border: 0;
- outline: 0;
- font-size: 16px;
- background: white; }
- .index {
- color: #454545;
- background: #eee; }
- .index .contact {
- position: relative;
- padding: 12px;
- background: white;
- cursor: pointer;
- transition: background 0.2s; }
- .index .contact::after {
- content: '';
- position: absolute;
- right: 16px;
- bottom: 0;
- height: 1px;
- width: calc(100% - 12px - 54px - 2 * 8px - 16px);
- background: #eee; }
- .index .contact:hover {
- background: #f8f8f8; }
- .index .contact:last-child {
- box-shadow: 0 1px 3px rgba(170, 170, 170, 0.8); }
- .index .contact:last-child::after {
- display: none; }
- .index .contact-details {
- vertical-align: top;
- display: inline-block;
- width: calc(100% - 54px - 2 * 12px - 8px);
- margin: 4px 0 0 8px; }
- .index .contact-name {
- margin: 0;
- font-size: 16px;
- font-weight: 400; }
- .index .last-message {
- margin: 6px 0;
- font-size: 14px;
- font-weight: 300; }
- .index .timestamp {
- position: absolute;
- top: 14px;
- right: 12px;
- color: #888; }
- .index img {
- height: 54px;
- width: 54px;
- box-sizing: border-box;
- border: 27px #f3f3f3 solid;
- border-radius: 27px; }
- .index .message-list {
- display: none; }
- .settings {
- height: 100%;
- width: 100%;
- background: red;
- display: none; }
- .settings-open .settings {
- display: block; }
- /*# sourceMappingURL=manifest.css.map */
|