System Window Workskin for AO3 - My S-Ranks / General

README.md

System Windows Work Skin for AO3

This Archive Of Our Own work skin displays game-like system windows. If you use this, be sure to credit @wovenstarlight.

Originally designed for The S-Ranks That I Raised. You may adapt this skin for your own fandom so long as you credit @wovenstarlight.

Notable features are annotated in comments, so that you can modify them if you'd like.

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 "System Windows".
• Copy everything after the line "Have fun!" and paste it in the "CSS" field, then hit save.

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 the below code into the text box at the appropriate positions. (You should have at least two <div> tags, one with the class window and one with windowcontent.)
• Preview the work to ensure it works as expected, then Update. (Double-check for any <p></p> tags, which should be removed. *See HTML note 1 for an exception.)

Notes

• All text is replaceable.
• 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. EXCEPTION: The only case where you should leave in an instance of a <p></p> in is if you decided NOT to add a heading such as "Message Window".
• 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!

System Workskin CSS.css

/* All windows */
#workskin .window {
  background: #004b79cc; /* The background. Slightly transparent to mimic what a real window might look like. */
  color: #eaeaea; /* The regular text color */
  width: 80%;
  margin: 1.5em auto;
  border: 0.2em #c9ffff ridge;
  box-shadow: 0 0 1em 0.4em #84eaeabf; /* The glow around the border. Make it a slightly different shade from the border to make it stand out */
  max-width: 750px;
  font-family: Trebuchet MS, sans-serif;
}

#workskin .window p {
  margin: 0;
  text-shadow: 0px 1px 4px #250833bf;
}

/* Menu bar. If you don't want any title such as "Message Window", don't assign any class to the first <p> element, leaving it empty. */
#workskin .window > p:first-child {
  padding: 0.6em 1em;
  border-bottom: 0.2em #c9ffff ridge;
  margin: 0;
  min-height: 23px;
  font-variant: small-caps;
  background: #002f4dcc;
  display: grid;
  grid-template-columns: 1fr auto;
}
#workskin .window > p:first-child {
  background: linear-gradient(#054c6780 2%,#002f4dcc 50%,#00071680 90%);
}

/* Headings for the various types of windows */
/* Collapse headings gracefully when window width is too small */
#workskin .window > p:first-child::before {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 0.5em;
}

/* Heading text */
#workskin .announce::before {
  content: "Announcement Window";
}

#workskin .message::before {
  content: "Message Window";
}

#workskin .status::before {
  content: "Status Window";
}

#workskin .reward::before {
  content: "Reward Window";
}

#workskin .info::before {
  content: "Information Window";
}

#workskin .inventory::before {
  content: "Inventory";
}

#workskin .itemwin::before {
  content: "Item Window";
}

/* "Glitched" versions of the window headers. Use if you want to fake a system error */
#workskin .announce.glitch::before {
  content: "An̴̺͛no̶̤͝unçemẹ̵͍́́nt Wĭn̷͖͐doш";
}

#workskin .message.glitch::before {
  content: "Mešsâ̸̛̤g̵e Wind¤w";
}

#workskin .status.glitch::before {
  content: "§tatu̴s Wi̵ndow̷͚͑";
}

#workskin .reward.glitch::before {
  content: "R̸e̴warɗ Win̷d̶͈̥̎ow";
}

#workskin .info.glitch::before {
  content: "Info̸͛r̸̝̋mat̵̤̆io̶n W̷i̴ndoຝ";
}

#workskin .inventory.glitch::before {
  content: "I⊓ven̸t̷o̶ry";
}

#workskin .itemwin.glitch::before {
  content: "Iτem̴̟̑͜ Winɗow";
}

/* The minimize/resize/close buttons in the menu bar */
#workskin .window > p:first-child::after {
  content: "—\00A0\00A0❐\00A0\00A0✖";
  grid-column: 2;
  cursor: pointer;
}

/* Aligning and centering the actual window content; this is the text that'll display in the main body */
#workskin .windowcontent,
#workskin .items {
  text-align: center;
  box-shadow: 0 7px 15px -3px inset #00225875;
}

