Difference between revisions of "Template:Discord container"

From The Wiki Camp 2
Jump to navigation Jump to search
m
 
(9 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 54: 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-message-text code {
+
.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;
 
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;
 
width: auto;
Line 105: Line 108:
 
.discord-message-text .image img {
 
.discord-message-text .image img {
 
vertical-align: top;
 
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.
 
Acts as a wrapper for discord messages, including all the css required for discord message specific templates.
  
−
{{Discord container|{{Discord message
+
{{Discord container|{{Discord divider|January 31, 2023}}{{Discord message
−
|time=Today at 2:49 PM
+
|time=01/31/2023 at 2:49 PM
 
|pfp=Coppersalts pfp.png
 
|pfp=Coppersalts pfp.png
 
|name=coppersalts
 
|name=coppersalts
−
|text=I'm ʤust inspect elementing discord [[and]] copying the [[css]].
+
|text=I'm just inspect elementing discord [[and]] copying the [[css]].
 
}}{{Discord message
 
}}{{Discord message
−
|time=Today at 2:49 PM
+
|time=01/31/2023 at 2:49 PM
 
|pfp=Coppersalts pfp.png
 
|pfp=Coppersalts pfp.png
 
|name=coppersalts
 
|name=coppersalts
Line 124: Line 359:
 
|color=rgb(174, 115, 101)
 
|color=rgb(174, 115, 101)
 
}}{{Discord message
 
}}{{Discord message
−
|time=Today at 2:49 PM
+
|time=01/31/2023 at 2:49 PM
 
|pfp=Coppersalts pfp.png
 
|pfp=Coppersalts pfp.png
 
|name=coppersalts
 
|name=coppersalts
Line 130: Line 365:
 
|color=rgb(174, 115, 101)
 
|color=rgb(174, 115, 101)
 
}}{{Discord message
 
}}{{Discord message
−
|time=Today at 2:49 PM
+
|time=01/31/2023 at 2:49 PM
 
|pfp=Nerpaseymour pfp.png
 
|pfp=Nerpaseymour pfp.png
 
|name=Nerpaseymour
 
|name=Nerpaseymour
Line 137: Line 372:
 
|reactions={{Discord reaction|yum|2}}
 
|reactions={{Discord reaction|yum|2}}
 
}}{{Discord message
 
}}{{Discord message
−
|time=Today at 2:50 PM
+
|time=01/31/2023 at 2:50 PM
 
|pfp=Coppersalts pfp.png
 
|pfp=Coppersalts pfp.png
 
|name=coppersalts
 
|name=coppersalts
Line 144: Line 379:
 
and template [[Template:Discord link|Discord link]] {{dl|https://discord.com/channels/1011458414892814428/1011460318188277770/1011460503979184188}}
 
and template [[Template:Discord link|Discord link]] {{dl|https://discord.com/channels/1011458414892814428/1011460318188277770/1011460503979184188}}
 
|color=rgb(174, 115, 101)
 
|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>
 
}}}}
 
}}}}
  
Line 149: Line 415:
 
* [[Template:Discord message]]
 
* [[Template:Discord message]]
 
* [[Template:Discord spoiler]]
 
* [[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 text
spoiler 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
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 3, 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"