signal-desktop/stylesheets/components/SafetyNumberViewer.scss
2023-04-17 18:16:41 -07:00

88 lines
1.8 KiB
SCSS

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.module-SafetyNumberViewer {
text-align: center;
&__icon {
height: 1.25em;
width: 1.25em;
vertical-align: text-bottom;
display: inline-block;
}
&__icon--verified {
display: inline-block;
height: 1.25em;
margin-right: 4px;
vertical-align: text-bottom;
width: 1.25em;
@include light-theme {
-webkit-mask: url('../images/icons/v2/check-24.svg') no-repeat center;
-webkit-mask-size: 100%;
background-color: #121212;
}
@include dark-theme {
-webkit-mask: url('../images/icons/v2/check-24.svg') no-repeat center;
-webkit-mask-size: 100%;
background-color: #f6f6f6;
}
}
&__icon--shield {
display: inline-block;
height: 1.25em;
margin-right: 4px;
vertical-align: text-bottom;
width: 1.25em;
@include light-theme {
-webkit-mask: url('../images/icons/v2/safety-number-outline-24.svg')
no-repeat center;
-webkit-mask-size: 100%;
background-color: #121212;
}
@include dark-theme {
-webkit-mask: url('../images/icons/v2/safety-number-solid-24.svg')
no-repeat center;
-webkit-mask-size: 100%;
background-color: #f6f6f6;
}
}
&__number {
border-radius: 8px;
font-family: $monospace;
height: 100px;
margin: 24px auto;
padding: 24px;
width: 240px;
@include light-theme {
background-color: $color-gray-02;
}
@include dark-theme {
background-color: $color-gray-90;
}
}
&__verification-status {
margin: 30px 0 10px;
text-align: center;
}
&__buttons {
text-align: right;
}
&__button {
margin-top: 30px;
}
&__modal.module-Modal {
max-width: 500px;
}
}