Prettier: Format all stylesheets
This commit is contained in:
Daniel Gasienica
parent
8ee250d37e
commit
557693e14c
17 changed files with 729 additions and 381 deletions
|
|
@ -15,7 +15,8 @@
|
|||
.conversation.placeholder .conversation-header {
|
||||
display: none;
|
||||
}
|
||||
.conversation-header, .bubble {
|
||||
.conversation-header,
|
||||
.bubble {
|
||||
@include avatar-colors;
|
||||
}
|
||||
.bottom-bar {
|
||||
|
|
@ -38,10 +39,16 @@
|
|||
}
|
||||
|
||||
.incoming .bubble {
|
||||
.sender, .content, .body, .meta, a, .fileView {
|
||||
.sender,
|
||||
.content,
|
||||
.body,
|
||||
.meta,
|
||||
a,
|
||||
.fileView {
|
||||
@include invert-text-color;
|
||||
}
|
||||
.attachments, .content {
|
||||
.attachments,
|
||||
.content {
|
||||
a {
|
||||
color: $grey_l;
|
||||
}
|
||||
|
|
@ -79,5 +86,4 @@
|
|||
.inactive button.back {
|
||||
@include header-icon-black('../images/back.svg');
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
}
|
||||
.conversation-name + .conversation-number {
|
||||
&:before {
|
||||
content:"\00b7"; // ·
|
||||
content: '\00b7'; // ·
|
||||
font-weight: bold;
|
||||
padding: 0 5px 0 4px;
|
||||
}
|
||||
}
|
||||
.conversation-title .verified {
|
||||
&:before {
|
||||
content:"\00b7"; // ·
|
||||
content: '\00b7'; // ·
|
||||
font-weight: bold;
|
||||
padding: 0 5px 0 4px;
|
||||
}
|
||||
|
|
@ -149,7 +149,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.key, .placeholder {
|
||||
.key,
|
||||
.placeholder {
|
||||
padding: 0 1em;
|
||||
-webkit-user-select: text;
|
||||
}
|
||||
|
|
@ -285,7 +286,6 @@
|
|||
font-weight: bold;
|
||||
color: red;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
|
@ -358,7 +358,9 @@ li.entry .error-icon-container {
|
|||
}
|
||||
}
|
||||
|
||||
&:hover .error-message { display: inline-block; }
|
||||
&:hover .error-message {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
li.entry .menu-container {
|
||||
position: absolute;
|
||||
|
|
@ -399,7 +401,6 @@ li.entry.outgoing .menu-container {
|
|||
right: auto;
|
||||
}
|
||||
|
||||
|
||||
.error-icon {
|
||||
display: inline-block;
|
||||
width: $error-icon-size;
|
||||
|
|
@ -426,7 +427,6 @@ li.entry.outgoing .menu-container {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.group-update {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
|
@ -469,7 +469,9 @@ span.status {
|
|||
.pending span.status {
|
||||
display: inline-block;
|
||||
background: none;
|
||||
&:before { content: '...'; }
|
||||
&:before {
|
||||
content: '...';
|
||||
}
|
||||
}
|
||||
|
||||
.message-container,
|
||||
|
|
@ -487,7 +489,7 @@ span.status {
|
|||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: " ";
|
||||
content: ' ';
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
|
|
@ -504,15 +506,17 @@ span.status {
|
|||
text-align: -webkit-auto;
|
||||
-webkit-user-select: text;
|
||||
|
||||
@media(max-width: 825px) {
|
||||
max-width: calc(100% - 45px - #{$error-icon-size}); // avatar size + padding + error-icon size
|
||||
@media (max-width: 825px) {
|
||||
max-width: calc(
|
||||
100% - 45px - #{$error-icon-size}
|
||||
); // avatar size + padding + error-icon size
|
||||
}
|
||||
|
||||
.body {
|
||||
white-space: pre-wrap;
|
||||
|
||||
a {
|
||||
word-break: break-all
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -536,7 +540,7 @@ span.status {
|
|||
|
||||
.hasRetry + .timestamp {
|
||||
&:before {
|
||||
content:"\00b7"; // ·
|
||||
content: '\00b7'; // ·
|
||||
font-weight: bold;
|
||||
padding: 0 5px 0 4px;
|
||||
text-decoration: none;
|
||||
|
|
@ -556,22 +560,27 @@ span.status {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hasRetry, .timestamp, .status, .timer {
|
||||
.hasRetry,
|
||||
.timestamp,
|
||||
.status,
|
||||
.timer {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.timestamp, .status {
|
||||
.timestamp,
|
||||
.status {
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.incoming {
|
||||
.avatar, .bubble {
|
||||
.avatar,
|
||||
.bubble {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
|
@ -585,7 +594,8 @@ span.status {
|
|||
right: calc(100% + 5px);
|
||||
}
|
||||
|
||||
.avatar, .bubble {
|
||||
.avatar,
|
||||
.bubble {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
|
@ -595,11 +605,21 @@ span.status {
|
|||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% { transform: translateX(0px); }
|
||||
25% { transform: translateX(-5px); }
|
||||
50% { transform: translateX(0px); }
|
||||
75% { transform: translateX(5px); }
|
||||
100% { transform: translateX(0px); }
|
||||
0% {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
|
||||
.expired .bubble {
|
||||
|
|
@ -619,7 +639,8 @@ span.status {
|
|||
font-style: italic;
|
||||
}
|
||||
|
||||
&::before, &::after {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -633,7 +654,9 @@ span.status {
|
|||
background-color: #ccc;
|
||||
}
|
||||
|
||||
img, audio, video {
|
||||
img,
|
||||
audio,
|
||||
video {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 300px;
|
||||
|
|
@ -673,13 +696,15 @@ span.status {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon, .text {
|
||||
.icon,
|
||||
.text {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.icon, .text {
|
||||
opacity: 1.0;
|
||||
.icon,
|
||||
.text {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -703,7 +728,6 @@ span.status {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.outgoing .avatar {
|
||||
|
|
@ -735,8 +759,10 @@ span.status {
|
|||
background-color: #eee;
|
||||
position: relative;
|
||||
|
||||
margin-right: $android-bubble-quote-padding - $android-bubble-padding-horizontal;
|
||||
margin-left: $android-bubble-quote-padding - $android-bubble-padding-horizontal;
|
||||
margin-right: $android-bubble-quote-padding -
|
||||
$android-bubble-padding-horizontal;
|
||||
margin-left: $android-bubble-quote-padding -
|
||||
$android-bubble-padding-horizontal;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
// Accent color border:
|
||||
|
|
@ -908,7 +934,6 @@ span.status {
|
|||
border-left-color: white;
|
||||
}
|
||||
|
||||
|
||||
.message-list,
|
||||
.message-container {
|
||||
.avatar {
|
||||
|
|
@ -962,7 +987,8 @@ span.status {
|
|||
}
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
input,
|
||||
textarea {
|
||||
color: $grey_d;
|
||||
}
|
||||
|
||||
|
|
@ -971,7 +997,6 @@ span.status {
|
|||
|
||||
.attachment-preview {
|
||||
padding: 13px 10px 0;
|
||||
|
||||
}
|
||||
img {
|
||||
border: 2px solid #ddd;
|
||||
|
|
@ -1016,7 +1041,7 @@ span.status {
|
|||
font-size: 1em;
|
||||
font-family: inherit;
|
||||
|
||||
&[disabled=disabled] {
|
||||
&[disabled='disabled'] {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
|
@ -1026,9 +1051,8 @@ span.status {
|
|||
}
|
||||
.android-length-warning {
|
||||
padding: 10px;
|
||||
max-width:150px;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.toast {
|
||||
|
|
@ -1120,7 +1144,6 @@ span.status {
|
|||
padding-top: 25px;
|
||||
padding-bottom: 35px;
|
||||
|
||||
|
||||
.bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -1137,7 +1160,7 @@ span.status {
|
|||
.text {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .06em;
|
||||
letter-spacing: 0.06em;
|
||||
background-color: white;
|
||||
border-radius: 1.5em;
|
||||
padding: 10px 21px 9px 21px;
|
||||
|
|
@ -1156,7 +1179,7 @@ span.status {
|
|||
text-align: center;
|
||||
background-color: white;
|
||||
border: none;
|
||||
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
|
||||
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
|
||||
outline: none;
|
||||
|
||||
.icon {
|
||||
|
|
@ -1168,7 +1191,7 @@ span.status {
|
|||
background-color: #616161;
|
||||
}
|
||||
|
||||
&.new-messages {
|
||||
&.new-messages {
|
||||
background-color: $blue;
|
||||
.icon {
|
||||
@include color-svg('../images/down.svg', white);
|
||||
|
|
|
|||
|
|
@ -67,6 +67,5 @@
|
|||
border: solid 1px #ccc;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,83 +1,83 @@
|
|||
span.emoji {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
*vertical-align: auto;
|
||||
*zoom: 1;
|
||||
*display: inline;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: 1em;
|
||||
background-repeat: no-repeat;
|
||||
text-indent: -9999px;
|
||||
background-position: 50%, 50%;
|
||||
background-size: contain;
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
*vertical-align: auto;
|
||||
*zoom: 1;
|
||||
*display: inline;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: 1em;
|
||||
background-repeat: no-repeat;
|
||||
text-indent: -9999px;
|
||||
background-position: 50%, 50%;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
span.emoji-sizer {
|
||||
line-height: 0.81em;
|
||||
font-size: 1em;
|
||||
margin: -2px 0;
|
||||
line-height: 0.81em;
|
||||
font-size: 1em;
|
||||
margin: -2px 0;
|
||||
}
|
||||
|
||||
span.emoji-outer {
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
span.emoji-inner {
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
text-indent: -9999px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: baseline;
|
||||
*vertical-align: auto;
|
||||
*zoom: 1;
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
text-indent: -9999px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: baseline;
|
||||
*vertical-align: auto;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
img.emoji {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
img.emoji.small {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
}
|
||||
img.emoji.medium {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
img.emoji.large {
|
||||
width: 1.75em;
|
||||
height: 1.75em;
|
||||
width: 1.75em;
|
||||
height: 1.75em;
|
||||
}
|
||||
img.emoji.jumbo {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
// we need these, or we'll make conversation items too big in the left-nav
|
||||
.conversations img.emoji.small {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.conversations img.emoji.medium {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.conversations img.emoji.large {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.conversations img.emoji.jumbo {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
button.emoji {
|
||||
|
|
@ -96,8 +96,9 @@ button.emoji {
|
|||
@include color-svg('../images/smile.svg', $grey);
|
||||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
opacity: 1.0;
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -105,9 +106,10 @@ button.emoji {
|
|||
@import '../node_modules/emoji-panel/lib/emoji-panel-apple-32.css';
|
||||
@font-face {
|
||||
font-family: 'apple-category';
|
||||
src: url(../node_modules/emoji-panel/lib/asset/apple.ttf) format("truetype");
|
||||
src: url(../node_modules/emoji-panel/lib/asset/apple.ttf) format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal; }
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.emoji-panel-container {
|
||||
height: 0px;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ body {
|
|||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: " ";
|
||||
content: ' ';
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
|
|
@ -67,8 +67,9 @@ button.grey {
|
|||
box-shadow: 0 0 10px -3px rgba($grey, 0.7);
|
||||
}
|
||||
|
||||
&[disabled=disabled] {
|
||||
&, &:hover {
|
||||
&[disabled='disabled'] {
|
||||
&,
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
box-shadow: none;
|
||||
cursor: default;
|
||||
|
|
@ -76,7 +77,9 @@ button.grey {
|
|||
}
|
||||
}
|
||||
|
||||
a { color: $blue; }
|
||||
a {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
button.back {
|
||||
@include header-icon-black('../images/back.svg');
|
||||
|
|
@ -88,9 +91,8 @@ button.hamburger {
|
|||
@include header-icon-black('../images/menu.svg');
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
|
|
@ -98,11 +100,11 @@ button.hamburger {
|
|||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(0,0,0,0.15);
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border-radius: $border-radius;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0,0,0,0.25);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -161,7 +163,7 @@ button.hamburger {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 1px 1px rgba(0,0,0, 0.2);
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
|
||||
li {
|
||||
display: block;
|
||||
|
|
@ -199,12 +201,13 @@ button.hamburger {
|
|||
transform: rotateZ(-45deg);
|
||||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
opacity: 1.0;
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=file] {
|
||||
input[type='file'] {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -247,7 +250,8 @@ $avatar-size: 44px;
|
|||
padding: 2px 0px 0px 2px;
|
||||
}
|
||||
|
||||
.file-input .thumbnail, .thumbnail .avatar,
|
||||
.file-input .thumbnail,
|
||||
.thumbnail .avatar,
|
||||
img {
|
||||
height: 54px;
|
||||
width: 54px;
|
||||
|
|
@ -282,7 +286,8 @@ $avatar-size: 44px;
|
|||
.members .contact {
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid #eee;
|
||||
.last-message, .last-timestamp {
|
||||
.last-message,
|
||||
.last-timestamp {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -319,7 +324,7 @@ $avatar-size: 44px;
|
|||
border-radius: $border-radius;
|
||||
background-color: $blue;
|
||||
color: white;
|
||||
border: solid 1px rgba(255,255,255,0.6);
|
||||
border: solid 1px rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
.inactive .contact.selected {
|
||||
|
|
@ -330,7 +335,7 @@ $avatar-size: 44px;
|
|||
padding: 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
background: rgba(255,255,255,0.6);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
margin: 1px;
|
||||
|
||||
&.selected {
|
||||
|
|
@ -416,15 +421,14 @@ $avatar-size: 44px;
|
|||
}
|
||||
|
||||
.verified-icon {
|
||||
@include color-svg('../images/verified-check.svg', $grey);
|
||||
display: inline-block;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
vertical-align: text-bottom;
|
||||
@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;
|
||||
|
||||
|
|
@ -475,7 +479,6 @@ $avatar-size: 44px;
|
|||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.new-conversation .recipients-input .recipients::before {
|
||||
content: 'To: ';
|
||||
|
|
@ -489,7 +492,7 @@ $avatar-size: 44px;
|
|||
&::before {
|
||||
display: block;
|
||||
margin: 0px auto;
|
||||
content: " ";
|
||||
content: ' ';
|
||||
height: $loading-height;
|
||||
width: $loading-height;
|
||||
border-radius: 2 * $loading-height;
|
||||
|
|
@ -499,7 +502,9 @@ $avatar-size: 44px;
|
|||
}
|
||||
|
||||
@keyframes rotate {
|
||||
to { transform: rotate(360deg); }
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -522,14 +527,17 @@ $avatar-size: 44px;
|
|||
}
|
||||
}
|
||||
|
||||
input[type=text], input[type=search], textarea {
|
||||
&:active, &:focus {
|
||||
input[type='text'],
|
||||
input[type='search'],
|
||||
textarea {
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: 1px solid $blue;
|
||||
}
|
||||
}
|
||||
|
||||
.expiredAlert {
|
||||
background: #F3F3A7;
|
||||
background: #f3f3a7;
|
||||
padding: 10px;
|
||||
|
||||
button {
|
||||
|
|
@ -628,12 +636,13 @@ input[type=text], input[type=search], textarea {
|
|||
}
|
||||
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
|
||||
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;
|
||||
|
|
@ -787,29 +796,29 @@ input[type=text], input[type=search], textarea {
|
|||
|
||||
// generic
|
||||
&.check-circle-outline {
|
||||
@include color-svg('../images/check-circle-outline.svg', #DEDEDE);
|
||||
@include color-svg('../images/check-circle-outline.svg', #dedede);
|
||||
}
|
||||
&.alert-outline {
|
||||
@include color-svg('../images/alert-outline.svg', #DEDEDE);
|
||||
@include color-svg('../images/alert-outline.svg', #dedede);
|
||||
}
|
||||
|
||||
// import and export
|
||||
&.folder-outline {
|
||||
@include color-svg('../images/folder-outline.svg', #DEDEDE);
|
||||
@include color-svg('../images/folder-outline.svg', #dedede);
|
||||
}
|
||||
&.import {
|
||||
@include color-svg('../images/import.svg', #DEDEDE);
|
||||
@include color-svg('../images/import.svg', #dedede);
|
||||
}
|
||||
&.export {
|
||||
@include color-svg('../images/export.svg', #DEDEDE);
|
||||
@include color-svg('../images/export.svg', #dedede);
|
||||
}
|
||||
|
||||
// registration process
|
||||
&.lead-pencil {
|
||||
@include color-svg('../images/lead-pencil.svg', #DEDEDE);
|
||||
@include color-svg('../images/lead-pencil.svg', #dedede);
|
||||
}
|
||||
&.sync {
|
||||
@include color-svg('../images/sync.svg', #DEDEDE);
|
||||
@include color-svg('../images/sync.svg', #dedede);
|
||||
}
|
||||
|
||||
// delete
|
||||
|
|
@ -817,7 +826,7 @@ input[type=text], input[type=search], textarea {
|
|||
@include color-svg('../images/alert-outline.svg', red);
|
||||
}
|
||||
&.delete {
|
||||
@include color-svg('../images/delete.svg', #DEDEDE);
|
||||
@include color-svg('../images/delete.svg', #dedede);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -838,7 +847,7 @@ input[type=text], input[type=search], textarea {
|
|||
|
||||
&.neutral {
|
||||
color: black;
|
||||
background: #DEDEDE;
|
||||
background: #dedede;
|
||||
}
|
||||
&.destructive {
|
||||
background: red;
|
||||
|
|
@ -912,11 +921,16 @@ input[type=text], input[type=search], textarea {
|
|||
|
||||
//yellow border fix
|
||||
.inbox:focus {
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.text-security .inbox {
|
||||
.name, .body, .last-message, .sender, .conversation-title, .number {
|
||||
-webkit-text-security: square;
|
||||
.name,
|
||||
.body,
|
||||
.last-message,
|
||||
.sender,
|
||||
.conversation-title,
|
||||
.number {
|
||||
-webkit-text-security: square;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,16 @@
|
|||
@include color-svg('../images/hourglass_full.svg', transparent);
|
||||
background-size: 100%;
|
||||
|
||||
&, .sand, &:before, &:after {
|
||||
&,
|
||||
.sand,
|
||||
&:before,
|
||||
&:after {
|
||||
width: 13px;
|
||||
height: 11px;
|
||||
}
|
||||
.sand, &:before, &:after {
|
||||
.sand,
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
.conversation-stack,
|
||||
.new-conversation, .inbox, .gutter {
|
||||
.new-conversation,
|
||||
.inbox,
|
||||
.gutter {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.expired {
|
||||
.conversation-stack, .gutter {
|
||||
.conversation-stack,
|
||||
.gutter {
|
||||
height: calc(100% - 56px);
|
||||
}
|
||||
}
|
||||
|
|
@ -36,7 +39,7 @@
|
|||
padding-left: 2 * $button-height;
|
||||
display: none;
|
||||
|
||||
.network-status-message{
|
||||
.network-status-message {
|
||||
h3 {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
|
|
@ -79,7 +82,7 @@
|
|||
color: white;
|
||||
background-color: #999999;
|
||||
transition: background-color 0.5s;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.2);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
|
||||
.avatar {
|
||||
margin-bottom: -30px;
|
||||
|
|
@ -94,7 +97,7 @@
|
|||
.inactive .conversation-header {
|
||||
background-color: $grey_l !important;
|
||||
color: $grey_d;
|
||||
border-color: rgba(0,0,0,0.05);
|
||||
border-color: rgba(0, 0, 0, 0.05);
|
||||
.verified-icon {
|
||||
@include color-svg('../images/verified-check.svg', $grey_d);
|
||||
}
|
||||
|
|
@ -137,11 +140,11 @@ input.search {
|
|||
background-size: $search-x-size;
|
||||
|
||||
&.ltr {
|
||||
background-position : right $search-padding-right center;
|
||||
background-position: right $search-padding-right center;
|
||||
}
|
||||
|
||||
&.rtl {
|
||||
background-position : left $search-padding-left center;
|
||||
background-position: left $search-padding-left center;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -175,12 +178,11 @@ input.search {
|
|||
}
|
||||
|
||||
&.valid {
|
||||
opacity: 1.0
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.index {
|
||||
|
||||
.gutter .new-group-update-form {
|
||||
display: none;
|
||||
padding: 0.5em;
|
||||
|
|
@ -198,15 +200,14 @@ input.search {
|
|||
right: 12px;
|
||||
color: $grey;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.conversations .unread .contact-details {
|
||||
.name,
|
||||
.last-message,
|
||||
.last-timestamp {
|
||||
font-weight: bold;
|
||||
}
|
||||
.name,
|
||||
.last-message,
|
||||
.last-timestamp {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.hint {
|
||||
|
|
@ -226,7 +227,8 @@ input.search {
|
|||
left: 302px;
|
||||
width: 225px;
|
||||
|
||||
&:before, &:after {
|
||||
&:before,
|
||||
&:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -271,8 +273,11 @@ input.search {
|
|||
color: white;
|
||||
border: 2px dashed white;
|
||||
overflow: visible;
|
||||
p { color: white; }
|
||||
&:before, &:after {
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
$ios-header-border-color: rgba(0,0,0,0.05);
|
||||
$ios-border-color: rgba(0,0,0,0.1);
|
||||
$ios-header-border-color: rgba(0, 0, 0, 0.05);
|
||||
$ios-border-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
.ios {
|
||||
#header {
|
||||
|
|
@ -8,7 +8,9 @@ $ios-border-color: rgba(0,0,0,0.1);
|
|||
border-width: 0 1px 1px 0;
|
||||
background-color: $grey_l;
|
||||
color: $grey_d;
|
||||
h1 { display: none; }
|
||||
h1 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.gutter {
|
||||
border-right: 1px solid $ios-border-color;
|
||||
|
|
@ -37,11 +39,11 @@ $ios-border-color: rgba(0,0,0,0.1);
|
|||
float: left;
|
||||
padding: 15px;
|
||||
}
|
||||
input[type=text]:active,
|
||||
input[type=text]:focus,
|
||||
input[type=search]:active,
|
||||
input[type=search]:focus,
|
||||
input[type=search].active,
|
||||
input[type='text']:active,
|
||||
input[type='text']:focus,
|
||||
input[type='search']:active,
|
||||
input[type='search']:focus,
|
||||
input[type='search'].active,
|
||||
form.active {
|
||||
outline-offset: 0;
|
||||
outline: -webkit-focus-ring-color auto 5px;
|
||||
|
|
@ -54,7 +56,7 @@ $ios-border-color: rgba(0,0,0,0.1);
|
|||
line-height: 34px;
|
||||
background-color: #dddddd;
|
||||
&.active.rtl {
|
||||
background-position : left $search-padding-left-ios center;
|
||||
background-position: left $search-padding-left-ios center;
|
||||
}
|
||||
}
|
||||
.conversation-header {
|
||||
|
|
@ -77,7 +79,9 @@ $ios-border-color: rgba(0,0,0,0.1);
|
|||
}
|
||||
}
|
||||
|
||||
.avatar { display: none; }
|
||||
.avatar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.conversation .panel,
|
||||
|
|
@ -299,7 +303,8 @@ $ios-border-color: rgba(0,0,0,0.1);
|
|||
padding-top: 0px;
|
||||
padding-bottom: 5px;
|
||||
|
||||
video, audio {
|
||||
video,
|
||||
audio {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
|
@ -325,7 +330,8 @@ $ios-border-color: rgba(0,0,0,0.1);
|
|||
.tail-wrapper.with-tail {
|
||||
position: relative;
|
||||
|
||||
&:before, &:after {
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
border-radius: 20px;
|
||||
|
|
@ -379,7 +385,9 @@ $ios-border-color: rgba(0,0,0,0.1);
|
|||
background-color: $blue;
|
||||
}
|
||||
|
||||
&, .body, a {
|
||||
&,
|
||||
.body,
|
||||
a {
|
||||
@include invert-text-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,135 +1,341 @@
|
|||
@mixin color-svg($svg, $color) {
|
||||
-webkit-mask: url($svg) no-repeat center;
|
||||
-webkit-mask-size: 100%;
|
||||
background-color: $color;
|
||||
-webkit-mask: url($svg) no-repeat center;
|
||||
-webkit-mask-size: 100%;
|
||||
background-color: $color;
|
||||
}
|
||||
@mixin header-icon-white($svg) {
|
||||
@include color-svg($svg, rgba(255,255,255, 0.8));
|
||||
&:focus, &:hover {
|
||||
@include color-svg($svg, rgba(255, 255, 255, 0.8));
|
||||
&:focus,
|
||||
&:hover {
|
||||
@include color-svg($svg, white);
|
||||
}
|
||||
}
|
||||
@mixin header-icon-black($svg) {
|
||||
@include color-svg($svg, rgba(0,0,0, 0.5));
|
||||
&:focus, &:hover {
|
||||
@include color-svg($svg, rgba(0, 0, 0, 0.5));
|
||||
&:focus,
|
||||
&:hover {
|
||||
@include color-svg($svg, black);
|
||||
}
|
||||
}
|
||||
@mixin avatar-colors {
|
||||
&.red { background-color: $material_red ; }
|
||||
&.pink { background-color: $material_pink ; }
|
||||
&.purple { background-color: $material_purple ; }
|
||||
&.deep_purple { background-color: $material_deep_purple ; }
|
||||
&.indigo { background-color: $material_indigo ; }
|
||||
&.blue { background-color: $material_blue ; }
|
||||
&.light_blue { background-color: $material_light_blue ; }
|
||||
&.cyan { background-color: $material_cyan ; }
|
||||
&.teal { background-color: $material_teal ; }
|
||||
&.green { background-color: $material_green ; }
|
||||
&.light_green { background-color: $material_light_green ; }
|
||||
&.orange { background-color: $material_orange ; }
|
||||
&.deep_orange { background-color: $material_deep_orange ; }
|
||||
&.amber { background-color: $material_amber ; }
|
||||
&.blue_grey { background-color: $material_blue_grey ; }
|
||||
&.grey { background-color: #999999 ; }
|
||||
&.default { background-color: $blue ; }
|
||||
&.red {
|
||||
background-color: $material_red;
|
||||
}
|
||||
&.pink {
|
||||
background-color: $material_pink;
|
||||
}
|
||||
&.purple {
|
||||
background-color: $material_purple;
|
||||
}
|
||||
&.deep_purple {
|
||||
background-color: $material_deep_purple;
|
||||
}
|
||||
&.indigo {
|
||||
background-color: $material_indigo;
|
||||
}
|
||||
&.blue {
|
||||
background-color: $material_blue;
|
||||
}
|
||||
&.light_blue {
|
||||
background-color: $material_light_blue;
|
||||
}
|
||||
&.cyan {
|
||||
background-color: $material_cyan;
|
||||
}
|
||||
&.teal {
|
||||
background-color: $material_teal;
|
||||
}
|
||||
&.green {
|
||||
background-color: $material_green;
|
||||
}
|
||||
&.light_green {
|
||||
background-color: $material_light_green;
|
||||
}
|
||||
&.orange {
|
||||
background-color: $material_orange;
|
||||
}
|
||||
&.deep_orange {
|
||||
background-color: $material_deep_orange;
|
||||
}
|
||||
&.amber {
|
||||
background-color: $material_amber;
|
||||
}
|
||||
&.blue_grey {
|
||||
background-color: $material_blue_grey;
|
||||
}
|
||||
&.grey {
|
||||
background-color: #999999;
|
||||
}
|
||||
&.default {
|
||||
background-color: $blue;
|
||||
}
|
||||
}
|
||||
@mixin dark-avatar-colors {
|
||||
&.red { background-color: $dark_material_red ; }
|
||||
&.pink { background-color: $dark_material_pink ; }
|
||||
&.purple { background-color: $dark_material_purple ; }
|
||||
&.deep_purple { background-color: $dark_material_deep_purple ; }
|
||||
&.indigo { background-color: $dark_material_indigo ; }
|
||||
&.blue { background-color: $dark_material_blue ; }
|
||||
&.light_blue { background-color: $dark_material_light_blue ; }
|
||||
&.cyan { background-color: $dark_material_cyan ; }
|
||||
&.teal { background-color: $dark_material_teal ; }
|
||||
&.green { background-color: $dark_material_green ; }
|
||||
&.light_green { background-color: $dark_material_light_green ; }
|
||||
&.orange { background-color: $dark_material_orange ; }
|
||||
&.deep_orange { background-color: $dark_material_deep_orange ; }
|
||||
&.amber { background-color: $dark_material_amber ; }
|
||||
&.blue_grey { background-color: $dark_material_blue_grey ; }
|
||||
&.grey { background-color: #666666 ; }
|
||||
&.default { background-color: $blue ; }
|
||||
&.red {
|
||||
background-color: $dark_material_red;
|
||||
}
|
||||
&.pink {
|
||||
background-color: $dark_material_pink;
|
||||
}
|
||||
&.purple {
|
||||
background-color: $dark_material_purple;
|
||||
}
|
||||
&.deep_purple {
|
||||
background-color: $dark_material_deep_purple;
|
||||
}
|
||||
&.indigo {
|
||||
background-color: $dark_material_indigo;
|
||||
}
|
||||
&.blue {
|
||||
background-color: $dark_material_blue;
|
||||
}
|
||||
&.light_blue {
|
||||
background-color: $dark_material_light_blue;
|
||||
}
|
||||
&.cyan {
|
||||
background-color: $dark_material_cyan;
|
||||
}
|
||||
&.teal {
|
||||
background-color: $dark_material_teal;
|
||||
}
|
||||
&.green {
|
||||
background-color: $dark_material_green;
|
||||
}
|
||||
&.light_green {
|
||||
background-color: $dark_material_light_green;
|
||||
}
|
||||
&.orange {
|
||||
background-color: $dark_material_orange;
|
||||
}
|
||||
&.deep_orange {
|
||||
background-color: $dark_material_deep_orange;
|
||||
}
|
||||
&.amber {
|
||||
background-color: $dark_material_amber;
|
||||
}
|
||||
&.blue_grey {
|
||||
background-color: $dark_material_blue_grey;
|
||||
}
|
||||
&.grey {
|
||||
background-color: #666666;
|
||||
}
|
||||
&.default {
|
||||
background-color: $blue;
|
||||
}
|
||||
}
|
||||
@mixin twenty-percent-colors {
|
||||
&.red { background-color: rgba($dark_material_red, 0.2) ; }
|
||||
&.pink { background-color: rgba($dark_material_pink, 0.2) ; }
|
||||
&.purple { background-color: rgba($dark_material_purple, 0.2) ; }
|
||||
&.deep_purple { background-color: rgba($dark_material_deep_purple, 0.2) ; }
|
||||
&.indigo { background-color: rgba($dark_material_indigo, 0.2) ; }
|
||||
&.blue { background-color: rgba($dark_material_blue, 0.2) ; }
|
||||
&.light_blue { background-color: rgba($dark_material_light_blue, 0.2) ; }
|
||||
&.cyan { background-color: rgba($dark_material_cyan, 0.2) ; }
|
||||
&.teal { background-color: rgba($dark_material_teal, 0.2) ; }
|
||||
&.green { background-color: rgba($dark_material_green, 0.2) ; }
|
||||
&.light_green { background-color: rgba($dark_material_light_green, 0.2) ; }
|
||||
&.orange { background-color: rgba($dark_material_orange, 0.2) ; }
|
||||
&.deep_orange { background-color: rgba($dark_material_deep_orange, 0.2) ; }
|
||||
&.amber { background-color: rgba($dark_material_amber, 0.2) ; }
|
||||
&.blue_grey { background-color: rgba($dark_material_blue_grey, 0.2) ; }
|
||||
&.grey { background-color: rgba(#666666, 0.2) ; }
|
||||
&.default { background-color: rgba($blue, 0.2) ; }
|
||||
&.red {
|
||||
background-color: rgba($dark_material_red, 0.2);
|
||||
}
|
||||
&.pink {
|
||||
background-color: rgba($dark_material_pink, 0.2);
|
||||
}
|
||||
&.purple {
|
||||
background-color: rgba($dark_material_purple, 0.2);
|
||||
}
|
||||
&.deep_purple {
|
||||
background-color: rgba($dark_material_deep_purple, 0.2);
|
||||
}
|
||||
&.indigo {
|
||||
background-color: rgba($dark_material_indigo, 0.2);
|
||||
}
|
||||
&.blue {
|
||||
background-color: rgba($dark_material_blue, 0.2);
|
||||
}
|
||||
&.light_blue {
|
||||
background-color: rgba($dark_material_light_blue, 0.2);
|
||||
}
|
||||
&.cyan {
|
||||
background-color: rgba($dark_material_cyan, 0.2);
|
||||
}
|
||||
&.teal {
|
||||
background-color: rgba($dark_material_teal, 0.2);
|
||||
}
|
||||
&.green {
|
||||
background-color: rgba($dark_material_green, 0.2);
|
||||
}
|
||||
&.light_green {
|
||||
background-color: rgba($dark_material_light_green, 0.2);
|
||||
}
|
||||
&.orange {
|
||||
background-color: rgba($dark_material_orange, 0.2);
|
||||
}
|
||||
&.deep_orange {
|
||||
background-color: rgba($dark_material_deep_orange, 0.2);
|
||||
}
|
||||
&.amber {
|
||||
background-color: rgba($dark_material_amber, 0.2);
|
||||
}
|
||||
&.blue_grey {
|
||||
background-color: rgba($dark_material_blue_grey, 0.2);
|
||||
}
|
||||
&.grey {
|
||||
background-color: rgba(#666666, 0.2);
|
||||
}
|
||||
&.default {
|
||||
background-color: rgba($blue, 0.2);
|
||||
}
|
||||
}
|
||||
@mixin text-colors {
|
||||
&.red { color: $material_red ; }
|
||||
&.pink { color: $material_pink ; }
|
||||
&.purple { color: $material_purple ; }
|
||||
&.deep_purple { color: $material_deep_purple ; }
|
||||
&.indigo { color: $material_indigo ; }
|
||||
&.blue { color: $material_blue ; }
|
||||
&.light_blue { color: $material_light_blue ; }
|
||||
&.cyan { color: $material_cyan ; }
|
||||
&.teal { color: $material_teal ; }
|
||||
&.green { color: $material_green ; }
|
||||
&.light_green { color: $material_light_green ; }
|
||||
&.orange { color: $material_orange ; }
|
||||
&.deep_orange { color: $material_deep_orange ; }
|
||||
&.amber { color: $material_amber ; }
|
||||
&.blue_grey { color: $material_blue_grey ; }
|
||||
&.grey { color: #999999 ; }
|
||||
&.default { color: $blue ; }
|
||||
&.red {
|
||||
color: $material_red;
|
||||
}
|
||||
&.pink {
|
||||
color: $material_pink;
|
||||
}
|
||||
&.purple {
|
||||
color: $material_purple;
|
||||
}
|
||||
&.deep_purple {
|
||||
color: $material_deep_purple;
|
||||
}
|
||||
&.indigo {
|
||||
color: $material_indigo;
|
||||
}
|
||||
&.blue {
|
||||
color: $material_blue;
|
||||
}
|
||||
&.light_blue {
|
||||
color: $material_light_blue;
|
||||
}
|
||||
&.cyan {
|
||||
color: $material_cyan;
|
||||
}
|
||||
&.teal {
|
||||
color: $material_teal;
|
||||
}
|
||||
&.green {
|
||||
color: $material_green;
|
||||
}
|
||||
&.light_green {
|
||||
color: $material_light_green;
|
||||
}
|
||||
&.orange {
|
||||
color: $material_orange;
|
||||
}
|
||||
&.deep_orange {
|
||||
color: $material_deep_orange;
|
||||
}
|
||||
&.amber {
|
||||
color: $material_amber;
|
||||
}
|
||||
&.blue_grey {
|
||||
color: $material_blue_grey;
|
||||
}
|
||||
&.grey {
|
||||
color: #999999;
|
||||
}
|
||||
&.default {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Deduplicate these! Can SASS functions generate property names?
|
||||
@mixin message-replies-colors {
|
||||
&.red { border-left-color: $material_red ; }
|
||||
&.pink { border-left-color: $material_pink ; }
|
||||
&.purple { border-left-color: $material_purple ; }
|
||||
&.deep_purple { border-left-color: $material_deep_purple ; }
|
||||
&.indigo { border-left-color: $material_indigo ; }
|
||||
&.blue { border-left-color: $material_blue ; }
|
||||
&.light_blue { border-left-color: $material_light_blue ; }
|
||||
&.cyan { border-left-color: $material_cyan ; }
|
||||
&.teal { border-left-color: $material_teal ; }
|
||||
&.green { border-left-color: $material_green ; }
|
||||
&.light_green { border-left-color: $material_light_green ; }
|
||||
&.orange { border-left-color: $material_orange ; }
|
||||
&.deep_orange { border-left-color: $material_deep_orange ; }
|
||||
&.amber { border-left-color: $material_amber ; }
|
||||
&.blue_grey { border-left-color: $material_blue_grey ; }
|
||||
&.grey { border-left-color: #999999 ; }
|
||||
&.default { border-left-color: $blue ; }
|
||||
&.red {
|
||||
border-left-color: $material_red;
|
||||
}
|
||||
&.pink {
|
||||
border-left-color: $material_pink;
|
||||
}
|
||||
&.purple {
|
||||
border-left-color: $material_purple;
|
||||
}
|
||||
&.deep_purple {
|
||||
border-left-color: $material_deep_purple;
|
||||
}
|
||||
&.indigo {
|
||||
border-left-color: $material_indigo;
|
||||
}
|
||||
&.blue {
|
||||
border-left-color: $material_blue;
|
||||
}
|
||||
&.light_blue {
|
||||
border-left-color: $material_light_blue;
|
||||
}
|
||||
&.cyan {
|
||||
border-left-color: $material_cyan;
|
||||
}
|
||||
&.teal {
|
||||
border-left-color: $material_teal;
|
||||
}
|
||||
&.green {
|
||||
border-left-color: $material_green;
|
||||
}
|
||||
&.light_green {
|
||||
border-left-color: $material_light_green;
|
||||
}
|
||||
&.orange {
|
||||
border-left-color: $material_orange;
|
||||
}
|
||||
&.deep_orange {
|
||||
border-left-color: $material_deep_orange;
|
||||
}
|
||||
&.amber {
|
||||
border-left-color: $material_amber;
|
||||
}
|
||||
&.blue_grey {
|
||||
border-left-color: $material_blue_grey;
|
||||
}
|
||||
&.grey {
|
||||
border-left-color: #999999;
|
||||
}
|
||||
&.default {
|
||||
border-left-color: $blue;
|
||||
}
|
||||
}
|
||||
@mixin dark-message-replies-colors {
|
||||
&.red { border-left-color: $dark_material_red ; }
|
||||
&.pink { border-left-color: $dark_material_pink ; }
|
||||
&.purple { border-left-color: $dark_material_purple ; }
|
||||
&.deep_purple { border-left-color: $dark_material_deep_purple ; }
|
||||
&.indigo { border-left-color: $dark_material_indigo ; }
|
||||
&.blue { border-left-color: $dark_material_blue ; }
|
||||
&.light_blue { border-left-color: $dark_material_light_blue ; }
|
||||
&.cyan { border-left-color: $dark_material_cyan ; }
|
||||
&.teal { border-left-color: $dark_material_teal ; }
|
||||
&.green { border-left-color: $dark_material_green ; }
|
||||
&.light_green { border-left-color: $dark_material_light_green ; }
|
||||
&.orange { border-left-color: $dark_material_orange ; }
|
||||
&.deep_orange { border-left-color: $dark_material_deep_orange ; }
|
||||
&.amber { border-left-color: $dark_material_amber ; }
|
||||
&.blue_grey { border-left-color: $dark_material_blue_grey ; }
|
||||
&.grey { border-left-color: #666666 ; }
|
||||
&.default { border-left-color: $blue ; }
|
||||
&.red {
|
||||
border-left-color: $dark_material_red;
|
||||
}
|
||||
&.pink {
|
||||
border-left-color: $dark_material_pink;
|
||||
}
|
||||
&.purple {
|
||||
border-left-color: $dark_material_purple;
|
||||
}
|
||||
&.deep_purple {
|
||||
border-left-color: $dark_material_deep_purple;
|
||||
}
|
||||
&.indigo {
|
||||
border-left-color: $dark_material_indigo;
|
||||
}
|
||||
&.blue {
|
||||
border-left-color: $dark_material_blue;
|
||||
}
|
||||
&.light_blue {
|
||||
border-left-color: $dark_material_light_blue;
|
||||
}
|
||||
&.cyan {
|
||||
border-left-color: $dark_material_cyan;
|
||||
}
|
||||
&.teal {
|
||||
border-left-color: $dark_material_teal;
|
||||
}
|
||||
&.green {
|
||||
border-left-color: $dark_material_green;
|
||||
}
|
||||
&.light_green {
|
||||
border-left-color: $dark_material_light_green;
|
||||
}
|
||||
&.orange {
|
||||
border-left-color: $dark_material_orange;
|
||||
}
|
||||
&.deep_orange {
|
||||
border-left-color: $dark_material_deep_orange;
|
||||
}
|
||||
&.amber {
|
||||
border-left-color: $dark_material_amber;
|
||||
}
|
||||
&.blue_grey {
|
||||
border-left-color: $dark_material_blue_grey;
|
||||
}
|
||||
&.grey {
|
||||
border-left-color: #666666;
|
||||
}
|
||||
&.default {
|
||||
border-left-color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin invert-text-color {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,6 @@
|
|||
background: white;
|
||||
border-radius: $border-radius;
|
||||
overflow: auto;
|
||||
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
|
||||
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,21 +7,75 @@
|
|||
}
|
||||
}
|
||||
.progress-bar-striped {
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
|
||||
background-image: -webkit-linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.75) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.75) 50%,
|
||||
rgba(255, 255, 255, 0.75) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
background-image: -o-linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.75) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.75) 50%,
|
||||
rgba(255, 255, 255, 0.75) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.75) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.75) 50%,
|
||||
rgba(255, 255, 255, 0.75) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
-webkit-background-size: 40px 40px;
|
||||
background-size: 40px 40px;
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
.progress-bar-striped {
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
|
||||
background-image: -webkit-linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.75) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.75) 50%,
|
||||
rgba(255, 255, 255, 0.75) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
background-image: -o-linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.75) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.75) 50%,
|
||||
rgba(255, 255, 255, 0.75) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.75) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.75) 50%,
|
||||
rgba(255, 255, 255, 0.75) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
.progress-bar.active {
|
||||
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
||||
-o-animation: progress-bar-stripes 2s linear infinite;
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
-o-animation: progress-bar-stripes 2s linear infinite;
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
|
||||
.bar-container {
|
||||
|
|
|
|||
|
|
@ -10,8 +10,9 @@
|
|||
padding: 0;
|
||||
border: none;
|
||||
|
||||
&:focus, &:hover {
|
||||
opacity: 1.0;
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:before {
|
||||
|
|
@ -36,8 +37,9 @@
|
|||
text-align: center;
|
||||
padding: 0;
|
||||
|
||||
&:focus, &:hover {
|
||||
opacity: 1.0;
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
@ -51,14 +53,18 @@
|
|||
background: lighten($green, 20%);
|
||||
border: 1px solid $green;
|
||||
|
||||
.icon { @include color-svg('../images/check.svg', $green); }
|
||||
.icon {
|
||||
@include color-svg('../images/check.svg', $green);
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
background: lighten($red, 20%);
|
||||
border: 1px solid $red;
|
||||
|
||||
.icon { @include color-svg('../images/x.svg', $red); }
|
||||
.icon {
|
||||
@include color-svg('../images/x.svg', $red);
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
|
|
@ -68,9 +74,15 @@
|
|||
padding: 0 10px;
|
||||
|
||||
@keyframes pulse {
|
||||
0% { opacity:0; }
|
||||
50% { opacity:1; }
|
||||
100% { opacity:0; }
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
|
|
|
|||
|
|
@ -23,13 +23,13 @@
|
|||
margin: 0 0 20px 20px;
|
||||
}
|
||||
.synced_at {
|
||||
font-size: $font-size-small;
|
||||
color: $grey;
|
||||
font-size: $font-size-small;
|
||||
color: $grey;
|
||||
}
|
||||
.sync_failed {
|
||||
display: none;
|
||||
font-size: $font-size-small;
|
||||
color: red;
|
||||
display: none;
|
||||
font-size: $font-size-small;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
.clear-data-settings {
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ $grey_l3: darken($grey_l, 20%);
|
|||
$grey_l4: darken($grey_l, 40%);
|
||||
$grey: #616161;
|
||||
$grey_d: #454545;
|
||||
$green: #47D647;
|
||||
$red: #EF8989;
|
||||
$green: #47d647;
|
||||
$red: #ef8989;
|
||||
|
||||
$z-index-modal: 100;
|
||||
|
||||
|
|
@ -55,37 +55,37 @@ $error-icon-size: 24px;
|
|||
$font-size: 14px;
|
||||
$font-size-small: (13/14) + em;
|
||||
|
||||
$material_red: #EF5350;
|
||||
$material_pink: #EC407A;
|
||||
$material_purple: #AB47BC;
|
||||
$material_deep_purple: #7E57C2;
|
||||
$material_indigo: #5C6BC0;
|
||||
$material_blue: #2196F3;
|
||||
$material_light_blue: #03A9F4;
|
||||
$material_cyan: #00BCD4;
|
||||
$material_red: #ef5350;
|
||||
$material_pink: #ec407a;
|
||||
$material_purple: #ab47bc;
|
||||
$material_deep_purple: #7e57c2;
|
||||
$material_indigo: #5c6bc0;
|
||||
$material_blue: #2196f3;
|
||||
$material_light_blue: #03a9f4;
|
||||
$material_cyan: #00bcd4;
|
||||
$material_teal: #009688;
|
||||
$material_green: #4CAF50;
|
||||
$material_light_green: #7CB342;
|
||||
$material_orange: #FF9800;
|
||||
$material_deep_orange: #FF5722;
|
||||
$material_amber: #FFB300;
|
||||
$material_blue_grey: #607D8B;
|
||||
$material_green: #4caf50;
|
||||
$material_light_green: #7cb342;
|
||||
$material_orange: #ff9800;
|
||||
$material_deep_orange: #ff5722;
|
||||
$material_amber: #ffb300;
|
||||
$material_blue_grey: #607d8b;
|
||||
|
||||
$dark_material_red: #D32F2F;
|
||||
$dark_material_pink: #C2185B;
|
||||
$dark_material_purple: #7B1FA2;
|
||||
$dark_material_deep_purple: #512DA8;
|
||||
$dark_material_indigo: #303F9F;
|
||||
$dark_material_blue: #1976D2;
|
||||
$dark_material_light_blue: #0288D1;
|
||||
$dark_material_cyan: #0097A7;
|
||||
$dark_material_teal: #00796B;
|
||||
$dark_material_green: #388E3C;
|
||||
$dark_material_light_green: #689F38;
|
||||
$dark_material_orange: #F57C00;
|
||||
$dark_material_deep_orange: #E64A19;
|
||||
$dark_material_amber: #FFA000;
|
||||
$dark_material_blue_grey: #455A64;
|
||||
$dark_material_red: #d32f2f;
|
||||
$dark_material_pink: #c2185b;
|
||||
$dark_material_purple: #7b1fa2;
|
||||
$dark_material_deep_purple: #512da8;
|
||||
$dark_material_indigo: #303f9f;
|
||||
$dark_material_blue: #1976d2;
|
||||
$dark_material_light_blue: #0288d1;
|
||||
$dark_material_cyan: #0097a7;
|
||||
$dark_material_teal: #00796b;
|
||||
$dark_material_green: #388e3c;
|
||||
$dark_material_light_green: #689f38;
|
||||
$dark_material_orange: #f57c00;
|
||||
$dark_material_deep_orange: #e64a19;
|
||||
$dark_material_amber: #ffa000;
|
||||
$dark_material_blue_grey: #455a64;
|
||||
|
||||
// Android
|
||||
$android-bubble-padding-horizontal: 12px;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ $grey-dark_l2: darken($grey-dark, 4%);
|
|||
$grey-dark_l3: darken($grey-dark_l2, 7%);
|
||||
$grey-dark_l4: darken($grey-dark_l3, 8%);
|
||||
$button-dark: #ccc;
|
||||
$text-dark: #CCCCCC;
|
||||
$text-dark: #cccccc;
|
||||
$text-dark_l2: darken($text-dark, 30%);
|
||||
|
||||
.android-dark {
|
||||
|
|
@ -14,7 +14,9 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
background-color: $grey-dark;
|
||||
}
|
||||
color: $text-dark;
|
||||
a { color: #57a5e5; }
|
||||
a {
|
||||
color: #57a5e5;
|
||||
}
|
||||
hr {
|
||||
border-color: $grey-dark;
|
||||
}
|
||||
|
|
@ -40,7 +42,9 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
background-color: darken($button-dark, 8%);
|
||||
}
|
||||
}
|
||||
.message-detail, .message-container, .conversation,
|
||||
.message-detail,
|
||||
.message-container,
|
||||
.conversation,
|
||||
.discussion-container {
|
||||
background-color: $grey-dark_l3;
|
||||
}
|
||||
|
|
@ -87,10 +91,12 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
.contact-details .number {
|
||||
color: $text-dark_l2;
|
||||
.verified-icon {
|
||||
@include color-svg('../images/verified-check.svg', $text-dark_l2);
|
||||
@include color-svg('../images/verified-check.svg', $text-dark_l2);
|
||||
}
|
||||
}
|
||||
.group-member-list .members .contact, .new-group-update .members .contact, .attachment-previews img {
|
||||
.group-member-list .members .contact,
|
||||
.new-group-update .members .contact,
|
||||
.attachment-previews img {
|
||||
background-color: $grey-dark_l3;
|
||||
border-color: $grey-dark;
|
||||
}
|
||||
|
|
@ -100,7 +106,9 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
.conversation .conversation-loading-screen {
|
||||
background-color: $grey-dark_l3;
|
||||
}
|
||||
.avatar, .conversation-header, .bubble {
|
||||
.avatar,
|
||||
.conversation-header,
|
||||
.bubble {
|
||||
@include dark-avatar-colors;
|
||||
}
|
||||
.message-list .advisory {
|
||||
|
|
@ -146,7 +154,7 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
transform: rotateZ(-45deg);
|
||||
}
|
||||
.capture-audio .microphone:before {
|
||||
@include color-svg('../images/microphone.svg', white);
|
||||
@include color-svg('../images/microphone.svg', white);
|
||||
}
|
||||
.conversations {
|
||||
background-color: $grey-dark_l2;
|
||||
|
|
@ -166,7 +174,8 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
background-color: $grey-dark_l3;
|
||||
border-color: $grey-dark_l2;
|
||||
@include invert-text-color;
|
||||
&.active.ltr, &.active.rtl {
|
||||
&.active.ltr,
|
||||
&.active.rtl {
|
||||
background-image: url('../images/x_white.svg');
|
||||
}
|
||||
}
|
||||
|
|
@ -189,7 +198,12 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
}
|
||||
|
||||
.incoming .bubble {
|
||||
.sender, .content, .body, .meta, a, .fileView {
|
||||
.sender,
|
||||
.content,
|
||||
.body,
|
||||
.meta,
|
||||
a,
|
||||
.fileView {
|
||||
@include invert-text-color;
|
||||
}
|
||||
.content {
|
||||
|
|
@ -199,7 +213,7 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
}
|
||||
}
|
||||
|
||||
.incoming .bubble .fileView .icon{
|
||||
.incoming .bubble .fileView .icon {
|
||||
@include color-svg('../images/file.svg', white);
|
||||
&.audio {
|
||||
@include color-svg('../images/audio.svg', white);
|
||||
|
|
@ -213,15 +227,15 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
}
|
||||
|
||||
.outgoing .bubble .fileView .icon {
|
||||
@include color-svg('../images/file.svg', #CCCCCC);
|
||||
@include color-svg('../images/file.svg', #cccccc);
|
||||
&.audio {
|
||||
@include color-svg('../images/audio.svg', #CCCCCC);
|
||||
@include color-svg('../images/audio.svg', #cccccc);
|
||||
}
|
||||
&.video {
|
||||
@include color-svg('../images/video.svg', #CCCCCC);
|
||||
@include color-svg('../images/video.svg', #cccccc);
|
||||
}
|
||||
&.voice {
|
||||
@include color-svg('../images/voice.svg', #CCCCCC);
|
||||
@include color-svg('../images/voice.svg', #cccccc);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -260,10 +274,10 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255,255,255,0.15);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
|
||||
&:hover {
|
||||
background: rgba(255,255,255,0.25);
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
|
|
@ -275,7 +289,7 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
|
||||
.message-list .last-seen-indicator-view {
|
||||
.bar {
|
||||
border-top: 1px solid rgba(255, 255, 255, .0625);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.0625);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
|
|
@ -294,17 +308,17 @@ $text-dark_l2: darken($text-dark, 30%);
|
|||
@include color-svg('../images/down.svg', black);
|
||||
}
|
||||
.icon:hover {
|
||||
background-color: white;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
&.new-messages {
|
||||
&.new-messages {
|
||||
background-color: $blue;
|
||||
.icon {
|
||||
@include color-svg('../images/down.svg', white);
|
||||
}
|
||||
&:hover {
|
||||
background-color: #1472bd;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #1472bd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
// Global Settings, Variables, and Mixins
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'global';
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'global';
|
||||
|
||||
// Components
|
||||
@import 'progress';
|
||||
@import 'hourglass';
|
||||
@import 'modal';
|
||||
@import 'debugLog';
|
||||
@import 'lightbox';
|
||||
@import 'recorder';
|
||||
@import 'emoji';
|
||||
@import 'settings';
|
||||
@import 'progress';
|
||||
@import 'hourglass';
|
||||
@import 'modal';
|
||||
@import 'debugLog';
|
||||
@import 'lightbox';
|
||||
@import 'recorder';
|
||||
@import 'emoji';
|
||||
@import 'settings';
|
||||
|
||||
// Build the main view
|
||||
@import 'index';
|
||||
@import 'conversation';
|
||||
@import 'ios';
|
||||
@import 'android';
|
||||
@import 'android-dark';
|
||||
@import 'index';
|
||||
@import 'conversation';
|
||||
@import 'ios';
|
||||
@import 'android';
|
||||
@import 'android-dark';
|
||||
|
||||
// Installer
|
||||
@import 'options';
|
||||
@import 'options';
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
@import 'progress';
|
||||
.iti-flag {
|
||||
// override intlTelInput's flags image location
|
||||
background: url("../images/flags.png");
|
||||
background: url('../images/flags.png');
|
||||
}
|
||||
|
||||
.intl-tel-input .country-list {
|
||||
|
|
|
|||
Loading…
Reference in a new issue