signal-desktop/stylesheets/components/StoryViewsNRepliesModal.scss

271 lines
4.7 KiB
SCSS
Raw Normal View History

2022-03-04 21:14:52 +00:00
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
2022-11-11 17:17:30 +00:00
$tabs-height: 28px;
$tabs-margin-bottom: 16px;
$footer-height: 36px;
2022-03-04 21:14:52 +00:00
.StoryViewsNRepliesModal {
min-width: 320px;
2022-04-23 03:16:13 +00:00
overflow: hidden;
2022-03-04 21:14:52 +00:00
&--group {
2022-04-23 03:16:13 +00:00
display: flex;
flex-direction: column;
2022-11-11 17:17:30 +00:00
flex: 1;
// explicit height prevents height:auto
// while allowing flex to actually size it
height: 0;
.StoryViewsNRepliesModal__replies {
// at least 400px tall
// but if screen is small, allow it to shrink further
// 75% - (header + header bottom margin + footer)
min-height: min(
calc(75vh - ($tabs-height + $tabs-margin-bottom + $footer-height)),
400px
);
}
}
&__body {
display: flex;
flex-direction: column;
2022-04-23 03:16:13 +00:00
}
&__replies {
flex: 1;
margin: 0 -16px;
2022-04-23 03:16:13 +00:00
max-height: 75vh;
overflow-y: overlay;
&--none {
align-items: center;
color: $color-gray-45;
display: flex;
flex: 1;
justify-content: center;
2022-09-21 19:19:16 +00:00
padding: 80px 0;
2022-04-23 03:16:13 +00:00
user-select: none;
}
2022-03-04 21:14:52 +00:00
}
&__overlay-container {
align-items: flex-end;
justify-content: flex-end;
}
&__compose-container {
display: flex;
align-items: center;
}
&__composer {
flex: 1;
2023-01-27 17:34:15 +00:00
margin-top: 6px;
2022-03-04 21:14:52 +00:00
}
&__emoji-button {
height: 24px;
margin-left: 10px;
2022-03-04 21:14:52 +00:00
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;
}
2022-03-04 21:14:52 +00:00
&__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;
2022-03-04 21:14:52 +00:00
&--with-children {
flex: 1;
2022-03-04 21:14:52 +00:00
}
.quill {
flex: 1;
}
}
}
&__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;
2022-03-04 21:14:52 +00:00
&--container {
display: flex;
}
&--body {
margin-left: 20px;
}
}
&__message-bubble {
background: $color-gray-75;
border-radius: 18px;
margin-left: 8px;
padding: 7px 12px;
2022-04-15 00:08:46 +00:00
&--doe {
background: none;
border: 1px solid $color-gray-75;
}
2022-03-04 21:14:52 +00:00
}
2022-03-16 17:30:14 +00:00
&__quote {
&__container {
margin: 8px 0;
margin-right: 38px;
2022-03-16 17:30:14 +00:00
}
&--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;
}
}
2022-07-25 18:55:44 +00:00
&__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;
}
2023-01-27 17:34:15 +00:00
.module-ReactionPickerPicker {
background: inherit;
border: none;
box-shadow: none;
justify-content: space-between;
width: 100%;
}
.module-emoji-picker {
bottom: 55px;
position: absolute;
}
2022-03-04 21:14:52 +00:00
}
.Tabs.StoryViewsNRepliesModal__tabs {
border-bottom: none;
justify-content: center;
2022-11-11 17:17:30 +00:00
margin-bottom: $tabs-margin-bottom;
2022-03-04 21:14:52 +00:00
}
.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;
}