zulip/static/styles/reactions.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;
}