diff options
Diffstat (limited to 'src/static/css/miscellany.css')
| -rw-r--r-- | src/static/css/miscellany.css | 587 |
1 files changed, 587 insertions, 0 deletions
diff --git a/src/static/css/miscellany.css b/src/static/css/miscellany.css new file mode 100644 index 00000000..70c7b571 --- /dev/null +++ b/src/static/css/miscellany.css @@ -0,0 +1,587 @@ +/* Squares */ + +@layer layout { + .square { + position: relative; + width: 100%; + } + + .square::after { + content: ""; + display: block; + padding-bottom: 100%; + } + + .square-content { + position: absolute; + width: 100%; + height: 100%; + } +} + +/* Utility spans */ + +@layer print { + .nowrap { + white-space: nowrap; + } + + .blockwrap, .chunkwrap { + display: inline-block; + } + + p .current { + font-weight: 800; + } + + .js-hide, + .js-show-once-data, + .js-hide-once-data { + display: none; + } +} + +/* Totally miscellaneous typography */ + +@layer layout { + dl dt { + padding-left: 40px; + } + + dl dt { + /* Heads up, this affects the measurement + * for dl dt which are .content-heading! + */ + margin-bottom: 2px; + } + + dl dt[id]:not(.content-heading) { + --custom-scroll-offset: calc(2.5em - 2px); + } + + dl dd { + margin-bottom: 1em; + } + + dl ul, + dl ol { + margin-top: 0; + margin-bottom: 0; + } + + li .origin-details { + display: block; + margin-left: 2ch; + } + + li > ul { + margin-top: 5px; + } +} + +@layer print { + center { + margin-top: 1em; + margin-bottom: 1em; + } + + .flash-act-title { + display: inline-block; + text-decoration: inherit; + } + + a .flash-act-title { + color: var(--primary-color); + } + + .other-group-accent, + .rerelease-line { + opacity: 0.7; + font-style: oblique; + } + + .other-group-accent { + white-space: nowrap; + } + + .other-group-accent a { + color: var(--page-primary-color); + } + + dt .by, li .by { + font-style: oblique; + } + + dt .by a, li .by a { + display: inline-block; + } + + p code { + font-size: 0.95em; + font-family: "courier new", monospace; + font-weight: 800; + line-height: 1.1; + } + + /* "has-details" means a "has a <details> element" here. */ + ul > li.has-details { + list-style-type: none; + margin-left: -17px; + } + + li .origin-details { + font-size: 0.9em; + font-style: oblique; + } +} + +/* Ordinary links */ + +@layer print { + a { + color: var(--primary-color); + text-decoration: none; + } + + a:hover { + text-decoration: underline; + text-decoration-style: solid !important; + } + + a.current { + font-weight: 800; + } + + a.series { + font-style: oblique; + } + + a:not([href]) { + cursor: default; + } + + a:not([href]):hover { + text-decoration: none; + } +} + +/* Links with symbols */ + +@layer print { + a .normal-content { + color: white; + } + + .external-link:not(.from-content) { + white-space: nowrap; + } + + .external-link.indicate-external::after { + content: '\00a0➚'; + font-style: normal; + } + + .external-link.indicate-external:hover::after { + color: white; + } + + .image-media-link::after { + /* Thanks to Jay Freestone for being awesome: + * https://www.jayfreestone.com/writing/wrapping-and-inline-pseudo-elements/ + */ + + pointer-events: none; + content: '\200b'; + padding-left: 22px; + + background-color: var(--primary-color); + + /* mask-image is set in content JavaScript, + * because we can't identify the correct nor + * absolute path to the file from CSS. + */ + + mask-repeat: no-repeat; + mask-position: calc(100% - 2px); + } + + .image-media-link:hover::after { + background-color: white; + } +} + +/* Label elements */ + +@layer interaction { + label:hover span { + text-decoration: underline; + text-decoration-style: solid; + } + + label > input[type=checkbox]:not(:checked) + span { + opacity: 0.8; + } +} + +/* Progress elements */ + +@layer material { + progress { + accent-color: var(--primary-color); + } +} + +/* Code blocks */ + +@layer print { + pre.content-code { + position: relative; + white-space: nowrap; + + max-width: calc(100vw - 180px); + + /* Welcome to heck. */ + font-family: inherit; + + border: 1px dashed var(--primary-color); + } + + pre.content-code span { + display: block; + overflow-x: scroll; + padding: 5px 20px 5px 5px; + background: black; + color: white; + } + + pre.content-code::before { + content: ""; + display: block; + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 100%; + box-shadow: -15px 0 24px -8px black inset; + pointer-events: none; + } + + pre.content-code code { + font-family: "courier new", monospace; + font-weight: 800; + font-size: 0.8em; + } +} + +/* HR elements, of various flavors */ + +@layer print { + #content hr { + border: 1px inset #808080; + } + + #content hr.split { + color: #808080; + } + + #content hr.split::before { + content: "(split)"; + } + + #content hr.main-separator { + color: var(--dim-color); + clear: none; + margin-top: -0.25em; + margin-bottom: 1.75em; + } + + #content hr.main-separator::before { + content: "♦"; + font-size: 1.2em; + } + + #content hr.split, + #content hr.main-separator { + position: relative; + overflow: hidden; + border: none; + } + + #content hr.split::after, + #content hr.main-separator::after { + display: inline-block; + content: ""; + width: calc(100% - min(calc(8vw - 35px), 45px)); + position: absolute; + top: 50%; + margin-left: 10px; + } + + #content hr.split::after { + border: 1px inset currentColor; + margin-top: -2px; + } + + #content hr.main-separator::after { + border-bottom: 1px solid currentColor; + } + + hr.cute, + #content hr.cute, + .sidebar hr.cute { + border-color: var(--primary-color); + border-style: none none dotted none; + } +} + +/* Images and media embedded right into content, effects */ + +@layer layout { + a.align-center, img.align-center, + audio.align-center, video.align-center { + display: block; + margin-left: auto; + margin-right: auto; + } + + a.align-full, a.align-full img, + img.align-full, video.align-full { + width: 100%; + } + + .content-image { + display: inline-block !important; + } +} + +@layer material { + img.pixelate, .pixelate img, + video.pixelate, .pixelate video { + image-rendering: crisp-edges; + } +} + +@layer print { + p > img, li > img { + max-width: 100%; + object-fit: contain; + height: auto; + vertical-align: text-bottom; + } +} + +/* Paths and filenames */ + +@layer print { + span.path, code.filename { + font-size: 0.95em; + font-family: "courier new", monospace; + font-weight: 800; + background: #ccc3; + + padding: 0.05em 0.5ch; + border: 1px solid #ccce; + border-radius: 2px; + line-height: 1.4; + } + + blockquote :is(span.path, code.filename) { + font-size: 0.9em; + } + + .image-details code.filename { + margin-left: -0.4ch; + opacity: 0.8; + } + + .image-details code.filename:hover { + opacity: 1; + cursor: text; + } + + span.path i { + display: inline-block; + font-style: normal; + } + + span.path i::before { + content: "\0020/\0020"; + color: #ccc; + } +} + +/* Spoiler elements */ + +@layer print { + s.spoiler { + display: inline-block; + color: transparent; + text-decoration: underline; + text-decoration-color: white; + text-decoration-style: dashed; + text-decoration-skip: none; + text-decoration-skip-ink: none; + } + + s.spoiler::selection { + color: black; + background: white; + } + + s.spoiler::-moz-selection { + color: black; + background: white; + } +} + +/* Summary elements */ + +@layer print { + summary > span b { + font-weight: normal; + color: var(--primary-color); + } + + summary > span:hover { + cursor: pointer; + text-decoration: underline; + text-decoration-color: var(--primary-color); + } + + summary > span:hover a { + text-decoration: none !important; + } + + summary > span:hover:has(a:hover), + summary > span:hover:has(a.nested-hover), + summary.has-nested-hover > span { + text-decoration: none !important; + } + + summary > span:hover:has(a:hover) a, + summary > span:hover:has(a.nested-hover) a, + summary.has-nested-hover > span a { + text-decoration: underline !important; + } + + summary.underline-white > span:hover { + text-decoration-color: white; + } + + /* This link isn't supposed to be underlined *at all* + * when the summary (and not link) is hovered, but + * for some reason Safari is still applying its colored + * and dotted(!) underline. Get around the apparent + * effect by just making it white. + */ + summary.underline-white > span:hover a:not(:hover) { + text-decoration-color: white; + } +} + +/* "Drops" */ + +@layer layout { + .drop { + padding: 15px 20px; + width: max-content; + max-width: min(60vw, 600px); + } + + .commentary-drop { + margin-top: 25px; + margin-bottom: 15px; + margin-left: 20px; + padding: 10px 20px; + max-width: min(60vw, 300px); + } +} + +@layer material { + .drop { + border: 1px dotted var(--primary-color); + border-radius: 6px; + + background: + linear-gradient(var(--bg-color), var(--bg-color)), + linear-gradient(#000000bb, #000000bb), + var(--primary-color); + + --drop-shadow: 0 -2px 6px -1px var(--dim-color) inset; + box-shadow: var(--drop-shadow); + } +} + +@layer interaction { + .drop.shiny { + cursor: default; + } + + @supports (box-shadow: 1px 1px 1px color-mix(in srgb, blue, 40% red)) { + @property --drop-shine { + syntax: '<percentage>'; + initial-value: 0%; + inherits: false; + } + + .drop.shiny { + cursor: default; + transition: --drop-shine 0.2s; + } + + .drop.shiny:hover { + --drop-shine: 100%; + + box-shadow: + var(--drop-shadow), + 0 2px 4px -0.5px color-mix(in srgb, var(--primary-color), calc(100% - var(--drop-shine)) transparent); + } + } +} + +/* Track sections, and similar */ + +@layer layout { + .album-group-list dt, + .group-series-list dt { + padding-left: 0; + } + + .album-group-list dd, + .group-series-list dd { + margin-left: 0; + } + + .album-group-list li { + padding-left: 1.5ch; + text-indent: -1.5ch; + } + + .album-group-list li > * { + text-indent: 0; + } + + .album-group-list blockquote, + .group-series-list blockquote { + max-width: 540px; + margin-bottom: 9px; + margin-top: 3px; + } + + .album-group-list blockquote p:first-child, + .group-series-list blockquote p:first-child { + margin-top: 0; + } + + .album-group-list blockquote p:last-child, + .group-series-list blockquote p:last-child { + margin-bottom: 0; + } +} + +@layer print { + .album-group-list dt, + .group-series-list dt { + font-style: oblique; + } +} |