/* Copyright 2014 The Chromium Authors
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
/* This file contains style used across ALL platforms. Platform-specific styling
* should be placed in the corresponding file (e.g. desktop style goes in
* distilledpage_desktop.css).*/
/* Set the global 'box-sizing' state to 'border-box'.
* *::after and *::before used to select pseudo-elements not selectable by *. */
:root {
--google-blue-300: 138, 180, 248;
--google-blue-600: 26, 115, 232;
--google-blue-700: 25, 103, 210;
--google-brown-900: 62, 39, 35;
--google-grey-50: 248, 249, 250;
--google-grey-900: 32, 33, 36;
--google-purple-300: 197, 138, 249;
--google-purple-700: 132, 48, 206;
--google-yellow-50: 254, 247, 224;
--google-yellow-100: 254, 239, 195;
}
*,
*::after,
*::before {
box-sizing: border-box;
}
/* Remove all margins and padding from certain element and add word wrap. */
blockquote,
body,
caption,
dd,
dl,
fieldset,
figure,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
legend,
ol,
p,
pre,
ul,
table,
td,
th {
margin: 0;
padding: 0;
word-wrap: break-word;
}
/* Prevent 'sub' and 'sup' affecting 'line-height'. */
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Remove most spacing between table cells. */
table {
border-collapse: collapse;
border-spacing: 0;
display: block;
overflow-x: auto;
}
td,
th {
padding: 0.5rem;
}
/* Base typography. */
html {
/* This has to be in sync with |baseSize| in dom_distiller_viewer.js. */
font-size: 14px;
}
body {
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
line-height: 1.714;
margin: 0 auto;
min-height: 100vh;
overflow-x: hidden;
text-rendering: optimizeLegibility;
transition-duration: 500ms;
transition-property: color, background-color;
transition-timing-function: ease;
}
/* Classes for light, dark and sepia themes.
* Must agree with classes returned by useTheme() in dom_distiller_viewer.js
* and with CSS class constants in viewer.cc */
.light {
background-color: #FFF;
color: rgb(var(--google-grey-900));
}
.dark {
background-color: rgb(var(--google-grey-900));
color: #FFF;
}
.sepia {
background-color: rgb(var(--google-yellow-50));
color: rgb(var(--google-brown-900));
}
.light a:link {
color: rgb(var(--google-blue-600));
}
.sepia a:link {
color: rgb(var(--google-blue-700));
}
.dark a:link {
color: rgb(var(--google-blue-300));
}
.light a:visited {
color: rgb(var(--google-purple-700));
}
.sepia a:visited {
color: rgb(var(--google-purple-700));
}
.dark a:visited {
color: rgb(var(--google-purple-300));
}
.light code,
.light pre {
background-color: rgb(var(--google-grey-50));
border-color: rgb(var(--google-grey-900));
}
.sepia code,
.sepia pre {
background-color: rgb(var(--google-yellow-100));
border-color: rgba(var(--google-brown-900), 0.5);
}
.dark code,
.dark pre {
background-color: #000;
border-color: rgba(255, 255, 255, 0.5);
}
.light tbody tr:nth-child(odd) {
background-color: #EEE;
}
.light th,
.light td {
border-inline-start: 2px solid #AAA;
}
.sepia tbody tr:nth-child(odd) {
background-color: rgb(217, 196, 175);
}
.sepia th,
.sepia td {
border-inline-start: 1px solid rgb(147, 125, 102);
}
.dark tbody tr:nth-child(odd) {
background-color: #333;
}
.dark th,
.dark td {
border-inline-start: 1px solid #555;
}
/* #content-wrap is added to be more specific than the color theme rules */
#content-wrap th:first-child {
border-inline-start: none;
}
#content-wrap td:first-child {
border-inline-start: none;
}
/* Font settings */
.serif {
font-family: serif;
}
.sans-serif {
font-family: 'Roboto', sans-serif;
}
.monospace {
font-family: monospace;
}
/* Define vertical rhythm (baseline grid of 4px). */
blockquote,
caption,
code,
dd,
dl,
fieldset,
figure,
form,
hr,
legend,
ol,
p,
pre,
q,
table,
td,
th,
ul {
margin-bottom: 1.143rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.417;
margin: 1em 0;
}
/* Content. */
#loading-indicator {
padding-bottom: 2em;
width: 100%;
}
#loading-indicator > img,
#loading-indicator > svg {
display: block;
height: 2.5em;
margin: auto;
width: 2.5em;
}
/* Margins for Show Original link. */
video::-webkit-media-controls-fullscreen-button {
display: none;
}
#content {
margin: 24px 16px 24px 16px;
}
#main-content {
flex: 1 1 auto;
margin: 0 auto;
max-width: 35em;
width: 100%;
}
#article-header {
margin-top: 24px;
width: 100%;
}
#title-holder {
font-size: 1.714rem;
line-height: 1.417;
margin: 0 16px;
}
blockquote {
border-inline-start: 4px solid #888;
padding-inline-start: 1em;
}
cite {
font-style: italic;
opacity: .8;
}
hr {
border-style: solid;
height: 1px 0 0 0;
opacity: .5;
width: 75%;
}
q {
display: block;
font-style: italic;
font-weight: 600;
opacity: .8;
}
embed,
img,
object,
video {
max-width: 100%;
}
/* TODO(sunangel): make images zoomable. */
img {
display: block;
height: auto;
margin: 0.6rem auto 0.4rem auto;
}
/* TODO(nyquist): set these classes directly in the dom distiller. */
embed+[class*='caption'],
figcaption,
img+[class*='caption'],
object+[class*='caption'],
video+[class*='caption'] {
display: table;
font-size: 0.857rem;
line-height: 1.667;
margin-bottom: 1rem;
opacity: .8;
}
ol,
ul {
margin-inline-start: 1.296rem;
}
code,
pre {
border: 1px solid;
border-radius: 2px;
}
pre code {
border: none;
}
pre {
line-height: 1.642;
padding: .5em;
white-space: pre-wrap;
}
body .hidden {
display: none;
}
.clear {
clear: both;
}
/* Iframe sizing. */
.youtubeContainer {
height: 0;
/* This is the perecnt height of a standard HD video. */
padding-bottom: 56.25%;
position: relative;
width: 100%;
}
.youtubeIframe {
height: 100%;
position: absolute;
start: 0;
top: 0;
width: 100%;
}
<if expr="is_ios or is_android">
.desktop-only {
display: none;
}
</if>
Codebase Browser
chromium