signal-desktop/stylesheets/components/StoriesSettingsModal.scss

312 lines
5.4 KiB
SCSS
Raw Normal View History

// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.StoriesSettingsModal {
&__width-container {
max-width: 420px;
}
&__modal {
width: 420px;
}
2022-08-10 18:37:19 +00:00
&__conversation-list {
.module-conversation-list {
2022-08-10 18:37:19 +00:00
padding-left: 0;
padding-right: 0;
}
2022-08-10 18:37:19 +00:00
.module-conversation-list__item--contact-or-conversation__checkbox--container {
height: 20px;
margin-right: 8px;
position: relative;
width: 20px;
}
input[type='checkbox'] {
background: transparent;
border: none;
cursor: pointer;
display: block;
height: 0;
margin: 0;
min-width: 0;
position: absolute;
width: 0;
@include keyboard-mode {
&:focus {
&::before {
border-color: $color-ultramarine;
}
outline: none;
}
}
&::before {
@include rounded-corners;
background: inherit;
border: 1.5px solid $color-gray-60;
content: '';
display: block;
height: 20px;
position: absolute;
width: 20px;
}
&:checked {
&::before {
-webkit-mask: none;
background: $color-ultramarine;
border: 1.5px solid $color-ultramarine;
}
&::after {
border: solid $color-white;
border-width: 0 2px 2px 0;
content: '';
display: block;
height: 11px;
left: 7px;
position: absolute;
top: 3px;
transform: rotate(45deg);
width: 6px;
}
}
}
}
&__list {
@include button-reset;
@include font-body-1;
align-items: center;
display: flex;
justify-content: space-between;
width: 100%;
padding: 8px 0;
&--no-pointer {
cursor: inherit;
}
&__viewers {
display: flex;
@include font-body-2;
color: $color-gray-25;
}
&__left {
display: flex;
align-items: center;
}
&__avatar {
@mixin avatar($svg) {
@include rounded-corners;
display: inline-flex;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
background: $color-gray-75;
&::after {
@include color-svg($svg, $color-white);
content: '';
height: 20px;
width: 20px;
}
}
&--new {
@include avatar('../images/icons/v2/plus-20.svg');
}
&--custom {
@include avatar('../images/icons/v2/stories-outline-24.svg');
2022-08-10 18:37:19 +00:00
&::after {
height: 20px;
width: 20px;
}
}
}
&__title {
margin-left: 12px;
}
&__delete {
@include button-reset;
@include color-svg(
'../images/icons/v2/trash-outline-24.svg',
$color-gray-25
);
height: 20px;
width: 20px;
visibility: hidden;
}
&:hover &__delete {
visibility: visible;
}
}
&__divider {
width: 100%;
border: 0 solid $color-gray-65;
border-top-width: 1px;
}
&__input__container {
margin-top: 15px;
margin-bottom: 0px;
}
&__visibility {
@include font-subtitle;
color: $color-gray-25;
margin-top: 10px;
}
&__title {
@include font-body-1-bold;
margin-top: 32px;
}
&__description {
@include font-subtitle;
color: $color-gray-25;
margin-top: 0px;
margin-bottom: 16px;
}
&__listHeader {
display: flex;
align-items: center;
}
&__listHeader__title {
flex: 1;
@include font-body-1-bold;
margin-right: 8px;
}
&__delete-list {
@include button-reset;
align-items: center;
color: $color-accent-red;
display: flex;
padding: 8px 0;
width: 100%;
&::before {
@include color-svg(
'../images/icons/v2/trash-outline-24.svg',
$color-accent-red
);
content: '';
height: 20px;
margin-right: 20px;
width: 20px;
}
}
&__checkbox {
margin: 14px 0;
}
&__checkbox-container {
flex: 1;
display: flex;
align-items: center;
}
&__checkbox-label {
flex: 1;
margin-right: 8px;
}
&__checkbox-description {
color: $color-gray-25;
}
&__conversation-list {
flex-grow: 1;
min-height: 300px;
overflow: hidden;
}
&__disclaimer {
@include font-subtitle;
color: $color-gray-25;
&__learn-more {
@include button-reset;
color: $color-gray-05;
}
}
&__stories-off-container {
display: flex;
gap: 16px;
align-items: center;
}
&__stories-off-text {
flex: 1;
color: $color-gray-25;
@include font-subtitle;
}
}
.GroupStorySettingsModal {
&__header {
display: flex;
gap: 12px;
align-items: center;
padding-bottom: 12px;
}
&__members_title {
@include font-body-1-bold;
}
&__members_item {
display: flex;
gap: 12px;
align-items: center;
&__name {
@include font-body-1;
}
}
&__members_help {
@include font-body-2;
color: $color-gray-25;
}
&__remove_group {
@include button-reset;
align-items: center;
color: $color-accent-red;
display: flex;
padding: 8px 0;
width: 100%;
margin-top: 12px;
&::before {
@include color-svg(
'../images/icons/v2/disable-outline-20.svg',
$color-accent-red
);
content: '';
height: 20px;
margin-right: 20px;
width: 20px;
}
}
}