System Window Workskin for AO3 - Omnsicient Reader's Viewpoint

README.md

System Workskin for Omnscient Reader's Viewpoint

Be sure to credit @wovenstarlight when using this.

A preview of this skin is available on AO3 here: https://archiveofourown.org/works/28705200

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 "ORV System Windows".
• Copy the entirety of the file ORV System Workskin CSS.css 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 five <div class="windorv"> tags.)
• Preview the work to ensure it works as expected, then Update. (Double-check for any <p></p> tags, which should be removed.)

Notes

• All text is replaceable.
• DO NOT REMOVE THE MULTIPLE <div> TAGS NESTED INSIDE EACH OTHER. They are necessary to display the striped border of the windows.
• This work skin was made for the "Omniscient Reader's Viewpoint" fandom, but you can adapt it for other fandoms, so long as you give credit to @wovenstarlight.
• 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 in the HTML file 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!

ORV System Workskin CSS.css

/* The main window. Change the width of your windows by altering the "max-width" value below. */
#workskin .userstuff > .windorv {
	margin: 3em auto;
	max-width: 600px;
}

/* Glowing around the edges. */
#workskin .userstuff > .blue {
	box-shadow: 0 0 20px 10px #4fffff4f, 0 0 0px 10px #4fffff4a inset;
}
#workskin .userstuff > .yellow {
  box-shadow: 0 0 20px 10px #ffff004f, 0 0 0px 10px #ffff0046 inset;
  transform: scaleY(-1);
}

/* Angular borders: blue, yellow, and white. */
#workskin .blue {
  background: -moz-linear-gradient(45deg, transparent 10px, #0091dd 10px), -moz-linear-gradient(135deg, transparent 20px, #0091dd 20px), -moz-linear-gradient(225deg, transparent 10px, #0091dd 10px), -moz-linear-gradient(315deg, transparent 20px, #0091dd 20px);
}
#workskin .blue {
  background: -o-linear-gradient(45deg, transparent 10px, #0091dd 10px), -o-linear-gradient(315deg, transparent 20px, #0091dd 20px), -o-linear-gradient(225deg, transparent 10px, #0091dd 10px), -o-linear-gradient(135deg, transparent 20px, #0091dd 20px);
}
#workskin .blue {
  background: -webkit-linear-gradient(45deg, transparent 10px, #0091dd 10px), -webkit-linear-gradient(315deg, transparent 20px, #0091dd 20px), -webkit-linear-gradient(225deg, transparent 10px, #0091dd 10px), -webkit-linear-gradient(135deg, transparent 20px, #0091dd 20px);
}
#workskin .blue {
  background: linear-gradient(45deg, transparent 10px, #0091dd 10px), linear-gradient(315deg, transparent 20px, #0091dd 20px), linear-gradient(225deg, transparent 10px, #0091dd 10px), linear-gradient(135deg, transparent 20px, #0091dd 20px);
}

#workskin .yellow {
  background: -moz-linear-gradient(45deg, transparent 10px, #f1a900 10px), -moz-linear-gradient(135deg, transparent 20px, #f1a900 20px), -moz-linear-gradient(225deg, transparent 10px, #f1a900 10px), -moz-linear-gradient(315deg, transparent 20px, #f1a900 20px);
}
#workskin .yellow {
  background: -o-linear-gradient(45deg, transparent 10px, #f1a900 10px), -o-linear-gradient(315deg, transparent 20px, #f1a900 20px), -o-linear-gradient(225deg, transparent 10px, #f1a900 10px), -o-linear-gradient(135deg, transparent 20px, #f1a900 20px);
}
#workskin .yellow {
  background: -webkit-linear-gradient(45deg, transparent 10px, #f1a900 10px), -webkit-linear-gradient(315deg, transparent 20px, #f1a900 20px), -webkit-linear-gradient(225deg, transparent 10px, #f1a900 10px), -webkit-linear-gradient(135deg, transparent 20px, #f1a900 20px);
}
#workskin .yellow {
  background: linear-gradient(45deg, transparent 10px, #f1a900 10px), linear-gradient(315deg, transparent 20px, #f1a900 20px), linear-gradient(225deg, transparent 10px, #f1a900 10px), linear-gradient(135deg, transparent 20px, #f1a900 20px);
}

