409 lines
8.6 KiB
SCSS
409 lines
8.6 KiB
SCSS
$grey-dark: #333333;
|
|
$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_l2: darken($text-dark, 30%);
|
|
|
|
body.android-dark {
|
|
background-color: $grey-dark;
|
|
}
|
|
|
|
.android-dark {
|
|
.app-loading-screen {
|
|
background-color: $grey-dark;
|
|
}
|
|
.gutter .content {
|
|
background-color: $grey-dark;
|
|
}
|
|
color: $text-dark;
|
|
a {
|
|
color: #57a5e5;
|
|
}
|
|
hr {
|
|
border-color: $grey-dark;
|
|
}
|
|
.expiredAlert {
|
|
color: $grey-dark;
|
|
button {
|
|
color: $grey-dark;
|
|
}
|
|
}
|
|
#header {
|
|
background-color: $grey-dark_l2;
|
|
color: white;
|
|
transition: background-color 0.5s;
|
|
&.inactive {
|
|
background-color: $grey-dark;
|
|
color: $text-dark;
|
|
}
|
|
}
|
|
.confirmation-dialog .content .buttons button {
|
|
background-color: $button-dark;
|
|
border: 1px solid $grey-dark_l2;
|
|
&:hover {
|
|
background-color: darken($button-dark, 8%);
|
|
}
|
|
}
|
|
.message-detail,
|
|
.message-container,
|
|
.conversation,
|
|
.discussion-container {
|
|
background-color: $grey-dark_l3;
|
|
}
|
|
.modal .content {
|
|
background-color: $grey-dark;
|
|
}
|
|
.lightbox .content {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
.key-verification .key {
|
|
background-color: $grey-dark_l4;
|
|
border-color: $grey-dark_l2;
|
|
}
|
|
.key-verification .icon {
|
|
&.verified {
|
|
@include color-svg('../images/verified-check.svg', $text-dark);
|
|
}
|
|
&.shield {
|
|
@include color-svg('../images/shield.svg', $text-dark);
|
|
}
|
|
}
|
|
.menu-list {
|
|
background-color: $grey-dark_l2;
|
|
color: $text-dark;
|
|
li:hover {
|
|
background-color: $grey-dark;
|
|
}
|
|
}
|
|
.content textarea {
|
|
background-color: $grey-dark_l3;
|
|
border-width: 0px;
|
|
@include invert-text-color;
|
|
}
|
|
.flex {
|
|
background-color: $grey-dark_l3;
|
|
.send-message {
|
|
background-color: $grey-dark_l3;
|
|
color: $text-dark;
|
|
}
|
|
}
|
|
.contact-details .name {
|
|
font-weight: 400;
|
|
}
|
|
.contact-details .number {
|
|
color: $text-dark_l2;
|
|
.verified-icon {
|
|
@include color-svg('../images/verified-check.svg', $text-dark_l2);
|
|
}
|
|
}
|
|
.group-member-list .members .contact,
|
|
.new-group-update .members .contact,
|
|
.attachment-previews img {
|
|
background-color: $grey-dark_l3;
|
|
border-color: $grey-dark;
|
|
}
|
|
.conversation.placeholder .conversation-header {
|
|
display: none;
|
|
}
|
|
.conversation .conversation-loading-screen {
|
|
background-color: $grey-dark_l3;
|
|
}
|
|
.avatar,
|
|
.conversation-header,
|
|
.bubble {
|
|
@include dark-avatar-colors;
|
|
}
|
|
.message-list .advisory {
|
|
.content {
|
|
background-color: $grey-dark;
|
|
}
|
|
.shield {
|
|
@include color-svg('../images/shield.svg', $text-dark);
|
|
}
|
|
.verified {
|
|
@include color-svg('../images/verified-check.svg', $text-dark);
|
|
}
|
|
.clock {
|
|
@include color-svg('../images/clock.svg', $text-dark);
|
|
}
|
|
}
|
|
|
|
.inactive .conversation-header {
|
|
background-color: $grey-dark !important;
|
|
color: $text-dark;
|
|
.verified-icon {
|
|
@include color-svg('../images/verified-check.svg', $text-dark);
|
|
}
|
|
}
|
|
.sent span.status {
|
|
display: inline-block;
|
|
@include color-svg('../images/check.svg', white);
|
|
}
|
|
.delivered span.status {
|
|
display: inline-block;
|
|
@include color-svg('../images/double-check.svg', white);
|
|
}
|
|
.read span.status {
|
|
display: inline-block;
|
|
@include color-svg('../images/double-check.svg', $blue);
|
|
}
|
|
.file-input .paperclip:before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: $button-height;
|
|
height: $button-height;
|
|
@include color-svg('../images/paperclip.svg', white);
|
|
transform: rotateZ(-45deg);
|
|
}
|
|
.capture-audio .microphone:before {
|
|
@include color-svg('../images/microphone.svg', white);
|
|
}
|
|
.conversations {
|
|
background-color: $grey-dark_l2;
|
|
.conversation-list-item {
|
|
background-color: $grey-dark_l3;
|
|
color: $text-dark;
|
|
}
|
|
}
|
|
.bottom-bar {
|
|
min-height: 10px;
|
|
background-color: $grey-dark_l2;
|
|
form.send {
|
|
background: $grey-dark_l3;
|
|
}
|
|
}
|
|
.search {
|
|
background-color: $grey-dark_l3;
|
|
border-color: $grey-dark_l2;
|
|
@include invert-text-color;
|
|
&.active.ltr,
|
|
&.active.rtl {
|
|
background-image: url('../images/x_white.svg');
|
|
}
|
|
}
|
|
.bubble {
|
|
padding: 9px 12px;
|
|
border-radius: $border-radius;
|
|
box-shadow: 0 3px 3px -4px black;
|
|
}
|
|
|
|
.outgoing .bubble {
|
|
background-color: $grey-dark;
|
|
@include invert-text-color;
|
|
color: $text-dark;
|
|
}
|
|
.outgoing .hourglass {
|
|
@include hourglass(#999);
|
|
}
|
|
.incoming .hourglass {
|
|
@include hourglass(#fff);
|
|
}
|
|
|
|
.incoming .bubble {
|
|
.sender,
|
|
.content,
|
|
.body,
|
|
.meta,
|
|
a,
|
|
.fileView {
|
|
@include invert-text-color;
|
|
}
|
|
.content {
|
|
a {
|
|
color: $grey_l;
|
|
}
|
|
}
|
|
}
|
|
|
|
.incoming .bubble .fileView .icon {
|
|
@include color-svg('../images/file.svg', white);
|
|
&.audio {
|
|
@include color-svg('../images/audio.svg', white);
|
|
}
|
|
&.video {
|
|
@include color-svg('../images/video.svg', white);
|
|
}
|
|
&.voice {
|
|
@include color-svg('../images/voice.svg', white);
|
|
}
|
|
}
|
|
|
|
.outgoing .bubble .fileView .icon {
|
|
@include color-svg('../images/file.svg', #cccccc);
|
|
&.audio {
|
|
@include color-svg('../images/audio.svg', #cccccc);
|
|
}
|
|
&.video {
|
|
@include color-svg('../images/video.svg', #cccccc);
|
|
}
|
|
&.voice {
|
|
@include color-svg('../images/voice.svg', #cccccc);
|
|
}
|
|
}
|
|
|
|
.embedded-contact {
|
|
.first-line {
|
|
.image-container {
|
|
.default-avatar {
|
|
background-color: gray;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.text-container .contact-name {
|
|
color: $blue;
|
|
}
|
|
}
|
|
|
|
.send-message {
|
|
color: $blue;
|
|
border-top: 1px solid $grey;
|
|
border-bottom: 1px solid $grey;
|
|
|
|
.bubble-icon {
|
|
@include color-svg('../images/chat-bubble.svg', $blue);
|
|
}
|
|
}
|
|
}
|
|
|
|
.incoming .embedded-contact {
|
|
color: white;
|
|
|
|
.text-container .contact-name {
|
|
color: white;
|
|
}
|
|
|
|
.send-message {
|
|
color: white;
|
|
// Note: would like to use transparency here, but Chromium in Electron doesn't
|
|
// render the borders when they are transparent.
|
|
border-top: 1px solid $grey_l1_5;
|
|
border-bottom: 1px solid $grey_l1_5;
|
|
|
|
.bubble-icon {
|
|
background-color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.contact-detail {
|
|
.additional-contact .type {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
}
|
|
|
|
.outgoing .quoted-message {
|
|
background: rgba(255, 255, 255, 0.38);
|
|
|
|
.icon-container .icon {
|
|
background-color: black;
|
|
&.play.with-image {
|
|
background-color: $text-dark;
|
|
}
|
|
}
|
|
}
|
|
.incoming .quoted-message {
|
|
border-left-color: $text-dark;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
|
|
.icon-container {
|
|
.circle-background {
|
|
background-color: $text-dark;
|
|
}
|
|
.icon.play.with-image {
|
|
background-color: $text-dark;
|
|
}
|
|
}
|
|
}
|
|
|
|
button.clock {
|
|
@include header-icon-white('../images/clock.svg');
|
|
}
|
|
button.hamburger {
|
|
@include header-icon-white('../images/menu.svg');
|
|
}
|
|
button.back {
|
|
@include header-icon-white('../images/back.svg');
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
|
|
&:hover {
|
|
background: rgba(255, 255, 255, 0.25);
|
|
}
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
.recorder {
|
|
background: $grey-dark_l2;
|
|
}
|
|
|
|
.message-list .last-seen-indicator-view {
|
|
.bar {
|
|
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);
|
|
}
|
|
|
|
.text {
|
|
background-color: $grey-dark_l3;
|
|
}
|
|
}
|
|
|
|
.discussion-container .scroll-down-button-view {
|
|
button {
|
|
background-color: $grey_l4;
|
|
|
|
.icon {
|
|
@include color-svg('../images/down.svg', black);
|
|
}
|
|
.icon:hover {
|
|
background-color: white;
|
|
}
|
|
|
|
&.new-messages {
|
|
background-color: $blue;
|
|
.icon {
|
|
@include color-svg('../images/down.svg', white);
|
|
}
|
|
&:hover {
|
|
background-color: #1472bd;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.choose-file button:hover {
|
|
background-color: $grey-dark;
|
|
}
|
|
.capture-audio button:hover {
|
|
background-color: $grey-dark;
|
|
}
|
|
button.emoji {
|
|
&:hover {
|
|
background-color: $grey-dark;
|
|
}
|
|
&:before {
|
|
@include color-svg('../images/smile.svg', white);
|
|
}
|
|
}
|
|
|
|
.emoji-panel-container {
|
|
.ep-categories {
|
|
background-color: $grey-dark_l3;
|
|
}
|
|
.ep-emojies {
|
|
background-color: $grey-dark_l2;
|
|
}
|
|
}
|
|
|
|
.dots-horizontal-icon {
|
|
&:hover {
|
|
@include color-svg('../images/dots-horizontal.svg', $grey_l);
|
|
}
|
|
}
|
|
}
|