123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- $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%);
- $text-dark: #CCCCCC;
- .android-dark {
- color: $text-dark;
- a { color: #57a5e5; }
- hr {
- border-color: $grey-dark;
- }
- #header {
- background-color: $grey-dark_l2;
- color: white;
- transition: background-color 0.5s;
- &.inactive {
- background-color: $grey-dark;
- color: $text-dark;
- }
- }
- .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;
- }
- .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;
- }
- .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;
- }
- .avatar, .conversation-header, .bubble {
- @include dark-avatar-colors;
- }
- .message-list .advisory .content {
- background-color: $grey-dark;
- }
- .inactive .conversation-header {
- background-color: $grey-dark !important;
- color: $text-dark;
- }
- .sent .status {
- display: inline-block;
- @include color-svg('/images/check.svg', white);
- }
- .delivered .status {
- display: inline-block;
- @include color-svg('/images/double-check.svg', white);
- }
- .paperclip:before {
- content: '';
- display: inline-block;
- width: $button-height;
- height: $button-height;
- @include color-svg('/images/paperclip.svg', white);
- transform: rotateZ(-45deg);
- }
- .scrollable {
- 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;
- &::-webkit-search-cancel-button {
- background: url('/images/x_white.svg') no-repeat center;
- background-size: cover;
- }
- }
- .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 {
- @include invert-text-color;
- }
- .attachments, .content {
- a {
- color: $grey_l;
- }
- }
- }
- 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: $grey-dark_l2;
- }
- }
|