2023-05-17 00:46:14 +08:00
|
|
|
@mixin chat-height($inset: 0px) {
|
2023-05-15 21:53:18 +08:00
|
|
|
// desktop and mobile
|
2024-01-30 21:18:00 +08:00
|
|
|
// -1px is for the bottom border of the chat navbar
|
2024-02-01 17:24:44 +08:00
|
|
|
$base-height: calc(
|
2024-10-31 21:50:01 +08:00
|
|
|
var(--composer-vh, 1vh) * 100 - var(--main-outlet-offset, 0px) - 1px -
|
|
|
|
$inset
|
2023-05-15 21:53:18 +08:00
|
|
|
);
|
|
|
|
|
2024-02-01 17:24:44 +08:00
|
|
|
height: calc($base-height - var(--composer-height, 0px));
|
|
|
|
|
2023-05-15 21:53:18 +08:00
|
|
|
// mobile with keyboard opened
|
2024-02-01 17:24:44 +08:00
|
|
|
html.keyboard-visible & {
|
|
|
|
height: calc($base-height);
|
2023-05-15 21:53:18 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
// ipad
|
2024-02-01 17:24:44 +08:00
|
|
|
html.footer-nav-ipad & {
|
|
|
|
height: calc($base-height - var(--composer-height, 0px));
|
|
|
|
}
|
|
|
|
|
|
|
|
// PWA/HUB without keyboard
|
|
|
|
html.footer-nav-visible:not(.keyboard-visible) & {
|
|
|
|
height: calc($base-height - var(--footer-nav-height, 0px));
|
2023-05-15 21:53:18 +08:00
|
|
|
}
|
|
|
|
}
|