The Wiki Camp 2

Difference between revisions of "Template:Discord container"

Template Discussion
m
 
(23 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{#css:
+
<onlyinclude>{{#css:
 
.discord-message-inner {
 
.discord-message-inner {
 
font-family: "Open Sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 
font-family: "Open Sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
Line 33: Line 33:
 
.discord-message-header {
 
.discord-message-header {
 
color: rgb(163, 166, 170);
 
color: rgb(163, 166, 170);
−
height: 22px;
 
 
line-height: 22px;
 
line-height: 22px;
 
position: relative;
 
position: relative;
Line 55: Line 54:
 
}
 
}
 
.discord-container {
 
.discord-container {
−
background: #36393e;
+
background: #313338;
 
max-width: 440px;
 
max-width: 440px;
 
padding-bottom:17px;
 
padding-bottom:17px;
 
overflow:hidden;
 
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;
 
}
 
}
  
Line 77: Line 93:
 
}
 
}
 
.discord-spoiler:not(.mw-collapsed) {
 
.discord-spoiler:not(.mw-collapsed) {
−
background: #202325;
+
background: #202225;
−
padding: 3px 0;
 
 
border-radius: 3px;
 
border-radius: 3px;
 
}
 
}
 
.discord-spoiler:not(.mw-collapsed):hover, .discord-spoiler:not(.mw-collapsed):active {
 
.discord-spoiler:not(.mw-collapsed):hover, .discord-spoiler:not(.mw-collapsed):active {
−
background: #25272A;
+
background: #242629;
 
}
 
}
 
.discord-spoiler.mw-collapsed + .discord-spoiler-expanded {
 
.discord-spoiler.mw-collapsed + .discord-spoiler-expanded {
−
background: #8F8F9C;
+
background: rgba(255, 255, 255, 0.1);
−
padding: 3px 0;
 
 
border-radius: 3px;
 
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)); }
 
}
 
}
 
}}
 
}}
−
<div class="discord-container">{{{1}}}</div><noinclude>
+
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:Forms of communication]]
−
</noinclude>
+
[[Category:Discord templates]]

Latest revision as of 04:52, 24 April 2024

{{{1}}}

Acts as a wrapper for discord messages, including all the css required for discord message specific templates.

January 31, 2023
Coppersalts pfp.png
coppersalts01/31/2023 at 2:49 PM
I'm just inspect elementing discord and copying the css.
Coppersalts pfp.png
coppersalts01/31/2023 at 2:49 PM
sphinx of black quartz, judge my vow spoiler textspoiler text, inline code
Coppersalts pfp.png
coppersalts01/31/2023 at 2:49 PM
uh, guys??? gets scared
40x40px
Nerpaseymour01/31/2023 at 2:49 PM
look at this thang Okinberries.png
Twm 1f60b.png
2
3
Coppersalts pfp.png
coppersalts01/31/2023 at 2:50 PM
you can use twemoji here using the twemoji template Twm 1f600.png and template Discord link    stuff  
April 8, 2025
Coppersalts pfp.pngcoppersalts
you can use twemoji here using the twemoji template Twm 1f600.png
Bintiling pfp 256.png
PseudosphereToday at 9:58 PM
There's now also a reply template. And an edit template. (edited)
Bintiling pfp 256.png
PseudosphereToday at 9:58 PM
#include <stdio.h>
int main() {
puts("And a code template");
return 0;
}
And a thread templateSee thread ›
There are no messages in this thread yet.
Bintiling pfp 256.png
PseudosphereToday at 9:58 PM
And a
THIS SEAL WILL DIE!!!!!!!!!!!!!!!!!196883 Messages ›
DiaNikosus.png
THIS SEAL WILL DIE!!!!!!!!!!!!!!!!!
THIS SEAL WILL DIE!!!!!!!!!!!!!!!!!
8h ago

See also:

Retrieved from "https://camp2.rectangle.zone/index.php?title=Template:Discord_container&oldid=121645"