#workskin .windowcontent {
  padding: 1em;
}

/* For headings */
#workskin .wintitle {
  font-size: 110%;
  font-weight: bold;
  color: #88ffd8;
}

/* Styling the stats in the Status Window */
#workskin .stat p {
  display: inline-block;
  min-width: 5em;
  padding: 0.1em 3%;
  background: rgba(255,255,255,0.2);
  margin: 0.2em 0;
}

#workskin .stat p:nth-child(2n) {
  background: rgba(255, 255, 255, 0.3);
}

/* The individual items in the Inventory and Item Windows. Equivalent of .windowcontent */
#workskin .items {
  padding: 0.5em;
}

#workskin .items > p:not(:last-of-type) {
  border-bottom: 0.2em #c9ffff ridge;
}

#workskin .items > p {
  margin: 0;
  padding: 0.4em;
  transition: 0.3s;
}

#workskin .items > p:hover {
  background: #2badb333; /* Background color when items are hovered over */
  color: #88ffd8; /* Font color when items are hovered over */
}

/* The highlighting for skill ranks and item counts */
#workskin .skillrank,
#workskin .itemcount {
  font-size: 80%;
  font-style: italic;
  color: #5ff; /* Font color- bright blue to stand out against the background and body text */
}

#workskin .itemcount {
  padding: 0 0.3em;
}

/* For hiding elements that are needed when creator's style is disabled */
#workskin .hide {
  display: none;
}

System Workskin HTML.html

<!-- Message Windows: used for most miscellaneous system notifications, including level up messages, "skill has been activated", "skill cannot be activated", stuff like that -->
<div class="window">
	<p class="message">&nbsp;</p> <!-- the menu bar. the "message" class can be replaced another window type, as seen below, or left out altogether to give no heading to the window. the &nbsp; has to be included for the heading to show up -->

	<div class="windowcontent"> <!-- Make sure to include the hidden "[" in the first paragraph, and a hidden "]" in the last paragraph for when creator's styles are turned off. -->
		<p><span class="hide">[</span>Target’s keyword influence is incomplete.</p>
		<p>Optimized Awakening for a target with completed Awakening is impossible.<span class="hide">]</span></p>
	</div>
</div>



<!-- Announcement Window: only translated occurrence is the below example. Seems to overlap with Message Window? I put it in just in case -->
<div class="window">
	<p class="announce">&nbsp;</p>

	<div class="windowcontent">
		<p><span class="hide">[</span>The Title “Caregiver” is in effect.</p>
		<p>Caregiver Supplementary Skill - Last Repayment</p>
		<p>The skills and abilities of Awakened Person “Han Yoohyun” will double in efficiency.</p>
		<p>Duration time - 1:00<span class="hide">]</span></p>
	</div>
</div>



<!-- Status Windows: used to display name/titles/stats/skills, both of self and of others. Example 1: -->
<div class="window">
	<p class="status">&nbsp;</p>

	<div class="windowcontent">
		<p class="wintitle"><span class="hide">[</span>Awakened Person – Han Yoojin</p>
		<p>Title: <strong>Dragon Slayer</strong> <span class="skillrank">(L)</span>, <strong>Perfect Caregiver</strong> <span class="skillrank">(L)</span></p>
		<p>Level 1</p>
		<div class="stat">
			<p><strong>Stamina:</strong> 6</p>
			<p><strong>Strength:</strong> 4</p>
			<p><strong>Agility:</strong> 5</p>
			<p><strong>Mental:</strong> 4</p>
			<p><strong>Mana:</strong> 2<span class="hide">]</span></p>
		</div>
	</div>
</div>

