signal-desktop/stylesheets/components/StoryViewsNRepliesModal.scss
2022-10-20 18:16:25 -06:00

245 lines
4.1 KiB
SCSS

// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.StoryViewsNRepliesModal {
min-width: 320px;
overflow: hidden;
&--group {
display: flex;
flex-direction: column;
min-height: 400px;
}
&__replies {
flex: 1;
margin: 0 -16px;
max-height: 75vh;
overflow-y: overlay;
&--none {
align-items: center;
color: $color-gray-45;
display: flex;
flex: 1;
justify-content: center;
padding: 80px 0;
user-select: none;
}
}
&__overlay-container {
align-items: flex-end;
justify-content: flex-end;
}
&__compose-container {
display: flex;
align-items: center;
}
&__composer {
flex: 1;
margin-right: 16px;
}
&__emoji-button {
height: 24px;
margin-left: 10px;
width: 24px;
&::after {
@include dark-theme {
@include color-svg(
'../images/icons/v2/emoji-smiley-outline-24.svg',
$color-white
);
}
}
}
&__not-a-member {
margin: 24px 4px 8px 4px;
font-size: 12px;
text-align: center;
color: $color-gray-25;
}
&__input {
&__input {
// For specificity because StoryViewsNRepliesModal is always in dark-theme
@include dark-theme {
background: $color-gray-75;
border: 1px solid $color-gray-75;
color: $color-white;
}
.ql-editor.ql-blank::before {
color: $color-gray-25;
}
display: flex;
align-items: center;
min-height: 36px;
&--with-children {
flex: 1;
}
.quill {
flex: 1;
}
}
}
&__react {
@include button-reset;
@include color-svg(
'../images/icons/v2/add-reaction-outline-24.svg',
$color-white
);
height: 22px;
width: 22px;
}
&__view {
align-items: center;
display: flex;
justify-content: space-between;
margin: 8px 0;
&--name {
@include font-body-2;
margin-left: 12px;
}
&--timestamp {
@include font-body-2;
color: $color-gray-45;
}
}
&__reply {
align-items: flex-end;
display: flex;
padding-bottom: 12px;
&--title {
@include font-body-2;
}
&--timestamp {
@include font-subtitle;
color: $color-gray-25;
margin-left: 6px;
}
}
&__reaction {
align-items: center;
display: flex;
justify-content: space-between;
padding: 12px 16px;
&--container {
display: flex;
}
&--body {
margin-left: 20px;
}
}
&__message-bubble {
background: $color-gray-75;
border-radius: 18px;
margin-left: 8px;
padding: 7px 12px;
&--doe {
background: none;
border: 1px solid $color-gray-75;
}
}
&__quote {
&__container {
margin: 8px 0;
margin-right: 38px;
}
&--outgoing-ultramarine {
@include dark-theme {
background-color: $color-gray-60;
background-image: none;
}
}
&__primary {
min-height: 64px;
color: $color-gray-05;
font-size: 12px;
font-weight: 400;
&__author,
&__text {
}
}
&__icon-container {
flex: 0 0 40px;
height: 64px;
width: 40px;
}
}
&__debugger__button {
color: $color-gray-25;
display: block;
font-weight: 600;
height: auto;
opacity: 1;
width: auto;
&--active {
@include dark-theme {
background: inherit;
}
}
&::after {
display: none;
}
&__text {
font-weight: normal;
}
}
&__copy-icon {
@include color-svg('../images/icons/v2/copy-outline-24.svg', $color-white);
}
&__read-receipts-off {
color: $color-gray-25;
margin: 160px 16px;
}
}
.Tabs.StoryViewsNRepliesModal__tabs {
border-bottom: none;
justify-content: center;
margin-bottom: 16px;
}
.Tabs__tab.StoryViewsNRepliesModal__tabs__tab {
@include font-body-1-bold;
padding: 4px 12px;
margin: 0 12px;
}
.Tabs__tab--selected.StoryViewsNRepliesModal__tabs__tab--selected {
background: $color-gray-65;
border-radius: 24px;
border-bottom: none;
}