signal-desktop/stylesheets/components/ConversationHeader.scss
2023-07-10 15:44:32 -07:00

336 lines
7.2 KiB
SCSS

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.module-ConversationHeader {
@mixin icon-element($icon, $margin-right: 4px) {
display: flex;
align-items: center;
user-select: none;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
&::before {
content: '';
width: 14px;
height: 14px;
display: block;
margin-inline-end: $margin-right;
@include light-theme {
@include color-svg($icon, $color-gray-60);
}
@include dark-theme {
@include color-svg($icon, $color-gray-25);
}
}
}
--button-spacing: 12px;
&.module-ConversationHeader--narrow {
--button-spacing: 4px;
}
-webkit-app-region: var(--draggable-app-region);
padding-top: var(--title-bar-drag-area-height);
display: flex;
flex-direction: row;
align-items: center;
height: calc(#{$header-height} + var(--title-bar-drag-area-height));
@include light-theme {
color: $color-gray-90;
background-color: $color-white;
}
@include dark-theme {
color: $color-gray-02;
background-color: $color-gray-95;
}
&__back-icon {
$transition: 250ms ease-out;
display: inline-block;
width: 20px;
height: 20px;
min-width: 20px;
margin-inline-start: -20px;
vertical-align: text-bottom;
border: none;
opacity: 0;
// while it is invisible, allow it to be draggable
-webkit-app-region: drag;
transition: margin-inline-start $transition, opacity $transition;
&:disabled {
cursor: default;
}
&--show {
opacity: 1;
margin-inline: 24px 6px;
-webkit-app-region: no-drag;
}
@include light-theme {
@include color-svg(
'../images/icons/v3/chevron/chevron-left.svg',
$color-gray-90
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/chevron/chevron-left.svg',
$color-gray-02
);
}
@include keyboard-mode {
&:focus {
background-color: $color-ultramarine;
}
}
@include dark-keyboard-mode {
&:focus {
background-color: $color-ultramarine-light;
}
}
}
&__header {
$padding: 4px 12px;
align-items: center;
display: flex;
flex-direction: row;
flex-grow: 1;
margin-inline: 4px var(--button-spacing);
padding: $padding;
overflow: hidden;
min-width: 0;
transition: margin-inline-end 200ms ease-out;
&--clickable {
@include button-reset;
flex: 1;
border-radius: 4px;
-webkit-app-region: no-drag;
// These are clobbered by button-reset:
margin-inline: 4px var(--button-spacing);
padding: $padding;
padding-inline-start: 0;
@include keyboard-mode {
&:focus {
color: $color-ultramarine;
}
}
@include dark-keyboard-mode {
&:focus {
color: $color-ultramarine-light;
}
}
}
&__avatar {
min-width: 32px;
margin-inline-end: 12px;
padding-top: 4px;
padding-bottom: 4px;
}
&__info {
display: flex;
flex-direction: column;
min-width: 0;
&__title {
@include font-body-1-bold;
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
user-select: none;
&__in-contacts-icon {
margin-inline-start: 4px;
}
}
&__subtitle {
display: flex;
@include font-body-2;
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
&__expiration {
@include icon-element('../images/icons/v3/timer/timer-compact.svg');
margin-inline-end: 12px;
}
&__verified {
@include icon-element('../images/icons/v3/check/check-compact.svg');
}
}
}
}
&__button {
$icon-size: 32px;
-webkit-app-region: no-drag;
@include button-reset;
align-items: center;
justify-content: center;
border-radius: 4px;
border: 2px solid transparent;
display: flex;
height: $icon-size;
margin-inline-end: var(--button-spacing);
min-width: $icon-size;
padding: 2px;
transition: margin-inline-end 200ms ease-out, opacity 200ms ease-out,
background 100ms ease-out;
width: $icon-size;
&:disabled {
cursor: default;
}
&--show-disabled {
opacity: 0.5;
}
@include light-theme {
&:hover,
&:focus {
background: $color-gray-02;
}
&:active {
background: $color-gray-05;
}
}
@include dark-theme {
&:hover,
&:focus {
background: $color-gray-80;
}
&:active {
background: $color-gray-75;
}
}
@include keyboard-mode {
&:focus {
border-color: $color-ultramarine;
}
}
@include dark-keyboard-mode {
&:focus {
border-color: $color-ultramarine-light;
}
}
@mixin normal-button($icon, $size) {
&::before {
content: '';
display: block;
width: $size;
height: $size;
@include light-theme {
@include color-svg($icon, $color-gray-75);
&:hover,
&:active,
&:focus {
@include color-svg($icon, $color-gray-90);
}
}
@include dark-theme {
@include color-svg($icon, $color-gray-15);
&:hover,
&:active,
&:focus {
@include color-svg($icon, $color-gray-02);
}
}
}
}
&--video {
@include normal-button('../images/icons/v3/video/video.svg', 20px);
}
&--audio {
@include normal-button('../images/icons/v3/phone/phone.svg', 20px);
}
&--search {
@include normal-button('../images/icons/v3/search/search.svg', 20px);
}
&--more {
@include normal-button('../images/icons/v3/more/more.svg', 20px);
margin-inline-end: 16px;
}
&--join-call {
$background: $color-accent-green;
@include font-body-1;
@include rounded-corners;
align-items: center;
background-color: $background;
color: $color-white;
display: flex;
outline: none;
overflow: hidden;
padding-block: 5px;
padding-inline: 10px;
text-overflow: ellipsis;
white-space: nowrap;
user-select: none;
width: auto;
height: 28px;
&: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;
}
// Override hover state coming from __button above.
&:hover,
&:focus {
background-color: darken($background, 16%);
}
}
}
&__disappearing-timer__item {
padding-inline-start: 25px;
&--active {
padding-inline-start: 0px;
@include icon-element('../images/icons/v3/check/check-compact.svg', 12px);
}
}
}