mirror of
https://github.com/zulip/zulip.git
synced 2025-10-23 04:52:12 +00:00
cdea8e9d51
As a follow-up to the previous commit, this commit improves the styling of the custom user status picker input. The changes in this commit adjust the styling of the input field towards the new redesigned inputs while shying away from using the input component to avoid the complexity involved in including the status emoji selector in the input component.
103 lines
3.1 KiB
CSS
103 lines
3.1 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;
|
|
outline: 1px solid hsl(0deg 0% 0% / 60%);
|
|
outline-offset: -1px;
|
|
border-radius: 4px;
|
|
background-color: var(--color-background-input);
|
|
|
|
& input.user-status {
|
|
grid-area: search-input;
|
|
line-height: 1.25em; /* 20px at 16px/em */
|
|
padding: 0.5em 0.125em; /* 8px 2px at 16px/1em */
|
|
width: 100%;
|
|
/* Override default input height */
|
|
height: unset;
|
|
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_status_message_button {
|
|
grid-area: clear-search;
|
|
padding: 0.5em; /* 8px at 16px/1em */
|
|
margin: 0.125em; /* 2px at 16px/1em */
|
|
}
|
|
|
|
.status-emoji-wrapper {
|
|
display: flex;
|
|
padding: 0.375em; /* 6px at 16px/1em */
|
|
margin: 0.125em; /* 2px at 16px/1em */
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
|
|
.selected-emoji,
|
|
.smiley-icon {
|
|
width: 1.25em; /* 20px at 16px/em */
|
|
height: 1.25em; /* 20px at 16px/em */
|
|
cursor: pointer;
|
|
}
|
|
|
|
.smiley-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--color-modal-selectable-icon);
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(
|
|
--background-color-modal-selectable-icon-hover
|
|
);
|
|
|
|
.smiley-icon {
|
|
color: var(--color-modal-selectable-icon-hover);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-status-options {
|
|
padding-top: 15px;
|
|
|
|
.user-status-value {
|
|
/* We set the gap between the status emoji and text
|
|
in the default user status options to match the gap
|
|
between the corresponding emoji and text of the
|
|
custom user status input.
|
|
6px (emoji button padding)
|
|
+ 2px (emoji button margin)
|
|
+ 2px (input padding) */
|
|
gap: 0.625em; /* 10px at 16px/em */
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|