signal-desktop/stylesheets/_mixins.scss

1193 lines
24 KiB
SCSS
Raw Normal View History

2023-01-03 19:55:46 +00:00
// Copyright 2016 Signal Messenger, LLC
2020-10-30 20:34:04 +00:00
// SPDX-License-Identifier: AGPL-3.0-only
2024-11-15 23:09:31 +00:00
@use 'sass:color';
@use 'sass:map';
@use 'sass:string';
@use 'variables';
2019-10-04 18:06:17 +00:00
// Fonts
2023-03-01 19:00:50 +00:00
@mixin localized-fonts {
/* Japanese */
2022-03-02 18:41:16 +00:00
&:lang(ja) {
font-family: Inter, 'SF Pro', 'SF Pro JP', 'BIZ UDGothic',
'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo,
' Pゴシック', 'Helvetica Neue', Helvetica, Arial, sans-serif;
2022-03-02 18:41:16 +00:00
}
/* Farsi (Persian) */
&:lang(fa) {
2024-07-24 00:31:40 +00:00
font-family:
'Vazirmatn',
-apple-system,
system-ui,
BlinkMacSystemFont,
'Segoe UI',
Tahoma,
'Noto Sans Arabic',
Helvetica,
Arial,
sans-serif;
}
2024-01-11 01:20:41 +00:00
/* Urdu */
&:lang(ur) {
2024-01-11 01:20:41 +00:00
font-family: 'Noto Nastaliq Urdu', Gulzar, 'Jameel Noori Nastaleeq',
'Faiz Lahori Nastaleeq', 'Urdu Typesetting', Helvetica, Arial, sans-serif;
}
2022-03-02 18:41:16 +00:00
}
2023-03-01 19:00:50 +00:00
@mixin font-family {
2024-11-15 23:09:31 +00:00
font-family: variables.$inter;
2023-03-01 19:00:50 +00:00
@include localized-fonts;
}
@mixin time-fonts {
2024-11-15 23:09:31 +00:00
font-family: Hatsuishi, variables.$inter;
2023-03-01 19:00:50 +00:00
@include localized-fonts;
}
2022-03-02 18:41:16 +00:00
@mixin font-title-1 {
2021-10-21 21:04:43 +00:00
font-weight: 600;
font-size: 26px;
line-height: 32px;
2019-10-04 18:06:17 +00:00
letter-spacing: -0.56px;
}
@mixin font-title-2 {
2021-10-21 21:04:43 +00:00
font-weight: 600;
2019-10-04 18:06:17 +00:00
font-size: 20px;
line-height: 26px;
letter-spacing: -0.34px;
}
2023-08-09 00:53:06 +00:00
@mixin font-title-medium {
font-weight: 600;
font-size: 18px;
line-height: 25px;
letter-spacing: -0.25px;
}
2019-10-04 18:06:17 +00:00
@mixin font-body-1 {
font-size: 14px;
line-height: 20px;
letter-spacing: -0.08px;
2019-10-04 18:06:17 +00:00
}
@mixin font-body-1-bold {
@include font-body-1;
font-weight: 600;
2019-10-04 18:06:17 +00:00
}
@mixin font-body-1-italic {
@include font-body-1;
font-style: italic;
}
@mixin font-body-1-bold-italic {
@include font-body-1;
font-weight: 600;
2019-10-04 18:06:17 +00:00
font-style: italic;
}
@mixin font-body-2 {
font-size: 13px;
line-height: 18px;
letter-spacing: -0.03px;
2019-10-04 18:06:17 +00:00
}
@mixin font-body-2-bold {
@include font-body-2;
font-weight: 600;
2019-10-04 18:06:17 +00:00
}
2022-08-31 19:57:21 +00:00
@mixin font-body-2-medium {
@include font-body-2;
font-weight: 500;
}
2019-10-04 18:06:17 +00:00
@mixin font-body-2-italic {
@include font-body-2;
font-style: italic;
}
@mixin font-body-2-bold-italic {
@include font-body-2;
font-weight: 600;
2019-10-04 18:06:17 +00:00
font-style: italic;
}
@mixin font-subtitle {
font-size: 12px;
line-height: 16px;
letter-spacing: 0;
2019-10-04 18:06:17 +00:00
}
@mixin font-subtitle-bold {
@include font-subtitle;
2024-11-15 23:09:31 +00:00
& {
font-weight: 600;
}
}
2019-10-04 18:06:17 +00:00
@mixin font-caption {
font-size: 11px;
line-height: 14px;
letter-spacing: 0.06px;
2019-10-04 18:06:17 +00:00
}
@mixin font-caption-bold {
@include font-caption;
font-weight: 600;
2019-10-04 18:06:17 +00:00
}
@mixin font-caption-bold-italic {
@include font-caption;
font-weight: 600;
2019-10-04 18:06:17 +00:00
font-style: italic;
}
// Themes
@mixin light-theme() {
2024-11-15 23:09:31 +00:00
& {
@content;
}
}
2022-05-11 22:58:14 +00:00
@mixin explicit-light-theme() {
.light-theme & {
@content;
}
}
2019-10-04 18:06:17 +00:00
@mixin dark-theme() {
.dark-theme & {
@content;
}
}
@mixin any-theme {
&,
.dark-theme & {
@content;
}
}
// Utilities
@mixin rounded-corners() {
// This ensures the borders are completely rounded. (A value like 100% would make it an ellipse.)
border-radius: 9999px;
}
@mixin smooth-scroll() {
scroll-behavior: smooth;
@media (prefers-reduced-motion) {
scroll-behavior: auto;
}
}
// NOTE: As of this writing, this mixin only works in the main window, because this class
// is only applied there.
@mixin only-when-page-is-visible {
.page-is-visible & {
@content;
}
}
// Search results loading
@mixin search-results-loading-pulsating-background {
animation: search-results-loading-pulsating-background-animation 2s infinite;
@media (prefers-reduced-motion) {
animation: none;
}
@include light-theme {
2024-11-15 23:09:31 +00:00
background: variables.$color-gray-05;
}
@include dark-theme {
2024-11-15 23:09:31 +00:00
background: variables.$color-gray-65;
}
}
@keyframes search-results-loading-pulsating-background-animation {
0% {
opacity: 1;
}
50% {
opacity: 0.55;
}
100% {
opacity: 1;
}
}
@mixin search-results-loading-box($width) {
width: $width;
height: 12px;
border-radius: 4px;
@include search-results-loading-pulsating-background;
}
2019-10-04 18:06:17 +00:00
// Icons
2023-04-20 17:03:43 +00:00
@function str-replace($string, $search, $replace: '') {
2024-11-15 23:09:31 +00:00
$index: string.index($string, $search);
2023-04-20 17:03:43 +00:00
@if $index {
@return (
2024-11-15 23:09:31 +00:00
string.slice($string, 1, $index - 1) + $replace +
2023-04-20 17:03:43 +00:00
str-replace(
2024-11-15 23:09:31 +00:00
string.slice($string, $index + string.length($search)),
2023-04-20 17:03:43 +00:00
$search,
$replace
)
);
}
@return $string;
}
$rtl-icon-map: (
'chevron-left-16.svg': 'chevron-right-16.svg',
'chevron-right-16.svg': 'chevron-left-16.svg',
'chevron-left-20.svg': 'chevron-right-20.svg',
'chevron-right-20.svg': 'chevron-left-20.svg',
'chevron-left-24.svg': 'chevron-right-24.svg',
'chevron-right-24.svg': 'chevron-left-24.svg',
'arrow-left-32.svg': 'arrow-right-32.svg',
'arrow-right-32.svg': 'arrow-left-32.svg',
2023-05-04 18:04:22 +00:00
// v3 icons
'chevron-left.svg': 'chevron-right.svg',
'chevron-right.svg': 'chevron-left.svg',
'chevron-shallow-left.svg': 'chevron-shallow-right.svg',
'chevron-shallow-right.svg': 'chevron-shallow-left.svg',
2023-05-04 18:04:22 +00:00
'chevron-left-compact-bold.svg': 'chevron-right-compact-bold.svg',
'chevron-right-compact-bold.svg': 'chevron-left-compact-bold.svg',
'chevron-right-bold.svg': 'chevron-left-bold.svg',
2023-05-04 18:04:22 +00:00
'arrow-left.svg': 'arrow-right.svg',
'arrow-right.svg': 'arrow-left.svg',
2023-04-20 17:03:43 +00:00
// Ignored cases:
'phone-right-outline-24.svg': '',
'phone-right-solid-24.svg': '',
);
@function get-rtl-svg($svg) {
@each $ltr, $rtl in $rtl-icon-map {
2024-11-15 23:09:31 +00:00
@if string.index($svg, $ltr) {
2023-04-20 17:03:43 +00:00
@if $rtl == '' {
@return $ltr;
}
@return str-replace($svg, $ltr, $rtl);
}
}
2024-11-15 23:09:31 +00:00
@if string.index($svg, 'left') or string.index($svg, 'right') {
2023-04-20 17:03:43 +00:00
@error "Missing RTL icon for #{$svg}";
}
@return false;
}
@mixin color-svg($svg, $color, $stretch: true, $mask-origin: null) {
2024-11-15 23:09:31 +00:00
& {
-webkit-mask: url($svg) no-repeat center;
@if $stretch {
-webkit-mask-size: 100%;
}
@if $mask-origin {
-webkit-mask-origin: $mask-origin;
}
background-color: $color;
}
@media (forced-colors: active) {
background-color: WindowText;
}
$rtl-svg: get-rtl-svg($svg);
@if $rtl-svg {
:dir(rtl) & {
-webkit-mask: url($rtl-svg) no-repeat center;
}
}
}
2019-04-22 18:25:37 +00:00
// Keyboard
@mixin keyboard-mode() {
.keyboard-mode & {
@content;
}
}
@mixin mouse-mode() {
.mouse-mode & {
@content;
}
}
@mixin dark-keyboard-mode() {
.dark-theme.keyboard-mode & {
@content;
}
}
2020-07-24 01:35:32 +00:00
@mixin dark-mouse-mode() {
.dark-theme.mouse-mode & {
@content;
}
}
2019-10-04 18:06:17 +00:00
// Other
2019-04-22 18:25:37 +00:00
2019-10-04 18:06:17 +00:00
@mixin popper-shadow() {
2024-11-15 23:09:31 +00:00
& {
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;
}
2019-04-22 18:25:37 +00:00
}
2019-10-04 18:06:17 +00:00
@mixin button-reset {
2024-11-15 23:09:31 +00:00
& {
background: none;
color: inherit;
border: none;
padding: 0;
margin: 0;
font: inherit;
cursor: pointer;
outline: inherit;
text-align: inherit;
}
@media (forced-colors: active) {
border: 1px solid WindowText;
}
}
2020-11-20 17:30:45 +00:00
2021-09-21 01:23:55 +00:00
@mixin staged-attachment-close-button {
@include button-reset;
2024-11-15 23:09:31 +00:00
& {
position: absolute;
top: 4px;
inset-inline-end: 4px;
width: 16px;
height: 16px;
z-index: variables.$z-index-above-base;
}
2021-09-21 01:23:55 +00:00
}
@mixin calling-text-shadow {
2024-11-15 23:09:31 +00:00
text-shadow: 0 0 4px variables.$color-black-alpha-40;
}
@mixin lonely-local-video-preview {
2021-09-10 17:24:05 +00:00
max-height: calc(100% - 24px);
height: auto;
transform: rotateY(180deg);
width: calc(100% - 24px);
border-radius: 8px;
}
// --- Buttons
// Individual traits
@mixin button-focus-outline {
&:focus {
@include keyboard-mode {
2024-11-15 23:09:31 +00:00
box-shadow: 0px 0px 0px 3px variables.$color-ultramarine;
}
@include dark-keyboard-mode {
2024-11-15 23:09:31 +00:00
box-shadow: 0px 0px 0px 3px variables.$color-ultramarine-light;
}
}
}
@mixin button-blue-text {
@include light-theme {
2024-11-15 23:09:31 +00:00
color: variables.$color-ultramarine;
}
@include dark-theme {
2024-11-15 23:09:31 +00:00
color: variables.$color-ultramarine-light;
}
}
// Complete button styles
2020-11-20 17:30:45 +00:00
@mixin button-primary {
2024-11-15 23:09:31 +00:00
background-color: variables.$color-ultramarine;
2020-11-20 17:30:45 +00:00
// Note: the background colors here need to match the parent component
@include light-theme {
2024-11-15 23:09:31 +00:00
color: variables.$color-white;
2020-11-20 17:30:45 +00:00
border: 1px solid white;
}
@include dark-theme {
2024-11-15 23:09:31 +00:00
color: variables.$color-white-alpha-90;
border: 1px solid variables.$color-gray-95;
2020-11-20 17:30:45 +00:00
}
&:hover {
@include mouse-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-black,
variables.$color-ultramarine,
15%
);
2020-11-20 17:30:45 +00:00
}
@include dark-mouse-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-white,
variables.$color-ultramarine,
15%
);
2020-11-20 17:30:45 +00:00
}
}
&:active {
// We need to include all four here for specificity precedence
@include mouse-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-black,
variables.$color-ultramarine,
25%
);
2020-11-20 17:30:45 +00:00
}
@include dark-mouse-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-white,
variables.$color-ultramarine,
25%
);
2020-11-20 17:30:45 +00:00
}
@include keyboard-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-black,
variables.$color-ultramarine,
25%
);
2020-11-20 17:30:45 +00:00
}
@include dark-keyboard-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-black,
variables.$color-ultramarine,
25%
);
2020-11-20 17:30:45 +00:00
}
}
@include button-focus-outline;
2020-11-20 17:30:45 +00:00
}
@mixin button-secondary {
@include light-theme {
2024-11-15 23:09:31 +00:00
color: variables.$color-gray-90;
background-color: variables.$color-gray-05;
2020-11-20 17:30:45 +00:00
}
@include dark-theme {
2024-11-15 23:09:31 +00:00
color: variables.$color-gray-05;
background-color: variables.$color-gray-65;
2020-11-20 17:30:45 +00:00
}
&:hover {
@include mouse-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-black,
variables.$color-gray-05,
15%
);
2020-11-20 17:30:45 +00:00
}
@include dark-mouse-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-white,
variables.$color-gray-65,
15%
);
2020-11-20 17:30:45 +00:00
}
}
&:active {
// We need to include all four here for specificity precedence
@include mouse-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-black,
variables.$color-gray-05,
25%
);
2020-11-20 17:30:45 +00:00
}
@include dark-mouse-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-white,
variables.$color-gray-65,
25%
);
}
2020-11-20 17:30:45 +00:00
@include keyboard-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-black,
variables.$color-gray-05,
25%
);
}
@include dark-keyboard-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-white,
variables.$color-gray-65,
25%
);
2020-11-20 17:30:45 +00:00
}
}
@include button-focus-outline;
2020-11-20 17:30:45 +00:00
}
2020-11-20 17:30:45 +00:00
@mixin button-secondary-blue-text {
@include button-secondary;
@include button-blue-text;
}
@mixin button-light {
2020-11-20 17:30:45 +00:00
@include light-theme {
2024-11-15 23:09:31 +00:00
color: variables.$color-gray-90;
background-color: variables.$color-gray-02;
2020-11-20 17:30:45 +00:00
}
@include dark-theme {
2024-11-15 23:09:31 +00:00
color: variables.$color-gray-05;
background-color: variables.$color-gray-75;
2020-11-20 17:30:45 +00:00
}
&:hover {
@include mouse-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-black,
variables.$color-gray-02,
10%
);
}
@include dark-mouse-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-white,
variables.$color-gray-75,
10%
);
}
}
&:active {
// We need to include all four here for specificity precedence
@include mouse-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-black,
variables.$color-gray-02,
20%
);
}
@include dark-mouse-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-white,
variables.$color-gray-75,
20%
);
}
@include keyboard-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-black,
variables.$color-gray-02,
20%
);
}
@include dark-keyboard-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-white,
variables.$color-gray-75,
20%
);
}
}
@include button-focus-outline;
}
@mixin button-light-blue-text {
@include button-light;
@include button-blue-text;
2020-11-20 17:30:45 +00:00
}
@mixin button-destructive {
@include light-theme {
2024-11-15 23:09:31 +00:00
color: variables.$color-white;
background-color: variables.$color-accent-red;
2020-11-20 17:30:45 +00:00
}
@include dark-theme {
2024-11-15 23:09:31 +00:00
color: variables.$color-white-alpha-90;
background-color: variables.$color-accent-red;
2020-11-20 17:30:45 +00:00
}
&:hover {
@include mouse-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-black,
variables.$color-accent-red,
15%
);
2020-11-20 17:30:45 +00:00
}
@include dark-mouse-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-white,
variables.$color-accent-red,
15%
);
2020-11-20 17:30:45 +00:00
}
}
&:active {
// We need to include all four here for specificity precedence
@include mouse-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-black,
variables.$color-accent-red,
25%
);
2020-11-20 17:30:45 +00:00
}
@include dark-mouse-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-white,
variables.$color-accent-red,
25%
);
}
2020-11-20 17:30:45 +00:00
@include keyboard-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-black,
variables.$color-accent-red,
25%
);
}
@include dark-keyboard-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-white,
variables.$color-accent-red,
25%
);
2020-11-20 17:30:45 +00:00
}
}
@include button-focus-outline;
2020-11-20 17:30:45 +00:00
}
@mixin button-green {
2024-11-15 23:09:31 +00:00
$background-color: variables.$color-accent-green;
background-color: $background-color;
2024-11-15 23:09:31 +00:00
color: variables.$color-white;
&:active {
// We need to include all four here for specificity precedence
@include mouse-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-black,
$background-color,
25%
);
}
@include dark-mouse-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-white,
$background-color,
25%
);
}
@include keyboard-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-black,
$background-color,
25%
);
}
@include dark-keyboard-mode {
2024-11-15 23:09:31 +00:00
background-color: color.mix(
variables.$color-white,
$background-color,
25%
);
}
}
&[disabled] {
opacity: 0.6;
}
@include button-focus-outline;
}
@mixin button-small {
@include rounded-corners;
2023-04-20 17:03:43 +00:00
padding-block: 7px;
padding-inline: 14px;
}
2021-03-11 21:29:31 +00:00
// Modals
@mixin modal-reset {
@include popper-shadow();
2024-11-15 23:09:31 +00:00
& {
border-radius: 8px;
margin-block: 0;
margin-inline: auto;
max-height: 100%;
max-width: 360px;
padding: 16px;
position: relative;
width: 95%;
display: flex;
flex-direction: column;
}
2021-03-11 21:29:31 +00:00
@include light-theme() {
2024-11-15 23:09:31 +00:00
background: variables.$color-white;
color: variables.$color-gray-90;
2021-03-11 21:29:31 +00:00
}
@include dark-theme() {
2024-11-15 23:09:31 +00:00
background: variables.$color-gray-95;
color: variables.$color-gray-05;
2021-03-11 21:29:31 +00:00
}
}
@mixin modal-close-button {
@include button-reset;
2024-11-15 23:09:31 +00:00
& {
position: absolute;
inset-inline-end: 12px;
top: 12px;
2021-03-11 21:29:31 +00:00
2024-11-15 23:09:31 +00:00
height: 24px;
width: 24px;
}
2021-03-11 21:29:31 +00:00
@include light-theme {
2024-11-15 23:09:31 +00:00
@include color-svg('../images/icons/v3/x/x.svg', variables.$color-gray-75);
2021-03-11 21:29:31 +00:00
}
@include dark-theme {
2024-11-15 23:09:31 +00:00
@include color-svg('../images/icons/v3/x/x.svg', variables.$color-gray-15);
2021-03-11 21:29:31 +00:00
}
&:focus {
@include keyboard-mode {
2024-11-15 23:09:31 +00:00
background-color: variables.$color-ultramarine;
2021-03-11 21:29:31 +00:00
}
@include dark-keyboard-mode {
2024-11-15 23:09:31 +00:00
background-color: variables.$color-ultramarine-light;
2021-05-28 16:15:17 +00:00
}
}
}
@mixin color-bubble($bubble-size) {
background-clip: content-box;
border-color: transparent;
border-radius: $bubble-size;
2021-05-28 16:15:17 +00:00
border-style: solid;
border-width: 4px;
cursor: pointer;
height: $bubble-size;
2021-05-28 16:15:17 +00:00
padding: 2px;
width: $bubble-size;
2021-05-28 16:15:17 +00:00
2024-11-15 23:09:31 +00:00
@each $color, $value in variables.$conversation-colors {
2021-05-28 16:15:17 +00:00
&--#{$color} {
background-color: $value;
}
}
2024-11-15 23:09:31 +00:00
@each $color, $value in variables.$conversation-colors-gradient {
2021-05-28 16:15:17 +00:00
&--#{$color} {
background-image: linear-gradient(
2024-11-15 23:09:31 +00:00
map.get($value, 'deg'),
map.get($value, 'start'),
map.get($value, 'end')
2021-05-28 16:15:17 +00:00
);
2021-03-11 21:29:31 +00:00
}
}
}
2021-08-06 00:17:05 +00:00
@mixin avatar-colors {
2024-11-15 23:09:31 +00:00
@each $color, $value in variables.$avatar-colors {
2021-08-06 00:17:05 +00:00
&--#{$color} {
2024-11-15 23:09:31 +00:00
--bg: #{map.get($value, 'bg')};
--fg: #{map.get($value, 'fg')};
2021-10-12 19:07:58 +00:00
background-color: var(--bg);
color: var(--fg);
2021-08-06 00:17:05 +00:00
&--icon {
2021-10-12 19:07:58 +00:00
background-color: var(--fg);
2021-08-06 00:17:05 +00:00
@include dark-theme {
// For specificity
2021-10-12 19:07:58 +00:00
background-color: var(--fg);
2021-08-06 00:17:05 +00:00
}
}
}
}
}
@mixin scrollbar {
&::-webkit-scrollbar-thumb {
border-radius: 4px;
visibility: hidden;
width: 6px;
@include light-theme {
2024-11-15 23:09:31 +00:00
background: variables.$color-black-alpha-40;
}
@include dark-theme {
2024-11-15 23:09:31 +00:00
background: variables.$color-white-alpha-40;
}
}
&::-webkit-scrollbar {
background: transparent;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&:hover::-webkit-scrollbar-thumb {
visibility: visible;
}
}
2021-12-16 15:02:22 +00:00
@mixin normal-input {
@include font-body-1;
2023-04-20 17:03:43 +00:00
padding-block: 8px;
padding-inline: 12px;
2021-12-16 15:02:22 +00:00
border-radius: 6px;
border-width: 2px;
border-style: solid;
width: 100%;
@include light-theme {
2024-11-15 23:09:31 +00:00
background: variables.$color-white;
color: variables.$color-black;
border-color: variables.$color-gray-15;
2021-12-16 15:02:22 +00:00
&:disabled {
2024-11-15 23:09:31 +00:00
background: variables.$color-gray-02;
border-color: variables.$color-gray-05;
color: variables.$color-gray-90;
2021-12-16 15:02:22 +00:00
}
}
@include dark-theme {
2024-11-15 23:09:31 +00:00
background: variables.$color-gray-80;
color: variables.$color-gray-05;
border-color: variables.$color-gray-45;
2021-12-16 15:02:22 +00:00
&:disabled {
2024-11-15 23:09:31 +00:00
background: variables.$color-gray-95;
border-color: variables.$color-gray-60;
color: variables.$color-gray-20;
2021-12-16 15:02:22 +00:00
}
}
&:focus {
outline: none;
@include light-theme {
2024-11-15 23:09:31 +00:00
border-color: variables.$color-ultramarine;
2021-12-16 15:02:22 +00:00
}
@include dark-theme {
2024-11-15 23:09:31 +00:00
border-color: variables.$color-ultramarine-light;
2021-12-16 15:02:22 +00:00
}
}
}
@mixin install-screen {
align-items: center;
display: flex;
width: 100vw;
height: 100vh;
2021-12-16 15:02:22 +00:00
justify-content: center;
line-height: 30px;
user-select: none;
@include light-theme {
2024-11-15 23:09:31 +00:00
background: variables.$color-gray-02;
color: variables.$color-black;
2021-12-16 15:02:22 +00:00
}
@include dark-theme {
2024-11-15 23:09:31 +00:00
background: variables.$color-gray-95;
color: variables.$color-white;
2021-12-16 15:02:22 +00:00
}
h1 {
@include font-title-2;
}
h2 {
@include font-body-1;
font-weight: normal;
}
}
2022-01-26 23:05:26 +00:00
@mixin timeline-floating-header-node {
@include rounded-corners;
2024-11-15 23:09:31 +00:00
box-shadow: 0 1px 4px variables.$color-black-alpha-20;
2022-01-26 23:05:26 +00:00
@include light-theme {
2024-11-15 23:09:31 +00:00
background: variables.$color-white;
2022-01-26 23:05:26 +00:00
}
@include dark-theme {
2024-11-15 23:09:31 +00:00
background: variables.$color-gray-80;
2022-01-26 23:05:26 +00:00
}
}
2023-03-20 22:23:53 +00:00
@mixin sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
@mixin disabled {
&:is(:disabled, [aria-disabled='true']) {
@content;
}
}
@mixin not-disabled {
&:not(:disabled):not([aria-disabled='true']) {
@content;
}
}
2023-04-20 17:03:43 +00:00
@mixin position-absolute-center {
position: absolute;
top: 50%;
/* stylelint-disable-next-line liberty/use-logical-spec */
left: 50%;
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
transform: translate(-50%, -50%);
}
@mixin position-absolute-center-x {
position: absolute;
/* stylelint-disable-next-line liberty/use-logical-spec */
left: 50%;
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
transform: translateX(-50%);
}
@mixin position-absolute-center-y {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
2023-08-09 00:53:06 +00:00
@mixin NavTabs__Scroller {
padding-bottom: 8px;
2023-08-09 00:53:06 +00:00
@include scrollbar;
&::-webkit-scrollbar-thumb {
@include light-theme {
2024-11-15 23:09:31 +00:00
background: variables.$color-gray-25;
border-color: variables.$color-gray-04;
2023-08-09 00:53:06 +00:00
}
@include dark-theme {
2024-11-15 23:09:31 +00:00
background: variables.$color-gray-45;
border-color: variables.$color-gray-80;
2023-08-09 00:53:06 +00:00
}
}
}
@mixin draggable-region {
-webkit-app-region: drag;
body.context-menu-open & {
-webkit-app-region: no-drag;
}
}
@mixin tooltip {
& {
@include font-body-2;
@include light-theme {
2024-11-15 23:09:31 +00:00
background-color: variables.$color-gray-04;
color: variables.$color-black;
outline: 1px solid variables.$color-gray-20;
}
@include dark-theme {
2024-11-15 23:09:31 +00:00
background-color: variables.$color-gray-80;
color: variables.$color-gray-15;
outline: 1px solid variables.$color-gray-62;
}
2024-11-15 23:09:31 +00:00
& {
padding-block: 5px;
padding-inline: 12px;
border-radius: 6px;
filter: drop-shadow(0px 4px 3px variables.$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 {
2024-11-15 23:09:31 +00:00
border-color: transparent transparent variables.$color-gray-20 transparent;
}
@include dark-theme {
2024-11-15 23:09:31 +00:00
border-color: transparent transparent variables.$color-gray-62 transparent;
}
2024-11-15 23:09:31 +00:00
& {
margin-top: -14px;
/* stylelint-disable-next-line liberty/use-logical-spec */
margin-left: -7px;
}
}
&[data-placement='bottom'] .module-tooltip-arrow::after {
@include light-theme {
2024-11-15 23:09:31 +00:00
border-bottom-color: variables.$color-gray-04;
}
@include dark-theme {
2024-11-15 23:09:31 +00:00
border-bottom-color: variables.$color-gray-80;
}
}
&[data-placement='top'] .module-tooltip-arrow::before {
@include light-theme {
2024-11-15 23:09:31 +00:00
border-color: variables.$color-gray-20 transparent transparent transparent;
}
@include dark-theme {
2024-11-15 23:09:31 +00:00
border-color: variables.$color-gray-62 transparent transparent transparent;
}
2024-11-15 23:09:31 +00:00
& {
margin-top: 0;
/* stylelint-disable-next-line liberty/use-logical-spec */
margin-left: -7px;
}
}
&[data-placement='top'] .module-tooltip-arrow::after {
@include light-theme {
2024-11-15 23:09:31 +00:00
border-top-color: variables.$color-gray-04;
}
@include dark-theme {
2024-11-15 23:09:31 +00:00
border-top-color: variables.$color-gray-80;
}
}
}
@mixin button-active-call {
2024-11-15 23:09:31 +00:00
$background: variables.$color-accent-green;
@include font-body-2-bold;
@include rounded-corners;
display: flex;
width: auto;
align-items: center;
background-color: $background;
2024-11-15 23:09:31 +00:00
color: variables.$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',
2024-11-15 23:09:31 +00:00
variables.$color-white
);
2024-11-15 23:09:31 +00:00
& {
content: '';
display: block;
height: $icon-size;
margin-inline-end: 4px;
min-width: $icon-size;
width: $icon-size;
}
}
&:not(:disabled) {
&:hover {
@include any-theme {
2024-11-15 23:09:31 +00:00
background-color: color.adjust($background, $lightness: -16%);
}
}
&:focus {
@include keyboard-mode {
2024-11-15 23:09:31 +00:00
background-color: color.adjust($background, $lightness: -16%);
}
}
}
}
@mixin module-composition-popper {
width: 332px;
border-radius: 4px;
margin-bottom: 6px;
z-index: variables.$z-index-context-menu;
user-select: none;
overflow: hidden;
@include popper-shadow();
& {
@include light-theme {
background: variables.$color-gray-02;
::-webkit-scrollbar-thumb {
border: 2px solid variables.$color-gray-02;
}
}
@include dark-theme {
background: variables.$color-gray-75;
::-webkit-scrollbar-thumb {
border: 2px solid variables.$color-gray-75;
}
}
}
}