From fce81367fb0df38882e4619d552090e1f02f7961 Mon Sep 17 00:00:00 2001 From: Hampus Date: Mon, 28 Sep 2026 17:29:15 +0200 Subject: [PATCH] fix(app): stop message text showing through the slowmode hint (#3017) --- fluxer_app/scripts/GenerateThemeVariables.ts | 2 +- .../textarea/InputWrapper.module.css | 23 +++++++++++-------- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/fluxer_app/scripts/GenerateThemeVariables.ts b/fluxer_app/scripts/GenerateThemeVariables.ts index 1f632885b..7e97aec72 100644 --- a/fluxer_app/scripts/GenerateThemeVariables.ts +++ b/fluxer_app/scripts/GenerateThemeVariables.ts @@ -559,7 +559,7 @@ const SKELETON_SURFACE_INVARIANTS: ReadonlyArray = [ }, { file: 'src/features/channel/components/textarea/InputWrapper.module.css', - requires: ['.composerRoot:has(.statusTypingSlot)::before'], + requires: ['.composerRoot:has(.statusTypingSlot, .statusSlowmodeSlot)::before'], }, { file: 'src/features/app/components/layout/GuildsLayout.module.css', diff --git a/fluxer_app/src/features/channel/components/textarea/InputWrapper.module.css b/fluxer_app/src/features/channel/components/textarea/InputWrapper.module.css index cf47dbe49..bbfd8251c 100644 --- a/fluxer_app/src/features/channel/components/textarea/InputWrapper.module.css +++ b/fluxer_app/src/features/channel/components/textarea/InputWrapper.module.css @@ -48,20 +48,25 @@ --composer-surface-fill: var(--composer-surface-color, var(--background-secondary-lighter)); } -.composerRoot:has(.statusTypingSlot)::before { +.composerRoot:has(.statusTypingSlot, .statusSlowmodeSlot)::before { content: ''; position: absolute; bottom: 100%; inset-inline: calc(-1 * var(--composer-box-inset-inline, 0px)); height: var(--composer-status-safe-area); - background: linear-gradient( - to bottom, - transparent 0%, - color-mix(in srgb, var(--composer-surface-fill) 48%, transparent) 26%, - color-mix(in srgb, var(--composer-surface-fill) 82%, transparent) 54%, - var(--composer-surface-fill) 78%, - var(--composer-surface-fill) 100% - ); + background: + radial-gradient(farthest-side at 0% 100%, var(--composer-surface-fill) 55%, transparent 100%) left bottom / + min(28rem, 70%) 160% no-repeat, + radial-gradient(farthest-side at 100% 100%, var(--composer-surface-fill) 55%, transparent 100%) right bottom / + min(18rem, 50%) 160% no-repeat, + linear-gradient( + to bottom, + transparent 0%, + color-mix(in srgb, var(--composer-surface-fill) 64%, transparent) 20%, + color-mix(in srgb, var(--composer-surface-fill) 92%, transparent) 40%, + var(--composer-surface-fill) 60%, + var(--composer-surface-fill) 100% + ); pointer-events: none; }