signal-desktop/stylesheets/components/StoriesSettingsModal.scss

299 lines
5.2 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 {
2023-04-20 17:03:43 +00:00
padding-inline: 0;
}
2022-08-10 18:37:19 +00:00
.module-conversation-list__item--contact-or-conversation__checkbox--container {
height: 20px;
2023-04-20 17:03:43 +00:00
margin-inline-end: 8px;
2022-08-10 18:37:19 +00:00
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;
}
}
}
}
&__list {
@include button-reset;
@include font-body-1;
align-items: center;
display: flex;
justify-content: space-between;
width: 100%;
2023-04-20 17:03:43 +00:00
padding-block: 8px;
padding-inline: 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;
2022-12-09 20:37:45 +00:00
width: 32px;
height: 32px;
background: $color-gray-75;
&::after {
@include color-svg($svg, $color-white);
content: '';
height: 20px;
width: 20px;
}
}
&--new {
2023-05-04 18:04:22 +00:00
@include avatar('../images/icons/v3/plus/plus.svg');
}
&--custom {
2023-05-04 18:04:22 +00:00
@include avatar('../images/icons/v3/stories/stories.svg');
2022-08-10 18:37:19 +00:00
&::after {
height: 20px;
width: 20px;
}
}
}
&__title {
2023-04-20 17:03:43 +00:00
margin-inline-start: 12px;
}
&__delete {
@include button-reset;
2023-05-04 18:04:22 +00:00
@include color-svg('../images/icons/v3/trash/trash.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;
2023-04-20 17:03:43 +00:00
margin-inline-end: 8px;
}
&__delete-list {
@include button-reset;
align-items: center;
color: $color-accent-red;
display: flex;
2023-04-20 17:03:43 +00:00
padding-block: 8px;
padding-inline: 0;
width: 100%;
&::before {
@include color-svg(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/trash/trash.svg',
$color-accent-red
);
content: '';
height: 20px;
2023-04-20 17:03:43 +00:00
margin-inline-end: 20px;
width: 20px;
}
}
&__checkbox {
2023-04-20 17:03:43 +00:00
margin-block: 14px;
margin-inline: 0;
}
&__checkbox-container {
flex: 1;
display: flex;
align-items: center;
}
&__checkbox-label {
flex: 1;
2023-04-20 17:03:43 +00:00
margin-inline-end: 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;
2023-04-20 17:03:43 +00:00
padding-block: 8px;
padding-inline: 0;
width: 100%;
margin-top: 12px;
&::before {
@include color-svg(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/minus/minus-circle.svg',
$color-accent-red
);
content: '';
height: 20px;
2023-04-20 17:03:43 +00:00
margin-inline-end: 20px;
width: 20px;
}
}
}