Discord Chat Work Skin for AO3

README.md

Discord Work Skin for AO3

This Archive Of Our Own work skin mimics the layout of a Discord chat window.

Be sure to credit @wovenstarlight if using this work skin.

Notable features are annotated in comments, so that you can modify them if you'd like. (I would recommend only modifying the "role color" color attributes, or renaming them from "role#" to something more easily remembered.)

Usage guide

CSS

• Go to the following link: https://archiveofourown.org/skins/new?skin_type=WorkSkin
• Enter a recognizable name in the Title field, such as "Discord Display".
• Copy the entirety of the file Discord work skin.css and paste it in the "CSS" field, then hit save.

For instructions on how to make CUSTOM ROLES, check the very last class in the attached CSS file, titled YOUR_ROLE_HERE.

HTML

• Create the associated CSS work skin, as instructed above.
• Create a new work/chapter, or edit an existing one (if trying to add this to a multi-chapter work, edit the entire work).
• Scroll down to the "Work Text" section, and select the "HTML" editor. Copy the relevant sections of Discord work skin template.html into the text box at the appropriate positions. (You should have at least one <div> tag, either with the classes "discord darkmode" or "discord lightmode".)
• Preview the work to ensure it works as expected, then Update. (Double-check for any <p></p> tags, which should be removed.)

Notes

• Replaceable features include text, users, user profile pictures, and images.
  • Images: alter the src="link.goes.here" link to the image's direct URL. If an image is larger than 400px, add class="large" to it, so that it reads <img src="your.link.here" class="large" />
  • Icons: can be still images or gifs, and should be square, or they'll get squished to fit.
• Role colors
  • Standard Discord role colors are available as role1-role10, with darker versions available as role1a-role10a. Where it says <span class="name">, just change it to <span class="name role#">, with # being the corresponding number.
  • CUSTOM ROLE COLORS: AO3 doesn't let you adjust the color from the work. You'll have to add your custom color to the work skin. It's easy- simply go to the CSS, and alter the .YOUR_ROLE_HERE tag as per its instructions. You will then be able to write class="name YOUR_ROLE_HERE" in the HTML, and get your selected color.
• AO3 doesn't interact well with the <div> tag. When you save the HTML in the editor, then reopen the Edit page, AO3 often automatically adds <p></p> tags before them at random points. THIS CAN AND MAY RUIN THE FORMATTING OF THIS SKIN. Whenever editing, check to make sure there are no instances of <p></p> in the HTML.
• AO3 removes comments and often adds rel="nofollow" to links when saving a work. Don't worry about either of these.
• The code indentation might glitch out AO3 a little. If that happens, remove all the spacing. It'll look ugly in the editor, but it'll display properly when saved.

Have fun!

changelog.md

• 12/01/2021: Modified images so that they display properly on mobile, with the new class "large" added for images larger than 400px across.
• 25/03/2021: Added edited message notes and new date divider.
• 03/04/2021: Added multiple new features.
  • NEW: Top-of-channel headers, system messages (new server members (reference list for new server member messages) and pinned messages), channel descriptions (broken on mobile), channel header icons (mentions, pins, members) variants (new pins notification on or off)
  • ALTERED: Channel headers layout, typing bar file upload icon, parts of layout in HTML/CSS
• 26/07/2021: Streamlined underlying structures (conversion to grid layout) and made text/element sizes responsive. Fixed the channel description bug on mobile. Mention/ping styles updated. Added hover highlights to messages. Version 2 of CSS live.
• 01/08/2021: Removed outdated -webkit-gradient property for description's right-side fadeout.

Discord work skin template.html

