pepepper/fluxer
1
0 Fork 0
mirror of https://github.com/fluxerapp/fluxer synced 2026-10-17 13:05:32 +09:00
Code Issues Packages Projects Releases Wiki Activity

fix(app): restore mobile channel list scrolling (#1558)

Browse Source
This commit is contained in:
Hampus authored and GitHub committed 2026-08-11 17:06:09 +02:00
1 parent 0b08e1de2c
commit 1907860b26
56 files changed
+206 -188
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

fluxer_app/src/app/App.module.css
+2 -2
View File
@@ -56,8 +56,8 @@
.skipLink:focus-visible {
position: absolute;
z-index: var(--z-index-toast);
inset-block-start: calc(0.5rem + var(--skip-link-titlebar-offset, 0));
inset-inline-start: calc(0.5rem + var(--skip-link-traffic-lights-offset, 0));
inset-block-start: calc(0.5rem + var(--skip-link-titlebar-offset, 0px));
inset-inline-start: calc(0.5rem + var(--skip-link-traffic-lights-offset, 0px));
width: auto;
height: auto;
margin: 0;
fluxer_app/src/app/globals.css
+4 -4
View File
@@ -111,7 +111,7 @@ var {
--scroller-spacer-height: 1.75rem;
--typing-avatar-size: 0.75rem;
--typing-indicator-animation-size: 1rem;
--typing-indicator-gap: 0;
--typing-indicator-gap: 0px;
--typing-upload-column-width: calc(
var(--user-area-content-height) +
(var(--textarea-side-button-padding, 0.34375rem) * 2)
@@ -123,7 +123,7 @@ var {
--emoji-size-emoji: 1.5em;
--emoji-size-jumbo-emoji: 3rem;
--spacing-0: 0;
--spacing-0: 0px;
--spacing-1: 0.25rem;
--spacing-1-5: 0.375rem;
--spacing-2: 0.5rem;
@@ -142,8 +142,8 @@ var {
--layout-sidebar-width: 16.875rem;
--layout-header-height: 3.5rem;
--layout-user-area-height: var(--input-container-min-height);
--layout-user-area-reserved-height: 0;
--layout-mobile-bottom-nav-reserved-height: 0;
--layout-user-area-reserved-height: 0px;
--layout-mobile-bottom-nav-reserved-height: 0px;
--user-area-content-height: 2.25rem;
--user-area-padding-y: calc((var(--layout-user-area-height) - var(--user-area-content-height)) / 2);
--user-area-padding-x: var(--spacing-4);
fluxer_app/src/features/app/components/dialogs/Modal.module.css
+6 -6
View File
@@ -68,8 +68,8 @@
}
.layer.layerFullscreenMobile {
--fullscreen-pad-y: 0;
--fullscreen-pad-x: 0;
--fullscreen-pad-y: 0px;
--fullscreen-pad-x: 0px;
padding: 0 !important;
}
@@ -109,8 +109,8 @@
}
.layer.layerCentered {
padding: calc(1.5rem + env(safe-area-inset-top, 0)) calc(1rem + env(safe-area-inset-right, 0))
calc(1.5rem + env(safe-area-inset-bottom, 0)) calc(1rem + env(safe-area-inset-left, 0));
padding: calc(1.5rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px))
calc(1.5rem + env(safe-area-inset-bottom, 0px)) calc(1rem + env(safe-area-inset-left, 0px));
}
.root.centeredOnMobile {
@@ -417,8 +417,8 @@
.insetCloseButtonContainer {
position: absolute;
top: calc(0.75rem + env(safe-area-inset-top, 0));
right: calc(0.75rem + env(safe-area-inset-right, 0));
top: calc(0.75rem + env(safe-area-inset-top, 0px));
right: calc(0.75rem + env(safe-area-inset-right, 0px));
z-index: 10;
pointer-events: auto;
}
fluxer_app/src/features/app/components/dialogs/shared/SettingsModalLayout.module.css
+2 -2
View File
@@ -615,8 +615,8 @@
content: '';
position: absolute;
left: 0;
top: var(--active-top, 0);
height: var(--active-height, 0);
top: var(--active-top, 0px);
height: var(--active-height, 0px);
width: var(--settings-sidebar-subtree-line-width);
background: var(--settings-sidebar-highlight);
border-radius: 999px;
fluxer_app/src/features/app/components/layout/AuthLayout.module.css
+1 -1
View File
@@ -228,7 +228,7 @@
.mobileContainer {
min-height: 100dvh;
background-color: var(--background-secondary);
padding: calc(2rem + env(safe-area-inset-top, 0)) 1.5rem calc(2.5rem + env(safe-area-inset-bottom, 0));
padding: calc(2rem + env(safe-area-inset-top, 0px)) 1.5rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
fluxer_app/src/features/app/components/layout/ChannelItem.module.css
+3 -3
View File
@@ -71,9 +71,9 @@
.typingAvatars {
height: 1.25rem;
--avatar-stack-padding-block-start: 0;
--avatar-stack-padding-block-end: 0;
--avatar-stack-extra-height: 0;
--avatar-stack-padding-block-start: 0px;
--avatar-stack-padding-block-end: 0px;
--avatar-stack-extra-height: 0px;
--avatar-stack-outline-color: var(--background-secondary);
}
fluxer_app/src/features/app/components/layout/ChannelListContent.module.css
+1 -1
View File
@@ -55,6 +55,6 @@
}
.bottomSpacer {
height: calc(var(--layout-user-area-overlay-height, var(--layout-user-area-reserved-height, 0)) + var(--spacing-2));
height: calc(var(--layout-user-area-overlay-height, var(--layout-user-area-reserved-height, 0px)) + var(--spacing-2));
flex: 0 0 auto;
}
fluxer_app/src/features/app/components/layout/GuildNavbar.module.css
+9 -2
View File
@@ -1,10 +1,17 @@
/* SPDX-License-Identifier: AGPL-3.0-or-later */
.guildNavbarContainer {
--scroller-track-block-end-inset: var(--layout-user-area-overlay-height, var(--layout-user-area-reserved-height, 0));
--scroller-track-block-end-inset: var(
--layout-user-area-overlay-height,
var(--layout-user-area-reserved-height, 0px)
);
display: grid;
grid-template-rows: auto 1fr;
height: calc(100% - var(--layout-user-area-reserved-height, 0) - var(--layout-mobile-bottom-nav-reserved-height, 0));
height: calc(
100% -
var(--layout-user-area-reserved-height, 0px) -
var(--layout-mobile-bottom-nav-reserved-height, 0px)
);
min-height: 0;
width: var(--layout-sidebar-width);
min-width: 0;
fluxer_app/src/features/app/components/layout/GuildNavbarSkeleton.module.css
+1 -1
View File
@@ -3,7 +3,7 @@
.skeletonContainer {
display: grid;
grid-template-rows: auto 1fr;
height: calc(100% - var(--layout-user-area-reserved-height, 0));
height: calc(100% - var(--layout-user-area-reserved-height, 0px));
min-height: 0;
width: var(--layout-sidebar-width);
min-width: 0;
fluxer_app/src/features/app/components/layout/GuildsLayout.module.css
+18 -11
View File
@@ -1,9 +1,9 @@
/* SPDX-License-Identifier: AGPL-3.0-or-later */
.guildsLayoutContainer {
--layout-user-area-overlay-height: 0;
--layout-user-area-reserved-height: 0;
--layout-mobile-bottom-nav-reserved-height: 0;
--layout-user-area-overlay-height: 0px;
--layout-user-area-reserved-height: 0px;
--layout-mobile-bottom-nav-reserved-height: 0px;
position: relative;
display: grid;
grid-template-columns: var(--layout-guild-list-width) minmax(0, 1fr);
@@ -19,7 +19,7 @@
}
.guildsLayoutReserveSpace {
--layout-user-area-overlay-height: calc(var(--layout-user-area-height) + var(--layout-voice-connection-height, 0));
--layout-user-area-overlay-height: calc(var(--layout-user-area-height) + var(--layout-voice-connection-height, 0px));
}
.guildsLayoutReserveMobileBottomNav {
@@ -38,11 +38,18 @@
}
.guildListScrollerWrapper {
--scroller-track-block-end-inset: var(--layout-user-area-overlay-height, var(--layout-user-area-reserved-height, 0));
--scroller-track-block-end-inset: var(
--layout-user-area-overlay-height,
var(--layout-user-area-reserved-height, 0px)
);
grid-column: 1;
grid-row: 1;
min-height: 0;
height: calc(100% - var(--layout-user-area-reserved-height, 0) - var(--layout-mobile-bottom-nav-reserved-height, 0));
height: calc(
100% -
var(--layout-user-area-reserved-height, 0px) -
var(--layout-mobile-bottom-nav-reserved-height, 0px)
);
width: var(--layout-guild-list-width);
min-width: 0;
background-color: var(--background-secondary);
@@ -72,7 +79,7 @@
width: 100%;
min-width: 0;
padding-bottom: calc(
var(--layout-user-area-overlay-height, var(--layout-user-area-reserved-height, 0)) +
var(--layout-user-area-overlay-height, var(--layout-user-area-reserved-height, 0px)) +
var(--spacing-2)
);
}
@@ -212,7 +219,7 @@
color 70ms ease-out;
container-type: size;
--initials-font-size: clamp(0.85rem, 45cqi, 1.35rem);
--initials-letter-spacing: 0;
--initials-letter-spacing: 0px;
--initials-scale: 1;
}
@@ -273,13 +280,13 @@
.guildIcon[data-initials-length='medium'] .guildIconInitials {
--initials-font-size: clamp(0.85rem, 38cqi, 1.11rem);
--initials-letter-spacing: 0;
--initials-letter-spacing: 0px;
--initials-scale: 0.92;
}
.guildIcon[data-initials-length='long'] .guildIconInitials {
--initials-font-size: clamp(0.85rem, 32cqi, 0.87rem);
--initials-letter-spacing: 0;
--initials-letter-spacing: 0px;
--initials-scale: 0.78;
}
@@ -566,7 +573,7 @@
}
.outlineFrame {
--outline-radius: 0;
--outline-radius: 0px;
}
.outlineFrameFullscreen {
fluxer_app/src/features/app/components/layout/OutlineFrame.module.css
+1 -1
View File
@@ -6,7 +6,7 @@
width: 100%;
border: 0.0625rem solid var(--user-area-divider-color);
border-top: none;
border-top-left-radius: var(--outline-radius, 0);
border-top-left-radius: var(--outline-radius, 0px);
background: var(--background-secondary-lighter);
overflow: hidden;
display: flex;
fluxer_app/src/features/app/components/shared/MessagePreview.module.css
+2 -2
View File
@@ -41,7 +41,7 @@
.actionButton {
composes: item textItem from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
--action-toolbar-item-border-width: 0;
--action-toolbar-item-border-width: 0px;
--action-toolbar-item-radius: 0.25rem;
--action-toolbar-item-background: var(--background-primary);
--action-toolbar-item-color: var(--text-primary-muted);
@@ -54,7 +54,7 @@
.actionIconButton {
composes: item from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
--action-toolbar-item-size: 1.5rem;
--action-toolbar-item-border-width: 0;
--action-toolbar-item-border-width: 0px;
--action-toolbar-item-radius: 0.25rem;
--action-toolbar-item-background: var(--background-primary);
--action-toolbar-item-color: var(--text-primary-muted);
fluxer_app/src/features/channel/components/MessageActionBottomSheet.module.css
+1 -1
View File
@@ -16,7 +16,7 @@
.quickReactionButton {
composes: item roundItem from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
--action-toolbar-item-size: 2.75rem;
--action-toolbar-item-border-width: 0;
--action-toolbar-item-border-width: 0px;
--action-toolbar-item-background: var(--background-modifier-hover);
}
fluxer_app/src/features/channel/components/MobileEmojiPicker.module.css
+1 -1
View File
@@ -66,5 +66,5 @@
align-items: center;
justify-content: flex-start;
min-width: max-content;
padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0)) 0.5rem;
padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px)) 0.5rem;
}
fluxer_app/src/features/channel/components/QuickReactionsRow.module.css
+1 -1
View File
@@ -9,7 +9,7 @@
.button {
composes: item fluidItem from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
--action-toolbar-item-border-width: 0;
--action-toolbar-item-border-width: 0px;
--action-toolbar-item-radius: 0.5rem;
--action-toolbar-item-background: var(--background-modifier-hover);
flex: 1;
fluxer_app/src/features/channel/components/VoiceMessageRecorder.module.css
+1 -1
View File
@@ -27,7 +27,7 @@
bottom: 0;
z-index: 2000;
background-color: var(--brand-primary);
padding-bottom: env(safe-area-inset-bottom, 0);
padding-bottom: env(safe-area-inset-bottom, 0px);
box-shadow: 0 -0.5rem 1.25rem rgba(0, 0, 0, 0.25);
box-sizing: border-box;
}
fluxer_app/src/features/channel/components/bottomsheets/ChannelDetailsBottomSheet.module.css
+1 -1
View File
@@ -842,7 +842,7 @@
justify-content: flex-end;
gap: 0.5rem;
padding: 1rem;
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
border-top: 0.0625rem solid var(--border-color);
}
fluxer_app/src/features/channel/components/bottomsheets/CreateDMBottomSheet.module.css
+2 -2
View File
@@ -18,7 +18,7 @@
flex-direction: column;
gap: 1rem;
padding: 1rem;
padding-bottom: var(--create-dm-scroll-padding-bottom, calc(1rem + env(safe-area-inset-bottom, 0)));
padding-bottom: var(--create-dm-scroll-padding-bottom, calc(1rem + env(safe-area-inset-bottom, 0px)));
}
.description {
@@ -38,7 +38,7 @@
justify-content: flex-end;
gap: 0.5rem;
padding: 1rem;
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
border-top: 0.0625rem solid var(--border-color);
}
fluxer_app/src/features/channel/components/direct_message/DMChannelView.module.css
+2 -2
View File
@@ -170,14 +170,14 @@
}
.callBannerResizable .callControlBarSection {
padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0));
padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}
.callControlBarSection {
position: relative;
display: flex;
justify-content: center;
padding: 0 1rem calc(0.875rem + env(safe-area-inset-bottom, 0));
padding: 0 1rem calc(0.875rem + env(safe-area-inset-bottom, 0px));
z-index: 2;
pointer-events: none;
}
fluxer_app/src/features/channel/components/direct_message/DirectMessageList.module.css
+7 -4
View File
@@ -1,10 +1,13 @@
/* SPDX-License-Identifier: AGPL-3.0-or-later */
.dmListContainer {
--scroller-track-block-end-inset: var(--layout-user-area-overlay-height, var(--layout-user-area-reserved-height, 0));
--scroller-track-block-end-inset: var(
--layout-user-area-overlay-height,
var(--layout-user-area-reserved-height, 0px)
);
display: grid;
grid-template-rows: auto 1fr auto;
height: calc(100% - var(--layout-user-area-reserved-height, 0));
height: calc(100% - var(--layout-user-area-reserved-height, 0px));
min-height: 0;
width: var(--layout-sidebar-width);
min-width: 0;
@@ -210,7 +213,7 @@
.mobileFab {
position: fixed;
right: 1rem;
bottom: calc(3.75rem + env(safe-area-inset-bottom, 0) + 1rem);
bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px) + 1rem);
z-index: 50;
display: flex;
height: 3.5rem;
@@ -237,7 +240,7 @@
}
.desktopBottomSpacer {
height: calc(var(--layout-user-area-overlay-height, var(--layout-user-area-reserved-height, 0)) + var(--spacing-2));
height: calc(var(--layout-user-area-overlay-height, var(--layout-user-area-reserved-height, 0px)) + var(--spacing-2));
flex: 0 0 auto;
}
fluxer_app/src/features/channel/components/embeds/attachments/TextualAttachmentPreview.module.css
+4 -4
View File
@@ -62,7 +62,7 @@
.previewActionButton {
composes: item from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
--action-toolbar-item-size: 1.5rem;
--action-toolbar-item-border-width: 0;
--action-toolbar-item-border-width: 0px;
--action-toolbar-item-radius: var(--radius-sm);
--action-toolbar-item-background: var(--bg-secondary);
--action-toolbar-item-color: var(--text-secondary);
@@ -169,7 +169,7 @@
}
.previewCode {
--pre-padding: 0;
--pre-padding: 0px;
margin: 0;
border: 0;
background-color: transparent;
@@ -232,7 +232,7 @@
.expandButton {
composes: item from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
--action-toolbar-item-size: 2rem;
--action-toolbar-item-border-width: 0;
--action-toolbar-item-border-width: 0px;
--action-toolbar-item-radius: 0.625rem;
--action-toolbar-item-background: var(--background-modifier-hover);
--action-toolbar-item-color: var(--text-secondary);
@@ -293,7 +293,7 @@
.controlButton {
composes: item from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
--action-toolbar-item-size: 2rem;
--action-toolbar-item-border-width: 0;
--action-toolbar-item-border-width: 0px;
--action-toolbar-item-radius: 0.5rem;
--action-toolbar-item-background: transparent;
--action-toolbar-item-color: var(--text-secondary);
fluxer_app/src/features/channel/components/embeds/attachments/TextualAttachmentPreviewBottomSheet.module.css
+2 -2
View File
@@ -24,7 +24,7 @@
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.625rem;
padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0));
padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
border-top: 0.0625rem solid var(--border-color);
background-color: var(--background-secondary);
}
@@ -68,7 +68,7 @@
.actionButton {
composes: item from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
--action-toolbar-item-size: 2.25rem;
--action-toolbar-item-border-width: 0;
--action-toolbar-item-border-width: 0px;
--action-toolbar-item-radius: 0.5rem;
--action-toolbar-item-background: transparent;
--action-toolbar-item-color: var(--text-secondary);
fluxer_app/src/features/channel/components/embeds/media/EmbedGifv.module.css
+5 -5
View File
@@ -10,7 +10,7 @@
padding: 0;
text-align: left;
cursor: pointer;
border-radius: var(--media-border-radius, 0);
border-radius: var(--media-border-radius, 0px);
overflow: hidden;
}
@@ -25,7 +25,7 @@
flex-direction: column;
cursor: default;
overflow: hidden;
border-radius: var(--media-border-radius, 0);
border-radius: var(--media-border-radius, 0px);
border: none;
background: var(--background-primary);
padding: 0;
@@ -49,7 +49,7 @@
display: grid;
max-width: 100%;
cursor: pointer;
border-radius: var(--media-border-radius, 0);
border-radius: var(--media-border-radius, 0px);
border: none;
background: transparent;
padding: 0;
@@ -70,7 +70,7 @@
height: auto;
max-height: 100%;
max-width: 100%;
border-radius: var(--media-border-radius, 0);
border-radius: var(--media-border-radius, 0px);
transition: opacity 80ms ease-out;
object-fit: contain;
pointer-events: none;
@@ -89,7 +89,7 @@
width: 100%;
height: 100%;
display: block;
border-radius: var(--media-border-radius, 0);
border-radius: var(--media-border-radius, 0px);
object-fit: contain;
pointer-events: none;
opacity: 0;
fluxer_app/src/features/channel/components/embeds/media/EmbedImage.module.css
+1 -1
View File
@@ -10,7 +10,7 @@
text-align: left;
cursor: pointer;
-webkit-touch-callout: none;
border-radius: var(--media-border-radius, 0);
border-radius: var(--media-border-radius, 0px);
overflow: hidden;
}
fluxer_app/src/features/channel/components/embeds/media/EmbedVideo.module.css
+4 -4
View File
@@ -67,7 +67,7 @@
user-select: none;
-webkit-user-select: none;
overflow: hidden;
border-radius: var(--media-border-radius, 0);
border-radius: var(--media-border-radius, 0px);
}
.blurInner {
@@ -97,7 +97,7 @@
border: 0;
padding: 0;
cursor: pointer;
border-radius: var(--media-border-radius, 0);
border-radius: var(--media-border-radius, 0px);
}
.mobileContainer {
@@ -105,7 +105,7 @@
height: 100%;
width: 100%;
background: #000;
border-radius: var(--media-border-radius, 0);
border-radius: var(--media-border-radius, 0px);
overflow: hidden;
}
@@ -118,7 +118,7 @@
.videoPlayerBlock {
display: block;
width: 100%;
border-radius: var(--media-border-radius, 0);
border-radius: var(--media-border-radius, 0px);
overflow: hidden;
}
fluxer_app/src/features/channel/components/embeds/media/MediaButtons.module.css
+1 -1
View File
@@ -8,7 +8,7 @@
.overlayButton {
composes: item roundItem from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
--action-toolbar-item-size: 3.5rem;
--action-toolbar-item-border-width: 0;
--action-toolbar-item-border-width: 0px;
--action-toolbar-item-background: rgba(0, 0, 0, 0.75);
--action-toolbar-item-color: var(--text-on-brand-primary);
}
fluxer_app/src/features/channel/components/embeds/media/MediaContainer.module.css
+2 -2
View File
@@ -2,9 +2,9 @@
.mediaContainer {
position: relative;
border-radius: var(--media-border-radius, 0);
border-radius: var(--media-border-radius, 0px);
overflow: hidden;
clip-path: inset(0 round var(--media-border-radius, 0));
clip-path: inset(0 round var(--media-border-radius, 0px));
}
.mediaHoverAction {
fluxer_app/src/features/channel/components/friends/ActionButton.module.css
+1 -1
View File
@@ -3,7 +3,7 @@
.button {
composes: item roundItem from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
--action-toolbar-item-size: 2.25rem;
--action-toolbar-item-border-width: 0;
--action-toolbar-item-border-width: 0px;
--action-toolbar-item-background: var(
--friend-action-neutral-background,
color-mix(in srgb, var(--background-modifier-hover) 94%, var(--text-primary-muted) 6%)
fluxer_app/src/features/channel/components/friends/MobileFriendRequestItem.module.css
+1 -1
View File
@@ -32,7 +32,7 @@
.actionButton {
composes: item roundItem from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
--action-toolbar-item-size: 2.25rem;
--action-toolbar-item-border-width: 0;
--action-toolbar-item-border-width: 0px;
--action-toolbar-item-background: color-mix(
in srgb,
var(--background-modifier-hover) 94%,
fluxer_app/src/features/channel/components/modals/EditGroupBottomSheet.module.css
+1 -1
View File
@@ -20,7 +20,7 @@
.scrollContent {
padding: 1rem;
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
.form {
fluxer_app/src/features/channel/components/modals/GroupInvitesBottomSheet.module.css
+1 -1
View File
@@ -24,7 +24,7 @@
.content {
padding: 1rem;
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
.loadingContainer {
fluxer_app/src/features/channel/components/textarea/TextareaInput.module.css
+4 -4
View File
@@ -4,20 +4,20 @@
--textarea-font-size: var(--font-size, 1rem);
--textarea-button-height: var(--user-area-content-height);
--textarea-button-icon-size: 1.625rem;
--textarea-button-padding-x: 0;
--textarea-button-padding-x: 0px;
--textarea-button-min-width: auto;
--textarea-button-compact-height: var(--user-area-content-height);
--textarea-button-compact-icon-size: 1.375rem;
--textarea-container-padding-y: 0;
--textarea-container-padding-x: 0;
--textarea-container-padding-y: 0px;
--textarea-container-padding-x: 0px;
--textarea-min-height: var(--input-container-min-height);
--textarea-horizontal-padding: var(--chat-horizontal-padding, var(--spacing-4));
--textarea-content-offset: calc((var(--user-area-content-height) - var(--textarea-line-height)) / 2);
--textarea-upload-gap: var(--message-gutter, 1rem);
--textarea-side-button-padding: max(
0,
0px,
calc((var(--message-avatar-size, 2.5rem) - var(--textarea-button-height)) / 2)
);
fluxer_app/src/features/guild/components/modals/AddGuildModal.module.css
+3 -3
View File
@@ -133,7 +133,7 @@
background: var(--background-tertiary);
container-type: size;
--initials-font-size: clamp(0.85rem, 45cqi, 1.35rem);
--initials-letter-spacing: 0;
--initials-letter-spacing: 0px;
--initials-scale: 1;
}
@@ -154,13 +154,13 @@
.iconPlaceholder[data-initials-length='medium'] .iconInitials {
--initials-font-size: clamp(0.85rem, 38cqi, 1.11rem);
--initials-letter-spacing: 0;
--initials-letter-spacing: 0px;
--initials-scale: 0.92;
}
.iconPlaceholder[data-initials-length='long'] .iconInitials {
--initials-font-size: clamp(0.85rem, 32cqi, 0.87rem);
--initials-letter-spacing: 0;
--initials-letter-spacing: 0px;
--initials-scale: 0.78;
}
fluxer_app/src/features/guild/components/popouts/GuildIcon.module.css
+3 -3
View File
@@ -20,7 +20,7 @@
transition: background-image 0.3s ease-in-out;
container-type: inline-size;
--initials-font-size: clamp(0.85rem, 45cqi, 1.35rem);
--initials-letter-spacing: 0;
--initials-letter-spacing: 0px;
--initials-scale: 1;
--initials-scale-cap: 1;
}
@@ -45,13 +45,13 @@
.container[data-initials-length='medium'] .initials {
--initials-font-size: clamp(0.85rem, 38cqi, 1.11rem);
--initials-scale: 0.92;
--initials-letter-spacing: 0;
--initials-letter-spacing: 0px;
}
.container[data-initials-length='long'] .initials {
--initials-font-size: clamp(0.85rem, 32cqi, 0.87rem);
--initials-scale: 0.78;
--initials-letter-spacing: 0;
--initials-letter-spacing: 0px;
}
.container[data-reduced-motion='true'] {
fluxer_app/src/features/input/components/modals/KeyboardShortcutsCheatsheetModal.module.css
+1 -1
View File
@@ -101,7 +101,7 @@
.sections {
column-width: auto;
column-count: 1;
padding: calc(0.75rem + env(safe-area-inset-top, 0)) 0.75rem 0.75rem;
padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 0.75rem 0.75rem;
}
.shortcutRow {
fluxer_app/src/features/invite/components/modals/InvitePagePreviewModal.module.css
+2 -2
View File
@@ -28,7 +28,7 @@
.previewPillContainer {
position: absolute;
top: calc(1rem + env(safe-area-inset-top, 0));
top: calc(1rem + env(safe-area-inset-top, 0px));
left: 50%;
transform: translateX(-50%);
z-index: 20;
@@ -92,7 +92,7 @@
.alignmentControlsContainer {
position: absolute;
bottom: calc(1.5rem + env(safe-area-inset-bottom, 0));
bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
left: 50%;
transform: translateX(-50%);
z-index: 20;
fluxer_app/src/features/messaging/components/modals/MediaModal.module.css
+9 -9
View File
@@ -247,10 +247,10 @@
--media-hud-color-muted: rgb(255 255 255 / 0.72);
--media-hud-button-bg: transparent;
--media-hud-button-bg-hover: rgb(255 255 255 / 0.14);
--media-hud-safe-top: calc(var(--media-hud-top-offset, 1rem) + env(safe-area-inset-top, 0));
--media-hud-safe-left: calc(var(--media-hud-inline-offset, 1rem) + env(safe-area-inset-left, 0));
--media-hud-safe-right: calc(var(--media-hud-inline-offset, 1rem) + env(safe-area-inset-right, 0));
--media-hud-safe-bottom: calc(var(--media-hud-bottom-offset, 1.125rem) + env(safe-area-inset-bottom, 0));
--media-hud-safe-top: calc(var(--media-hud-top-offset, 1rem) + env(safe-area-inset-top, 0px));
--media-hud-safe-left: calc(var(--media-hud-inline-offset, 1rem) + env(safe-area-inset-left, 0px));
--media-hud-safe-right: calc(var(--media-hud-inline-offset, 1rem) + env(safe-area-inset-right, 0px));
--media-hud-safe-bottom: calc(var(--media-hud-bottom-offset, 1.125rem) + env(safe-area-inset-bottom, 0px));
--media-fit-safe-inset-block: max(
calc(var(--media-hud-safe-top) + var(--media-top-overlay-height, 3rem) + var(--media-overlay-gap, 0.75rem)),
calc(var(--media-hud-safe-bottom) + var(--media-bottom-overlay-height, 3rem) + var(--media-overlay-gap, 0.75rem))
@@ -259,7 +259,7 @@
--media-fit-max-width: max(0px, calc(100dvw - (2 * var(--media-fit-safe-inset-inline))));
--media-fit-max-height: max(0px, calc(100dvh - (2 * var(--media-fit-safe-inset-block))));
--media-content-inner-gap: 0.75rem;
--media-content-inner-padding: 0;
--media-content-inner-padding: 0px;
position: relative;
display: flex;
flex-direction: column;
@@ -275,8 +275,8 @@
@media (max-width: 768px) {
.modalContentInner {
--media-content-inner-gap: 0;
--media-content-inner-padding: 0;
--media-content-inner-gap: 0px;
--media-content-inner-padding: 0px;
}
}
@@ -774,11 +774,11 @@
}
.floatingNavButtonLeft {
left: max(0.375rem, env(safe-area-inset-left, 0));
left: max(0.375rem, env(safe-area-inset-left, 0px));
}
.floatingNavButtonRight {
right: max(0.375rem, env(safe-area-inset-right, 0));
right: max(0.375rem, env(safe-area-inset-right, 0px));
}
.floatingNavButton {
fluxer_app/src/features/relationship/components/modals/AddFriendSheet.module.css
+1 -1
View File
@@ -16,7 +16,7 @@
flex-direction: column;
gap: 1rem;
padding: 1rem;
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
.description {
fluxer_app/src/features/search/components/quick_switcher/QuickSwitcherModal.module.css
+1 -1
View File
@@ -339,7 +339,7 @@
flex-direction: column;
height: 100%;
background-color: var(--background-secondary);
padding: 0 1rem calc(env(safe-area-inset-bottom, 0) + 1rem);
padding: 0 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
}
.mobileSearchContainer {
fluxer_app/src/features/theme/components/modals/BackgroundImageGalleryModal.module.css
+2 -2
View File
@@ -66,7 +66,7 @@
--action-toolbar-item-size: 2rem;
--action-toolbar-item-background: rgba(0, 0, 0, 0.6);
--action-toolbar-item-color: white;
--action-toolbar-item-border-width: 0;
--action-toolbar-item-border-width: 0px;
}
.actionButton:hover {
@@ -284,7 +284,7 @@
--action-toolbar-item-size: 2rem;
--action-toolbar-item-background: rgba(0, 0, 0, 0.6);
--action-toolbar-item-color: white;
--action-toolbar-item-border-width: 0;
--action-toolbar-item-border-width: 0px;
position: absolute;
top: 0.5rem;
right: 0.5rem;
fluxer_app/src/features/theme/styles/Message.module.css
+7 -7
View File
@@ -42,7 +42,7 @@
}
.messagePreviewSpacing {
margin-top: var(--message-group-spacing, 0);
margin-top: var(--message-group-spacing, 0px);
}
.messagePreview {
@@ -874,7 +874,7 @@
top: 50%;
bottom: calc(-1 * (var(--reply-spacing) + var(--compact-reply-spine-terminal-gap)));
inset-inline-start: var(--compact-reply-spine-center);
inline-size: max(0, var(--compact-reply-spine-run));
inline-size: max(0px, var(--compact-reply-spine-run));
margin-block-start: calc(-0.5 * var(--spine-width));
margin-inline-start: 0;
border-color: var(--reply-spine-color);
@@ -983,7 +983,7 @@
}
.repliedTextContent {
--mention-offset-block-end: 0;
--mention-offset-block-end: 0px;
display: inline;
overflow: hidden;
text-overflow: ellipsis;
@@ -1068,7 +1068,7 @@
justify-content: center;
padding-block-start: 0.15em;
padding-inline-start: max(
0,
0px,
calc(
(
var(--textarea-horizontal-padding, 1rem) +
@@ -1299,9 +1299,9 @@
.typingAvatarContainer {
height: var(--typing-pill-height);
margin-inline: 0;
--avatar-stack-padding-block-start: 0;
--avatar-stack-padding-block-end: 0;
--avatar-stack-extra-height: 0;
--avatar-stack-padding-block-start: 0px;
--avatar-stack-padding-block-end: 0px;
--avatar-stack-extra-height: 0px;
--avatar-stack-outline-color: var(--background-tertiary);
}
fluxer_app/src/features/theme/variables/ThemeVariableManifest.ts
+25 -25
View File
@@ -155,10 +155,10 @@ export const THEME_VARIABLES: ReadonlyArray<ThemeVariableDefinition> = [
{name: "--layout-guild-list-width", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
{name: "--layout-header-height", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
{name: "--layout-header-popout-width", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
{name: "--layout-mobile-bottom-nav-reserved-height", kind: "number", groupId: "layout", groupLabel: "Layout", source: "globals"},
{name: "--layout-mobile-bottom-nav-reserved-height", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
{name: "--layout-sidebar-width", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
{name: "--layout-user-area-height", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
{name: "--layout-user-area-reserved-height", kind: "number", groupId: "layout", groupLabel: "Layout", source: "globals"},
{name: "--layout-user-area-reserved-height", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
{name: "--link-decoration", kind: "other", groupId: "other", groupLabel: "Other", source: "runtime-accessibility"},
{name: "--markup-everyone-border", kind: "color", groupId: "markup", groupLabel: "Markup & mentions", source: "color-system"},
{name: "--markup-everyone-fill", kind: "color", groupId: "markup", groupLabel: "Markup & mentions", source: "color-system"},
@@ -258,7 +258,7 @@ export const THEME_VARIABLES: ReadonlyArray<ThemeVariableDefinition> = [
{name: "--shadow-sm", kind: "shadow", groupId: "borders", groupLabel: "Borders & focus", source: "color-system"},
{name: "--shadow-xl", kind: "shadow", groupId: "borders", groupLabel: "Borders & focus", source: "color-system"},
{name: "--slowmode-indicator-height", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
{name: "--spacing-0", kind: "number", groupId: "layout", groupLabel: "Layout", source: "globals"},
{name: "--spacing-0", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
{name: "--spacing-1", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
{name: "--spacing-1-5", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
{name: "--spacing-10", kind: "dimension", groupId: "layout", groupLabel: "Layout", source: "globals"},
@@ -304,9 +304,9 @@ export const THEME_VARIABLES: ReadonlyArray<ThemeVariableDefinition> = [
{name: "--textarea-button-height", kind: "dimension", groupId: "forms", groupLabel: "Forms", source: "features/channel/components/textarea/TextareaInput.module.css"},
{name: "--textarea-button-icon-size", kind: "dimension", groupId: "forms", groupLabel: "Forms", source: "features/channel/components/textarea/TextareaInput.module.css"},
{name: "--textarea-button-min-width", kind: "other", groupId: "forms", groupLabel: "Forms", source: "features/channel/components/textarea/TextareaInput.module.css"},
{name: "--textarea-button-padding-x", kind: "number", groupId: "forms", groupLabel: "Forms", source: "features/channel/components/textarea/TextareaInput.module.css"},
{name: "--textarea-container-padding-x", kind: "number", groupId: "forms", groupLabel: "Forms", source: "features/channel/components/textarea/TextareaInput.module.css"},
{name: "--textarea-container-padding-y", kind: "number", groupId: "forms", groupLabel: "Forms", source: "features/channel/components/textarea/TextareaInput.module.css"},
{name: "--textarea-button-padding-x", kind: "dimension", groupId: "forms", groupLabel: "Forms", source: "features/channel/components/textarea/TextareaInput.module.css"},
{name: "--textarea-container-padding-x", kind: "dimension", groupId: "forms", groupLabel: "Forms", source: "features/channel/components/textarea/TextareaInput.module.css"},
{name: "--textarea-container-padding-y", kind: "dimension", groupId: "forms", groupLabel: "Forms", source: "features/channel/components/textarea/TextareaInput.module.css"},
{name: "--textarea-content-offset", kind: "dimension", groupId: "forms", groupLabel: "Forms", source: "features/channel/components/textarea/TextareaInput.module.css"},
{name: "--textarea-font-size", kind: "dimension", groupId: "forms", groupLabel: "Forms", source: "features/channel/components/textarea/TextareaInput.module.css"},
{name: "--textarea-horizontal-padding", kind: "dimension", groupId: "forms", groupLabel: "Forms", source: "features/channel/components/textarea/TextareaInput.module.css"},
@@ -322,7 +322,7 @@ export const THEME_VARIABLES: ReadonlyArray<ThemeVariableDefinition> = [
{name: "--transition-slow", kind: "transition", groupId: "motion", groupLabel: "Motion", source: "color-system"},
{name: "--typing-avatar-size", kind: "dimension", groupId: "messages", groupLabel: "Messages", source: "globals"},
{name: "--typing-indicator-animation-size", kind: "dimension", groupId: "messages", groupLabel: "Messages", source: "globals"},
{name: "--typing-indicator-gap", kind: "number", groupId: "messages", groupLabel: "Messages", source: "globals"},
{name: "--typing-indicator-gap", kind: "dimension", groupId: "messages", groupLabel: "Messages", source: "globals"},
{name: "--typing-indicator-height", kind: "dimension", groupId: "messages", groupLabel: "Messages", source: "globals"},
{name: "--typing-pill-height", kind: "dimension", groupId: "messages", groupLabel: "Messages", source: "globals"},
{name: "--typing-upload-column-width", kind: "dimension", groupId: "messages", groupLabel: "Messages", source: "globals"},
@@ -1009,10 +1009,10 @@ export const THEME_STUDIO_DARK_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
"--layout-guild-list-width": "4.5rem",
"--layout-header-height": "3.5rem",
"--layout-header-popout-width": "calc(16.875rem - (1rem * 2))",
"--layout-mobile-bottom-nav-reserved-height": "0",
"--layout-mobile-bottom-nav-reserved-height": "0px",
"--layout-sidebar-width": "16.875rem",
"--layout-user-area-height": "4.5rem",
"--layout-user-area-reserved-height": "0",
"--layout-user-area-reserved-height": "0px",
"--link-decoration": "none",
"--markup-everyone-border": "hsla(250, calc(80% * var(--saturation-factor)), 75%, 0.3)",
"--markup-everyone-fill": "color-mix(in srgb, hsl(250, calc(80% * var(--saturation-factor)), 75%) 18%, transparent)",
@@ -1112,7 +1112,7 @@ export const THEME_STUDIO_DARK_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
"--shadow-sm": "0 1px 2px rgba(0, 0, 0, 0.1)",
"--shadow-xl": "0 10px 20px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1)",
"--slowmode-indicator-height": "1rem",
"--spacing-0": "0",
"--spacing-0": "0px",
"--spacing-1": "0.25rem",
"--spacing-1-5": "0.375rem",
"--spacing-10": "2.5rem",
@@ -1158,15 +1158,15 @@ export const THEME_STUDIO_DARK_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
"--textarea-button-height": "2.25rem",
"--textarea-button-icon-size": "1.625rem",
"--textarea-button-min-width": "auto",
"--textarea-button-padding-x": "0",
"--textarea-container-padding-x": "0",
"--textarea-container-padding-y": "0",
"--textarea-button-padding-x": "0px",
"--textarea-container-padding-x": "0px",
"--textarea-container-padding-y": "0px",
"--textarea-content-offset": "calc((2.25rem - calc(1rem * 1.375)) / 2)",
"--textarea-font-size": "1rem",
"--textarea-horizontal-padding": "1rem)",
"--textarea-line-height": "calc(1rem * 1.375)",
"--textarea-min-height": "4.5rem",
"--textarea-side-button-padding": "max( 0, calc((2.5rem - 2.25rem) / 2) )",
"--textarea-side-button-padding": "max( 0px, calc((2.5rem - 2.25rem) / 2) )",
"--textarea-top-bar-height": "2.5rem",
"--textarea-upload-gap": "1rem",
"--theme-border": "transparent",
@@ -1176,10 +1176,10 @@ export const THEME_STUDIO_DARK_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
"--transition-slow": "300ms ease",
"--typing-avatar-size": "0.75rem",
"--typing-indicator-animation-size": "1rem",
"--typing-indicator-gap": "0",
"--typing-indicator-gap": "0px",
"--typing-indicator-height": "1rem",
"--typing-pill-height": "1rem",
"--typing-upload-column-width": "calc( 2.25rem + (max( 0, calc((2.5rem - 2.25rem) / 2) ) * 2) )",
"--typing-upload-column-width": "calc( 2.25rem + (max( 0px, calc((2.5rem - 2.25rem) / 2) ) * 2) )",
"--user-area-content-height": "2.25rem",
"--user-area-divider-color": "color-mix(in srgb, hsla(258, calc(10% * var(--saturation-factor)), 100%, 0.05) 70%, transparent)",
"--user-area-padding-x": "1rem",
@@ -1345,10 +1345,10 @@ export const THEME_STUDIO_LIGHT_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
"--layout-guild-list-width": "4.5rem",
"--layout-header-height": "3.5rem",
"--layout-header-popout-width": "calc(16.875rem - (1rem * 2))",
"--layout-mobile-bottom-nav-reserved-height": "0",
"--layout-mobile-bottom-nav-reserved-height": "0px",
"--layout-sidebar-width": "16.875rem",
"--layout-user-area-height": "4.5rem",
"--layout-user-area-reserved-height": "0",
"--layout-user-area-reserved-height": "0px",
"--link-decoration": "none",
"--markup-everyone-border": "hsla(250, calc(70% * var(--saturation-factor)), 45%, 0.4)",
"--markup-everyone-fill": "color-mix(in srgb, hsl(250, calc(70% * var(--saturation-factor)), 45%) 12%, transparent)",
@@ -1448,7 +1448,7 @@ export const THEME_STUDIO_LIGHT_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
"--shadow-sm": "0 1px 2px rgba(0, 0, 0, 0.1)",
"--shadow-xl": "0 10px 20px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1)",
"--slowmode-indicator-height": "1rem",
"--spacing-0": "0",
"--spacing-0": "0px",
"--spacing-1": "0.25rem",
"--spacing-1-5": "0.375rem",
"--spacing-10": "2.5rem",
@@ -1494,15 +1494,15 @@ export const THEME_STUDIO_LIGHT_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
"--textarea-button-height": "2.25rem",
"--textarea-button-icon-size": "1.625rem",
"--textarea-button-min-width": "auto",
"--textarea-button-padding-x": "0",
"--textarea-container-padding-x": "0",
"--textarea-container-padding-y": "0",
"--textarea-button-padding-x": "0px",
"--textarea-container-padding-x": "0px",
"--textarea-container-padding-y": "0px",
"--textarea-content-offset": "calc((2.25rem - calc(1rem * 1.375)) / 2)",
"--textarea-font-size": "1rem",
"--textarea-horizontal-padding": "1rem)",
"--textarea-line-height": "calc(1rem * 1.375)",
"--textarea-min-height": "4.5rem",
"--textarea-side-button-padding": "max( 0, calc((2.5rem - 2.25rem) / 2) )",
"--textarea-side-button-padding": "max( 0px, calc((2.5rem - 2.25rem) / 2) )",
"--textarea-top-bar-height": "2.5rem",
"--textarea-upload-gap": "1rem",
"--theme-border": "transparent",
@@ -1512,10 +1512,10 @@ export const THEME_STUDIO_LIGHT_DEFAULT_VARIABLE_VALUES: Readonly<Record<string,
"--transition-slow": "300ms ease",
"--typing-avatar-size": "0.75rem",
"--typing-indicator-animation-size": "1rem",
"--typing-indicator-gap": "0",
"--typing-indicator-gap": "0px",
"--typing-indicator-height": "1rem",
"--typing-pill-height": "1rem",
"--typing-upload-column-width": "calc( 2.25rem + (max( 0, calc((2.5rem - 2.25rem) / 2) ) * 2) )",
"--typing-upload-column-width": "calc( 2.25rem + (max( 0px, calc((2.5rem - 2.25rem) / 2) ) * 2) )",
"--user-area-content-height": "2.25rem",
"--user-area-divider-color": "hsla(220, calc(10% * var(--saturation-factor)), 40%, 0.2)",
"--user-area-padding-x": "1rem",
fluxer_app/src/features/ui/action_menu/ContextMenu.module.css
+2 -2
View File
@@ -45,7 +45,7 @@
}
.menuScroller {
--scroller-thumb-inline-end: 0;
--scroller-thumb-inline-end: 0px;
max-height: inherit;
min-height: 0;
}
@@ -375,7 +375,7 @@
}
.submenuScroller {
--scroller-thumb-inline-end: 0;
--scroller-thumb-inline-end: 0px;
max-height: inherit;
min-height: 0;
}
fluxer_app/src/features/ui/avatars/AvatarStack.module.css
+1 -1
View File
@@ -7,7 +7,7 @@
align-items: center;
width: fit-content;
height: calc(var(--avatar-size) + (2 * var(--avatar-outline, 0.125rem)) + var(--avatar-stack-extra-height, 0.375rem));
padding-right: calc(max(calc(0 - var(--avatar-overlap)), 0) + var(--avatar-outline, 0.125rem));
padding-right: calc(max(calc(0px - var(--avatar-overlap)), 0px) + var(--avatar-outline, 0.125rem));
padding-block: var(--avatar-stack-padding-block-start, var(--avatar-outline, 0.125rem))
var(--avatar-stack-padding-block-end, 0.375rem);
flex-shrink: 0;
fluxer_app/src/features/ui/components/BaseAvatar.tsx
+2 -2
View File
@@ -150,13 +150,13 @@ export const BaseAvatar = React.forwardRef<HTMLDivElement, BaseAvatarProps>(
const animatedMediaPlaybackAllowed = useAnimatedMediaPlaybackAllowed({enabled: animatedMediaPlaybackEnabled});
const normalizedStatus = status == null ? null : normalizeStatus(status);
const renderableStatus = resolveRenderableStatus(normalizedStatus);
const layout = getAvatarStatusLayout(size, isMobileStatus);
const isMobileOnline = isMobileStatus && renderableStatus === StatusTypes.ONLINE && !isTyping;
const layout = getAvatarStatusLayout(size, isMobileOnline);
const rawDynamicMaskId = useId();
const dynamicAvatarMaskId = useMemo(
() => `svg-mask-avatar-dynamic-${rawDynamicMaskId.replace(/[^A-Za-z0-9_-]/g, '_')}`,
[rawDynamicMaskId],
);
const isMobileOnline = isMobileStatus && renderableStatus === StatusTypes.ONLINE && !isTyping;
const hasCustomStatusBadge = customStatusBadge != null;
const shouldShowPresenceStatus =
isTyping || (normalizedStatus != null && (showOffline || renderableStatus !== StatusTypes.OFFLINE));
fluxer_app/src/features/ui/scroller/ScrollerTrack.module.css
+2 -2
View File
@@ -12,8 +12,8 @@
}
.vertical {
inset-block-start: var(--scroller-track-block-start-inset, 0);
inset-block-end: var(--scroller-track-block-end-inset, 0);
inset-block-start: var(--scroller-track-block-start-inset, 0px);
inset-block-end: var(--scroller-track-block-end-inset, 0px);
inset-inline-end: 0;
width: var(--scroller-track-size);
}
fluxer_app/src/features/ui/sheet/Sheet.module.css
+6 -6
View File
@@ -7,7 +7,7 @@
--sheet-transition-duration: 220ms;
--sheet-transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
--sheet-top-gap: 2.125rem;
--sheet-viewport-offset-bottom: 0;
--sheet-viewport-offset-bottom: 0px;
position: fixed;
inset: 0;
overflow: hidden;
@@ -42,7 +42,7 @@
display: flex;
flex-direction: column;
width: 100%;
height: calc(var(--sheet-viewport-height, 100dvh) - env(safe-area-inset-top, 0) - var(--sheet-top-gap));
height: calc(var(--sheet-viewport-height, 100dvh) - env(safe-area-inset-top, 0px) - var(--sheet-top-gap));
max-height: calc(100dvh - var(--sheet-viewport-offset-bottom));
border-top-left-radius: 1.5rem;
border-top-right-radius: 1.5rem;
@@ -92,7 +92,7 @@
display: flex;
width: 100%;
justify-content: center;
padding: calc(0.75rem + env(safe-area-inset-top, 0)) 0 0.75rem;
padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 0 0.75rem;
background-color: var(--sheet-surface, var(--background-secondary));
}
@@ -114,7 +114,7 @@
}
.headerSafeArea {
padding-top: calc(0.75rem + env(safe-area-inset-top, 0));
padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
}
.headerPaddingSm {
@@ -217,7 +217,7 @@
overflow-x: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
.contentNoPadding .contentInner {
@@ -235,7 +235,7 @@
.footer {
padding: 1rem;
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
background-color: var(--sheet-surface, var(--background-secondary));
}
fluxer_app/src/features/ui/toast/Toasts.module.css
+4 -4
View File
@@ -9,23 +9,23 @@
.containerMobile {
right: 1rem;
left: 1rem;
top: calc(1rem + env(safe-area-inset-top, 0));
top: calc(1rem + env(safe-area-inset-top, 0px));
display: flex;
justify-content: center;
}
.containerDesktop {
transform: translateX(-50%);
top: calc(1.5rem + env(safe-area-inset-top, 0));
top: calc(1.5rem + env(safe-area-inset-top, 0px));
left: 50%;
}
:global(html.platform-native:not(.platform-macos) #toast-portal-root) .containerDesktop {
top: calc(1.5rem + env(safe-area-inset-top, 0) + var(--native-titlebar-height, 0));
top: calc(1.5rem + env(safe-area-inset-top, 0px) + var(--native-titlebar-height, 0px));
}
:global(html.platform-native:not(.platform-macos) #toast-portal-root) .containerMobile {
top: calc(1rem + env(safe-area-inset-top, 0) + var(--native-titlebar-height, 0));
top: calc(1rem + env(safe-area-inset-top, 0px) + var(--native-titlebar-height, 0px));
}
.toastWrapper {
fluxer_app/src/features/user/components/modals/MutualItemsSheet.module.css
+1 -1
View File
@@ -20,7 +20,7 @@
.list {
padding: 0.5rem 1rem;
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
.sectionDivider {
fluxer_app/src/features/user/components/modals/NoteEditSheet.module.css
+1 -1
View File
@@ -35,7 +35,7 @@
.content {
flex: 1;
padding: 1rem;
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
.label {
fluxer_app/src/features/user/components/modals/tabs/appearance_tab/InterfaceTab.module.css
+3 -3
View File
@@ -39,8 +39,8 @@
.typingAvatars {
height: 1.25rem;
--avatar-stack-padding-block-start: 0;
--avatar-stack-padding-block-end: 0;
--avatar-stack-extra-height: 0;
--avatar-stack-padding-block-start: 0px;
--avatar-stack-padding-block-end: 0px;
--avatar-stack-extra-height: 0px;
--avatar-stack-outline-color: var(--background-secondary);
}
fluxer_app/src/features/user/components/profile/UserProfileLoadingSkeleton.module.css
+1 -1
View File
@@ -6,7 +6,7 @@
--profile-skeleton-fill-strong: var(--background-tertiary);
--profile-skeleton-border-color: var(--brand-primary);
--profile-skeleton-radius: 0.375rem;
--profile-skeleton-border-width: 0;
--profile-skeleton-border-width: 0px;
--profile-skeleton-width: 100%;
--profile-skeleton-height: 100%;
--profile-skeleton-content-gap: 0.625rem;
fluxer_app/src/features/voice/components/CompactVoiceCallView.module.css
+10 -9
View File
@@ -105,8 +105,9 @@
justify-content: center;
background: #000;
padding: var(--compact-call-audio-avatar-padding-top)
max(var(--compact-call-edge-padding), env(safe-area-inset-right, 0)) var(--compact-call-audio-avatar-padding-bottom)
max(var(--compact-call-edge-padding), env(safe-area-inset-left, 0));
max(var(--compact-call-edge-padding), env(safe-area-inset-right, 0px))
var(--compact-call-audio-avatar-padding-bottom)
max(var(--compact-call-edge-padding), env(safe-area-inset-left, 0px));
}
.audioAvatarLayoutInner {
@@ -147,7 +148,7 @@
display: flex;
flex-direction: column;
position: relative;
--voice-call-horizontal-padding: 0;
--voice-call-horizontal-padding: 0px;
container-type: size;
overflow: hidden;
}
@@ -167,7 +168,7 @@
}
.layoutHostFullHeightGrid {
--voice-call-horizontal-padding: 0;
--voice-call-horizontal-padding: 0px;
padding-left: 0;
padding-right: 0;
padding-top: var(--compact-call-content-safe-top);
@@ -175,7 +176,7 @@
}
.layoutHostFullHeightFocus {
--voice-call-horizontal-padding: 0;
--voice-call-horizontal-padding: 0px;
--voice-participants-toggle-bottom: calc(var(--compact-call-control-reserve) + 0.5rem);
padding-left: 0;
padding-right: 0;
@@ -205,8 +206,8 @@
.fullscreenButtonWrap {
position: absolute;
right: max(0.75rem, env(safe-area-inset-right, 0));
bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
right: max(0.75rem, env(safe-area-inset-right, 0px));
bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
z-index: 13;
display: flex;
align-items: center;
@@ -216,8 +217,8 @@
.heightToggleButtonWrap {
position: absolute;
left: max(0.75rem, env(safe-area-inset-left, 0));
bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
left: max(0.75rem, env(safe-area-inset-left, 0px));
bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
z-index: 13;
display: flex;
align-items: center;
fluxer_app/src/features/voice/components/PiPOverlay.module.css
+1 -1
View File
@@ -8,7 +8,7 @@
width: 20rem;
min-width: 15rem;
max-width: min(45rem, calc(100vw - 2.5rem));
max-height: calc(100svh - var(--native-titlebar-height, 0) - 2.5rem);
max-height: calc(100svh - var(--native-titlebar-height, 0px) - 2.5rem);
aspect-ratio: 16 / 9;
border-radius: 0.75rem;
overflow: hidden;
fluxer_app/src/features/voice/components/VoiceCallView.module.css
+21 -21
View File
@@ -338,8 +338,8 @@
}
.gridLayoutWrapperCompact {
padding: max(clamp(0.25rem, 1.6cqh, 0.4rem), var(--compact-call-content-safe-top, 0)) 0
max(clamp(0.35rem, 2cqh, 0.65rem), var(--compact-call-content-safe-bottom, 0));
padding: max(clamp(0.25rem, 1.6cqh, 0.4rem), var(--compact-call-content-safe-top, 0px)) 0
max(clamp(0.35rem, 2cqh, 0.65rem), var(--compact-call-content-safe-bottom, 0px));
}
.focusLayoutContainer {
@@ -415,11 +415,11 @@
--focus-expanded-mini-section-width: min(96cqw, 105rem);
--focus-expanded-mini-section-padding-inline: clamp(0.5rem, 1.2vw, 1.25rem);
--focus-expanded-mini-content-width: max(
0,
0px,
calc(var(--focus-expanded-mini-section-width) - (2 * var(--focus-expanded-mini-section-padding-inline)))
);
--focus-expanded-mini-column-width: max(
0,
0px,
calc(
(
var(--focus-expanded-mini-content-width) -
@@ -530,7 +530,7 @@
position: absolute;
left: 0;
right: 0;
bottom: var(--voice-focus-members-row-bottom, 0);
bottom: var(--voice-focus-members-row-bottom, 0px);
width: 100%;
height: var(--voice-focus-members-row-height, 7.25rem);
display: flex;
@@ -804,10 +804,10 @@
.focusLayoutContentFullscreen {
padding: 0;
--content-padding: 0;
--voice-focus-control-clearance: 0;
--voice-focus-members-row-height: 0;
--voice-focus-members-row-bottom: 0;
--content-padding: 0px;
--voice-focus-control-clearance: 0px;
--voice-focus-members-row-height: 0px;
--voice-focus-members-row-bottom: 0px;
}
.focusLayoutContentFullscreen .focusLayoutMainWrapper {
@@ -855,7 +855,7 @@
}
.focusLayoutContentAppFullscreen {
--voice-focus-control-clearance: calc(4.5rem + env(safe-area-inset-bottom, 0));
--voice-focus-control-clearance: calc(4.5rem + env(safe-area-inset-bottom, 0px));
--voice-focus-members-row-height: clamp(5.375rem, 13cqh, 7rem);
--voice-focus-members-row-bottom: var(--voice-focus-control-clearance);
--voice-focus-members-toggle-bottom: calc(var(--voice-focus-control-clearance) + 0.5rem);
@@ -879,7 +879,7 @@
left: 0;
right: 0;
bottom: 0;
height: calc(var(--voice-focus-members-row-bottom, 0) + var(--voice-focus-members-row-height, 7.25rem) + 2.5rem);
height: calc(var(--voice-focus-members-row-bottom, 0px) + var(--voice-focus-members-row-height, 7.25rem) + 2.5rem);
z-index: 1;
pointer-events: none;
background: linear-gradient(to top, rgb(0 0 0 / 0.7) 0%, rgb(0 0 0 / 0.55) 45%, rgb(0 0 0 / 0) 100%);
@@ -1072,7 +1072,7 @@
.voiceEdgeFadeTop::before {
--voice-edge-gradient: var(--voice-header-gradient);
top: 0;
bottom: calc(0 - var(--voice-edge-gradient-extension));
bottom: calc(0px - var(--voice-edge-gradient-extension));
z-index: -1;
}
@@ -1218,11 +1218,11 @@
.controlBarContainer {
--voice-control-horizontal-padding: 1rem;
--voice-control-top-padding: 0.5rem;
--voice-control-bottom-padding: calc(0.75rem + env(safe-area-inset-bottom, 0));
--voice-control-bottom-padding: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}
.fullscreenButtonWrap {
bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
right: 1rem;
}
}
@@ -1250,7 +1250,7 @@
width: 100%;
background-color: #000;
--voice-focus-safe-top: 4rem;
--voice-focus-safe-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0));
--voice-focus-safe-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}
.rootFocused .mainContent {
@@ -1356,13 +1356,13 @@
}
.mainContentGrid {
--voice-call-horizontal-padding: 0;
--voice-call-horizontal-padding: 0px;
}
.mainContentFocusFullscreen {
--voice-call-horizontal-padding: 0;
--voice-call-safe-top-padding: 0;
--voice-call-safe-bottom-padding: 0;
--voice-call-horizontal-padding: 0px;
--voice-call-safe-top-padding: 0px;
--voice-call-safe-bottom-padding: 0px;
position: relative;
inset: auto;
height: 100%;
@@ -1406,7 +1406,7 @@
background: transparent;
--voice-control-horizontal-padding: 1.5rem;
--voice-control-top-padding: 0.5rem;
--voice-control-bottom-padding: calc(0.75rem + env(safe-area-inset-bottom, 0));
--voice-control-bottom-padding: calc(0.75rem + env(safe-area-inset-bottom, 0px));
padding-left: var(--voice-control-horizontal-padding);
padding-right: var(--voice-control-horizontal-padding);
padding-top: var(--voice-control-top-padding);
@@ -1417,7 +1417,7 @@
.fullscreenButtonWrap {
position: absolute;
right: clamp(1rem, 2vw, 2rem);
bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
z-index: 35;
display: flex;
align-items: center;
fluxer_app/src/features/voice/components/modals/MobileVideoViewer.module.css
+4 -4
View File
@@ -2,8 +2,8 @@
.container {
--mobile-video-hud-edge: 0.875rem;
--mobile-video-hud-safe-top: calc(var(--mobile-video-hud-edge) + env(safe-area-inset-top, 0));
--mobile-video-hud-safe-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
--mobile-video-hud-safe-top: calc(var(--mobile-video-hud-edge) + env(safe-area-inset-top, 0px));
--mobile-video-hud-safe-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
--mobile-video-hud-bg: rgb(0 0 0 / 0.58);
--mobile-video-hud-border: rgb(255 255 255 / 0.11);
--mobile-video-hud-button-bg: rgb(255 255 255 / 0.055);
@@ -65,11 +65,11 @@
}
.seekFeedbackBackward {
left: max(1.5rem, env(safe-area-inset-left, 0) + 1.5rem);
left: max(1.5rem, env(safe-area-inset-left, 0px) + 1.5rem);
}
.seekFeedbackForward {
right: max(1.5rem, env(safe-area-inset-right, 0) + 1.5rem);
right: max(1.5rem, env(safe-area-inset-right, 0px) + 1.5rem);
}
.hudOverlay {