mirror of
https://github.com/signalapp/Signal-Desktop.git
synced 2026-04-21 00:48:19 +01:00
Update styles to material design to match Android client (first pass)
This commit is contained in:
Riley Shaw
lilia
@@ -1,292 +1,210 @@
|
||||
@charset "UTF-8";
|
||||
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700);
|
||||
body, input {
|
||||
font-family: Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif; }
|
||||
|
||||
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; }
|
||||
margin: 0; }
|
||||
|
||||
/*
|
||||
* 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;
|
||||
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; }
|
||||
.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;
|
||||
|
||||
.message-list {
|
||||
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;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
border-radius: 18px; }
|
||||
.notifications .notification a.button:hover {
|
||||
background-color: lightgray; }
|
||||
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; }
|
||||
|
||||
@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; }
|
||||
.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; }
|
||||
|
||||
.gutter .search {
|
||||
display: none; } }
|
||||
@media screen and (min-width: 480px) {
|
||||
.search {
|
||||
.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; }
|
||||
|
||||
.gutter .search {
|
||||
display: block; } }
|
||||
.gutter {
|
||||
width: 100%;
|
||||
float: left;
|
||||
border-right: 1px solid lightgray;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
overflow: scroll;
|
||||
background-color: white;
|
||||
padding-bottom: 80px;
|
||||
z-index: 100; }
|
||||
.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; }
|
||||
.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; }
|
||||
|
||||
.avatar img {
|
||||
max-width: 100%; }
|
||||
|
||||
@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; } }
|
||||
|
||||
/*# sourceMappingURL=manifest.css.map */
|
||||
|
||||
Reference in New Issue
Block a user