<!-- Chapter 1: Basic light mode and dark mode -->
<!-- FOR DARK MODE (separate "discord" and "darkmode/lightmode" by a single space) -->
<div class="discord darkmode">

	<!-- CHANNEL HEADER -->
	<div class="channel">
		<p><span class="hash">#</span><span class="channelname">test-channel-name</span></p>
	</div>

	<!-- THE ACTUAL MESSAGES (each new user's messages in a separate block) -->
	<div class="message">
		<!-- USER ICON (the first p tag in every div) -->
		<p><img src="https://archiveofourown.org/images/skins/iconsets/default/icon_user.png" /></p>
		<!-- MESSAGE (username & timestamp in first line, successive messages separated with br tags -->
		<p>
			<span class="name role1">user number 1</span> <span class="hide">(</span><span class="timestamp">Yesterday at 11:49 PM</span><span class="hide">)</span><br />
			text, plus extra image<br />
			<img src="https://i.gyazo.com/2055e3d6d1df280abcd8ceff77f7b59e.jpg" class="large" />
		</p>
	</div>

	<!-- DATE DIVIDER -->
	<div class="dateline">
		<p>March 12, 2021</p>
	</div>

	<div class="message">
		<p><img src="https://archiveofourown.org/images/skins/iconsets/default/icon_user.png" /></p>
		<p>
			<span class="name">numero dos</span> <span class="hide">(</span><span class="timestamp">Today at 1:32 AM</span><span class="hide">)</span><br />
			a test of a sample text message that is in fact rather long, perhaps taking up multiple lines, even; it should be a great help in checking if this code is working correctly, no? <span class="edited">(edited)</span>
		</p>
	</div>

	<div class="message">
		<p><img src="https://archiveofourown.org/images/skins/iconsets/default/icon_user.png" /></p>
		<p>
			<span class="name role10">numero dos</span> <span class="hide">(</span><span class="timestamp">Today at 1:34 AM</span><span class="hide">)</span><br />
			and here's a <a>link</a> along with a <a class="ping">@ping</a>, for good measure!
		</p>
	</div>

	<div class="message">
		<p><img src="https://media1.tenor.com/images/2d13ede25b31d946284eaa3b8a4e6b31/tenor.gif?itemid=11990658" /></p>
		<p>
			<span class="name role10">numero tres</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span><br />
			<a href="https://tenor.com/view/cat-love-huge-hug-big-gif-11990658">https://tenor.com/view/cat-love-huge-hug-big-gif-11990658</a><br /><img src="https://media1.tenor.com/images/2d13ede25b31d946284eaa3b8a4e6b31/tenor.gif?itemid=11990658" />
		</p>
	</div>

	<!-- FILE UPLOAD AND TYPING LINE -->
	<div>
		<!-- TYPING LINE: if you want this left empty, replace the text "hey, ... names" with "Message #your-channel-here", and make the p tag's class "placeholder". See lightmode for example of this -->
		<p><span class="hide">[Typing: </span>hey, why did everyone change their names<span class="hide">]</span></p>
	</div>

</div>





<!-- FOR LIGHT MODE -->
<div class="discord lightmode">

	<!-- CHANNEL HEADER -->
	<div class="channel">
		<p><span class="hash">#</span><span class="channelname">test-channel-name</span></p>
	</div>

	<!-- MESSAGES -->
	<div class="message">
		<p><img src="https://archiveofourown.org/images/skins/iconsets/default/icon_user.png" /></p>
		<p>
			<span class="name role1a">user number 1</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span><br />
			text, plus extra image<br />
			<img src="https://i.gyazo.com/2055e3d6d1df280abcd8ceff77f7b59e.jpg" class="large" />
		</p>
	</div>

	<!-- DATE DIVIDER -->
	<div class="dateline">
		<p>MMMM DD, YYYY</p>
	</div>

	<div class="message">
		<p><img src="https://archiveofourown.org/images/skins/iconsets/default/icon_user.png" /></p>
		<p>
			<span class="name">numero dos</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span><br />
			a test of a sample text message that is in fact rather long, perhaps taking up multiple lines, even; it should be a great help in checking if this code is working correctly, no? <span class="edited">(edited)</span>
		</p>
	</div>

	<div class="message">
		<p><img src="https://archiveofourown.org/images/skins/iconsets/default/icon_user.png" /></p>
		<p>
			<span class="name">numero dos</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span><br />
			and here's a <a>link</a> along with a <a class="ping">@ping</a>, for good measure!
		</p>
	</div>

	<div class="message">
		<p><img src="https://media1.tenor.com/images/2d13ede25b31d946284eaa3b8a4e6b31/tenor.gif?itemid=11990658" /></p>
		<p>
			<span class="name role10a">numero tres</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span><br />
			<a href="https://tenor.com/view/cat-love-huge-hug-big-gif-11990658">https://tenor.com/view/cat-love-huge-hug-big-gif-11990658</a><br /><img src="https://media1.tenor.com/images/2d13ede25b31d946284eaa3b8a4e6b31/tenor.gif?itemid=11990658" />
		</p>
	</div>

	<!-- FILE UPLOAD AND TYPING LINE -->
	<div>
		<!-- THE FOLLOWING P TAG IS A PLACEHOLDER WHEN THE VIEWER DOESN'T HAVE A MESSAGE TYPED UP -->
		<p class="placeholder"><span class="hide">[</span>Message #test-channel-name<span class="hide">]</span></p>
	</div>

</div>




<!-- Chapter 2: top-of-channel header, system messages, channel descriptions -->
<!-- FOR DARK MODE -->
<div class="discord darkmode">

    <!-- CHANNEL HEADER
		 DESCRIPTION: add by placing the hidden pipe character (|) and then the channel description. FAIR WARNING: This overlaps with the mentions/pins/members icons on mobile, something I don't know how to fix. -->
    <div class="channel">
        <!-- NEW: add "newpins" class to add the indicator of a new pinned message on the Pins icon! -->
        <p class="newpins"><span class="hash">#</span><span class="channelname">test-channel-name</span><span class="hide"> | </span><span class="description">Channel description goes here!</span></p>
    </div>

    <!-- CHANNEL TOP: the header displayed at the very top of a channel
 		 Make sure that any description in the channel header is placed here, too! -->
    <div class="channeltop">
        <h1>Welcome to #test-channel-name!</h1>
        <p>This is the start of the #test-channel-name channel. Channel description goes here!</p>
    </div>

    <!-- SYSTEM MESSAGES: All system notifications use the class "system". Add "welcome" or "pin" depending on which message you want.
		 Important: the WELCOME message does not use role colors. Only use class "name" on the username.
		 Sample welcome messages are available here: https://gist.github.com/fourjr/0f47ce8a000c29cd4e24f8aeb7edd8e0 -->
    <div class="system welcome">
        <p>Welcome, <span class="name">user number 1</span>. We hope you brought cake. <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span></p>
    </div>

    <!-- EDITED MESSAGE: Simply add the (edited) text with span tags after any message! -->
    <div class="message">
        <p><img src="https://archiveofourown.org/images/skins/iconsets/default/icon_user.png" /></p>
        <p>
            <span class="name role4">user number 1</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span><br />
            Sample message <span class="edited">(edited)</span>
        </p>
    </div>

	<!-- DATE DIVIDER -->
	<div class="dateline">
		<p>MMMM DD, YYYY</p>
	</div>
    
    <!-- FILLER MESSAGE -->
    <div class="message">
        <p><img src="https://archiveofourown.org/images/skins/iconsets/default/icon_user.png" /></p>
        <p>
            <span class="name role4">user number 1</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span><br />
            Sample message
        </p>
    </div>

    <!-- SYSTEM MESSAGE: PIN. Important: the PIN message uses role colors. Be sure to add the appropriate "role#" class. -->
    <div class="system pin">
        <p><span class="name role4">user number 1</span> pinned <span class="name">a message</span> to this channel. <span class="name">See all the pins.</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span></p>
    </div>

    <!-- FILE UPLOAD AND TYPING LINE -->
    <div>
        <p class="placeholder"><span class="hide">[</span>Message #test-channel-name<span class="hide">]</span></p>
    </div>

</div>


<!-- FOR LIGHT MODE -->
<div class="discord lightmode">

    <!-- CHANNEL HEADER -->
    <div class="channel">
        <p class="newpins"><span class="hash">#</span><span class="channelname">test-channel-name</span><span class="hide"> | </span><span class="description">Channel description goes here!</span></p>
    </div>

    <!-- CHANNEL TOP -->
    <div class="channeltop">
        <h1>Welcome to #test-channel-name!</h1>
        <p>This is the start of the #test-channel-name channel. Channel description goes here!</p>
    </div>

    <!-- SYSTEM MESSAGE: WELCOME -->
    <div class="system welcome">
        <p>Welcome, <span class="name">user number 1</span>. We hope you brought cake. <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span></p>
    </div>

    <!-- EDITED MESSAGE -->
    <div class="message">
        <p><img src="https://archiveofourown.org/images/skins/iconsets/default/icon_user.png" /></p>
        <p>
            <span class="name role4">user number 1</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span><br />
            Sample message <span class="edited">(edited)</span>
        </p>
    </div>

	<!-- DATE DIVIDER -->
	<div class="dateline">
		<p>MMMM DD, YYYY</p>
	</div>
    
    <!-- FILLER MESSAGE -->
    <div class="message">
        <p><img src="https://archiveofourown.org/images/skins/iconsets/default/icon_user.png" /></p>
        <p>
            <span class="name role4">user number 1</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span><br />
            Sample message
        </p>
    </div>

    <!-- SYSTEM MESSAGE: PIN -->
    <div class="system pin">
        <p><span class="name role4">user number 1</span> pinned <span class="name">a message</span> to this channel. <span class="name">See all the pins.</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span></p>
    </div>

    <!-- FILE UPLOAD AND TYPING LINE -->
    <div>
        <p class="placeholder"><span class="hide">[</span>Message #test-channel-name<span class="hide">]</span></p>
    </div>
 
</div>

Discord work skin.css

/* For when creator style is turned off */
#workskin .hide { display: none; }

/* The overall discord module */
#workskin .discord {
  max-width: 710px;
  margin: 2em auto;
  padding-bottom: 1.286em;
  font-family: "Whitney", "Helvetica Neue", "Lucida Grande", "Lucida Sans Unicode", "GNU Unifont", Verdana, Helvetica, Arial, sans-serif;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 0 8px #aaaa;
}

/* Background colors for dark and light mode */
#workskin .darkmode {
  background: #36393f;
  color: #dcddde;
}
#workskin .lightmode {
  background: #fff;
  color: #2e3338;
}

/* Aligning the text and system messages */
#workskin .discord > div.message,
#workskin .discord > div.system {
  margin: 17px 0;
  padding: .125em 16px;
  display: grid;
	grid-template-columns: 2.7em 1fr;
	column-gap: 16px;
}

#workskin .discord > div.message p,
#workskin .discord > div.system p {
	width: 100%;
  margin: 0;
}

