/* >>>>>>>>>> CORE (start) >>>>>>>>>> */ /* ========================================================== >>> CORE: needed by every module <<< The chat box and its parts, the width classes, scrolling, hidden text, video descriptions, round pictures, the typing and deleted-text touches, link basics, hover/tap translations, character profiles and the ten shared colours (colour1 to colour10). Keep this block whichever modules you use. ========================================================== */ /* ========================================================== THEMES: AUTO / LIGHT / DARK Every module has its own dark theme and auto theme, near the end of its block. Add ONE theme class to each chat's container: theme-auto follows the READER's device or browser setting: dark if they use dark mode, light if not theme-light always light theme-dark always dark e.g.
With no theme class a chat is light, the same as theme-light, so the normal rules of each module are its light theme. AO3 doesn't let a work skin read the reader's AO3 site skin, so "auto" uses their device/browser light-dark setting instead. ========================================================== */ /* ---------- The box every chat sits in, and its parts ---------- */ #workskin .mob { width: 380px; max-width: 100%; margin: 1.2em auto; padding: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.92em; line-height: 1.35; text-align: left; box-sizing: border-box; overflow: hidden; } #workskin .mob p { margin: 0; padding: 0; text-indent: 0; } #workskin .mob-head { padding: 0.6em 0.9em; text-align: center; font-weight: bold; } #workskin .mob-body { padding: 0.7em 0.7em 0.5em 0.7em; } /* centred system line: "Today 9:41", "X joined the group", "Message deleted" */ #workskin .mob-sys { display: block; text-align: center; font-size: 0.78em; margin: 0.6em 0; opacity: 0.75; } /* ========================================================== Width: phone (the default) or full width Phone width is what every chat is designed for, and is recommended. Add "wide" to a chat's container to let it fill the page instead, e.g.
. The Twitter and Tumblr modules add the same for their thread and feed boxes. Discord is already wide; its module adds "narrow" for phone width. ========================================================== */ #workskin .mob.wide { width: auto; max-width: none; } /* ========================================================== Scrolling Every chat is held to about the height of a phone screen (the width is 380px). Chats with a header and a footer keep those in place and scroll the messages; the rest scroll as a whole. Shorter chats are not affected. To switch it off for one chat, add the class no-scroll to its container. (Each module adds the scrolling for its own posts.) ========================================================== */ #workskin .mob-body { max-height: 580px; overflow-y: auto; overflow-x: hidden; } #workskin .mob.no-scroll { max-height: none; overflow-y: visible; } #workskin .mob.no-scroll .mail-body, #workskin .mob.no-scroll .mob-body { max-height: none; overflow-y: visible; } #workskin .mob-body::-webkit-scrollbar { width: 6px; } #workskin .mob-body::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.5); border-radius: 6px; } /* ---------- Small helpers: hidden text, video descriptions, round pictures, typing line, deleted text ---------- */ /* a real profile picture inside any round picture circle (WhatsApp wa-pfp, Tumblr tb-pfp, Gmail gm-pfp, Instagram ig-pfp, Discord dc-pfp): wrap the picture tag in a span with pfp, e.g. A normal picture (taller than wide, or square) is made as wide as the circle and the top of the photo is kept in view, so faces aren't cut off. If the picture is wider than tall, add class="land" to it: it is made as tall as the circle and centred from side to side instead. */ #workskin .pfp { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; background-size: cover; background-position: center; } #workskin .pfp img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; max-width: none; max-height: none; margin: 0; } #workskin .pfp img.land { right: -9999px; left: -9999px; width: auto; height: 100%; margin: 0 auto; } /* text that only shows when the reader has "Hide Creator's Style" on, or in a download. Use it to spell out who is speaking, or to describe an emoji or picture (see the tutorial). The class is repeated so that nothing else in the workskin can make it show by mistake. */ #workskin .hide.hide.hide.hide { display: none; } /* video descriptions: [Video: what happens in the video] Put it straight after a video. It's moved off-screen rather than hidden, so screen readers still read it out, and it shows as normal text when the workskin is off. */ #workskin .vid-desc { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* typing indicator line */ #workskin .mob .typing { display: block; font-size: 0.75em; font-style: italic; opacity: 0.7; margin: 0.3em 0.9em; } /* strikethrough / deleted text */ #workskin .mob .del, #workskin .dc .del { text-decoration: line-through; opacity: 0.6; } /* ---------- Links that go nowhere (the colours are in each module) ---------- */ /* links that look clickable but go nowhere: example.com/page A real inside a chat gets the same look. Each app has its own link colour. */ #workskin .mob .fake-link, #workskin .mob a:not(.tl) { text-decoration: underline; } #workskin .mob .fake-link, #workskin .mob a:not(.tl) { cursor: pointer; } /* ---------- Hover and tap translations ---------- */ /* ---- hover / tap translations ---- Croeso (Welcome) The reader sees "orig" with a dotted line under it. Hovering (computer) or tapping (phone) swaps in "tltn". It works in ordinary text and inside any chat or post: the text takes on the colour of whatever it sits in, including the light, dark and auto themes, and it is not styled like the chat links above. (The selectors are a little long on purpose, so that no chat rule can override them.) If the skin is off, the two "hide" spans show, so the reader gets: Croeso (Welcome) */ #workskin a.tl, #workskin a.tl:link, #workskin a.tl:visited, #workskin a.tl:hover, #workskin a.tl:focus, #workskin a.tl:active { color: inherit; text-decoration: none; border-bottom: 1px dotted; /* delete this line to hide the dotted line on every translation (for just one, use the egg class below) */ } #workskin a.tl, #workskin a.tl:link, #workskin a.tl:visited, #workskin a.tl:hover, #workskin a.tl:focus, #workskin a.tl:active { cursor: help; } #workskin a.tl span.orig { display: inline; margin: 0; padding: 0; } /* the translation and the brackets are hidden until needed */ #workskin a.tl span.tltn { display: none; margin: 0; padding: 0; } #workskin a.tl span.hide { display: none; } /* on hover (computer) or focus (a tap on a phone): swap them over. The original stays in place, invisible and with no height, so the link never gets narrower than it was. (If it did, the pointer would fall off the end of a short translation, and the words would flicker.) */ #workskin a.tl:hover, #workskin a.tl:focus { display: inline-block; } #workskin a.tl:hover span.orig, #workskin a.tl:focus span.orig { display: block; height: 0; overflow: hidden; visibility: hidden; } #workskin a.tl:hover span.tltn, #workskin a.tl:focus span.tltn { display: block; } /* ---- easter eggs: ---- Works exactly like a translation, but with no dotted line, so the words look like the text around them (colour, bold, italics and all) until someone hovers over or taps them. */ #workskin a.tl.egg, #workskin a.tl.egg:link, #workskin a.tl.egg:visited, #workskin a.tl.egg:hover, #workskin a.tl.egg:focus, #workskin a.tl.egg:active { border-bottom: 0; outline: 0; } #workskin a.tl.egg, #workskin a.tl.egg:link, #workskin a.tl.egg:visited, #workskin a.tl.egg:hover, #workskin a.tl.egg:focus, #workskin a.tl.egg:active { cursor: text; } /* ========================================================== PROFILES: one character, set once, used in every module A profile holds everything about one character: their picture, a different picture for any app if you like, their name colour, their name (and what other characters have them saved as), their handle, their email address, and the WhatsApp wallpaper for chats on their phone. One line each is enough; add extra lines only where someone uses a different picture, name or handle on one app. Luca's profile (the first one) shows every option, explained. The others are the profiles used in the tutorial's examples, simplest first. Copy any block for each of your characters, change the name after pfp- (and pov-) everywhere in it, and fill in or delete the parts you want. In your HTML: picture inside any profile circle (wa-pfp, tw-pfp, ig-pfp, ig-like-pfp, tb-pfp, gm-pfp, dc-pfp) name colour add pfp-stan to a WhatsApp who line or a Discord username handle wherever the handle goes; it shows the one for the app it's in, and Twitter/X adds the @. Handles come from the CSS, so they aren't there when the style is switched off. email wherever the address goes name wherever their name goes. In a chat with pov-ilya on the container, it shows what Ilya has him saved as. Put Jane inside it for readers with the style switched off. their phone add pov-shane to the container of any chat on Shane's phone Profiles grew out of the one-class-per-character Discord users in BookKeep's Discord Work Skin & Tutorial (https://archiveofourown.org/works/42027846). ========================================================== */ /* a handle, name or email address looks like the text around it, whatever it sits inside */ #workskin .mob span.handle.handle.handle.handle, #workskin .dc span.handle.handle.handle.handle, #workskin .mob span.name.name.name.name, #workskin .dc span.name.name.name.name, #workskin .mob span.email.email.email.email { display: inline; float: none; margin: 0; padding: 0; font-size: 1em; font-weight: inherit; color: inherit; opacity: 1; } /* Twitter/X puts an @ in front of every handle, so profiles don't need one */ #workskin .tw span.handle::before, #workskin .tw-reply span.handle::before, #workskin .twdm span.handle::before { content: "@"; } /* PROFILE: Luca - every option a profile can have, explained line by line. Only the lines with "every profile" need to be in yours; the rest are extras. */ /* 1. Picture (every profile) */ #workskin .pfp.pfp-luca { background-image: url(https://64.media.tumblr.com/a99a60f0293cf7df3604b4a6dd4705f6/ba033a52c8982cb0-cc/s1280x1920/cb4c277845d0c3ef666d16b86b75509266b795b3.jpg); } /* 2. A different picture for one app. Each line replaces the picture on that app only. */ #workskin .tw .pfp.pfp-luca, #workskin .tw-reply .pfp.pfp-luca { background-image: url(https://64.media.tumblr.com/6898dc3a42cc6c7ab9729360b71366e4/ba033a52c8982cb0-bf/s2048x3072/b548d2fe61b02e530c0edd2ee6a6bd56ab73ad2c.jpg); } #workskin .ig .pfp.pfp-luca, #workskin .igdm .pfp.pfp-luca { background-image: url(https://64.media.tumblr.com/45b3b47d7c42b593f6242a40153a629c/ba033a52c8982cb0-d7/s2048x3072/4e71b117e87747d78dd3d95595cecc77eec48d38.jpg); } #workskin .tb .pfp.pfp-luca { background-image: url(https://64.media.tumblr.com/694221426fb8229480fb3fb87b528ca7/ba033a52c8982cb0-01/s1280x1920/636653581e07a970475075f480c1717b23a72c0a.jpg); } #workskin .gm .pfp.pfp-luca { background-image: linear-gradient(135deg, #f6b26b, #e06666); } #workskin .dc .pfp.pfp-luca { background-image: linear-gradient(135deg, #8e7cc3, #6fa8dc); } /* 3. Name colour (every profile): for WhatsApp group names and Discord usernames */ #workskin .wa .who.pfp-luca, #workskin .dc .dc-name.pfp-luca { color: #1f9e89; } /* 4. A different name colour for one app */ #workskin .dc .dc-name.pfp-luca { color: #e8734a; } /* 5. Name (every profile) */ #workskin .name.pfp-luca::before { content: "Luca"; } /* 6. A different name for one app */ #workskin .tw .name.pfp-luca::before, #workskin .tw-reply .name.pfp-luca::before, #workskin .twdm .name.pfp-luca::before { content: "Luca | cat dad"; } #workskin .ig .name.pfp-luca::before, #workskin .igdm .name.pfp-luca::before { content: "Luca and the Cats"; } #workskin .dc .name.pfp-luca::before { content: "lucaaa"; } /* 7. Saved as: what he's called on another character's phone, in any chat with that character's pov- class on the container. One line per phone. */ #workskin .mob.pov-shane .name.pfp-luca::before { content: "Luca (cat pictures)"; } #workskin .mob.pov-ilya .name.pfp-luca::before { content: "Cat Guy"; } #workskin .mob.pov-rose .name.pfp-luca::before { content: "Cat Luca"; } /* 8. Handle (every profile): used on every app. Leave off the @ - Twitter/X adds it. */ #workskin .handle.pfp-luca::after { content: "luca"; } /* 9. A different handle for one app */ #workskin .tw .handle.pfp-luca::after, #workskin .tw-reply .handle.pfp-luca::after, #workskin .twdm .handle.pfp-luca::after { content: "luca_tweets"; } #workskin .ig .handle.pfp-luca::after, #workskin .igdm .handle.pfp-luca::after { content: "luca.grams"; } #workskin .tb .handle.pfp-luca::after { content: "luca-blogs-things"; } /* 10. Email address, for Gmail and the email window */ #workskin .email.pfp-luca::after { content: "luca@example.com"; } /* 11. A different email address in the email window (.mail) or Gmail (.gm) */ #workskin .mail .email.pfp-luca::after { content: "luca@work.example.com"; } /* 12. His phone: WhatsApp chats with pov-luca on the container. A colour, a gradient or a picture all work here. He uses theme-light. */ #workskin .mob.wa.pov-luca { background: linear-gradient(#fdf1d6, #f6d5c2); } /* PROFILE: Stan */ #workskin .pfp.pfp-stan { background-color: #c06a1f; } #workskin .wa .who.pfp-stan, #workskin .dc .dc-name.pfp-stan { color: #d2782a; } #workskin .name.pfp-stan::before { content: "Stan"; } #workskin .handle.pfp-stan::after { content: "PuckStan"; } #workskin .email.pfp-stan::after { content: "Puckstan@gmail.com"; } /* PROFILE: Yuna */ #workskin .pfp.pfp-yuna { background-color: #7d4fb0; } #workskin .wa .who.pfp-yuna, #workskin .dc .dc-name.pfp-yuna { color: #9a62d0; } #workskin .name.pfp-yuna::before { content: "Yuna"; } #workskin .mob.pov-shane .name.pfp-yuna::before { content: "Mom"; } #workskin .handle.pfp-yuna::after { content: "MetrosMomager"; } #workskin .email.pfp-yuna::after { content: "YunaHollander@gmail.com"; } #workskin .mail .email.pfp-yuna::after { content: "Yuna@HollanderHockey.com"; } #workskin .mob.wa.pov-yuna { background-color: #e8e8e8; background-image: url(https://64.media.tumblr.com/a1c0162c5542c5890e5fd9c13341513e/3b53694384f48caf-98/s1280x1920/8b2fcaaf7deb2b05c418f46c62ee729acb8ff8e4.jpg); background-size: cover; background-position: center; } /* PROFILE: Zim */ #workskin .pfp.pfp-zim { background-color: #4a6a8f; } #workskin .wa .who.pfp-zim, #workskin .dc .dc-name.pfp-zim { color: #5d84b3; } #workskin .name.pfp-zim::before { content: "Jack Zimmerman"; } #workskin .tw .name.pfp-zim::before, #workskin .tw-reply .name.pfp-zim::before, #workskin .twdm .name.pfp-zim::before { content: "Zim"; } #workskin .handle.pfp-zim::after { content: "JackZim"; } #workskin .tw .handle.pfp-zim::after, #workskin .tw-reply .handle.pfp-zim::after, #workskin .twdm .handle.pfp-zim::after { content: "ZimBits"; } #workskin .email.pfp-zim::after { content: "Jack@zimmerman.com"; } /* PROFILE: Holster - a different picture on each app (colours for now) */ #workskin .pfp.pfp-holster { background-color: #138a72; } #workskin .tw .pfp.pfp-holster, #workskin .tw-reply .pfp.pfp-holster { background-color: #1d6fa5; } #workskin .ig .pfp.pfp-holster, #workskin .igdm .pfp.pfp-holster { background-color: #c13584; } #workskin .tb .pfp.pfp-holster { background-color: #35465c; } #workskin .dc .pfp.pfp-holster { background-color: #5865f2; } #workskin .wa .who.pfp-holster, #workskin .dc .dc-name.pfp-holster { color: #1aa386; } #workskin .name.pfp-holster::before { content: "Holster"; } #workskin .handle.pfp-holster::after { content: "HolsterInLaw"; } /* PROFILE: Rose */ #workskin .pfp.pfp-rose { background-color: #c2416b; } #workskin .wa .who.pfp-rose, #workskin .dc .dc-name.pfp-rose { color: #d6336c; } #workskin .name.pfp-rose::before { content: "Rose"; } #workskin .tw .name.pfp-rose::before, #workskin .tw-reply .name.pfp-rose::before, #workskin .twdm .name.pfp-rose::before, #workskin .ig .name.pfp-rose::before, #workskin .igdm .name.pfp-rose::before { content: "Rose Landry"; } #workskin .handle.pfp-rose::after { content: "PoseyRosey"; } #workskin .tw .handle.pfp-rose::after, #workskin .tw-reply .handle.pfp-rose::after, #workskin .twdm .handle.pfp-rose::after, #workskin .ig .handle.pfp-rose::after, #workskin .igdm .handle.pfp-rose::after { content: "RoseLandry"; } /* PROFILE: Shane */ #workskin .pfp.pfp-shane { background-image: url(https://www.shutterstock.com/shutterstock/photos/1100283806/display_1500/stock-photo-beautiful-lavender-flower-in-the-dalat-flower-park-selective-focus-1100283806.jpg); } #workskin .wa .who.pfp-shane, #workskin .dc .dc-name.pfp-shane { color: #3a7bd5; } #workskin .name.pfp-shane::before { content: "Shane"; } #workskin .mob.pov-ilya .name.pfp-shane::before { content: "Jane"; } #workskin .handle.pfp-shane::after { content: "ShaneHollanderHockeyPlayer"; } #workskin .ig .handle.pfp-shane::after, #workskin .igdm .handle.pfp-shane::after { content: "shanehollanderhockeyplayer"; } #workskin .tb .handle.pfp-shane::after { content: "hollanderhockey"; } #workskin .dc .handle.pfp-shane::after { content: "shanehollander"; } #workskin .email.pfp-shane::after { content: "shane@example.com"; } #workskin .mob.wa.pov-shane { background: #dfeaf6; } /* PROFILE: Ilya - no picture yet: swap background-color for background-image: url(LINK) */ #workskin .pfp.pfp-ilya { background-color: #b5433a; } #workskin .wa .who.pfp-ilya, #workskin .dc .dc-name.pfp-ilya { color: #d65548; } #workskin .name.pfp-ilya::before { content: "Ilya"; } #workskin .mob.pov-shane .name.pfp-ilya::before { content: "Lily"; } #workskin .handle.pfp-ilya::after { content: "irozanov"; } #workskin .ig .handle.pfp-ilya::after, #workskin .igdm .handle.pfp-ilya::after { content: "ilya.r"; } #workskin .mob.wa.pov-ilya { background: #1b1f2b; } /* ========================================================== COLOURS: colour1 to colour10 One set of ten colours for every app. Add colour1 to colour10 to a picture circle (wa-pfp, tw-pfp, tb-pfp, tb-ask-pfp, gm-pfp) or a name (WhatsApp who, Discord dc-name) to colour it. Use the same number for a person everywhere. Change a colour here and it changes in every app. Each rule lists the class names for all the apps. If you've left some apps out, keep the whole list anyway: a name for an app you don't use just doesn't match anything, so it does no harm. ========================================================== */ /* picture circles (the same in light and dark) */ #workskin .wa .wa-pfp.colour1, #workskin .tw .tw-pfp.colour1, #workskin .tw-reply .tw-pfp.colour1, #workskin .tb .tb-pfp.colour1, #workskin .tb .tb-ask-pfp.colour1, #workskin .gm .gm-pfp.colour1, #workskin .dc .dc-name.colour1::before { background-color: #b5733a; } #workskin .wa .wa-pfp.colour2, #workskin .tw .tw-pfp.colour2, #workskin .tw-reply .tw-pfp.colour2, #workskin .tb .tb-pfp.colour2, #workskin .tb .tb-ask-pfp.colour2, #workskin .gm .gm-pfp.colour2, #workskin .dc .dc-name.colour2::before { background-color: #3a3a3c; } #workskin .wa .wa-pfp.colour3, #workskin .tw .tw-pfp.colour3, #workskin .tw-reply .tw-pfp.colour3, #workskin .tb .tb-pfp.colour3, #workskin .tb .tb-ask-pfp.colour3, #workskin .gm .gm-pfp.colour3, #workskin .dc .dc-name.colour3::before { background-color: #7a2b4e; } #workskin .wa .wa-pfp.colour4, #workskin .tw .tw-pfp.colour4, #workskin .tw-reply .tw-pfp.colour4, #workskin .tb .tb-pfp.colour4, #workskin .tb .tb-ask-pfp.colour4, #workskin .gm .gm-pfp.colour4, #workskin .dc .dc-name.colour4::before { background-color: #2f7d6b; } #workskin .wa .wa-pfp.colour5, #workskin .tw .tw-pfp.colour5, #workskin .tw-reply .tw-pfp.colour5, #workskin .tb .tb-pfp.colour5, #workskin .tb .tb-ask-pfp.colour5, #workskin .gm .gm-pfp.colour5, #workskin .dc .dc-name.colour5::before { background-color: #3b5ea8; } #workskin .wa .wa-pfp.colour6, #workskin .tw .tw-pfp.colour6, #workskin .tw-reply .tw-pfp.colour6, #workskin .tb .tb-pfp.colour6, #workskin .tb .tb-ask-pfp.colour6, #workskin .gm .gm-pfp.colour6, #workskin .dc .dc-name.colour6::before { background-color: #6b4fa0; } #workskin .wa .wa-pfp.colour7, #workskin .tw .tw-pfp.colour7, #workskin .tw-reply .tw-pfp.colour7, #workskin .tb .tb-pfp.colour7, #workskin .tb .tb-ask-pfp.colour7, #workskin .gm .gm-pfp.colour7, #workskin .dc .dc-name.colour7::before { background-color: #a8383b; } #workskin .wa .wa-pfp.colour8, #workskin .tw .tw-pfp.colour8, #workskin .tw-reply .tw-pfp.colour8, #workskin .tb .tb-pfp.colour8, #workskin .tb .tb-ask-pfp.colour8, #workskin .gm .gm-pfp.colour8, #workskin .dc .dc-name.colour8::before { background-color: #4e7a2c; } #workskin .wa .wa-pfp.colour9, #workskin .tw .tw-pfp.colour9, #workskin .tw-reply .tw-pfp.colour9, #workskin .tb .tb-pfp.colour9, #workskin .tb .tb-ask-pfp.colour9, #workskin .gm .gm-pfp.colour9, #workskin .dc .dc-name.colour9::before { background-color: #8c6d1f; } #workskin .wa .wa-pfp.colour10, #workskin .tw .tw-pfp.colour10, #workskin .tw-reply .tw-pfp.colour10, #workskin .tb .tb-pfp.colour10, #workskin .tb .tb-ask-pfp.colour10, #workskin .gm .gm-pfp.colour10, #workskin .dc .dc-name.colour10::before { background-color: #2a7390; } /* names: a bit brighter than the circles, so they are easy to read as text. In a WhatsApp quoted reply, the colour goes on the line down the side and the name. */ #workskin .wa .who.colour1, #workskin .wa .wa-quote.colour1 b, #workskin .dc .colour1 { color: #b8651f; } #workskin .wa .wa-quote.colour1 { border-left-color: #b8651f; } #workskin .wa .who.colour2, #workskin .wa .wa-quote.colour2 b, #workskin .dc .colour2 { color: #5f6368; } #workskin .wa .wa-quote.colour2 { border-left-color: #5f6368; } #workskin .wa .who.colour3, #workskin .wa .wa-quote.colour3 b, #workskin .dc .colour3 { color: #b03a6f; } #workskin .wa .wa-quote.colour3 { border-left-color: #b03a6f; } #workskin .wa .who.colour4, #workskin .wa .wa-quote.colour4 b, #workskin .dc .colour4 { color: #1f8a72; } #workskin .wa .wa-quote.colour4 { border-left-color: #1f8a72; } #workskin .wa .who.colour5, #workskin .wa .wa-quote.colour5 b, #workskin .dc .colour5 { color: #2f68c8; } #workskin .wa .wa-quote.colour5 { border-left-color: #2f68c8; } #workskin .wa .who.colour6, #workskin .wa .wa-quote.colour6 b, #workskin .dc .colour6 { color: #7b52c4; } #workskin .wa .wa-quote.colour6 { border-left-color: #7b52c4; } #workskin .wa .who.colour7, #workskin .wa .wa-quote.colour7 b, #workskin .dc .colour7 { color: #c0392b; } #workskin .wa .wa-quote.colour7 { border-left-color: #c0392b; } #workskin .wa .who.colour8, #workskin .wa .wa-quote.colour8 b, #workskin .dc .colour8 { color: #4a8a25; } #workskin .wa .wa-quote.colour8 { border-left-color: #4a8a25; } #workskin .wa .who.colour9, #workskin .wa .wa-quote.colour9 b, #workskin .dc .colour9 { color: #9a7412; } #workskin .wa .wa-quote.colour9 { border-left-color: #9a7412; } #workskin .wa .who.colour10, #workskin .wa .wa-quote.colour10 b, #workskin .dc .colour10 { color: #1f7fa3; } #workskin .wa .wa-quote.colour10 { border-left-color: #1f7fa3; } /* names in the dark theme: lighter shades, so they show up on a dark background */ #workskin .wa.theme-dark .who.colour1, #workskin .wa.theme-dark .wa-quote.colour1 b, #workskin .dc.theme-dark .colour1 { color: #f0a25c; } #workskin .wa.theme-dark .wa-quote.colour1 { border-left-color: #f0a25c; } #workskin .wa.theme-dark .who.colour2, #workskin .wa.theme-dark .wa-quote.colour2 b, #workskin .dc.theme-dark .colour2 { color: #aeb3b8; } #workskin .wa.theme-dark .wa-quote.colour2 { border-left-color: #aeb3b8; } #workskin .wa.theme-dark .who.colour3, #workskin .wa.theme-dark .wa-quote.colour3 b, #workskin .dc.theme-dark .colour3 { color: #ff7aa2; } #workskin .wa.theme-dark .wa-quote.colour3 { border-left-color: #ff7aa2; } #workskin .wa.theme-dark .who.colour4, #workskin .wa.theme-dark .wa-quote.colour4 b, #workskin .dc.theme-dark .colour4 { color: #06cf9c; } #workskin .wa.theme-dark .wa-quote.colour4 { border-left-color: #06cf9c; } #workskin .wa.theme-dark .who.colour5, #workskin .wa.theme-dark .wa-quote.colour5 b, #workskin .dc.theme-dark .colour5 { color: #6fa3ff; } #workskin .wa.theme-dark .wa-quote.colour5 { border-left-color: #6fa3ff; } #workskin .wa.theme-dark .who.colour6, #workskin .wa.theme-dark .wa-quote.colour6 b, #workskin .dc.theme-dark .colour6 { color: #c4a3ff; } #workskin .wa.theme-dark .wa-quote.colour6 { border-left-color: #c4a3ff; } #workskin .wa.theme-dark .who.colour7, #workskin .wa.theme-dark .wa-quote.colour7 b, #workskin .dc.theme-dark .colour7 { color: #ff7b72; } #workskin .wa.theme-dark .wa-quote.colour7 { border-left-color: #ff7b72; } #workskin .wa.theme-dark .who.colour8, #workskin .wa.theme-dark .wa-quote.colour8 b, #workskin .dc.theme-dark .colour8 { color: #8fd16a; } #workskin .wa.theme-dark .wa-quote.colour8 { border-left-color: #8fd16a; } #workskin .wa.theme-dark .who.colour9, #workskin .wa.theme-dark .wa-quote.colour9 b, #workskin .dc.theme-dark .colour9 { color: #e6c35c; } #workskin .wa.theme-dark .wa-quote.colour9 { border-left-color: #e6c35c; } #workskin .wa.theme-dark .who.colour10, #workskin .wa.theme-dark .wa-quote.colour10 b, #workskin .dc.theme-dark .colour10 { color: #53bdeb; } #workskin .wa.theme-dark .wa-quote.colour10 { border-left-color: #53bdeb; } /* Discord's dark grey would hide the colour2 circle, so it is a little lighter there */ #workskin .dc.theme-dark .dc-name.colour2::before { background-color: #5c5c60; } /* names in the auto theme: the dark shades when the reader's device is in dark mode */ @media (prefers-color-scheme: dark) { #workskin .wa.theme-auto .who.colour1, #workskin .wa.theme-auto .wa-quote.colour1 b, #workskin .dc.theme-auto .colour1 { color: #f0a25c; } #workskin .wa.theme-auto .wa-quote.colour1 { border-left-color: #f0a25c; } #workskin .wa.theme-auto .who.colour2, #workskin .wa.theme-auto .wa-quote.colour2 b, #workskin .dc.theme-auto .colour2 { color: #aeb3b8; } #workskin .wa.theme-auto .wa-quote.colour2 { border-left-color: #aeb3b8; } #workskin .wa.theme-auto .who.colour3, #workskin .wa.theme-auto .wa-quote.colour3 b, #workskin .dc.theme-auto .colour3 { color: #ff7aa2; } #workskin .wa.theme-auto .wa-quote.colour3 { border-left-color: #ff7aa2; } #workskin .wa.theme-auto .who.colour4, #workskin .wa.theme-auto .wa-quote.colour4 b, #workskin .dc.theme-auto .colour4 { color: #06cf9c; } #workskin .wa.theme-auto .wa-quote.colour4 { border-left-color: #06cf9c; } #workskin .wa.theme-auto .who.colour5, #workskin .wa.theme-auto .wa-quote.colour5 b, #workskin .dc.theme-auto .colour5 { color: #6fa3ff; } #workskin .wa.theme-auto .wa-quote.colour5 { border-left-color: #6fa3ff; } #workskin .wa.theme-auto .who.colour6, #workskin .wa.theme-auto .wa-quote.colour6 b, #workskin .dc.theme-auto .colour6 { color: #c4a3ff; } #workskin .wa.theme-auto .wa-quote.colour6 { border-left-color: #c4a3ff; } #workskin .wa.theme-auto .who.colour7, #workskin .wa.theme-auto .wa-quote.colour7 b, #workskin .dc.theme-auto .colour7 { color: #ff7b72; } #workskin .wa.theme-auto .wa-quote.colour7 { border-left-color: #ff7b72; } #workskin .wa.theme-auto .who.colour8, #workskin .wa.theme-auto .wa-quote.colour8 b, #workskin .dc.theme-auto .colour8 { color: #8fd16a; } #workskin .wa.theme-auto .wa-quote.colour8 { border-left-color: #8fd16a; } #workskin .wa.theme-auto .who.colour9, #workskin .wa.theme-auto .wa-quote.colour9 b, #workskin .dc.theme-auto .colour9 { color: #e6c35c; } #workskin .wa.theme-auto .wa-quote.colour9 { border-left-color: #e6c35c; } #workskin .wa.theme-auto .who.colour10, #workskin .wa.theme-auto .wa-quote.colour10 b, #workskin .dc.theme-auto .colour10 { color: #53bdeb; } #workskin .wa.theme-auto .wa-quote.colour10 { border-left-color: #53bdeb; } /* Discord's dark grey would hide the colour2 circle, so it is a little lighter there */ #workskin .dc.theme-auto .dc-name.colour2::before { background-color: #5c5c60; } } /* <<<<<<<<<< CORE (end) <<<<<<<<<< */