/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
button, input, select, textarea {
font-family: inherit;
font-size: 100%;
}
/* https://projects.lukehaas.me/css-loaders/ */
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.8s infinite ease-in-out;
animation: load7 1.8s infinite ease-in-out;
}
.loader {
color: #666666;
font-size: 10px;
margin: 80px auto;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
top: 0;
}
.loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}
@-webkit-keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
@keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
.loader.hide {
display: none;
}
/* start */
.no-padding {
padding: 0;
}
html, body {
height: 100%;
}
body {
font: 18px/1.3 BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.flex-container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.flex-fill {
flex: 1;
}
footer {
font-size: .9rem;
text-align: center;
margin: 3rem 0 0rem;
font-size: .8rem;
color: #666;
}
footer code {
font-size: .8rem;
}
footer a {
color: #666;
border: none;
text-decoration: underline;
}
footer a:hover {
color: black;
}
.hero, .navbar {
background: rgb(240, 240, 240);
border-bottom: 1px solid rgb(210, 210, 210);
}
.hero h1, .navbar h1 {
font-weight: bold;
font-family: monospace;
}
.navbar > .container > div > :not(:last-child) {
margin-right: 1rem;
}
.hero .container, .navbar .container {
display: flex;
justify-content: space-between;
}
table {
width: 100%;
}
table thead {
border-bottom: 1px solid rgb(210, 210, 210);
}
table th {
font-weight: bold;
text-align: left;
padding: .5rem;
}
table td {
padding: .5rem;
}
.hero .container {
min-height: 70vh;
justify-content: center;
flex-direction: column;
text-align: center;
}
.hero h1 {
font-size: 2rem;
font-weight: bold;
font-family: monospace;
}
.hero h2 {
font-style: italic;
margin-bottom: 2rem;
}
.hero h3 {
font-weight: bold;
}
.hero form {
display: flex;
justify-content: center;
}
.client {
border-bottom: 1px solid #ccc;
margin: 0 0 1.3rem 0;
padding: 1.3rem 0;
}
.client h1 {
font-size: 1.5rem;
font-weight: bold;
}
.client h2 {
font-size: 1.2rem;
color: #666;
}
.scope {
margin-left: 1rem;
}
.scope + .scope {
margin-left: .5rem;
}
.field {
display: flex;
}
.field input {
margin-right: 5px;
}
@media screen and (max-width: 30rem) {
.field {
display: block;
}
.field input {
margin-bottom: .5rem;
margin-right: 0;
}
}
.container {
max-width: 50rem;
margin: 0 auto;
padding: 2rem;
}
section h1 {
font-size: 1.6rem;
margin: 1rem -1rem;
}
section h2 {
font-size: 1.2rem;
margin: 2rem -1rem 1rem;
}
section h3 {
margin: 1.3rem 0 1rem;
font-weight: bold;
}
pre {
padding: 1rem;
margin: 1rem 0;
background: rgb(240, 240, 240);
overflow-x: auto;
}
code {
font: .9rem/1.3 monospace;
}
strong {
font-weight: bold;
}
dl {
margin-top: 1rem;
}
dd {
margin-bottom: 1rem;
}
p {
margin: 1rem 0;
}
ul {
list-style: disc;
}
/* form elements */
button, input[type=url] {
-moz-appearance: none;
-webkit-appearance: none;
align-items: center;
border: 1px solid transparent;
border-radius: 4px;
box-shadow: none;
font-size: 1rem;
font-weight: normal;
height: 1.8rem;
line-height: 1;
padding: .1rem .5rem;
background: white;
border: 1px solid rgb(210, 210, 210);
color: black;
}
input[type=url] {
box-shadow: inset 0 .075rem .15rem rgba(0, 0, 0, .1);
}
button {
cursor: pointer;
}
input[type=url]:hover, button:hover {
border-color: rgb(150, 150, 150);
}
input[type=url]:focus, button:focus {
border-color: rgb(0, 102, 204);
}
button:focus:not(:active) {
box-shadow: 0 0 0 .125em rgba(0, 102, 204, .2);
}
input[type=url]:focus:not(:active) {
box-shadow: inset 0 .075rem .15rem rgba(0, 0, 0, .1), 0 0 0 .125em rgba(0, 102, 204, .2);
}
button:active {
border-color:black;
}
input[type=url] + button {
height: auto;
}
.control + .control {
margin-top: 1rem;
}
.control label {
font-size: .8rem;
display: block;
}
a {
color: rgb(54, 93, 169);
text-decoration: none;
border-bottom: 1px solid rgb(54, 93, 169);
}
a:hover {
color: rgb(42, 100, 151);
border-color: rgb(42, 100, 151);
}
a.btn {
border: 1px solid;
padding: .3rem .5rem;
border-radius: .2rem;
background: rgba(54, 93, 169, .1);
border-color: rgba(54, 93, 169, .2);
}
a.btn:hover {
background: rgba(42, 100, 151, .1);
border-color: rgba(42, 100, 151, .5);
}
.center {
display: flex;
justify-content: center;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.info {
font-style: italic;
margin: 2.6rem 0;
}
.info.loading {
display: none;
}
textarea {
display: block;
width: 100%;
margin: 1rem 0;
}
.error-msg {
margin: 1.3rem 0;
padding: .6rem 1rem;
border-radius: .2rem;
color: rgb(55, 12, 12);
background: rgba(255, 59, 93, .1);
}
.warning-msg {
margin: 1.3rem 0;
padding: .6rem 1rem;
border-radius: .2rem;
color: rgb(89, 55, 23);
background: rgba(255, 188, 59, .1);
}
ul.methods {
padding-left: 1rem;
list-style: none;
}
ul.methods li {
margin: 1.3rem 0;
}
li.error, li.unsupported {
color: silver;
}