css.dottydoc.css Maven / Gradle / Ivy
html, body {
font-weight: 300;
height: 100%;
}
main.container {
min-height: 100vh;
padding: 15px 15px;
padding-bottom: 45px; /* prevents the content to be hidden by the gitter sidecar */
}
.container img {
width: 100%;
height: auto;
}
/* headers */
main header {
border-bottom: 1px solid rgba(0,0,0,.1);
margin-bottom: 16px;
padding-bottom: 16px;
}
main > h1 {
margin-bottom: 20px;
}
.byline, .byline a {
color: grey;
}
.byline .author {
display: block;
}
/* indexes */
ul.post-list {
list-style: none;
padding-left: 0;
}
.post-list h2 {
margin-bottom: 0;
}
/* headings anchors */
a.anchor {
color: white;
margin-left: -23px;
padding-right: 3px;
transition: color .4s ease-out;
}
a.anchor::before {
content: "\f0c1";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 20px;
}
h1:hover a.anchor,
h2:hover a.anchor,
h3:hover a.anchor,
h4:hover a.anchor,
h5:hover a.anchor {
color: lightgrey;
text-decoration: none;
}
h1:hover a.anchor:hover,
h2:hover a.anchor:hover,
h3:hover a.anchor:hover,
h4:hover a.anchor:hover,
h5:hover a.anchor:hover {
color: var(--secondary);
}
/* footer */
footer {
color: grey;
}
footer img#author-img {
width: auto;
height: auto;
max-width:100px;
max-height:100px;
border-radius: 50%;
}
/* api docs */
.api span.letter-anchor {
float: left;
width: 50px;
height: 50px;
border-radius: 50px;
color: white;
margin-top: 6px;
margin-right: 8px;
line-height: 50px;
text-align: center;
text-decoration: none;
font-size: 43px;
font-family: var(--font-family-sans-serif);
}
.api span.letter-anchor.object {
line-height: 48px;
}
.api span.letter-anchor.class {
line-height: 48px;
padding-right: 3px;
}
.letter-anchor.object {
background: #2c6c8d;
}
.letter-anchor.class {
background: #44ad7d;
}
.letter-anchor.trait {
background: #19aacf;
}
.letter-anchor.enum {
background: #7803fc;
}
.letter-anchor.package {
background: #2c6c8d;
}
.api header {
font-family: var(--font-family-sans-serif);
}
.api header .name-prefix {
display: block;
}
.api header .name-suffix {
display: inline-block;
}
.api header h1 {
margin: -13px 8px 0 0;
display: inline-block;
}
.api h2 {
margin-top: 1rem;
}
.api h3 {
display: inline;
margin: 0;
font: inherit;
font-weight: bold;
}
/* improved display and wrapping of parameters */
.api .params, .api .type-params {
display: inline-flex;
flex-flow: wrap;
}
/* api layout */
.wide-table {
display: table;
width: 100%;
}
.api .member:hover {
background: var(--doc-bg);
cursor: pointer;
}
.api .left-column {
white-space: nowrap;
padding-left: 1em;
border-left: 3px solid transparent;/* table rows cannot have borders*/
font-family: var(--font-family-monospace);
text-align: right;
width: 1px;
}
.api .member:hover .left-column {
border-left: 3px solid var(--secondary);
}
.api .right-column {
display: inline;
text-align: right;
font-family: var(--font-family-monospace);
}
/* code */
pre, code {
font-variant-ligatures: none;
}
pre {
padding: 0;
font-size: 13px;
background: var(--pre-bg);
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.1);
}
pre > code {
display: block;
padding: 0.5rem;
overflow-x: auto;
background: transparent;
}
/* admonitions */
blockquote {
padding: 0 1em;
color: #777;
border-left: 0.25em solid #ddd;
}
aside {
padding: 15px;
margin: 10px 0;
}
aside.warning {
border-left: 3px solid #d62c2c;
background-color: #ffe4e4;
}
aside.notice {
border-left: 3px solid #4c97e4;
background-color: #e4ebff;
}
aside.success {
border-left: 3px solid #36bf1d;
background-color: #ebfddd;
}
/* gitter chat */
.gitter-open-chat-button {
background-color: grey;
}
.gitter-open-chat-button:focus, .gitter-open-chat-button:hover {
background-color: var(--primary);
}
.gitter-open-chat-button:focus {
box-shadow: 0 0 8px var(--primary);
}
.gitter-chat-embed {
top: 40px; /* 50px (navbar) - 10px (aside's margin) */
bottom: -10px;
}
/* media queries for bigger screens (dottydoc is mobile-first) */
@media (min-width: 576px) {
.byline .author {
display: inline;
margin-left: 1em;
}
main.container {
padding: 15px 30px;
}
}
@media (min-width: 768px) {
.api .member {
display: table-row;
}
.api .left-column {
display: table-cell;
}
.api .right-column {
display: flex;
flex-flow: wrap;
}
main.container {
padding: 15px 45px;
}
}