mirror of
https://github.com/zulip/zulip.git
synced 2026-07-18 21:04:19 +08:00
e44723f79d
This fixes CSS issues such as removing padding with negative margins and then re-adding padding back later. It also ensures the width of the picker is exactly six columns wide and does not shift around when zoom is enabled in the browser.
151 lines
2.8 KiB
CSS
151 lines
2.8 KiB
CSS
.message_reactions {
|
|
padding-left: 46px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.message_reactions .message_reaction {
|
|
float: left;
|
|
margin: 0.15em;
|
|
padding: 0 2px 0 0;
|
|
height: 19px;
|
|
cursor: pointer;
|
|
background-color: #eef7fa;
|
|
border: 1px solid #c7dfe6;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.message_reactions .message_reaction .emoji {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
top: -3px;
|
|
margin: 0px;
|
|
|
|
transform: scale(0.70);
|
|
transform-origin: 50% 50%;
|
|
-moz-transform: scale(0.70);
|
|
-moz-transform-origin: 50% 50%;
|
|
}
|
|
|
|
.message_reactions .message_reaction_count {
|
|
position: relative;
|
|
top: 4px;
|
|
font-size: 0.8em;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
color: #0088CC;
|
|
margin: 0px 1px 0px 0px;
|
|
line-height: 1em;
|
|
}
|
|
|
|
.message_reactions .reaction_button .message_reaction_count {
|
|
top: 0.5px;
|
|
}
|
|
|
|
.message_reactions i {
|
|
font-size: 1.3em;
|
|
float: left;
|
|
color: #555;
|
|
}
|
|
|
|
.message_reactions .reaction_button:not(:only-child) {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.message_reactions:hover .message_reaction + .reaction_button {
|
|
visibility: visible;
|
|
pointer-events: all;
|
|
background-color: #fafafa;
|
|
color: #bbb;
|
|
}
|
|
|
|
.message_reactions .reaction_button i {
|
|
font-size: 1em;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.message_reactions .reaction_button:hover i {
|
|
color: #0088CC;
|
|
}
|
|
|
|
|
|
.message_reactions .reaction_button:only-child {
|
|
display: none;
|
|
}
|
|
|
|
.message_reactions .message_reaction + .reaction_button {
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
margin: 2px 0.1em 3px 0.1em;
|
|
padding: 3px;
|
|
height: 14px;
|
|
border-radius: 4px;
|
|
padding-left: 0.3em;
|
|
border: thin solid #bbb;
|
|
padding-right: 0.3em;
|
|
float: left;
|
|
}
|
|
|
|
.message_reactions .reaction_button:hover {
|
|
border: thin solid #add8e6;
|
|
background-color: #eef7fa;
|
|
cursor: pointer;
|
|
opacity: 1.0;
|
|
color: #0088CC;
|
|
}
|
|
|
|
.message_reactions .reaction_button .message_reaction_count {
|
|
font-size: 1.1em;
|
|
color: #555;
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.message_reactions .reaction_button:hover .message_reaction_count {
|
|
color: #0088CC;
|
|
}
|
|
|
|
.reaction-popover {
|
|
display: inline-block;
|
|
width: 231px;
|
|
}
|
|
|
|
.reaction-popover-top {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.reaction-popover-top .icon-vector-search {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
padding: 8px;
|
|
color: #bbb;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.reaction-popover-filter {
|
|
width: calc(100% - 48px);
|
|
margin: auto;
|
|
padding-left: 3em;
|
|
}
|
|
|
|
.reaction-popover-emoji-map {
|
|
margin: 0;
|
|
padding: 0.5em 0;
|
|
overflow: hidden;
|
|
overflow-y: scroll;
|
|
display: inline-block;
|
|
height: 16.5em;
|
|
}
|
|
|
|
.reaction-popover-reaction {
|
|
float: left;
|
|
margin: 0.1em;
|
|
padding: 0.3em;
|
|
cursor: pointer;
|
|
border: thin solid white;
|
|
border-radius: 0.5em;
|
|
}
|
|
|
|
.reaction-popover .reacted {
|
|
background-color: #eef7fa;
|
|
border-color: #add8e6;
|
|
}
|