@derockdev/discord-components-core
Version:
Web components to easily build and display fake Discord messages on your webpages.
68 lines (56 loc) • 1.48 kB
CSS
.discord-embed .discord-embed-description {
font-size: 0.875rem;
font-weight: 400;
grid-column: 1/1;
line-height: 1.125rem;
margin-top: 8px;
min-width: 0;
white-space: pre-line;
}
.discord-embed .discord-embed-description pre {
margin: 0;
margin-top: 6px;
}
.discord-embed .discord-embed-description img.emoji {
width: 22px;
height: 22px;
}
.discord-embed .discord-embed-description blockquote {
position: relative;
padding: 0 8px 0 12px;
margin: 0;
}
.discord-embed .discord-embed-description blockquote::before {
content: '';
display: block;
position: absolute;
left: 0;
height: 100%;
width: 4px;
border-radius: 4px;
background-color: #4f545c;
}
.discord-light-theme .discord-embed-description blockquote::before {
background-color: #c7ccd1;
}
.discord-embed .discord-embed-description .spoiler {
background-color: #202225;
color: transparent;
cursor: pointer;
}
.discord-light-theme .discord-embed .discord-embed-description .spoiler {
background-color: #b9bbbe;
}
.discord-embed .discord-embed-description .spoiler:hover {
background-color: rgba(32, 34, 37, 0.8);
}
.discord-light-theme .discord-embed .discord-embed-description .spoiler:hover {
background-color: rgba(185, 187, 190, 0.8);
}
.discord-embed .discord-embed-description .spoiler:active {
color: inherit;
background-color: hsla(0, 0%, 100%, 0.1);
}
.discord-light-theme .discord-embed .discord-embed-description .spoiler:active {
background-color: rgba(0, 0, 0, 0.1);
}