343 lines
8.5 KiB
CSS
343 lines
8.5 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; }
|
|
main a { border-bottom: 1pt dotted; }
|
|
a:hover { border-bottom: 1pt solid; }
|
|
a.no-ul, a.no-ul:hover, .no-ul-all a, .no-ul-all a:hover {
|
|
border-bottom: unset;
|
|
}
|
|
main, footer { padding: 0 1em; }
|
|
header, main, footer > div {
|
|
margin: 0 auto;
|
|
max-width: 1118px;
|
|
}
|
|
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;
|
|
letter-spacing: .9px;
|
|
color: #fff;
|
|
margin-top: 0;
|
|
}
|
|
header h1 span { font-size: .7em; color: silver; text-transform: uppercase; }
|
|
header ul { padding: 0; }
|
|
main {
|
|
padding: .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: .9em;
|
|
padding: 1em;
|
|
}
|
|
|
|
#main-nav li { display: inline-block; margin-right: 1em; }
|
|
#main-nav img { height: 1.2em; margin: 0 -.4em; }
|
|
#main-nav img:hover { transform: scale(1.2); }
|
|
|
|
/* web root */
|
|
#get-appcheck:hover { color: #586472; }
|
|
#get-appcheck img { width: 3em; height: 3em; margin: .3em; }
|
|
#get-appcheck * { display: inline-block; vertical-align: middle; }
|
|
.carousel { width: max-content; }
|
|
.carousel img { margin: 20px; }
|
|
.note {
|
|
color: #550;
|
|
background: #F5F570;
|
|
border: 3px solid #DD0;
|
|
border-radius: 7px;
|
|
padding: 16px 2%;
|
|
width: max-content;
|
|
max-width: 96%;
|
|
}
|
|
.note h4, .note p { margin: 0 0 5px 0; }
|
|
.squeeze ul {
|
|
list-style-type: '○ ';
|
|
padding: 0;
|
|
margin: .5em 0 1em 1em;
|
|
}
|
|
|
|
/* dropdown */
|
|
.dropdown button {
|
|
padding: .5em 1em;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
.dropdown { display: inline-block; position: relative; }
|
|
.dropdown nav {
|
|
display: none;
|
|
position: absolute;
|
|
width: max-content;
|
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,.2);
|
|
z-index: 1;
|
|
}
|
|
.dropdown:hover nav { display: block; }
|
|
.dropdown a { display: block; padding: .5em 1em; }
|
|
|
|
#app-toc div:hover, .dropdown:hover button, .dropdown a:hover {
|
|
background: #DDD;
|
|
}
|
|
|
|
/* app index */
|
|
#app-toc {
|
|
display: grid;
|
|
grid-gap: 10px;
|
|
grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
|
|
}
|
|
#app-toc a { text-align: center; }
|
|
#app-toc div {
|
|
height: 12em;
|
|
padding: 16px;
|
|
overflow: hidden;
|
|
word-wrap: break-word;
|
|
background: #eee;
|
|
border: 1pt solid #ccc;
|
|
border-radius: 7px;
|
|
}
|
|
#app-toc img {
|
|
margin: .5em auto 1em;
|
|
display: block;
|
|
}
|
|
#app-toc img, #rank-list img, img.app-icon {
|
|
border-radius: 21.5%;
|
|
border: .7px solid #ccc;
|
|
}
|
|
#app-toc span.name { font-size: .8em; font-weight: bold; }
|
|
#app-toc span.detail { font-size: .7em; }
|
|
|
|
.pagination { text-align: center; margin-top: 2em; }
|
|
.pagination a { margin: .5em; padding: .2em; }
|
|
.pagination a.active { border: 1pt solid black; border-radius: .2em; }
|
|
|
|
/* Lists */
|
|
.title-sub h4, h2.title { margin-bottom: 0; }
|
|
.title-sub span, p.subtitle { margin-top: .2em; }
|
|
.title-sub p { margin: .2em .5em 1.5em; font-style: italic; }
|
|
.title-sub span, .found-in span, .snd { color: #586472; font-size: .85em; }
|
|
|
|
|
|
#categories h3 { margin-top: 2em; }
|
|
|
|
/* domain index */
|
|
#dom-top10 { text-align: right; }
|
|
#dom-top10>div { margin: .4em; }
|
|
#dom-top10 a, #dom-toc a { word-wrap: break-word; }
|
|
#dom-toc span { display: table; }
|
|
.fillbar {
|
|
display: block;
|
|
background: #DDD;
|
|
width: 200px;
|
|
margin: 2px;
|
|
border-radius: 4px;
|
|
text-align: left;
|
|
}
|
|
.fillbar>i {
|
|
font-style: normal;
|
|
display: inline-block;
|
|
border-radius: 4px 0 0 4px;
|
|
background: #AC2B4A;
|
|
font-size: .8em;
|
|
text-align: center;
|
|
color: #FFF;
|
|
line-height: 1.8em;
|
|
}
|
|
|
|
|
|
/* app bundle */
|
|
.squeeze { max-width: 700px; }
|
|
.mg_lr { margin: 0 .4em; }
|
|
.mg_top { margin-top: 2em; }
|
|
.right { text-align: right; }
|
|
.center { text-align: center; }
|
|
.bg1 { background: #EEE; }
|
|
.border { border: 1pt solid #CCC; }
|
|
.large { font-size: 1.2em; }
|
|
.stick-top { top: 0; position: sticky; padding: .8em 0 .5em; background: #FFF; }
|
|
.xscroll { overflow-x: scroll; max-width: 100%; }
|
|
.yscroll { overflow-y: scroll; max-height: 80vh; }
|
|
.floatr, #main-nav { float: right; }
|
|
table { border-collapse: collapse; }
|
|
table.alternate td, table.alternate th { padding: .5em; }
|
|
table.alternate tr:nth-child(even) { background: #DDD; }
|
|
table.alternate tr:nth-child(odd) { background: #F9F9F9; }
|
|
table.stick-first td:nth-child(1) { position: sticky; left: 0; background: inherit; }
|
|
|
|
/*#meta { margin-bottom: 2em; }*/
|
|
#meta .icons { margin-bottom: 2em; }
|
|
#meta .icons > *:first-child { margin-right: 1em; }
|
|
#meta td { padding: .2em 1em .2em .1em; }
|
|
#meta td:nth-child(2) { font-weight: bold }
|
|
|
|
/* percentile */
|
|
#stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, max-content);
|
|
grid-gap: 0.7em 2em;
|
|
margin: 2em 0;
|
|
}
|
|
#stats .col1 { grid-column-start: 1; }
|
|
.rank h4 { margin: 0 0 .7em; }
|
|
.rank p { margin-top: .5em; }
|
|
.pcbar {
|
|
display: inline-block;
|
|
background: #EEE;
|
|
border: 1px solid #000;
|
|
width: 150px;
|
|
height: 1.2em;
|
|
padding-right: 3px;
|
|
vertical-align: top;
|
|
}
|
|
.pcbar>i {
|
|
display: block;
|
|
position: relative;
|
|
background: #000;
|
|
width: 3px;
|
|
height: 100%;
|
|
}
|
|
.pcbar.b>i { background: #CA0D3A; }
|
|
.pcbar.g>i { background: #6AC45C; }
|
|
|
|
/* app bundle: domain tags */
|
|
.tags a {
|
|
font-size: .9em;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
background: #EEE;
|
|
padding: 2pt 4pt;
|
|
border: 1pt solid #AAA;
|
|
border-radius: .2em;
|
|
display: inline-block;
|
|
margin: .12em;
|
|
}
|
|
.tags a:hover { background: #DDD; }
|
|
.tags.large > * {
|
|
border-radius: .4em;
|
|
padding: 6pt 12pt;
|
|
margin: .36em;
|
|
}
|
|
.tags a.trckr, .tags.trckr a { background: #F9A7A7; border-color: #B06363; }
|
|
.tags a.trckr:hover, .tags.trckr a:hover { background: #F99494; }
|
|
p.trckr { font-size: .9em; margin-left: .5em; }
|
|
|
|
/* app bundle: graphs */
|
|
.dot-graph {
|
|
margin-bottom: 1.5em;
|
|
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;
|
|
background: #AAA;
|
|
width: 1.5em;
|
|
height: 1.8em;
|
|
margin-bottom: 5px;
|
|
}
|
|
.dot-graph i:first-of-type { margin-left: .1em; width: 1.4em; }
|
|
.dot-graph .trckr i { background: #AC2B4A; }
|
|
.dot-graph span:hover p { display: inline; }
|
|
.dot-graph p {
|
|
display: none;
|
|
position: absolute;
|
|
background: white;
|
|
border: .4em solid black;
|
|
padding: .3em .8em;
|
|
margin-top: -2.8em;
|
|
margin-left: .1em;
|
|
}
|
|
|
|
/* #AC2B4A #BB1C42 #CA0D3A */
|
|
.cs0{stroke:#6AC45C}
|
|
.cs1{stroke:#CA0D3A}
|
|
|
|
/* Help needed */
|
|
#help-links span.snd { display: table; }
|
|
#help-links .notyet { color: #D11; }
|
|
#help-links .done { color: #52C840; }
|
|
|
|
/* rank-list */
|
|
#rank-list tr { font-size: 0.75em; }
|
|
#rank-list th span { display: block; margin-top: 4px; }
|
|
#rank-list th { vertical-align: bottom; }
|
|
#rank-list th a { cursor:pointer; border: unset; padding: 0 5px; margin: 0 2px; }
|
|
#rank-list th a:hover { fill: #F00; }
|
|
#rank-list th a.active { fill: #CA0D3A; }
|
|
#rank-list th:not(:first-child) { min-width: 12ex; }
|
|
|
|
#rank-list img { width: 25px; height: 25px; vertical-align: bottom; }
|
|
#rank-list td { text-align: center; }
|
|
#rank-list td:nth-child(1) { text-align: right; white-space: nowrap; }
|
|
#rank-list td:nth-child(2) { text-align: left; }
|
|
|
|
/* rank-cluster */
|
|
table.cluster tr { font-size: 0.8em; }
|
|
table.cluster td { padding: 0.75em; }
|
|
table.cluster .sep { border-left: 1pt solid #000; }
|
|
table.cluster td:not(:first-child) { text-align: center; }
|
|
|
|
/* responsive */
|
|
@media(max-width: 900px) {
|
|
#stats { grid-template-columns: repeat(2, max-content); }
|
|
}
|
|
@media(max-width: 650px) {
|
|
header img { padding-right: 0; }
|
|
header h1 { font-size: 1em; }
|
|
header h1 span { display: none; } /* header subtitle */
|
|
main { padding-left: 1em; padding-right: 1em; }
|
|
footer .col3 div { width: 100%; padding: 0; } /* 3 columns */
|
|
#app-toc { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
|
|
#app-toc a { text-align: left; }
|
|
#app-toc div {
|
|
margin: 0;
|
|
padding: .7em 0;
|
|
height: unset;
|
|
border: unset;
|
|
background: unset;
|
|
}
|
|
#app-toc img {
|
|
float: left; width: 44px; height: 44px; margin: 0 .5em;
|
|
}
|
|
#stats { grid-template-columns: max-content; }
|
|
#dom-top10 { text-align: unset; }
|
|
.fillbar { width: 100%; }
|
|
.fillbar>i { line-height: 2.5em; }
|
|
}
|
|
@media(min-width: 651px) {
|
|
#meta .icons { float: right; }
|
|
#dom-toc h3 a { display: none; }
|
|
#dom-toc div:nth-child(1) {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: 59%;
|
|
}
|
|
#dom-toc div:nth-child(2) {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: 40%;
|
|
margin-left: 1%;
|
|
}
|
|
.div-center { margin: 0 auto; width: max-content; max-width: 100%; }
|
|
.fillbar { display: inline-block; }
|
|
}
|