View source for Template:Discord container

<onlyinclude>{{#css:
.discord-message-inner {
font-family: "Open Sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 16px;
margin-top: 17px;
overflow-wrap: break-word;
padding-bottom: 2px;
padding-left: 72px;
padding-right: 48px;
padding-top: 2px;
position: relative;
text-rendering: optimizelegibility;
user-select: text;
vertical-align: baseline;
-webkit-box-direction: normal;
-webkit-box-flex: 0;
white-space: break-spaces;
}
.discord-message-contents {
display:inline;
vertical-align: baseline;
}
.discord-message-contents > a:first-child {
border-radius: 50%;
margin-top: 2px;
overflow: hidden;
position: absolute;
left: 16px;
width: 40px;
height: 40px;
}
.discord-message-header {
color: rgb(163, 166, 170);
line-height: 22px;
position: relative;
}
.discord-message-timestamp {
margin-left:4px;
font-size: 12px;
}
.discord-message-text {
color: rgb(220, 221, 222);
line-height: 22px;
margin-left: -72px;
padding-left: 72px;
position: relative;
}
.discord-message a:not(.new) {
color: rgb(0, 175, 244);
}
.discord-message a.new {
color: #F42C00;
}
.discord-container {
background: #313338;
max-width: 440px;
padding-bottom:17px;
overflow:hidden;
}
.discord-container p {
margin: 0;
}
.discord-message-text code:not(.discord-codeblock) {
font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace;
width: auto;
height: auto;
padding: .2em;
margin: -.2em 0;
border-radius: 3px;
font-size: 85%;
text-indent: 0;
border: none;
white-space: pre-wrap;
color: rgb(220, 221, 222);
background: #2F3136;
}


.discord-spoiler .mw-collapsible-content {
display: inline;
}
.discord-spoiler .mw-collapsible-toggle {
float: none;
color: rgba(0,0,0,0);
}
.discord-spoiler .mw-collapsible-toggle * {
pointer-events: none;
color: rgba(0,0,0,0);
}
.discord-spoiler:not(.mw-collapsed) + .discord-spoiler-expanded {
display: none;
}
.discord-spoiler:not(.mw-collapsed) {
background: #202225;
border-radius: 3px;
}
.discord-spoiler:not(.mw-collapsed):hover, .discord-spoiler:not(.mw-collapsed):active {
background: #242629;
}
.discord-spoiler.mw-collapsed + .discord-spoiler-expanded {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
.discord-spoiler:not(.mw-collapsed) img {
visibility:hidden;
}
.discord-message-text .image img {
vertical-align: top;
}
.discord-message-context {
align-items: center;
color: #B5BAC1;
display: flex;
font-size: 0.875rem;
line-height: 1.125rem;
position: relative;
margin-bottom: 4px;
user-select: none;
white-space: pre;
}
.discord-message-context::before {
border-color: #4E5058;
border-top-left-radius: 6px;
border-style: solid;
border-width: 2px 0 0 2px;
box-sizing: border-box;
content: "";
display: block;
position: absolute;
bottom: 0;
left: -36px;
margin: -1px 4px -2px -1px;
right: 100%;
top: 50%;
}
.discord-message-context a:first-child {
flex: 0 0 auto;
margin-right: 0.25rem;
}
.discord-message-context a:first-child img {
border-radius: 50%;
}
.discord-replied-text-preview {
cursor: pointer;
flex: 0 1 auto;
overflow: hidden;
}
.discord-replied-text-preview:hover {
color: #F2F3F5;
}
.discord-replied-text-content {
pointer-events: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.discord-blockquote-divider {
background-color: rgb(78, 80, 88);
border-radius: 4px;
width: 4px;
}
.discord-blockquote-divider + blockquote {
box-sizing: border-box;
margin: 0;
max-width: 90%;
padding: 0 8px 0 12px;
text-indent: 0;
}
.discord-thread-container {
display: grid;
grid-auto-flow: row;
grid-row-gap: 0.25rem;
grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
height: fit-content;
min-height: 0;
min-width: 0;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
position: relative;
text-indent: 0;
}
.discord-thread {
align-self: start;
background-color: rgb(43, 45, 49);
border-radius: 4px;
cursor: pointer;
justify-self: start;
margin-top: 8px;
max-width: 480px;
min-width: 0;
padding: 8px;
}
.discord-top-line {
display: flex;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.125rem;
}
.discord-thread-title {
color: rgb(242, 243, 245);
margin-right: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.discord-top-line > a {
flex-shrink: 0;
}
.discord-thread:hover .discord-top-line > a {
text-decoration: underline;
}
.discord-bottom-line {
align-items: center;
color: rgb(181, 186, 193);
display: flex;
font-size: 0.875rem;
line-height: 1.125rem;
margin-top: 2px;
white-space: nowrap;
}
.discord-message-inner.has-thread::after {
border-bottom: 2px solid;
border-bottom-left-radius: 8px;
border-left: 2px solid;
color: rgb(78, 80, 88);
bottom: 29px;
content: "";
left: 2.2rem;
position: absolute;
top: 3rem;
width: 2rem;
}
.discord-thread-message {
align-items: center;
display: flex;
font-size: 0.875rem;
height: 18px;
line-height: 1.125rem;
min-width: 0;
}
.discord-thread-message img {
border-radius: 50%;
margin-right: 8px;
}
.discord-thread-username {
display: inline;
flex-shrink: 0;
font-weight: 500;
margin-right: 0.25rem;
opacity: 0.64;
overflow: hidden;
position: relative;
}
.discord-thread-text {
align-items: center;
display: flex;
flex: 0 1 auto;
overflow: hidden;
}
.discord-thread-timestamp {
color: rgb(148, 155, 164);
flex-shrink: 0;
font-size: 0.875rem;
line-height: 1.125rem;
margin-left: 8px;
}
.discord-pre {
box-sizing: border-box;
border-radius: 4px;
padding: 0;
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
/*font-size: 0.75rem;
line-height: 1rem;*/
margin-top: 6px;
max-width: 90%;
/*white-space: pre-wrap;*/
background-clip: border-box;
}
.discord-codeblock {
background: rgb(43, 45, 49);
border: 1px solid rgb(30, 31, 34);
border-radius: 4px;
color: hsl(210 9.1% 87.1%);
display: block;
font-size: 0.875rem;
line-height: 1.125rem;
scrollbar-color: rgb(30, 31, 34) rgb(43, 45, 49);
scrollbar-width: thin;
overflow-x: auto;
padding: .5em;
text-indent: 0;
text-size-adjust: none;
-webkit-text-size-adjust: none;
white-space: pre-wrap;
}
.discord-edited {
color: rgb(148, 155, 164);
font-size: 0.625rem;
font-weight: 400;
line-height: 1;
user-select: none;
}
.discord-divider {
align-items: center;
border-top: thin solid rgba(78, 80, 88, 0.48);
box-sizing: border-box;
display: flex;
flex: 0 0 auto;
height: 0;
justify-content: center;
left: auto;
margin: 1.5rem 0.875rem 0.5rem 1rem;
pointer-events: none;
position: relative;
right: auto;
z-index: 1;
}
.discord-divider-content {
background-color: rgb(49, 51, 56);
border-radius: 8px;
color: rgb(148, 155, 164);
display: block;
flex: 0 0 auto;
font-size: 12px;
font-weight: 600;
line-height: 13px;
margin-top: -1px;
padding: 2px 4px;
}
}}<div class="discord-container">{{{1}}}</div></onlyinclude>{{#css:
@keyframes shake {
0%   { transform: translate(calc(0.2px * 5),  calc(0.2px * 5))  rotate(0deg); }
10%  { transform: translate(calc(-0.2px * 5), calc(-0.4px * 5)) rotate(calc(-0.2deg * 5)); }
20%  { transform: translate(calc(-0.4px * 5), 0px)              rotate(calc( 0.2deg * 5)); }
30%  { transform: translate(calc(-0.4px * 5), calc(0.4px * 5))  rotate(0deg); }
40%  { transform: translate(calc(0.2px * 5),  calc(-0.2px * 5)) rotate(calc( 0.2deg * 5)); }
50%  { transform: translate(calc(-0.2px * 5), calc(0.4px * 5))  rotate(calc(-0.2deg * 5)); }
60%  { transform: translate(calc(-0.4px * 5), calc(0.2px * 5))  rotate(0deg); }
70%  { transform: translate(calc(0.4px * 5),  calc(0.2px * 5))  rotate(calc(-0.2deg * 5)); }
80%  { transform: translate(calc(-0.2px * 5), calc(-0.2px * 5)) rotate(calc( 0.2deg * 5)); }
90%  { transform: translate(calc(0.2px * 5),  calc(0.4px * 5))  rotate(0deg); }
100% { transform: translate(calc(0.2px * 5),  calc(0.2px * 5))  rotate(calc(-0.2deg * 5)); }
}
}}
Acts as a wrapper for discord messages, including all the css required for discord message specific templates.

{{Discord container|{{Discord divider|January 31, 2023}}{{Discord message
|time=01/31/2023 at 2:49 PM
|pfp=Coppersalts pfp.png
|name=coppersalts
|text=I'm just inspect elementing discord [[and]] copying the [[css]].
}}{{Discord message
|time=01/31/2023 at 2:49 PM
|pfp=Coppersalts pfp.png
|name=coppersalts
|text=<u>'''''sphinx of black quartz, judge my vow'''''</u>

{{Discord spoiler|spoiler text}}, <code>inline code</code>
|color=rgb(174, 115, 101)
}}{{Discord message
|time=01/31/2023 at 2:49 PM
|pfp=Coppersalts pfp.png
|name=coppersalts
|text=uh, guys??? ''gets scared''
|color=rgb(174, 115, 101)
}}{{Discord message
|time=01/31/2023 at 2:49 PM
|pfp=Nerpaseymour pfp.png
|name=Nerpaseymour
|text=look at this thang [[File:okinberries.png|link=Nerpy Scuba|20x20px]]
|color=#a6a383
|reactions={{Discord reaction|yum|2}}
}}{{Discord message
|time=01/31/2023 at 2:50 PM
|pfp=Coppersalts pfp.png
|name=coppersalts
|text=you can use twemoji here using the [[Template:Twemoji|twemoji template]] {{twm|grinning}}

and template [[Template:Discord link|Discord link]] {{dl|https://discord.com/channels/1011458414892814428/1011460318188277770/1011460503979184188}}
|color=rgb(174, 115, 101)
}}{{Discord divider}}{{Discord reply
|replypfp=Coppersalts pfp.png
|replyname=coppersalts
|replytext=you can use twemoji here using the [[Template:Twemoji|twemoji template]] {{twm|grinning}}
|replycolor=rgb(174, 115, 101)
|time=Today at 9:58 PM
|name=Pseudosphere
|text=There's now also a [[Template:Discord reply|reply template]].
And an [[Template:Discord edited|edit template]]. {{Discord edited}}
|color=rgb(242, 243, 245)
}}{{Discord message
|time=Today at 9:58 PM
|name=Pseudosphere
|has-thread=true
|text={{Discord quote|And a [[Template:Discord quote|quote template]].}}{{Discord codeblock|#include &lt;stdio.h&gt;<br/>int main() <nowiki>{</nowiki><br/>    puts("And a [[Template:Discord codeblock|code template]]");<br/>    return 0;<br/><nowiki>}</nowiki>}}{{Discord thread
|title=And a thread template
|link=Template:Discord thread
}}
}}{{Discord message
|time=Today at 9:58 PM
|name=Pseudosphere
|has-thread=true
|text=And a<div style="animation: 0.5s linear shake infinite;">{{Discord thread
|title=THIS SEAL WILL DIE!!!!!!!!!!!!!!!!!
|messages=196883
|time=8h ago
|pfp=Nikosus.png
|name=THIS SEAL WILL DIE!!!!!!!!!!!!!!!!!
|text=THIS SEAL WILL DIE!!!!!!!!!!!!!!!!!
|color=rgb(255, 250, 0)
}}</div>
}}}}

See also:
* [[Template:Discord message]]
* [[Template:Discord spoiler]]
* [[Template:Discord divider]]

[[Category:Forms of communication]]
[[Category:Discord templates]]