mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Prettier: Format all stylesheets

Browse source
This commit is contained in:
Daniel Gasienica 2018-05-04 16:07:52 -04:00
parent 8ee250d37e
commit 557693e14c
17 changed files with 729 additions and 381 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
stylesheets/_android.scss
View file

@ -15,7 +15,8 @@
.conversation.placeholder .conversation-header { .conversation.placeholder .conversation-header {
display: none; display: none;
} }
.conversation-header, .bubble { .conversation-header,
.bubble {
@include avatar-colors; @include avatar-colors;
} }
.bottom-bar { .bottom-bar {
@ -38,10 +39,16 @@
} }
.incoming .bubble { .incoming .bubble {
.sender, .content, .body, .meta, a, .fileView { .sender,
.content,
.body,
.meta,
a,
.fileView {
@include invert-text-color; @include invert-text-color;
} }
.attachments, .content { .attachments,
.content {
a { a {
color: $grey_l; color: $grey_l;
} }
@ -79,5 +86,4 @@
.inactive button.back { .inactive button.back {
@include header-icon-black('../images/back.svg'); @include header-icon-black('../images/back.svg');
} }
} }

97
stylesheets/_conversation.scss
View file

@ -9,14 +9,14 @@
} }
.conversation-name + .conversation-number { .conversation-name + .conversation-number {
&:before { &:before {
content:"\00b7"; // &middot content: '\00b7'; // &middot
font-weight: bold; font-weight: bold;
padding: 0 5px 0 4px; padding: 0 5px 0 4px;
} }
} }
.conversation-title .verified { .conversation-title .verified {
&:before { &:before {
content:"\00b7"; // &middot content: '\00b7'; // &middot
font-weight: bold; font-weight: bold;
padding: 0 5px 0 4px; padding: 0 5px 0 4px;
} }
@ -149,7 +149,8 @@
} }
} }
.key, .placeholder { .key,
.placeholder {
padding: 0 1em; padding: 0 1em;
-webkit-user-select: text; -webkit-user-select: text;
} }
@ -285,7 +286,6 @@
font-weight: bold; font-weight: bold;
color: red; color: red;
} }
} }
h3 { 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 { li.entry .menu-container {
position: absolute; position: absolute;
@ -399,7 +401,6 @@ li.entry.outgoing .menu-container {
right: auto; right: auto;
} }
.error-icon { .error-icon {
display: inline-block; display: inline-block;
width: $error-icon-size; width: $error-icon-size;
@ -426,7 +427,6 @@ li.entry.outgoing .menu-container {
} }
} }
.group-update { .group-update {
font-size: smaller; font-size: smaller;
} }
@ -469,7 +469,9 @@ span.status {
.pending span.status { .pending span.status {
display: inline-block; display: inline-block;
background: none; background: none;
&:before { content: '...'; } &:before {
content: '...';
}
} }
.message-container, .message-container,
@ -487,7 +489,7 @@ span.status {
visibility: hidden; visibility: hidden;
display: block; display: block;
font-size: 0; font-size: 0;
content: " "; content: ' ';
clear: both; clear: both;
height: 0; height: 0;
} }
@ -505,14 +507,16 @@ span.status {
-webkit-user-select: text; -webkit-user-select: text;
@media (max-width: 825px) { @media (max-width: 825px) {
max-width: calc(100% - 45px - #{$error-icon-size}); // avatar size + padding + error-icon size max-width: calc(
100% - 45px - #{$error-icon-size}
); // avatar size + padding + error-icon size
} }
.body { .body {
white-space: pre-wrap; white-space: pre-wrap;
a { a {
word-break: break-all word-break: break-all;
} }
} }
@ -536,7 +540,7 @@ span.status {
.hasRetry + .timestamp { .hasRetry + .timestamp {
&:before { &:before {
content:"\00b7"; // &middot content: '\00b7'; // &middot
font-weight: bold; font-weight: bold;
padding: 0 5px 0 4px; padding: 0 5px 0 4px;
text-decoration: none; text-decoration: none;
@ -556,22 +560,27 @@ span.status {
cursor: pointer; cursor: pointer;
} }
.hasRetry, .timestamp, .status, .timer { .hasRetry,
.timestamp,
.status,
.timer {
float: left; float: left;
} }
.timestamp, .status { .timestamp,
.status {
cursor: pointer; cursor: pointer;
opacity: 0.5; opacity: 0.5;
&:hover { &:hover {
opacity: 1.0; opacity: 1;
} }
} }
} }
.incoming { .incoming {
.avatar, .bubble { .avatar,
.bubble {
float: left; float: left;
} }
} }
@ -585,7 +594,8 @@ span.status {
right: calc(100% + 5px); right: calc(100% + 5px);
} }
.avatar, .bubble { .avatar,
.bubble {
float: right; float: right;
} }
@ -595,11 +605,21 @@ span.status {
} }
@keyframes shake { @keyframes shake {
0% { transform: translateX(0px); } 0% {
25% { transform: translateX(-5px); } transform: translateX(0px);
50% { transform: translateX(0px); } }
75% { transform: translateX(5px); } 25% {
100% { transform: translateX(0px); } transform: translateX(-5px);
}
50% {
transform: translateX(0px);
}
75% {
transform: translateX(5px);
}
100% {
transform: translateX(0px);
}
} }
.expired .bubble { .expired .bubble {
@ -619,7 +639,8 @@ span.status {
font-style: italic; font-style: italic;
} }
&::before, &::after { &::before,
&::after {
display: none; display: none;
} }
} }
@ -633,7 +654,9 @@ span.status {
background-color: #ccc; background-color: #ccc;
} }
img, audio, video { img,
audio,
video {
display: block; display: block;
max-width: 100%; max-width: 100%;
max-height: 300px; max-height: 300px;
@ -673,13 +696,15 @@ span.status {
overflow: hidden; overflow: hidden;
} }
.icon, .text { .icon,
.text {
opacity: 0.75; opacity: 0.75;
} }
&:hover { &:hover {
.icon, .text { .icon,
opacity: 1.0; .text {
opacity: 1;
} }
} }
@ -703,7 +728,6 @@ span.status {
} }
} }
} }
} }
.outgoing .avatar { .outgoing .avatar {
@ -735,8 +759,10 @@ span.status {
background-color: #eee; background-color: #eee;
position: relative; position: relative;
margin-right: $android-bubble-quote-padding - $android-bubble-padding-horizontal; margin-right: $android-bubble-quote-padding -
margin-left: $android-bubble-quote-padding - $android-bubble-padding-horizontal; $android-bubble-padding-horizontal;
margin-left: $android-bubble-quote-padding -
$android-bubble-padding-horizontal;
margin-bottom: 0.5em; margin-bottom: 0.5em;
// Accent color border: // Accent color border:
@ -908,7 +934,6 @@ span.status {
border-left-color: white; border-left-color: white;
} }
.message-list, .message-list,
.message-container { .message-container {
.avatar { .avatar {
@ -962,7 +987,8 @@ span.status {
} }
} }
input, textarea { input,
textarea {
color: $grey_d; color: $grey_d;
} }
@ -971,7 +997,6 @@ span.status {
.attachment-preview { .attachment-preview {
padding: 13px 10px 0; padding: 13px 10px 0;
} }
img { img {
border: 2px solid #ddd; border: 2px solid #ddd;
@ -1016,7 +1041,7 @@ span.status {
font-size: 1em; font-size: 1em;
font-family: inherit; font-family: inherit;
&[disabled=disabled] { &[disabled='disabled'] {
background: transparent; background: transparent;
} }
} }
@ -1028,7 +1053,6 @@ span.status {
padding: 10px; padding: 10px;
max-width: 150px; max-width: 150px;
} }
} }
.toast { .toast {
@ -1120,7 +1144,6 @@ span.status {
padding-top: 25px; padding-top: 25px;
padding-bottom: 35px; padding-bottom: 35px;
.bar { .bar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -1137,7 +1160,7 @@ span.status {
.text { .text {
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: .06em; letter-spacing: 0.06em;
background-color: white; background-color: white;
border-radius: 1.5em; border-radius: 1.5em;
padding: 10px 21px 9px 21px; padding: 10px 21px 9px 21px;

1
stylesheets/_debugLog.scss
View file

@ -67,6 +67,5 @@
border: solid 1px #ccc; border: solid 1px #ccc;
border-right: none; border-right: none;
} }
} }
} }

10
stylesheets/_emoji.scss
View file

@ -96,8 +96,9 @@ button.emoji {
@include color-svg('../images/smile.svg', $grey); @include color-svg('../images/smile.svg', $grey);
} }
&:focus, &:hover { &:focus,
opacity: 1.0; &:hover {
opacity: 1;
} }
} }
@ -105,9 +106,10 @@ button.emoji {
@import '../node_modules/emoji-panel/lib/emoji-panel-apple-32.css'; @import '../node_modules/emoji-panel/lib/emoji-panel-apple-32.css';
@font-face { @font-face {
font-family: 'apple-category'; 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-weight: normal;
font-style: normal; } font-style: normal;
}
.emoji-panel-container { .emoji-panel-container {
height: 0px; height: 0px;

78
stylesheets/_global.scss
View file

@ -19,7 +19,7 @@ body {
.clearfix:before, .clearfix:before,
.clearfix:after { .clearfix:after {
display: table; display: table;
content: " "; content: ' ';
} }
.clearfix:after { .clearfix:after {
clear: both; clear: both;
@ -67,8 +67,9 @@ button.grey {
box-shadow: 0 0 10px -3px rgba($grey, 0.7); box-shadow: 0 0 10px -3px rgba($grey, 0.7);
} }
&[disabled=disabled] { &[disabled='disabled'] {
&, &:hover { &,
&:hover {
opacity: 0.5; opacity: 0.5;
box-shadow: none; box-shadow: none;
cursor: default; cursor: default;
@ -76,7 +77,9 @@ button.grey {
} }
} }
a { color: $blue; } a {
color: $blue;
}
button.back { button.back {
@include header-icon-black('../images/back.svg'); @include header-icon-black('../images/back.svg');
@ -88,7 +91,6 @@ button.hamburger {
@include header-icon-black('../images/menu.svg'); @include header-icon-black('../images/menu.svg');
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 10px;
} }
@ -199,12 +201,13 @@ button.hamburger {
transform: rotateZ(-45deg); transform: rotateZ(-45deg);
} }
&:focus, &:hover { &:focus,
opacity: 1.0; &:hover {
opacity: 1;
} }
} }
input[type=file] { input[type='file'] {
display: none; display: none;
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -247,7 +250,8 @@ $avatar-size: 44px;
padding: 2px 0px 0px 2px; padding: 2px 0px 0px 2px;
} }
.file-input .thumbnail, .thumbnail .avatar, .file-input .thumbnail,
.thumbnail .avatar,
img { img {
height: 54px; height: 54px;
width: 54px; width: 54px;
@ -282,7 +286,8 @@ $avatar-size: 44px;
.members .contact { .members .contact {
box-shadow: none; box-shadow: none;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
.last-message, .last-timestamp { .last-message,
.last-timestamp {
display: none; display: none;
} }
} }
@ -424,7 +429,6 @@ $avatar-size: 44px;
} }
} }
.recipients-input { .recipients-input {
position: relative; position: relative;
@ -475,7 +479,6 @@ $avatar-size: 44px;
img { img {
max-width: 100%; max-width: 100%;
} }
} }
.new-conversation .recipients-input .recipients::before { .new-conversation .recipients-input .recipients::before {
content: 'To: '; content: 'To: ';
@ -489,7 +492,7 @@ $avatar-size: 44px;
&::before { &::before {
display: block; display: block;
margin: 0px auto; margin: 0px auto;
content: " "; content: ' ';
height: $loading-height; height: $loading-height;
width: $loading-height; width: $loading-height;
border-radius: 2 * $loading-height; border-radius: 2 * $loading-height;
@ -499,7 +502,9 @@ $avatar-size: 44px;
} }
@keyframes rotate { @keyframes rotate {
to { transform: rotate(360deg); } to {
transform: rotate(360deg);
}
} }
} }
@ -522,14 +527,17 @@ $avatar-size: 44px;
} }
} }
input[type=text], input[type=search], textarea { input[type='text'],
&:active, &:focus { input[type='search'],
textarea {
&:active,
&:focus {
outline: 1px solid $blue; outline: 1px solid $blue;
} }
} }
.expiredAlert { .expiredAlert {
background: #F3F3A7; background: #f3f3a7;
padding: 10px; padding: 10px;
button { button {
@ -628,12 +636,13 @@ input[type=text], input[type=search], textarea {
} }
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
rgb(238,238,238) 0%, // (1 - 0.41) * 255 + 0.41 * 213 rgb(238, 238, 238) 0%,
rgb(243,243,243) 12%, // (1 - 0.19) * 255 + 0.19 * 191 /* (1 - 0.41) * 255 + 0.41 * 213*/ rgb(243, 243, 243) 12%,
rgb(255,255,255) 27%, /* (1 - 0.19) * 255 + 0.19 * 191*/ rgb(255, 255, 255) 27%,
rgb(255, 255, 255) 60%, rgb(255, 255, 255) 60%,
rgb(249,249,249) 85%, // (1 - 0.19) * 255 + 0.19 * 222 rgb(249, 249, 249) 85%,
rgb(213,213,213) 100% // (1 - 0.27) * 255 + 0.27 * 98 /* (1 - 0.19) * 255 + 0.19 * 222*/ rgb(213, 213, 213) 100%
/* (1 - 0.27) * 255 + 0.27 * 98*/
); );
display: flex; display: flex;
align-items: center; align-items: center;
@ -787,29 +796,29 @@ input[type=text], input[type=search], textarea {
// generic // generic
&.check-circle-outline { &.check-circle-outline {
@include color-svg('../images/check-circle-outline.svg', #DEDEDE); @include color-svg('../images/check-circle-outline.svg', #dedede);
} }
&.alert-outline { &.alert-outline {
@include color-svg('../images/alert-outline.svg', #DEDEDE); @include color-svg('../images/alert-outline.svg', #dedede);
} }
// import and export // import and export
&.folder-outline { &.folder-outline {
@include color-svg('../images/folder-outline.svg', #DEDEDE); @include color-svg('../images/folder-outline.svg', #dedede);
} }
&.import { &.import {
@include color-svg('../images/import.svg', #DEDEDE); @include color-svg('../images/import.svg', #dedede);
} }
&.export { &.export {
@include color-svg('../images/export.svg', #DEDEDE); @include color-svg('../images/export.svg', #dedede);
} }
// registration process // registration process
&.lead-pencil { &.lead-pencil {
@include color-svg('../images/lead-pencil.svg', #DEDEDE); @include color-svg('../images/lead-pencil.svg', #dedede);
} }
&.sync { &.sync {
@include color-svg('../images/sync.svg', #DEDEDE); @include color-svg('../images/sync.svg', #dedede);
} }
// delete // delete
@ -817,7 +826,7 @@ input[type=text], input[type=search], textarea {
@include color-svg('../images/alert-outline.svg', red); @include color-svg('../images/alert-outline.svg', red);
} }
&.delete { &.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 { &.neutral {
color: black; color: black;
background: #DEDEDE; background: #dedede;
} }
&.destructive { &.destructive {
background: red; background: red;
@ -916,7 +925,12 @@ input[type=text], input[type=search], textarea {
} }
.text-security .inbox { .text-security .inbox {
.name, .body, .last-message, .sender, .conversation-title, .number { .name,
.body,
.last-message,
.sender,
.conversation-title,
.number {
-webkit-text-security: square; -webkit-text-security: square;
} }
} }

9
stylesheets/_hourglass.scss
View file

@ -4,11 +4,16 @@
@include color-svg('../images/hourglass_full.svg', transparent); @include color-svg('../images/hourglass_full.svg', transparent);
background-size: 100%; background-size: 100%;
&, .sand, &:before, &:after { &,
.sand,
&:before,
&:after {
width: 13px; width: 13px;
height: 11px; height: 11px;
} }
.sand, &:before, &:after { .sand,
&:before,
&:after {
content: ''; content: '';
display: inline-block; display: inline-block;
position: absolute; position: absolute;

21
stylesheets/_index.scss
View file

@ -1,10 +1,13 @@
.conversation-stack, .conversation-stack,
.new-conversation, .inbox, .gutter { .new-conversation,
.inbox,
.gutter {
height: 100%; height: 100%;
} }
.expired { .expired {
.conversation-stack, .gutter { .conversation-stack,
.gutter {
height: calc(100% - 56px); height: calc(100% - 56px);
} }
} }
@ -175,12 +178,11 @@ input.search {
} }
&.valid { &.valid {
opacity: 1.0 opacity: 1;
} }
} }
.index { .index {
.gutter .new-group-update-form { .gutter .new-group-update-form {
display: none; display: none;
padding: 0.5em; padding: 0.5em;
@ -198,7 +200,6 @@ input.search {
right: 12px; right: 12px;
color: $grey; color: $grey;
} }
} }
.conversations .unread .contact-details { .conversations .unread .contact-details {
@ -226,7 +227,8 @@ input.search {
left: 302px; left: 302px;
width: 225px; width: 225px;
&:before, &:after { &:before,
&:after {
content: ' '; content: ' ';
display: block; display: block;
position: absolute; position: absolute;
@ -271,8 +273,11 @@ input.search {
color: white; color: white;
border: 2px dashed white; border: 2px dashed white;
overflow: visible; overflow: visible;
p { color: white; } p {
&:before, &:after { color: white;
}
&:before,
&:after {
content: ' '; content: ' ';
display: block; display: block;
position: absolute; position: absolute;

28
stylesheets/_ios.scss
View file

@ -8,7 +8,9 @@ $ios-border-color: rgba(0,0,0,0.1);
border-width: 0 1px 1px 0; border-width: 0 1px 1px 0;
background-color: $grey_l; background-color: $grey_l;
color: $grey_d; color: $grey_d;
h1 { display: none; } h1 {
display: none;
}
} }
.gutter { .gutter {
border-right: 1px solid $ios-border-color; border-right: 1px solid $ios-border-color;
@ -37,11 +39,11 @@ $ios-border-color: rgba(0,0,0,0.1);
float: left; float: left;
padding: 15px; padding: 15px;
} }
input[type=text]:active, input[type='text']:active,
input[type=text]:focus, input[type='text']:focus,
input[type=search]:active, input[type='search']:active,
input[type=search]:focus, input[type='search']:focus,
input[type=search].active, input[type='search'].active,
form.active { form.active {
outline-offset: 0; outline-offset: 0;
outline: -webkit-focus-ring-color auto 5px; outline: -webkit-focus-ring-color auto 5px;
@ -77,7 +79,9 @@ $ios-border-color: rgba(0,0,0,0.1);
} }
} }
.avatar { display: none; } .avatar {
display: none;
}
} }
.conversation .panel, .conversation .panel,
@ -299,7 +303,8 @@ $ios-border-color: rgba(0,0,0,0.1);
padding-top: 0px; padding-top: 0px;
padding-bottom: 5px; padding-bottom: 5px;
video, audio { video,
audio {
margin-bottom: 5px; margin-bottom: 5px;
} }
@ -325,7 +330,8 @@ $ios-border-color: rgba(0,0,0,0.1);
.tail-wrapper.with-tail { .tail-wrapper.with-tail {
position: relative; position: relative;
&:before, &:after { &:before,
&:after {
content: ''; content: '';
display: block; display: block;
border-radius: 20px; border-radius: 20px;
@ -379,7 +385,9 @@ $ios-border-color: rgba(0,0,0,0.1);
background-color: $blue; background-color: $blue;
} }
&, .body, a { &,
.body,
a {
@include invert-text-color; @include invert-text-color;
} }
} }

414
stylesheets/_mixins.scss
View file

@ -5,131 +5,337 @@
} }
@mixin header-icon-white($svg) { @mixin header-icon-white($svg) {
@include color-svg($svg, rgba(255, 255, 255, 0.8)); @include color-svg($svg, rgba(255, 255, 255, 0.8));
&:focus, &:hover { &:focus,
&:hover {
@include color-svg($svg, white); @include color-svg($svg, white);
} }
} }
@mixin header-icon-black($svg) { @mixin header-icon-black($svg) {
@include color-svg($svg, rgba(0, 0, 0, 0.5)); @include color-svg($svg, rgba(0, 0, 0, 0.5));
&:focus, &:hover { &:focus,
&:hover {
@include color-svg($svg, black); @include color-svg($svg, black);
} }
} }
@mixin avatar-colors { @mixin avatar-colors {
&.red { background-color: $material_red ; } &.red {
&.pink { background-color: $material_pink ; } background-color: $material_red;
&.purple { background-color: $material_purple ; } }
&.deep_purple { background-color: $material_deep_purple ; } &.pink {
&.indigo { background-color: $material_indigo ; } background-color: $material_pink;
&.blue { background-color: $material_blue ; } }
&.light_blue { background-color: $material_light_blue ; } &.purple {
&.cyan { background-color: $material_cyan ; } background-color: $material_purple;
&.teal { background-color: $material_teal ; } }
&.green { background-color: $material_green ; } &.deep_purple {
&.light_green { background-color: $material_light_green ; } background-color: $material_deep_purple;
&.orange { background-color: $material_orange ; } }
&.deep_orange { background-color: $material_deep_orange ; } &.indigo {
&.amber { background-color: $material_amber ; } background-color: $material_indigo;
&.blue_grey { background-color: $material_blue_grey ; } }
&.grey { background-color: #999999 ; } &.blue {
&.default { background-color: $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 { @mixin dark-avatar-colors {
&.red { background-color: $dark_material_red ; } &.red {
&.pink { background-color: $dark_material_pink ; } background-color: $dark_material_red;
&.purple { background-color: $dark_material_purple ; } }
&.deep_purple { background-color: $dark_material_deep_purple ; } &.pink {
&.indigo { background-color: $dark_material_indigo ; } background-color: $dark_material_pink;
&.blue { background-color: $dark_material_blue ; } }
&.light_blue { background-color: $dark_material_light_blue ; } &.purple {
&.cyan { background-color: $dark_material_cyan ; } background-color: $dark_material_purple;
&.teal { background-color: $dark_material_teal ; } }
&.green { background-color: $dark_material_green ; } &.deep_purple {
&.light_green { background-color: $dark_material_light_green ; } background-color: $dark_material_deep_purple;
&.orange { background-color: $dark_material_orange ; } }
&.deep_orange { background-color: $dark_material_deep_orange ; } &.indigo {
&.amber { background-color: $dark_material_amber ; } background-color: $dark_material_indigo;
&.blue_grey { background-color: $dark_material_blue_grey ; } }
&.grey { background-color: #666666 ; } &.blue {
&.default { background-color: $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 { @mixin twenty-percent-colors {
&.red { background-color: rgba($dark_material_red, 0.2) ; } &.red {
&.pink { background-color: rgba($dark_material_pink, 0.2) ; } background-color: rgba($dark_material_red, 0.2);
&.purple { background-color: rgba($dark_material_purple, 0.2) ; } }
&.deep_purple { background-color: rgba($dark_material_deep_purple, 0.2) ; } &.pink {
&.indigo { background-color: rgba($dark_material_indigo, 0.2) ; } background-color: rgba($dark_material_pink, 0.2);
&.blue { background-color: rgba($dark_material_blue, 0.2) ; } }
&.light_blue { background-color: rgba($dark_material_light_blue, 0.2) ; } &.purple {
&.cyan { background-color: rgba($dark_material_cyan, 0.2) ; } background-color: rgba($dark_material_purple, 0.2);
&.teal { background-color: rgba($dark_material_teal, 0.2) ; } }
&.green { background-color: rgba($dark_material_green, 0.2) ; } &.deep_purple {
&.light_green { background-color: rgba($dark_material_light_green, 0.2) ; } background-color: rgba($dark_material_deep_purple, 0.2);
&.orange { background-color: rgba($dark_material_orange, 0.2) ; } }
&.deep_orange { background-color: rgba($dark_material_deep_orange, 0.2) ; } &.indigo {
&.amber { background-color: rgba($dark_material_amber, 0.2) ; } background-color: rgba($dark_material_indigo, 0.2);
&.blue_grey { background-color: rgba($dark_material_blue_grey, 0.2) ; } }
&.grey { background-color: rgba(#666666, 0.2) ; } &.blue {
&.default { background-color: rgba($blue, 0.2) ; } 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 { @mixin text-colors {
&.red { color: $material_red ; } &.red {
&.pink { color: $material_pink ; } color: $material_red;
&.purple { color: $material_purple ; } }
&.deep_purple { color: $material_deep_purple ; } &.pink {
&.indigo { color: $material_indigo ; } color: $material_pink;
&.blue { color: $material_blue ; } }
&.light_blue { color: $material_light_blue ; } &.purple {
&.cyan { color: $material_cyan ; } color: $material_purple;
&.teal { color: $material_teal ; } }
&.green { color: $material_green ; } &.deep_purple {
&.light_green { color: $material_light_green ; } color: $material_deep_purple;
&.orange { color: $material_orange ; } }
&.deep_orange { color: $material_deep_orange ; } &.indigo {
&.amber { color: $material_amber ; } color: $material_indigo;
&.blue_grey { color: $material_blue_grey ; } }
&.grey { color: #999999 ; } &.blue {
&.default { color: $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? // TODO: Deduplicate these! Can SASS functions generate property names?
@mixin message-replies-colors { @mixin message-replies-colors {
&.red { border-left-color: $material_red ; } &.red {
&.pink { border-left-color: $material_pink ; } border-left-color: $material_red;
&.purple { border-left-color: $material_purple ; } }
&.deep_purple { border-left-color: $material_deep_purple ; } &.pink {
&.indigo { border-left-color: $material_indigo ; } border-left-color: $material_pink;
&.blue { border-left-color: $material_blue ; } }
&.light_blue { border-left-color: $material_light_blue ; } &.purple {
&.cyan { border-left-color: $material_cyan ; } border-left-color: $material_purple;
&.teal { border-left-color: $material_teal ; } }
&.green { border-left-color: $material_green ; } &.deep_purple {
&.light_green { border-left-color: $material_light_green ; } border-left-color: $material_deep_purple;
&.orange { border-left-color: $material_orange ; } }
&.deep_orange { border-left-color: $material_deep_orange ; } &.indigo {
&.amber { border-left-color: $material_amber ; } border-left-color: $material_indigo;
&.blue_grey { border-left-color: $material_blue_grey ; } }
&.grey { border-left-color: #999999 ; } &.blue {
&.default { border-left-color: $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 { @mixin dark-message-replies-colors {
&.red { border-left-color: $dark_material_red ; } &.red {
&.pink { border-left-color: $dark_material_pink ; } border-left-color: $dark_material_red;
&.purple { border-left-color: $dark_material_purple ; } }
&.deep_purple { border-left-color: $dark_material_deep_purple ; } &.pink {
&.indigo { border-left-color: $dark_material_indigo ; } border-left-color: $dark_material_pink;
&.blue { border-left-color: $dark_material_blue ; } }
&.light_blue { border-left-color: $dark_material_light_blue ; } &.purple {
&.cyan { border-left-color: $dark_material_cyan ; } border-left-color: $dark_material_purple;
&.teal { border-left-color: $dark_material_teal ; } }
&.green { border-left-color: $dark_material_green ; } &.deep_purple {
&.light_green { border-left-color: $dark_material_light_green ; } border-left-color: $dark_material_deep_purple;
&.orange { border-left-color: $dark_material_orange ; } }
&.deep_orange { border-left-color: $dark_material_deep_orange ; } &.indigo {
&.amber { border-left-color: $dark_material_amber ; } border-left-color: $dark_material_indigo;
&.blue_grey { border-left-color: $dark_material_blue_grey ; } }
&.grey { border-left-color: #666666 ; } &.blue {
&.default { border-left-color: $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 { @mixin invert-text-color {

66
stylesheets/_progress.scss
View file

@ -7,16 +7,70 @@
} }
} }
.progress-bar-striped { .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: -webkit-linear-gradient(
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); 45deg,
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); 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; -webkit-background-size: 40px 40px;
background-size: 40px 40px; background-size: 40px 40px;
} }
.progress-bar-striped { .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: -webkit-linear-gradient(
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); 45deg,
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); 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 { .progress-bar.active {
-webkit-animation: progress-bar-stripes 2s linear infinite; -webkit-animation: progress-bar-stripes 2s linear infinite;

30
stylesheets/_recorder.scss
View file

@ -10,8 +10,9 @@
padding: 0; padding: 0;
border: none; border: none;
&:focus, &:hover { &:focus,
opacity: 1.0; &:hover {
opacity: 1;
} }
&:before { &:before {
@ -36,8 +37,9 @@
text-align: center; text-align: center;
padding: 0; padding: 0;
&:focus, &:hover { &:focus,
opacity: 1.0; &:hover {
opacity: 1;
} }
.icon { .icon {
@ -51,14 +53,18 @@
background: lighten($green, 20%); background: lighten($green, 20%);
border: 1px solid $green; border: 1px solid $green;
.icon { @include color-svg('../images/check.svg', $green); } .icon {
@include color-svg('../images/check.svg', $green);
}
} }
.close { .close {
background: lighten($red, 20%); background: lighten($red, 20%);
border: 1px solid $red; border: 1px solid $red;
.icon { @include color-svg('../images/x.svg', $red); } .icon {
@include color-svg('../images/x.svg', $red);
}
} }
.time { .time {
@ -68,9 +74,15 @@
padding: 0 10px; padding: 0 10px;
@keyframes pulse { @keyframes pulse {
0% { opacity:0; } 0% {
50% { opacity:1; } opacity: 0;
100% { opacity:0; } }
50% {
opacity: 1;
}
100% {
opacity: 0;
}
} }
&::before { &::before {

62
stylesheets/_variables.scss
View file

@ -9,8 +9,8 @@ $grey_l3: darken($grey_l, 20%);
$grey_l4: darken($grey_l, 40%); $grey_l4: darken($grey_l, 40%);
$grey: #616161; $grey: #616161;
$grey_d: #454545; $grey_d: #454545;
$green: #47D647; $green: #47d647;
$red: #EF8989; $red: #ef8989;
$z-index-modal: 100; $z-index-modal: 100;
@ -55,37 +55,37 @@ $error-icon-size: 24px;
$font-size: 14px; $font-size: 14px;
$font-size-small: (13/14) + em; $font-size-small: (13/14) + em;
$material_red: #EF5350; $material_red: #ef5350;
$material_pink: #EC407A; $material_pink: #ec407a;
$material_purple: #AB47BC; $material_purple: #ab47bc;
$material_deep_purple: #7E57C2; $material_deep_purple: #7e57c2;
$material_indigo: #5C6BC0; $material_indigo: #5c6bc0;
$material_blue: #2196F3; $material_blue: #2196f3;
$material_light_blue: #03A9F4; $material_light_blue: #03a9f4;
$material_cyan: #00BCD4; $material_cyan: #00bcd4;
$material_teal: #009688; $material_teal: #009688;
$material_green: #4CAF50; $material_green: #4caf50;
$material_light_green: #7CB342; $material_light_green: #7cb342;
$material_orange: #FF9800; $material_orange: #ff9800;
$material_deep_orange: #FF5722; $material_deep_orange: #ff5722;
$material_amber: #FFB300; $material_amber: #ffb300;
$material_blue_grey: #607D8B; $material_blue_grey: #607d8b;
$dark_material_red: #D32F2F; $dark_material_red: #d32f2f;
$dark_material_pink: #C2185B; $dark_material_pink: #c2185b;
$dark_material_purple: #7B1FA2; $dark_material_purple: #7b1fa2;
$dark_material_deep_purple: #512DA8; $dark_material_deep_purple: #512da8;
$dark_material_indigo: #303F9F; $dark_material_indigo: #303f9f;
$dark_material_blue: #1976D2; $dark_material_blue: #1976d2;
$dark_material_light_blue: #0288D1; $dark_material_light_blue: #0288d1;
$dark_material_cyan: #0097A7; $dark_material_cyan: #0097a7;
$dark_material_teal: #00796B; $dark_material_teal: #00796b;
$dark_material_green: #388E3C; $dark_material_green: #388e3c;
$dark_material_light_green: #689F38; $dark_material_light_green: #689f38;
$dark_material_orange: #F57C00; $dark_material_orange: #f57c00;
$dark_material_deep_orange: #E64A19; $dark_material_deep_orange: #e64a19;
$dark_material_amber: #FFA000; $dark_material_amber: #ffa000;
$dark_material_blue_grey: #455A64; $dark_material_blue_grey: #455a64;
// Android // Android
$android-bubble-padding-horizontal: 12px; $android-bubble-padding-horizontal: 12px;

38
stylesheets/android-dark.scss
View file

@ -3,7 +3,7 @@ $grey-dark_l2: darken($grey-dark, 4%);
$grey-dark_l3: darken($grey-dark_l2, 7%); $grey-dark_l3: darken($grey-dark_l2, 7%);
$grey-dark_l4: darken($grey-dark_l3, 8%); $grey-dark_l4: darken($grey-dark_l3, 8%);
$button-dark: #ccc; $button-dark: #ccc;
$text-dark: #CCCCCC; $text-dark: #cccccc;
$text-dark_l2: darken($text-dark, 30%); $text-dark_l2: darken($text-dark, 30%);
.android-dark { .android-dark {
@ -14,7 +14,9 @@ $text-dark_l2: darken($text-dark, 30%);
background-color: $grey-dark; background-color: $grey-dark;
} }
color: $text-dark; color: $text-dark;
a { color: #57a5e5; } a {
color: #57a5e5;
}
hr { hr {
border-color: $grey-dark; border-color: $grey-dark;
} }
@ -40,7 +42,9 @@ $text-dark_l2: darken($text-dark, 30%);
background-color: darken($button-dark, 8%); background-color: darken($button-dark, 8%);
} }
} }
.message-detail, .message-container, .conversation, .message-detail,
.message-container,
.conversation,
.discussion-container { .discussion-container {
background-color: $grey-dark_l3; background-color: $grey-dark_l3;
} }
@ -90,7 +94,9 @@ $text-dark_l2: darken($text-dark, 30%);
@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; background-color: $grey-dark_l3;
border-color: $grey-dark; border-color: $grey-dark;
} }
@ -100,7 +106,9 @@ $text-dark_l2: darken($text-dark, 30%);
.conversation .conversation-loading-screen { .conversation .conversation-loading-screen {
background-color: $grey-dark_l3; background-color: $grey-dark_l3;
} }
.avatar, .conversation-header, .bubble { .avatar,
.conversation-header,
.bubble {
@include dark-avatar-colors; @include dark-avatar-colors;
} }
.message-list .advisory { .message-list .advisory {
@ -166,7 +174,8 @@ $text-dark_l2: darken($text-dark, 30%);
background-color: $grey-dark_l3; background-color: $grey-dark_l3;
border-color: $grey-dark_l2; border-color: $grey-dark_l2;
@include invert-text-color; @include invert-text-color;
&.active.ltr, &.active.rtl { &.active.ltr,
&.active.rtl {
background-image: url('../images/x_white.svg'); background-image: url('../images/x_white.svg');
} }
} }
@ -189,7 +198,12 @@ $text-dark_l2: darken($text-dark, 30%);
} }
.incoming .bubble { .incoming .bubble {
.sender, .content, .body, .meta, a, .fileView { .sender,
.content,
.body,
.meta,
a,
.fileView {
@include invert-text-color; @include invert-text-color;
} }
.content { .content {
@ -213,15 +227,15 @@ $text-dark_l2: darken($text-dark, 30%);
} }
.outgoing .bubble .fileView .icon { .outgoing .bubble .fileView .icon {
@include color-svg('../images/file.svg', #CCCCCC); @include color-svg('../images/file.svg', #cccccc);
&.audio { &.audio {
@include color-svg('../images/audio.svg', #CCCCCC); @include color-svg('../images/audio.svg', #cccccc);
} }
&.video { &.video {
@include color-svg('../images/video.svg', #CCCCCC); @include color-svg('../images/video.svg', #cccccc);
} }
&.voice { &.voice {
@include color-svg('../images/voice.svg', #CCCCCC); @include color-svg('../images/voice.svg', #cccccc);
} }
} }
@ -275,7 +289,7 @@ $text-dark_l2: darken($text-dark, 30%);
.message-list .last-seen-indicator-view { .message-list .last-seen-indicator-view {
.bar { .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); border-bottom: 1px solid rgba(0, 0, 0, 0.15);
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);

2
stylesheets/options.scss
View file

@ -3,7 +3,7 @@
@import 'progress'; @import 'progress';
.iti-flag { .iti-flag {
// override intlTelInput's flags image location // override intlTelInput's flags image location
background: url("../images/flags.png"); background: url('../images/flags.png');
} }
.intl-tel-input .country-list { .intl-tel-input .country-list {