#workskin .darkmode > div.message:hover,
#workskin .darkmode > div.system:hover { background-color: rgba(4, 4, 5, 0.07); }
#workskin .lightmode > div.message:hover,
#workskin .lightmode > div.system:hover { background-color: rgba(6, 6, 7, 0.02); }

/* Sizing the icons */
#workskin .discord > div p:first-child > img {
  width: 2.7em;
  height: 2.7em;
  /* object-fit: cover; Property not allowed on AO3 */
  border-radius: 100%;
  margin-top: 2px;
}

/* Making large images in text messages display correctly */
#workskin .discord > .message > p:not(:first-child) img.large { width: 400px; }

/* Making usernames act like links when hovered */
#workskin .discord .name { cursor: pointer; }
#workskin .discord .name:hover { text-decoration: underline; }

/* Colors for system messages */
#workskin .darkmode .system { color: #8e9297; }
#workskin .lightmode .system { color: #6a7480; }

/* General layouts for system message icons */
#workskin .discord .system::before {
  content: "";
  height: 16px;
  width: 2.7em;
  text-align: center;
  display: block;
  background: transparent no-repeat center;
  background-size: 16px 16px;
  margin-top: 4px;
}

/* System message: Welcome
Original image URL: https://discord.com/assets/e06a573355c490f7ce6e3125ac01db81.svg */
#workskin .discord .system.welcome::before { background-image: url("https://i.imgur.com/4lneHce.png"); }

