/* * Basic Improved * Inherits from "Basic Formatting" * * Revision 4 * 2025-05-11 * * */ /* * Styles of the AO3 work UI * */ .preface { } h2.title.heading { } h3.byline.heading { } /* * Before Notes and After Notes * */ div.notes.module > blockquote:only-child { border: 2px dotted #ccc; } /* * Element resets * */ #workskin { font-size: 100%; line-height: 1.2em; --var-test: 1; } sub, sup { line-height: 0; position: relative; } blockquote { margin: 0 2em; border-left: 0.5ch solid gray; } table { table-layout: fixed; margin: 0 auto; min-width: 40%; border-collapse: collapse; border: 2px solid gray; } table > tbody > tr > th { border-collapse: separate; text-align: center; } hr { box-sizing: content-box; color: gray; } abbr[title] { text-decoration: underline dotted; } details { display: block; } [hidden] { display: none; } /* * visual marking for heading sections * */ h1, h2, h3, h4 { position: relative; } h1:hover::before, h2:hover::before, h3:hover::before, h4:hover::before { position: absolute; content: 'ΒΆ'; left: -1ch; } /* * General Styles * */ .with-color-scheme { color-scheme: light dark; /* when using this class, define 'color' and 'background-color' in the <style> */ } .with-light-scheme { color-scheme: light; } .with-dark-scheme { color-scheme: dark; } span.htab { display: inline-block; width: 4ch; } span.htab8 { display: inline-block; width: 8ch; } span.htab-percent { display: inline-block; width: 12.5%; } span.vtab { display: inline-block; height: 4ch; } /* hide empty paragraphs, usually from double-generation */ /* CSS 4 */ p:blank, p:-moz-only-whitespace { display: none; } p.blank { display: none; } p.print { } div.print p + p { margin-top: 3ex; margin-top: 2lh; /* not in FF ESR yet */ } .indent { text-indent: 3em; } .indent-percent { text-indent: 12%; } /* adds a book-like margin */ .book { margin: 0 auto; text-indent: 3em; } /* * Modified to prefer libre/free distributable fonts. * * Due to AO3 limitations, these fonts must be installed user-side. * * Gentium from: https://software.sil.org/gentium/ / Debian package fonts-sil-gentium * Libra from: https://fontlibrary.org/en/font/libra-serif-modern * Liberation from: https://github.com/liberationfonts/liberation-fonts/releases / Debian package fonts-liberation * DejaVu from: https://dejavu-fonts.github.io/ * Caladea from: https://fontlibrary.org/en/font/caladea * */ #workskin .font-serif { font-family: 'Gentium Plus', 'Gentium Basic', 'Libra Serif', 'Libra Serif Modern', 'Liberation Serif', 'Nimbus Roman', 'FreeSerif', 'Charis', 'DejaVu Serif', 'Caladea', 'Cambria', 'Tinos', 'Constantia', 'Palatino', 'Times New Roman', 'Georgia' , serif; } /* * Modified to prefer libre/free distributable fonts. * * Due to AO3 limitations, these fonts must be installed user-side. * * Extra fonts in stack: * Isabella from: https://fontlibrary.org/en/font/isabella-sans * Metropolitano from: https://fontlibrary.org/en/font/metropolitano * Gidole from: https://fontlibrary.org/en/font/gidole-regular * GNU Unifont, Lucida Grande: used by AO3 itself * Carlito from: https://fontlibrary.org/en/font/carlito / ChromeOS * */ #workskin .font-sansserif { font-family: 'Isabella Sans', 'Metropolitano', 'Open Sans', 'Liberation Sans', 'Nimbus Sans', 'Libra Sans', 'Andika', 'DejaVu Sans', 'Gidole', 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', 'Carlito', 'Arimo', 'Calibri', 'Verdana', 'Helvetica', 'Arial' , sans-serif; } /* * Modified to prefer libre/free distributable fonts. * * Due to AO3 limitations, these fonts must be installed user-side. * * Iosevka from: https://typeof.net/Iosevka/ / Debian package fonts-iosevka * Monoid from: https://github.com/larsenwork/monoid * Source Code Pro from: https://github.com/adobe-fonts/source-code-pro * Inconsolata from: Debian package fonts-inconsolata * */ #workskin .font-monospace { font-family: 'Iosevka', 'Monoid', 'Liberation Mono', 'Source Code Pro', 'Inconsolata', 'Consolas', 'Courier Prime', 'Courier New', 'Courier' , monospace; } /* * Modified to prefer libre/free distributable fonts. * * Due to AO3 limitations, these fonts must be installed user-side. * * Allura from: https://www.1001fonts.com/allura-font.html * Feltpen from: https://fontlibrary.org/en/font/feltpen * Sofia from: http://www.latinotype.com/ * * */ #workskin .font-cursive { font-family: 'Allura', 'Feltpen Regular', 'Leopold Medium', 'Sofia Regular', 'Cursive' , cursive; } /* * Modified to prefer libre/free distributable fonts. * * Due to AO3 limitations, these fonts must be installed user-side. * * */ #workskin .font-fantasy { font-family: fantasy; } /* * Modified to prefer libre/free distributable fonts. * * Due to AO3 limitations, these fonts must be installed user-side. * * */ #workskin .font-system-ui { font-family: system-ui; } /* Metric compatibility; Prefers libre fonts */ .metric-arial { font-family: 'Liberation Sans', 'Albany', 'Arimo', 'Arial', sans-serif; } .metric-courier { font-family: 'Nimbus Mono', 'Liberation Mono', 'Cumberland', 'TeX Gyre Cursor', 'Cousine', 'Courier New', monospace; } .metric-helvetica { font-family: 'Nimbus Sans', 'FreeSans', 'Helvetica', sans-serif; } .metric-times { font-family: 'TeX Gyre Termes', 'Nimbus Roman', 'Tinos', 'Times', serif; } .metric-cambria { font-family: 'Caladea', 'Cambria', sans-serif; } .metric-calibri { font-family: 'Carlito', 'Calibri', serif; } /* * Typographical Styles * Apply to eg.: <p class="name">, <span class="name">, etc. * * The section order is: size, color, weight, form variant, stretch, etc. * */ .with-font-size[data-fsz] { font-size: attr(data-fsz); } /* relative sizes */ .font-big { font-size: 125%; } .font-x-big { font-size: 150%; } .font-little { font-size: 85%; } .font-x-little { font-size: 70%; } /* absolute sizes */ .font-large { font-size: large; } .font-x-large { font-size: x-large; } .font-small { font-size: small; } .font-x-small { font-size: x-small; } /* relative keywords */ .font-larger { font-size: larger; } .font-smaller { font-size: smaller; } /* * font colors * The listing from AO3 is supplemented with some SVG/X11 colornames. * Priority is given to colors that distinguish themselves well on standard white-background pages. * * Official listing from: * * https://en.wikipedia.org/wiki/X11_color_names * */ .with-color[data-color] { color: attr(data-color); } .with-color[data-bg-color] { background-color: attr(data-bg-color); } .color-red { color: red; } .color-orange { color: orange; } .color-yellow { color: yellow; } .color-green { color: green; } .color-blue { color: blue; } .color-purple { color: purple; } .color-pink { color: pink; } .color-teal { color: #008282; } /* intentionally different */ .color-white { color: #eee; } /* intentionally different */ .color-black { color: #111; } .fontweight-normal { font-weight: normal; } .fontweight-lighter { font-weight: lighter; } .fontweight-bolder { font-weight: bolder; } .with-fontstretch[data-fstr] { font-stretch: attr(data-fstr); } .fontstretch-normal { font-stretch: normal; } .fontstretch-condensed { font-stretch: condensed; } .fontstretch-expanded { font-stretch: expanded; } /* * Decorates nested <kbd> as keyboard combos, and <kbd>s denoting inputs inside <samp> output samples. Recommended by MDN. * */ kbd:not(kbd *):not(pre *) > kbd, .txt-kbd > kbd { background-color: #eef; padding: 2px; border: 1px solid #444; border-radius: 4px; } samp:not(samp *):not(pre *), .txt-samp { background-color: rgba(94, 90, 128, 0.36); } samp > kbd { color: #040f04; text-decoration: underline; } ins:not(ins *), .txt-ins { background-color: rgba(22, 188, 22, 0.32); margin: auto 0.22ex; } del:not(del *), .txt-del { background-color: rgba(196, 20, 20, 0.32); margin: auto 0.22ex; } /* * Two forms of caps * */ .caps, .small-caps { font-variant-caps: small-caps; } .all-small-caps { font-variant-caps: all-small-caps; } .text-shade { text-shadow: 1px 1px 1px gray; } /* Prefers libre fonts */ .dropcap { font-family: 'Liberation Serif', 'DejaVu Serif', 'Bitstream Serif', Georgia, serif; font-size: 3em; } /* * Narrative layout / decoration sections * */ /* Prefers libre fonts */ .flashback { font-family: 'Lato', 'Nimbus', 'Palatino', serif; border-left: 8pt wavy gray; padding-left: 2ch; opacity: 80%; } .epistolary { font-family: 'Book Antiqua', serif; margin-left: 2ex; } .spoiler { background: #333; color: #333; } /* More "TLA"-like version of spoiler */ .REDACTED { display: inline-block; padding: auto 0.5ch; background-color: #333; color: #333; font-family: monospace; } .invisible { visibility: hidden; } /* title and byline shadows */ h3.title.shadow1, h4.title.shadow1 { text-shadow: 2pt -3pt gray; } h3.title.shadow2, h4.title.shadow2 { text-shadow: -2pt -2pt #bee; } h3.title.newspaper, h4.title.newspaper { /* pending */ } .centered { margin: 0 auto; min-width: 20vw; } /* sometimes this is needed explicitly */ .align-left { text-align: left; } /* inherited */ .align-right { text-align: right; } /* inherited */ .align-center { text-align: center; } /* inherited */ .align-justify { text-align: justify; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } .align-bottom { vertical-align: bottom; } .initial { }