178 lines
4.3 KiB
CSS
178 lines
4.3 KiB
CSS
body {
|
|
margin: 0;
|
|
font-family: 'Lato', sans-serif;
|
|
font-weight: 400;
|
|
background: #384452;
|
|
color: #ddd;
|
|
min-width: 436px;
|
|
}
|
|
a { text-decoration: none; color: unset; }
|
|
p a, td a { border-bottom: 1pt dotted; }
|
|
a:hover { border-bottom: 1pt solid; }
|
|
#app-toc a:hover, a.no-ul:hover {
|
|
border-bottom: unset;
|
|
}
|
|
main, footer { padding: 0 1em; }
|
|
header, main, footer > div {
|
|
margin: 0 auto;
|
|
max-width: 1120px; /*1307px*/
|
|
}
|
|
header { height: 50px; }
|
|
header img { vertical-align: top; padding: 0 7px; }
|
|
header h1 {
|
|
line-height: 50px;
|
|
font-family: "Raleway", sans-serif;
|
|
font-size: 1.4em;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.9px;
|
|
color: #fff;
|
|
margin-top: 0;
|
|
}
|
|
header h1 span { font-size: 0.7em; color: silver; }
|
|
main {
|
|
padding: 0.1em 2em 1.5em;
|
|
background: #fff;
|
|
color: #000;
|
|
border-radius: 10px;
|
|
}
|
|
footer h4 { border-bottom: 2px solid #ddd; }
|
|
footer .col3 div {
|
|
vertical-align: top;
|
|
width: 31%;
|
|
padding: 1%;
|
|
display: inline-block;
|
|
}
|
|
footer .links {
|
|
text-align: center;
|
|
font-size: 0.9em;
|
|
padding: 1em;
|
|
}
|
|
footer .links a { color: #ddd; }
|
|
|
|
#main-nav { float: right; }
|
|
#main-nav li { display: inline-block; margin-right: 1em; }
|
|
#main-nav img { height: 1.2em; margin: 0 -0.4em; }
|
|
#main-nav img:hover { transform: scale(1.2); }
|
|
|
|
#get-appcheck:hover { color: #586472; }
|
|
#get-appcheck img { width: 3em; height: 3em; margin: 0.3em; }
|
|
#get-appcheck * { display: inline-block; vertical-align: middle; }
|
|
|
|
#app-toc { text-align: center; }
|
|
#app-toc div {
|
|
display: inline-block;
|
|
width: 140px;
|
|
height: 12em;
|
|
overflow: hidden;
|
|
margin: 5px;
|
|
padding: 16px;
|
|
vertical-align: top;
|
|
background: #eee;
|
|
word-wrap: break-word;
|
|
border: 1pt solid #ccc;
|
|
border-radius: 7px;
|
|
}
|
|
#app-toc div:hover { background: #BBC6CA; }
|
|
#app-toc img {
|
|
margin: 0.5em auto 1em;
|
|
display: block;
|
|
}
|
|
#app-toc img, #get-appcheck img, #meta img {
|
|
border-radius: 21.5%;
|
|
border: 0.7px solid #ccc;
|
|
}
|
|
#app-toc span.name { font-size: 0.8em; font-weight: bold; }
|
|
#app-toc span.detail { font-size: 0.7em; }
|
|
|
|
#pagination { text-align: center; margin-top: 2em; }
|
|
#pagination a { margin: 0.5em; padding: 0.2em }
|
|
#pagination a.active { border: 1pt solid black; border-radius: 0.2em; }
|
|
|
|
/* app bundle */
|
|
p { max-width: 700px; }
|
|
h2.title { margin-bottom: 0; }
|
|
p.subtitle { margin-top: 0.2em; }
|
|
.mg_lr { margin: 0 0.4em; }
|
|
.snd { color: #586472; font-size: 0.85em; }
|
|
td { padding: 0.2em 1em 0.2em 0.1em; }
|
|
#meta td:nth-child(2) { font-weight: bold }
|
|
.help-links td { padding: 0.5em; }
|
|
.help-links tr:nth-child(even) { background: #DDD; }
|
|
.help-links tr:nth-child(odd) { background: #F9F9F9; }
|
|
.help-links .notyet { color: #D11; }
|
|
.help-links .done { color: #3AE48C; }
|
|
|
|
/* domain tags */
|
|
.tags { margin: 2em 0; }
|
|
.tags i {
|
|
font-size: 0.9em;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
background: lightgray;
|
|
padding: 2pt 4pt;
|
|
border: 1pt solid #aaa;
|
|
border-radius: 0.2em;
|
|
display: inline-block;
|
|
margin: 0.12em;
|
|
}
|
|
.tags i.trckr:before, .tags.trckr i:before, p.trckr:before {
|
|
content: '* ';
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
.tags i.trckr, .tags.trckr i { background: #DBB; border-color: #C88; }
|
|
p.trckr { font-size: 0.9em; margin-left: 0.5em; }
|
|
|
|
/* graphs */
|
|
.dot-graph {
|
|
touch-action: manipulation;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
}
|
|
.dot-graph span:hover i { border-top: 5px solid black; margin-top: -5px }
|
|
.dot-graph i {
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
width: 1.5em;
|
|
height: 2em;
|
|
margin-bottom: 5px;
|
|
}
|
|
.dot-graph span:hover p { display: inline; }
|
|
.dot-graph p {
|
|
display: none;
|
|
position: absolute;
|
|
background: white;
|
|
border: 0.4em solid black;
|
|
padding: 0.3em 0.8em;
|
|
margin-top: -2.8em;
|
|
}
|
|
|
|
/* color-bind friendly color palette */
|
|
.cb0 i{background:#63ACBE}
|
|
.cb1 i{background:#601A4A}
|
|
.cb2 i{background:#09F4EC}
|
|
.cb3 i{background:#1F77B4}
|
|
.cb4 i{background:#EE442F}
|
|
.cb5 i{background:#7F7F7F}
|
|
.cb6 i{background:#0F2080}
|
|
.cb7 i{background:#3b9f35}
|
|
.cb8 i{background:#F5793A}
|
|
.cb9 i{background:#AC66FB}
|
|
|
|
.cs0{stroke:#3AE48C}
|
|
.cs1{stroke:#D11}
|
|
|
|
/* responsive */
|
|
@media(max-width: 647px) {
|
|
header h1 span { display: none; } /* header subtitle */
|
|
footer .col3 div { width: 100%; padding: 0; } /* 3 columns */
|
|
#meta .icons { margin-bottom: 1em; } /* icons beside each other */
|
|
.pie-chart { float: right; }
|
|
}
|
|
@media(min-width: 648px) {
|
|
#meta .icons { float: right; } /* icons below each other */
|
|
.pie-chart { margin-top: 1em; }
|
|
}
|