signal-desktop/stylesheets/components/ConversationHeader.scss

336 lines
6.9 KiB
SCSS
Raw Normal View History

2021-03-01 20:08:37 +00:00
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.module-ConversationHeader {
2021-06-01 20:45:43 +00:00
@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: 13px;
height: 13px;
display: block;
margin-right: $margin-right;
@include light-theme {
@include color-svg($icon, $color-gray-60);
}
@include dark-theme {
@include color-svg($icon, $color-gray-25);
}
}
}
2021-03-01 20:08:37 +00:00
--button-spacing: 24px;
&.module-ConversationHeader--narrow {
--button-spacing: 16px;
}
-webkit-app-region: var(--draggable-app-region);
2021-03-01 20:08:37 +00:00
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: 24px;
height: 24px;
min-width: 24px;
margin-left: -24px;
vertical-align: text-bottom;
border: none;
opacity: 0;
transition: margin-left $transition, opacity $transition;
&:disabled {
cursor: default;
}
&--show {
opacity: 1;
margin-right: 6px;
margin-left: 12px;
}
@include light-theme {
@include color-svg(
'../images/icons/v2/chevron-left-24.svg',
$color-gray-90
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v2/chevron-left-24.svg',
$color-gray-02
);
}
@include keyboard-mode {
&:focus {
background-color: $color-ultramarine;
}
}
@include dark-keyboard-mode {
&:focus {
background-color: $color-ultramarine-light;
}
}
2021-03-01 20:08:37 +00:00
}
&__header {
$padding: 4px 12px;
align-items: center;
display: flex;
flex-direction: row;
flex-grow: 1;
margin-left: 4px;
margin-right: var(--button-spacing);
padding: $padding;
overflow: hidden;
min-width: 0;
transition: margin-right 200ms ease-out;
&--clickable {
@include button-reset;
border-radius: 4px;
-webkit-app-region: no-drag;
2021-03-01 20:08:37 +00:00
// These are clobbered by button-reset:
margin-left: 4px;
margin-right: var(--button-spacing);
padding: $padding;
2022-07-22 00:44:35 +00:00
padding-left: 0;
2021-03-01 20:08:37 +00:00
@include keyboard-mode {
&:focus {
2021-05-28 16:15:17 +00:00
color: $color-ultramarine;
2021-03-01 20:08:37 +00:00
}
}
@include dark-keyboard-mode {
&:focus {
2021-05-28 16:15:17 +00:00
color: $color-ultramarine-light;
2021-03-01 20:08:37 +00:00
}
}
}
&__avatar {
min-width: 32px;
margin-right: 12px;
padding-top: 4px;
padding-bottom: 4px;
}
&__info {
display: flex;
flex-direction: column;
min-width: 0;
&__title {
@include font-body-1-bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
user-select: none;
&__in-contacts-icon {
margin-left: 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/v2/timer-outline-24.svg');
2021-03-01 20:08:37 +00:00
margin-right: 12px;
}
&__verified {
2021-06-01 20:45:43 +00:00
@include icon-element('../images/icons/v2/check-24.svg');
2021-03-01 20:08:37 +00:00
}
}
}
}
&__button {
$icon-size: 32px;
-webkit-app-region: no-drag;
@include button-reset;
2022-06-13 23:37:29 +00:00
align-items: center;
justify-content: center;
border-radius: 4px;
border: 2px solid transparent;
display: flex;
height: $icon-size;
2021-03-01 20:08:37 +00:00
margin-right: var(--button-spacing);
min-width: $icon-size;
opacity: 0;
padding: 2px;
transition: margin-right 200ms ease-out, opacity 200ms ease-out,
background 100ms ease-out;
width: $icon-size;
&:disabled {
cursor: default;
}
&--show {
opacity: 1;
}
2021-07-20 20:18:35 +00:00
&--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;
}
}
2021-03-01 20:08:37 +00:00
@include keyboard-mode {
&:focus {
2021-05-28 16:15:17 +00:00
border-color: $color-ultramarine;
2021-03-01 20:08:37 +00:00
}
}
@include dark-keyboard-mode {
&:focus {
2021-05-28 16:15:17 +00:00
border-color: $color-ultramarine-light;
2021-03-01 20:08:37 +00:00
}
}
2022-06-13 23:37:29 +00:00
@mixin normal-button($icon, $size) {
&::before {
content: '';
display: block;
2022-06-13 23:37:29 +00:00
width: $size;
height: $size;
@include light-theme {
2022-06-13 23:37:29 +00:00
@include color-svg($icon, $color-gray-75);
&:hover,
&:active,
&:focus {
2022-06-13 23:37:29 +00:00
@include color-svg($icon, $color-gray-90);
}
}
@include dark-theme {
2022-06-13 23:37:29 +00:00
@include color-svg($icon, $color-gray-15);
&:hover,
&:active,
&:focus {
2022-06-13 23:37:29 +00:00
@include color-svg($icon, $color-gray-02);
}
}
}
}
2021-03-01 20:08:37 +00:00
&--video {
2022-06-13 23:37:29 +00:00
@include normal-button('../images/icons/v2/video-outline-24.svg', 24px);
2021-03-01 20:08:37 +00:00
}
&--audio {
2022-06-15 17:53:08 +00:00
@include normal-button('../images/icons/v2/phone-outline-24.svg', 24px);
2021-03-01 20:08:37 +00:00
}
&--search {
2022-06-13 23:37:29 +00:00
@include normal-button('../images/icons/v2/search-24.svg', 24px);
2021-03-01 20:08:37 +00:00
}
&--more {
2022-06-13 23:37:29 +00:00
@include normal-button('../images/icons/v2/chevron-down-20.svg', 20px);
2021-03-01 20:08:37 +00:00
}
&--join-call {
$background: $color-accent-green;
2021-03-01 20:08:37 +00:00
@include font-body-1;
@include rounded-corners;
2021-03-01 20:08:37 +00:00
align-items: center;
background-color: $background;
2021-03-01 20:08:37 +00:00
color: $color-white;
display: flex;
outline: none;
overflow: hidden;
padding: 5px 18px;
text-overflow: ellipsis;
white-space: nowrap;
user-select: none;
width: auto;
2021-03-01 20:08:37 +00:00
&:before {
$icon-size: 24px;
2021-03-01 20:08:37 +00:00
@include color-svg(
'../images/icons/v2/video-solid-24.svg',
$color-white
);
content: '';
display: block;
height: $icon-size;
margin-right: 5px;
min-width: $icon-size;
width: $icon-size;
}
// Override hover state coming from __button above.
&:hover,
&:focus {
background-color: darken($background, 16%);
}
2021-03-01 20:08:37 +00:00
}
}
2021-06-01 20:45:43 +00:00
&__disappearing-timer__item {
padding-left: 25px;
&--active {
padding-left: 0px;
@include icon-element('../images/icons/v2/check-24.svg', 12px);
}
}
2021-03-01 20:08:37 +00:00
}