mirror of
https://github.com/NohamR/safari-internal-js.git
synced 2026-02-22 02:45:41 +00:00
1369 lines
39 KiB
HTML
1369 lines
39 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta name="disabled-adaptations" content="watch">
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
<meta name="viewport" content="initial-scale=1">
|
||
<base>
|
||
<title>Reader</title>
|
||
<style id="assistant-content">
|
||
#summary-container {
|
||
pointer-events: auto;
|
||
-webkit-user-select: auto;
|
||
background: transparent;
|
||
line-height: 1.6em;
|
||
}
|
||
#summary-header {
|
||
padding-top: 1.8em;
|
||
margin: 0em;
|
||
line-height: 1.6em;
|
||
}
|
||
#tableOfContents-container {
|
||
padding-bottom: 2.1em;
|
||
}
|
||
|
||
#tableOfContents-header {
|
||
margin: 0em;
|
||
line-height: 1.6em;
|
||
padding-top: 1.8em
|
||
}
|
||
#tableOfContents-list {
|
||
margin-left: 0em;
|
||
margin-right: 0em;
|
||
margin-top: 0.25em;
|
||
padding-left: 1.8em;
|
||
line-height: 1.6em;
|
||
}
|
||
|
||
#summary-collapsedContent {
|
||
transition: max-height 0.2s ease-out;
|
||
}
|
||
|
||
#summary-collapsible-text-id-1.vision {
|
||
border-top: 0.1em solid var(--separator-color);
|
||
padding: 1em 1em 0;
|
||
}
|
||
|
||
.innerTableOfContents-listItem {
|
||
border-bottom: 0.1em solid var(--separator-color);
|
||
margin-bottom: 0.3em;
|
||
margin-top: 0.3em;
|
||
}
|
||
|
||
.innerTableOfContents-listItem:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.collapsible {
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
padding-left: 1em;
|
||
padding-top: 1em;
|
||
padding-bottom: 1em;
|
||
padding-right: 1em;
|
||
width: 100%;
|
||
outline: none
|
||
overflow: hidden;
|
||
background: transparent;
|
||
background-repeat: no-repeat;
|
||
text-align: left;
|
||
border: none;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
|
||
.collapsible:nth-of-type(2):not(:first-of-type) {
|
||
border-top: 0.1em solid var(--separator-color);
|
||
}
|
||
|
||
.collapsible:after {
|
||
content: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="7.15323" height="12.4569"><g><rect height="12.4569" opacity="0" width="7.15323" x="0" y="0"/><path d="M7.15323 6.22406C7.15165 5.96742 7.06077 5.74734 6.85599 5.54414L1.51768 0.255233C1.35263 0.0829682 1.14362 0 0.897181 0C0.395505 0 0 0.386716 0 0.885228C0 1.12446 0.105292 1.35175 0.272634 1.53034L5.01961 6.22248L0.272634 10.9178C0.106874 11.0964 0 11.3164 0 11.5645C0 12.063 0.395505 12.4497 0.897181 12.4497C1.14204 12.4497 1.35263 12.3667 1.51768 12.1945L6.85599 6.90397C7.06235 6.70077 7.15323 6.47911 7.15323 6.22406Z" fill="%23868686" fill-opacity="0.95"/></g></svg>');
|
||
width: 0.8em;
|
||
height: 0.8em;
|
||
float: right;
|
||
padding-left: 0.8em;
|
||
padding-right: 1em;
|
||
}
|
||
|
||
.collapsible.vision:after {
|
||
padding-right: 0;
|
||
}
|
||
|
||
.collapsedContent {
|
||
margin: 0;
|
||
padding: 0;
|
||
max-height: 0;
|
||
overflow: auto;
|
||
padding-left: 1em;
|
||
padding-right: 1.25em;
|
||
transition: max-height 0.2s ease-out;
|
||
}
|
||
|
||
.collapsedContent.vision {
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
.expandedContent:after {
|
||
content:url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.4569" height="7.76214"><g><rect height="7.76214" opacity="0" width="12.4569" x="0" y="0"/><path d="M6.23285 7.76214C6.48949 7.76056 6.72239 7.6681 6.91276 7.4649L12.2017 2.12501C12.3667 1.95995 12.4569 1.75095 12.4569 1.50451C12.4569 1.00283 12.0702 0.607328 11.5717 0.607328C11.3324 0.607328 11.098 0.71262 10.9266 0.879962L5.86564 5.99169L6.5976 5.99169L1.53192 0.879962C1.36054 0.714202 1.14046 0.607328 0.892435 0.607328C0.393923 0.607328 0 1.00283 0 1.50451C0 1.74937 0.0917573 1.95837 0.255233 2.12501L5.55293 7.4649C5.75051 7.66968 5.97058 7.76214 6.23285 7.76214Z" fill="%23868686" fill-opacity="0.95"/></g></svg>');
|
||
width: 0.8em;
|
||
height: 0.8em;
|
||
padding-right: 1.15em;
|
||
}
|
||
|
||
.expandedContent.vision:after {
|
||
padding-right: 0;
|
||
}
|
||
|
||
#innerAssistantContainer {
|
||
margin-bottom: 1.31em;
|
||
border-radius: 1.31em;
|
||
background: var(--narrow-assistant-background-color);
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
#innerAssistantContainer > *:nth-child(1 of .eligible-for-border-corner) {
|
||
border-top-left-radius: 1.31em;
|
||
border-top-right-radius: 1.31em;
|
||
transition: max-height 0.2s ease-out, border-top-left-radius 0.2s step-end, border-top-right-radius 0.2s step-end;
|
||
}
|
||
#innerAssistantContainer > *:nth-last-child(1 of .eligible-for-border-corner) {
|
||
border-bottom-left-radius: 1.31em;
|
||
border-bottom-right-radius: 1.31em;
|
||
transition: max-height 0.2s ease-out, border-bottom-left-radius 0.2s step-end, border-bottom-right-radius 0.2s step-end;
|
||
}
|
||
|
||
#onDeviceSummaryButton {
|
||
cursor: pointer;
|
||
font-weight: bold;
|
||
padding-left: 1em;
|
||
padding-right: 1em;
|
||
padding-top: 1em;
|
||
padding-bottom: 1em;
|
||
margin-bottom: 1em;
|
||
width: 100%;
|
||
outline: none
|
||
overflow: hidden;
|
||
background: var(--narrow-assistant-background-color);
|
||
background-repeat: no-repeat;
|
||
text-align: left;
|
||
font-size: 1em;
|
||
border-radius: 1.31em;
|
||
border: none;
|
||
transition: opacity 0.2s ease-in-out;
|
||
}
|
||
.hiddenButton {
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
padding: 0px;
|
||
margin: 0px;
|
||
height: 0px;
|
||
border-radius: 0px;
|
||
}
|
||
|
||
#glyph {
|
||
height: 1.85em;
|
||
width: 1.85em;
|
||
float: left;
|
||
margin: -0.25em -0.25em 0px 0px;
|
||
}
|
||
|
||
#assistant-container {
|
||
background: var(--assistant-sidebar-color);
|
||
padding-top: 2.13em;
|
||
padding-bottom: 2.13em;
|
||
padding-left: 1em;
|
||
padding-right: 1em;
|
||
transition: right 0.5s cubic-bezier(.17,.67,.99,1);
|
||
width: 350px;
|
||
right: 20vw;
|
||
}
|
||
|
||
#sidebarButton {
|
||
margin-top: 2.5em;
|
||
position: fixed;
|
||
right: 19vw;
|
||
transition: right 0.5s cubic-bezier(.17,.67,.99,1);
|
||
}
|
||
|
||
#article {
|
||
transition: left 0.5s cubic-bezier(.17,.67,.99,1);
|
||
}
|
||
|
||
#summary-inline-attribution {
|
||
margin-right: 0.25em;
|
||
margin-bottom: -0.1em;
|
||
}
|
||
|
||
#summary-attribution {
|
||
display: flex;
|
||
align-items: center;
|
||
color: var(--assistant-secondary-color);
|
||
padding-inline-start: 1em;
|
||
}
|
||
|
||
#summary-attribution-name {
|
||
margin-left: 3px;
|
||
font-size: 0.7em;
|
||
font-weight: 500;
|
||
}
|
||
</style>
|
||
|
||
<style id="article-content">
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-weight: bold;
|
||
}
|
||
h1 {
|
||
font-size: 1.5em;
|
||
line-height: 1.4em;
|
||
}
|
||
h2 {
|
||
font-size: 1.43em;
|
||
}
|
||
h3 {
|
||
font-size: 1.25em;
|
||
}
|
||
h4, h5, h6 {
|
||
font-size: 1em;
|
||
margin: 1em 0;
|
||
}
|
||
|
||
body.watch h1 {
|
||
font-size: 1.1875rem;
|
||
}
|
||
body.watch h2 {
|
||
font-size: 1.125rem;
|
||
}
|
||
body.watch h3 {
|
||
font-size: 1.0625rem;
|
||
}
|
||
body.watch :matches(h4, h5, h6) {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
h1.title {
|
||
font-weight: bold;
|
||
font-size: 1.95552em;
|
||
line-height: 1.2141em;
|
||
margin-top: 0;
|
||
margin-bottom: 0.5em;
|
||
}
|
||
|
||
.subhead {
|
||
font-weight: normal;
|
||
}
|
||
|
||
.title, .subhead, .metadata {
|
||
text-align: start;
|
||
hyphens: manual;
|
||
display: none;
|
||
}
|
||
|
||
:nth-child(1 of .page) :matches(.title, .subhead, .metadata) {
|
||
display: block;
|
||
}
|
||
|
||
.subhead {
|
||
color: rgba(27, 27, 27, 0.65);
|
||
font-size: 1.46664em;
|
||
margin-top: -0.35em;
|
||
line-height: 1.27275em;
|
||
}
|
||
|
||
.metadata {
|
||
margin-top: -0.75em;
|
||
margin-bottom: 1.45em;
|
||
}
|
||
body.watch .metadata {
|
||
line-height: 1.3em;
|
||
}
|
||
|
||
.metadata * {
|
||
font-size: 1em !important;
|
||
font-weight: normal !important;
|
||
font-style: normal !important;
|
||
display: inline !important;
|
||
margin: 0;
|
||
}
|
||
|
||
.metadata :matches(.byline, .date) {
|
||
display: inline !important;
|
||
}
|
||
|
||
.metadata :matches(ul, ol, li) {
|
||
list-style-type: none;
|
||
-webkit-padding-start: 0;
|
||
}
|
||
|
||
.title + .metadata {
|
||
margin-top: -0.75em;
|
||
}
|
||
|
||
.subhead + .metadata {
|
||
margin-top: -0.7em;
|
||
}
|
||
|
||
.page {
|
||
text-align: start;
|
||
word-wrap: break-word;
|
||
}
|
||
body.watch .page {
|
||
hyphens: auto;
|
||
}
|
||
|
||
.page.rtl {
|
||
direction: rtl;
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
}
|
||
|
||
a[href] {
|
||
color: rgb(65, 110, 210);
|
||
}
|
||
|
||
#article {
|
||
text-rendering: optimizeLegibility;
|
||
}
|
||
|
||
#article * {
|
||
/* Scale down anything larger than our view. Max-width maintains aspect ratios on images. */
|
||
max-width: 100%;
|
||
}
|
||
|
||
#article img {
|
||
/* By default, images are centered on their own line. */
|
||
margin: 0.5em auto;
|
||
display: block;
|
||
height: auto;
|
||
}
|
||
|
||
#article img.reader-image-tiny {
|
||
display: inline;
|
||
margin: 0;
|
||
}
|
||
|
||
#article .leading-image, figure, .auxiliary {
|
||
margin-bottom: 1.15em;
|
||
}
|
||
|
||
#article .leading-image img {
|
||
margin: auto;
|
||
display: block;
|
||
clear: both;
|
||
}
|
||
|
||
#article .leading-image .credit {
|
||
margin: 0;
|
||
}
|
||
|
||
#article .leading-image,
|
||
#article figure {
|
||
font-size: 0.75em;
|
||
line-height: 1.5em;
|
||
}
|
||
|
||
body.watch #article .leading-image,
|
||
body.watch #article figure {
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
#article .leading-image :matches(.caption, .credit),
|
||
#article figcaption {
|
||
margin-top: 0.8em;
|
||
width: 100%;
|
||
}
|
||
|
||
body.watch #article .leading-image :matches(.caption, .credit),
|
||
body.watch #article figcaption {
|
||
margin-top: 4px;
|
||
}
|
||
|
||
body.watch #article figure img {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
#article figcaption > * {
|
||
margin-top: 0.25em;
|
||
margin-bottom: 0.25em;
|
||
}
|
||
|
||
#article :matches(.leading-image, figure) p {
|
||
margin-top: 0.4em;
|
||
margin-bottom: 0.4em;
|
||
}
|
||
|
||
#article .leading-image .credit + .caption {
|
||
margin-top: 0.1em;
|
||
}
|
||
|
||
#article .auxiliary {
|
||
display: block;
|
||
clear: both;
|
||
font-size: 0.75em;
|
||
line-height: 1.4em;
|
||
text-align: start;
|
||
}
|
||
|
||
body.watch #article .auxiliary {
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
#article .pullquote {
|
||
font-size: 1.42em;
|
||
line-height: 1.38em;
|
||
font-weight: 300;
|
||
font-style: italic;
|
||
}
|
||
|
||
#article .pullquote:not(.float) {
|
||
margin-top: 1em;
|
||
margin-bottom: 1em;
|
||
-webkit-margin-start: 1em;
|
||
max-width: calc(100% - 1em);
|
||
}
|
||
|
||
#article .auxiliary > *:not(img) {
|
||
-webkit-margin-start: 0;
|
||
}
|
||
|
||
#article .auxiliary.float img, #article .auxiliary > *:first-child:not(img) {
|
||
margin: 0;
|
||
}
|
||
|
||
/* If the element immediately after an image is inline, it might bump up against the image. */
|
||
#article .auxiliary img + * {
|
||
display: block;
|
||
}
|
||
|
||
#article .auxiliary figcaption {
|
||
font-size: 100%;
|
||
}
|
||
|
||
#article .auxiliary * {
|
||
margin-top: 0.5em;
|
||
margin-bottom: 0.5em;
|
||
}
|
||
|
||
body:not(.watch) #article .float.left {
|
||
float: left;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
body:not(.watch) #article .float.right {
|
||
float: right;
|
||
margin-left: 20px;
|
||
}
|
||
|
||
body.watch #article .float {
|
||
width: auto !important;
|
||
}
|
||
|
||
#article .clear {
|
||
clear: both;
|
||
}
|
||
|
||
#article ul.list-style-type-none,
|
||
#article ol.list-style-type-none,
|
||
#article .list-style-type-none > li {
|
||
list-style-type: none;
|
||
-webkit-padding-start: 0;
|
||
}
|
||
|
||
#article .page .list-style-type-none.code-block code {
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
#article .page div.scrollable {
|
||
overflow-x: scroll;
|
||
word-wrap: normal;
|
||
}
|
||
|
||
#article .page div.scrollable table {
|
||
max-width: none;
|
||
}
|
||
|
||
#article .leading-image, #article figure, #article .auxiliary:not(.pullquote) {
|
||
font-family: -apple-system-font;
|
||
}
|
||
|
||
#article .leading-image, #article figure, #article .auxiliary, #article .pullquote {
|
||
color: rgba(0, 0, 0, 0.65);
|
||
}
|
||
|
||
figure {
|
||
margin: 0;
|
||
}
|
||
|
||
body:not(.watch) figure:not(.float) {
|
||
margin-top: 1.4em;
|
||
margin-bottom: 1.4em;
|
||
}
|
||
|
||
hr {
|
||
background: rgba(0, 0, 0, 0.2);
|
||
height: 1px;
|
||
border: 0;
|
||
}
|
||
|
||
pre {
|
||
font-family: -apple-system-ui-monospaced, Menlo;
|
||
font-size: 0.87em;
|
||
line-height: 1.45em;
|
||
}
|
||
|
||
blockquote, q {
|
||
color: rgba(0, 0, 0, 0.65);
|
||
}
|
||
|
||
blockquote:not(.pullquote) {
|
||
margin-left: 2px;
|
||
margin-right: 6px;
|
||
padding-left: 16px;
|
||
}
|
||
|
||
blockquote:not(.simple):not(.pullquote) {
|
||
border-left: 3px solid rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
q.pullquote {
|
||
display: block;
|
||
}
|
||
|
||
.pullquote q::before, .pullquote q::after, q.pullquote::before, q.pullquote::after {
|
||
content: "";
|
||
}
|
||
|
||
/* Collapse excess whitespace. */
|
||
.page p > p:empty,
|
||
.page div > p:empty,
|
||
.page p > div:empty,
|
||
.page div > div:empty,
|
||
.page p + br,
|
||
.page img + br
|
||
{
|
||
display: none;
|
||
}
|
||
|
||
.page table {
|
||
font-size: 0.9em;
|
||
text-align: start;
|
||
word-wrap: break-word;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.page table td, .page table th {
|
||
padding: 0.25em 0.5em;
|
||
border: 1px solid rgb(216, 216, 216);
|
||
}
|
||
|
||
body.watch .page > * {
|
||
margin-left: 0;
|
||
margin-right: 0;
|
||
}
|
||
|
||
body.watch .page ol {
|
||
padding: 0 0 0 35px;
|
||
}
|
||
|
||
body.watch .page ul {
|
||
padding: 0 0 0 20px;
|
||
}
|
||
|
||
body.watch .page li {
|
||
margin: 0.8em 0;
|
||
}
|
||
|
||
body.watch .page blockquote {
|
||
padding: 0 0 0 8px;
|
||
}
|
||
|
||
.delimiter {
|
||
margin-left: 0.45em;
|
||
margin-right: 0.45em;
|
||
margin-top: 0.07em;
|
||
padding: 0;
|
||
}
|
||
.metadata.singleline .delimiter::after {
|
||
content: "•";
|
||
}
|
||
.metadata:not(.singleline) .delimiter {
|
||
content: "";
|
||
display: block !important;
|
||
}
|
||
|
||
.page table th {
|
||
background-color: rgba(0, 0, 0, 0.025);
|
||
}
|
||
|
||
.page sup, .page sub {
|
||
line-height: 1;
|
||
font-size: 0.75em;
|
||
}
|
||
|
||
.hidden {
|
||
display: none;
|
||
}
|
||
|
||
/* Special Font Customizations */
|
||
.system { font-family: -apple-system-font; }
|
||
.watch.system { font: -apple-system-body; }
|
||
.yuantisc {
|
||
letter-spacing: 1px;
|
||
}
|
||
.yuantitc {
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
/* Printing and mailing. */
|
||
#article.exported {
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.exported {
|
||
line-height: 1.5em;
|
||
}
|
||
|
||
.exported a[href] {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
#article.exported {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.exported .float {
|
||
float: none;
|
||
margin-top: 1.4em;
|
||
margin-bottom: 1.4em;
|
||
}
|
||
|
||
#article.exported .leading-image,
|
||
#article.exported figcaption {
|
||
font-size: 0.75rem;
|
||
color: rgba(0, 0, 0, 0.8);
|
||
}
|
||
|
||
.exported .delimiter::after {
|
||
content: "";
|
||
}
|
||
</style>
|
||
<style id="print">
|
||
@media print {
|
||
body {
|
||
margin: 2mm 9mm;
|
||
}
|
||
|
||
.original-url {
|
||
display: none;
|
||
}
|
||
|
||
#article .float.left {
|
||
float: left !important;
|
||
}
|
||
|
||
#article .float.right {
|
||
float: right !important;
|
||
}
|
||
|
||
#article .float {
|
||
margin-top: 0 !important;
|
||
margin-bottom: 0 !important;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style id="reader-ui">
|
||
@media screen {
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
-webkit-user-select: none;
|
||
overflow-x: hidden;
|
||
-webkit-text-size-adjust: none;
|
||
}
|
||
body.mac {
|
||
background-color: transparent;
|
||
}
|
||
|
||
#article {
|
||
pointer-events: auto;
|
||
-webkit-user-select: auto;
|
||
overflow: visible;
|
||
margin-bottom: 42vh !important;
|
||
}
|
||
|
||
#article:focus {
|
||
outline: none;
|
||
}
|
||
|
||
.page-number {
|
||
display: block;
|
||
}
|
||
|
||
#article :nth-child(1 of .page):nth-last-child(1 of .page) .page-number {
|
||
display: none;
|
||
}
|
||
body.watch #article :nth-child(1 of .page):nth-last-child(1 of .page) {
|
||
padding-top: 0.15em;
|
||
}
|
||
|
||
.page-number, #incoming-page-corner {
|
||
font-weight: bold;
|
||
position: absolute;
|
||
-webkit-user-select: none;
|
||
font: 12px "Helvetica Neue";
|
||
color: rgb(168, 168, 168);
|
||
cursor: default;
|
||
}
|
||
body.watch :matches(.page-number, #incoming-page-corner) {
|
||
top: 8px;
|
||
right: 16px;
|
||
}
|
||
|
||
.page {
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
padding-top: 35px;
|
||
padding-bottom: 35px;
|
||
position: relative;
|
||
border-top: 1px solid rgba(0, 0, 0, 0.2);
|
||
}
|
||
body.watch .page {
|
||
padding: 0 4px;
|
||
}
|
||
|
||
#article :nth-child(1 of .page) {
|
||
margin-top: 0;
|
||
border-top: none;
|
||
padding-top: 32px;
|
||
}
|
||
|
||
.page:last-of-type {
|
||
padding-bottom: 45px;
|
||
}
|
||
|
||
.page video {
|
||
height: auto;
|
||
position: relative;
|
||
}
|
||
|
||
#incoming-page-placeholder {
|
||
height: 30px;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
#incoming-page-corner {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 8px;
|
||
}
|
||
|
||
#incoming-page-text {
|
||
float: right;
|
||
-webkit-user-select: none;
|
||
}
|
||
|
||
#next-page-container {
|
||
position:absolute;
|
||
/* Workaround for <rdar://problem/8662842> iOS Reader: loading multiple pages stops at the 2nd page. */
|
||
left: -1000px;
|
||
/* The iframe needs to be wider than the width threshold value for Reader detection, see <rdar://problem/9599297>. */
|
||
width: 320px;
|
||
height: 0px;
|
||
}
|
||
|
||
.page div.scrollable {
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
}
|
||
|
||
@media screen and (-webkit-min-device-pixel-ratio:2) {
|
||
.page {
|
||
border-top-width: 0.5px;
|
||
}
|
||
|
||
hr {
|
||
height: 0.5px;
|
||
}
|
||
}
|
||
|
||
#article .extendsBeyondTextColumn {
|
||
max-width: none;
|
||
}
|
||
|
||
.iframe-wrapper {
|
||
background-color: black;
|
||
max-width: none;
|
||
text-align: center;
|
||
}
|
||
|
||
iframe {
|
||
border: 0;
|
||
}
|
||
|
||
@media screen and (min-width: 0px) {
|
||
/* Includes iPhone 5 in portrait */
|
||
.page { padding-left: 16px; padding-right: 16px; }
|
||
.page-number, #incoming-page-corner {
|
||
top: 8px;
|
||
right: 16px;
|
||
}
|
||
#article :nth-child(1 of .page):nth-last-child(1 of .page) {
|
||
padding-top: 14px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 161px) {
|
||
/* Apple Watch 40mm */
|
||
body.watch .page {
|
||
padding: 0 8.5px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 183px) {
|
||
/* Apple Watch 44mm */
|
||
body.watch .page {
|
||
padding: 0 9.5px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 375px) {
|
||
/* iPhone 6 in portrait */
|
||
.page { padding-left: 18px; padding-right: 18px; }
|
||
.page-number, #incoming-page-corner {
|
||
top: 6px;
|
||
right: 18px;
|
||
}
|
||
#article :nth-child(1 of .page):nth-last-child(1 of .page) {
|
||
padding-top: 16px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 414px) {
|
||
/* iPhone 6 Plus in portrait */
|
||
.page { padding-left: 20px; padding-right: 20px; }
|
||
.page-number, #incoming-page-corner {
|
||
top: 6px;
|
||
right: 20px;
|
||
}
|
||
#article :nth-child(1 of .page):nth-last-child(1 of .page) {
|
||
padding-top: 18px;
|
||
}
|
||
}
|
||
|
||
/* iPhone 5 in landscape (568px) */
|
||
|
||
@media screen and (min-width: 667px) {
|
||
/* iPhone 6 in landscape */
|
||
.page { padding-left: 40px; padding-right: 40px; }
|
||
.page-number, #incoming-page-corner {
|
||
/* Stop lining this text up with .page's right margin. */
|
||
top: 10px;
|
||
right: 10px;
|
||
}
|
||
#article :nth-child(1 of .page):nth-last-child(1 of .page) {
|
||
padding-top: 26px;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 569px) {
|
||
/* iPhone 5 in landscape (568px) and smaller, including all iPhones in portrait */
|
||
h1.title {
|
||
font-size: 1.5558em;
|
||
}
|
||
h1 {
|
||
font-size: 1.4em;
|
||
}
|
||
h2 {
|
||
font-size: 1.2777em;
|
||
}
|
||
h3 {
|
||
font-size: 1.15em;
|
||
}
|
||
.subhead {
|
||
font-size: 1.2222em;
|
||
}
|
||
.metadata {
|
||
font-size: 0.9em;
|
||
line-height: 1.6em;
|
||
}
|
||
.title + .metadata {
|
||
margin-top: -0.65em;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 704px) {
|
||
/* iPad in landscape with the sidebar open */
|
||
.page { padding-left: 42px; padding-right: 42px; }
|
||
}
|
||
|
||
@media screen and (min-width: 736px) {
|
||
/* iPhone 6 Plus in landscape */
|
||
.page { padding-left: 60px; padding-right: 60px; }
|
||
#article :nth-child(1 of .page):nth-last-child(1 of .page) {
|
||
padding-top: 46px;
|
||
}
|
||
}
|
||
|
||
@media only screen and (min-width: 780px) {
|
||
#article {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* Readable margins. */
|
||
body.system #article { max-width: 83.2ex; }
|
||
body.athelas #article { max-width: 104ex; }
|
||
body.charter #article { max-width: 86ex; }
|
||
body.georgia #article { max-width: 94ex; }
|
||
body.iowanoldstyle #article { max-width: 90ex; }
|
||
body.palatino #article { max-width: 97ex; }
|
||
body.seravek #article { max-width: 87ex; }
|
||
body.timesnewroman #article { max-width: 97ex; }
|
||
body.uiserif #article { max-width: 93ex; }
|
||
|
||
:matches(body.pingfangsc, body.pingfangtc) #article { max-width: 87.6ex; }
|
||
:matches(body.heitisc, body.heititc) #article { max-width: 74.8ex; }
|
||
:matches(body.songtisc, body.songtitc) #article { max-width: 102ex; }
|
||
:matches(body.kaitisc, body.kaititc) #article { max-width: 102ex; }
|
||
:matches(body.yuantisc, body.yuantitc) #article { max-width: 86.2ex; }
|
||
:matches(body.libiansc, body.libiantc) #article { max-width: 95ex; }
|
||
:matches(body.weibeisc, body.weibeitc) #article { max-width: 99ex; }
|
||
:matches(body.yuppysc, body.yuppytc) #article { max-width: 87.6ex; }
|
||
|
||
body.hiraginosansw3 #article { max-width: 75.7ex; }
|
||
body.hiraginokakugothicpron #article { max-width: 76.4ex; }
|
||
body.hiraginominchopron #article { max-width: 77.5ex; }
|
||
body.hiraginomarugothicpron #article { max-width: 75.1ex; }
|
||
|
||
body.applesdgothicneo #article { max-width: 82ex; }
|
||
body.nanumgothic #article { max-width: 88.6ex; }
|
||
body.nanummyeongjo #article { max-width: 94.1ex; }
|
||
|
||
.page {
|
||
/* We don't want the lines seperating pages to extend beyond the primary text column. */
|
||
padding-left: 0px;
|
||
padding-right: 0px;
|
||
margin-left: 70px;
|
||
margin-right: 70px;
|
||
}
|
||
}
|
||
|
||
#article {
|
||
-webkit-font-smoothing: subpixel-antialiased;
|
||
}
|
||
|
||
/* Reader's paper appearance. */
|
||
html.paper {
|
||
height: 100%;
|
||
}
|
||
|
||
html.paper body {
|
||
height: calc(100% - 44px);
|
||
}
|
||
|
||
html.paper body:after {
|
||
content: "";
|
||
height: 22px;
|
||
display: block;
|
||
}
|
||
|
||
/* Clearfix */
|
||
html.paper .page::after {
|
||
content: "";
|
||
display: table;
|
||
clear: both;
|
||
}
|
||
|
||
html.paper #article {
|
||
min-height: 100%;
|
||
margin: 22px auto 0 auto;
|
||
}
|
||
|
||
html.paper #article :nth-child(1 of .page), html.paper #article :nth-child(1 of .page):nth-last-child(1 of .page) {
|
||
padding-top: 53px;
|
||
}
|
||
|
||
html.paper #article .page-number, html.paper #article #incoming-page-corner {
|
||
/* Stop lining this text up with .page's right margin. */
|
||
top: 14px;
|
||
right: 0px;
|
||
}
|
||
/* End Reader's paper appearance. */
|
||
|
||
/* Use slightly smaller page padding when vertically constrained. */
|
||
@media screen and (max-height: 700px) {
|
||
.page {
|
||
padding-top: 32px;
|
||
padding-bottom: 32px;
|
||
}
|
||
}
|
||
|
||
</style>
|
||
|
||
<style id="theming">
|
||
body.white {
|
||
--body-font-color: rgb(27, 27, 27);
|
||
--assistant-secondary-color: rgba(84, 84, 84, 1.0);
|
||
--horizontal-line-color: rgb(220, 220, 220);
|
||
--assistant-sidebar-color: rgb(220, 220, 220);
|
||
--paper-shadow-color: rgba(0, 0, 0, 0.2);
|
||
--separator-color: rgb(220, 220, 220);
|
||
--assistant-sidebar-color: rgba(245, 245, 245, 0.72);
|
||
--narrow-assistant-background-color: rgba(18, 18, 18, 0.1);
|
||
}
|
||
body.sepia {
|
||
--body-font-color: rgb(79, 50, 28);
|
||
--assistant-secondary-color: rgb(79, 50, 28, 0.5);
|
||
--horizontal-line-color: rgb(230, 218, 201);
|
||
--separator-color: rgb(204, 191, 157);
|
||
--assistant-sidebar-color: rgb(230, 218, 201);
|
||
--paper-shadow-color: rgba(0, 0, 0, 0.2);
|
||
--narrow-assistant-background-color: rgba(18, 18, 18, 0.1);
|
||
}
|
||
body.gray {
|
||
--body-font-color: rgba(255, 255, 255, 0.78);
|
||
--assistant-secondary-color: rgba(172, 172, 172, 1.0);
|
||
--horizontal-line-color: rgb(111, 111, 111);
|
||
--separator-color: rgb(111, 111, 111);
|
||
--assistant-sidebar-color: rgba(44, 44, 44, 0.76);
|
||
--narrow-assistant-background-color: rgba(18, 18, 18, 0.1);
|
||
}
|
||
body.night {
|
||
--body-font-color: rgb(176, 176, 176);
|
||
--assistant-secondary-color: rgba(172, 172, 172, 1.0);
|
||
--horizontal-line-color: rgb(62, 62, 62);
|
||
--separator-color: rgb(62, 62, 62);
|
||
--assistant-sidebar-color: rgba(44, 44, 44, 0.76);
|
||
--narrow-assistant-background-color: rgba(50, 50, 50, 0.3);
|
||
}
|
||
body.night.oled {
|
||
--body-font-color: rgb(210, 210, 210);
|
||
--assistant-secondary-color: rgba(172, 172, 172, 1.0);
|
||
--horizontal-line-color: rgba(210, 210, 210, 0.35);
|
||
--separator-color: rgba(210, 210, 210, 0.35);
|
||
--assistant-sidebar-color: rgba(44, 44, 44, 0.76);
|
||
--narrow-assistant-background-color: rgba(50, 50, 50, 0.3);
|
||
}
|
||
body.watch.night.oled {
|
||
--body-font-color: rgb(174, 180, 191);
|
||
}
|
||
body.vision {
|
||
--separator-color: var(--background-color);
|
||
}
|
||
|
||
html:not(.paper) body.white, body.white #article {
|
||
--background-color: white;
|
||
background-color: var(--background-color);
|
||
}
|
||
html:not(.paper) body.sepia, body.sepia #article {
|
||
--background-color: rgb(248, 241, 227);
|
||
background-color: var(--background-color);
|
||
}
|
||
html:not(.paper) body.gray, body.gray #article {
|
||
--background-color: rgb(74, 74, 77);
|
||
background-color: var(--background-color);
|
||
}
|
||
html:not(.paper) body.night, body.night #article {
|
||
--background-color: rgb(18, 18, 18);
|
||
background-color: var(--background-color);
|
||
}
|
||
html:not(.paper) body.night.oled, body.night.oled #article {
|
||
--background-color: black;
|
||
background-color: var(--background-color);
|
||
}
|
||
|
||
/* OS X Reader draws backdrop background colors outside of web content, so the follow set only applies to iOS. */
|
||
html.paper body.ios.white {
|
||
background-color: rgb(230, 230, 230);
|
||
}
|
||
html.paper body.ios.sepia {
|
||
background-color: rgb(224, 216, 200);
|
||
}
|
||
html.paper body.ios.gray {
|
||
background-color: rgb(50, 50, 51);
|
||
}
|
||
html.paper body.ios.night {
|
||
background-color: black;
|
||
}
|
||
|
||
body.watch.night .metadata * {
|
||
color: rgb(214, 217, 223) !important;
|
||
}
|
||
|
||
html.paper body.white #article, html.paper body.sepia #article {
|
||
box-shadow: 0px 6px 12px 3px var(--paper-shadow-color);
|
||
}
|
||
html.paper body.gray #article {
|
||
box-shadow: 0px 6px 12px 3px rgba(0, 0, 0, 0.24);
|
||
}
|
||
html.paper body.night #article {
|
||
outline: 1px solid #272727;
|
||
}
|
||
|
||
body.watch.night.oled :matches(h1, h2, h3, h4, h5, h6) {
|
||
color: white;
|
||
}
|
||
|
||
body.sepia #article :matches(.leading-image, figure, .auxiliary, .pullquote) {
|
||
color: rgba(79, 50, 28, 0.9);
|
||
}
|
||
body.gray #article :matches(.leading-image, figure, .auxiliary, .pullquote) {
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
body.night #article :matches(.leading-image, figure, .auxiliary, .pullquote) {
|
||
color: rgba(255, 255, 255, 0.67);
|
||
}
|
||
body.night.oled #article :matches(.leading-image, figure, .auxiliary, .pullquote) {
|
||
color: rgba(210, 210, 210, 0.9);
|
||
}
|
||
|
||
body.sepia #article a[href] {
|
||
color: rgb(209, 150, 0);
|
||
}
|
||
body.gray #article a[href], body.night #article a[href] {
|
||
color: rgb(90, 200, 250);
|
||
}
|
||
body.watch.night.oled #article a[href] {
|
||
color: rgb(32, 148, 250);
|
||
}
|
||
|
||
body #article :matches(.page, .metadata a[href]) {
|
||
color: var(--body-font-color);
|
||
}
|
||
body #article .page {
|
||
border-top-color: var(--horizontal-line-color);
|
||
}
|
||
body #article hr {
|
||
background: var(--horizontal-line-color);
|
||
}
|
||
body #assistant-container p {
|
||
color: var(--assistant-secondary-color);
|
||
}
|
||
body #assistant-container ol {
|
||
color: var(--assistant-secondary-color);
|
||
}
|
||
body #assistant-container h2 {
|
||
color: var(--body-font-color);
|
||
font-size: 1.43em;
|
||
}
|
||
body #assistant-container h3 {
|
||
color: var(--body-font-color);
|
||
font-size: 1.25em;
|
||
}
|
||
body #assistant-container h1 {
|
||
font-size: 1.5em;
|
||
line-height: 1.4em;
|
||
color: var(--body-font-color);
|
||
margin: 0em;
|
||
}
|
||
body #assistant-container a {
|
||
color: var(--assistant-secondary-color);
|
||
}
|
||
body #assistant-container ol {
|
||
padding: 0em;
|
||
}
|
||
body #summary-container p {
|
||
color: var(--assistant-secondary-color);
|
||
margin: 0px;
|
||
padding-top: 4px;
|
||
}
|
||
body #summary-container h2 {
|
||
color: var(--body-font-color);
|
||
}
|
||
body #summary-container h1 {
|
||
color: var(--body-font-color);
|
||
}
|
||
|
||
body #tableOfContentsInsideArticle-list a {
|
||
color: var(--body-font-color);
|
||
font-size: 1em;
|
||
}
|
||
|
||
body #innerAssistantContainer p {
|
||
color: var(--body-font-color);
|
||
margin-top: 0;
|
||
margin-bottom: 0.4em;
|
||
}
|
||
body #innerAssistantContainer ol {
|
||
color: var(--body-font-color);
|
||
}
|
||
body #innerAssistantContainer li {
|
||
margin-left: 1.4em;
|
||
}
|
||
body #innerAssistantContainer ol li::marker {
|
||
color: var(--assistant-secondary-color);
|
||
}
|
||
body #innerAssistantContainer button {
|
||
color: var(--body-font-color);
|
||
font-size: 1em;
|
||
}
|
||
|
||
body #onDeviceSummaryButton {
|
||
color: var(--body-font-color);
|
||
}
|
||
|
||
body.sepia .subhead {
|
||
color: rgba(79, 50, 28, 0.72);
|
||
}
|
||
body.gray .subhead {
|
||
color: rgba(255, 255, 255, 0.65);
|
||
}
|
||
body.night .subhead {
|
||
color: rgba(185, 185, 185, 0.9);
|
||
}
|
||
body.night.oled .subhead {
|
||
color: rgba(210, 210, 210, 0.85);
|
||
}
|
||
|
||
body.sepia :matches(#article .page-number, #incoming-page-corner) {
|
||
color: rgba(63, 41, 23, 0.5);
|
||
}
|
||
body.gray :matches(#article .page-number, #incoming-page-corner) {
|
||
color: rgba(255, 255, 255, 0.45);
|
||
}
|
||
body.night :matches(#article .page-number, #incoming-page-corner) {
|
||
color: rgba(255, 255, 255, 0.55);
|
||
}
|
||
body.night.oled :matches(#article .page-number, #incoming-page-corner) {
|
||
color: rgba(210, 210, 210, 0.8);
|
||
}
|
||
|
||
body.sepia #article blockquote, body.sepia #article q {
|
||
color: rgb(140, 112, 79);
|
||
}
|
||
body.sepia #article blockquote:not(.simple):not(.pullquote) {
|
||
border-left-color: rgba(154, 128, 92, 0.1);
|
||
}
|
||
body.gray #article blockquote, body.gray #article q {
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
body.gray #article blockquote:not(.simple):not(.pullquote) {
|
||
border-left-color: rgba(255, 255, 255, 0.15);
|
||
}
|
||
body.night #article blockquote, body.night #article q {
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
body.night #article blockquote:not(.simple):not(.pullquote) {
|
||
border-left-color: rgba(255, 255, 255, 0.15);
|
||
}
|
||
body.night.oled #article blockquote, body.night.oled #article q {
|
||
color: rgba(210, 210, 210, 0.85);
|
||
}
|
||
body.night.oled #article blockquote:not(.simple):not(.pullquote) {
|
||
border-left-color: rgba(210, 210, 210, 0.2);
|
||
}
|
||
body.watch.night #article blockquote, body.watch.night #article q {
|
||
color: var(--body-font-color);
|
||
}
|
||
body.watch.night #article blockquote:not(.simple):not(.pullquote) {
|
||
border-left-color: rgb(51, 51, 51);
|
||
}
|
||
|
||
body.sepia table :matches(td, th) {
|
||
border-color: rgb(230, 218, 202);
|
||
}
|
||
body.sepia table th {
|
||
background-color: rgba(154, 128, 92, 0.06);
|
||
}
|
||
body.gray table :matches(td, th) {
|
||
border-color: rgb(106, 106, 106);
|
||
}
|
||
body.gray table th {
|
||
background-color: rgba(255, 255, 255, 0.035);
|
||
}
|
||
body.night table :matches(td, th) {
|
||
border-color: rgb(50, 50, 50);
|
||
}
|
||
body.night table th {
|
||
background-color: rgba(255, 255, 255, 0.045);
|
||
}
|
||
body.night.oled table th {
|
||
background-color: rgba(255, 255, 255, 0.075);
|
||
}
|
||
|
||
@media (inverted-colors) {
|
||
/* If the user has turned on the "smart invert" accessibility preference, they generally prefer
|
||
their images, such as photos, to not be inverted. Provide this by applying a filter that
|
||
inverts the colors again (effectively un-inverting). */
|
||
body:not(.gray):not(.night) #article :matches(img, video) {
|
||
filter: invert();
|
||
}
|
||
body:not(.gray):not(.night) #article picture {
|
||
filter: none !important;
|
||
}
|
||
body.gray, body.night {
|
||
filter: invert();
|
||
}
|
||
body:matches(.gray, .night) #article :matches(img:not(picture > img), picture, video) {
|
||
filter: none !important;
|
||
}
|
||
body:matches(.gray, .night) #article iframe {
|
||
filter: invert();
|
||
}
|
||
html.paper body.white #article, html.paper body.sepia #article {
|
||
--paper-shadow-color: rgba(255, 255, 255, 0.2);
|
||
}
|
||
/* The background color of <body> is not inverted by the filter. Achieve this by manually
|
||
setting the inverse color. */
|
||
html:not(.paper) body.gray {
|
||
background-color: rgb(165, 165, 163) !important;
|
||
}
|
||
html.paper body.gray {
|
||
background-color: rgb(205, 205, 204) !important;
|
||
}
|
||
html:not(.paper) body.night {
|
||
background-color: rgb(237, 237, 237) !important;
|
||
}
|
||
html:not(.paper) body.night.oled {
|
||
background-color: white !important;
|
||
}
|
||
html.paper body.night {
|
||
background-color: white !important;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style id="locale-specific-adjustments">
|
||
.locale-ja .page {
|
||
text-align: justify;
|
||
}
|
||
|
||
.locale-zh-Hans .page {
|
||
text-align: justify;
|
||
}
|
||
|
||
.locale-zh-Hant .page {
|
||
text-align: justify;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.locale-hi .title {
|
||
line-height: 1.65em;
|
||
}
|
||
|
||
/* See 32728279 and 54061051. */
|
||
.locale-ur.notonastaliqurdu :matches(h1, h2, h3, h4, h5, h6) {
|
||
font-weight: normal;
|
||
line-height: 2.55em;
|
||
}
|
||
</style>
|
||
|
||
<style id="dynamic-article-content"></style>
|
||
|
||
<!-- For Twitter’s script to find and script world to be created (see 34937240). -->
|
||
<script>
|
||
window.isReaderPage = true;
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<iframe aria-hidden="true" id="next-page-container"></iframe>
|
||
<div id="article" role="article">
|
||
<!-- This node will contain a number of div.page. -->
|
||
</div>
|
||
</body>
|
||
</html>
|