paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 05:53:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

compose: Add muted, hover styles for recipient row.

Browse Source
This commit is contained in:
Karl Stolley
2024-10-28 09:53:22 -05:00
committed by Tim Abbott
parent 06696bc206
commit d772623d04
1 changed files with 82 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
web/styles/compose.css
View File

@@ -1221,6 +1221,88 @@ textarea.new_message_textarea {
width: 100%;
}
/* We want transitions to run only on user interactions with
the mouse, once the compose box is open. Any keyboard
interactions (e.g., Shift-Tabbing from the compose textarea
to the topic box) show instant changes, so we don't need to
accommodate them here. */
#compose.compose-box-open:hover {
.muted-recipient-row {
#compose_select_recipient_widget,
#compose_recipient_box {
transition: 250ms ease;
transition-delay: 150ms;
transition-property: background-color, border-color;
}
&#compose-recipient {
.decorated-channel-name,
.zulip-icon-chevron-down,
.conversation-arrow,
#stream_message_recipient_topic {
transition: 250ms ease;
transition-delay: 150ms;
transition-property: opacity;
}
}
}
}
/* For now, we're restricting muted recipient-row styles
to stream topics only, as restyling DM pills will
will take additional work. */
.muted-recipient-row:not(.compose-recipient-direct-selected) {
&#compose-recipient {
.decorated-channel-name,
.conversation-arrow,
#stream_message_recipient_topic {
opacity: 0.9;
}
.zulip-icon-chevron-down {
opacity: 0;
}
}
#compose_select_recipient_widget,
#compose_recipient_box {
background-color: transparent;
border-color: transparent;
/* We don't want to trigger the recipient-box-wide hover
effects when someone is just hovering the new-topic
button. */
&:not(:has(#recipient_box_clear_topic_button:hover)):hover {
background-color: var(
--color-compose-recipient-box-background-color
);
border-color: var(--color-compose-recipient-box-border-color);
opacity: 1;
.decorated-channel-name,
.zulip-icon-chevron-down,
.conversation-arrow,
#stream_message_recipient_topic {
opacity: 1;
}
}
#recipient_box_clear_topic_button:hover {
opacity: 1;
}
}
#compose_select_recipient_widget.widget-open {
background-color: var(--color-background-dropdown-widget-button);
border-color: var(--color-compose-recipient-box-border-color);
.decorated-channel-name,
.zulip-icon-chevron-down {
opacity: 1;
}
}
}
.compose-send-or-save-button {
border-radius: 4px;
border: 0;