signal-desktop/stylesheets/components/UsernameOnboardingModalBody.scss
2023-05-09 10:52:39 -04:00

104 lines
1.8 KiB
SCSS

// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.UsernameOnboardingModalBody {
display: flex;
flex-direction: column;
align-items: center;
user-select: none;
&__large-at {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 24px;
margin-bottom: 12px;
@include light-theme {
background-color: $color-gray-04;
}
@include dark-theme {
background-color: $color-gray-65;
}
&::after {
display: block;
width: 28px;
height: 28px;
content: '';
@include light-theme {
@include color-svg('../images/icons/v3/at/at.svg', $color-gray-75);
}
@include dark-theme {
@include color-svg('../images/icons/v3/at/at.svg', $color-gray-15);
}
}
}
&__title {
@include font-title-2;
margin-bottom: 20px;
max-width: 240px;
text-align: center;
}
&__row {
display: flex;
gap: 16px;
margin-bottom: 24px;
&__icon {
flex-shrink: 0;
width: 32px;
height: 32px;
&--number {
background: url(../images/icons/v2/number_color_32.svg);
}
&--link {
background: url(../images/icons/v2/link_color_32.svg);
}
&--lock {
background: url(../images/icons/v2/lock_color_32.svg);
}
}
&__body {
@include font-body-2;
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
max-width: 248px;
}
&--center {
justify-content: center;
}
}
&__learn-more {
text-decoration: none;
font-weight: 600;
}
&__submit {
width: 100%;
max-width: 296px;
margin-bottom: 16px;
}
}