547 lines
9.3 KiB
CSS
547 lines
9.3 KiB
CSS
/*
|
|
* 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 {
|
|
}
|
|
|
|
|