/* System message: Pinned message
Original image URL: https://discord.com/assets/5da4cdab01d4d89c593c48c62ae0d937.svg */
#workskin .discord .system.pin::before { background-image: url("https://i.imgur.com/SdqqXPO.png"); }

/* Colors for dark and light mode; channel headers, default usernames, timestamps, typing bar placeholder */
#workskin .darkmode .name,
#workskin .darkmode .channel .channelname {
  color: #fff;
  font-weight: 600;
}
#workskin .lightmode .name,
#workskin .lightmode .channel .channelname {
  color: #060607;
  font-weight: 600;
}

#workskin .darkmode .hash,
#workskin .darkmode > div:last-child .placeholder,
#workskin .darkmode .timestamp {
  color: #72767d;
}
#workskin .lightmode .hash,
#workskin .lightmode > div:last-child .placeholder,
#workskin .lightmode .timestamp {
  color: #747f8d;
}

/* Alignment and sizing of channel headers and their content */
#workskin .discord .channel > p {
  padding: 6px 12px;
  display: grid;
  grid-template-columns: 24px auto 1fr auto;
  /* align-items: center; Property not allowed on AO3 */
  margin: -3px 0 3px;
}

#workskin .discord .channel *,
#workskin .discord .channel *::after {
  margin: auto 0; /* Since align-items isn't allowed on AO3 */
}

