/* * ABDD Messages — Stage 4 persistent Details / Profile column * ABDD-STAGE-4 * * Product intent * -------------- * Desktop ABDD Messages follows the familiar Messenger information model: * Discussions | Conversation | Details. Element's native RightPanel remains * the functional source of truth; this stylesheet only changes presentation. * * Theme rule * ---------- * This file loads after abdd-messages-theme-modes.css and consumes the * semantic --abdd-* variables. It must therefore work in both ABDD Clair and * ABDD Sombre without hard-coding a second theme-selection mechanism. * * Behaviour rule * -------------- * `abdd-messages.js` opens Element's native RoomSummary phase on desktop. * We do not build a duplicate profile/settings panel and we do not alter * Matrix room, authentication, encryption or permission state. */ body.abdd-messages.cpd-theme-light, body.abdd-messages.cpd-theme-light-hc { --abdd-details-accent: var(--abdd-burgundy); --abdd-details-danger: #b3261e; } body.abdd-messages.cpd-theme-dark, body.abdd-messages.cpd-theme-dark-hc { --abdd-details-accent: var(--abdd-gold-light); --abdd-details-danger: #ff7b7b; } /* ------------------------------------------------------------------------- DETAILS COLUMN FOUNDATION ------------------------------------------------------------------------- */ body.abdd-messages .mx_RightPanel_ResizeWrapper, body.abdd-messages .mx_RightPanel, body.abdd-messages .abdd-conversation-details, body.abdd-messages .abdd-details-panel { background: var(--abdd-surface) !important; color: var(--abdd-text) !important; } @media (min-width: 1181px) { /* * The approved desktop shell fixes both outer columns at 360px. Once the * RightPanel is persistent its resize handle becomes a misleading affordance, * so Stage 4 removes only that desktop handle. Tablet/mobile stay native. */ body.abdd-messages[data-abdd-details-mode="persistent"] .mx_RightPanel_ResizeWrapper { flex: 0 0 var(--abdd-details-width) !important; width: var(--abdd-details-width) !important; min-width: var(--abdd-details-width) !important; max-width: var(--abdd-details-width) !important; margin-left: 0 !important; border-left: 1px solid var(--abdd-border) !important; box-sizing: border-box !important; } body.abdd-messages[data-abdd-details-mode="persistent"] .mx_RightPanel { width: 100% !important; min-width: 0 !important; max-width: none !important; height: calc(100vh - var(--abdd-header-height)) !important; margin-top: var(--abdd-header-height) !important; border-left: 0 !important; } body.abdd-messages[data-abdd-details-mode="persistent"] .mx_RightPanel_ResizeWrapper > .mx_ResizeHandle--horizontal { display: none !important; width: 0 !important; min-width: 0 !important; margin: 0 !important; } /* * A persistent desktop column should not expose a close action whose only * result would be an immediate automatic reopen. Back navigation remains * visible inside nested native views (members, files, threads, settings). */ body.abdd-messages[data-abdd-details-mode="persistent"] .mx_RightPanel [data-testid="base-card-close-button"] { display: none !important; } /* RoomSummary's header contains Element's inline search field. The target * Messenger hierarchy starts with contact identity, so we hide only the root * summary header on desktop. Nested cards keep their own native headers. */ body.abdd-messages[data-abdd-details-mode="persistent"] .mx_RoomSummaryCard > .mx_BaseCard_header { display: none !important; } } /* ------------------------------------------------------------------------- NATIVE BASE CARD SHELL ------------------------------------------------------------------------- */ body.abdd-messages .mx_RightPanel .mx_BaseCard { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; min-height: 0 !important; background: var(--abdd-surface) !important; color: var(--abdd-text) !important; } body.abdd-messages .mx_RightPanel .mx_BaseCard_header { flex: 0 0 auto !important; min-height: 52px !important; box-sizing: border-box !important; padding: 8px 12px !important; background: var(--abdd-surface) !important; color: var(--abdd-text) !important; border-bottom: 1px solid var(--abdd-border) !important; } body.abdd-messages .mx_RightPanel .mx_BaseCard_header_title, body.abdd-messages .mx_RightPanel .mx_BaseCard_header_title_heading { color: var(--abdd-text) !important; } body.abdd-messages .mx_RightPanel [data-testid="base-card-back-button"] { color: var(--abdd-details-accent) !important; border-radius: 999px !important; } body.abdd-messages .mx_RightPanel .mx_AutoHideScrollbar { flex: 1 1 auto !important; min-height: 0 !important; background: var(--abdd-surface) !important; color: var(--abdd-text) !important; scrollbar-color: var(--abdd-border-strong) transparent; } /* ------------------------------------------------------------------------- ROOM / CONTACT IDENTITY ------------------------------------------------------------------------- */ body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard_container { box-sizing: border-box !important; margin: 0 !important; padding: 24px 18px 14px !important; text-align: center !important; background: var(--abdd-surface) !important; color: var(--abdd-text) !important; } body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard_container [data-testid="avatar-img"] { --cpd-avatar-size: 88px !important; box-shadow: 0 0 0 3px var(--abdd-surface), 0 0 0 4px var(--abdd-border-strong) !important; } body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard_roomName { margin: 14px 12px 3px !important; color: var(--abdd-text) !important; font-size: 18px !important; line-height: 1.25 !important; font-weight: 700 !important; } body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard_alias, body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard_container [class*="Status"] { color: var(--abdd-text-muted) !important; } body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard_badges { margin: 12px 0 4px !important; gap: 6px !important; } body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard_badges [data-kind] { border-radius: 999px !important; background: var(--abdd-surface-soft) !important; color: var(--abdd-text-muted) !important; border: 1px solid var(--abdd-border) !important; } body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard_topic { box-sizing: border-box !important; margin: 12px 0 0 !important; padding: 10px 12px !important; border: 1px solid var(--abdd-border) !important; border-radius: var(--abdd-radius-md) !important; background: var(--abdd-surface-raised) !important; color: var(--abdd-text-muted) !important; text-align: left !important; } body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard_topic a, body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard_topic button { color: var(--abdd-details-accent) !important; } /* ------------------------------------------------------------------------- ROOM SUMMARY ACTIONS Element owns the action list and callbacks. We present its native menubar as a Messenger-like settings stack rather than replacing it with custom links. ------------------------------------------------------------------------- */ body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard [role="menubar"] { box-sizing: border-box !important; padding: 6px 10px 24px !important; background: var(--abdd-surface) !important; } body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard [role="menuitem"], body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard [role="menuitemcheckbox"] { box-sizing: border-box !important; width: 100% !important; min-height: 44px !important; margin: 2px 0 !important; padding: 10px 12px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: var(--abdd-text) !important; text-align: left !important; } body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard [role="menuitem"]:hover, body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard [role="menuitemcheckbox"]:hover { background: var(--abdd-hover) !important; } body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard [role="menuitem"] svg, body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard [role="menuitemcheckbox"] svg { color: var(--abdd-details-accent) !important; } body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard [role="menuitem"]:focus-visible, body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard [role="menuitemcheckbox"]:focus-visible, body.abdd-messages .mx_RightPanel button:focus-visible, body.abdd-messages .mx_RightPanel a:focus-visible { outline: 2px solid var(--abdd-details-accent) !important; outline-offset: -2px !important; } body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard [data-kind="critical"], body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard .mx_RoomSummaryCard_leave, body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard [data-kind="critical"] svg, body.abdd-messages .mx_RightPanel .mx_RoomSummaryCard .mx_RoomSummaryCard_leave svg { color: var(--abdd-details-danger) !important; } body.abdd-messages .mx_RightPanel [role="separator"] { height: 1px !important; margin: 8px 12px !important; background: var(--abdd-border) !important; border: 0 !important; } /* ------------------------------------------------------------------------- NESTED NATIVE DETAILS VIEWS Members, files, threads, notification and other phases stay inside the same third column. These rules normalize their surfaces without changing state. ------------------------------------------------------------------------- */ body.abdd-messages .mx_RightPanel .mx_MemberList, body.abdd-messages .mx_RightPanel .mx_MemberInfo, body.abdd-messages .mx_RightPanel .mx_FilePanel, body.abdd-messages .mx_RightPanel .mx_ThreadPanel, body.abdd-messages .mx_RightPanel .mx_ThreadView, body.abdd-messages .mx_RightPanel .mx_NotificationPanel, body.abdd-messages .mx_RightPanel .mx_TimelineCard, body.abdd-messages .mx_RightPanel .mx_ExtensionsCard { background: var(--abdd-surface) !important; color: var(--abdd-text) !important; } body.abdd-messages .mx_RightPanel input, body.abdd-messages .mx_RightPanel textarea, body.abdd-messages .mx_RightPanel [contenteditable="true"] { background: var(--abdd-surface-input) !important; color: var(--abdd-text) !important; border-color: var(--abdd-border) !important; border-radius: 18px !important; } body.abdd-messages .mx_RightPanel input::placeholder, body.abdd-messages .mx_RightPanel textarea::placeholder { color: var(--abdd-text-faint) !important; opacity: 1 !important; } body.abdd-messages .mx_RightPanel a { color: var(--abdd-details-accent) !important; } body.abdd-messages .mx_RightPanel p, body.abdd-messages .mx_RightPanel li, body.abdd-messages .mx_RightPanel h1, body.abdd-messages .mx_RightPanel h2, body.abdd-messages .mx_RightPanel h3, body.abdd-messages .mx_RightPanel h4 { color: inherit; } /* Keep the third column out of Stage 5 responsive behaviour for now. */ @media (max-width: 1180px) { body.abdd-messages .mx_RightPanel_ResizeWrapper, body.abdd-messages .mx_RightPanel, body.abdd-messages .abdd-conversation-details { width: revert !important; min-width: revert !important; max-width: revert !important; } }