You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
375 lines
9.4 KiB
SCSS
375 lines
9.4 KiB
SCSS
.dark-theme {
|
|
// _debugLog
|
|
|
|
.debug-log {
|
|
&.modal {
|
|
.content {
|
|
textarea {
|
|
background-color: var(--color-darkest-gray-color);
|
|
border: 1px solid var(--color-gray-color);
|
|
color: var(--color-lighter-gray-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.result {
|
|
.open {
|
|
border: solid 1px var(--color-gray-color);
|
|
background-color: var(--color-darkest-gray-color);
|
|
color: var(--color-lighter-gray-color);
|
|
|
|
&:before {
|
|
@include header-icon-white('../images/open_link.svg');
|
|
}
|
|
}
|
|
|
|
.link {
|
|
color: var(--color-lighter-gray-color);
|
|
border: solid 1px var(--color-gray-color);
|
|
border-right: none;
|
|
background-color: var(--color-darkest-gray-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
// _global
|
|
.title-bar {
|
|
color: var(--color-lighter-gray-color);
|
|
}
|
|
|
|
button.grey {
|
|
border: solid 1px var(--color-light-gray-color);
|
|
color: var(--color-gray-color);
|
|
background: var(--color-lightest-gray-color);
|
|
box-shadow: 0 0 10px -5px rgba(var(--color-gray-color-rgb), 0.5);
|
|
|
|
&:hover {
|
|
box-shadow: 0 0 10px -3px rgba(var(--color-gray-color-rgb), 0.7);
|
|
}
|
|
}
|
|
|
|
.loading {
|
|
position: relative;
|
|
&::before {
|
|
border: solid 3px;
|
|
border-color: var(--color-light-blue-color) var(--color-light-blue-color)
|
|
var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important;
|
|
}
|
|
}
|
|
|
|
.x {
|
|
&:before {
|
|
@include color-svg('../images/x.svg', var(--color-white-color));
|
|
}
|
|
}
|
|
|
|
input.search {
|
|
border: 1px solid var(--color-gray-color);
|
|
color: var(--color-lighter-gray-color);
|
|
background-color: var(--color-darkest-gray-color);
|
|
|
|
&:focus {
|
|
outline: solid 1px var(--color-dark-blue-color);
|
|
}
|
|
}
|
|
|
|
.hint {
|
|
color: var(--color-white-color);
|
|
border: 2px dashed var(--color-white-color);
|
|
|
|
&.firstRun {
|
|
&:before,
|
|
&:after {
|
|
border: solid 10px var(--color-white-color);
|
|
border-color: transparent var(--color-white-color) transparent transparent;
|
|
}
|
|
&:after {
|
|
border-color: transparent var(--color-dark-blue-color) transparent transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.contact.placeholder {
|
|
color: var(--color-white-color);
|
|
border: 2px dashed var(--color-white-color);
|
|
p {
|
|
color: var(--color-white-color);
|
|
}
|
|
&:before,
|
|
&:after {
|
|
border: solid 10px var(--color-white-color);
|
|
border-color: transparent transparent var(--color-white-color) transparent;
|
|
}
|
|
&:after {
|
|
border-color: transparent transparent var(--color-dark-blue-color) transparent;
|
|
}
|
|
}
|
|
// _modal
|
|
|
|
.modal {
|
|
background-color: rgba(var(--color-black-color-rgb), 0.3);
|
|
|
|
.content {
|
|
background-color: var(--color-darkest-gray-color);
|
|
box-shadow: 0px 3px 5px 0px var(--color-light-black-color);
|
|
}
|
|
}
|
|
|
|
// _modules
|
|
|
|
// Module: Message
|
|
|
|
.module-message__error {
|
|
@include color-svg('../images/error.svg', var(--color-destructive));
|
|
}
|
|
|
|
.module-message__img-border-overlay {
|
|
box-shadow: inset 0px 0px 0px 1px var(--color-lighter-white-color);
|
|
}
|
|
|
|
.module-message__img-overlay {
|
|
/* TODO does this work? */
|
|
background-image: linear-gradient(
|
|
to bottom,
|
|
var(--color-transparent-color),
|
|
var(--color-transparent-color) 9%,
|
|
rgba(var(--color-black-color-rgb), 0.02) 17%,
|
|
rgba(var(--color-black-color-rgb), 0.05) 24%,
|
|
rgba(var(--color-black-color-rgb), 0.08) 31%,
|
|
rgba(var(--color-black-color-rgb), 0.12) 37%,
|
|
rgba(var(--color-black-color-rgb), 0.16) 44%,
|
|
rgba(var(--color-black-color-rgb), 0.2) 50%,
|
|
rgba(var(--color-black-color-rgb), 0.24) 56%,
|
|
rgba(var(--color-black-color-rgb), 0.28) 63%,
|
|
rgba(var(--color-black-color-rgb), 0.32) 69%,
|
|
rgba(var(--color-black-color-rgb), 0.35) 76%,
|
|
rgba(var(--color-black-color-rgb), 0.38) 83%,
|
|
rgba(var(--color-black-color-rgb), 0.4) 91%,
|
|
rgba(var(--color-black-color-rgb), 0.4)
|
|
);
|
|
}
|
|
|
|
.module-message__broken-image {
|
|
color: var(--color-lighter-gray-color);
|
|
}
|
|
|
|
.module-message__broken-image--incoming {
|
|
color: var(--color-white-color);
|
|
}
|
|
|
|
.module-message__video-overlay__circle {
|
|
background-color: var(--color-white-color);
|
|
}
|
|
|
|
.module-message__video-overlay__play-icon {
|
|
@include color-svg('../images/play.svg', var(--color-session-green-color));
|
|
}
|
|
|
|
.module-message__broken-video-screenshot {
|
|
color: var(--color-lighter-gray-color);
|
|
}
|
|
|
|
.module-message__link-preview__content {
|
|
background-color: var(--color-darkest-gray-color);
|
|
border: 1px solid var(--color-gray-color);
|
|
}
|
|
|
|
.module-message__link-preview__title {
|
|
color: var(--color-lighter-gray-color);
|
|
}
|
|
|
|
.module-message__link-preview__location {
|
|
color: var(--color-light-gray-color);
|
|
}
|
|
|
|
// Module: Contact Detail
|
|
|
|
.module-contact-detail__send-message {
|
|
background-color: var(--color-dark-blue-color);
|
|
color: var(--color-white-color);
|
|
}
|
|
|
|
.module-contact-detail__additional-contact {
|
|
border-top: 1px solid var(--color-dark-gray-color);
|
|
}
|
|
|
|
.module-contact-detail__additional-contact__type {
|
|
color: var(--color-light-gray-color);
|
|
}
|
|
|
|
// Module: Contact List Item
|
|
|
|
.module-contact-list-item {
|
|
color: var(--color-light-gray-color);
|
|
}
|
|
|
|
// Module: Message Detail
|
|
|
|
.module-message-detail__delete-button {
|
|
background-color: var(--color-destructive);
|
|
color: var(--color-white-color);
|
|
box-shadow: 0 0 10px -3px var(--color-gray-color-rgb);
|
|
border: solid 1px var(--color-light-gray-color);
|
|
}
|
|
|
|
.module-message-detail__contact__error {
|
|
color: var(--color-destructive);
|
|
}
|
|
|
|
// Module: Media Gallery
|
|
|
|
.module-media-gallery__tab {
|
|
background-color: var(--color-darkest-gray-color);
|
|
}
|
|
|
|
.module-media-gallery__tab--active {
|
|
border-bottom: 2px solid var(--color-session-green-color);
|
|
}
|
|
|
|
// Module: Document List Item
|
|
|
|
.module-document-list-item--with-separator {
|
|
border-bottom: 1px solid var(--color-dark-gray-color);
|
|
}
|
|
|
|
.module-document-list-item__icon {
|
|
@include color-svg('../images/file.svg', var(--color-gray-color));
|
|
}
|
|
|
|
// Module: Media Grid Item
|
|
|
|
.module-media-grid-item {
|
|
background-color: var(--color-darkest-gray-color);
|
|
}
|
|
|
|
.module-media-grid-item__icon-image {
|
|
@include color-svg('../images/image.svg', var(--color-gray-color));
|
|
}
|
|
|
|
.module-media-grid-item__icon-video {
|
|
@include color-svg('../images/movie.svg', var(--color-gray-color));
|
|
}
|
|
|
|
.module-media-grid-item__icon-generic {
|
|
@include color-svg('../images/file.svg', var(--color-gray-color));
|
|
}
|
|
|
|
// Module: Empty State
|
|
|
|
.module-empty-state {
|
|
color: var(--color-light-gray-color);
|
|
}
|
|
|
|
// TODO Theming Remove
|
|
// Module: Conversation List Item
|
|
|
|
// .module-conversation-list-item--is-selected {
|
|
// background-color: var(--color-dark-gray-color);
|
|
// }
|
|
|
|
// .module-conversation-list-item__unread-count {
|
|
// color: var(--color-white-color);
|
|
// background-color: var(--color-session-green-color);
|
|
// box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color);
|
|
// }
|
|
|
|
// .module-conversation-list-item__header__name {
|
|
// color: var(--color-lighter-gray-color);
|
|
// }
|
|
|
|
// .module-conversation-list-item__header__date--has-unread {
|
|
// color: var(--color-lighter-gray-color);
|
|
// }
|
|
|
|
// .module-conversation-list-item__message__text {
|
|
// color: var(--color-light-gray-color);
|
|
// }
|
|
|
|
// .module-conversation-list-item__message__text--has-unread {
|
|
// color: var(--color-lighter-gray-color);
|
|
// }
|
|
|
|
// Module: Image
|
|
|
|
.module-image {
|
|
background: none;
|
|
}
|
|
|
|
.module-image__loading-placeholder {
|
|
background-color: var(--color-lighter-white-color);
|
|
}
|
|
|
|
// Module: Typing Animation
|
|
|
|
.module-typing-animation__dot {
|
|
background-color: var(--color-white-color);
|
|
}
|
|
|
|
.module-typing-animation__dot--light {
|
|
background-color: var(--color-white-color);
|
|
}
|
|
|
|
// Module: Attachments
|
|
|
|
.module-attachments {
|
|
border-top: 1px solid var(--color-dark-gray-color);
|
|
}
|
|
|
|
.module-attachments__close-button {
|
|
@include color-svg('../images/x-16.svg', var(--color-light-gray-color));
|
|
}
|
|
|
|
// Module: Staged Generic Attachment
|
|
|
|
.module-staged-generic-attachment {
|
|
box-shadow: inset 0px 0px 0px 1px var(--color-light-gray-color);
|
|
background-color: var(--color-dark-gray-color);
|
|
color: var(--color-lighter-gray-color);
|
|
}
|
|
|
|
.module-staged-generic-attachment__close-button {
|
|
@include color-svg('../images/x.svg', var(--color-light-gray-color));
|
|
}
|
|
|
|
.module-staged-generic-attachment__icon {
|
|
background: url('../images/file-gradient.svg') no-repeat center;
|
|
}
|
|
|
|
.module-staged-generic-attachment__icon__extension {
|
|
color: var(--color-darkest-gray-color);
|
|
}
|
|
|
|
// Module: Staged Placeholder Attachment
|
|
|
|
.module-staged-placeholder-attachment {
|
|
border: 1px solid var(--color-gray-color);
|
|
|
|
&:hover {
|
|
background: var(--color-dark-gray-color);
|
|
}
|
|
}
|
|
|
|
.module-staged-placeholder-attachment__plus-icon {
|
|
@include color-svg('../images/plus-36.svg', var(--color-gray-color));
|
|
}
|
|
|
|
// Module: Staged Link Preview
|
|
|
|
.module-staged-link-preview__close-button {
|
|
@include color-svg('../images/x-16.svg', var(--color-light-gray-color));
|
|
}
|
|
|
|
// Module: Message Search Result
|
|
|
|
// TODO Theming remove
|
|
// .module-message-search-result {
|
|
// &:hover {
|
|
// background-color: var(--color-dark-gray-color);
|
|
// }
|
|
// }
|
|
|
|
.module-message__link-preview__icon-container__circle-background {
|
|
background-color: var(--color-light-gray-color);
|
|
}
|
|
}
|