#workskin .discord .hash {
  font-size: 1.6em;
  font-weight: normal;
  text-align: center;
}

#workskin .discord .channel .channelname {
  font-size: 1.07em;
  padding-left: 8px;
}

#workskin .discord .channel .description {
  font-size: 0.93em;
  font-weight: 500;
  margin-left: 8.25px;
  padding: 0 8px;
  border-left: solid thin;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

/* Right side's fade-out for channel description */
#workskin .discord .channel .description::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 2em;
  position: absolute;
  right: 2%;
}
#workskin .darkmode .channel .description::after {
	background: linear-gradient(90deg,rgba(54,57,63,0) 0,#36393f);
}
#workskin .lightmode .channel .description::after {
	background: linear-gradient(90deg,rgba(54,57,63,0) 0,#fff);
}

/* Shading for the channel header */
#workskin .darkmode .channel { box-shadow: #2c2f33bd 0 2px 1px; }
#workskin .lightmode .channel { box-shadow: #2c2f332e 0 2px 1px; }

/* Colors for the channel description and its border */
#workskin .darkmode .channel > p { color: #b9bbbe; }
#workskin .lightmode .channel > p { color: #4f5660; }

#workskin .darkmode .channel .description { border-left-color: #ffffff0f; }
#workskin .lightmode .channel .description { border-left-color: #06060714; }

/* The three icons to the right of the channel header. Normal */
#workskin .discord .channel > p::after {
  grid-column: 4;
  content: "";
  height: 1.4em;
  width: 6.7em;
  background: transparent no-repeat center;
  background-size: 6.7em auto;
  margin-right: 10px;
}
#workskin .darkmode .channel > p:not(.newpins)::after { background-image: url(https://i.imgur.com/2Jo3bI3.png); }
#workskin .lightmode .channel > p:not(.newpins)::after { background-image: url(https://i.imgur.com/L8KR3n0.png); }

/* The three icons to the right of the channel header. When there are new pins */
#workskin .darkmode .channel > p.newpins::after { background-image: url(https://i.imgur.com/GClC6WS.png); }
#workskin .lightmode .channel > p.newpins::after { background-image: url(https://i.imgur.com/xtoAXUx.png); }

/* Top-of-channel header: alignment */
#workskin .discord .channeltop {
  padding-left: 16px;
  padding-right: 4.5%;
}

