Merge branch 'main' into HEAD
This commit is contained in:
Scott Nonnenberg
commit
d57d0cea19
1135 changed files with 264116 additions and 302492 deletions
|
|
@ -85,6 +85,8 @@ textarea {
|
|||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
|
||||
@include light-theme {
|
||||
background: $color-gray-25;
|
||||
border: 2px solid $color-white;
|
||||
|
|
@ -290,7 +292,7 @@ $loading-height: 16px;
|
|||
justify-content: center;
|
||||
user-select: none;
|
||||
|
||||
.container {
|
||||
.dot-container {
|
||||
display: flex;
|
||||
gap: 7px;
|
||||
margin-block: 6px 22px;
|
||||
|
|
@ -629,6 +631,10 @@ $loading-height: 16px;
|
|||
float: inline-start;
|
||||
}
|
||||
}
|
||||
|
||||
.StandaloneRegistration__error {
|
||||
color: $color-accent-red;
|
||||
}
|
||||
}
|
||||
|
||||
//yellow border fix
|
||||
|
|
|
|||
|
|
@ -12,8 +12,17 @@
|
|||
}
|
||||
/* Farsi (Persian) */
|
||||
&:lang(fa) {
|
||||
font-family: 'Vazirmatn', -apple-system, system-ui, BlinkMacSystemFont,
|
||||
'Segoe UI', Tahoma, 'Noto Sans Arabic', Helvetica, Arial, sans-serif;
|
||||
font-family:
|
||||
'Vazirmatn',
|
||||
-apple-system,
|
||||
system-ui,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Tahoma,
|
||||
'Noto Sans Arabic',
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif;
|
||||
}
|
||||
/* Urdu */
|
||||
&:lang(ur) {
|
||||
|
|
@ -316,7 +325,9 @@ $rtl-icon-map: (
|
|||
// Other
|
||||
|
||||
@mixin popper-shadow() {
|
||||
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3), 0px 0px 8px rgba(0, 0, 0, 0.05);
|
||||
box-shadow:
|
||||
0px 8px 20px rgba(0, 0, 0, 0.3),
|
||||
0px 0px 8px rgba(0, 0, 0, 0.05);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
border: 1px solid WindowText;
|
||||
|
|
@ -868,9 +879,11 @@ $rtl-icon-map: (
|
|||
@include scrollbar;
|
||||
&::-webkit-scrollbar-thumb {
|
||||
@include light-theme {
|
||||
background: $color-gray-25;
|
||||
border-color: $color-gray-04;
|
||||
}
|
||||
@include dark-theme {
|
||||
background: $color-gray-45;
|
||||
border-color: $color-gray-80;
|
||||
}
|
||||
}
|
||||
|
|
@ -882,3 +895,82 @@ $rtl-icon-map: (
|
|||
-webkit-app-region: no-drag;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tooltip {
|
||||
& {
|
||||
@include font-body-2;
|
||||
|
||||
@include light-theme {
|
||||
background-color: $color-gray-04;
|
||||
color: $color-black;
|
||||
outline: 1px solid $color-gray-20;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
background-color: $color-gray-80;
|
||||
color: $color-gray-15;
|
||||
outline: 1px solid $color-gray-62;
|
||||
}
|
||||
|
||||
padding-block: 5px;
|
||||
padding-inline: 12px;
|
||||
border-radius: 6px;
|
||||
filter: drop-shadow(0px 4px 3px $color-black-alpha-16);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
& .module-tooltip-arrow::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
border-style: solid;
|
||||
border-width: 7px;
|
||||
}
|
||||
|
||||
&[data-placement='bottom'] .module-tooltip-arrow::before {
|
||||
@include light-theme {
|
||||
border-color: transparent transparent $color-gray-20 transparent;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
border-color: transparent transparent $color-gray-62 transparent;
|
||||
}
|
||||
|
||||
margin-top: -14px;
|
||||
/* stylelint-disable-next-line liberty/use-logical-spec */
|
||||
margin-left: -7px;
|
||||
}
|
||||
|
||||
&[data-placement='bottom'] .module-tooltip-arrow::after {
|
||||
@include light-theme {
|
||||
border-bottom-color: $color-gray-04;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
border-bottom-color: $color-gray-80;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-placement='top'] .module-tooltip-arrow::before {
|
||||
@include light-theme {
|
||||
border-color: $color-gray-20 transparent transparent transparent;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
border-color: $color-gray-62 transparent transparent transparent;
|
||||
}
|
||||
|
||||
margin-top: 0;
|
||||
/* stylelint-disable-next-line liberty/use-logical-spec */
|
||||
margin-left: -7px;
|
||||
}
|
||||
|
||||
&[data-placement='top'] .module-tooltip-arrow::after {
|
||||
@include light-theme {
|
||||
border-top-color: $color-gray-04;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
border-top-color: $color-gray-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -408,7 +408,9 @@ $message-padding-horizontal: 12px;
|
|||
background: transparent;
|
||||
border: 1px solid $color-gray-20;
|
||||
animation: module-message__select-checkbox--fadeIn 0.2s ease-out;
|
||||
transition: background 0.1s ease-out, border-color 0.1s ease-out;
|
||||
transition:
|
||||
background 0.1s ease-out,
|
||||
border-color 0.1s ease-out;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
|
@ -953,7 +955,7 @@ $message-padding-horizontal: 12px;
|
|||
padding-inline: $message-padding-horizontal;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
|
||||
@include light-theme {
|
||||
background-color: $color-gray-02;
|
||||
|
|
@ -992,6 +994,7 @@ $message-padding-horizontal: 12px;
|
|||
.module-message__link-preview__description {
|
||||
@include font-body-2;
|
||||
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 5;
|
||||
|
|
@ -1106,6 +1109,9 @@ $message-padding-horizontal: 12px;
|
|||
a {
|
||||
text-decoration: underline;
|
||||
outline: none;
|
||||
// Allow links to be broken anywhere so they don't force extra line breaks
|
||||
// when surrounded by text.
|
||||
word-break: break-all;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-white-alpha-90;
|
||||
|
|
@ -1184,6 +1190,8 @@ $message-padding-horizontal: 12px;
|
|||
&--inline {
|
||||
float: inline-end;
|
||||
margin-top: -14px;
|
||||
position: relative;
|
||||
z-index: $z-index-base;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1200,6 +1208,29 @@ $message-padding-horizontal: 12px;
|
|||
}
|
||||
}
|
||||
|
||||
.module-message__metadata__sms {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
display: inline-block;
|
||||
margin-inline-start: 6px;
|
||||
// High margin to leave space for the increase when we go to two checks
|
||||
margin-bottom: 2px;
|
||||
|
||||
@include color-svg(
|
||||
'../images/icons/v2/lock-unlock-outline-12.svg',
|
||||
$color-white
|
||||
);
|
||||
}
|
||||
|
||||
.module-message__metadata__sms--incoming {
|
||||
@include light-theme {
|
||||
background-color: $color-gray-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
background-color: $color-gray-25;
|
||||
}
|
||||
}
|
||||
|
||||
.module-message__container--outgoing .module-message__metadata__edited {
|
||||
color: $color-white-alpha-80;
|
||||
}
|
||||
|
|
@ -3714,7 +3745,6 @@ button.module-image__border-overlay:focus {
|
|||
}
|
||||
}
|
||||
.module-ongoing-call {
|
||||
$local-preview-width: 108px;
|
||||
$local-preview-height: 80px;
|
||||
|
||||
&__remote-video-enabled {
|
||||
|
|
@ -3996,8 +4026,12 @@ button.module-image__border-overlay:focus {
|
|||
line-height: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
transition: top 200ms linear, inset-inline-start 200ms linear,
|
||||
transform 200ms linear, width 200ms linear, height 200ms linear;
|
||||
transition:
|
||||
top 200ms linear,
|
||||
inset-inline-start 200ms linear,
|
||||
transform 200ms linear,
|
||||
width 200ms linear,
|
||||
height 200ms linear;
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
transition: none;
|
||||
|
|
@ -4211,7 +4245,7 @@ button.module-image__border-overlay:focus {
|
|||
margin-inline: 0 16px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: $local-preview-width;
|
||||
width: $calling-local-preview-width;
|
||||
|
||||
&--active {
|
||||
box-shadow: 0px 4px 14px 0px $color-black-alpha-40;
|
||||
|
|
@ -4231,6 +4265,10 @@ button.module-image__border-overlay:focus {
|
|||
}
|
||||
}
|
||||
|
||||
&__controls {
|
||||
z-index: $z-index-above-above-base;
|
||||
}
|
||||
|
||||
&__controls--fadeIn {
|
||||
@include module-ongoing-call__controls--fade-in;
|
||||
}
|
||||
|
|
@ -4244,7 +4282,6 @@ button.module-image__border-overlay:focus {
|
|||
position: absolute;
|
||||
top: calc(32px + var(--title-bar-drag-area-height));
|
||||
inset-inline-end: 0;
|
||||
z-index: $z-index-above-above-base;
|
||||
display: flex;
|
||||
|
||||
&__button {
|
||||
|
|
@ -4264,7 +4301,9 @@ button.module-image__border-overlay:focus {
|
|||
backface-visibility: hidden;
|
||||
background-color: $color-gray-95;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05), 0px 8px 20px rgba(0, 0, 0, 0.3);
|
||||
box-shadow:
|
||||
0px 0px 8px rgba(0, 0, 0, 0.05),
|
||||
0px 8px 20px rgba(0, 0, 0, 0.3);
|
||||
cursor: grab;
|
||||
height: 158px;
|
||||
position: fixed;
|
||||
|
|
@ -4362,29 +4401,37 @@ button.module-image__border-overlay:focus {
|
|||
flex-direction: column;
|
||||
width: 320px;
|
||||
height: 440px;
|
||||
max-height: calc(100vh - $CallControls__height - 22px);
|
||||
padding-block: 5px 0;
|
||||
padding-inline: 5px;
|
||||
margin-block-end: 85px;
|
||||
margin-block-start: 20px;
|
||||
margin-inline: auto;
|
||||
background-color: $color-gray-80;
|
||||
border-radius: 10px;
|
||||
color: $color-white;
|
||||
filter: drop-shadow(0px 4px 3px $color-black-alpha-20);
|
||||
margin-inline-end: 340px;
|
||||
margin-block-end: 85px;
|
||||
margin-block-start: 20px;
|
||||
outline: 1px solid $color-gray-62;
|
||||
overflow: hidden;
|
||||
padding-block: 5px 0;
|
||||
padding-inline: 5px;
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
justify-content: flex-end;
|
||||
padding-inline-start: 15px;
|
||||
align-items: flex-end;
|
||||
inset-inline-start: 0;
|
||||
z-index: $z-index-calling;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: flex;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 480px;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
|
|
@ -4392,6 +4439,7 @@ button.module-image__border-overlay:focus {
|
|||
}
|
||||
|
||||
&__contact-icon {
|
||||
margin-inline-start: 0.3em;
|
||||
background-color: $color-gray-25;
|
||||
}
|
||||
|
||||
|
|
@ -4414,17 +4462,23 @@ button.module-image__border-overlay:focus {
|
|||
|
||||
&__contact {
|
||||
@include font-body-1;
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-block: 2px;
|
||||
padding-block: 8px;
|
||||
padding-inline-start: 10px;
|
||||
padding-inline-end: 2px;
|
||||
list-style-type: none;
|
||||
border-radius: 6px;
|
||||
cursor: auto;
|
||||
&:hover {
|
||||
background-color: $color-gray-62;
|
||||
}
|
||||
&[disabled] {
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar-and-name {
|
||||
|
|
@ -4506,6 +4560,17 @@ button.module-image__border-overlay:focus {
|
|||
$color-white
|
||||
);
|
||||
}
|
||||
|
||||
&__remove {
|
||||
@include color-svg(
|
||||
'../images/icons/v3/minus/minus-circle-compact.svg',
|
||||
$color-white
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
button.module-calling-participants-list__contact {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.module-call-need-permission-screen {
|
||||
|
|
@ -4555,8 +4620,11 @@ button.module-image__border-overlay:focus {
|
|||
padding-inline: 0;
|
||||
}
|
||||
|
||||
// Center chat list icons in narrow mode by reserving scrollbar space, preventing
|
||||
// scrollbar from pushing content
|
||||
&--width-narrow {
|
||||
padding-inline: 10px;
|
||||
padding-inline: 10px 1px;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
&__item {
|
||||
|
|
@ -4669,10 +4737,6 @@ button.module-image__border-overlay:focus {
|
|||
user-select: none;
|
||||
width: 100%;
|
||||
|
||||
.module-conversation-list--width-narrow & {
|
||||
padding-inline: 14px 0;
|
||||
}
|
||||
|
||||
#{$unread-indicator} {
|
||||
$size: 18px;
|
||||
height: $size;
|
||||
|
|
@ -4817,10 +4881,6 @@ button.module-image__border-overlay:focus {
|
|||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
|
||||
.module-conversation-list--width-narrow & {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
|
@ -4948,6 +5008,22 @@ button.module-image__border-overlay:focus {
|
|||
height: 36px; // two lines
|
||||
}
|
||||
|
||||
&__blocked {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-inline-end: 4px;
|
||||
@include color-svg(
|
||||
'../images/icons/v3/block/block.svg',
|
||||
currentColor
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&__message-request {
|
||||
@include font-body-2-bold;
|
||||
|
||||
|
|
@ -7531,22 +7607,35 @@ button.module-image__border-overlay:focus {
|
|||
|
||||
.module-message__action {
|
||||
@include button-reset();
|
||||
margin-top: 5px;
|
||||
padding: 10px;
|
||||
border-radius: 30px;
|
||||
margin-top: 14px;
|
||||
margin-bottom: 4px;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
@include font-body-1-bold();
|
||||
border-top: 1px solid;
|
||||
}
|
||||
.module-message__action--outgoing {
|
||||
border-top-color: rgba(255, 255, 255, 0.5);
|
||||
background-color: rgba($color-white, 0.22);
|
||||
&:hover {
|
||||
background-color: rgba($color-white, 0.36);
|
||||
}
|
||||
}
|
||||
.module-message__action--incoming {
|
||||
@include light-theme {
|
||||
border-top-color: rgba(0, 0, 0, 0.25);
|
||||
color: $color-link;
|
||||
background-color: $color-white-alpha-70;
|
||||
&:hover {
|
||||
background-color: $color-white;
|
||||
}
|
||||
}
|
||||
@include dark-theme {
|
||||
border-top-color: rgba(255, 255, 255, 0.25);
|
||||
color: $color-white;
|
||||
background-color: rgba($color-white, 0.07);
|
||||
&:hover {
|
||||
background-color: rgba($color-white, 0.17);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -7554,19 +7643,7 @@ button.module-image__border-overlay:focus {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-inline-end: 12px;
|
||||
background: #e5e5fe;
|
||||
@include rounded-corners();
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
@include color-svg(
|
||||
'../images/icons/v3/video/video-display-bold.svg',
|
||||
#5151f6
|
||||
);
|
||||
}
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,18 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
// Note: Add language-specific fallbacks in @localized-fonts mixin
|
||||
$inter: Inter, 'Source Sans Pro', 'Source Han Sans', -apple-system, system-ui,
|
||||
'Segoe UI', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
$inter:
|
||||
Inter,
|
||||
'Source Sans Pro',
|
||||
'Source Han Sans',
|
||||
-apple-system,
|
||||
system-ui,
|
||||
'Segoe UI',
|
||||
'Noto Sans',
|
||||
'Helvetica Neue',
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif;
|
||||
|
||||
// Note: This font-family is checked for in matchMonospace, to support paste scenarios
|
||||
$monospace: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo,
|
||||
|
|
@ -70,6 +80,7 @@ $color-ultramarine-light: #6191f3;
|
|||
$color-ultramarine-dawn: #406ec9;
|
||||
$color-ultramarine-pastel: #abc4f8;
|
||||
$color-ultramarine: #2c6bed;
|
||||
$color-link: #315ff4;
|
||||
|
||||
// Flat colors
|
||||
|
||||
|
|
@ -259,6 +270,9 @@ $ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
|
|||
|
||||
$calling-background-color: $color-gray-90;
|
||||
|
||||
// Maintain aspect ratio 960x720 with $local-preview-height
|
||||
$calling-local-preview-width: 106.67px;
|
||||
|
||||
// General
|
||||
|
||||
$z-index-negative: -1;
|
||||
|
|
|
|||
|
|
@ -97,12 +97,17 @@
|
|||
&--about {
|
||||
@include about-modal-icon('../images/icons/v3/edit/edit.svg');
|
||||
}
|
||||
|
||||
&--note {
|
||||
@include about-modal-icon('../images/icons/v3/note/note.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&__signal-connection {
|
||||
&__button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
|
||||
@include button-reset();
|
||||
cursor: pointer;
|
||||
|
|
@ -112,6 +117,7 @@
|
|||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
flex-shrink: 0;
|
||||
|
||||
@include color-svg(
|
||||
'../images/icons/v3/chevron/chevron-right-bold.svg',
|
||||
|
|
@ -125,3 +131,17 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.AboutContactModal__TitleWithoutNickname {
|
||||
color: $color-gray-45;
|
||||
}
|
||||
|
||||
.AboutContactModal__OneLineEllipsis {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.AboutContactModal__TitleWithoutNickname__Tooltip {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
display: inline-flex;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
|
||||
|
|
|
|||
|
|
@ -53,7 +53,9 @@
|
|||
background: $color-gray-02;
|
||||
border-radius: 100%;
|
||||
bottom: 4px;
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
box-shadow:
|
||||
0px 4px 16px rgba(0, 0, 0, 0.12),
|
||||
0px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
height: 28px;
|
||||
justify-content: center;
|
||||
|
|
@ -75,7 +77,9 @@
|
|||
align-items: center;
|
||||
background-color: $color-white;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
box-shadow:
|
||||
0px 4px 16px rgba(0, 0, 0, 0.12),
|
||||
0px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
height: 24px;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -60,7 +60,9 @@
|
|||
align-items: center;
|
||||
background-color: $color-white;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
box-shadow:
|
||||
0px 4px 16px rgba(0, 0, 0, 0.12),
|
||||
0px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
display: none;
|
||||
height: 20px;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@
|
|||
.module-Button {
|
||||
@mixin focus-box-shadow($inner-color, $outer-color) {
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 1px $inner-color, 0 0 0 4px $outer-color;
|
||||
box-shadow:
|
||||
0 0 0 1px $inner-color,
|
||||
0 0 0 4px $outer-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -97,7 +97,9 @@
|
|||
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 1px $color-gray-80, 0 0 0 3px $color-ultramarine !important;
|
||||
box-shadow:
|
||||
0 0 0 1px $color-gray-80,
|
||||
0 0 0 3px $color-ultramarine !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -110,14 +112,8 @@
|
|||
margin-block: -5px;
|
||||
}
|
||||
|
||||
.CallControls__ReactButtonContainer--menu-shown .module-tooltip {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.CallControls__OuterSpacer {
|
||||
// Defined in _modules but duplicated here for ease of refactor
|
||||
$local-preview-width: 108px;
|
||||
flex-basis: calc($local-preview-width + 16px);
|
||||
flex-basis: calc($calling-local-preview-width + 16px);
|
||||
}
|
||||
|
||||
.CallControls__ReactionPickerContainer {
|
||||
|
|
|
|||
16
stylesheets/components/CallLinkAddNameModal.scss
Normal file
16
stylesheets/components/CallLinkAddNameModal.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
// Copyright 2024 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.CallLinkAddNameModal__Row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.CallLinkAddNameModal__SrOnly {
|
||||
@include sr-only;
|
||||
}
|
||||
|
||||
// Overriding the default styles for the input container
|
||||
.CallLinkAddNameModal__Input__container.Input__container {
|
||||
flex: 1;
|
||||
}
|
||||
47
stylesheets/components/CallLinkDetails.scss
Normal file
47
stylesheets/components/CallLinkDetails.scss
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
// Copyright 2024 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.CallLinkDetails__Container {
|
||||
max-width: 750px;
|
||||
margin-block: 0;
|
||||
margin-inline: auto;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.CallLinkDetails__Header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.CallLinkDetails__HeaderAvatar,
|
||||
.CallLinkDetails__HeaderActions {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.CallLinkDetails__HeaderDetails {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.CallLinkDetails__HeaderTitle {
|
||||
margin: 0;
|
||||
@include font-title-medium;
|
||||
}
|
||||
|
||||
.CallLinkDetails__HeaderDescription {
|
||||
margin: 0;
|
||||
user-select: text;
|
||||
@include font-body-1;
|
||||
@include light-theme {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-25;
|
||||
}
|
||||
}
|
||||
|
||||
.CallLinkDetails__HeaderButton {
|
||||
font-weight: 600;
|
||||
}
|
||||
162
stylesheets/components/CallLinkEditModal.scss
Normal file
162
stylesheets/components/CallLinkEditModal.scss
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
// Copyright 2024 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
// Overriding default style
|
||||
.module-Modal__body.CallLinkEditModal__body {
|
||||
padding-inline: 12px 3px;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.CallLinkEditModal__SrOnly {
|
||||
@include sr-only;
|
||||
}
|
||||
|
||||
.CallLinkEditModal__Header {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.CallLinkEditModal__Header__Details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
min-width: 0; // fix overflow issue
|
||||
}
|
||||
|
||||
.CallLinkEditModal__Header__Title {
|
||||
@include font-body-1-bold;
|
||||
}
|
||||
|
||||
.CallLinkEditModal__Header__CallLinkButton {
|
||||
@include button-reset;
|
||||
@include font-subtitle;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-25;
|
||||
}
|
||||
}
|
||||
|
||||
.CallLinkEditModal__Header__CallLinkButton__Text {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.CallLinkEditModal__Header__Actions {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.CallLinkEditModal__JoinButton {
|
||||
@include font-body-1-bold;
|
||||
}
|
||||
|
||||
.CallLinkEditModal__Row {
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.CallLinkEditModal__RowButton {
|
||||
@include button-reset;
|
||||
width: 100%;
|
||||
padding-block: 1px;
|
||||
|
||||
.CallLinkEditModal__Row {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.CallLinkEditModal__Row {
|
||||
@include light-theme {
|
||||
background: $color-gray-02;
|
||||
}
|
||||
@include dark-theme {
|
||||
background: $color-gray-75;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.CallLinkEditModal__Row--Button {
|
||||
@include font-body-2;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-black;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-15;
|
||||
}
|
||||
}
|
||||
|
||||
.CallLinkEditModal__RowLabel {
|
||||
@include font-body-1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.CallLinkEditModal__RowIcon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin CallLinkEditModal__RowIcon($iconPath) {
|
||||
&::after {
|
||||
@include light-theme {
|
||||
@include color-svg($iconPath, $color-gray-75);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg($iconPath, $color-gray-15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.CallLinkEditModal__RowIcon--Edit {
|
||||
@include CallLinkEditModal__RowIcon('../images/icons/v3/edit/edit.svg');
|
||||
}
|
||||
|
||||
.CallLinkEditModal__RowIcon--Approve {
|
||||
@include CallLinkEditModal__RowIcon(
|
||||
'../images/icons/v3/person/person-check-compact.svg'
|
||||
);
|
||||
}
|
||||
|
||||
.CallLinkEditModal__RowIcon--Copy {
|
||||
@include CallLinkEditModal__RowIcon('../images/icons/v3/copy/copy.svg');
|
||||
}
|
||||
|
||||
.CallLinkEditModal__RowIcon--Share {
|
||||
@include CallLinkEditModal__RowIcon('../images/icons/v3/forward/forward.svg');
|
||||
}
|
||||
|
||||
.CallLinkEditModal__Hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background: $color-black-alpha-12;
|
||||
}
|
||||
7
stylesheets/components/CallLinkRestrictionsSelect.scss
Normal file
7
stylesheets/components/CallLinkRestrictionsSelect.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
// Copyright 2024 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
// Overriding default style
|
||||
.CallLinkRestrictionsSelect.module-select select {
|
||||
min-width: 0;
|
||||
}
|
||||
|
|
@ -2,23 +2,32 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.CallingAdhocCallInfo {
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
width: 360px;
|
||||
height: auto;
|
||||
margin-block-end: auto;
|
||||
padding-block-end: 16px;
|
||||
overflow: auto;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.CallingAdhocCallInfo__width-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 360px;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: auto;
|
||||
padding-block: 1px;
|
||||
padding-inline: 1px;
|
||||
margin-block-end: 102px;
|
||||
margin-inline-start: 90px;
|
||||
padding-inline-start: 15px;
|
||||
margin-block-end: 80px;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.CallingAdhocCallInfo__width-container::after {
|
||||
content: '';
|
||||
display: flex;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 480px;
|
||||
}
|
||||
|
||||
.CallingAdhocCallInfo__overlay {
|
||||
|
|
@ -29,11 +38,6 @@
|
|||
flex-direction: column;
|
||||
padding: 0;
|
||||
justify-content: flex-end;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.CallingAdhocCallInfo__Overlay {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.CallingAdhocCallInfo__MenuItem {
|
||||
|
|
@ -48,10 +52,10 @@
|
|||
.CallingAdhocCallInfo__MenuItemIcon {
|
||||
background: $color-gray-65;
|
||||
display: flex;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-inline-end: 8px;
|
||||
border-radius: 32px;
|
||||
border-radius: 36px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -81,3 +85,59 @@
|
|||
margin-inline: 10px;
|
||||
border: 1px solid $color-gray-65;
|
||||
}
|
||||
|
||||
.CallingAdhocCallInfo__RemoveClient {
|
||||
@include button-reset;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-inline: 8px;
|
||||
background: $color-white;
|
||||
}
|
||||
|
||||
.CallingAdhocCallInfo__UnknownContactInfoButton {
|
||||
@include button-reset;
|
||||
@include color-svg('../images/icons/v3/info/info.svg', $color-white);
|
||||
display: flex;
|
||||
flex: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-inline: 8px;
|
||||
}
|
||||
|
||||
.CallingAdhocCallInfo__UnknownContactInfoButton:focus {
|
||||
@include keyboard-mode {
|
||||
background: $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
.CallingAdhocCallInfo__UnknownContactInfoDialog__body {
|
||||
padding-block-start: 22px;
|
||||
padding-block-end: 8px;
|
||||
}
|
||||
|
||||
.CallingAdhocCallInfo__UnknownContactAvatarSet {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.CallingAdhocCallInfo__UnknownContactAvatar {
|
||||
&:not(:first-child) {
|
||||
margin-inline-start: -24px;
|
||||
}
|
||||
|
||||
.module-Avatar__contents {
|
||||
outline: 2px solid;
|
||||
outline-color: $color-gray-80;
|
||||
}
|
||||
}
|
||||
|
||||
.CallingAdhocCallInfo
|
||||
.module-calling-participants-list__contact:hover
|
||||
.CallingAdhocCallInfo__UnknownContactAvatar
|
||||
.module-Avatar__contents {
|
||||
// Should match background of .module-calling-participants-list__contact:hover
|
||||
outline-color: $color-gray-62;
|
||||
}
|
||||
|
||||
.CallingAdhocCallInfo__RemoveClientDialog {
|
||||
width: 440px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -147,7 +147,9 @@
|
|||
max-width: 64px;
|
||||
margin-inline: 10px;
|
||||
|
||||
transition: margin-inline-start 0.3s ease-out, opacity 0.3s ease-out;
|
||||
transition:
|
||||
margin-inline-start 0.3s ease-out,
|
||||
opacity 0.3s ease-out;
|
||||
@media (prefers-reduced-motion) {
|
||||
transition: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,9 +46,19 @@
|
|||
background: $color-black-alpha-60;
|
||||
color: $color-white;
|
||||
border-radius: 10px;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.CallingLobby__CallLinkNotice--join-request-pending {
|
||||
@include font-body-1;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.CallingLobby__CallLinkJoinRequestPendingSpinner {
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.CallingLobby__Footer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
|
|||
130
stylesheets/components/CallingPendingParticipants.scss
Normal file
130
stylesheets/components/CallingPendingParticipants.scss
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
// Copyright 2024 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.CallingPendingParticipants {
|
||||
width: 420px;
|
||||
height: auto;
|
||||
margin-block-start: auto;
|
||||
margin-block-end: 36px;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
|
||||
.CallingPendingParticipants--Compact {
|
||||
width: 364px;
|
||||
padding-inline: 0;
|
||||
padding-block-start: 0;
|
||||
background: $color-gray-78;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.CallingPendingParticipants--Expanded {
|
||||
padding-block-end: 2px;
|
||||
}
|
||||
|
||||
.CallingPendingParticipants__CompactParticipant {
|
||||
display: flex;
|
||||
padding-block: 12px;
|
||||
padding-inline: 12px;
|
||||
outline: none;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.CallingPendingParticipants__CompactParticipantNameColumn {
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
|
||||
.CallingPendingParticipants__ParticipantName {
|
||||
@include font-body-1-bold;
|
||||
color: $color-gray-15;
|
||||
}
|
||||
|
||||
.CallingPendingParticipants__WouldLikeToJoin {
|
||||
@include font-body-2;
|
||||
color: $color-gray-20;
|
||||
}
|
||||
|
||||
.CallingPendingParticipants__PendingActionButton {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex-shrink: 0;
|
||||
padding-inline: 0;
|
||||
margin-inline-end: 16px;
|
||||
}
|
||||
|
||||
.CallingPendingParticipants__PendingActionButton:first-child {
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
|
||||
.CallingPendingParticipants__PendingActionButton:last-child {
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.CallingPendingParticipants__PendingActionButtonIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.CallingPendingParticipants--Compact {
|
||||
.CallingPendingParticipants__PendingActionButton {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-inline-end: 20px;
|
||||
}
|
||||
|
||||
.CallingPendingParticipants__PendingActionButton:last-child {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
.CallingPendingParticipants__PendingActionButtonIcon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.CallingPendingParticipants__PendingActionButtonIcon--Approve {
|
||||
@include color-svg('../images/icons/v3/check/check-bold.svg', $color-white);
|
||||
}
|
||||
|
||||
.CallingPendingParticipants__PendingActionButtonIcon--Deny {
|
||||
@include color-svg('../images/icons/v3/x/x-bold.svg', $color-white);
|
||||
}
|
||||
|
||||
.CallingPendingParticipants__ActionPanel {
|
||||
padding-block: 15px;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.CallingPendingParticipants__ActionPanelButton {
|
||||
border-radius: 4px;
|
||||
margin-inline-end: 16px;
|
||||
}
|
||||
|
||||
.CallingPendingParticipants__ActionPanelButton:last-child {
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
.CallingPendingParticipants__ShowAllRequestsButton {
|
||||
@include button-reset;
|
||||
@include font-body-2-bold;
|
||||
display: flex;
|
||||
padding-block: 5px;
|
||||
padding-inline: 15px;
|
||||
margin-block: 12px;
|
||||
margin-inline: auto;
|
||||
color: $color-white-alpha-90;
|
||||
background: $color-gray-65;
|
||||
border-radius: 46px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.CallingPendingParticipants__ShowAllRequestsButton:focus {
|
||||
@include keyboard-mode {
|
||||
outline: 3px solid $color-ultramarine;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.CallingPendingParticipants__ShowAllRequestsButtonContainer {
|
||||
background: $color-black-alpha-24;
|
||||
}
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
padding-block: 1px;
|
||||
padding-inline: 1px;
|
||||
// This should be above .CallingRaisedHandsList__Button
|
||||
margin-block-end: 168px;
|
||||
margin-block-end: 72px;
|
||||
margin-inline-start: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -36,17 +36,25 @@
|
|||
align-items: start;
|
||||
}
|
||||
|
||||
.CallingRaisedHandsList__TitleHint {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.CallingRaisedHandsList .module-calling-participants-list__contact:last-child {
|
||||
margin-block-end: 4px;
|
||||
}
|
||||
|
||||
.CallingRaisedHandsList__Button {
|
||||
@include button-reset;
|
||||
position: absolute;
|
||||
inset-inline-start: 16px;
|
||||
inset-block-end: calc($CallControls__height + 32px);
|
||||
inset-block-end: 16px;
|
||||
display: flex;
|
||||
padding-block: 14px;
|
||||
padding-inline: 12px;
|
||||
background: $color-gray-78;
|
||||
background: $color-white;
|
||||
border-radius: 24px;
|
||||
color: $color-white;
|
||||
color: $color-black;
|
||||
font-size: 14px;
|
||||
z-index: $z-index-above-above-base;
|
||||
|
||||
|
|
@ -67,7 +75,7 @@
|
|||
|
||||
@include color-svg(
|
||||
'../images/icons/v3/raise_hand/raise_hand-light.svg',
|
||||
$color-gray-15
|
||||
$color-black
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,15 +8,6 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
// Reactions appear in the same space as the Raised Hands button. When they are both
|
||||
// present then move Reactions up.
|
||||
.CallingRaisedHandsList__Button + .CallingReactionsToasts,
|
||||
.CallingRaisedHandsList__Button
|
||||
+ .CallingReactionsToasts
|
||||
+ .CallingReactionsBurstToasts {
|
||||
inset-block-end: calc($CallControls__height + 100px);
|
||||
}
|
||||
|
||||
// Normally the newest toasts are appended on top, like this:
|
||||
// | Second |
|
||||
// | First | -> | First |
|
||||
|
|
|
|||
|
|
@ -2,11 +2,14 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.module-CallingScreenSharingController {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-block: 9vh;
|
||||
padding-inline: 3.3vw;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-block: 4px;
|
||||
padding-inline: 16px;
|
||||
@include draggable-region;
|
||||
|
||||
&__text {
|
||||
|
|
@ -15,26 +18,32 @@
|
|||
text-overflow: ellipsis;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
width: 350px;
|
||||
width: 73vw;
|
||||
}
|
||||
|
||||
&__button {
|
||||
height: 82vh;
|
||||
padding-block: 18vh;
|
||||
padding-inline: 3.5vw;
|
||||
line-height: 45.5vh;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-inline-start: 6px;
|
||||
margin-inline-start: 1.25vw;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
&__close {
|
||||
@include button-reset;
|
||||
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-25);
|
||||
width: 4.5vw;
|
||||
height: 45.5vh;
|
||||
margin-inline-start: 2.5vw;
|
||||
cursor: pointer;
|
||||
margin-inline-start: 12px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -104,6 +104,7 @@
|
|||
@include button-reset;
|
||||
flex-shrink: 0;
|
||||
padding: 4px;
|
||||
margin-inline-end: 8px;
|
||||
border-radius: 4px;
|
||||
|
||||
&:not(.CallsList__ToggleFilterByMissed--pressed):hover {
|
||||
|
|
@ -118,7 +119,9 @@
|
|||
&:focus {
|
||||
outline: none;
|
||||
@include keyboard-mode {
|
||||
box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-ultramarine;
|
||||
box-shadow:
|
||||
0 0 0 2px $color-white,
|
||||
0 0 0 4px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -160,7 +163,7 @@
|
|||
@include NavTabs__Scroller;
|
||||
}
|
||||
|
||||
.CallsList__List--loading {
|
||||
.CallsList__List--disableScrolling {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
|
|
@ -232,7 +235,8 @@
|
|||
}
|
||||
|
||||
// Override .ListTile__subtitle so ellipsis is correct color
|
||||
.CallsList__Item--missed .ListTile__subtitle {
|
||||
.CallsList__Item--missed .ListTile__subtitle,
|
||||
.CallsList__Item--declined .ListTile__subtitle {
|
||||
// Need to override the themed selector specificity of .ListTile__subtitle
|
||||
@include light-theme {
|
||||
color: $color-accent-red;
|
||||
|
|
@ -322,6 +326,65 @@
|
|||
}
|
||||
}
|
||||
|
||||
.CallsNewCall__ItemActionButton--join-call {
|
||||
$background: $color-accent-green;
|
||||
|
||||
@include font-body-2-bold;
|
||||
@include rounded-corners;
|
||||
|
||||
display: flex;
|
||||
width: auto;
|
||||
height: 26px;
|
||||
padding-block: 4px;
|
||||
padding-inline: 10px;
|
||||
align-items: center;
|
||||
background-color: $background;
|
||||
color: $color-white;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
|
||||
&:before {
|
||||
$icon-size: 16px;
|
||||
|
||||
@include color-svg(
|
||||
'../images/icons/v3/video/video-compact-fill.svg',
|
||||
$color-white
|
||||
);
|
||||
content: '';
|
||||
display: block;
|
||||
height: $icon-size;
|
||||
margin-inline-end: 4px;
|
||||
min-width: $icon-size;
|
||||
width: $icon-size;
|
||||
}
|
||||
|
||||
&:not(:disabled) {
|
||||
&:hover {
|
||||
@include any-theme {
|
||||
background-color: darken($background, 16%);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include keyboard-mode {
|
||||
background-color: darken($background, 16%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.CallsNewCall__ItemActionButton--join-call-disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.CallsNewCall__ItemActionButtonTooltip {
|
||||
@include tooltip;
|
||||
max-width: 212px;
|
||||
}
|
||||
|
||||
.CallsNewCall__ItemIcon {
|
||||
display: block;
|
||||
width: 20px;
|
||||
|
|
|
|||
|
|
@ -82,6 +82,9 @@
|
|||
&::before {
|
||||
@include color-svg('../images/icons/v3/check/check.svg', $color-white);
|
||||
}
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -98,11 +98,16 @@
|
|||
}
|
||||
|
||||
&--large {
|
||||
max-height: calc(212px - 2 * $border-size);
|
||||
min-height: calc(212px - 2 * $border-size);
|
||||
$largeHeight: calc(212px - 2 * $border-size);
|
||||
$largeHeightContentBox: calc($largeHeight - 2 * $padding-top);
|
||||
|
||||
// Explicit height needed to allow `height: 100%` on children
|
||||
height: $largeHeight;
|
||||
max-height: $largeHeight;
|
||||
min-height: $largeHeight;
|
||||
|
||||
.DraftEditor-root {
|
||||
height: calc(212px - 2 * $padding-top - 2 * $border-size);
|
||||
height: $largeHeightContentBox;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -135,7 +140,9 @@
|
|||
transition: opacity ease 200ms;
|
||||
|
||||
// The same box-shadow in popper-shadow mixin, just halved
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 30%), 0px 0px 4px rgba(0, 0, 0, 5%);
|
||||
box-shadow:
|
||||
0px 4px 10px rgba(0, 0, 0, 30%),
|
||||
0px 0px 4px rgba(0, 0, 0, 5%);
|
||||
|
||||
@include light-theme() {
|
||||
background: $color-white;
|
||||
|
|
|
|||
|
|
@ -121,3 +121,9 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ContactListItem__contact-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: currentColor;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,14 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__name__contact-icon {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
@include any-theme {
|
||||
background-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
&__name__chevron {
|
||||
flex-shrink: 0;
|
||||
|
||||
|
|
@ -107,6 +115,19 @@
|
|||
width: 20px;
|
||||
}
|
||||
|
||||
&__nickname__bubble-icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
@include light-theme {
|
||||
@include color-svg('../images/icons/v3/edit/edit.svg', $color-gray-75);
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
@include color-svg('../images/icons/v3/edit/edit.svg', $color-gray-15);
|
||||
}
|
||||
}
|
||||
|
||||
&__send-message__bubble-icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
|
@ -288,4 +309,8 @@
|
|||
|
||||
margin-block: 8px 5px;
|
||||
}
|
||||
|
||||
&__tooltip {
|
||||
@include tooltip;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -153,6 +153,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
&--approveAllMembers {
|
||||
&::after {
|
||||
@include details-icon(
|
||||
'../images/icons/v3/person/person-check-compact.svg'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&--link {
|
||||
&::after {
|
||||
@include details-icon('../images/icons/v3/link/link.svg');
|
||||
|
|
@ -189,6 +197,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
&--forward {
|
||||
&::after {
|
||||
@include details-icon('../images/icons/v3/forward/forward.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&--down {
|
||||
border-radius: 18px;
|
||||
@include light-theme {
|
||||
|
|
@ -486,6 +500,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
.ConversationDetails__CallHistoryGroup__ItemIcon--Adhoc {
|
||||
@include light-theme {
|
||||
@include color-svg('../images/icons/v3/link/link.svg', $color-black);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg('../images/icons/v3/link/link.svg', $color-gray-15);
|
||||
}
|
||||
}
|
||||
|
||||
.ConversationDetails__CallHistoryGroup__ItemLabel {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -493,3 +516,42 @@
|
|||
.ConversationDetails__CallHistoryGroup__ItemTimestamp {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ConversationDetails--nickname-actions {
|
||||
@include button-reset;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
&::before {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@include light-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v3/chevron/chevron-down.svg',
|
||||
$color-black
|
||||
);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v3/chevron/chevron-down.svg',
|
||||
$color-white
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ConversationDetails--nickname-actions-label {
|
||||
@include sr-only;
|
||||
}
|
||||
|
||||
.ConversationDetails--nickname-actions--delete {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
@include light-theme {
|
||||
@include color-svg('../images/icons/v3/trash/trash.svg', $color-black);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg('../images/icons/v3/trash/trash.svg', $color-white);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,14 +21,17 @@
|
|||
&__title {
|
||||
@include font-title-1;
|
||||
font-weight: 400;
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: 8px;
|
||||
padding-top: 12px;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
&__title-contact-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
@include font-body-1;
|
||||
color: $color-gray-60;
|
||||
|
|
@ -50,6 +53,8 @@
|
|||
&::after {
|
||||
$size: 24px;
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
content: '';
|
||||
height: $size;
|
||||
inset-inline-start: $size + 13px;
|
||||
|
|
|
|||
|
|
@ -156,7 +156,9 @@
|
|||
margin-inline-end: var(--button-spacing);
|
||||
min-width: $icon-size;
|
||||
padding: 2px;
|
||||
transition: margin-inline-end 200ms ease-out, opacity 200ms ease-out,
|
||||
transition:
|
||||
margin-inline-end 200ms ease-out,
|
||||
opacity 200ms ease-out,
|
||||
background 100ms ease-out;
|
||||
width: $icon-size;
|
||||
|
||||
|
|
|
|||
|
|
@ -92,6 +92,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
&__safety-tips-button {
|
||||
border-radius: 9999px;
|
||||
padding-block: 6px;
|
||||
padding-inline: 14px;
|
||||
margin-top: 12px;
|
||||
@include font-subtitle;
|
||||
}
|
||||
|
||||
&__membership {
|
||||
@include font-body-2;
|
||||
user-select: none;
|
||||
|
|
|
|||
27
stylesheets/components/EditNicknameAndNoteModal.scss
Normal file
27
stylesheets/components/EditNicknameAndNoteModal.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
// Copyright 2024 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.EditNicknameAndNoteModal__width-container {
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.EditNicknameAndNoteModal__Description {
|
||||
margin-block: 12px 24px;
|
||||
@include font-body-2;
|
||||
@include light-theme {
|
||||
color: $color-gray-75;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-25;
|
||||
}
|
||||
}
|
||||
|
||||
.EditNicknameAndNoteModal__Avatar {
|
||||
margin-block: 0 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.EditNicknameAndNoteModal__Label {
|
||||
@include sr-only;
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
border-radius: 8px;
|
||||
margin-block: 0;
|
||||
margin-inline: auto;
|
||||
max-height: 100%;
|
||||
max-height: 80vh;
|
||||
max-width: 360px;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -34,3 +34,47 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Inbox__logo {
|
||||
flex-shrink: 0;
|
||||
|
||||
display: block;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin-block: 24px;
|
||||
position: relative;
|
||||
|
||||
.Inbox__logo__part {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.Inbox__logo__part--base {
|
||||
@include color-svg('../images/logo-parts/base.svg', $color-white);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.Inbox__logo__part--segment {
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.Inbox__logo__part--animated {
|
||||
transition:
|
||||
opacity 250ms,
|
||||
transform 250ms;
|
||||
}
|
||||
|
||||
@for $i from 1 through 16 {
|
||||
.Inbox__logo__part--segment:nth-child(#{$i + 1}) {
|
||||
@include color-svg('../images/logo-parts/p#{$i}.svg', $color-white);
|
||||
transform: rotate(#{(16 - $i) * 22.5}deg);
|
||||
}
|
||||
}
|
||||
|
||||
.Inbox__logo__part--segment:nth-child(n).Inbox__logo__part--visible {
|
||||
transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@
|
|||
height: 280px;
|
||||
}
|
||||
|
||||
&--expandable {
|
||||
&--textarea {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -129,5 +129,9 @@
|
|||
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
&--warn {
|
||||
color: $color-accent-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
$size: 256px;
|
||||
|
||||
align-items: center;
|
||||
border: 2px solid transparent;
|
||||
border: 1.5px solid transparent;
|
||||
box-sizing: content-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -51,13 +51,31 @@
|
|||
&--load-failed {
|
||||
@include font-subtitle;
|
||||
border-color: $color-gray-05;
|
||||
border-radius: 4px;
|
||||
border-radius: 10px;
|
||||
color: $color-gray-60;
|
||||
}
|
||||
|
||||
&__link {
|
||||
@include button-reset;
|
||||
@include font-body-2-bold;
|
||||
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
|
||||
color: $color-ultramarine;
|
||||
margin-block-start: 16px;
|
||||
|
||||
&::before {
|
||||
@include color-svg(
|
||||
'../images/icons/v3/refresh/refresh-bold.svg',
|
||||
$color-ultramarine
|
||||
);
|
||||
content: '';
|
||||
display: block;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__code {
|
||||
|
|
@ -69,6 +87,7 @@
|
|||
|
||||
&__error-message {
|
||||
text-align: center;
|
||||
@include font-body-2;
|
||||
|
||||
&::before {
|
||||
@include color-svg(
|
||||
|
|
@ -78,14 +97,39 @@
|
|||
content: '';
|
||||
display: block;
|
||||
height: 22px;
|
||||
margin-block: 8px 0;
|
||||
margin-block: 0 8px;
|
||||
margin-inline: auto;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-ultramarine;
|
||||
text-decoration: none;
|
||||
margin-inline: 24px;
|
||||
}
|
||||
|
||||
&__error-message p {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
&__get-help {
|
||||
@include font-body-2-bold;
|
||||
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
|
||||
margin-block-start: 16px;
|
||||
|
||||
color: $color-ultramarine;
|
||||
text-decoration: none;
|
||||
|
||||
&::before {
|
||||
@include color-svg(
|
||||
'../images/icons/v3/open/open-compact-bold.svg',
|
||||
$color-ultramarine
|
||||
);
|
||||
content: '';
|
||||
display: block;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -101,25 +145,6 @@
|
|||
// We want the right link color in dark mode. This is a no-op in light mode.
|
||||
color: $color-ultramarine;
|
||||
}
|
||||
|
||||
&__android-plus {
|
||||
background: $color-gray-25;
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
vertical-align: middle;
|
||||
|
||||
&::before {
|
||||
@include color-svg(
|
||||
'../images/icons/v3/plus/plus-compact.svg',
|
||||
$color-white
|
||||
);
|
||||
content: '';
|
||||
display: block;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes module-InstallScreenQrCodeNotScannedStep__slide-in {
|
||||
|
|
|
|||
|
|
@ -107,6 +107,11 @@
|
|||
-webkit-mask: url('../images/icons/v3/error/error-triangle.svg') no-repeat
|
||||
center;
|
||||
}
|
||||
|
||||
&--error {
|
||||
-webkit-mask: url('../images/icons/v3/error/error-circle.svg') no-repeat
|
||||
center;
|
||||
}
|
||||
}
|
||||
|
||||
&__action-text {
|
||||
|
|
|
|||
35
stylesheets/components/LocalDeleteWarningModal.scss
Normal file
35
stylesheets/components/LocalDeleteWarningModal.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
// Copyright 2022 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.LocalDeleteWarningModal__width-container {
|
||||
max-width: 440px;
|
||||
}
|
||||
|
||||
.LocalDeleteWarningModal__image {
|
||||
margin-block: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.LocalDeleteWarningModal__header {
|
||||
@include font-title-2;
|
||||
|
||||
margin-block: 18px;
|
||||
margin-inline: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.LocalDeleteWarningModal__description {
|
||||
margin-block: 12px;
|
||||
margin-inline: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.LocalDeleteWarningModal__button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 49px;
|
||||
|
||||
button {
|
||||
padding-inline: 26px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.MessageRequestActionsConfirmation__ModalHost__width-container {
|
||||
min-width: 480px;
|
||||
}
|
||||
|
|
@ -17,7 +17,9 @@
|
|||
align-items: center;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
box-shadow: 0 1px 4px $color-black-alpha-05, 0 10px 16px $color-black-alpha-20;
|
||||
box-shadow:
|
||||
0 1px 4px $color-black-alpha-05,
|
||||
0 10px 16px $color-black-alpha-20;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
padding-block: 3px;
|
||||
|
|
|
|||
224
stylesheets/components/SafetyTipsModal.scss
Normal file
224
stylesheets/components/SafetyTipsModal.scss
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
// Copyright 2024 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
$SafetyTipsModal__paddingInline: 32px;
|
||||
$SafetyTipsModal__paddingBlock: 24px;
|
||||
|
||||
.SafetyTipsModal {
|
||||
.module-Modal__headerTitle {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.module-Modal__title {
|
||||
padding-top: 20px;
|
||||
@include font-title-1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.module-Modal__body {
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.module-Modal__button-footer {
|
||||
padding-block: $SafetyTipsModal__paddingBlock;
|
||||
padding-inline: $SafetyTipsModal__paddingInline;
|
||||
}
|
||||
}
|
||||
|
||||
.SafetyTipsModal__width-container {
|
||||
max-width: 420px;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.SafetyTipsModal__Description {
|
||||
margin: 0;
|
||||
padding-inline: $SafetyTipsModal__paddingInline;
|
||||
padding-bottom: 24px;
|
||||
text-align: center;
|
||||
@include font-body-1;
|
||||
@include light-theme {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-25;
|
||||
}
|
||||
}
|
||||
|
||||
.SafetyTipsModal__Footer {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.SafetyTipsModal__Button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.SafetyTipsModal__Button--Previous {
|
||||
&,
|
||||
&:is(:disabled, [aria-disabled='true']) {
|
||||
@include any-theme {
|
||||
background: transparent;
|
||||
}
|
||||
@include light-theme {
|
||||
color: $color-accent-blue;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
&:is(:disabled, [aria-disabled='true']) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:not(:disabled):not([aria-disabled='true']) {
|
||||
&:hover,
|
||||
&:focus {
|
||||
@include light-theme {
|
||||
background: $color-gray-15;
|
||||
}
|
||||
@include dark-theme {
|
||||
background: $color-gray-65;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include light-theme {
|
||||
background: $color-gray-20;
|
||||
}
|
||||
@include dark-theme {
|
||||
background: $color-gray-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.SafetyTipsModal__CardWrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: $SafetyTipsModal__paddingInline;
|
||||
overflow: hidden;
|
||||
scroll-snap-type: x mandatory;
|
||||
padding-inline: $SafetyTipsModal__paddingInline;
|
||||
}
|
||||
|
||||
.SafetyTipsModal__Card {
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
scroll-snap-align: center;
|
||||
padding-block: 14px 32px;
|
||||
padding-inline: 12px;
|
||||
border-radius: 18px;
|
||||
text-align: center;
|
||||
@include light-theme {
|
||||
background: $color-gray-02;
|
||||
}
|
||||
@include dark-theme {
|
||||
background: $color-gray-75;
|
||||
}
|
||||
}
|
||||
|
||||
.SafetyTipsModal__CardImage {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
vertical-align: top;
|
||||
border-radius: 12px;
|
||||
@include light-theme {
|
||||
background: white;
|
||||
}
|
||||
@include dark-theme {
|
||||
background: $color-gray-65;
|
||||
}
|
||||
}
|
||||
|
||||
.SafetyTipsModal__CardTitle {
|
||||
margin-block: 14px 0;
|
||||
@include font-title-2;
|
||||
@include light-theme {
|
||||
color: $color-gray-90;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
}
|
||||
|
||||
.SafetyTipsModal__CardDescription {
|
||||
margin-block: 8px 0;
|
||||
@include font-body-1;
|
||||
@include light-theme {
|
||||
color: $color-gray-62;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
.SafetyTipsModal__Dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-block: 24px 20px;
|
||||
}
|
||||
|
||||
.SafetyTipsModal__DotsButton {
|
||||
@include button-reset;
|
||||
padding: 4px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 9999px;
|
||||
transition: background 100ms ease;
|
||||
@include light-theme {
|
||||
background: rgba($color-black, 30%);
|
||||
}
|
||||
@include dark-theme {
|
||||
background: rgba($color-white, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
&:not([aria-current]) {
|
||||
&:hover,
|
||||
&:focus {
|
||||
&::before {
|
||||
@include light-theme {
|
||||
background: rgba($color-black, 45%);
|
||||
}
|
||||
@include dark-theme {
|
||||
background: rgba($color-white, 45%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-current]::before {
|
||||
@include light-theme {
|
||||
background: $color-black;
|
||||
}
|
||||
@include dark-theme {
|
||||
background: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include keyboard-mode {
|
||||
&::before {
|
||||
box-shadow:
|
||||
0 0 0 2px $color-white,
|
||||
0 0 0 4px $color-accent-blue;
|
||||
}
|
||||
}
|
||||
@include dark-keyboard-mode {
|
||||
&::before {
|
||||
box-shadow:
|
||||
0 0 0 2px $color-gray-80,
|
||||
0 0 0 4px $color-accent-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.SafetyTipsModal__DotsButtonLabel {
|
||||
@include sr-only;
|
||||
}
|
||||
|
|
@ -14,7 +14,8 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
box-shadow: 0px 0px 2px $color-black-alpha-20,
|
||||
box-shadow:
|
||||
0px 0px 2px $color-black-alpha-20,
|
||||
0px 2px 6px $color-black-alpha-12;
|
||||
|
||||
@include light-theme {
|
||||
|
|
|
|||
33
stylesheets/components/SpinnerV2.scss
Normal file
33
stylesheets/components/SpinnerV2.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
// Copyright 2024 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.SpinnerV2 {
|
||||
animation: SpinnerV2-rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
.SpinnerV2__Path {
|
||||
stroke: $color-gray-15;
|
||||
stroke-linecap: round;
|
||||
animation: SpinnerV2-dash 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes SpinnerV2-rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes SpinnerV2-dash {
|
||||
0% {
|
||||
stroke-dasharray: 2%, 300%;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: 180%, 300%;
|
||||
stroke-dashoffset: -70%;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 180%, 300%;
|
||||
stroke-dashoffset: -248%;
|
||||
}
|
||||
}
|
||||
|
|
@ -43,6 +43,7 @@
|
|||
&__container {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&__story {
|
||||
|
|
|
|||
|
|
@ -3,13 +3,16 @@
|
|||
|
||||
.StoryViewsNRepliesModal {
|
||||
min-width: 320px;
|
||||
min-height: min(400px, 80vh);
|
||||
max-height: 80vh;
|
||||
|
||||
&--group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: min(400px, 80vh);
|
||||
|
||||
.StoryViewsNRepliesModal__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
|
|
@ -29,6 +32,13 @@
|
|||
padding-block-start: 16px;
|
||||
}
|
||||
|
||||
// When picking from full emoji set, compensate for for hidden quick picker
|
||||
&:has(.module-emoji-picker)::before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
padding-block-end: 16px;
|
||||
padding-inline: 16px;
|
||||
}
|
||||
|
|
@ -249,8 +259,9 @@
|
|||
}
|
||||
|
||||
.module-emoji-picker {
|
||||
bottom: 55px;
|
||||
position: absolute;
|
||||
bottom: 55px;
|
||||
max-height: calc(100vh - 100px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -166,6 +166,12 @@
|
|||
@include system-message-icon('../images/icons/v3/refresh/refresh.svg');
|
||||
}
|
||||
|
||||
&--icon-thread::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v3/thread/thread-compact.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--icon-timer::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v3/timer/timer-compact.svg'
|
||||
|
|
@ -241,6 +247,18 @@
|
|||
'../images/icons/v3/merge/merge-compact.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--icon-thread::before {
|
||||
@include system-message-icon('../images/icons/v3/thread/thread.svg');
|
||||
}
|
||||
|
||||
&--icon-spam::before {
|
||||
@include system-message-icon('../images/icons/v3/spam/spam.svg');
|
||||
}
|
||||
|
||||
&--icon-block::before {
|
||||
@include system-message-icon('../images/icons/v3/block/block.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&--error {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,9 @@
|
|||
|
||||
align-items: stretch;
|
||||
border-radius: $border-radius-px;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05), 0px 4px 12px rgba(0, 0, 0, 0.3);
|
||||
box-shadow:
|
||||
0px 0px 4px rgba(0, 0, 0, 0.05),
|
||||
0px 4px 12px rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
user-select: none;
|
||||
|
|
@ -30,7 +32,7 @@
|
|||
}
|
||||
|
||||
.ToastManager--narrow-sidebar & {
|
||||
min-width: max-content;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.ToastManager--narrow-sidebar.ToastManager--composition-area-visible & {
|
||||
|
|
|
|||
|
|
@ -43,3 +43,7 @@
|
|||
// Roughly size of composer + a bit of padding
|
||||
bottom: 40px;
|
||||
}
|
||||
|
||||
.ToastManager--full-screen-call {
|
||||
bottom: calc($CallControls__height + 32px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,9 @@
|
|||
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
transition: height 250ms, background 250ms;
|
||||
transition:
|
||||
height 250ms,
|
||||
background 250ms;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
margin-inline-start: 2px;
|
||||
|
|
|
|||
|
|
@ -45,10 +45,15 @@
|
|||
@import './components/CallControls.scss';
|
||||
@import './components/CallSettingsButton.scss';
|
||||
@import './components/CallingLobby.scss';
|
||||
@import './components/CallingPendingParticipants.scss';
|
||||
@import './components/CallingPreCallInfo.scss';
|
||||
@import './components/CallingScreenSharingController.scss';
|
||||
@import './components/CallingSelectPresentingSourcesModal.scss';
|
||||
@import './components/CallingToast.scss';
|
||||
@import './components/CallLinkAddNameModal.scss';
|
||||
@import './components/CallLinkDetails.scss';
|
||||
@import './components/CallLinkEditModal.scss';
|
||||
@import './components/CallLinkRestrictionsSelect.scss';
|
||||
@import './components/CallingRaisedHandsList.scss';
|
||||
@import './components/CallingRaisedHandsToasts.scss';
|
||||
@import './components/CallingReactionsToasts.scss';
|
||||
|
|
@ -87,6 +92,7 @@
|
|||
@import './components/DisappearingTimerSelect.scss';
|
||||
@import './components/EditConversationAttributesModal.scss';
|
||||
@import './components/EditHistoryMessagesModal.scss';
|
||||
@import './components/EditNicknameAndNoteModal.scss';
|
||||
@import './components/EditUsernameModalBody.scss';
|
||||
@import './components/ForwardMessageModal.scss';
|
||||
@import './components/GradientDial.scss';
|
||||
|
|
@ -110,10 +116,12 @@
|
|||
@import './components/LeftPaneSearchInput.scss';
|
||||
@import './components/Lightbox.scss';
|
||||
@import './components/ListTile.scss';
|
||||
@import './components/LocalDeleteWarningModal.scss';
|
||||
@import './components/MediaEditor.scss';
|
||||
@import './components/MediaQualitySelector.scss';
|
||||
@import './components/MessageAudio.scss';
|
||||
@import './components/MessageBody.scss';
|
||||
@import './components/MessageRequestActionsConfirmation.scss';
|
||||
@import './components/MessageTextRenderer.scss';
|
||||
@import './components/MessageDetail.scss';
|
||||
@import './components/MiniPlayer.scss';
|
||||
|
|
@ -133,6 +141,7 @@
|
|||
@import './components/SafetyNumberChangeDialog.scss';
|
||||
@import './components/SafetyNumberOnboarding.scss';
|
||||
@import './components/SafetyNumberViewer.scss';
|
||||
@import './components/SafetyTipsModal.scss';
|
||||
@import './components/ScrollDownButton.scss';
|
||||
@import './components/SearchInput.scss';
|
||||
@import './components/SearchResultsLoadingFakeHeader.scss';
|
||||
|
|
@ -143,6 +152,7 @@
|
|||
@import './components/ShortcutGuide.scss';
|
||||
@import './components/SignalConnectionsModal.scss';
|
||||
@import './components/Slider.scss';
|
||||
@import './components/SpinnerV2.scss';
|
||||
@import './components/StagedLinkPreview.scss';
|
||||
@import './components/StickerManager.scss';
|
||||
@import './components/Stories.scss';
|
||||
|
|
|
|||
155
stylesheets/webrtc_internals.css
Normal file
155
stylesheets/webrtc_internals.css
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
/* Copyright 2013 The Chromium Authors
|
||||
* Use of this source code is governed by a BSD-style license that can be
|
||||
* found in the LICENSE file. */
|
||||
|
||||
|
||||
.peer-connection-dump-root {
|
||||
font-size: 0.8em;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
.update-log-container {
|
||||
float: left;
|
||||
width: 50em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.update-log-failure {
|
||||
background-color: #be2026;
|
||||
}
|
||||
|
||||
.stats-graph-container {
|
||||
clear: both;
|
||||
margin: 0.5em 0 0.5em 0;
|
||||
}
|
||||
|
||||
.stats-graph-sub-container {
|
||||
float: left;
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
.stats-graph-sub-container > div {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.stats-graph-sub-container > div:first-child {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.stats-table-container {
|
||||
float: left;
|
||||
padding: 0 0 0 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.stats-table-container >div:first-child {
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 0 0 1em 0;
|
||||
}
|
||||
|
||||
.stats-table-active-connection {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Lucida Grande', sans-serif;
|
||||
}
|
||||
|
||||
table {
|
||||
border: none;
|
||||
margin: 0 1em 1em 0;
|
||||
}
|
||||
|
||||
td {
|
||||
border: none;
|
||||
font-size: 0.8em;
|
||||
padding: 0 1em 0.5em 0;
|
||||
min-width: 10em;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
table > tr {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
th {
|
||||
border: none;
|
||||
font-size: 0.8em;
|
||||
padding: 0 0 0.5em 0;
|
||||
}
|
||||
|
||||
.tab-head {
|
||||
background-color: rgb(220, 220, 220);
|
||||
margin: 10px 2px 0 2px;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
width: 20em;
|
||||
height: 3em;
|
||||
}
|
||||
|
||||
.active-tab-head {
|
||||
background-color: turquoise;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tab-body {
|
||||
border: 1px solid turquoise;
|
||||
border-top-width: 3px;
|
||||
padding: 0 10px 500px 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.active-tab-body {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.user-media-request-div-class {
|
||||
background-color: lightgray;
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
|
||||
.user-media-request-div-class > div {
|
||||
margin: 5px 0 5px 0;
|
||||
}
|
||||
|
||||
.dumps-info {
|
||||
max-width: 60em;
|
||||
}
|
||||
|
||||
details[open] details summary {
|
||||
background-color: rgb(220, 220, 220);
|
||||
}
|
||||
|
||||
.peerconnection-deprecations {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.candidategrid tr {
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.candidategrid-active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.candidategrid-candidatepair {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.candidategrid-candidatepair td:first-of-type {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.candidategrid-candidate {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.candidategrid-candidate td:first-of-type {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue