signal-desktop/stylesheets/components/SystemMessage.scss
2021-08-26 13:51:55 -07:00

277 lines
6.3 KiB
SCSS

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@mixin system-message-icon($light, $dark) {
@include light-theme {
-webkit-mask: url($light) no-repeat center;
-webkit-mask-size: 100%;
}
@include dark-theme {
-webkit-mask: url($dark) no-repeat center;
-webkit-mask-size: 100%;
}
}
.SystemMessage {
@include font-body-2;
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
@include light-theme {
color: $color-black;
}
@include dark-theme {
color: $color-gray-25;
}
&--multiline {
flex-direction: column;
}
&__line {
align-items: center;
display: flex;
&:not(:first-child) {
margin-top: 12px;
}
}
&__text {
max-width: 400px;
}
&__icon {
height: 16px;
flex: 0 0 16px;
margin-right: 8px;
width: 16px;
vertical-align: middle;
@include light-theme {
background-color: $color-black;
}
@include dark-theme {
background-color: $color-gray-25;
}
&--audio-incoming {
@include system-message-icon(
'../images/icons/v2/phone-incoming-16.svg',
'../images/icons/v2/phone-incoming-solid-16.svg'
);
}
&--audio-missed {
@include system-message-icon(
'../images/icons/v2/phone-x-16.svg',
'../images/icons/v2/phone-x-solid-16.svg'
);
}
&--audio-outgoing {
@include system-message-icon(
'../images/icons/v2/phone-outgoing-16.svg',
'../images/icons/v2/phone-outgoing-solid-16.svg'
);
}
&--group {
@include system-message-icon(
'../images/icons/v2/group-outline-24.svg',
'../images/icons/v2/group-solid-24.svg'
);
}
&--group-access {
@include system-message-icon(
'../images/icons/v2/megaphone-16.svg',
'../images/icons/v2/megaphone-solid-16.svg'
);
}
&--group-add {
@include system-message-icon(
'../images/icons/v2/member-added-16.svg',
'../images/icons/v2/member-added-solid-16.svg'
);
}
&--group-approved {
@include system-message-icon(
'../images/icons/v2/member-accepted-16.svg',
'../images/icons/v2/member-accepted-solid-16.svg'
);
}
&--group-avatar {
@include system-message-icon(
'../images/icons/v2/photo-16.svg',
'../images/icons/v2/photo-solid-16.svg'
);
}
&--group-decline {
@include system-message-icon(
'../images/icons/v2/member-declined-16.svg',
'../images/icons/v2/member-declined-solid-16.svg'
);
}
&--group-edit {
@include system-message-icon(
'../images/icons/v2/edit-16.svg',
'../images/icons/v2/edit-solid-16.svg'
);
}
&--group-leave {
@include system-message-icon(
'../images/icons/v2/leave-16.svg',
'../images/icons/v2/leave-solid-16.svg'
);
}
&--group-remove {
@include system-message-icon(
'../images/icons/v2/member-remove-16.svg',
'../images/icons/v2/member-remove-solid-16.svg'
);
}
&--info {
@include system-message-icon(
'../images/icons/v2/info-16.svg',
'../images/icons/v2/info-solid-24.svg'
);
}
&--phone {
@include system-message-icon(
'../images/icons/v2/phone-right-outline-24.svg',
'../images/icons/v2/phone-right-solid-24.svg'
);
}
&--profile {
@include system-message-icon(
'../images/icons/v2/profile-outline-20.svg',
'../images/icons/v2/profile-outline-20.svg'
);
}
&--safety-number {
@include system-message-icon(
'../images/icons/v2/safety-number-outline-24.svg',
'../images/icons/v2/safety-number-solid-24.svg'
);
}
&--session-refresh {
@include system-message-icon(
'../images/icons/v2/refresh-16.svg',
'../images/icons/v2/refresh-16.svg'
);
}
&--timer {
@include system-message-icon(
'../images/icons/v2/timer-outline-24.svg',
'../images/icons/v2/timer-solid-16.svg'
);
}
&--timer-disabled {
@include system-message-icon(
'../images/icons/v2/timer-disabled-outline-24.svg',
'../images/icons/v2/timer-disabled-solid-16.svg'
);
}
&--unsupported {
@include system-message-icon(
'../images/icons/v2/error-outline-24.svg',
'../images/icons/v2/error-solid-24.svg'
);
&--can-process {
@include system-message-icon(
'../images/icons/v2/check-circle-outline-24.svg',
'../images/icons/v2/check-circle-solid-24.svg'
);
}
}
&--unsynced {
@include system-message-icon(
'../images/icons/v2/info-outline-24.svg',
'../images/icons/v2/info-solid-24.svg'
);
}
&--verified {
@include system-message-icon(
'../images/icons/v2/check-24.svg',
'../images/icons/v2/check-24.svg'
);
}
&--verified-not {
@include system-message-icon(
'../images/icons/v2/safety-number-outline-24.svg',
'../images/icons/v2/safety-number-solid-24.svg'
);
}
&--video {
@include system-message-icon(
'../images/icons/v2/video-outline-24.svg',
'../images/icons/v2/video-outline-24.svg'
);
}
&--video-incoming {
@include system-message-icon(
'../images/icons/v2/video-incoming-16.svg',
'../images/icons/v2/video-incoming-solid-16.svg'
);
}
&--video-missed {
@include system-message-icon(
'../images/icons/v2/video-x-16.svg',
'../images/icons/v2/video-x-solid-16.svg'
);
}
&--video-outgoing {
@include system-message-icon(
'../images/icons/v2/video-outgoing-16.svg',
'../images/icons/v2/video-outgoing-solid-16.svg'
);
}
&--warning {
@include system-message-icon(
'../images/icons/v2/error-outline-12.svg',
'../images/icons/v2/error-outline-12.svg'
);
}
}
&--error {
color: $color-accent-red;
.SystemMessage__icon {
background: $color-accent-red;
}
}
img.emoji {
// The negative bottom margin offset doesn't play well with align-items center
margin-bottom: 0;
}
}