/* Top-of-channel header: hash symbol */
#workskin .discord .channeltop h1:first-child::before {
  content: '#';
  display: block;
  height: 1.41em;
  width: 1.41em;
  font-weight: 400;
  font-size: 1.5em;
  text-align: center;
  line-height: 1.3;
  border-radius: 100%;
  margin-bottom: 8px;
  color: #fff;
}
#workskin .darkmode .channeltop h1::before { background-color: #4f545c; }
#workskin .lightmode .channeltop h1::before { background-color: #747f8d; }

/* Top-of-channel header: heading */
#workskin .discord .channeltop h1 {
  font-family: "Whitney", "Helvetica Neue", "Lucida Grande", "Lucida Sans Unicode", "GNU Unifont", Verdana, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 2.13em;
  text-align: left;
  margin-bottom: 8px;
}
#workskin .darkmode .channeltop h1 { color: #ffffff; }
#workskin .lightmode .channeltop h1 { color: #060607; }

/* Top-of-channel header: description */
#workskin .discord .channeltop p {
  padding-bottom: 1em;
  margin-top: 0;
  margin-bottom: 0.5em;
  border-bottom: thin solid;
}
#workskin .darkmode .channeltop p {
  border-bottom-color: #ffffff0f;
  color: #b9bbbe;
}
#workskin .lightmode .channeltop p {
  border-bottom-color: #06060714;
  color: #4f5660;
}

/* Colors and decoration for links and pings */
#workskin .discord a {
  border: none;
  cursor: pointer;
}

#workskin .discord a:not(.ping):hover { text-decoration: underline; }

#workskin .discord a.ping,
#workskin .discord a.ping:link,
#workskin .discord a.ping:hover {
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 500;
  transition-duration: .05s;
}
#workskin .lightmode a.ping,
#workskin .lightmode a.ping:link {
  color: rgb(80, 92, 220);
  background-color: rgba(80, 92, 220, 0.1);
}
#workskin .lightmode a.ping:hover {
  color: #fff;
  background-color: #505cdc;
}
#workskin .darkmode a.ping,
#workskin .darkmode a.ping:link {
  color: #dee0fc;
  background-color: rgba(88, 101, 242, 0.3);
}
#workskin .darkmode a.ping:hover {
  color: #fff;
  background-color: #5865f2;
}
#workskin .darkmode a,
#workskin .darkmode a:link,
#workskin .darkmode a:visited,
#workskin .darkmode a:hover,
#workskin .darkmode a:visited:hover {
  color: #00b0f4;
}
#workskin .lightmode a,
#workskin .lightmode a:link,
#workskin .lightmode a:visited,
#workskin .lightmode a:hover,
#workskin .lightmode a:visited:hover {
  color: #0067e0;
}

/* Alignment and sizing of message timestamps */
#workskin .discord .timestamp {
  padding-left: 6px;
  font-size: .75em;
}

/* The edited message notice */
#workskin .discord .edited {
  font-size: 0.625em;
  user-select: none; /* For all others */
  -webkit-user-select: none; /* For Safari */
  -ms-user-select: none; /* For IE */
}
#workskin .darkmode .edited { color: #72767d; }
#workskin .lightmode .edited { color: #747f8d; }

/* New date divider */
#workskin .discord .dateline {
  margin: 1.5em 1em 0;
  border-top: thin solid;
}

#workskin .discord .dateline p {
  padding: 2px 4px;
  font-size: 0.8em;
  margin: -1em auto -.75em;
  font-weight: 600;
  width: fit-content;
}
#workskin .discord .dateline p { width: -webkit-fit-content; }
#workskin .discord .dateline p { width: -moz-fit-content; }

#workskin .darkmode .dateline { border-top-color: #ffffff0f; }
#workskin .darkmode .dateline p {
  color: #72767d;
  background: #36393f;
}
#workskin .lightmode .dateline { border-top-color: #06060714; }
#workskin .lightmode .dateline p {
  color: #747f8d;
  background: #fff;
}

