Citador.styles.css

.citar-btn {
  cursor: pointer;
  margin: 3px 5px;
  padding: 2px 10px;
  background-color: rgb(10, 10, 10);
  border-radius: 3px;
  transition: all 200ms ease-in-out;
  -webkit-transition: all 200ms ease-in-out;
  opacity: 0.8;
  background-image: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_format_quote_white_48px.svg);
  background-size: 90% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: transparent !important;
}
.messages .message-group.compact .citar-btn {
  font-size: .8vh !important;
}

.citar-btn.hidden {
  display: none;
}
.citar-btn.cant-embed {
  background: #f04747;
  cursor: default;
  opacity: 1 !important;
  background-image:url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_close_white_48px.svg) !important;
}
.quote-close {
  opacity: .5; 
  float: right;
  width: 12px;
  height: 12px;
  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjQwIDQwIDIwIDIwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDQwIDQwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJQYWdlXzEiPg0KCTxwYXRoIGlkPSJDbG9zZSIgZmlsbD0iIzk5YWFiNSIgZD0iTTQwLjQ0NSw0Mi44NTNsMi40MDgtMi40MDhjMC41OTMtMC41OTMsMS41NTUtMC41OTMsMi4xNDcsMGw1LDVsNS01ICAgYzAuNTkzLTAuNTkzLDEuNTU0LTAuNTkzLDIuMTQ3LDBsMi40MDgsMi40MDhjMC41OTMsMC41OTMsMC41OTMsMS41NTQsMCwyLjE0N2wtNSw1bDUsNWMwLjU5MywwLjU5MywwLjU5MiwxLjU1NCwwLDIuMTQ3ICAgbC0yLjQwOCwyLjQwOGMtMC41OTMsMC41OTMtMS41NTUsMC41OTMtMi4xNDcsMGwtNS01bC01LDVjLTAuNTkzLDAuNTkzLTEuNTU0LDAuNTkzLTIuMTQ3LDBsLTIuNDA4LTIuNDA4ICAgYy0wLjU5My0wLjU5My0wLjU5My0xLjU1NCwwLTIuMTQ3bDUtNWwtNS01QzM5Ljg1Miw0NC40MDcsMzkuODUyLDQzLjQ0NSw0MC40NDUsNDIuODUzeiIvPg0KPC9nPg0KPC9zdmc+); 
  background-size: cover; 
  transition: opacity .1s ease-in-out; 
  cursor: pointer;
  margin-right: 10px;
}
.quote-close:hover {opacity: 1}
.delete-msg-btn:hover {opacity: 1;}
.delete-msg-btn {
  opacity: 0;
  float: right;
  width: 16px;
  height: 16px;
  background-size: 16px 16px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8ZyBpZD0iZWRpdG9yaWFsXy1fdHJhc2hfY2FuIj4KCTxnPgoJCTxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik01LDYuNUg0djZoMVY2LjV6IE0xNC41LDJIMTBWMC41QzEwLDAuMiw5LjgsMCw5LjUsMGgtNEM1LjIsMCw1LDAuMiw1LDAuNVYySDAuNUMwLjIsMiwwLDIuMiwwLDIuNQoJCQlTMC4yLDMsMC41LDNIMXYxMmMwLDAuNiwwLjQsMSwxLDFoMTFjMC42LDAsMS0wLjQsMS0xVjNoMC41QzE0LjgsMywxNSwyLjgsMTUsMi41UzE0LjgsMiwxNC41LDJ6IE02LDFoM3YxSDZWMXogTTEzLDE0LjUKCQkJYzAsMC4zLTAuMiwwLjUtMC41LDAuNWgtMTBDMi4yLDE1LDIsMTQuOCwyLDE0LjVWM2gxMVYxNC41eiBNOCw1LjVIN3Y3aDFWNS41eiBNMTEsNi41aC0xdjZoMVY2LjV6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==);
  cursor: pointer;
  transition: opacity 200ms ease-in-out;
  -webkit-transition: opacity 200ms ease-in-out;
}
.citador.ui-form-item .h5 {
  padding-top: 10px;
}
.citador-guilds .guild-inner {
  border-radius: 15px;
}
.citador-guilds .guild {
  display: inline-block;
  vertical-align:top;
  margin:2px;
}
.citador-guilds .avatar-small {
  transition: filter 10ms ease-in-out;
  width: 30px;
  height: 30px; 
  line-height: 30px; 
  font-size: 9.6px;
  text-align: center; 
  color: #fff;
  display: block;
  background-color: #2f3136;
  user-select: none;
  background-size: contain;
  border-radius: 50%;
}
.citador-guilds .avatar-small.disabled {
  filter: grayscale(1) brightness(0.6);
}

@keyframes citador-scale {
  to {transform: scale(1);}
}

.quote-msg .avatar-large:not(.da-large):hover:after,
.quote-msg .avatar-17mtNa .image-33JSyf:hover:after {
  animation: citador-scale 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation-fill-mode: forwards;
  transform: scale(0.7);
  content: '@';
  position: relative;
  left: -2px;
  top: -2px;
  background-color: #397fde;
  box-shadow: rgba(0, 0, 0, 0.247059) 0 1px 0, rgba(255, 255, 255, 0.14902) 0 1px 0 inset;
  color: rgb(238,238,238);
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  display: inline-block;
  text-shadow: rgba(0, 0, 0, 0.247059) 0 1px 0;
  border-radius: 50%;
  padding: 0 3px 3px 2px;
}