Chat Component - Custom CSS

Community Show & Tell
1

In my opinion, the copy buttons are easy to miss:
image

I would like them to be a little more prominent, so custom CSS to the rescue!

no hover

image

:hover

image

button[aria-label="Copy"] {
  height: 32px;  
  width: 40px;
  padding: 5px 10px;
  box-shadow: 0 5px 4px #ccc;
  transition: all 200ms ease-in-out;

  & svg {
    margin: 0 auto;
  }
}

button[aria-label="Copy"]:hover {
  color: white !important;
  border-color: {{ theme.tertiary }} !important;
  background-color: {{ theme.primary }} !important;
}
3 Likes