/* Alignment and colors for typing bar */
#workskin .discord > div:last-child {
  margin: 0 2.5%;
  padding: 11px;
  border-radius: 8px;
}
#workskin .darkmode > div:last-child { background: #40444b; }
#workskin .lightmode > div:last-child { background: #ebedef; }

/* Aligning the message in the typing bar, and making it unselectable when placeholder displays */
#workskin .discord > div:last-child > p {
  margin: 0;
  padding: 0;
}

#workskin .discord > div:last-child .placeholder {
  user-select: none; /* For all others */
  -webkit-user-select: none; /* For Safari */
  -ms-user-select: none; /* For IE */
}

/* The upload files button in the typing bar */
#workskin .discord > div:last-child > p.upload { display: none; } /* Supporting discord_v1.html layout */

#workskin .discord > div:last-child > p:last-child {
  display: grid;
  grid-template-columns: 2em 1fr;
  column-gap: 16px;
}

#workskin .discord > div:last-child > p:last-child::before {
  content: '+';
  font-size: 1.35em;
  font-weight: 600;
  text-align: center;
  line-height: 0.925em;
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 8px;
  border-radius: 100%;
}
#workskin .darkmode > div:last-child > p:last-child::before {
  background: #b9bbbe;
  color: #40444b;
}
#workskin .lightmode > div:last-child > p:last-child::before {
  background: #4f5660;
  color: #ebedef;
}

/* Default discord role colors, light versions (upper row) */
#workskin .discord .role1 { color: rgb(26, 188, 156) !important; }
#workskin .discord .ping.role1 { background-color: rgba(26, 188, 156, 0.1) !important; }
#workskin .discord .ping.role1:hover { background-color: rgba(26, 188, 156, 0.3) !important; }

#workskin .discord .role2 { color: rgb(46, 204, 113) !important }
#workskin .discord .ping.role2 { background-color: rgba(46, 204, 113, 0.1) !important; }
#workskin .discord .ping.role2:hover { background-color: rgba(46, 204, 113, 0.3) !important; }

#workskin .discord .role3 { color: rgb(52, 152, 219) !important }
#workskin .discord .ping.role3 { background-color: rgba(52, 152, 219, 0.1) !important; }
#workskin .discord .ping.role3:hover { background-color: rgba(52, 152, 219, 0.3) !important; }

#workskin .discord .role4 { color: rgb(155, 89, 182) !important }
#workskin .discord .ping.role4 { background-color: rgba(155, 89, 182, 0.1) !important; }
#workskin .discord .ping.role4:hover { background-color: rgba(155, 89, 182, 0.3) !important; }

#workskin .discord .role5 { color: rgb(233, 30, 99) !important }
#workskin .discord .ping.role5 { background-color: rgba(233, 30, 99, 0.1) !important; }
#workskin .discord .ping.role5:hover { background-color: rgba(233, 30, 99, 0.3) !important; }

#workskin .discord .role6 { color: rgb(241, 196, 15) !important }
#workskin .discord .ping.role6 { background-color: rgba(241, 196, 15, 0.1) !important; }
#workskin .discord .ping.role6:hover { background-color: rgba(241, 196, 15, 0.3) !important; }

#workskin .discord .role7 { color: rgb(230, 126, 34) !important }
#workskin .discord .ping.role7 { background-color: rgba(230, 126, 34, 0.1) !important; }
#workskin .discord .ping.role7:hover { background-color: rgba(230, 126, 34, 0.3) !important; }

#workskin .discord .role8 { color: rgb(231, 76, 60) !important; }
#workskin .discord .ping.role8 { background-color: rgba(231, 76, 60, 0.1) !important; }
#workskin .discord .ping.role8:hover { background-color: rgba(231, 76, 60, 0.3) !important; }

#workskin .discord .role9 { color: rgb(149, 165, 166) !important; }
#workskin .discord .ping.role9 { background-color: rgba(149, 165, 166, 0.1) !important; }
#workskin .discord .ping.role9:hover { background-color: rgba(149, 165, 166, 0.3) !important; }

