@derockdev/discord-components-core
Version:
Web components to easily build and display fake Discord messages on your webpages.
49 lines (44 loc) • 1.48 kB
CSS
@import url('https://fonts.bunny.net/css?family=roboto:400,500,700');
/* New Whitney fonts to match rebrading */
@font-face {
font-family: 'Whitney';
src: url('https://cdn.jsdelivr.net/gh/ItzDerock/discord-components@master/assets/fonts/Book.woff') format('woff');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'Whitney';
src: url('https://cdn.jsdelivr.net/gh/ItzDerock/discord-components@master/assets/fonts/Medium.woff') format('woff');
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: 'Whitney';
src: url('https://cdn.jsdelivr.net/gh/ItzDerock/discord-components@master/assets/fonts/Semibold.woff') format('woff');
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: 'Whitney';
src: url('https://cdn.jsdelivr.net/gh/ItzDerock/discord-components@master/assets/fonts/Bold.woff') format('woff');
font-weight: 700;
font-display: swap;
}
.discord-messages {
color: #fff;
background-color: #36393e;
display: block;
font-size: 16px;
font-family: Whitney, 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system, 'system-ui', 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
line-height: 170%;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.discord-messages.discord-light-theme {
color: #747f8d;
background-color: #fff;
border-color: #dedede;
}
.discord-messages.discord-no-background {
background-color: unset;
}