.dark-theme { // _debugLog .debug-log { &.modal { .content { textarea { background-color: $color-dark-85; border: 1px solid $color-dark-60; color: $color-dark-05; } } } .result { .open { border: solid 1px $color-dark-60; background-color: $color-dark-85; color: $color-dark-05; &:before { @include header-icon-white('../images/open_link.svg'); } } .link { color: $color-dark-05; border: solid 1px $color-dark-60; border-right: none; background-color: $color-dark-85; } } } // _global .title-bar { color: $color-dark-05; } button.grey { border: solid 1px #ccc; color: $grey; background: $grey_l; box-shadow: 0 0 10px -5px rgba($grey, 0.5); &:hover { box-shadow: 0 0 10px -3px rgba($grey, 0.7); } } .recipients-input { .recipients-container { background-color: white; border-bottom: 1px solid #f2f2f2; } .recipient { background-color: $blue; color: white; &.error { background-color: #f00; } } .results { box-shadow: 0px 0px 1px rgba(#aaa, 0.8); } } .loading { position: relative; &::before { border: solid 3px; border-color: $blue_l $blue_l $grey_l $grey_l !important; } } .x { &:before { @include color-svg('../images/x.svg', white); } } input.search { border: 1px solid $color-light-60; color: $color-dark-05; background-color: $color-gray-95; &:focus { outline: solid 1px $blue; } } .last-timestamp { color: $grey; } .index { .gutter .timestamp { color: $grey; } } .hint { color: white; border: 2px dashed white; &.firstRun { &:before, &:after { border: solid 10px white; border-color: transparent white transparent transparent; } &:after { border-color: transparent #2eace0 transparent transparent; } } } .contact.placeholder { color: white; border: 2px dashed white; p { color: white; } &:before, &:after { border: solid 10px white; border-color: transparent transparent white transparent; } &:after { border-color: transparent transparent #2eace0 transparent; } } // _modal .modal { background-color: rgba(0, 0, 0, 0.3); .content { background-color: $color-gray-95; box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); } } // _modules // Module: Message .module-message__error { @include color-svg('../images/error.svg', $session-color-danger); } .module-message__img-border-overlay { box-shadow: inset 0px 0px 0px 1px $color-white-015; } .module-message__img-overlay { background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 9%, rgba(0, 0, 0, 0.02) 17%, rgba(0, 0, 0, 0.05) 24%, rgba(0, 0, 0, 0.08) 31%, rgba(0, 0, 0, 0.12) 37%, rgba(0, 0, 0, 0.16) 44%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.24) 56%, rgba(0, 0, 0, 0.28) 63%, rgba(0, 0, 0, 0.32) 69%, rgba(0, 0, 0, 0.35) 76%, rgba(0, 0, 0, 0.38) 83%, rgba(0, 0, 0, 0.4) 91%, rgba(0, 0, 0, 0.4) ); } .module-message__broken-image { color: $color-dark-05; } .module-message__broken-image--incoming { color: $color-white; } .module-message__video-overlay__circle { background-color: $color-white; } .module-message__video-overlay__play-icon { @include color-svg('../images/play.svg', $color-loki-green); } .module-message__broken-video-screenshot { color: $color-dark-05; } .module-message__link-preview__content { background-color: $color-gray-95; border: 1px solid $color-gray-60; } .module-message__link-preview__title { color: $color-gray-05; } .module-message__link-preview__location { color: $color-gray-25; } // Module: Contact Detail .module-contact-detail__send-message { background-color: $blue; color: $color-white; } .module-contact-detail__additional-contact { border-top: 1px solid $color-dark-70; } .module-contact-detail__additional-contact__type { color: $color-light-45; } // Module: Contact List Item .module-contact-list-item { color: $color-dark-30; } // Module: Message Detail .module-message-detail__delete-button { background-color: $session-color-danger; color: $color-white; box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7); border: solid 1px $color-light-35; } .module-message-detail__contact__error { color: $session-color-danger; } // Module: Media Gallery .module-media-gallery__tab { background-color: $color-dark-85; } .module-media-gallery__tab--active { border-bottom: 2px solid $color-loki-green; } // Module: Document List Item .module-document-list-item--with-separator { border-bottom: 1px solid $color-dark-70; } .module-document-list-item__icon { @include color-svg('../images/file.svg', $color-dark-60); } // Module: Media Grid Item .module-media-grid-item { background-color: $color-dark-85; } .module-media-grid-item__icon-image { @include color-svg('../images/image.svg', $color-dark-60); } .module-media-grid-item__icon-video { @include color-svg('../images/movie.svg', $color-dark-60); } .module-media-grid-item__icon-generic { @include color-svg('../images/file.svg', $color-dark-60); } // Module: Empty State .module-empty-state { color: $color-dark-55; } // Module: Conversation List Item .module-conversation-list-item--is-selected { background-color: $color-dark-70; } .module-conversation-list-item__unread-count { color: $color-white; background-color: $color-loki-green; box-shadow: 0px 0px 0px 1px $color-dark-85; } .module-conversation-list-item__header__name { color: $color-gray-05; } .module-conversation-list-item__header__date--has-unread { color: $color-gray-05; } .module-conversation-list-item__message__text { color: $color-gray-25; } .module-conversation-list-item__message__text--has-unread { color: $color-gray-05; } // Module: Main Header .module-main-header__search__input { background-color: $color-gray-95; border-radius: 14px; border: solid 1px $color-gray-75; color: $color-gray-05; &::placeholder { color: $color-gray-45; } &:focus { border: solid 1px blue; outline: none; } } // Module: Image .module-image { background: none; } .module-image__loading-placeholder { background-color: $color-white-015; } // Module: Typing Animation .module-typing-animation__dot { background-color: $color-white; } .module-typing-animation__dot--light { background-color: $color-white; } // Module: Attachments .module-attachments { border-top: 1px solid $color-gray-75; } .module-attachments__close-button { @include color-svg('../images/x-16.svg', $color-gray-45); } // Module: Staged Generic Attachment .module-staged-generic-attachment { box-shadow: inset 0px 0px 0px 1px $color-gray-45; background-color: $color-gray-75; color: $color-dark-05; } .module-staged-generic-attachment__close-button { @include color-svg('../images/x.svg', $color-gray-45); } .module-staged-generic-attachment__icon { background: url('../images/file-gradient.svg') no-repeat center; } .module-staged-generic-attachment__icon__extension { color: $color-gray-90; } // Module: Staged Placeholder Attachment .module-staged-placeholder-attachment { border: 1px solid $color-gray-60; &:hover { background: $color-gray-75; } } .module-staged-placeholder-attachment__plus-icon { @include color-svg('../images/plus-36.svg', $color-gray-60); } // Module: Staged Link Preview .module-staged-link-preview__close-button { @include color-svg('../images/x-16.svg', $color-gray-25); } // Module: Spinner .module-spinner__circle { background-color: $color-white-04; } .module-search-results__conversations-header { color: $color-gray-05; } .module-search-results__contacts-header { color: $color-gray-05; } .module-search-results__messages-header { color: $color-gray-05; } // Module: Message Search Result .module-message-search-result { &:hover { background-color: $color-dark-70; } } .module-message-search-result--is-selected { background-color: $color-dark-70; } .module-message-search-result__header__from { color: $color-gray-05; } .module-message-search-result__header__timestamp { color: $color-gray-25; } .module-message-search-result__body { color: $color-gray-05; } .module-message__link-preview__icon-container__circle-background { background-color: $color-gray-25; } }