signal-desktop/stylesheets/components/SafetyNumberViewer.scss

123 lines
2.5 KiB
SCSS
Raw Normal View History

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.module-SafetyNumberViewer {
&__icon {
height: 1.25em;
width: 1.25em;
vertical-align: text-bottom;
display: inline-block;
}
&__verification-label {
margin: 10px 0;
}
&__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;
}
}
&__verify-container {
text-align: center;
}
&__button--verify {
border-radius: 5px;
font-weight: bold;
margin: 0;
outline: none;
padding: 10px;
}
&__number {
background: #f6f6f6;
border-radius: 5px;
border: solid 1px #dedede;
font-family: monospace;
margin: 20px auto 20px auto;
padding: 10px;
text-align: center;
width: 16em;
@include dark-theme {
background: #1b1b1b;
border: solid 1px #848484;
color: #f6f6f6;
}
}
&__verification-status {
margin: 30px 0 10px;
text-align: center;
}
&__close-button {
display: flex;
justify-content: flex-end;
button {
background: inherit;
border: none;
cursor: pointer;
padding: 0;
@include keyboard-mode {
&:focus {
2021-05-28 16:15:17 +00:00
border: 1px solid $color-ultramarine;
}
}
span {
display: inline-block;
height: 24px;
width: 24px;
@include light-theme {
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-60);
}
@include dark-theme {
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-05);
}
}
}
}
}