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