<!-- Status Windows, example 2: -->
<div class="window">
	<p class="status">&nbsp;</p>

	<div class="windowcontent">
		<p class="wintitle"><span class="hide">[</span>Awakened Person – Kim Sunghan</p>
		<p>Current stat rank A</p>
		<p>Possible Awakening stat rank A~S</p>
		<p>Optimized Initial Skills</p>
		<p><strong>Indomitable Body</strong> <span class="skillrank">(S)</span> Acquisition failure</p>
		<p><strong>Regeneration</strong> <span class="skillrank">(S)</span> Acquisition failure</p>
		<p><strong>The Earth’s Shield</strong> <span class="skillrank">(A)</span> Acquired<span class="hide">]</span></p>
	</div>
</div>



<!-- Reward Windows: used when an achievement is earned, i'm guessing also when a dungeon attack is completed and the like -->
<div class="window">
	<p class="reward">&nbsp;</p>

	<div class="windowcontent">
		<p><span class="hide">[</span>Impossible Achievement! You’ve hunted a dragon by yourself!</p>
		<p>Legendary Grade Title <strong>‘Dragon Slayer’</strong> granted!<span class="hide">]</span></p>
	</div>
</div>



<!-- Information Windows: used for descriptions of skills, titles, and items. Example 1: -->
<div class="window">
	<p class="info">&nbsp;</p>
	<div class="windowcontent">
		<p class="wintitle"><span class="hide">[</span>Dragon Slayer <span class="skillrank">(L)</span></p>
		<p>The proof of a warrior who has hunted a 1st Rank dragon type alone.</p>
		<p>Title Supplementary Skills</p>
		<p><strong>Poison Resistance</strong> <span class="skillrank">(L)</span></p>
		<p><strong>Curse Resistance</strong> <span class="skillrank">(L)</span></p>
		<p><strong>Fear Resistance</strong> <span class="skillrank">(L)</span></p>
		<p><strong>Lauchtas’ Natural Enemy</strong> <span class="skillrank">(S)</span><span class="hide">]</span></p>
	</div>
</div>

<!-- Information Windows, example 2: -->
<div class="window">
	<p class="info">&nbsp;</p>

	<div class="windowcontent">
		<p class="wintitle"><span class="hide">[</span>Wish Stone – Myth Rank</p>
		<p>Grants one wish for the user.</p>
		<p>※Exception: a dead person cannot be revived<span class="hide">]</span></p>
	</div>
</div>



<!-- Inventory: what it says on the tin -->
<div class="window">
	<p class="inventory">&nbsp;</p>

	<div class="items">
		<p class="hide">[Inventory:</p>
		<!-- It is MANDATORY that, for each <p> item, you split the <p> tag from the actual text, the same way it's done here. So <p> on a single line, then hit enter and write (itemname, itemcount), then enter again and close the </p> tag. If this isn't done, the spacing fucks up in a major way. -->
		<p>
			<span class="itemname">Red Dragon's Greatsword</span><span class="hide"> (</span><span class="itemcount">x1</span><span class="hide">)</span>
		</p>
		<p>
			<span class="itemname">Gate Stone</span><span class="hide"> (</span><span class="itemcount">x20</span><span class="hide">)</span>
		</p>
		<p>
			<span class="itemname">Wish Stone</span><span class="hide"> (</span><span class="itemcount">x1</span><span class="hide">)]</span>
		</p>
	</div>
</div>



<!-- Item Windows: used when describing list of item rewards or looking at a specific item's description -->
<div class="window">
	<p class="itemwin">&nbsp;</p>

	<div class="items">
		<p> <!-- As with Inventory, be sure to space out the <p> tags from their content. -->
			<span class="hide">[</span><span class="itemname">Gate Stone</span><span class="hide"> (</span><span class="itemcount">x10</span><span class="hide">)</span>
		</p>
		<p>
			<span class="itemname">1<sup>st</sup> rank Granting Potion</span><span class="hide"> (</span><span class="itemcount">x5</span><span class="hide">)</span>
		</p>
		<p>
			<span class="itemname">Red Dragon Supreme Sword</span><span class="hide"> (</span><span class="itemcount">x1</span><span class="hide">)</span>
		</p>
		<p>
			<span class="itemname">Wish Stone</span><span class="hide"> (</span><span class="itemcount">x1</span><span class="hide">)]</span>
		</p>
	</div>
</div>