// Using BEM syntax explained here: https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ .module-splash-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; } .module-splash-screen__logo { @include color-svg('../images/signal-logo.svg', $color-white); margin: 24px auto; &.module-img--256 { height: 256px; width: 256px; } &.module-img--200 { height: 200px; width: 200px; } &.module-img--150 { height: 150px; width: 150px; } &.module-img--128 { height: 128px; width: 128px; } &.module-logo-blue { background-color: $ultramarine-brand-light; } } // Module: Message // Note: this does the same thing as module-timeline__message-container but // can be used outside tht Timeline contact more easily. .module-message-container { @include button-reset; cursor: inherit; width: 100%; margin-top: 4px; margin-bottom: 4px; &::after { visibility: hidden; display: block; font-size: 0; content: ' '; clear: both; height: 0; } } .module-message { position: relative; display: inline-flex; flex-direction: row; align-items: stretch; outline: none; } .module-message--expired { animation: module-message__shake 0.2s linear infinite; } @keyframes module-message__shake { 0% { transform: translateX(0px); } 25% { transform: translateX(-5px); } 50% { transform: translateX(0px); } 75% { transform: translateX(5px); } 100% { transform: translateX(0px); } } // Spec: container < 438px .module-message--incoming { margin-left: 16px; margin-right: 32px; } .module-message--outgoing { float: right; margin-right: 16px; margin-left: 32px; } .module-message--incoming.module-message--group { margin-left: 52px; } .module-message__buttons { position: absolute; top: 0; bottom: 0; display: inline-flex; flex-direction: row; align-items: center; opacity: 0; } .module-message:hover .module-message__buttons { opacity: 1; } .module-message__buttons--incoming { left: calc(100% + 8px); } .module-message__buttons--outgoing { right: calc(100% + 8px); flex-direction: row-reverse; } .module-message__buttons__download { height: 24px; width: 24px; display: inline-block; cursor: pointer; @include light-theme { @include color-svg( '../images/icons/v2/save-outline-24.svg', $color-gray-45 ); &:hover { @include color-svg( '../images/icons/v2/save-outline-24.svg', $color-gray-90 ); } } @include dark-theme { @include color-svg('../images/icons/v2/save-solid-24.svg', $color-gray-45); &:hover { @include color-svg( '../images/icons/v2/save-solid-24.svg', $color-gray-02 ); } } } .module-message__buttons__react { height: 24px; width: 24px; display: inline-block; cursor: pointer; @include light-theme { @include color-svg( '../images/icons/v2/add-emoji-outline-24.svg', $color-gray-45 ); &:hover { @include color-svg( '../images/icons/v2/add-emoji-outline-24.svg', $color-gray-90 ); } } @include dark-theme { @include color-svg( '../images/icons/v2/add-emoji-outline-24.svg', $color-gray-45 ); &:hover { @include color-svg( '../images/icons/v2/add-emoji-outline-24.svg', $color-gray-02 ); } } } .module-message__buttons__download--incoming { margin-left: 12px; } .module-message__buttons__download--outgoing { margin-right: 12px; } .module-message__buttons__reply { height: 24px; width: 24px; display: inline-block; cursor: pointer; @include light-theme { @include color-svg( '../images/icons/v2/reply-outline-24.svg', $color-gray-45 ); &:hover { @include color-svg( '../images/icons/v2/reply-outline-24.svg', $color-gray-90 ); } } @include dark-theme { @include color-svg('../images/icons/v2/reply-solid-24.svg', $color-gray-45); &:hover { @include color-svg( '../images/icons/v2/reply-solid-24.svg', $color-gray-02 ); } } } .module-message__buttons__reply--incoming { margin-left: 12px; } .module-message__buttons__reply--outgoing { margin-right: 12px; } .module-message__buttons__menu { height: 24px; width: 24px; display: inline-block; cursor: pointer; @include color-svg('../images/icons/v2/more-horiz-24.svg', $color-gray-45); @include light-theme { &:hover { @include color-svg( '../images/icons/v2/more-horiz-24.svg', $color-gray-90 ); } } @include dark-theme { &:hover { @include color-svg( '../images/icons/v2/more-horiz-24.svg', $color-gray-02 ); } } } .module-message__buttons__menu--incoming { margin-left: 12px; } .module_message__buttons__menu--outgoing { margin-right: 12px; } .module-message__error-container { min-width: 28px; position: relative; } .module-message__error { width: 20px; height: 20px; display: inline-block; position: absolute; bottom: 4px; @include light-theme { @include color-svg( '../images/icons/v2/error-outline-24.svg', $color-accent-red ); } @include dark-theme { @include color-svg( '../images/icons/v2/error-solid-24.svg', $color-accent-red ); } } .module-message__error--outgoing { left: 8px; } .module-message__error--incoming { right: 8px; } .module-message__container { position: relative; display: inline-block; border-radius: 16px; padding-right: 12px; padding-left: 12px; padding-top: 10px; padding-bottom: 10px; min-width: 0px; @include light-theme { border: 1px solid $color-white; } @include dark-theme { border: 1px solid $color-gray-95; } } // This is the component we put the outline around when the whole message is selected .module-message--selected .module-message__container { @include mouse-mode { animation: message--mouse-selected 1s $ease-out-expo; } } .module-message:focus .module-message__container { @include keyboard-mode { box-shadow: 0 0 0 3px $ultramarine-ui-light; } } @keyframes message--mouse-selected { 0% { box-shadow: 0 0 0 5px transparent; } 10% { box-shadow: 0 0 0 5px $ultramarine-ui-light; } 70% { box-shadow: 0 0 0 5px $ultramarine-ui-light; } 100% { box-shadow: 0 0 0 5px transparent; } } // We disable this highlight for messages with stickers, instead highlighting the sticker .module-message--selected .module-message__container--with-sticker { @include mouse-mode { animation: none; } } .module-message:focus .module-message__container--with-sticker { @include keyboard-mode { box-shadow: none; } } .module-message__container--with-sticker { @include light-theme { border: none; } @include dark-theme { border: none; } padding-bottom: 0px; } .module-message__container--outgoing { @include light-theme { background-color: $color-gray-05; } @include dark-theme { background-color: $color-gray-75; } @include ios-theme { background-color: $ultramarine-ui-light; color: $color-white; } @include ios-dark-theme { background-color: $ultramarine-ui-light; color: $color-gray-05; } } // In case the color gets messed up .module-message__container--incoming { background-color: $color-conversation-grey; @include ios-theme { background-color: $color-gray-05; color: $color-gray-90; } @include ios-dark-theme { background-color: $color-gray-75; color: $color-gray-05; } } @each $color, $value in $conversation-colors { .module-message__container--incoming-#{$color} { background-color: $value; } } .module-message__container--with-tap-to-view { min-width: 148px; cursor: pointer; } .module-message__container--with-tap-to-view-pending { @include ios-theme { background-color: $color-gray-15; } } // In case the color gets messed up .module-message__container--incoming--tap-to-view-pending { background-color: $color-conversation-grey-shade; } @each $color, $value in $conversation-colors-shade { .module-message__container--incoming-#{$color}-tap-to-view-pending { background-color: $value; } } .module-message__container--with-tap-to-view-pending { cursor: default; } .module-message__container--with-tap-to-view-expired { @include light-theme { border: 1px solid $color-gray-15; background-color: $color-white; } @include dark-theme { border: 1px solid $color-gray-60; background-color: $color-gray-95; } @include ios-theme { border: 1px solid $color-gray-15; background-color: $color-white; } @include ios-dark-theme { border: 1px solid $color-gray-60; background-color: $color-gray-95; } } .module-message__container--with-tap-to-view-error { width: auto; cursor: default; @include light-theme { background-color: $color-white; border: 1px solid $color-accent-red; } @include dark-theme { background-color: $color-gray-95; border: 1px solid $color-deep-red; } @include ios-theme { background-color: $color-white; border: 1px solid $color-deep-red; } @include ios-dark-theme { background-color: $color-black; border: 1px solid $color-deep-red; } } .module-message__tap-to-view { margin-top: 2px; display: flex; flex-direction: row; align-items: center; } .module-message__tap-to-view--with-content-above { margin-top: 8px; } .module-message__tap-to-view--with-content-below { margin-bottom: 8px; } .module-message__tap-to-view__spinner-container { margin-right: 6px; flex-grow: 0; flex-shrink: 0; width: 20px; height: 20px; } .module-message__tap-to-view__icon { margin-right: 6px; flex-grow: 0; flex-shrink: 0; width: 20px; height: 20px; @include light-theme { @include color-svg('../images/icons/v2/view-once-24.svg', $color-white); } @include dark-theme { @include color-svg('../images/icons/v2/view-once-24.svg', $color-gray-05); } @include ios-theme { @include color-svg('../images/icons/v2/view-once-24.svg', $color-gray-90); } @include ios-dark-theme { @include color-svg('../images/icons/v2/view-once-24.svg', $color-gray-05); } } .module-message__tap-to-view__icon--outgoing { @include light-theme { background-color: $color-gray-75; } @include dark-theme { background-color: $color-gray-05; } @include ios-theme { background-color: $color-white; } } .module-message__tap-to-view__icon--expired { @include light-theme { @include color-svg('../images/icons/v2/viewed-once-24.svg', $color-gray-75); } @include dark-theme { @include color-svg('../images/icons/v2/viewed-once-24.svg', $color-gray-05); } @include ios-theme { @include color-svg('../images/icons/v2/viewed-once-24.svg', $color-gray-75); } @include ios-dark-theme { @include color-svg('../images/icons/v2/viewed-once-24.svg', $color-gray-05); } } .module-message__tap-to-view__text { @include font-body-1-bold; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-05; } @include ios-theme { color: $color-gray-90; } } .module-message__tap-to-view__text--incoming { @include light-theme { color: $color-white; } @include dark-theme { color: $color-gray-05; } @include ios-theme { color: $color-gray-90; } @include ios-dark-theme { color: $color-gray-05; } } .module-message__tap-to-view__text--incoming-expired { @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-05; } @include ios-theme { color: $color-gray-90; } @include ios-dark-theme { color: $color-gray-05; } } .module-message__tap-to-view__text--incoming-error { @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } @include ios-theme { color: $color-gray-60; } } .module-message__tap-to-view__text--outgoing { @include ios-theme { color: $color-white; } } .module-message__tap-to-view__text--outgoing-expired { @include ios-theme { color: $color-gray-90; } @include ios-dark-theme { color: $color-gray-05; } } .module-message__attachment-container { // To ensure that images are centered if they aren't full width of bubble text-align: center; position: relative; // These should match the paddings from .module-message__container, // effectively "undoing" that padding. margin: { left: -12px; right: -12px; top: -10px; bottom: -10px; } border-radius: 16px; line-height: 0; overflow: hidden; @include light-theme { background-color: $color-white; } @include dark-theme { background-color: $color-gray-95; } &--with-content-below { margin-bottom: 7px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } &--with-content-above { margin-top: 4px; border-top-left-radius: 0px; border-top-right-radius: 0px; } } .module-message__sticker-container { // To ensure that images are centered if they aren't full width of bubble text-align: center; margin: { left: -12px; right: -12px; top: -9px; bottom: -5px; } &--with-content-below { margin-bottom: 5px; } &--with-content-above { margin-top: 4px; } } .module-message__img-attachment { margin-bottom: -3px; // redundant with attachment-container, but we get cursor flashing on move otherwise cursor: pointer; } .module-message__audio-attachment { margin-top: 2px; } .module-message__audio-attachment--with-content-below { margin-bottom: 5px; } .module-message__audio-attachment--with-content-above { margin-top: 6px; } .module-message__generic-attachment { @include button-reset; width: 100%; display: flex; flex-direction: row; align-items: center; @include keyboard-mode { &:focus { box-shadow: 0px 0px 0px 2px $ultramarine-ui-light; } } } .module-message__generic-attachment--with-content-below { padding-bottom: 6px; } .module-message__generic-attachment--with-content-above { padding-top: 4px; } .module-message__generic-attachment--not-active { cursor: default; pointer-events: none; } .module-message__generic-attachment__icon-container { position: relative; } .module-message__generic-attachment__spinner-container { padding-left: 4px; padding-right: 4px; } .module-message__generic-attachment__icon { background: url('../images/file-gradient.svg') no-repeat center; height: 44px; width: 56px; margin-left: -13px; margin-right: -14px; margin-bottom: -4px; // So we can center the extension text inside this icon display: flex; flex-direction: row; align-items: center; } .module-message__generic-attachment__icon-dangerous-container { position: absolute; top: -1px; right: -4px; height: 16px; width: 16px; border-radius: 50%; background-color: $color-white; } .module-message__generic-attachment__icon-dangerous { height: 16px; width: 16px; @include color-svg( '../images/icons/v2/error-solid-24.svg', $color-accent-red ); } .module-message__generic-attachment__icon__extension { font-size: 10px; line-height: 13px; letter-spacing: 0.1px; text-transform: uppercase; // Along with flow layout in parent item, centers text text-align: center; width: 25px; margin-left: auto; margin-right: auto; // We don't have much room for text here, cut it off without ellipse overflow-x: hidden; white-space: nowrap; text-overflow: clip; color: $color-gray-90; } .module-message__generic-attachment__text { flex-grow: 1; margin-left: 8px; // The width of the icon plus our 8px margin max-width: calc(100% - 37px); } .module-message__generic-attachment__file-name { @include font-body-2-bold; margin-top: 2px; // Handling really long filenames - cut them off overflow-x: hidden; white-space: nowrap; text-overflow: ellipsis; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-02; } @include ios-theme { color: $color-white; } } .module-message__generic-attachment__file-name--incoming { color: $color-white; @include ios-theme { color: $color-gray-90; } @include ios-dark-theme { color: $color-gray-25; } } .module-message__generic-attachment__file-size { @include font-body-2; margin-top: 3px; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-02; } @include ios-theme { color: $color-white; } } .module-message__generic-attachment__file-size--incoming { color: $color-white; @include ios-theme { color: $color-gray-90; } @include ios-dark-theme { color: $color-gray-25; } } .module-message__link-preview { @include button-reset; display: block; margin-left: -12px; margin-right: -12px; width: calc(100% + 24px); margin-top: -10px; margin-bottom: 5px; border-top-left-radius: 16px; border-top-right-radius: 16px; overflow: hidden; @include keyboard-mode { &:focus { box-shadow: 0px 0px 0px 2px $ultramarine-ui-light; } } } .module-message__link-preview--with-content-above { margin-top: 4px; border-top-left-radius: 0px; border-top-right-radius: 0px; } .module-message__link-preview__content { padding: 8px; border: 1px solid transparent; /* Color overwritten below. */ border-bottom: 0; border-top-left-radius: 16px; border-top-right-radius: 16px; background-color: $color-white; display: flex; flex-direction: row; align-items: flex-start; @include light-theme { border-color: $color-black-alpha-20; } @include dark-theme { background-color: $color-gray-95; border-color: $color-gray-60; } } .module-message__link-preview__content--with-content-above { border-top: none; border-bottom: none; border-top-left-radius: 0px; border-top-right-radius: 0px; } .module-message__link-preview__icon_container { margin: -2px; margin-right: 8px; display: inline-block; } .module-message__link-preview__text--with-icon { margin-top: 5px; } .module-message__link-preview__title { @include font-body-1-bold; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-05; } } .module-message__link-preview__description { @include font-body-2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-05; } } .module-message__link-preview__footer { @include font-body-2; display: flex; flex-flow: row wrap; align-items: center; margin-top: 4px; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } > *:not(:first-child) { display: flex; &:before { content: '•'; font-size: 50%; margin-left: 0.2rem; margin-right: 0.2rem; } } } .module-message__link-preview__location { text-transform: lowercase; } .module-message__author { @include font-body-2-bold; height: 18px; overflow-x: hidden; overflow-y: hidden; white-space: nowrap; text-overflow: ellipsis; color: $color-white-alpha-90; @include ios-theme { color: $color-gray-90; } @include ios-dark-theme { color: $color-gray-05; } &__profile-name { @include font-caption-bold-italic; } } .module-message__author--with-tap-to-view-expired { @include font-body-2-bold; height: 18px; overflow-x: hidden; overflow-y: hidden; white-space: nowrap; text-overflow: ellipsis; @include light-theme { color: $color-gray-75; } @include dark-theme { color: $color-white; } &__profile-name { font-style: italic; } } .module-message__author_with_sticker { @include font-body-2-bold; height: 18px; overflow-x: hidden; overflow-y: hidden; white-space: nowrap; text-overflow: ellipsis; // Stickers are pretty narrow, so we allow this one element of a sticker // message to go wider than normal. // There's a tension here, since this is width and not max-width; things will // look bad for RTL users if we make it too wide. width: 300px; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-05; } &__profile-name { font-style: italic; } } .module-message__text { @include font-body-1; text-align: start; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; white-space: pre-wrap; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-05; } @include ios-theme { color: $color-white-alpha-90; } @include ios-dark-theme { color: $color-white-alpha-90; } a { text-decoration: underline; outline: none; @include light-theme { color: $color-gray-90; } @include keyboard-mode { &:focus { outline: 1px solid $color-gray-90; } } @include dark-theme { color: $color-gray-05; } @include dark-keyboard-mode { &:focus { outline: 1px solid $color-gray-05; } } @include ios-theme { color: $color-white-alpha-90; } @include ios-dark-theme { color: $color-white-alpha-90; } @include ios-keyboard-mode { &:focus { outline: 1px solid $color-white-alpha-90; } } } } .module-message__text--incoming { @include light-theme { color: $color-white; } @include ios-theme { color: $color-gray-90; } @include dark-theme { color: $color-white-alpha-90; } @include ios-dark-theme { color: $color-gray-05; } a { text-decoration: underline; outline: none; @include light-theme { color: $color-white; } @include keyboard-mode { &:focus { outline: 1px solid $color-white; } } @include dark-theme { color: $color-white-alpha-90; } @include dark-keyboard-mode { &:focus { outline: 1px solid $color-white-alpha-90; } } @include ios-theme { color: $color-gray-90; } @include ios-keyboard-mode { &:focus { outline: 1px solid $color-gray-90; } } @include ios-dark-theme { color: $color-gray-05; } @include dark-ios-keyboard-mode { &:focus { outline: 1px solid $color-gray-05; } } } } .module-message__text--error { @include font-body-1-italic; } .module-message__metadata { display: flex; flex-direction: row; align-items: center; margin-top: 3px; margin-bottom: -3px; &--outgoing { justify-content: flex-end; } &--with-reactions { margin-bottom: -2px; } } // With an image and no caption, this section needs to be on top of the image overlay .module-message__metadata--with-image-no-caption { position: absolute; bottom: 9px; z-index: 2; width: 100%; // Because this is absolutely positioned, we 100% is too big, take it down by parent // padding sizes. padding-right: 24px; // This is so all clicks go right through to the underlying image. pointer-events: none; } .module-message__metadata__date { @include font-caption; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-white-alpha-80; } @include ios-theme { color: $color-white-alpha-80; } @include ios-dark-theme { color: $color-white-alpha-80; } } .module-message__metadata__tapable { @include button-reset; } .module-message__metadata__date--incoming { color: $color-white-alpha-80; @include ios-theme { color: $color-gray-60; } @include ios-dark-theme { color: $color-gray-25; } } .module-message__metadata__date--with-image-no-caption { @include light-theme { color: $color-white; } @include dark-theme { color: $color-white-alpha-80; } @include ios-theme { color: $color-white; } } .module-message__metadata__date.module-message__metadata__date--incoming-with-tap-to-view-expired { color: $color-gray-75; @include dark-theme { color: $color-white-alpha-80; } } .module-message__metadata__date.module-message__metadata__date--outgoing-with-tap-to-view-expired { color: $color-gray-75; @include dark-theme { color: $color-white-alpha-80; } } .module-message__metadata__date--with-sticker { @include ios-theme { color: $color-gray-60; } } .module-message__metadata__status-icon { width: 12px; height: 12px; display: inline-block; margin-left: 6px; margin-bottom: 2px; } .module-message__metadata__status-icon--sending { animation: module-message__metadata__status-icon--spinning 4s linear infinite; @include light-theme { @include color-svg('../images/sending.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/sending.svg', $color-white-alpha-80); } @include ios-theme { @include color-svg('../images/sending.svg', $color-white); } @include ios-dark-theme { @include color-svg('../images/sending.svg', $color-white); } } @keyframes module-message__metadata__status-icon--spinning { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .module-message__metadata__status-icon--sent { @include light-theme { @include color-svg('../images/check-circle-outline.svg', $color-gray-60); } @include dark-theme { @include color-svg( '../images/check-circle-outline.svg', $color-white-alpha-80 ); } @include ios-theme { @include color-svg( '../images/check-circle-outline.svg', $color-white-alpha-80 ); } @include ios-dark-theme { @include color-svg( '../images/check-circle-outline.svg', $color-white-alpha-80 ); } } .module-message__metadata__status-icon--delivered { width: 18px; @include light-theme { @include color-svg('../images/double-check.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/double-check.svg', $color-white-alpha-80); } @include ios-theme { @include color-svg('../images/double-check.svg', $color-white-alpha-80); } @include ios-dark-theme { @include color-svg('../images/double-check.svg', $color-white-alpha-80); } } .module-message__metadata__status-icon--read { width: 18px; @include light-theme { @include color-svg('../images/read.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/read.svg', $color-white-alpha-80); } @include ios-theme { @include color-svg('../images/read.svg', $color-white-alpha-80); } @include ios-dark-theme { @include color-svg('../images/read.svg', $color-white-alpha-80); } } // When status indicators are overlaid on top of an image, they use different colors .module-message__metadata__status-icon--with-image-no-caption { @include light-theme { background-color: $color-white; } @include dark-theme { background-color: $color-gray-02; } @include ios-theme { background-color: $color-white; } } .module-message__metadata__status-icon--with-sticker { @include ios-theme { background-color: $color-gray-60; } } .module-message__metadata__status-icon--with-tap-to-view-expired { @include ios-theme { background-color: $color-gray-75; } } .module-message__metadata__spinner-container { margin-left: 6px; } .module-message__send-message-button { @include button-reset; width: calc(100% + 24px); @include font-body-2-bold; margin-top: 8px; margin-bottom: -10px; margin-left: -12px; margin-right: -12px; text-align: center; padding: 10px; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; @include light-theme { color: $ultramarine-ui-light; background-color: $color-gray-02; border: 1px solid $color-black-alpha-20; } @include dark-theme { color: $ultramarine-ui-dark; background-color: $color-gray-75; border: 1px solid $color-gray-45; } @include keyboard-mode { &:focus { box-shadow: 0px 0px 0px 2px $ultramarine-ui-light; } } } .module-message__author-avatar { position: absolute; bottom: 0px; right: calc(100% + 8px); } .module-message__typing-container { height: 16px; display: flex; flex-direction: row; align-items: center; } .module-message__reactions { position: absolute; bottom: 0px; z-index: 2; height: 22px; display: flex; } .module-message__reactions__reaction { @include button-reset; min-width: 28px; height: 22px; border: 1px solid; border-radius: 33px; display: flex; justify-content: center; align-items: center; &--with-count { min-width: 40px; } &__count { @include font-caption-bold; margin-left: 4px; &--no-emoji { margin-left: 0px; } @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } &--is-me { @include light-theme { color: $color-gray-75; } @include dark-theme { color: $color-gray-15; } @include ios-theme { color: $color-white-alpha-90; } } } &:focus { outline: none; } @include keyboard-mode { &:focus { box-shadow: 0px 0px 0px 2px $ultramarine-ui-light; } } @include light-theme() { border-color: $color-white; background: $color-gray-05; } @include dark-theme() { border-color: $color-gray-95; background: $color-gray-75; } &--is-me { @include light-theme() { background: $color-gray-25; } @include dark-theme() { background: $color-gray-45; } @include ios-theme() { background: $color-accent-blue; } } } // Module: Expire Timer .module-expire-timer { width: 12px; height: 12px; display: inline-block; margin-left: 6px; margin-bottom: 2px; @include light-theme { @include color-svg('../images/icons/v2/timer-60-12.svg', $color-gray-60); } @include dark-theme { @include color-svg( '../images/icons/v2/timer-60-12.svg', $color-white-alpha-80 ); } @include ios-theme { @include color-svg( '../images/icons/v2/timer-60-12.svg', $color-white-alpha-80 ); } } $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05', '00'; @each $timer-icon in $timer-icons { .module-expire-timer--#{$timer-icon} { @include light-theme { @include color-svg( '../images/icons/v2/timer-#{$timer-icon}-12.svg', $color-gray-60 ); } @include dark-theme { @include color-svg( '../images/icons/v2/timer-#{$timer-icon}-12.svg', $color-white-alpha-80 ); } @include ios-theme { @include color-svg( '../images/icons/v2/timer-#{$timer-icon}-12.svg', $color-white-alpha-80 ); } } } .module-expire-timer--incoming { background-color: $color-white-alpha-80; @include ios-theme { background-color: $color-gray-60; } @include ios-dark-theme { background-color: $color-gray-25; } } .module-expire-timer.module-expire-timer--incoming-with-tap-to-view-expired { background-color: $color-gray-75; @include dark-theme { background-color: $color-white-alpha-80; } } .module-expire-timer.module-expire-timer--outgoing-with-tap-to-view-expired { background-color: $color-gray-75; @include dark-theme { background-color: $color-white-alpha-80; } } .module-expire-timer--with-sticker { @include ios-theme { background-color: $color-gray-60; } } // When status indicators are overlaid on top of an image, they use different colors .module-expire-timer--with-image-no-caption { @include light-theme { background-color: $color-white; } @include ios-theme { background-color: $color-white; } @include dark-theme { background-color: $color-gray-02; } } // Module: Quoted Reply .module-quote-container { margin: { left: -6px; right: -6px; top: -4px; bottom: 5px; } } .module-quote-container--with-content-above { margin-top: 3px; } .module-quote { @include button-reset; display: block; // To leave room for image thumbnail min-height: 54px; width: 100%; position: relative; border-radius: 4px; border-top-left-radius: 10px; border-top-right-radius: 10px; display: flex; flex-direction: row; align-items: stretch; overflow: hidden; border-left-width: 4px; border-left-style: solid; @include keyboard-mode { &:focus { box-shadow: 0px 0px 0px 2px $ultramarine-ui-light; } } } .module-quote--no-click { cursor: auto; } .module-quote--with-content-above { border-top-left-radius: 4px; border-top-right-radius: 4px; } .module-quote--with-reference-warning { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .module-quote--outgoing { border-left-color: $color-conversation-grey; @include light-theme { background-color: $color-conversation-grey-tint; } @include dark-theme { background-color: $color-conversation-grey-shade; } // To preserve contrast @include ios-keyboard-mode { &:focus { box-shadow: 0px 0px 0px 2px $color-white; } } // Note: both of these override all of the specific color classes below @include ios-dark-theme { background-color: $ultramarine-brand-dark; border-left-color: $color-black; } @include ios-theme { background-color: $color-ios-blue-tint; border-left-color: $color-white; } } .module-composition-area__row { .module-quote--outgoing { border-left-style: solid; @include ios-dark-theme { background-color: $ultramarine-brand-dark; border-left-color: $color-ios-blue-tint; } @include ios-theme { background-color: $color-ios-blue-tint; border-left-color: $ultramarine-ui-light; } } } @each $color, $value in $conversation-colors { .module-quote--outgoing-#{$color} { border-left-color: $value; } } @each $color, $value in $conversation-colors-tint { .module-quote--outgoing-#{$color} { @include light-theme { background-color: $value; } } } @each $color, $value in $conversation-colors-shade { .module-quote--outgoing-#{$color} { @include dark-theme { background-color: $value; } } } .module-quote--incoming { @include light-theme { border-left-color: $color-white; background-color: $color-conversation-grey-tint; } @include dark-theme { border-left-color: $color-black; background-color: $color-conversation-grey-shade; } // Note: both of these override all of the specific color classes below @include ios-theme { background-color: $color-ios-blue-tint; border-left-color: $ultramarine-ui-light; } @include ios-dark-theme { background-color: $ultramarine-brand-dark; border-left-color: $color-ios-blue-tint; } } @each $color, $value in $conversation-colors-tint { .module-quote--incoming-#{$color} { @include light-theme { background-color: $value; } } } @each $color, $value in $conversation-colors-shade { .module-quote--incoming-#{$color} { @include dark-theme { background-color: $value; } } } .module-quote__primary { flex-grow: 1; padding-left: 8px; padding-right: 8px; padding-top: 7px; padding-bottom: 7px; max-width: 100%; } .module-quote__primary__author { @include font-body-2-bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-02; } @include ios-dark-theme { color: $color-gray-05; } } .module-quote__primary__author--incoming { @include ios-dark-theme { color: $color-gray-05; } } .module-quote__primary__profile-name { @include font-body-2-bold-italic; } .module-quote__primary__text { @include font-body-1; text-align: start; @include light-theme { color: $color-gray-90; a { color: $color-gray-90; } } @include dark-theme { color: $color-gray-02; a { color: $color-gray-02; } } @include ios-dark-theme { color: $color-gray-05; a { color: $color-gray-05; } } overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; white-space: pre-wrap; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; // Note: -webkit-line-clamp doesn't work for RTL text, and it forces you to use // ... as the truncation indicator. That's not a solution that works well for // all languages. More resources: // - http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/ // - https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up-broken-865413f16e5 } .module-quote__primary__text--incoming { @include ios-dark-theme { color: $color-gray-05; a { color: $color-gray-05; } } } .module-quote__primary__type-label { @include font-body-2-italic; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-02; } @include ios-dark-theme { color: $color-gray-05; } } .module-quote__primary__type-label--incoming { @include ios-dark-theme { color: $color-gray-05; } } .module-quote__primary__filename-label { @include font-body-2; } .module-quote__close-container { position: absolute; top: 4px; right: 4px; height: 16px; width: 16px; border-radius: 50%; background-color: $color-black-alpha-40; @include keyboard-mode { &:focus-within { background-color: $ultramarine-ui-light; } } } .module-quote__close-button { @include button-reset; width: 14px; height: 14px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); @include color-svg('../images/icons/v2/x-24.svg', $color-white); } .module-quote__icon-container { flex: initial; min-width: 54px; width: 54px; max-height: 54px; position: relative; img { width: 100%; height: 100%; object-fit: cover; } } .module-quote__icon-container__inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; display: flex; align-items: center; justify-content: center; } .module-quote__icon-container__circle-background { display: flex; align-items: center; justify-content: center; height: 32px; width: 32px; border-radius: 50%; background-color: $color-white; } .module-quote__icon-container__icon { width: 20px; height: 20px; } .module-quote__icon-container__icon--file { @include color-svg('../images/file.svg', $ultramarine-ui-light); } .module-quote__icon-container__icon--image { @include color-svg('../images/image.svg', $ultramarine-ui-light); } .module-quote__icon-container__icon--microphone { @include color-svg( '../images/icons/v2/mic-outline-24.svg', $ultramarine-ui-light ); } .module-quote__icon-container__icon--play { @include color-svg( '../images/icons/v2/play-solid-24.svg', $ultramarine-ui-light ); } .module-quote__icon-container__icon--movie { @include color-svg('../images/movie.svg', $ultramarine-ui-light); } .module-quote__generic-file { display: flex; flex-direction: row; align-items: center; } .module-quote__generic-file__icon { background: url('../images/file-gradient.svg'); background-size: 75%; background-repeat: no-repeat; height: 28px; width: 36px; margin-left: -4px; margin-right: -6px; margin-bottom: 5px; } .module-quote__generic-file__text { @include font-body-2; max-width: calc(100% - 26px); overflow-x: hidden; white-space: nowrap; text-overflow: ellipsis; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-02; } @include ios-dark-theme { color: $color-gray-05; } } .module-quote__generic-file__text--incoming { @include ios-dark-theme { color: $color-gray-05; } } .module-quote__reference-warning { color: $color-gray-90; height: 26px; display: flex; flex-direction: row; align-items: center; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; padding-left: 8px; padding-right: 8px; background-color: $color-white-alpha-80; @include dark-theme { background-color: $color-white-alpha-20; } @include ios-theme { background-color: $color-ios-ref-warning-light; } @include ios-dark-theme { background-color: $color-ios-ref-warning-dark; } } .module-quote__reference-warning--incoming { color: $color-gray-90; @include ios-theme { background-color: $color-ios-ref-warning-light; } @include ios-dark-theme { background-color: $color-ios-ref-warning-dark; } } .module-quote__reference-warning__icon { height: 16px; width: 16px; @include light-theme { @include color-svg('../images/icons/v2/link-broken-16.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/icons/v2/link-broken-16.svg', $color-gray-25); } @include ios-theme { @include color-svg('../images/icons/v2/link-broken-16.svg', $color-gray-90); } @include ios-dark-theme { @include color-svg('../images/icons/v2/link-broken-16.svg', $color-gray-90); } } .module-quote__reference-warning__icon--incoming { @include ios-theme { @include color-svg('../images/icons/v2/link-broken-16.svg', $color-gray-90); } @include ios-dark-theme { @include color-svg('../images/icons/v2/link-broken-16.svg', $color-gray-90); } } .module-quote__reference-warning__text { @include font-caption; margin-left: 6px; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-02; } @include ios-dark-theme { color: $color-gray-90; } } .module-quote__reference-warning__text--incoming { @include ios-dark-theme { color: $color-gray-90; } } // Module: Embedded Contact .module-embedded-contact { @include button-reset; width: 100%; padding: 5px; display: flex; flex-direction: row; align-items: center; @include keyboard-mode { &:focus { box-shadow: 0px 0px 0px 2px $ultramarine-ui-light; } } } .module-embedded-contact--outgoing { @include ios-keyboard-mode { &:focus { box-shadow: 0px 0px 0px 2px $color-white; } } } .module-embedded-contact--with-content-above { padding-top: 4px; } .module-embedded-contact--with-content-below { padding-bottom: 4px; } .module-embedded-contact__spinner-container { padding-left: 5px; padding-right: 5px; } .module-embedded-contact__text-container { flex-grow: 1; margin-left: 8px; max-width: calc(100% - 58px); } .module-embedded-contact__contact-name { @include font-body-1-bold; margin-top: 6px; max-width: 100%; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-02; } @include ios-theme { color: $color-white; } @include ios-dark-theme { color: $color-gray-05; } } .module-embedded-contact__contact-name--incoming { color: $color-white; @include ios-theme { color: $color-gray-90; } @include ios-dark-theme { color: $color-gray-25; } } .module-embedded-contact__contact-method { @include font-body-2; margin-top: 3px; max-width: 100%; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-white-alpha-80; } @include ios-theme { color: $color-white-alpha-80; } } .module-embedded-contact__contact-method--incoming { color: $color-white-alpha-80; @include ios-theme { color: $color-gray-60; } } // Module: Contact Detail .module-contact-detail { text-align: center; max-width: 300px; margin-left: auto; margin-right: auto; } .module-contact-detail__avatar { margin-bottom: 4px; } .module-contact-detail__contact-name { @include font-body-1-bold; } .module-contact-detail__contact-method { @include font-body-2; margin-top: 10px; } .module-contact-detail__send-message { @include button-reset; border-radius: 4px; background-color: $ultramarine-ui-light; display: inline-block; padding: 6px; margin-top: 20px; color: $color-white; flex-direction: column; align-items: center; } .module-contact-detail__send-message__inner { display: flex; align-items: center; padding-right: 5px; @include font-body-2-bold; } .module-contact-detail__send-message__bubble-icon { height: 17px; width: 18px; display: inline-block; margin-right: 5px; @include light-theme { @include color-svg( '../images/icons/v2/message-outline-24.svg', $color-white ); } @include dark-theme { @include color-svg('../images/icons/v2/message-solid-24.svg', $color-white); } } .module-contact-detail__additional-contact { text-align: left; margin-top: 15px; padding-top: 8px; @include light-theme { border-top: 1px solid $color-gray-05; } @include dark-theme { border-top: 1px solid $color-gray-75; } } .module-contact-detail__additional-contact__type { @include font-caption-bold; color: $color-gray-45; margin-bottom: 3px; } // Module: Inline Notification Wrapper .module-inline-notification-wrapper { outline: none; padding: 5px; @include keyboard-mode { &:focus { @include light-theme { background-color: $color-gray-02; } @include dark-theme { background-color: $color-gray-80; } } } } // Module: Group Notification .module-group-notification { margin-left: 1em; margin-right: 1em; margin-top: 5px; margin-bottom: 5px; text-align: center; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } } .module-group-notification__change { margin-top: 2px; margin-bottom: 2px; } .module-group-notification__contact { font-weight: bold; } // Module: Reset Session Notification .module-reset-session-notification { text-align: center; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } } // Module: Safety Number Notification .module-safety-number-notification { text-align: center; } .module-safety-number-notification__icon { height: 24px; width: 24px; margin-left: auto; margin-right: auto; margin-bottom: 7px; @include light-theme { @include color-svg( '../images/icons/v2/safety-number-outline-24.svg', $color-gray-60 ); } @include dark-theme { @include color-svg( '../images/icons/v2/safety-number-solid-24.svg', $color-gray-25 ); } } .module-safety-number-notification__text { @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } } .module-safety-number-notification__contact { font-weight: bold; } .module-safety-number-notification__button { @include button-reset; @include font-body-2-bold; margin-top: 5px; display: inline-block; padding: 12px; border-radius: 4px; color: $ultramarine-ui-light; @include light-theme { background-color: $color-gray-02; } @include keyboard-mode { &:focus { background-color: $color-gray-15; } } @include dark-theme { background-color: $color-gray-75; } @include dark-keyboard-mode { &:focus { background-color: $color-gray-60; } } } .module-message-calling--notification { .module-message__metadata__date { @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-05; } } } .module-safety-number__bold-name { font-weight: bold; } .module-message-calling { &--audio { text-align: center; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-05; } } &--audio__icon { height: 24px; margin-bottom: 4px; margin-left: auto; margin-right: auto; width: 24px; @include light-theme { @include color-svg( '../images/icons/v2/phone-right-outline-24.svg', $color-gray-75 ); } @include dark-theme { @include color-svg( '../images/icons/v2/phone-right-outline-24.svg', $color-gray-15 ); } } &--video { text-align: center; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-05; } } &--video__icon { height: 24px; margin-bottom: 4px; margin-left: auto; margin-right: auto; width: 24px; @include light-theme { @include color-svg( '../images/icons/v2/video-outline-24.svg', $color-gray-75 ); } @include dark-theme { @include color-svg( '../images/icons/v2/video-outline-24.svg', $color-gray-15 ); } } } .module-message-unsynced { padding-bottom: 24px; text-align: center; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } } .module-message-unsynced__icon { height: 24px; margin-bottom: 4px; margin-left: auto; margin-right: auto; width: 24px; @include light-theme { @include color-svg( '../images/icons/v2/info-outline-24.svg', $color-gray-60 ); } @include dark-theme { @include color-svg('../images/icons/v2/info-solid-24.svg', $color-gray-25); } } // Module: Verification Notification .module-verification-notification { text-align: center; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } } .module-verification-notification__contact { font-weight: bold; } .module-verification-notification__icon--mark-verified { height: 24px; width: 24px; margin-left: auto; margin-right: auto; margin-bottom: 4px; @include light-theme { @include color-svg('../images/icons/v2/check-24.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/icons/v2/check-24.svg', $color-gray-25); } } .module-verification-notification__icon--mark-not-verified { height: 24px; width: 24px; margin-left: auto; margin-right: auto; margin-bottom: 7px; @include light-theme { @include color-svg( '../images/icons/v2/safety-number-outline-24.svg', $color-gray-60 ); } @include dark-theme { @include color-svg( '../images/icons/v2/safety-number-solid-24.svg', $color-gray-25 ); } } // Module: Timer Notification .module-timer-notification { text-align: center; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-05; } } .module-timer-notification__icon-container { margin-left: auto; margin-right: auto; display: inline-flex; flex-direction: row; align-items: center; margin-bottom: 4px; } .module-timer-notification__icon { height: 20px; width: 20px; display: inline-block; @include light-theme { @include color-svg('../images/icons/v2/timer-24.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/icons/v2/timer-24.svg', $color-gray-05); } } .module-timer-notification__icon--disabled { @include light-theme { @include color-svg( '../images/icons/v2/timer-disabled-24.svg', $color-gray-60 ); } @include dark-theme { @include color-svg( '../images/icons/v2/timer-disabled-24.svg', $color-gray-05 ); } } .module-timer-notification__icon-label { margin-left: 6px; // Didn't seem centered otherwise margin-top: 1px; } .module-notification--with-click-handler { cursor: pointer; } .module-notification__icon { height: 24px; width: 24px; margin-left: auto; margin-right: auto; } // Module: Contact List Item .module-contact-list-item { @include button-reset; cursor: inherit; padding: 8px; width: 100%; display: flex; flex-direction: row; align-items: center; @include light-theme { color: $color-gray-60; @include mouse-mode { &:hover { background-color: $color-gray-02; } } @include keyboard-mode { &:focus { background-color: $color-gray-02; } } } @include dark-theme { color: $color-gray-15; } @include dark-mouse-mode { &:hover { background-color: $color-gray-80; } } @include dark-keyboard-mode { &:focus { background-color: $color-gray-80; } } } .module-contact-list-item--with-click-handler { cursor: pointer; } .module-contact-list-item__text { margin-left: 8px; display: flex; flex-direction: row; flex-grow: 1; } .module-contact-list-item__text__name { @include font-body-2-bold; } .module-contact-list-item__text__profile-name { @include font-body-2-bold-italic; } .module-contact-list-item__text__additional-data { @include font-body-2; margin-top: 3p; } .module-contact-list-item__text__verified-icon { display: inline-block; width: 20px; height: 20px; vertical-align: text-bottom; // Trying to account for the whitespace around the check mark margin-bottom: -1px; @include light-theme { @include color-svg('../images/icons/v2/check-24.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/icons/v2/check-24.svg', $color-gray-25); } } .module-contact-list-item__admin { flex-grow: 1; text-align: right; height: 100%; @include font-body-2-bold; } // Module: In Contacts Icon .module-in-contacts-icon__icon { display: inline-block; height: 15px; width: 15px; margin-bottom: 2px; vertical-align: middle; @include light-theme { @include color-svg( '../images/icons/v2/profile-circle-outline-24.svg', $color-gray-60 ); } @include dark-theme { @include color-svg( '../images/icons/v2/profile-circle-outline-24.svg', $color-gray-25 ); } @include keyboard-mode { &:focus { @include color-svg( '../images/icons/v2/profile-circle-outline-24.svg', $ultramarine-ui-light ); } } } .module-in-contacts-icon__tooltip { .react-tooltip-lite { color: $color-white; background-color: $ultramarine-ui-light; } .react-tooltip-lite-arrow { border-color: $ultramarine-ui-light; } @include dark-theme { .react-tooltip-lite { color: $color-white; background-color: $ultramarine-ui-light; } .react-tooltip-lite-arrow { border-color: $ultramarine-ui-light; } } } // Module: Conversation Header .module-conversation-header { padding-left: 16px; padding-right: 16px; display: flex; flex-direction: row; align-items: center; height: $header-height; @include light-theme { color: $color-gray-90; background-color: $color-white; } @include dark-theme { color: $color-gray-02; background-color: $color-gray-95; } } .module-conversation-header__back-icon { display: inline-block; margin-left: -10px; margin-right: -2px; width: 24px; height: 24px; min-width: 24px; vertical-align: text-bottom; border: none; opacity: 0; transition: opacity 250ms ease-out; &:disabled { cursor: default; } &--show { opacity: 1; } @include light-theme { @include color-svg( '../images/icons/v2/chevron-left-24.svg', $color-gray-90 ); } @include dark-theme { @include color-svg( '../images/icons/v2/chevron-left-24.svg', $color-gray-02 ); } } .module-conversation-header__title-container { flex-grow: 1; flex-shrink: 1; min-width: 0; display: block; text-align: center; height: 48px; } .module-conversation-header__title-flex { margin-left: auto; margin-right: auto; display: inline-flex; flex-direction: row; align-items: center; height: 48px; max-width: 100%; } .module-conversation-header__note-to-self { @include dark-theme { color: $color-gray-02; } } .module-conversation-header__avatar { min-width: 28px; } .module-conversation-header__title { margin-left: 6px; min-width: 0; @include font-body-1-bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-user-select: text; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-02; } } .module-conversation-header__contacts-icon { display: inline-block; height: 15px; width: 15px; margin-bottom: 3px; vertical-align: middle; @include light-theme { @include color-svg( '../images/icons/v2/profile-circle-outline-24.svg', $color-gray-60 ); } @include dark-theme { @include color-svg( '../images/icons/v2/profile-circle-outline-24.svg', $color-gray-25 ); } @include keyboard-mode { &:focus { @include color-svg( '../images/icons/v2/profile-circle-outline-24.svg', $ultramarine-ui-light ); } } } .module-conversation-header__title__profile-name { @include font-body-1-bold-italic; } .module-conversation-header__title__verified-icon { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: text-bottom; @include light-theme { @include color-svg('../images/icons/v2/check-24.svg', $color-gray-90); } @include dark-theme { @include color-svg('../images/icons/v2/check-24.svg', $color-gray-02); } } .module-conversation-header__expiration { display: flex; flex-direction: row; align-items: center; padding-left: 8px; padding-right: 8px; transition: opacity 250ms ease-out; &--hidden { opacity: 0; } } .module-conversation-header__expiration__clock-icon { height: 24px; width: 24px; display: inline-block; @include light-theme { @include color-svg('../images/icons/v2/timer-24.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/icons/v2/timer-24.svg', $color-gray-25); } } .module-conversation-header__expiration__setting { margin-left: 5px; text-align: center; } .module-conversation-header__more-button { height: 24px; width: 24px; margin-left: 12px; border: none; opacity: 0; transition: opacity 250ms ease-out; &:disabled { cursor: default; } &--show { opacity: 1; } @include light-theme { @include color-svg('../images/icons/v2/more-horiz-24.svg', $color-gray-75); } @include dark-theme { @include color-svg('../images/icons/v2/more-horiz-24.svg', $color-gray-15); } } .module-conversation-header__search-button { height: 24px; width: 24px; margin-left: 12px; border: none; opacity: 0; transition: opacity 250ms ease-out; &:disabled { cursor: default; } &--show { opacity: 1; } @include light-theme { @include color-svg('../images/icons/v2/search-24.svg', $color-gray-75); } @include dark-theme { @include color-svg('../images/icons/v2/search-24.svg', $color-gray-15); } } .module-conversation-header__audio-calling-button { @include light-theme { @include color-svg( '../images/icons/v2/phone-right-outline-24.svg', $color-gray-75 ); } @include dark-theme { @include color-svg( '../images/icons/v2/phone-right-solid-24.svg', $color-gray-15 ); } height: 24px; width: 24px; margin-left: 12px; border: none; opacity: 0; transition: opacity 250ms ease-out; &:disabled { cursor: default; } &--show { opacity: 1; } } .module-conversation-header__video-calling-button { @include light-theme { @include color-svg( '../images/icons/v2/video-outline-24.svg', $color-gray-75 ); } @include dark-theme { @include color-svg('../images/icons/v2/video-solid-24.svg', $color-gray-15); } height: 24px; width: 24px; margin-left: 12px; border: none; opacity: 0; transition: opacity 250ms ease-out; &:disabled { cursor: default; } &--show { opacity: 1; } } // Module: Message Detail .module-message-detail { max-width: 650px; margin-left: auto; margin-right: auto; padding: 20px; outline: none; } .module-message-detail__message-container { padding-top: 20px; padding-bottom: 20px; &::after { content: '.'; visibility: hidden; display: block; height: 0; clear: both; } } .module-message-detail__label { @include font-body-1-bold; } .module-message-detail__unix-timestamp { @include light-theme { color: $color-gray-05; } @include dark-theme { color: $color-gray-45; } } .module-message-detail__delete-button-container { text-align: center; margin-top: 10px; } .module-message-detail__delete-button { @include button-reset; @include keyboard-mode { &:focus { outline: -webkit-focus-ring-color auto 5px; } } border-radius: 5px; margin: 1em auto; padding: 1em; background-color: $color-accent-red; color: $color-white; @include light-theme { border: solid 1px $color-gray-45; box-shadow: 0 0 10px -3px $color-black-alpha-60; } @include dark-theme { border: solid 1px $color-gray-25; box-shadow: 0 0 10px -3px $color-white-alpha-60; } } .module-message-detail__contact-container { margin: 20px; } .module-message-detail__contact { margin-bottom: 8px; display: flex; flex-direction: row; align-items: center; } .module-message-detail__contact__text { margin-left: 10px; flex-grow: 1; } .module-message-detail__contact__error { color: $color-accent-red; font-weight: bold; } .module-message-detail__contact__status-icon { width: 12px; height: 12px; display: inline-block; margin-bottom: 2px; } .module-message-detail__contact__status-icon--sending { animation: module-message-detail__contact__status-icon--spinning 4s linear infinite; @include light-theme { @include color-svg('../images/sending.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/sending.svg', $color-gray-25); } } @keyframes module-message-detail__contact__status-icon--spinning { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .module-message-detail__contact__status-icon--sent { @include light-theme { @include color-svg('../images/check-circle-outline.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/check-circle-outline.svg', $color-gray-25); } } .module-message-detail__contact__status-icon--delivered { width: 18px; @include light-theme { @include color-svg('../images/double-check.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/double-check.svg', $color-gray-25); } } .module-message-detail__contact__status-icon--read { width: 18px; @include light-theme { @include color-svg('../images/read.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/read.svg', $color-gray-25); } } .module-message-detail__contact__status-icon--error { @include light-theme { @include color-svg( '../images/icons/v2/error-outline-12.svg', $color-accent-red ); } @include dark-theme { @include color-svg( '../images/icons/v2/error-solid-12.svg', $color-accent-red ); } } .module-message-detail__contact__unidentified-delivery-icon { margin-left: 6px; margin-right: 10px; width: 20px; height: 20px; display: inline-block; @include light-theme { @include color-svg('../images/unidentified-delivery.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/unidentified-delivery.svg', $color-gray-25); } } .module-message-detail__contact__error-buttons { text-align: right; } .module-message-detail__contact__show-safety-number { @include button-reset; padding: 4px; border-radius: 4px; color: $color-white; @include light-theme { background-color: $color-gray-45; } @include dark-theme { background-color: $color-gray-25; } } .module-message-detail__contact__send-anyway { @include button-reset; margin-left: 5px; margin-top: 5px; padding: 4px; border-radius: 4px; color: $color-white; background-color: $color-accent-red; } // Module: Media Gallery .module-media-gallery { display: flex; flex-direction: column; flex-grow: 1; width: 100%; height: 100%; outline: none; } .module-media-gallery__tab-container { display: flex; flex-grow: 0; flex-shrink: 0; cursor: pointer; width: 100%; } .module-media-gallery__tab { width: 100%; padding: 20px; text-align: center; @include light-theme { background-color: $color-gray-02; } @include dark-theme { background-color: $color-gray-90; } outline: none; @include keyboard-mode { &:focus { @include light-theme { background-color: $color-gray-15; } @include dark-theme { background-color: $color-gray-75; } } } } .module-media-gallery__tab--active { border-bottom: 2px solid $ultramarine-ui-light; } .module-media-gallery__content { display: flex; flex-grow: 1; overflow-y: auto; padding: 20px; } .module-media-gallery__sections { display: flex; flex-grow: 1; flex-direction: column; } // Module: Attachment Section .module-attachment-section { width: 100%; } .module-attachment-section__header { @include font-body-1-bold; } .module-attachment-section__items { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; } // Module: Document List Item .module-document-list-item { width: 100%; height: 72px; } .module-document-list-item--with-separator { @include light-theme { border-bottom: 1px solid $color-gray-02; } @include dark-theme { border-bottom: 1px solid $color-gray-75; } } .module-document-list-item__content { @include button-reset; width: 100%; height: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; @include keyboard-mode { &:focus { box-shadow: 0px 0px 0px 2px $ultramarine-ui-light; } } } .module-document-list-item__icon { flex-shrink: 0; width: 48px; height: 48px; @include color-svg('../images/file.svg', $color-gray-45); } .module-document-list-item__metadata { display: inline-flex; flex-direction: column; flex-grow: 1; flex-shrink: 0; margin-left: 8px; margin-right: 8px; } .module-document-list-item__file-size { display: inline-block; margin-top: 8px; @include font-body-2; } .module-document-list-item__date { display: inline-block; flex-shrink: 0; } // Module: Media Grid Item .module-media-grid-item { @include button-reset; height: 94px; width: 94px; background-color: $color-gray-05; margin-right: 4px; margin-bottom: 4px; position: relative; @include keyboard-mode { &:focus { box-shadow: 0px 0px 0px 2px $ultramarine-ui-light; } } } .module-media-grid-item__image { height: 94px; width: 94px; object-fit: cover; } .module-media-grid-item__icon { position: absolute; top: 15px; bottom: 15px; left: 15px; right: 15px; } .module-media-grid-item__icon-image { @include color-svg('../images/image.svg', $color-gray-45); } .module-media-grid-item__image-container { height: 94px; width: 94px; object-fit: cover; position: relative; } .module-media-grid-item__circle-overlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; background-color: $color-white; border-radius: 21px; } .module-media-grid-item__play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 24px; width: 24px; @include color-svg( '../images/icons/v2/play-solid-24.svg', $ultramarine-ui-light ); } .module-media-grid-item__icon-video { @include color-svg('../images/movie.svg', $color-gray-45); } .module-media-grid-item__icon-generic { @include color-svg('../images/file.svg', $color-gray-45); } /* Module: Empty State*/ .module-empty-state { display: flex; justify-content: center; align-items: center; flex-grow: 1; @include font-title-1; color: $color-gray-45; } // Module: Conversation Hero .module-conversation-hero { padding: 32px 0 28px 0; text-align: center; &__avatar { margin-bottom: 12px; } &__profile-name { @include font-title-2; margin-bottom: 2px; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-05; } } &__with { @include font-body-2; margin-bottom: 16px; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } } &__membership { @include font-body-2; padding: 0 16px; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } &__name { @include font-body-2-bold; } } } // Module: Message Request Actions .module-message-request-actions { padding: 8px 16px 12px 16px; @include light-theme { background: $color-white; } @include dark-theme { background: $color-gray-95; } &__message { @include font-body-2; text-align: center; margin-bottom: 12px; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } &__name { @include font-body-2-bold; } } &__buttons { display: flex; flex-direction: row; justify-content: center; &__button { border: none; border-radius: 4px; min-width: 80px; height: 36px; padding: 0 14px; text-align: center; &:focus { outline: none; @include keyboard-mode { box-shadow: 0px 0px 0px 2px $ultramarine-ui-light; } } @include font-body-1-bold; @include light-theme { background-color: $color-gray-05; } @include dark-theme { background-color: $color-gray-75; } &:not(:last-of-type) { margin-right: 8px; } &--deny { color: $color-accent-red; } &--accept { color: $color-accent-blue; } } } } // Module: Conversation List Item .module-conversation-list-item { @include button-reset; width: 100%; display: flex; flex-direction: row; padding-right: 16px; padding-left: 16px; align-items: center; &:hover, &:focus { @include light-theme { background-color: $color-gray-05; } @include dark-theme { background-color: $color-gray-75; } } } .module-conversation-list-item__muted { display: inline-block; height: 14px; margin-right: 4px; vertical-align: middle; width: 14px; @include light-theme { @include color-svg( '../images/icons/v2/sound-off-outline-24.svg', $color-gray-60 ); } @include dark-theme { @include color-svg( '../images/icons/v2/sound-off-outline-24.svg', $color-gray-25 ); } } .module-conversation-list-item--has-unread { padding-left: 12px; @include light-theme { border-left: 4px solid $ultramarine-ui-light; } @include dark-theme { border-left: 4px solid $ultramarine-ui-dark; } } .module-conversation-list-item--is-selected { @include light-theme { background-color: $color-gray-15; } @include dark-theme { background-color: $color-gray-65; } } .module-conversation-list-item__avatar-container { position: relative; margin-top: 8px; margin-bottom: 8px; } .module-conversation-list-item__unread-count { text-align: center; padding-left: 3px; padding-right: 3px; position: absolute; right: -6px; top: 0px; @include font-caption-bold; height: 20px; min-width: 20px; line-height: 20px; border-radius: 10px; color: $color-white; @include light-theme { background-color: $ultramarine-ui-light; box-shadow: 0px 0px 0px 1px $color-gray-02; } @include dark-theme { background-color: $ultramarine-ui-dark; box-shadow: 0px 0px 0px 1px $color-gray-90; } } .module-conversation-list-item__content { flex-grow: 1; margin-left: 12px; // parent - 52px (for avatar) - 12p (margin to avatar) max-width: calc(100% - 64px); display: flex; flex-direction: column; align-items: stretch; } .module-conversation-list-item__header { display: flex; flex-direction: row; align-items: center; } .module-conversation-list-item__header__name { flex-grow: 1; flex-shrink: 1; @include font-body-1-bold; overflow-x: hidden; white-space: nowrap; text-overflow: ellipsis; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-05; } } .module-conversation-list-item__header__timestamp { flex-shrink: 0; margin-left: 6px; @include font-caption; overflow-x: hidden; white-space: nowrap; text-overflow: ellipsis; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } } .module-conversation-list-item__header__timestamp--with-unread { @include font-caption-bold; } .module-conversation-list-item__header__date--has-unread { @include font-caption-bold; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-05; } } .module-conversation-list-item__message { display: flex; flex-direction: row; align-items: center; } .module-conversation-list-item__message-request { @include font-body-2-bold; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } } .module-conversation-list-item__message__text { flex-grow: 1; flex-shrink: 1; @include font-body-2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } } .module-conversation-list-item__message__text--has-unread { @include font-body-2-bold; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-05; } } .module-conversation-list-item__message { &__draft-prefix, &__deleted-for-everyone { font-style: italic; margin-right: 3px; } } .module-conversation-list-item__message__status-icon { flex-shrink: 0; margin-top: 2px; width: 12px; height: 12px; display: inline-block; margin-left: 6px; } .module-conversation-list-item__message__status-icon--sending { animation: module-conversation-list-item__message__status-icon--spinning 4s linear infinite; @include light-theme { @include color-svg('../images/sending.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/sending.svg', $color-gray-45); } } @keyframes module-conversation-list-item__message__status-icon--spinning { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .module-conversation-list-item__message__status-icon--sent { @include light-theme { @include color-svg('../images/check-circle-outline.svg', $color-gray-25); } @include dark-theme { @include color-svg('../images/check-circle-outline.svg', $color-gray-45); } } .module-conversation-list-item__message__status-icon--delivered { @include light-theme { @include color-svg('../images/double-check.svg', $color-gray-25); } @include dark-theme { @include color-svg('../images/double-check.svg', $color-gray-45); } width: 18px; } .module-conversation-list-item__message__status-icon--read { @include light-theme { @include color-svg('../images/read.svg', $color-gray-25); } @include dark-theme { @include color-svg('../images/read.svg', $color-gray-45); } width: 18px; } .module-conversation-list-item__message__status-icon--error, .module-conversation-list-item__message__status-icon--partial-sent { @include light-theme { @include color-svg( '../images/icons/v2/error-outline-12.svg', $color-accent-red ); } @include dark-theme { @include color-svg( '../images/icons/v2/error-solid-12.svg', $color-accent-red ); } } // Module: Avatar .module-avatar { position: relative; vertical-align: middle; display: inline-block; border-radius: 50%; user-select: none; img { object-fit: cover; border-radius: 50%; } } .module-avatar-button { @include button-reset; // Ensures that the border of the item sticks tight to the inner contents width: 100%; line-height: 0; border-radius: 50%; @include keyboard-mode { &:focus { box-shadow: 0px 0px 0px 2px $ultramarine-ui-light; } } } .module-avatar__label { width: 100%; text-align: center; font-weight: bold; text-transform: uppercase; @include light-theme { color: $color-white; } @include dark-theme { color: $color-gray-05; } } .module-avatar__icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .module-avatar__icon--group { @include light-theme { @include color-svg('../images/icons/v2/group-outline-40.svg', $color-white); } @include dark-theme { @include color-svg( '../images/icons/v2/group-outline-40.svg', $color-gray-05 ); } } .module-avatar__icon--direct { @include light-theme { @include color-svg( '../images/icons/v2/profile-outline-40.svg', $color-white ); } @include dark-theme { @include color-svg( '../images/icons/v2/profile-outline-40.svg', $color-gray-05 ); } } .module-avatar--28 { height: 28px; width: 28px; img { height: 28px; width: 28px; } } .module-avatar__icon--28.module-avatar__icon--group { height: 20px; width: 20px; @include light-theme { @include color-svg('../images/icons/v2/group-outline-20.svg', $color-white); } @include dark-theme { @include color-svg( '../images/icons/v2/group-outline-20.svg', $color-gray-05 ); } } .module-avatar__icon--28.module-avatar__icon--direct { height: 20px; width: 20px; @include light-theme { @include color-svg( '../images/icons/v2/profile-outline-20.svg', $color-white ); } @include dark-theme { @include color-svg( '../images/icons/v2/profile-outline-20.svg', $color-gray-05 ); } } .module-avatar__label--28 { font-size: 14px; line-height: 28px; } .module-avatar--32 { height: 32px; width: 32px; img { height: 32px; width: 32px; } } .module-avatar__icon--32.module-avatar__icon--group { height: 20px; width: 20px; @include light-theme { @include color-svg('../images/icons/v2/group-outline-20.svg', $color-white); } @include dark-theme { @include color-svg( '../images/icons/v2/group-outline-20.svg', $color-gray-05 ); } } .module-avatar__icon--32.module-avatar__icon--direct { height: 20px; width: 20px; @include light-theme { @include color-svg( '../images/icons/v2/profile-outline-20.svg', $color-white ); } @include dark-theme { @include color-svg( '../images/icons/v2/profile-outline-20.svg', $color-gray-05 ); } } .module-avatar__label--32 { font-size: 14px; line-height: 32px; } .module-avatar--52 { height: 52px; width: 52px; img { height: 52px; width: 52px; } } .module-avatar__label--52 { width: 52px; font-size: 22px; letter-spacing: 0.19px; line-height: 52px; } .module-avatar__icon--52 { height: 38px; width: 38px; } .module-avatar__icon--52.module-avatar__icon--direct { height: 42px; width: 42px; } .module-avatar--80 { height: 80px; width: 80px; img { height: 80px; width: 80px; } } .module-avatar__label--80 { width: 80px; font-size: 40px; line-height: 80px; } .module-avatar__icon--80 { height: 58px; width: 58px; } .module-avatar__icon--80.module-avatar__icon--direct { height: 62px; width: 62px; } .module-avatar--112 { height: 112px; width: 112px; img { height: 112px; width: 112px; } } .module-avatar__label--112 { width: 112px; font-size: 56px; line-height: 112px; } .module-avatar__icon--112 { height: 81px; width: 81px; } .module-avatar__icon--112.module-avatar__icon--direct { height: 87px; width: 87px; } .module-avatar__icon--note-to-self { width: 70%; height: 70%; @include light-theme { @include color-svg('../images/note-28.svg', $color-white); } @include dark-theme { @include color-svg('../images/note-28.svg', $color-gray-05); } } .module-avatar--no-image { @include light-theme { background-color: $color-conversation-grey; } @include dark-theme { background-color: $color-conversation-grey-shade; } } .module-avatar--signal-blue { background-color: $ultramarine-ui-light; } @each $color, $value in $conversation-colors { .module-avatar--#{$color} { @include light-theme { background-color: $value; } } } @each $color, $value in $conversation-colors-shade { .module-avatar--#{$color} { @include dark-theme { background-color: $value; } } } // Module: Main Header .module-main-header { height: $header-height; width: $left-pane-width; padding-left: 16px; display: flex; flex-direction: row; align-items: center; } .module-main-header__search { margin-left: 12px; position: relative; } .module-main-header__search__input { height: 28px; // 320 - 28 (avatar) - 32 (left/right margin) - 12 (space to avatar) width: 248px; padding-left: 30px; padding-right: 5px; border-radius: 14px; border: none; @include font-body-2; @include light-theme { background-color: $color-gray-05; color: $color-gray-90; border: solid 1px $color-gray-02; } @include dark-theme { color: $color-gray-05; background-color: $color-gray-95; border: solid 1px $color-gray-80; } &:placeholder { color: $color-gray-45; } &:focus { border: solid 1px $ultramarine-ui-light; outline: none; } } .module-main-header__search__input--with-text { padding-right: 30px; } .module-main-header__search__input--in-conversation { padding-left: 50px; } .module-main-header__search__icon { position: absolute; left: 8px; top: 6px; height: 16px; width: 16px; cursor: text; @include light-theme { @include color-svg('../images/icons/v2/search-16.svg', $color-gray-75); } @include dark-theme { @include color-svg('../images/icons/v2/search-16.svg', $color-gray-25); } } .module-main-header__search__in-conversation-pill { position: absolute; left: 3px; top: 3px; bottom: 3px; border-radius: 14px; width: 42px; display: flex; flex-direction: row; align-items: center; // Overriding some default button styling border: none; padding: 0; outline: none; @include light-theme { background-color: $color-gray-15; } @include dark-theme { background-color: $color-gray-75; } } .module-main-header__search__in-conversation-pill__avatar-container { margin-left: 4px; height: 16px; width: 16px; border-radius: 8px; background-color: $ultramarine-ui-light; } .module-main-header__search__in-conversation-pill__avatar { height: 16px; width: 16px; @include light-theme { @include color-svg( '../images/icons/v2/profile-circle-outline-24.svg', $color-white ); } @include dark-theme { @include color-svg( '../images/icons/v2/profile-circle-solid-24.svg', $color-gray-05 ); } } .module-main-header__search__in-conversation-pill__x-button { margin-left: 2px; height: 16px; width: 16px; @include light-theme { @include color-svg('../images/icons/v2/x-24.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/icons/v2/x-24.svg', $color-gray-25); } } .module-main-header__search__cancel-icon { position: absolute; right: 8px; top: 5px; height: 18px; width: 18px; @include light-theme { @include color-svg('../images/icons/v2/x-24.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/icons/v2/x-24.svg', $color-gray-25); } } // Module: Image .module-image { position: relative; display: inline-block; margin: 1px; vertical-align: middle; overflow: hidden; } .module-image--with-background { @include light-theme { background-color: $color-white; } @include dark-theme { background-color: $color-black; } } .module-image__caption-icon { position: absolute; top: 6px; left: 6px; } .module-image--soft-corners { border-radius: 4px; } .module-image--curved-top-left { border-top-left-radius: 16px; } .module-image--curved-top-right { border-top-right-radius: 16px; } .module-image--curved-bottom-left { border-bottom-left-radius: 16px; } .module-image--curved-bottom-right { border-bottom-right-radius: 16px; } .module-image--small-curved-top-left { border-top-left-radius: 10px; } .module-image__border-overlay { @include button-reset; width: 100%; cursor: inherit; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; } .module-image__border-overlay--with-click-handler { cursor: pointer; } .module-image__border-overlay--with-border { @include light-theme { box-shadow: inset 0px 0px 0px 1px $color-black-alpha-20; } @include dark-theme { box-shadow: inset 0px 0px 0px 1px $color-white-alpha-20; } } // Only if it's a sticker do we put the outline inside it .module-message--selected .module-message__container--with-sticker .module-image__border-overlay { @include mouse-mode { top: 1px; bottom: 1px; left: 1px; right: 1px; border-radius: 10px; animation: message--mouse-selected 1s $ease-out-expo; } } .module-message:focus .module-message__container--with-sticker .module-image__border-overlay { @include keyboard-mode { top: 1px; bottom: 1px; left: 1px; right: 1px; border-radius: 10px; box-shadow: 0 0 0 3px $ultramarine-ui-light; } } button.module-image__border-overlay:focus { @include keyboard-mode { box-shadow: inset 0px 0px 0px 2px $ultramarine-ui-light; } } .module-image__border-overlay--dark { background-color: $color-black-alpha-20; } .module-image__loading-placeholder { display: inline-flex; flex-direction: row; align-items: center; @include light-theme { background-color: $color-black-alpha-20; } @include dark-theme { background-color: $color-white-alpha-20; } } .module-image__image { object-fit: cover; // redundant with attachment-container, but we get cursor flashing on move otherwise cursor: pointer; } .module-image__bottom-overlay { height: 48px; 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) ); position: absolute; bottom: 0; z-index: 1; left: 0; right: 0; } .module-image__play-overlay__circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background-color: $color-white; border-radius: 24px; } .module-image__play-overlay__icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 24px; width: 24px; @include color-svg( '../images/icons/v2/play-solid-24.svg', $ultramarine-ui-light ); } .module-image__text-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; // This allows click-through to the overlay button behind it pointer-events: none; color: $color-white; @include font-body-1; text-align: center; } .module-image__close-button { @include button-reset; position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; z-index: 2; background-image: url('../images/x-shadow-16.svg'); @include keyboard-mode { &:focus { outline: 2px solid $ultramarine-ui-light; } } } // Module: Image Grid .module-image-grid { display: inline-flex; flex-direction: row; align-items: center; margin: -1px; } .module-image-grid--one-image { margin-bottom: -5px; } .module-image-grid--with-sticker { padding: 8px; } .module-image-grid__column { display: inline-flex; flex-direction: column; align-items: center; } .module-image-grid__row { display: inline-flex; flex-direction: row; align-items: center; flex-grow: 1; } // Module: Typing Animation .module-typing-animation { display: inline-flex; flex-directin: row; align-items: center; height: 8px; width: 38px; padding-left: 1px; padding-right: 1px; } .module-typing-animation__dot { border-radius: 50%; height: 6px; width: 6px; opacity: 0.4; @include light-theme { background-color: $color-gray-60; } @include dark-theme { background-color: $color-white; } @include ios-theme { background-color: $color-gray-60; } } .module-typing-animation__dot--light { border-radius: 50%; height: 6px; width: 6px; opacity: 0.4; background-color: $color-white; @include ios-theme { background-color: $color-gray-60; } } @keyframes typing-animation-first { 0% { opacity: 0.4; } 20% { transform: scale(1.3); opacity: 1; } 40% { opacity: 0.4; } } @keyframes typing-animation-second { 10% { opacity: 0.4; } 30% { transform: scale(1.3); opacity: 1; } 50% { opacity: 0.4; } } @keyframes typing-animation-third { 20% { opacity: 0.4; } 40% { transform: scale(1.3); opacity: 1; } 60% { opacity: 0.4; } } .module-typing-animation__dot--first { animation: typing-animation-first 1600ms ease infinite; } .module-typing-animation__dot--second { animation: typing-animation-second 1600ms ease infinite; } .module-typing-animation__dot--third { animation: typing-animation-third 1600ms ease infinite; } .module-typing-animation__spacer { flex-grow: 1; } // Module: Attachments .module-attachments__header { height: 24px; position: relative; } .module-attachments__close-button { @include button-reset; position: absolute; top: 8px; right: 16px; width: 20px; height: 20px; z-index: 2; @include color-svg('../images/icons/v2/x-24.svg', $color-black); @include keyboard-mode { &:focus { @include color-svg('../images/icons/v2/x-24.svg', $ultramarine-ui-light); } } } .module-attachments__rail { margin-top: 12px; margin-left: 12px; padding-right: 12px; overflow-x: scroll; max-height: 142px; white-space: nowrap; overflow-y: hidden; margin-bottom: 6px; } // Module: Staged Generic Attachment .module-staged-generic-attachment { height: 120px; width: 120px; margin: 1px; display: inline-block; position: relative; border-radius: 4px; vertical-align: middle; white-space: nowrap; @include light-theme { box-shadow: inset 0px 0px 0px 1px $color-black-alpha-20; background-color: $color-gray-05; } @include dark-theme { box-shadow: inset 0px 0px 0px 1px $color-gray-45; background-color: $color-gray-75; color: $color-gray-02; } } .module-staged-generic-attachment__close-button { @include button-reset; position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; z-index: 2; @include light-theme { @include color-svg('../images/icons/v2/x-24.svg', $color-black); } @include dark-theme { @include color-svg('../images/icons/v2/x-24.svg', $color-gray-45); } } .module-staged-generic-attachment__icon { margin-top: 30px; background: url('../images/file-gradient.svg') no-repeat center; height: 44px; width: 56px; margin-left: 32px; margin-right: 32px; margin-bottom: -4px; // So we can center the extension text inside this icon display: flex; flex-direction: row; align-items: center; } .module-staged-generic-attachment__icon__extension { font-size: 10px; line-height: 13px; letter-spacing: 0.1px; text-transform: uppercase; // Along with flow layout in parent item, centers text text-align: center; width: 25px; margin-left: auto; margin-right: auto; // We don't have much room for text here, cut it off without ellipse overflow-x: hidden; white-space: nowrap; text-overflow: clip; color: $color-gray-90; } .module-staged-generic-attachment__filename { @include font-caption; margin: 7px; margin-top: 5px; text-align: center; overflow: hidden; height: 2.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; } // Module: Caption Editor .module-caption-editor { background-color: $color-black; z-index: 20; position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; height: 100%; } .module-caption-editor__close-button { z-index: 21; cursor: pointer; position: absolute; top: 12px; right: 16px; width: 30px; height: 30px; z-index: 2; @include color-svg('../images/icons/v2/x-24.svg', $color-white); } .module-caption-editor__media-container { flex-grow: 1; flex-shrink: 1; background-color: $color-black; text-align: center; margin: 50px; overflow: hidden; height: 100%; } .module-caption-editor__image { width: 100%; height: 100%; object-fit: contain; flex-grow: 1; flex-shrink: 1; } .module-caption-editor__video { max-width: 100%; max-height: 100%; object-fit: contain; flex-grow: 1; flex-shrink: 1; } .module-caption-editor__placeholder { width: 100%; height: 100%; object-fit: contain; flex-grow: 1; flex-shrink: 1; } .module-caption-editor__bottom-bar { flex-grow: 0; flex-shrink: 0; height: 52px; padding: 8px; display: inline-flex; flex-direction: row; align-items: middle; margin-left: auto; margin-right: auto; } .module-caption-editor__input-container { position: relative; } .module-caption-editor__caption-input { height: 36px; width: 40em; color: $color-white; border: 1px solid $color-white; border-radius: 18px; background-color: $color-black; padding: 9px; padding-left: 12px; padding-right: 65px; &:placeholder { color: $color-white-alpha-80; } &:focus { border: 1px solid $ultramarine-ui-light; outline: none; } } .module-caption-editor__save-button { @include button-reset; position: absolute; background-color: $ultramarine-ui-light; color: $color-white; height: 28px; border-radius: 15px; padding: 5px; padding-left: 12px; padding-right: 12px; right: 4px; top: 4px; } // Module: Staged Placeholder Attachment .module-staged-placeholder-attachment { @include button-reset; margin: 1px; border-radius: 4px; height: 120px; width: 120px; display: inline-block; vertical-align: middle; position: relative; @include light-theme { border: 1px solid $color-gray-25; &:hover { background: $color-gray-05; } } @include keyboard-mode { &:focus { box-shadow: inset 0 0 0 2px $ultramarine-ui-light; } } @include dark-theme { border: 1px solid $color-gray-60; &:hover { background: $color-gray-75; } } @include dark-keyboard-mode { &:focus { box-shadow: inset 0 0 0 2px $ultramarine-ui-light; } } } .module-staged-placeholder-attachment__plus-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 36px; width: 36px; @include light-theme { @include color-svg('../images/icons/v2/plus-24.svg', $color-gray-45); } @include dark-theme { @include color-svg('../images/icons/v2/plus-24.svg', $color-gray-60); } } // Module: Staged Link Preview .module-staged-link-preview { position: relative; display: flex; flex-direction: row; align-items: flex-start; min-height: 65px; } .module-staged-link-preview--is-loading { align-items: center; } .module-staged-link-preview__loading { text-align: center; flex-grow: 1; flex-shrink: 1; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } } .module-staged-link-preview__icon-container { margin-right: 8px; } .module-staged-link-preview__content { margin-right: 20px; } .module-staged-link-preview__title { @include font-body-1-bold; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-05; } overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .module-staged-link-preview__location { @include font-body-2; margin-top: 4px; text-transform: uppercase; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } } .module-staged-link-preview__close-button { @include button-reset; position: absolute; top: 0px; right: 0px; height: 16px; width: 16px; @include light-theme { @include color-svg('../images/icons/v2/x-24.svg', $color-gray-60); } @include keyboard-mode { &:focus { @include color-svg('../images/icons/v2/x-24.svg', $ultramarine-ui-light); } } @include dark-theme { @include color-svg('../images/icons/v2/x-24.svg', $color-gray-25); } @include dark-keyboard-mode { &:focus { @include color-svg('../images/icons/v2/x-24.svg', $ultramarine-ui-dark); } } } // Module: Spinner .module-spinner__container { margin-left: auto; margin-right: auto; position: relative; height: 56px; width: 56px; } .module-spinner__circle { position: absolute; top: 0; left: 0; z-index: 2; height: 100%; width: 100%; @include color-svg('../images/spinner-track-56.svg', $color-white-alpha-40); } .module-spinner__arc { position: absolute; top: 0; left: 0; z-index: 3; height: 100%; width: 100%; animation: spinner-arc-animation 1000ms linear infinite; @include light-theme { @include color-svg('../images/spinner-56.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/spinner-56.svg', $color-gray-05); } } @keyframes spinner-arc-animation { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } // In these --small and --mini sizes, we're exploding our @color-svg mixin so we don't // have to duplicate our background colors for the dark/ios/size matrix. .module-spinner__container--small { height: 24px; width: 24px; } .module-spinner__circle--small { -webkit-mask: url('../images/spinner-track-24.svg') no-repeat center; -webkit-mask-size: 100%; } .module-spinner__arc--small { -webkit-mask: url('../images/spinner-24.svg') no-repeat center; -webkit-mask-size: 100%; } .module-spinner__circle--incoming { background-color: $color-white-alpha-40; } .module-spinner__arc--incoming { @include light-theme { background-color: $color-white; } @include dark-theme { background-color: $color-gray-02; } @include ios-theme { background-color: $color-gray-60; } @include ios-dark-theme { background-color: $color-gray-02; } } .module-spinner__circle--outgoing { @include dark-theme { background-color: $color-white-alpha-40; } @include ios-theme { background-color: $color-white-alpha-40; } @include ios-dark-theme { background-color: $color-white-alpha-40; } } .module-spinner__arc--outgoing { @include dark-theme { background-color: $color-gray-05; } @include ios-theme { background-color: $color-white; } @include ios-dark-theme { background-color: $color-gray-05; } } .module-spinner__circle--on-background { @include light-theme { background-color: $color-gray-05; } @include dark-theme { background-color: $color-gray-75; } } .module-spinner__arc--on-background { @include light-theme { background-color: $color-gray-60; } @include dark-theme { background-color: $color-gray-25; } } // Module: Highlighted Message Body .module-message-body__highlight { font-weight: bold; } // Module: Search Results .module-search-results { outline: none; overflow: hidden; flex-grow: 1; } .module-search-results__conversations-header { @include font-body-1-bold; height: 52px; margin-left: 16px; padding-bottom: 8px; padding-top: 8px; @include dark-theme { color: $color-gray-05; } } .module-search-results__sms-not-supported { font-size: 14px; padding-top: 12px; text-align: center; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } } .module-search-results__no-results { margin-top: 27px; padding-left: 1em; padding-right: 1em; width: 100%; text-align: center; outline: none; } .module-search-results__contacts-header { @include font-body-1-bold; height: 52px; margin-left: 16px; @include dark-theme { color: $color-gray-05; } } .module-search-results__messages-header { @include font-body-1-bold; height: 52px; margin-left: 16px; padding-bottom: 8px; padding-top: 8px; @include dark-theme { color: $color-gray-05; } } .module-search-results__spinner-container { width: 100%; padding: 10px; text-align: center; } // Module: Message Search Result .module-message-search-result { @include button-reset; width: 100%; padding: 8px; padding-left: 16px; padding-right: 16px; min-height: 64px; max-width: $left-pane-width; display: flex; flex-direction: row; align-items: flex-start; &:hover, &:focus { @include light-theme { background-color: $color-gray-05; } @include dark-theme { background-color: $color-gray-75; } } } .module-message-search-result--is-selected { @include light-theme { background-color: $color-gray-15; } @include dark-theme { background-color: $color-gray-65; } } .module-message-search-result__text { flex-grow: 1; margin-left: 12px; // parent - 48px (for avatar) - 16px (our right margin) max-width: calc(100% - 64px); display: inline-flex; flex-direction: column; align-items: stretch; } .module-message-search-result__header { display: flex; flex-direction: row; align-items: center; } .module-message-search-result__header__from { @include font-body-1; flex-grow: 1; flex-shrink: 1; overflow-x: hidden; white-space: nowrap; text-overflow: ellipsis; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-05; } } .module-message-search-result__header__timestamp { flex-shrink: 0; margin-left: 6px; @include font-caption; overflow-x: hidden; white-space: nowrap; text-overflow: ellipsis; text-transform: uppercase; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } } .module-message-search-result__body { @include font-body-2; margin-top: 1px; flex-grow: 1; flex-shrink: 1; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-15; } overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; // Note: -webkit-line-clamp doesn't work for RTL text, and it forces you to use // ... as the truncation indicator. That's not a solution that works well for // all languages. More resources: // - http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/ // - https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up-broken-865413f16e5 } // Module: Reaction Viewer .module-reaction-viewer { width: 320px; height: 320px; border-radius: 8px; display: flex; flex-direction: column; @include popper-shadow(); @include light-theme() { background: $color-white; } @include dark-theme() { background: $color-gray-75; } &__header { width: 100%; min-height: 44px; padding: 0px 8px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; overflow-x: auto; &__button { min-height: 28px; border: none; border-radius: 18px; padding: 0px 8px; display: flex; justify-content: center; align-items: center; flex-basis: 45px; flex-shrink: 0; &:not(:first-of-type) { margin-left: 4px; } &:focus { outline: none; } @include keyboard-mode { &:focus { box-shadow: 0px 0px 0px 2px $ultramarine-ui-light; } } background: none; &--selected { @include light-theme() { background: $color-gray-05; } @include dark-theme() { background: $color-gray-60; } } &__count, &__all { @include font-body-2-bold(); white-space: nowrap; @include light-theme() { color: $color-gray-90; } @include dark-theme() { color: $color-gray-05; } } &__count { margin-left: 4px; } } } &__body { flex-grow: 1; padding: 0 16px; overflow: auto; &__row { margin-top: 12px; min-height: 32px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; &:last-of-type { margin-bottom: 12px; } &__avatar { min-width: 32px; flex-shrink: 1; } &__name { @include font-body-1-bold(); flex-grow: 1; margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @include light-theme() { color: $color-gray-90; } @include dark-theme() { color: $color-gray-05; } } &__emoji { width: 18px; flex-shrink: 1; } } } } // Module: Reaction Picker @keyframes module-reaction-picker__background-fade { from { background: transparent; } to { // This color is the same in both light and dark themes background: rgba($color-black, 0.8); } } @keyframes module-reaction-picker__emoji-fade { from { transform: translate3d(0, 24px, 0); opacity: 0; } to { transform: translate3d(0, 0, 0); opacity: 1; } } .module-reaction-picker { width: 320px; height: 56px; border-radius: 30px; position: relative; margin: 4px 0; z-index: 2; animation: { name: module-reaction-picker__background-fade; duration: 400ms; timing-function: $ease-out-expo; fill-mode: forwards; } &__emoji-btn { @include button-reset; display: flex; min-width: 52px; min-height: 52px; border-radius: 52px; position: absolute; top: 2px; @for $i from 0 through 6 { &:nth-of-type(#{$i + 1}) { left: 2px + ($i * 44px); // Prevent animation jank opacity: 0; animation: { name: module-reaction-picker__emoji-fade; duration: 400ms; timing-function: $ease-out-expo; delay: #{$i * 10ms}; fill-mode: forwards; } } } transition: background 400ms $ease-out-expo; &--selected { // This color is the same in both light and dark themes background: rgba($color-white, 0.3); } &--more { @include light-theme { background: url('../images/any-emoji-32-light.svg') no-repeat center; } @include dark-theme { background: url('../images/any-emoji-32-dark.svg') no-repeat center; } &::after { content: ''; display: block; width: 52px; height: 52px; opacity: 0; transition: opacity 400ms $ease-out-expo; @include light-theme { background: url('../images/any-emoji-32-light-hover.svg') no-repeat center; } @include dark-theme { background: url('../images/any-emoji-32-dark-hover.svg') no-repeat center; } } &:hover::after { opacity: 1; } } @include keyboard-mode { &:focus:before { content: ''; display: block; width: 4px; height: 4px; background: $ultramarine-ui-light; border-radius: 2px; position: absolute; bottom: 4px; left: calc(50% - 2px); } } $emoji-btn: &; &__emoji { position: absolute; left: 2px; top: 2px; transform-origin: center; $scale: 32 / 48; transform: scale3d($scale, $scale, $scale); transition: transform 400ms $ease-out-expo; #{$emoji-btn}:hover &, .keyboard-mode #{$emoji-btn}:focus & { transform: scale3d(1, 1, 1) translate3d(0, -24px, 0); z-index: 1; } } } } .module-incoming-call { align-items: center; background-color: $color-gray-75; display: flex; justify-content: space-between; } .module-incoming-call__contact { align-items: center; display: flex; min-width: 0; &--avatar { margin-bottom: 8px; margin-left: 16px; margin-top: 8px; position: relative; } &--name { align-items: stretch; display: flex; flex-direction: column; margin-left: 12px; min-width: 0; } &--name-header { @include font-body-1-bold; color: #ffffff; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; } &--message-text { @include font-body-2; color: #ffffff; } } .module-incoming-call__actions { display: flex; margin-right: 16px; } .module-incoming-call__button--accept-video-as-audio { background-color: $color-gray-45; @include keyboard-mode { &:focus { box-shadow: 0px 0px 0px 4px $ultramarine-ui-light; } } @include mouse-mode { &:hover { box-shadow: 0px 0px 0px 2px $ultramarine-ui-light; } } div { @include color-svg( '../images/icons/v2/video-off-solid-24.svg', $color-white ); height: 24px; width: 24px; } } .module-incoming-call__button--accept-video { background-color: $color-accent-green; @include keyboard-mode { &:focus { box-shadow: 0px 0px 0px 4px $ultramarine-ui-light; } } @include mouse-mode { &:hover { box-shadow: 0px 0px 0px 2px $ultramarine-ui-light; } } div { @include color-svg('../images/icons/v2/video-solid-24.svg', $color-white); height: 24px; width: 24px; } } .module-incoming-call__button--accept-audio { background-color: $color-accent-green; @include keyboard-mode { &:focus { box-shadow: 0px 0px 0px 4px $ultramarine-ui-light; } } @include mouse-mode { &:hover { box-shadow: 0px 0px 0px 2px $ultramarine-ui-light; } } div { @include color-svg( '../images/icons/v2/phone-right-solid-24.svg', $color-white ); height: 24px; width: 24px; } } .module-incoming-call__button--decline { background-color: $color-accent-red; @include keyboard-mode { &:focus { box-shadow: 0px 0px 0px 4px $ultramarine-ui-light; } } @include mouse-mode { &:hover { box-shadow: 0px 0px 0px 2px $ultramarine-ui-light; } } div { @include color-svg('../images/icons/v2/phone-down-24.svg', $color-white); height: 24px; width: 24px; } } .module-incoming-call__icon, .module-ongoing-call__icon { align-items: center; border-radius: 40px; border: none; display: flex; height: 40px; justify-content: center; margin-left: 24px; outline: none; width: 40px; } .module-ongoing-call__icon { border-radius: 56px; height: 56px; width: 56px; &--audio { &--enabled { background-color: $color-gray-45; div { @include color-svg('../images/icons/v2/mic-solid-28.svg', $color-white); height: 28px; width: 28px; } } &--disabled { background-color: $color-white; div { @include color-svg( '../images/icons/v2/mic-off-solid-28.svg', $color-black ); height: 28px; width: 28px; } } } &--video { &--enabled { background-color: $color-gray-45; div { @include color-svg( '../images/icons/v2/video-solid-28.svg', $color-white ); height: 28px; width: 28px; } } &--disabled { background-color: $color-white; div { @include color-svg( '../images/icons/v2/video-off-solid-28.svg', $color-black ); height: 28px; width: 28px; } } } &--hangup { background-color: $color-accent-red; div { @include color-svg('../images/icons/v2/phone-down-28.svg', $color-white); height: 28px; width: 28px; } } } .module-ongoing-call { background-color: $color-gray-95; height: 100vh; width: 100%; position: relative; } .module-ongoing-call__remote-video-enabled { background-color: $color-gray-95; height: 100vh; width: 100%; } .module-ongoing-call__remote-video-disabled { background-color: $color-gray-95; height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; } .module-ongoing-call__local-video { transform: rotateY(180deg); background-color: transparent; bottom: 160px; height: 152px; position: absolute; right: 32px; width: 210px; } .module-ongoing-call__header { background: linear-gradient($color-black-alpha-40, transparent); padding-bottom: 24px; padding-top: 24px; position: absolute; text-align: center; top: 0; width: 100%; font-style: normal; color: #ffffff; text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25); } .module-ongoing-call__header-name { font-weight: 600; font-size: 15px; line-height: 21px; letter-spacing: -0.009em; } .module-ongoing-call__header-message { font-weight: normal; font-size: 13px; line-height: 18px; letter-spacing: -0.0025em; } .module-ongoing-call__actions { background: linear-gradient(transparent, $color-black-alpha-40); bottom: 0; display: flex; justify-content: center; padding-bottom: 32px; padding-top: 32px; position: absolute; text-align: center; width: 100%; } @keyframes module-ongoing-call__controls--fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes module-ongoing-call__controls--fade-out { from { opacity: 1; } to { opacity: 0; } } .module-ongoing-call__controls--fadeIn { animation: { name: module-ongoing-call__controls--fade-in; duration: 400ms; timing-function: $ease-out-expo; fill-mode: forwards; } } .module-ongoing-call__controls--fadeOut { animation: { name: module-ongoing-call__controls--fade-out; duration: 1200ms; timing-function: $ease-out-expo; fill-mode: forwards; } } .module-ongoing-call__settings { position: absolute; top: 25px; right: 25px; &--button { @include color-svg( '../images/icons/v2/settings-solid-16.svg', $color-white ); height: 22px; width: 22px; } } // Module: Left Pane .module-left-pane { display: inline-flex; flex-direction: column; width: $left-pane-width; height: 100%; } .module-left-pane__header { flex-grow: 0; flex-shrink: 0; } .module-left-pane__archive-header { height: 48px; width: 100%; display: inline-flex; flex-direction: row; align-items: center; @include light-theme { border-bottom: 1px solid $color-gray-15; } @include dark-theme { border-bottom: 1px solid $color-gray-75; } } .module-left-pane__to-inbox-button { @include button-reset; margin-left: 7px; margin-right: 5px; width: 24px; height: 24px; @include light-theme { @include color-svg( '../images/icons/v2/chevron-left-24.svg', $color-gray-60 ); } @include keyboard-mode { &:focus { @include color-svg( '../images/icons/v2/chevron-left-24.svg', $ultramarine-ui-light ); } } @include dark-theme { @include color-svg( '../images/icons/v2/chevron-left-24.svg', $color-gray-25 ); } @include dark-keyboard-mode { &:hover { @include color-svg( '../images/icons/v2/chevron-left-24.svg', $ultramarine-ui-dark ); } } } .module-left-pane__archive-header-text { @include font-body-1-bold; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-05; } } .module-left-pane__archive-helper-text { @include font-body-2; flex-grow: 0; flex-shrink: 0; padding: 1em; @include light-theme { color: $color-gray-60; background-color: $color-gray-05; } @include dark-theme { color: $color-gray-25; background-color: $color-gray-75; } } .module-left-pane__list--measure { flex-grow: 1; flex-shrink: 1; outline: none; } .module-left-pane__list--wrapper { position: relative; } .module-left-pane__list { position: absolute; } .module-left-pane__virtual-list { outline: none; } .module-left-pane__archived-button { @include button-reset; @include font-body-1-bold; height: 64px; line-height: 64px; text-align: center; width: 100%; @include light-theme { color: $color-gray-60; &:hover, &:focus { background-color: $color-gray-05; } } @include dark-theme { color: $color-gray-25; &:hover, &:focus { background-color: $color-gray-75; } } } .module-left-pane__archived-button__archived-count { @include font-body-2-bold; padding: 6px; padding-top: 1px; padding-bottom: 1px; border-radius: 10px; @include light-theme { color: $color-gray-60; background-color: $color-gray-05; } @include dark-theme { color: $color-gray-25; background-color: $color-gray-75; } } // Module: Start New Conversation .module-start-new-conversation { @include button-reset; width: 100%; display: flex; flex-direction: row; align-items: center; padding-top: 8px; padding-bottom: 8px; padding-left: 16px; &:hover, &:focus { @include light-theme { background-color: $color-gray-05; } @include dark-theme { background-color: $color-gray-75; } } } .module-start-new-conversation__content { margin-left: 12px; } .module-start-new-conversation__number { font-weight: bold; @include dark-theme { color: $color-gray-05; } } .module-start-new-conversation__text { margin-top: 3px; @include font-body-1-italic; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-45; } } // Module: Timeline Loading Row .module-timeline-loading-row { height: 48px; padding: 12px; display: flex; flex-direction: columns; justify-content: center; align-items: center; @include light-theme { color: $color-gray-75; } @include dark-theme { color: $color-gray-25; } } // Module: Timeline .module-timeline { height: 100%; overflow: hidden; } .module-timeline__message-container { padding-top: 4px; padding-bottom: 4px; } .ReactVirtualized__List { outline: none; } // Module: CompositionPopper %module-composition-popper { width: 332px; border-radius: 8px; margin-bottom: 6px; z-index: 2; user-select: none; overflow: hidden; @include popper-shadow(); @include light-theme { background: $color-gray-02; ::-webkit-scrollbar-thumb { border: 2px solid $color-gray-02; } } @include dark-theme { background: $color-gray-75; ::-webkit-scrollbar-thumb { border: 2px solid $color-gray-75; } } } // Module: SafetyNumberChangeDialog .module-sfn-dialog__title { @include font-body-1-bold; text-align: center; @include dark-theme { color: $color-white; } } .module-sfn-dialog__message { @include font-body-2; text-align: center; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } } .module-sfn-dialog__contacts { list-style-type: none; max-height: 300px; overflow-y: scroll; padding: 0; } .module-sfn-dialog__contact { align-items: center; display: flex; flex-direction: row; margin-bottom: 16px; &--wrapper { flex-grow: 1; margin-left: 12px; } &--name { @include font-body-1-bold; @include dark-theme { color: $color-white; } } &--number { @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } } &--view { @include font-body-1-bold; background: inherit; border: none; cursor: pointer; margin-right: 2px; outline: none; padding: 8px 14px; @include keyboard-mode { &:focus { box-shadow: 0px 0px 0px 2px $ultramarine-ui-light; } } @include light-theme { color: $ultramarine-ui-light; } @include dark-theme { color: $ultramarine-ui-dark; } } } .module-sfn-dialog__actions { border-top: 1px solid $color-gray-05; display: flex; justify-content: flex-end; margin-bottom: -18px; margin-left: -16px; margin-right: -16px; margin-top: -14px; padding-left: 16px; padding-right: 16px; padding-top: 16px; &--cancel { @include font-body-1-bold; border: none; border-radius: 4px; outline: none; padding: 7px 14px; @include mouse-mode { &:hover { background: $color-gray-15; } } @include keyboard-mode { &:focus { box-shadow: 0px 0px 0px 2px $ultramarine-ui-light; } } @include light-theme { background-color: $color-gray-05; color: $ultramarine-ui-light; } @include dark-theme { background-color: $color-gray-75; color: $ultramarine-ui-dark; } } &--confirm { @include font-body-1-bold; background: $ultramarine-ui-light; border: none; border-radius: 4px; color: $color-white; margin-left: 12px; outline: none; padding: 7px 14px; @include mouse-mode { &:hover { background: $ultramarine-brand-dark; } } @include keyboard-mode { &:focus { box-shadow: 0px 0px 0px 2px $ultramarine-brand-dark; } } } } /* Safety Number verification */ .module-safety-number { &__icon { height: 1.25em; width: 1.25em; vertical-align: text-bottom; display: inline-block; } &__verification-label { margin: 10px 0; } &__icon--verified { display: inline-block; height: 1.25em; margin-right: 4px; vertical-align: text-bottom; width: 1.25em; @include light-theme { -webkit-mask: url('../images/icons/v2/check-24.svg') no-repeat center; -webkit-mask-size: 100%; background-color: #121212; } @include dark-theme { -webkit-mask: url('../images/icons/v2/check-24.svg') no-repeat center; -webkit-mask-size: 100%; background-color: #f6f6f6; } } &__icon--shield { display: inline-block; height: 1.25em; margin-right: 4px; vertical-align: text-bottom; width: 1.25em; @include light-theme { -webkit-mask: url('../images/icons/v2/safety-number-outline-24.svg') no-repeat center; -webkit-mask-size: 100%; background-color: #121212; } @include dark-theme { -webkit-mask: url('../images/icons/v2/safety-number-solid-24.svg') no-repeat center; -webkit-mask-size: 100%; background-color: #f6f6f6; } } &__verify-container { text-align: center; } &__button--verify { border-radius: 5px; font-weight: bold; margin: 0; outline: none; padding: 10px; } &__number { background: #f6f6f6; border-radius: 5px; border: solid 1px #dedede; font-family: monospace; margin: 20px auto 20px auto; padding: 10px; text-align: center; width: 16em; @include dark-theme { background: #1b1b1b; border: solid 1px #848484; color: #f6f6f6; } } &__verification-status { margin: 30px 0 10px; text-align: center; } &__close-button { display: flex; justify-content: flex-end; button { background: inherit; border: none; cursor: pointer; padding: 0; @include keyboard-mode { &:focus { border: 1px solid $ultramarine-ui-light; } } span { display: inline-block; height: 24px; width: 24px; @include light-theme { @include color-svg('../images/icons/v2/x-24.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/icons/v2/x-24.svg', $color-gray-05); } } } } } // Module: StickerPicker .module-sticker-picker { @extend %module-composition-popper; height: 400px; display: grid; grid-template-rows: 44px 1fr; grid-template-columns: 1fr; } .module-sticker-picker__header { display: flex; flex-direction: row; padding: 0 8px; justify-content: flex-start; align-items: center; } .module-sticker-picker__header__packs { width: 288px; overflow: hidden; position: relative; &__slider { display: flex; flex-direction: row; transform: translateX(0); transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } } .module-sticker-picker__header__button { width: 28px; height: 28px; border: 0; border-radius: 8px; display: flex; justify-content: center; align-items: center; background: none; margin-right: 4px; outline: none; &:active, &:focus { @include keyboard-mode { background: $color-gray-05; } @include dark-keyboard-mode { background: $color-gray-60; } } &--selected { @include light-theme { background: $color-gray-15; } @include dark-theme { background: $color-gray-45; } } &--recents, &--add-pack { &::after { content: ''; display: block; min-width: 20px; min-height: 20px; } } &--recents { &::after { @include light-theme { @include color-svg( '../images/icons/v2/recent-outline-20.svg', $color-gray-60 ); } @include dark-theme { @include color-svg( '../images/icons/v2/recent-solid-20.svg', $color-gray-25 ); } } } &--add-pack { &::after { @include light-theme { @include color-svg('../images/icons/v2/plus-20.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/icons/v2/plus-20.svg', $color-gray-25); } } } &--prev-page, &--next-page { top: 0; margin: 0; border-radius: 0; &::after { content: ''; display: block; min-width: 16px; min-height: 16px; } @include light-theme { background: $color-gray-02; } @include dark-theme { background: $color-gray-75; } } &--prev-page { position: absolute; left: 0; &::after { @include light-theme { @include color-svg( '../images/icons/v2/chevron-left-16.svg', $color-gray-60 ); } @include dark-theme { @include color-svg( '../images/icons/v2/chevron-left-16.svg', $color-gray-25 ); } } } &--next-page { position: absolute; right: 0; &::after { @include light-theme { @include color-svg( '../images/icons/v2/chevron-right-16.svg', $color-gray-60 ); } @include dark-theme { @include color-svg( '../images/icons/v2/chevron-right-16.svg', $color-gray-25 ); } } } &--error { position: relative; &::before { display: block; content: ''; width: 12px; height: 12px; position: absolute; left: 14px; top: 2px; @include color-svg( '../images/icons/v2/error-solid-24.svg', $color-accent-red ); } } &--hint { position: relative; &::before { display: block; content: ''; position: absolute; top: 0; right: 0; width: 14px; height: 14px; border-radius: 7px; background: $ultramarine-ui-light; } } } .module-sticker-picker__header__button__image { width: 20px; height: 20px; object-fit: contain; } .module-sticker-picker__header__button__image--placeholder { min-width: 20px; min-height: 20px; max-width: 20px; max-height: 20px; background-color: $color-gray-05; } .module-sticker-picker__body { position: relative; &__content { width: 332px; height: 356px; padding: 8px 20px 16px 16px; overflow-y: auto; display: grid; grid-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 68px; &--under-text { height: 320px; } &--under-long-text { height: 304px; } } &__cell { border: none; background: none; padding: 0; width: 68px; height: 68px; display: flex; justify-content: center; align-items: center; @include mouse-mode { outline: none; } &__image, &__placeholder { width: 100%; height: 100%; object-fit: contain; } &__placeholder { border-radius: 4px; @include light-theme() { background-color: $color-gray-05; } @include dark-theme() { background-color: $color-gray-60; } } } &--empty { display: flex; justify-content: center; align-items: center; flex-direction: column; } &__text { @include font-body-1-bold; text-align: center; padding: 8px 16px 12px 0; @include light-theme() { color: $color-gray-60; } @include dark-theme() { color: $color-gray-25; } &:only-child { padding: 0 0 28px 0; // header height to offset the text so it is centered in the whole picker } &--error { @include light-theme() { color: $color-accent-red; } @include dark-theme() { color: $color-accent-red; } } &--hint { @include light-theme() { color: $ultramarine-ui-light; } @include dark-theme() { color: $ultramarine-ui-dark; } } &--pin { padding: 8px 16px 12px 0px; position: absolute; top: 0; } } } // Module: StickerManager .module-sticker-manager { padding: 0 16px; outline: none; } .module-sticker-manager__text { height: 18px; letter-spacing: 0px; line-height: 18px; @include light-theme() { color: $color-gray-60; } @include dark-theme() { color: $color-gray-25; } &--heading { @include font-body-1-bold; @include light-theme() { color: $color-gray-90; } @include dark-theme() { color: $color-gray-05; } } } .module-sticker-manager__empty { display: flex; justify-content: center; align-items: center; height: 64px; border-radius: 8px; @include light-theme { background: $color-gray-02; color: $color-gray-60; } @include dark-theme { background: $color-gray-90; color: $color-gray-25; } } %blessed-sticker-pack-icon { height: 14px; width: 14px; border-radius: 8px; background-color: $color-white; display: inline-block; vertical-align: middle; margin: { left: 5px; bottom: 2px; } position: relative; &::before { content: ''; display: block; width: 16px; height: 16px; position: absolute; top: -1px; left: -1px; @include light-theme { @include color-svg( '../images/icons/v2/check-circle-solid-24.svg', $color-accent-blue ); } @include dark-theme { @include color-svg( '../images/icons/v2/check-circle-solid-24.svg', $color-accent-blue ); } } } .module-sticker-manager__pack-row { @include button-reset; display: flex; flex-direction: row; padding: 16px; @include light-theme { & + & { border-top: 1px solid $color-gray-15; } } @include dark-theme { & + & { border-top: 1px solid $color-gray-75; } } @include keyboard-mode { &:focus { box-shadow: 0px 0px 0px 2px $ultramarine-ui-light; } } &__cover { width: 48px; height: 48px; object-fit: contain; } &__cover-placeholder { width: 48px; height: 48px; background: $color-gray-05; } &__meta { flex-grow: 1; display: flex; flex-direction: column; &:not(:first-child) { padding: 0 12px; } &__title { flex: 1; } &__author { flex: 1; @include light-theme() { color: $color-gray-45; } @include dark-theme() { color: $color-gray-25; } } &__blessed-icon { @extend %blessed-sticker-pack-icon; } } &__controls { flex-shrink: 1; display: flex; justify-content: center; align-items: center; &__button { background: none; border: 0; &--menu { &::after { content: ''; display: block; min-width: 24px; min-height: 24px; @include light-theme { @include color-svg( '../images/icons/v2/more-horiz-24.svg', $color-gray-60 ); } @include dark-theme { @include color-svg( '../images/icons/v2/more-horiz-24.svg', $color-gray-25 ); } } } } } } .module-sticker-manager__install-button { background: none; border: 0; color: $color-gray-90; @include font-body-1-bold; height: 24px; background: $color-gray-05; border-radius: 12px; display: flex; justify-content: center; align-items: center; padding: 0 12px; @include dark-theme { color: $color-gray-05; background: $color-gray-75; } @include mouse-mode { outline: none; } &--blue { @include light-theme { background: $ultramarine-ui-light; color: $color-white; } @include dark-theme { background: $ultramarine-ui-dark; color: $color-white; } } } .module-sticker-manager__preview-modal { &__overlay { background: $color-black-alpha-40; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; z-index: 5; } &__container { position: relative; border-radius: 8px; box-shadow: 0 4px 12px 0 $color-black-alpha-20; width: 440px; height: 360px; overflow: hidden; display: flex; flex-direction: column; @include light-theme { background: $color-white; } @include dark-theme { background: $color-gray-75; } &__error { color: $color-accent-red; display: flex; justify-content: center; align-items: center; text-align: center; width: 100%; height: 100%; padding: 0 80px 30px 80px; @include font-body-1-bold; } &__header { display: flex; flex-direction: row; flex-shrink: 0; height: 36px; padding: 0 8px 0 16px; justify-content: space-between; align-items: center; &__text { @include font-body-1-bold; color: $color-gray-90; @include dark-theme { color: $color-gray-05; } } &__close-button { border: none; width: 20px; height: 20px; @include light-theme { @include color-svg('../images/icons/v2/x-24.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/icons/v2/x-24.svg', $color-gray-05); } } } &__sticker-grid { width: 100%; display: grid; grid-gap: 8px; grid-template-columns: repeat(4, 1fr); overflow-y: auto; padding: 0 16px; &::after { content: ''; display: block; height: 80px; grid-column: 1 / span 4; } &__cell { width: 96px; height: 96px; display: flex; justify-content: center; align-items: center; &__image { width: 100%; height: 100%; object-fit: contain; } &--placeholder { border-radius: 4px; @include light-theme() { background: $color-gray-05; } @include dark-theme() { background: $color-gray-60; } } } } &__meta-overlay { border-radius: 4px; width: 408px; height: 52px; position: absolute; left: 16px; bottom: 16px; padding: 0 12px; display: flex; flex-direction: row; align-items: center; @include light-theme { background: $color-gray-05; } @include dark-theme { background: $color-gray-60; } &__info { display: flex; flex-direction: column; justify-content: center; flex-grow: 1; flex-shrink: 1; overflow: hidden; &__title { margin: 0; overflow: hidden; text-overflow: ellipsis; @include font-body-1-bold; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-05; } } &__author { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @include light-theme { color: $color-gray-45; } @include dark-theme { color: $color-gray-25; } } &__blessed-icon { @extend %blessed-sticker-pack-icon; } } &__install { flex-shrink: 0; overflow: hidden; } } } } // Module: Sticker button (launches the sticker picker) .sticker-button-wrapper { height: 36px; display: flex; justify-content: center; align-items: center; margin-left: 6px; } .module-sticker-button__button { border: 0; background: none; width: 32px; height: 32px; border-radius: 16px; display: flex; justify-content: center; align-items: center; opacity: 0.5; &:focus, &:hover { opacity: 1; } outline: none; &::after { display: block; content: ''; width: 24px; height: 24px; flex-shrink: 0; @include light-theme { @include color-svg( '../images/icons/v2/sticker-outline-24.svg', $color-gray-60 ); } @include dark-theme { @include color-svg( '../images/icons/v2/sticker-solid-24.svg', $color-gray-25 ); } } &--active { @include light-theme() { background: $color-gray-05; } @include dark-theme() { background: $color-gray-75; } opacity: 1; } } .module-sticker-button__tooltip { @include button-reset; height: 34px; display: flex; justify-content: center; align-items: center; padding: 7px 12px; border-radius: 8px; margin-bottom: 6px; z-index: 1; @include light-theme { background: $color-white; } @include dark-theme { background: $color-gray-75; } @include popper-shadow(); &__triangle { position: absolute; width: 0; height: 0; border-style: solid; border-width: 8px 8px 0 8px; @include light-theme { border-color: $color-white transparent transparent transparent; } @include dark-theme { border-color: $color-gray-75 transparent transparent transparent; } &--top-end { top: 34px; } &--introduction { top: 72px; } } &__image { width: 20px; height: 20px; object-fit: contain; } &__image-placeholder { width: 20px; height: 20px; background-color: $color-gray-05; } &__text { margin-left: 4px; cursor: default; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-05; } &__title { font-weight: bold; } } &--introduction { width: 420px; height: 72px; display: flex; flex-direction: row; &__image { width: 52px; height: 52px; } &__meta { flex-grow: 1; padding: 0 12px; display: flex; flex-direction: column; justify-content: center; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-05; } &__title { margin: 0; @include font-body-1-bold; height: 16px; } &__subtitle { margin-top: 3px; height: 16px; } } &__close { flex-shrink: 1; height: 100%; &__button { width: 20px; height: 20px; border: none; @include light-theme { @include color-svg('../images/icons/v2/x-24.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/icons/v2/x-24.svg', $color-gray-05); } } } } } // Module: confirmation dialog .module-confirmation-dialog { &__overlay { background: $color-black-alpha-40; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; z-index: 5; } &__container { width: 360px; padding: 12px 16px; border-radius: 8px; @include popper-shadow(); @include light-theme() { background: $color-white; color: $color-gray-90; } @include dark-theme() { background: $color-gray-80; color: $color-gray-05; } &__title { @include font-body-1-bold; } &__content { @include font-body-1; margin-bottom: 22px; } &__buttons { display: flex; flex-direction: row; justify-content: flex-end; &__button { margin-left: 4px; border-radius: 17px; height: 34px; padding: 5px 12px; display: flex; justify-content: center; align-items: center; @include font-body-1-bold; @include mouse-mode { outline: none; } @include light-theme() { background: $color-white; color: $color-gray-60; border: 1px solid $color-gray-60; } @include dark-theme() { background: $color-gray-75; color: $color-gray-25; border: 1px solid $color-gray-25; } &--negative { @include light-theme() { border: none; background: $color-accent-red; color: $color-white; } @include dark-theme() { border: none; background: $color-accent-red; color: $color-white; } } &--affirmative { @include light-theme() { border: none; background: $color-accent-green; color: $color-white; } @include dark-theme() { border: none; background: $color-accent-green; color: $color-white; } } } } } } .module-left-pane-dialog { background: $color-accent-green; color: $color-white; padding: 16px; .module-left-pane-dialog__message { h3 { @include font-body-1-bold; padding: 0px; margin: 0px; margin-bottom: 8px; } span { @include font-body-1; display: inline-block; } } .module-left-pane-dialog__actions { margin-top: 8px; text-align: right; .module-left-pane-dialog__link { @include keyboard-mode { display: inline-block; outline: 0; } } button { background: inherit; border-radius: 20px; border: solid 1px $color-white; color: $color-white; cursor: pointer; font-family: inherit; margin: 0 4px; padding: 8px 16px; outline: 0; &:focus { @include keyboard-mode { box-shadow: 0 0 0 3px $ultramarine-ui-light; } } &:hover { @include mouse-mode { box-shadow: 0 0 0 3px $ultramarine-ui-light; } } } .module-left-pane-dialog__button--no-border { border: none; } } &.module-left-pane-dialog--error { background-color: $color-accent-red; } &.module-left-pane-dialog--warning { background-color: $color-accent-yellow; color: $color-black; button { border-color: $color-black; color: $color-black; } } } // Module: Emoji Picker %module-emoji-picker--ribbon { height: 44px; display: flex; flex-direction: row; align-items: center; } .module-emoji-picker { @extend %module-composition-popper; height: 428px; display: grid; grid-template-rows: 44px 1fr; grid-template-columns: 1fr; &__header { @extend %module-emoji-picker--ribbon; justify-content: space-between; margin: 0 12px; &__search-field { flex-grow: 1; margin-left: 8px; position: relative; @include font-body-2; &::after { display: block; content: ''; width: 16px; height: 16px; position: absolute; left: 8px; top: 6px; @include light-theme { @include color-svg( '../images/icons/v2/search-16.svg', $color-gray-60 ); } @include dark-theme { @include color-svg( '../images/icons/v2/search-16.svg', $color-gray-25 ); } } &__input { width: 100%; height: 28px; @include font-body-1; line-height: 28px; border-radius: 17px; border-width: 1px; border-style: solid; padding: 0 8px 0 30px; &:focus { outline: none; } @include light-theme { background: $color-white; color: $color-gray-90; border-color: $color-gray-60; &:focus { border-color: $ultramarine-ui-light; } &:placeholder { color: $color-gray-45; } } @include dark-theme { border-color: $color-gray-25; background: $color-gray-75; color: $color-gray-05; &:focus { border-color: $ultramarine-ui-light; } &:placeholder { color: $color-gray-45; } } } } } &__footer { @extend %module-emoji-picker--ribbon; justify-content: center; } &__button { width: 28px; height: 28px; border: none; border-radius: 8px; padding: 0; display: flex; justify-content: center; align-items: center; background: none; @include mouse-mode { outline: none; } &--footer { &:not(:first-of-type) { margin-left: 4px; } } &--selected { @include light-theme { background: $color-gray-05; } @include dark-theme { background: $color-gray-60; } } &--icon { display: flex; justify-content: center; align-items: center; &::after { display: block; content: ''; width: 20px; height: 20px; } &--search { &::after { @include light-theme { @include color-svg( '../images/icons/v2/search-16.svg', $color-gray-60 ); } @include dark-theme { @include color-svg( '../images/icons/v2/search-16.svg', $color-gray-25 ); } } } &--close { &::after { @include light-theme { @include color-svg('../images/icons/v2/x-24.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/icons/v2/x-24.svg', $color-gray-25); } } } &--recents { &::after { @include light-theme { @include color-svg( '../images/icons/v2/recent-outline-20.svg', $color-gray-60 ); } @include dark-theme { @include color-svg( '../images/icons/v2/recent-solid-20.svg', $color-gray-25 ); } } } &--emoji { &::after { @include light-theme { @include color-svg( '../images/icons/v2/emoji-smiley-outline-20.svg', $color-gray-60 ); } @include dark-theme { @include color-svg( '../images/icons/v2/emoji-smiley-solid-20.svg', $color-gray-25 ); } } } $categories: animal food activity travel object symbol flag; @each $cat in $categories { &--#{$cat} { &::after { @include light-theme { @include color-svg( '../images/icons/v2/emoji-#{$cat}-outline-20.svg', $color-gray-60 ); } @include dark-theme { @include color-svg( '../images/icons/v2/emoji-#{$cat}-solid-20.svg', $color-gray-25 ); } } } } } } &__body { padding: 8px 16px 0 12px; outline: none; &__emoji-cell { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; } &--empty { display: flex; padding: 0; justify-content: center; align-items: center; @include font-body-1; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } } } } // Module: EmojiButton .emoji-button-wrapper { height: 36px; display: flex; justify-content: center; align-items: center; margin: 0 6px; padding-top: 4px; } .module-emoji-button__button { border: 0; background: none; width: 32px; height: 32px; border-radius: 16px; display: flex; justify-content: center; align-items: center; opacity: 0.5; &:focus, &:hover { opacity: 1; } outline: none; &::after { display: block; content: ''; width: 24px; height: 24px; flex-shrink: 0; @include light-theme { @include color-svg( '../images/icons/v2/emoji-smiley-outline-24.svg', $color-gray-60 ); } @include dark-theme { @include color-svg( '../images/icons/v2/emoji-smiley-solid-24.svg', $color-gray-25 ); } } &--active { @include light-theme() { background: $color-gray-05; } @include dark-theme() { background: $color-gray-75; } opacity: 1; } } // Module: Emoji @mixin emoji-size($size) { &--#{$size} { width: $size; height: $size; &--inline { display: inline-block; vertical-align: bottom; background-size: $size $size; } } &__image--#{$size} { width: $size; height: $size; transform: translate3d(0, 0, 0); vertical-align: baseline; } } .module-emoji { display: flex; justify-content: center; align-items: center; color: transparent; font-family: auto; @include light-theme() { caret-color: $color-gray-90; } @include dark-theme() { caret-color: $color-gray-05; } @include emoji-size(16px); @include emoji-size(18px); @include emoji-size(20px); @include emoji-size(24px); @include emoji-size(28px); @include emoji-size(32px); @include emoji-size(48px); @include emoji-size(64px); @include emoji-size(66px); } // Module: Unsupported Message .module-unsupported-message { text-align: center; } .module-unsupported-message__icon { height: 24px; width: 24px; margin-left: auto; margin-right: auto; margin-bottom: 7px; @include light-theme { @include color-svg( '../images/icons/v2/error-outline-24.svg', $color-gray-60 ); } @include dark-theme { @include color-svg('../images/icons/v2/error-solid-24.svg', $color-gray-25); } } .module-unsupported-message__icon--can-process { @include light-theme { @include color-svg( '../images/icons/v2/check-circle-outline-24.svg', $color-gray-60 ); } @include dark-theme { @include color-svg( '../images/icons/v2/check-circle-solid-24.svg', $color-gray-25 ); } } .module-unsupported-message__text { max-width: 396px; margin-left: auto; margin-right: auto; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } } .module-unsupported-message__contact { font-weight: bold; } .module-unsupported-message__button { @include button-reset; margin-top: 5px; display: inline-block; @include font-body-1-bold; padding: 12px; border-radius: 4px; @include light-theme { color: $ultramarine-ui-light; background-color: $color-gray-02; } @include dark-theme { color: $ultramarine-ui-dark; background-color: $color-gray-75; } } // Module: Countdown .module-countdown { display: block; width: 24px; height: 24px; } // Note: the colors here should match the module-spinner's on-background colors .module-countdown__front-path { fill-opacity: 0; stroke-width: 2; @include light-theme { stroke: $color-gray-60; } @include dark-theme { stroke: $color-gray-25; } } .module-countdown__back-path { fill-opacity: 0; stroke-width: 2; @include light-theme { stroke: $color-gray-05; } @include dark-theme { stroke: $color-gray-75; } } // Module: CompositionInput .module-composition-input { &__input { @include font-body-1; border: none; border-radius: 18px; overflow: hidden; word-break: break-word; &:placeholder { color: $color-gray-45; } // Override draft.js styles .public-DraftEditorPlaceholder-root { color: $color-gray-45; } @include light-theme() { // Same as background color border: 1px solid $color-white; background-color: $color-gray-05; color: $color-gray-90; } @include dark-theme() { // Same as background color border: 1px solid $color-gray-95; background-color: $color-gray-75; color: $color-gray-05; } &__scroller { padding: 7px 12px; min-height: 32px; max-height: 80px; overflow: auto; &::-webkit-scrollbar-thumb { @include light-theme { border: 2px solid $color-gray-05; } @include dark-theme { border: 2px solid $color-gray-75; } } &--large { max-height: 227px; height: 227px; .DraftEditor-root { height: 227px - 2 * 7px; // subtract padding } } } &:focus-within { @include light-theme() { border: 1px solid $ultramarine-ui-light; } @include dark-theme() { border: 1px solid $ultramarine-ui-light; } } } &__emoji-suggestions { padding: 12px 0; margin-bottom: 6px; border-radius: 8px; z-index: 2; @include popper-shadow(); @include light-theme() { background: $color-white; } @include dark-theme() { background: $color-gray-75; } &__row { height: 30px; padding: 0 12px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; background: none; border: none; width: 100%; @include font-body-2; @include light-theme() { color: $color-gray-60; } @include dark-theme() { color: $color-gray-25; } &__short-name { margin-left: 4px; } &--selected, &:hover { @include light-theme() { background: $color-gray-05; color: $color-gray-90; } @include dark-theme() { background: $color-gray-60; color: $color-gray-05; } } } stroke: $color-white; } } // Module: CompositionArea .module-composition-area { position: relative; min-height: 42px; padding-top: 6px; &__row { display: flex; flex-direction: row; &--center { justify-content: center; } &--padded { padding: 0 12px; } &--control-row { margin-top: 8px; } &--column { flex-direction: column; } } &__button-cell { margin-top: 2px; display: flex; justify-content: center; align-items: center; width: 40px; height: 100%; flex-shrink: 0; &--mic-active { width: 150px; } &--large-right { margin-left: auto; margin-right: 4px; } &--large-right-mic-active { margin-left: auto; margin-right: 12px; } } &__send-button { width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; background: none; border: none; &::after { display: block; content: ''; width: 24px; height: 24px; flex-shrink: 0; @include color-svg( '../images/icons/v2/send-24.svg', $ultramarine-ui-light ); } } &__input { flex-grow: 1; } $comp-area: &; &__toggle-large { width: 48px; height: 24px; position: absolute; left: calc(50% - 24px); top: -18px; border-radius: 12px 12px 0 0; pointer-events: none; opacity: 0; transition: opacity 200ms ease-out; #{$comp-area}:hover & { opacity: 1; pointer-events: all; } @include light-theme() { background-color: $color-white; } @include dark-theme() { background-color: $color-gray-95; } &__button { width: 48px; height: 24px; border: none; @include light-theme() { @include color-svg( '../images/icons/v2/expand-up-20.svg', $color-gray-45, false ); } @include dark-theme() { @include color-svg( '../images/icons/v2/expand-up-20.svg', $color-gray-45, false ); } &--large-active { @include light-theme() { @include color-svg( '../images/icons/v2/collapse-down-20.svg', $color-gray-45, false ); } @include dark-theme() { @include color-svg( '../images/icons/v2/collapse-down-20.svg', $color-gray-45, false ); } } } } &__attachment-list { width: 100%; } } .composition-area-placeholder { flex-grow: 1; margin: { bottom: 6px; } } // Module: Last Seen Indicator .module-last-seen-indicator { padding-top: 25px; padding-bottom: 35px; } .module-last-seen-indicator__bar { background-color: $color-gray-45; width: 100%; height: 1px; } .module-last-seen-indicator__text { margin-top: 3px; @include font-body-2-bold; text-align: center; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-05; } } // Module: Scroll Down Button .module-scroll-down { z-index: 100; position: absolute; right: 20px; bottom: 10px; } .module-scroll-down__button { height: 44px; width: 44px; border-radius: 22px; text-align: center; border: none; outline: none; @include light-theme { background-color: $color-gray-25; &:hover { background-color: $color-gray-45; } box-shadow: 0px 3px 5px 0px $color-black-alpha-20; } @include dark-theme { background-color: $color-gray-45; &:hover { background-color: $color-gray-25; } box-shadow: 0px 3px 5px 0px $color-white-alpha-20; } } .module-scroll-down__button--new-messages { background-color: $ultramarine-ui-light; &:hover { background-color: $ultramarine-brand-dark; } } .module-scroll-down__icon { @include color-svg('../images/icons/v2/arrow-down-24.svg', $color-white); height: 36px; width: 36px; margin-left: -3px; margin-top: -1px; } // Module: Avatar Popup .module-avatar-popup { min-width: 240px; border-radius: 4px; padding-bottom: 4px; @include popper-shadow; @include light-theme { color: $color-gray-90; background-color: $color-white; } @include dark-theme { color: $color-gray-05; background-color: $color-gray-75; } } .module-avatar-popup__profile { display: flex; flex-direction: row; align-items: center; } .module-avatar-popup__profile { padding: 12px; } .module-avatar-popup__profile__text { margin-left: 10px; } .module-avatar-popup__profile__name { @include font-body-2-bold; } .module-avatar-popup__profile__number { @include font-caption; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-25; } } .module-avatar-popup__divider { border: none; padding: 0; margin: 0; height: 1px; width: 100%; margin-bottom: 6px; @include light-theme { background-color: $color-gray-15; } @include dark-theme { background-color: $color-gray-60; } } .module-avatar-popup__item { @include font-body-2; @include button-reset; display: flex; flex-direction: row; align-items: center; width: 100%; height: 32px; padding: 6px; @include light-theme { &:hover { background-color: $color-gray-05; } } @include keyboard-mode { &:hover { background-color: inherit; } &:focus { background-color: $color-gray-05; } } @include dark-theme { &:hover { background-color: $color-gray-60; } } @include dark-keyboard-mode { &:hover { background-color: inherit; } &:focus { background-color: $color-gray-60; } } } .module-avatar-popup__item__icon { margin-left: 6px; height: 16px; width: 16px; } .module-avatar-popup__item__icon-settings { @include light-theme { @include color-svg( '../images/icons/v2/settings-outline-16.svg', $color-gray-75 ); } @include dark-theme { @include color-svg( '../images/icons/v2/settings-solid-16.svg', $color-gray-15 ); } } .module-avatar-popup__item__icon-archive { @include light-theme { @include color-svg( '../images/icons/v2/archive-outline-16.svg', $color-gray-75 ); } @include dark-theme { @include color-svg( '../images/icons/v2/archive-solid-16.svg', $color-gray-15 ); } } .module-avatar-popup__item__text { margin-left: 8px; } // Module: Shortcut Guide Modal .module-shortcut-guide-modal { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 20px; display: flex; flex-direction: row; align-items: center; background-color: $color-black-alpha-40; // react-contextmenu uses a z-index of 1000 z-index: 2000; } .module-shortcut-guide-container { flex-grow: 1; overflow: hidden; } // Module: Shortcut Guide .module-shortcut-guide { border-radius: 4px; padding: 16px; max-height: calc(100vh - 40px); max-width: 1150px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; @include popper-shadow; @include light-theme { color: $color-gray-90; background-color: $color-white; } @include dark-theme { color: $color-gray-05; background-color: $color-gray-75; ::-webkit-scrollbar-thumb { border: 2px solid $color-gray-75; } } } .module-shortcut-guide__header { display: flex; flex-direction: row; align-items: center; margin-bottom: 20px; } .module-shortcut-guide__header-text { @include font-title-2; flex-grow: 1; } .module-shortcut-guide__header-close { @include button-reset; height: 24px; width: 24px; @include light-theme { @include color-svg('../images/icons/v2/x-24.svg', $color-gray-60); } @include dark-theme { @include color-svg('../images/icons/v2/x-24.svg', $color-gray-05); } @include keyboard-mode { &:focus { @include light-theme { @include color-svg( '../images/icons/v2/x-24.svg', $ultramarine-ui-light ); } @include dark-theme { @include color-svg('../images/icons/v2/x-24.svg', $ultramarine-ui-dark); } } } } .module-shortcut-guide__section-header { @include font-body-1-bold; margin-bottom: 8px; } .module-shortcut-guide__scroll-container { outline: none; overflow-y: scroll; } .module-shortcut-guide__section { &:not(:last-child) { margin-bottom: 25px; } } @media (min-width: 900px) { .module-shortcut-guide__section-list { column-count: 2; column-gap: 20px; column-span: none; column-fill: auto; } } .module-shortcut-guide__shortcut { display: flex; flex-direction: row; align-items: center; break-inside: avoid; padding-left: 4px; min-height: 40px; outline: none; @include keyboard-mode { &:focus { @include light-theme { background-color: $color-gray-05; } @include dark-theme { background-color: $color-gray-90; } } } @include light-theme { border-bottom: 1px solid $color-gray-05; } @include dark-theme { border-bottom: 1px solid $color-gray-90; } } .module-shortcut-guide__shortcut__description { flex-grow: 1; margin-top: 4px; margin-bottom: 4px; } .module-shortcut-guide__shortcut__key-container { margin-bottom: 4px; } .module-shortcut-guide__shortcut__key-inner-container { text-align: right; margin-top: 4px; margin-right: 4px; white-space: nowrap; } .module-shortcut-guide__shortcut__key { display: inline-block; border-radius: 2px; padding: 3px; padding-left: 8px; padding-right: 8px; margin-left: 4px; height: 30px; text-align: center; @include light-theme { border: 1px solid $color-gray-15; } @include dark-theme { border: 1px solid $color-gray-90; } } .module-shortcut-guide__shortcut__key--square { width: 30px; padding-left: 0px; padding-right: 0px; } // Module: Profile Change Notification .module-profile-change-notification { @include font-body-1; margin-left: 2em; margin-right: 2em; text-align: center; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-05; } } .module-profile-change-notification--icon { @include light-theme { @include color-svg( '../images/icons/v2/profile-outline-20.svg', $color-gray-60 ); } @include dark-theme { @include color-svg( '../images/icons/v2/profile-outline-20.svg', $color-gray-05 ); } height: 20px; width: 20px; margin-left: auto; margin-right: auto; } /* Calling: Device Selection */ .module-calling-device-selection { position: relative; } .module-calling-device-selection__close-button { @include button-reset; @include light-theme { @include color-svg('../images/x-shadow-16.svg', $color-gray-75); } @include dark-theme { @include color-svg('../images/x-shadow-16.svg', $color-white); } height: 16px; position: absolute; right: 5px; top: 0; width: 16px; z-index: 2; @include keyboard-mode { &:focus { outline: 2px solid $ultramarine-ui-light; } } } .module-calling-device-selection__title { @include font-title-2; margin-top: 12px; margin-bottom: 20px; } .module-calling-device-selection__label { @include font-body-1-bold; display: block; margin-bottom: 16px; } .module-calling-device-selection__select { margin-bottom: 20px; position: relative; select { @include font-body-1; -webkit-appearance: none; border-radius: 4px; border: 1px solid $color-gray-45; cursor: pointer; height: 40px; outline: 0; padding: 10px; padding-right: 32px; text-overflow: ellipsis; width: 100%; } &::after { border: 2px solid $color-gray-75; border-radius: 2px; border-right: 0; border-top: 0; content: ' '; display: block; height: 10px; pointer-events: none; position: absolute; right: 15px; top: 16px; transform-origin: center; transform: rotate(-45deg); width: 10px; z-index: 2; } } // Module: GroupV2 Change .module-group-v2-change { @include font-body-1; margin-left: 2em; margin-right: 2em; text-align: center; @include light-theme { color: $color-gray-60; } @include dark-theme { color: $color-gray-05; } } .module-group-v2-change--icon { @include light-theme { @include color-svg( '../images/icons/v2/group-outline-20.svg', $color-gray-60 ); } @include dark-theme { @include color-svg( '../images/icons/v2/group-outline-20.svg', $color-gray-05 ); } height: 20px; width: 20px; margin-left: auto; margin-right: auto; } /* Third-party module: react-tooltip-lite */ .react-tooltip-lite { border-radius: 8px; @include light-theme { background-color: $color-gray-02; color: $color-gray-75; } @include dark-theme { background-color: $color-gray-65; color: $color-gray-05; } } .react-tooltip-lite-arrow { @include light-theme { border-color: $color-gray-02; } @include dark-theme { border-color: $color-gray-65; } } /* Third-party module: react-contextmenu*/ .react-contextmenu { outline: none; border-radius: 4px; min-width: 160px; padding: 0px; padding-top: 8px; padding-bottom: 8px; opacity: 0; user-select: none; @include light-theme { background-color: $color-gray-02; border: 1px solid $color-gray-02; } @include dark-theme { background-color: $color-gray-90; border: 1px solid $color-gray-60; } } .react-contextmenu--visible { z-index: 1000; opacity: 1; } .react-contextmenu-item { outline: none; cursor: pointer; white-space: nowrap; @include font-body-2; padding-left: 16px; padding-top: 3px; padding-bottom: 2px; padding-right: 16px; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-02; } } .react-contextmenu-item--checked:before { content: '✓'; display: inline-block; position: absolute; right: 7px; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-02; } } .react-contextmenu-item.react-contextmenu-submenu { padding: 0; } .react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item { padding-right: 36px; } .react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item:after { content: '\25B6'; display: inline-block; position: absolute; right: 7px; @include light-theme { color: $color-gray-90; } @include dark-theme { color: $color-gray-02; } } .react-contextmenu-item.react-contextmenu-item--active, .react-contextmenu-item.react-contextmenu-item--selected { color: $color-black; @include light-theme { background-color: $color-gray-15; } @include dark-theme { background-color: $color-gray-75; color: $color-white; } } .react-contextmenu-item.react-contextmenu-item--active.react-contextmenu-item--checked:before, .react-contextmenu-item.react-contextmenu-item--selected.react-contextmenu-item--checked:before { color: $color-black; @include dark-theme { color: $color-white; } } .react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item.react-contextmenu-item--active:after, .react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item.react-contextmenu-item--selected:after { color: $color-black; @include dark-theme { color: $color-white; } } // All media query widths have 300px added to account for the left pane // And have been tweaked for smoother transitions // To hide in small breakpoints .module-message__buttons__download { display: none; } .module-message__buttons__reply { display: none; } .module-message__buttons__react { display: none; } // To limit messages with things forcing them wider, like long attachment names .module-message__container { // 2px to allow for 1px border max-width: 302px; &--with-reactions { margin-bottom: 12px; } &--deleted-for-everyone { font-style: italic; } } /* Spec: container > 438px and container < 593px */ @media (min-width: 800px) and (max-width: 925px) { .module-message { // Add 2px for 1px border max-width: 376px; } .module-message__container { max-width: 100%; } // Spec: container < 438px .module-message--incoming { margin-right: auto; } .module-message--outgoing { margin-left: auto; } // To hide in small breakpoints .module-message__buttons__download { display: inline-block; } .module-message__buttons__reply { display: inline-block; } .module-message__buttons__react { display: inline-block; } // To hide in larger breakpoints .module-message__context__download { display: none; } .module-message__context__reply { display: none; } } // Spec: container > 593px @media (min-width: 926px) { .module-message { max-width: 66%; } .module-message__container { max-width: 100%; } .module-message--incoming { margin-right: auto; } .module-message--outgoing { margin-left: auto; } // To hide in small breakpoints .module-message__buttons__download { display: inline-block; } .module-message__buttons__reply { display: inline-block; } .module-message__buttons__react { display: inline-block; } // To hide in larger breakpoints .module-message__context__download { display: none; } .module-message__context__reply { display: none; } .module-message__context__react { display: none; } }