#workskin .discord .role10 { color: rgb(96, 125, 139) !important; }
#workskin .discord .ping.role10 { background-color: rgba(96, 125, 139, 0.1) !important; }
#workskin .discord .ping.role10:hover { background-color: rgba(96, 125, 139, 0.3) !important; }

/* Default discord role colors, dark versions (lower row) */
#workskin .discord .role1a { color: rgb(17, 144, 106) !important }
#workskin .discord .ping.role1a { background-color: rgba(17, 144, 106, 0.1) !important; }
#workskin .discord .ping.role1a:hover { background-color: rgba(17, 144, 106, 0.3) !important; }

#workskin .discord .role2a { color: rgb(31, 139, 76) !important }
#workskin .discord .ping.role2a { background-color: rgba(31, 139, 76, 0.1) !important; }
#workskin .discord .ping.role2a:hover { background-color: rgba(31, 139, 76, 0.3) !important; }

#workskin .discord .role3a { color: rgb(32, 102, 148) !important }
#workskin .discord .ping.role3a { background-color: rgba(32, 102, 148, 0.1) !important; }
#workskin .discord .ping.role3a:hover { background-color: rgba(32, 102, 148, 0.3) !important; }

#workskin .discord .role4a { color: rgb(113, 54, 138) !important }
#workskin .discord .ping.role4a { background-color: rgba(113, 54, 138, 0.1) !important; }
#workskin .discord .ping.role4a:hover { background-color: rgba(113, 54, 138, 0.3) !important; }

#workskin .discord .role5a { color: rgb(173, 20, 87) !important }
#workskin .discord .ping.role5a { background-color: rgba(173, 20, 87, 0.1) !important; }
#workskin .discord .ping.role5a:hover { background-color: rgba(173, 20, 87, 0.3) !important; }

#workskin .discord .role6a { color: rgb(194, 124, 14) !important }
#workskin .discord .ping.role6a { background-color: rgba(194, 124, 14, 0.1) !important; }
#workskin .discord .ping.role6a:hover { background-color: rgba(194, 124, 14, 0.3) !important; }

#workskin .discord .role7a { color: rgb(168, 67, 0) !important }
#workskin .discord .ping.role7a { background-color: rgba(168, 67, 0, 0.1) !important; }
#workskin .discord .ping.role7a:hover { background-color: rgba(168, 67, 0, 0.3) !important; }

#workskin .discord .role8a { color: rgb(153, 45, 34) !important; }
#workskin .discord .ping.role8a { background-color: rgba(153, 45, 34, 0.1) !important; }
#workskin .discord .ping.role8a:hover { background-color: rgba(153, 45, 34, 0.3) !important; }

#workskin .discord .role9a { color: rgb(151, 156, 159) !important; }
#workskin .discord .ping.role9a { background-color: rgba(151, 156, 159, 0.1) !important; }
#workskin .discord .ping.role9a:hover { background-color: rgba(151, 156, 159, 0.3) !important; }

#workskin .discord .role10a { color: rgb(84, 110, 122) !important; }
#workskin .discord .ping.role10a { background-color: rgba(84, 110, 122, 0.1) !important; }
#workskin .discord .ping.role10a:hover { background-color: rgba(84, 110, 122, 0.3) !important; }

/** CUSTOM ROLE GUIDE
    Edit the text YOUR_ROLE_HERE to another name.
    For example, a role named "support" would read as follows:
    - #workskin .discord .support
    - #workskin .discord .ping.support
    Make sure not to delete the dot before the role name, or the "!important" marker!
    
    To use your role in a ping, take the 3 digits within the rgb() brackets and replace
    the first three digits within the rgba() brackets in both the .ping.YOUR_ROLE_HERE classes.
    Make sure not to alter the 0.1/0.3 values at the end.
    Once you're done, you can create a role ping using an <a class="ping YOUR_ROLE_HERE"> tag!
*/
#workskin .discord .YOUR_ROLE_HERE {
  color: rgb(255, 255, 255);
}
#workskin .discord .ping.YOUR_ROLE_HERE {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
#workskin .discord .ping.YOUR_ROLE_HERE:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
}