feat(discord-embed-description): add styles for nested HTML tags (#195)

Co-authored-by: Jeroen Claassens <support@favware.tech>
skyra-project · Jan 12, 2022 · 6ee7b9f · 6ee7b9f
1 parent b34624a
commit 6ee7b9f
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 0 deletions.
diff --git a/packages/core/src/components/discord-embed-description/discord-embed-description.css b/packages/core/src/components/discord-embed-description/discord-embed-description.css
@@ -7,3 +7,78 @@
 	min-width: 0;
 	white-space: pre-line;
 }
+
+.discord-embed .discord-embed-description code {
+	background-color: #202225;
+	padding: 2.5px;
+	border-radius: 3px;
+}
+
+.discord-light-theme .discord-embed-description code {
+	background-color: #e3e5e8;
+}
+
+.discord-embed .discord-embed-description code.multiline {
+	display: block;
+	padding: 7px;
+	border-radius: 4px;
+	white-space: break-spaces;
+}
+
+.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);
+}
diff --git a/packages/core/src/index.html b/packages/core/src/index.html
@@ -396,6 +396,30 @@ <h3 class="title">Full embed example</h3>
 						</discord-embed>
 					</discord-message>
 				</discord-messages>
+				<h3 class="title">Embed description built-in styling example</h3>
+				<discord-messages>
+					<discord-message profile="skyra">
+						<discord-embed slot="embeds" color="#0F52BA">
+							<discord-embed-description slot="description">
+								You can use several HTML tags to get discord-like styling in your embed description:
+								<ul>
+									<li>&lt;code&gt;content&lt;/code&gt; for <code>content</code><br /></li>
+									<li>&lt;code class="multiline"&gt;content&lt;/code&gt; for <code class="multiline">content</code></li>
+									<li>
+										&lt;pre&gt;content&lt;/pre&gt; for
+										<pre>content</pre>
+									</li>
+									<li>&lt;img class="emoji" /&gt; for <img class="emoji" src="/static/sapphire.png" /></li>
+									<li>
+										&lt;blockquote&gt;content&lt;/blockquote&gt; for
+										<blockquote>content</blockquote>
+									</li>
+									<li>&lt;span class="spoiler"&gt;content&lt;/span&gt; for <span class="spoiler">content</span></li>
+								</ul>
+							</discord-embed-description>
+						</discord-embed>
+					</discord-message>
+				</discord-messages>
 				<h3 class="title">Server crosspost messages</h3>
 				<discord-messages>
 					<discord-message profile="discordjs" timestamp="12/06/2021">