mirror of
https://github.com/denoland/deno.git
synced 2024-12-23 07:44:48 -05:00
43f48386d7
This uses `prefers-color-scheme: dark` to automatically switch to dark mode if the user specifies it in their system settings. Dark mode is supported in Firefox 67, Chrome 76, Safari 12.1, and iOS 13 as of this commit, but the current status can be checked here: https://caniuse.com/#feat=prefers-color-scheme Additionally, this uses CSS Variables to implement the color-switching mechanism. This isn’t supported in IE, but the site degrades reasonably well with them disabled. Support table: https://caniuse.com/#feat=css-variables
160 lines
2.3 KiB
CSS
160 lines
2.3 KiB
CSS
:root {
|
|
--text-color: #444;
|
|
--background-color: #f0f0f0;
|
|
--link-color: #106ad5;
|
|
--table-border: #bbb;
|
|
--pre-color: #161616;
|
|
--pre-link-color: #001631;
|
|
--pre-background: rgba(36, 126, 233, 0.1);
|
|
--code-color: #333;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background-color: #444;
|
|
--text-color: #f0f0f0;
|
|
--link-color: #4498ff;
|
|
--pre-color: #e8e8e8;
|
|
--pre-link-color: #cee4ff;
|
|
--code-color: #ccc;
|
|
}
|
|
|
|
#logo {
|
|
filter: invert();
|
|
}
|
|
}
|
|
|
|
body {
|
|
color: var(--text-color);
|
|
background: var(--background-color);
|
|
padding: 0;
|
|
|
|
line-height: 1.5;
|
|
font-family: sans-serif;
|
|
|
|
margin: 5ex 10ex;
|
|
max-width: 80ex;
|
|
}
|
|
|
|
#manual img {
|
|
width: 100%;
|
|
max-width: 800px;
|
|
}
|
|
|
|
|
|
h1, h2, h3, h4 {
|
|
font-weight: normal;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
h1, h2, h3, h4, p, table {
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
margin-top: 8px;
|
|
}
|
|
td, th {
|
|
font-weight: normal;
|
|
text-align: center;
|
|
border: 1px dotted var(--table-border);
|
|
padding: 4px;
|
|
}
|
|
|
|
svg {
|
|
margin: 0px;
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
|
|
a {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
pre a {
|
|
color: var(--pre-link-color);
|
|
}
|
|
|
|
h2 a, h3 a {
|
|
display: none;
|
|
color: #3bace5;
|
|
text-decoration: none;
|
|
}
|
|
|
|
h2:hover a,
|
|
h3:hover a {
|
|
display: inline;
|
|
}
|
|
|
|
pre {
|
|
/* background: rgba(36, 126, 233, 0.03); */
|
|
color: var(--pre-color);
|
|
background: var(--pre-background);
|
|
padding: 15px;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 16px 4px;
|
|
}
|
|
|
|
header > * {
|
|
margin: 8px;
|
|
}
|
|
|
|
header h1 {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
|
|
@media only screen and (max-device-width: 480px) {
|
|
body {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
code {
|
|
background: rgba(36, 126, 233, 0.1);
|
|
padding: 2px 5px;
|
|
color: var(--code-color);
|
|
}
|
|
|
|
.hljs {
|
|
background: transparent;
|
|
}
|
|
|
|
#spinner-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
@keyframes spinner {
|
|
to {transform: rotate(360deg);}
|
|
}
|
|
|
|
.spinner:before {
|
|
content: '';
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 60px;
|
|
height: 60px;
|
|
margin-top: -30px;
|
|
margin-left: -30px;
|
|
border-radius: 50%;
|
|
border: 2px solid #ccc;
|
|
border-top-color: #000;
|
|
animation: spinner .6s linear infinite;
|
|
}
|