mirror of
https://github.com/zulip/zulip.git
synced 2026-07-03 21:10:12 +08:00
1c697a42ff
Previously, due to a logic issue, the clear status icon did not appear when there is only selected emoji in the status—it appeared only when status text was present. This commit fixes the bug and now the clear status icon disappears only when neither status text nor a selected emoji is present. Fixes: #35176
94 lines
2.6 KiB
CSS
94 lines
2.6 KiB
CSS
#set-user-status-modal {
|
|
/* A narrower width is more attractive for this modal. */
|
|
width: 384px;
|
|
|
|
.user-status-content-wrapper {
|
|
display: grid;
|
|
grid-template:
|
|
"status-icon search-input clear-search" auto / auto minmax(0, 1fr)
|
|
auto;
|
|
align-items: center;
|
|
border: 1px solid;
|
|
border-color: hsl(0deg 0% 0% / 60%);
|
|
border-radius: 5px;
|
|
background-color: var(--color-background-input);
|
|
|
|
& input.user-status {
|
|
grid-area: search-input;
|
|
width: 100%;
|
|
border: none;
|
|
outline: none;
|
|
box-shadow: none;
|
|
/* Transparent here is to allow the input
|
|
background set on the wrapper to show
|
|
through. */
|
|
background-color: transparent;
|
|
margin: 0;
|
|
|
|
&:focus {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.clear_search_button {
|
|
grid-area: clear-search;
|
|
width: 40px;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.status-emoji-wrapper {
|
|
padding: 4px 8px;
|
|
border-right: 1px solid;
|
|
border-color: hsl(0deg 0% 0% / 60%);
|
|
cursor: pointer;
|
|
|
|
.selected-emoji {
|
|
width: 1.25em; /* 20px at 16px/em */
|
|
height: 1.25em; /* 20px at 16px/em */
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* For custom emojis and smiley icon to take full width. */
|
|
& img.selected-emoji,
|
|
.smiley-icon {
|
|
text-align: center;
|
|
min-width: 1.25em; /* 20px at 16px/em */
|
|
}
|
|
|
|
.smiley-icon {
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-status-options {
|
|
padding-top: 15px;
|
|
padding-left: 2px;
|
|
|
|
& button.user-status-value:hover,
|
|
& button.user-status-value:focus {
|
|
/* Important is required for generic night them styling to not
|
|
have precedence over this. */
|
|
color: var(--color-text-url) !important;
|
|
}
|
|
|
|
.user-status-value {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 3.5px 0;
|
|
line-height: 1em;
|
|
|
|
.status-emoji {
|
|
/* Size and align status emoji to match
|
|
the top line of the modal. */
|
|
height: 1.25em; /* 20px at 16px/em */
|
|
width: 1.25em; /* 20px at 16px/em */
|
|
margin: 0 7px;
|
|
}
|
|
}
|
|
}
|
|
}
|