zulip/web/styles/user_status.css

88 lines
2.3 KiB
CSS
Raw Normal View History

#set-user-status-modal {
/* A narrower width is more attractive for this modal. */
width: 384px;
.user-status-content-wrapper {
display: flex;
align-items: center;
border: 1px solid;
border-color: hsl(0deg 0% 0% / 60%);
border-radius: 5px;
2023-03-15 19:45:26 +01:00
& input.user-status {
width: 95%;
border: none;
background-color: transparent;
padding-right: 25px;
@media (width < $ml_min) {
width: 92%;
}
}
.status-emoji-wrapper {
padding: 4px 8px;
border-right: 1px solid;
border-color: hsl(0deg 0% 0% / 60%);
cursor: pointer;
.selected-emoji {
width: 20px;
height: 20px;
cursor: pointer;
/*
the following rule is not necessarily better than the one
from a6bef5154197b15c20445526fd3f219b4f2e5379 but it works.
*/
top: -2px;
}
/* For custom emojis and smiley icon to take full width. */
& img.selected-emoji,
2023-03-15 20:36:05 +01:00
.smiley-icon {
min-width: 20px;
}
2023-03-15 20:36:05 +01:00
.smiley-icon {
display: block;
font-size: 18px;
position: relative;
top: -2px;
left: 2px;
&:hover {
text-decoration: none;
}
}
}
}
.user-status-options {
padding-top: 15px;
2021-06-29 08:42:31 +02:00
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: hsl(200deg 100% 40%) !important;
}
.user-status-value {
display: flex;
align-items: center;
width: 100%;
margin-bottom: 7px;
line-height: 1em;
2023-03-15 21:56:35 +01:00
.status-emoji {
/* Size and align status emoji to match
the top line of the modal. */
height: 20px;
width: 20px;
margin: 0 7px;
}
}
}
}