diff --git a/src/components/status.css b/src/components/status.css index 506eea10..b856e40e 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -1822,6 +1822,20 @@ a.card:is(:hover, :focus):visited { pointer-events: auto; transform: scale(1); } + .status:has(&):hover { + transition: background-color 0.1s ease-out 0.3s; + background-color: var(--bg-faded-blur-color); + } + + &.open { + button.more-button { + background-color: var(--outline-color); + } + + button:not(.more-button) { + opacity: 0.3; + } + } } /* BADGE */ @@ -1922,6 +1936,12 @@ a.card:is(:hover, :focus):visited { font-size: 80%; } +/* MENU OPEN */ + +.status-menu-open { + background-color: var(--link-bg-hover-color) !important; +} + /* FILTERED */ #filtered-status-peek { diff --git a/src/components/status.jsx b/src/components/status.jsx index d58db180..9e963112 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -1266,7 +1266,9 @@ function Status({ m: 'medium', l: 'large', }[size] - } ${_deleted ? 'status-deleted' : ''} ${quoted ? 'status-card' : ''}`} + } ${_deleted ? 'status-deleted' : ''} ${quoted ? 'status-card' : ''} ${ + isContextMenuOpen ? 'status-menu-open' : '' + }`} onMouseEnter={debugHover} onContextMenu={(e) => { // FIXME: this code isn't getting called on Chrome at all? @@ -1319,7 +1321,10 @@ function Status({ )} {showActionsBar && size !== 'l' && !previewMode && !readOnly && ( -