#workskin .white {
  background: -moz-linear-gradient(45deg, transparent 10px, #f0fefe 10px), -moz-linear-gradient(135deg, transparent 20px, #f0fefe 20px), -moz-linear-gradient(225deg, transparent 10px, #f0fefe 10px), -moz-linear-gradient(315deg, transparent 20px, #f0fefe 20px);
}
#workskin .white {
  background: -o-linear-gradient(45deg, transparent 10px, #f0fefe 10px), -o-linear-gradient(315deg, transparent 20px, #f0fefe 20px), -o-linear-gradient(225deg, transparent 10px, #f0fefe 10px), -o-linear-gradient(135deg, transparent 20px, #f0fefe 20px);
}
#workskin .white {
  background: -webkit-linear-gradient(45deg, transparent 10px, #f0fefe 10px), -webkit-linear-gradient(315deg, transparent 20px, #f0fefe 20px), -webkit-linear-gradient(225deg, transparent 10px, #f0fefe 10px), -webkit-linear-gradient(135deg, transparent 20px, #f0fefe 20px);
}
#workskin .white {
  background: linear-gradient(45deg, transparent 10px, #f0fefe 10px), linear-gradient(315deg, transparent 20px, #f0fefe 20px), linear-gradient(225deg, transparent 10px, #f0fefe 10px), linear-gradient(135deg, transparent 20px, #f0fefe 20px);
}

/* General setup for the main window. */
#workskin .windorv {
  background-position: bottom left, bottom right, top right, top left;
  -moz-background-size: 50% 50%;
  -webkit-background-size: 50% 50%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  padding: 2px;
  border-radius: 30px 15px;
}
/* Accounting for AO3's additional <p> tags. */
#workskin .windorv p { margin: 0; }

/* Styling for the text within the window. */
#workskin .lastwin {
  padding: 10px 5px;
  color: #f0fefe;
  font-family: Trebuchet MS, sans-serif;
  text-transform: uppercase;
  text-shadow: 0 0 5px #052160;
  font-weight: bold;
}

/* The minimize, resize, and close buttons on the window. */
#workskin .lastwin::before {
  content: "— ❐ ✖";
  float: right;
  padding: 3px 15px 0 0;
  font-size: 1.2em;
}
#workskin .yellow.lastwin::before {
  padding: 3px 35px 0 0;
  transform: scaleX(-1);
  position: absolute;
  z-index: 1;
}

/* Aligning the paragraphs within the window. */
#workskin .lastwin p {
  margin: 0 auto;
  text-align: center;
  padding: 0 10px;
  width: fit-content;
}
#workskin .lastwin p {
  width: -webkit-fit-content;
}
#workskin .lastwin p {
  width: -moz-fit-content;
}

/* Scenario window navigation bar, angular and underlying borders. */
#workskin .outer {
  padding: 1px;
  margin-bottom: 25px;
  margin-top: -5px;
}
#workskin .blue .outer {
  background: -webkit-linear-gradient(225deg, transparent 10px, #f0fefe 10px), -webkit-linear-gradient(315deg, transparent 20px, #f0fefe 20px);
}
#workskin .blue .outer {
  background: -o-linear-gradient(225deg, transparent 10px, #f0fefe 10px), -o-linear-gradient(315deg, transparent 20px, #f0fefe 20px);
}
#workskin .blue .outer {
  background: -moz-linear-gradient(225deg, transparent 10px, #f0fefe 10px), -moz-linear-gradient(315deg, transparent 20px, #f0fefe 20px);
}
#workskin .blue .outer {
  background: linear-gradient(225deg, transparent 10px, #f0fefe 10px), linear-gradient(135deg, transparent 20px, #f0fefe 20px);
  box-shadow: 0px 10px 0px 0px #0091dd, 0px 16px 0px -1px #f0fefe;
}

#workskin .yellow .outer {
  background: -webkit-linear-gradient(225deg, transparent 20px, #f0fefe 20px), -webkit-linear-gradient(315deg, transparent 10px, #f0fefe 10px);
}
#workskin .yellow .outer {
  background: -o-linear-gradient(225deg, transparent 20px, #f0fefe 20px), -o-linear-gradient(315deg, transparent 10px, #f0fefe 10px);
}
#workskin .yellow .outer {
  background: -moz-linear-gradient(225deg, transparent 20px, #f0fefe 20px), -moz-linear-gradient(315deg, transparent 10px, #f0fefe 10px);
}
#workskin .yellow .outer {
  background: linear-gradient(225deg, transparent 20px, #f0fefe 20px), linear-gradient(135deg, transparent 10px, #f0fefe 10px);
  box-shadow: 0px 10px 0px 0px #f1a900, 0px 16px 0px -1px #f0fefe;
}

