426dab85a2
- A new design for the import flow. It features: - Icons at the top of every screen - Gray background, blue buttons, thinner text - Simpler copy - A new design for the install flow. It features: - Immediate entry into the QR code screen - Animated dots to show that we're loading the QR code from the server - Fewer screens: 1) QR 2) device name 3) sync-in-progress - When not set up, the app opens directly into the install screen, which has been streamlined. The `--import` command-line argument will cause the app to open directly into the import flow. - Support for two different flavors of builds - the normal build will open into the standard registration flow, and the import flavor will be exactly the same except during setup it will open directly into the import flow. - A new design for the (dev-only) standalone registration view - When these install sequences are active, the OS File menu has entries to allow you to switch the method of setup you'd like to use. These go away as soon as the first step is taken in any of these flows. - The device name (chosen on initial setup) is now shown in the settings panel - At the end of a light import, we hand off to the normal device link screen, starting at the QR code. On a full import, we remove the sensitive encryption information in the export to prevent conflicts on multiple imports. - `Whisper.Backup.exportToDirectory()` takes an options object so you can tell it to do a light export. - `Whisper.Backup.importFromDirectory()` takes an options object so you can force it to load only the light components found on disk. It also returns an object so you can tell whether a given import was a full import or light import. - On start of import, we build a list of all the ids present in the messages, conversations, and groups stores in IndexedDB. This can take some time if a lot of data is in the database already, but it makes the subsequent deduplicated import very fast. - Disappearing messages are now excluded when exporting - Remove some TODOs in the tests
897 lines
15 KiB
SCSS
897 lines
15 KiB
SCSS
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
font-family: $roboto;
|
|
font-size: 14px;
|
|
color: $grey_d;
|
|
}
|
|
|
|
.clearfix:before,
|
|
.clearfix:after {
|
|
display: table;
|
|
content: " ";
|
|
}
|
|
.clearfix:after {
|
|
clear: both;
|
|
}
|
|
|
|
.hide {
|
|
display: none;
|
|
}
|
|
|
|
#header {
|
|
h1 {
|
|
margin: 0;
|
|
line-height: $header-height;
|
|
padding-left: 20px;
|
|
font-size: 22px;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
.conversation-header button,
|
|
.title-bar button {
|
|
width: $button-height;
|
|
height: $button-height;
|
|
line-height: $button-height;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
font-size: inherit;
|
|
}
|
|
button.grey {
|
|
border-radius: $border-radius;
|
|
border: solid 1px #ccc;
|
|
cursor: pointer;
|
|
margin: 1em auto;
|
|
padding: 1em;
|
|
font-family: inherit;
|
|
color: $grey;
|
|
background: $grey_l;
|
|
box-shadow: 0 0 10px -5px rgba($grey, 0.5);
|
|
|
|
&:hover {
|
|
box-shadow: 0 0 10px -3px rgba($grey, 0.7);
|
|
}
|
|
|
|
&[disabled=disabled] {
|
|
&, &:hover {
|
|
opacity: 0.5;
|
|
box-shadow: none;
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
|
|
a { color: $blue; }
|
|
|
|
button.back {
|
|
@include header-icon-black('../images/back.svg');
|
|
}
|
|
button.clock {
|
|
@include header-icon-black('../images/clock.svg');
|
|
}
|
|
button.hamburger {
|
|
@include header-icon-black('../images/menu.svg');
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(0,0,0,0.15);
|
|
border-radius: $border-radius;
|
|
|
|
&:hover {
|
|
background: rgba(0,0,0,0.25);
|
|
}
|
|
}
|
|
|
|
.header-buttons {
|
|
&.left {
|
|
float: left;
|
|
padding-left: 10px;
|
|
}
|
|
&.right {
|
|
float: right;
|
|
padding-right: 10px;
|
|
}
|
|
height: 0;
|
|
|
|
.vertical-align {
|
|
height: $header-height;
|
|
vertical-align: middle;
|
|
display: table-cell;
|
|
}
|
|
}
|
|
|
|
.conversation-header .timer-menu {
|
|
margin-right: 10px;
|
|
|
|
&:before {
|
|
content: attr(data-time);
|
|
display: inline-block;
|
|
position: absolute;
|
|
bottom: -10px;
|
|
height: 10px;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 8px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.menu {
|
|
position: relative;
|
|
float: right;
|
|
|
|
.hamburger {
|
|
width: $button-height;
|
|
height: $button-height;
|
|
vertical-align: middle;
|
|
}
|
|
.menu-list {
|
|
display: none;
|
|
position: absolute;
|
|
color: $grey_d;
|
|
z-index: 50;
|
|
text-align: initial;
|
|
|
|
top: 100%;
|
|
right: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: white;
|
|
box-shadow: 0 0 1px 1px rgba(0,0,0, 0.2);
|
|
|
|
li {
|
|
display: block;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
padding: 5px 15px 5px 10px;
|
|
|
|
&:hover {
|
|
background-color: $grey_l;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.file-input {
|
|
position: relative;
|
|
.choose-file {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.paperclip {
|
|
width: 36px;
|
|
height: 36px;
|
|
padding: 0;
|
|
opacity: 0.5;
|
|
border: none;
|
|
background: transparent;
|
|
|
|
&:before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: $button-height;
|
|
height: $button-height;
|
|
@include color-svg('../images/paperclip.svg', $grey);
|
|
transform: rotateZ(-45deg);
|
|
}
|
|
|
|
&:focus, &:hover {
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
input[type=file] {
|
|
display: none;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
top: 0;
|
|
left: 0;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.dropoff {
|
|
outline: solid 1px $blue;
|
|
}
|
|
|
|
$avatar-size: 44px;
|
|
|
|
.avatar {
|
|
display: inline-block;
|
|
height: $avatar-size;
|
|
width: $avatar-size;
|
|
border-radius: 50%;
|
|
background-size: cover;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
line-height: $avatar-size;
|
|
overflow-x: hidden;
|
|
text-overflow: ellipsis;
|
|
color: white;
|
|
font-size: 18px;
|
|
@include avatar-colors;
|
|
}
|
|
|
|
.group-info-input {
|
|
background: white;
|
|
|
|
.group-avatar {
|
|
display: inline-block;
|
|
padding: 2px 0px 0px 2px;
|
|
}
|
|
|
|
.file-input .thumbnail, .thumbnail .avatar,
|
|
img {
|
|
height: 54px;
|
|
width: 54px;
|
|
border-radius: (54px / 2);
|
|
}
|
|
|
|
.thumbnail:after {
|
|
content: '';
|
|
position: absolute;
|
|
height: 0;
|
|
width: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
border-bottom: 10px solid $grey;
|
|
border-left: 10px solid transparent;
|
|
}
|
|
|
|
input.name {
|
|
padding: 0.5em;
|
|
border: solid 1px #ccc;
|
|
border-width: 0 0 1px 0;
|
|
width: calc(100% - 84px);
|
|
}
|
|
}
|
|
|
|
.group-member-list,
|
|
.new-group-update {
|
|
.summary {
|
|
margin: 10px;
|
|
}
|
|
|
|
.members .contact {
|
|
box-shadow: none;
|
|
border-bottom: 1px solid #eee;
|
|
.last-message, .last-timestamp {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.profileName {
|
|
font-size: smaller;
|
|
|
|
&:before {
|
|
content: '~';
|
|
}
|
|
}
|
|
|
|
.conversation-list-item {
|
|
cursor: pointer;
|
|
&:hover {
|
|
background: #f8f8f8;
|
|
}
|
|
|
|
.number {
|
|
display: none;
|
|
}
|
|
|
|
.unread-count {
|
|
float: right;
|
|
margin: 3px 10px 0 20px;
|
|
display: inline-block;
|
|
padding: 0 3px;
|
|
min-width: $unread-badge-size;
|
|
height: $unread-badge-size;
|
|
line-height: $unread-badge-size;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
border-radius: $border-radius;
|
|
background-color: $blue;
|
|
color: white;
|
|
border: solid 1px rgba(255,255,255,0.6);
|
|
}
|
|
}
|
|
.inactive .contact.selected {
|
|
padding-left: 8px;
|
|
border-left: 4px solid $blue;
|
|
}
|
|
.contact {
|
|
padding: 12px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
background: rgba(255,255,255,0.6);
|
|
margin: 1px;
|
|
|
|
&.selected {
|
|
background: rgb(236, 243, 252);
|
|
}
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&:last-child::after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.banner {
|
|
// what's the right color?
|
|
background-color: $blue_l;
|
|
color: black;
|
|
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
|
|
|
|
position: absolute;
|
|
top: 25px;
|
|
right: 30px;
|
|
left: 30px;
|
|
|
|
padding: 5px 25px 5px 10px;
|
|
|
|
text-align: center;
|
|
border-radius: 10px;
|
|
|
|
cursor: pointer;
|
|
|
|
.warning {
|
|
width: 18px;
|
|
height: 18px;
|
|
display: inline-block;
|
|
vertical-align: text-bottom;
|
|
@include color-svg('../images/warning.svg', black);
|
|
}
|
|
|
|
.dismiss {
|
|
position: absolute;
|
|
right: 3px;
|
|
top: 3px;
|
|
|
|
height: 23px;
|
|
width: 23px;
|
|
@include color-svg('../images/x.svg', black);
|
|
}
|
|
}
|
|
|
|
.contact-details {
|
|
$left-margin: 8px;
|
|
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
margin: 0 0 0 $left-margin;
|
|
width: calc(100% - #{$avatar-size} - #{$left-margin} - #{(4/14) + em});
|
|
text-align: left;
|
|
|
|
p {
|
|
overflow-x: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.name {
|
|
display: block;
|
|
margin: 0;
|
|
font-size: 1em;
|
|
text-overflow: ellipsis;
|
|
overflow-x: hidden;
|
|
text-align: left;
|
|
}
|
|
|
|
.number {
|
|
color: $grey;
|
|
font-size: $font-size-small;
|
|
}
|
|
|
|
&.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.verified-icon {
|
|
@include color-svg('../images/verified-check.svg', $grey);
|
|
display: inline-block;
|
|
width: 1.25em;
|
|
height: 1.25em;
|
|
vertical-align: text-bottom;
|
|
}
|
|
}
|
|
|
|
|
|
.recipients-input {
|
|
position: relative;
|
|
|
|
.recipients-container {
|
|
background-color: white;
|
|
padding: 2px;
|
|
border-bottom: 1px solid #f2f2f2;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.recipient {
|
|
display: inline-block;
|
|
margin: 0 2px 2px 0;
|
|
padding: 0 5px;
|
|
border-radius: 10px;
|
|
background-color: $blue;
|
|
color: white;
|
|
|
|
&.error {
|
|
background-color: #f00;
|
|
}
|
|
|
|
.remove {
|
|
margin-left: 5px;
|
|
padding: 0 2px;
|
|
}
|
|
}
|
|
|
|
.results {
|
|
position: absolute;
|
|
z-index: 10;
|
|
margin: 0 0 0 20px;
|
|
width: calc(100% - 30px);
|
|
max-width: 300px;
|
|
max-height: 55px * 3;
|
|
overflow-y: auto;
|
|
box-shadow: 0px 0px 1px rgba(#aaa, 0.8);
|
|
|
|
.contact {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.attachment-preview {
|
|
display: inline-block;
|
|
position: relative;
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
}
|
|
.new-conversation .recipients-input .recipients::before {
|
|
content: 'To: ';
|
|
}
|
|
.new-group-update .recipients-input .recipients::before {
|
|
content: 'Add: ';
|
|
}
|
|
|
|
.loading {
|
|
position: relative;
|
|
&::before {
|
|
display: block;
|
|
margin: 0px auto;
|
|
content: " ";
|
|
height: $loading-height;
|
|
width: $loading-height;
|
|
border-radius: 2 * $loading-height;
|
|
border: solid 3px;
|
|
border-color: $blue_l $blue_l $grey_l $grey_l !important;
|
|
animation: rotate 1s linear infinite;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
}
|
|
|
|
.x {
|
|
display: inline-block;
|
|
float: right;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
width: 22px;
|
|
height: 22px;
|
|
padding: 3px;
|
|
background: $grey;
|
|
|
|
&:before {
|
|
content: '';
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
@include color-svg('../images/x.svg', white);
|
|
}
|
|
}
|
|
|
|
input[type=text], input[type=search], textarea {
|
|
&:active, &:focus {
|
|
outline: 1px solid $blue;
|
|
}
|
|
}
|
|
|
|
.expiredAlert {
|
|
background: #F3F3A7;
|
|
padding: 10px;
|
|
|
|
button {
|
|
float: right;
|
|
border: none;
|
|
border-radius: $border-radius;
|
|
color: white;
|
|
font-weight: bold;
|
|
line-height: 36px;
|
|
padding: 0 20px;
|
|
background: $blue;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.message {
|
|
padding: 10px 0;
|
|
}
|
|
}
|
|
|
|
.inbox {
|
|
position: relative;
|
|
}
|
|
|
|
@keyframes loading {
|
|
50% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.app-loading-screen {
|
|
z-index: 99;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
background-color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.content {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
}
|
|
.container {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 78px;
|
|
height: 22px;
|
|
}
|
|
.message {
|
|
-webkit-user-select: text;
|
|
max-width: 35em;
|
|
}
|
|
|
|
.dot {
|
|
width: 14px;
|
|
height: 14px;
|
|
border: 3px solid $blue;
|
|
border-radius: 50%;
|
|
float: left;
|
|
margin: 0 6px;
|
|
transform: scale(0);
|
|
|
|
animation: loading 1500ms ease infinite 0ms;
|
|
&:nth-child(2) {
|
|
animation: loading 1500ms ease infinite 333ms;
|
|
}
|
|
&:nth-child(3) {
|
|
animation: loading 1500ms ease infinite 666ms;
|
|
}
|
|
}
|
|
}
|
|
|
|
.full-screen-flow {
|
|
z-index: 1000;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
font-family: roboto-light;
|
|
|
|
color: black;
|
|
a {
|
|
color: $blue;
|
|
}
|
|
background: linear-gradient(
|
|
to bottom,
|
|
rgb(238,238,238) 0%, // (1 - 0.41) * 255 + 0.41 * 213
|
|
rgb(243,243,243) 12%, // (1 - 0.19) * 255 + 0.19 * 191
|
|
rgb(255,255,255) 27%,
|
|
rgb(255,255,255) 60%,
|
|
rgb(249,249,249) 85%, // (1 - 0.19) * 255 + 0.19 * 222
|
|
rgb(213,213,213) 100% // (1 - 0.27) * 255 + 0.27 * 98
|
|
);
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
|
|
font-size: 10pt;
|
|
input {
|
|
margin-top: 1em;
|
|
font-size: 12pt;
|
|
font-family: roboto-light;
|
|
border: 2px solid $blue;
|
|
padding: 0.5em;
|
|
text-align: center;
|
|
width: 20em;
|
|
}
|
|
|
|
@media (min-height: 750px) and (min-width: 700px) {
|
|
font-size: 14pt;
|
|
|
|
input {
|
|
font-size: 16pt;
|
|
}
|
|
}
|
|
|
|
#qr {
|
|
display: inline-block;
|
|
|
|
&.ready {
|
|
border: 5px solid $blue;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
img {
|
|
height: 20em;
|
|
border: 5px solid white;
|
|
}
|
|
|
|
@media (max-height: 475px) {
|
|
img {
|
|
width: 8em;
|
|
height: 8em;
|
|
}
|
|
}
|
|
|
|
.dot {
|
|
width: 14px;
|
|
height: 14px;
|
|
border: 3px solid $blue;
|
|
border-radius: 50%;
|
|
float: left;
|
|
margin: 0 6px;
|
|
transform: scale(0);
|
|
|
|
animation: loading 1500ms ease infinite 0ms;
|
|
&:nth-child(2) {
|
|
animation: loading 1500ms ease infinite 333ms;
|
|
}
|
|
&:nth-child(3) {
|
|
animation: loading 1500ms ease infinite 666ms;
|
|
}
|
|
}
|
|
|
|
canvas {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.os-icon {
|
|
height: 3em;
|
|
width: 3em;
|
|
vertical-align: text-bottom;
|
|
display: inline-block;
|
|
margin: 0.5em;
|
|
|
|
&.apple {
|
|
@include color-svg('../images/apple.svg', black);
|
|
}
|
|
&.android {
|
|
@include color-svg('../images/android.svg', black);
|
|
}
|
|
}
|
|
|
|
.header {
|
|
font-weight: normal;
|
|
margin-bottom: 1.5em;
|
|
|
|
font-size: 20pt;
|
|
|
|
@media (min-height: 750px) and (min-width: 700px) {
|
|
font-size: 28pt;
|
|
}
|
|
}
|
|
|
|
.body-text {
|
|
max-width: 22em;
|
|
text-align: left;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.body-text-wide {
|
|
max-width: 30em;
|
|
text-align: left;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.step {
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 70px 0 50px;
|
|
}
|
|
.step-body {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 35em;
|
|
}
|
|
|
|
.inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.banner-image {
|
|
margin: 1em;
|
|
display: none;
|
|
|
|
@media (min-height: 550px) {
|
|
display: inline-block;
|
|
height: 10em;
|
|
width: 10em;
|
|
}
|
|
}
|
|
|
|
.banner-icon {
|
|
display: none;
|
|
margin: 1em;
|
|
|
|
// 640px by 338px is the smallest the window can go
|
|
@media (min-height: 550px) {
|
|
display: inline-block;
|
|
height: 10em;
|
|
width: 10em;
|
|
}
|
|
|
|
// generic
|
|
&.check-circle-outline {
|
|
@include color-svg('../images/check-circle-outline.svg', #DEDEDE);
|
|
}
|
|
&.alert-outline {
|
|
@include color-svg('../images/alert-outline.svg', #DEDEDE);
|
|
}
|
|
|
|
// import and export
|
|
&.folder-outline {
|
|
@include color-svg('../images/folder-outline.svg', #DEDEDE);
|
|
}
|
|
&.import {
|
|
@include color-svg('../images/import.svg', #DEDEDE);
|
|
}
|
|
&.export {
|
|
@include color-svg('../images/export.svg', #DEDEDE);
|
|
}
|
|
|
|
// registration process
|
|
&.lead-pencil {
|
|
@include color-svg('../images/lead-pencil.svg', #DEDEDE);
|
|
}
|
|
&.sync {
|
|
@include color-svg('../images/sync.svg', #DEDEDE);
|
|
}
|
|
}
|
|
|
|
.button {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
border: none;
|
|
min-width: 300px;
|
|
padding: 0.75em;
|
|
margin-top: 1em;
|
|
color: white;
|
|
background: $blue;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
|
|
|
font-size: 12pt;
|
|
|
|
@media (min-height: 750px) and (min-width: 700px) {
|
|
font-size: 20pt;
|
|
}
|
|
}
|
|
a.link {
|
|
display: block;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
margin: 0.5em;
|
|
color: #2090ea;
|
|
}
|
|
|
|
.progress {
|
|
text-align: center;
|
|
padding: 1em;
|
|
width: 80%;
|
|
margin: auto;
|
|
|
|
.bar-container {
|
|
height: 1em;
|
|
margin: 1em;
|
|
background-color: $grey_l;
|
|
}
|
|
.bar {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: $blue_l;
|
|
transition: width 0.25s;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
|
}
|
|
}
|
|
|
|
.nav {
|
|
width: 100%;
|
|
bottom: 50px;
|
|
margin-top: auto;
|
|
padding-bottom: 2em;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
|
|
.instructions {
|
|
text-align: left;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 2em;
|
|
margin-top: 2em;
|
|
max-width: 30em;
|
|
}
|
|
.instructions:after {
|
|
clear: both;
|
|
}
|
|
.android {
|
|
float: left;
|
|
}
|
|
.apple {
|
|
float: right;
|
|
}
|
|
.label {
|
|
float: left;
|
|
}
|
|
.body {
|
|
float: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
//yellow border fix
|
|
.inbox:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.text-security .inbox {
|
|
.name, .body, .last-message, .sender, .conversation-title, .number {
|
|
-webkit-text-security: square;
|
|
}
|
|
}
|