The Wiki Camp 2

Changes

Template:Discord container (view source)

Revision as of 04:52, 24 April 2024

7,912 bytes added ,  04:52, 24 April 2024
m
no edit summary
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;
 
}
 
}
      −
.discord-spoiler-outer {
+
.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;
 
position: relative;
−
margin-left:-2px;
+
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-spoiler.mw-collapsed + .discord-spoiler-inner, .discord-spoiler.mw-collapsed + .discord-spoiler-inner * {
+
.discord-top-line {
−
color: rgba(0, 0, 0, 0);
+
display: flex;
−
pointer-events:none;
+
font-size: 0.875rem;
 +
font-weight: 600;
 +
line-height: 1.125rem;
 
}
 
}
−
.discord-spoiler .mw-collapsible-toggle {
+
.discord-thread-title {
−
float: none;
+
color: rgb(242, 243, 245);
−
position:absolute;
+
margin-right: 8px;
−
left:0;
+
overflow: hidden;
−
width:100%;
+
text-overflow: ellipsis;
−
line-height: 1;
+
white-space: nowrap;
 
}
 
}
−
.discord-spoiler:not(.mw-collapsed) .mw-collapsible-toggle {
+
.discord-top-line > a {
−
display:none;
+
flex-shrink: 0;
 
}
 
}
−
.discord-spoiler .mw-collapsible-content {
+
.discord-thread:hover .discord-top-line > a {
−
display:inline;
+
text-decoration: underline;
 
}
 
}
−
.discord-spoiler.mw-collapsed .mw-collapsible-text {
+
.discord-bottom-line {
−
color: rgba(0, 0, 0, 0);
+
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-spoiler .mw-collapsible-toggle::before, .discord-spoiler .mw-collapsible-toggle::after {
+
.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: "";
 
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 {
−
.discord-spoiler:not(.mw-made-collapsible), .discord-spoiler:not(.mw-made-collapsible) a {
+
align-items: center;
−
color: rgba(0, 0, 0, 0);
+
display: flex;
−
pointer-events:none;
+
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 {
−
.discord-spoiler.mw-collapsible {
+
box-sizing: border-box;
 +
border-radius: 4px;
 
padding: 0;
 
padding: 0;
−
border-style: solid;
+
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;
−
border-width: 2px;
+
/*font-size: 0.75rem;
−
border-radius: 2px;
+
line-height: 1rem;*/
−
position:absolute;
+
margin-top: 6px;
−
left:0;
+
max-width: 90%;
−
width:calc(100% - 2px);
+
/*white-space: pre-wrap;*/
−
height:100%;
+
background-clip: border-box;
−
top:-2px;
   
}
 
}
−
.discord-spoiler.mw-collapsed:hover {
+
.discord-codeblock {
−
border-color: #25272A;
+
background: rgb(43, 45, 49);
−
background: #25272A;
+
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-spoiler.mw-collapsed:active {
+
.discord-edited {
−
border-color: #25272A;
+
color: rgb(148, 155, 164);
−
background: #25272A;
+
font-size: 0.625rem;
 +
font-weight: 400;
 +
line-height: 1;
 +
user-select: none;
 
}
 
}
−
.discord-spoiler.mw-collapsed {
+
.discord-divider {
−
border-color: #202325;
+
align-items: center;
−
background: #202325;
+
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-spoiler:not(.mw-collapsed) {
+
.discord-divider-content {
−
background: #8F8F9C;
+
background-color: rgb(49, 51, 56);
−
border-color: #8F8F9C;
+
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;
 
}
 
}
−
.discord-spoiler-inner {
+
}}<div class="discord-container">{{{1}}}</div></onlyinclude>{{#css:
−
position: relative;
+
@keyframes shake {
−
margin-left: 2px;
+
0%  { transform: translate(calc(0.2px * 5),  calc(0.2px * 5))  rotate(0deg); }
−
z-index: 2;
+
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]]
Pseudosphere
1,067

edits

Retrieved from "https://camp2.rectangle.zone/index.php?title=Special:MobileDiff/48946...121645"