/* More navbar angular borders and navbar text styling. */
#workskin .inner {
  padding: 4px;
  font-size: 1.2em;
  text-align: center;
}
#workskin .blue .inner {
  background: -webkit-linear-gradient(225deg, transparent 10px, #01c8e8 10px), -webkit-linear-gradient(315deg, transparent 20px, #01c8e8 20px);
}
#workskin .blue .inner {
  background: -o-linear-gradient(225deg, transparent 10px, #01c8e8 10px), -o-linear-gradient(315deg, transparent 20px, #01c8e8 20px);
}
#workskin .blue .inner {
  background: -moz-linear-gradient(225deg, transparent 10px, #01c8e8 10px), -moz-linear-gradient(315deg, transparent 20px, #01c8e8 20px);
}
#workskin .blue .inner {
  background: linear-gradient(225deg, transparent 10px, #01c8e8 10px), linear-gradient(135deg, transparent 20px, #01c8e8 20px);
}
#workskin .yellow .inner {
  background: -webkit-linear-gradient(225deg, transparent 20px, #ffcb00 20px), -webkit-linear-gradient(315deg, transparent 10px, #ffcb00 10px);
}
#workskin .yellow .inner {
  background: -o-linear-gradient(225deg, transparent 20px, #ffcb00 20px), -o-linear-gradient(315deg, transparent 10px, #ffcb00 10px);
}
#workskin .yellow .inner {
  background: -moz-linear-gradient(225deg, transparent 20px, #ffcb00 20px), -moz-linear-gradient(315deg, transparent 10px, #ffcb00 10px);
}
#workskin .yellow .inner {
  background: linear-gradient(225deg, transparent 20px, #ffcb00 20px), linear-gradient(135deg, transparent 10px, #ffcb00 10px);
}

/* Navbar styling. */
#workskin .scenario {
  background-position: top right, top left !important;
  -moz-background-size: 50% 100% !important;
  -webkit-background-size: 50% 100% !important;
  background-size: 50% 100% !important;
  background-repeat: no-repeat !important;
}

/* Styling for the headings, like scenario name and clear conditions. */
#workskin .header {
  font-size: 1.4em;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

/* Styling for all other text in the scenario window. */
#workskin .lastwin p:not(.header) {
  text-align: left;
}

/* Flipping the story window appropriately. */
#workskin .yellow.lastwin { transform: scale(-1, -1); }
#workskin .yellow.lastwin > * { transform: scaleX(-1); }

ORV System Workskin HTML.html

<!-- REGULAR SYSTEM WINDOW, WITH HEADER -->
<!-- The striped container -->
<div class="blue windorv"><div class="white windorv"><div class="blue windorv"><div class="white windorv"><div class="blue windorv lastwin">
	
	<!-- SCENARIO TYPE -->
	<!-- Change this to whatever you desire. You can also remove this part entirely, if you don't want a heading. -->
	<div class="scenario outer"><div class="scenario inner">
		<p>Main Scenario #1</p>
	</div></div>

	<!-- SCENARIO NAME AND CLEAR CONDITIONS -->
	<!-- Place each line inside a paragraph with class "header" -->
	<p class="header">[Proof of Value]</p>
	<p class="header">Kill one or more living organisms.</p>

	<!-- FURTHER SCENARIO DETAILS -->
	<!-- Use line breaks i.e. <br /> tags to separate each line -->
	<p>Category: Main<br />
	Difficulty: F<br />
	Time limit: 30 minutes<br />
	Reward: 300 coins<br />
	Penalty for failure: Death</p>

</div></div></div></div></div>

<!-- REGULAR SYSTEM WINDOW, WITHOUT HEADER -->
<!-- The striped container -->
<div class="blue windorv"><div class="white windorv"><div class="blue windorv"><div class="white windorv"><div class="blue windorv lastwin">
	
	<!-- Note, no header here! -->

	<!-- Any information you'd like can go here, in any order -->
	<p>Your message here</p>
	<p class="header">Header sample</p>
	<p>Your message here</p>
	<p class="header">Add as many headers and lines of text as desired</p>

</div></div></div></div></div>


<!-- STORY WINDOW -->
<!-- The striped container. Note: story windows use "yellow windorv", not "blue windorv"! -->
<div class="yellow windorv"><div class="white windorv"><div class="yellow windorv"><div class="white windorv"><div class="yellow windorv lastwin">
	
	<!-- As before, heading is optional. I've provided it here, but feel free to remove it. -->
	<div class="scenario outer"><div class="scenario inner">
		<p>Main Scenario #1</p>
	</div></div>

	<!-- And content can also be added with any style in any order. -->
	<p>Your message here</p>
	<p class="header">Header sample</p>
	<p>Your message here</p>
	<p class="header">Add as many headers and lines of text as desired</p>

</div></div></div></div></div>