You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
579 lines
11 KiB
579 lines
11 KiB
1 year ago
|
/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
|
||
|
html {
|
||
|
color: #222;
|
||
|
font-size: 1em;
|
||
|
line-height: 1.4;
|
||
|
}
|
||
|
::-moz-selection {
|
||
|
background: #b3d4fc;
|
||
|
text-shadow: none;
|
||
|
}
|
||
|
::selection {
|
||
|
background: #b3d4fc;
|
||
|
text-shadow: none;
|
||
|
}
|
||
|
hr {
|
||
|
display: block;
|
||
|
height: 1px;
|
||
|
border: 0;
|
||
|
border-top: 1px solid #ccc;
|
||
|
margin: 1em 0;
|
||
|
padding: 0;
|
||
|
}
|
||
|
audio,
|
||
|
canvas,
|
||
|
iframe,
|
||
|
img,
|
||
|
svg,
|
||
|
video {
|
||
|
vertical-align: middle;
|
||
|
}
|
||
|
fieldset {
|
||
|
border: 0;
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
}
|
||
|
textarea {
|
||
|
resize: vertical;
|
||
|
}
|
||
|
b,
|
||
|
strong {
|
||
|
font-weight: 400;
|
||
|
}
|
||
|
.browserupgrade {
|
||
|
margin: 0;
|
||
|
background: #ccc;
|
||
|
color: #000;
|
||
|
padding: 1em 2em;
|
||
|
text-align: center;
|
||
|
}
|
||
|
.browserupgrade a {
|
||
|
color: #000;
|
||
|
text-decoration: underline;
|
||
|
}
|
||
|
.browserupgrade a:hover {
|
||
|
color: #000;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
/* Dead Simple Grid (c) 2012 Vladimir Agafonkin */
|
||
|
.col {
|
||
|
padding: 0 1em;
|
||
|
}
|
||
|
.row .row {
|
||
|
margin: 0 -1em;
|
||
|
}
|
||
|
.row:before,
|
||
|
.row:after {
|
||
|
content: "";
|
||
|
display: table;
|
||
|
}
|
||
|
.row:after {
|
||
|
clear: both;
|
||
|
}
|
||
|
.col {
|
||
|
float: left;
|
||
|
width: 100%;
|
||
|
-webkit-box-sizing: border-box;
|
||
|
-moz-box-sizing: border-box;
|
||
|
box-sizing: border-box;
|
||
|
}
|
||
|
/* ==========================================================================
|
||
|
Author's custom styles
|
||
|
========================================================================== */
|
||
|
body {
|
||
|
font-family: "Lato", sans-serif;
|
||
|
color: #757575;
|
||
|
font-weight: 300;
|
||
|
font-size: 1.25em;
|
||
|
/* 20px */
|
||
|
line-height: 1.6;
|
||
|
}
|
||
|
h1,
|
||
|
h2,
|
||
|
h3 {
|
||
|
font-weight: 400;
|
||
|
color: #2d2d2d;
|
||
|
}
|
||
|
h1 {
|
||
|
font-size: 2.8em;
|
||
|
/* 56px */
|
||
|
margin: 0;
|
||
|
}
|
||
|
a {
|
||
|
color: #50e3c2;
|
||
|
text-decoration: none;
|
||
|
font-weight: 400;
|
||
|
}
|
||
|
a:hover,
|
||
|
a:focus {
|
||
|
color: #1cb18f;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
p {
|
||
|
margin: 0 0 1em 0;
|
||
|
}
|
||
|
.warning {
|
||
|
color: red;
|
||
|
}
|
||
|
.github {
|
||
|
background-image: url("../img/github.png");
|
||
|
position: fixed;
|
||
|
right: 25px;
|
||
|
top: 25px;
|
||
|
width: 50px;
|
||
|
height: 50px;
|
||
|
display: block;
|
||
|
z-index: 1;
|
||
|
opacity: 0.3;
|
||
|
-webkit-transition: opacity .2s;
|
||
|
transition: opacity .2s;
|
||
|
}
|
||
|
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||
|
.github {
|
||
|
background-image: url("../img/github@2x.png");
|
||
|
background-size: 50px 50px;
|
||
|
}
|
||
|
}
|
||
|
.github:hover {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
.antennaio {
|
||
|
background-image: url("../img/antenna.png");
|
||
|
background-repeat: no-repeat;
|
||
|
color: #cecece;
|
||
|
width: 280px;
|
||
|
height: 60px;
|
||
|
display: block;
|
||
|
margin: auto;
|
||
|
font-weight: 400;
|
||
|
font-size: 0.6em;
|
||
|
/* 12px */
|
||
|
line-height: 5.5;
|
||
|
letter-spacing: 2px;
|
||
|
margin-bottom: 7em;
|
||
|
-webkit-transition: color .2s;
|
||
|
transition: color .2s;
|
||
|
}
|
||
|
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||
|
.antennaio {
|
||
|
background-image: url("../img/antenna@2x.png");
|
||
|
background-size: 60px 60px;
|
||
|
}
|
||
|
}
|
||
|
.antennaio:hover {
|
||
|
color: #757575;
|
||
|
}
|
||
|
.antennaio span {
|
||
|
padding: 0 0 0 70px;
|
||
|
}
|
||
|
.bars {
|
||
|
background-image: url("../img/bars.png");
|
||
|
width: 80px;
|
||
|
height: 80px;
|
||
|
display: block;
|
||
|
margin: auto;
|
||
|
}
|
||
|
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||
|
.bars {
|
||
|
background-image: url("../img/bars@2x.png");
|
||
|
background-size: 80px 80px;
|
||
|
}
|
||
|
}
|
||
|
.section {
|
||
|
padding: 2em 0;
|
||
|
}
|
||
|
.section-intro {
|
||
|
text-align: center;
|
||
|
margin: 3em 0 4em 0;
|
||
|
max-height: 9999px;
|
||
|
/* no font boosting please */
|
||
|
}
|
||
|
.section-intro h1 {
|
||
|
line-height: 2.4;
|
||
|
}
|
||
|
.section-intro p {
|
||
|
max-width: 560px;
|
||
|
margin: auto;
|
||
|
}
|
||
|
.section-intro p.tagline {
|
||
|
font-size: 0.8em;
|
||
|
/* 16px */
|
||
|
color: #a8a8a8;
|
||
|
margin-bottom: 3em;
|
||
|
}
|
||
|
.section-examples {
|
||
|
position: relative;
|
||
|
background: #f8f8f8;
|
||
|
}
|
||
|
.examples {
|
||
|
margin: auto;
|
||
|
width: 980px;
|
||
|
padding: 3em 0;
|
||
|
}
|
||
|
.examples .col {
|
||
|
width: 50%;
|
||
|
}
|
||
|
.examples .col-fullwidth {
|
||
|
width: 100%;
|
||
|
}
|
||
|
.section-docs {
|
||
|
margin: 3em 0;
|
||
|
}
|
||
|
.docs {
|
||
|
width: 800px;
|
||
|
margin: auto;
|
||
|
max-height: 9999px;
|
||
|
/* no font boosting please */
|
||
|
}
|
||
|
.docs header {
|
||
|
text-align: center;
|
||
|
padding: 1em 0;
|
||
|
letter-spacing: 3px;
|
||
|
text-transform: uppercase;
|
||
|
font-weight: 400;
|
||
|
color: white;
|
||
|
width: 100%;
|
||
|
font-size: .9em;
|
||
|
}
|
||
|
.docs .how-to-use header,
|
||
|
.docs .callbacks header,
|
||
|
.docs .download header {
|
||
|
background: #4278f5;
|
||
|
}
|
||
|
.docs .how-to-use strong,
|
||
|
.docs .callbacks strong,
|
||
|
.docs .download strong {
|
||
|
color: #4278f5;
|
||
|
}
|
||
|
.docs .how-to-use a,
|
||
|
.docs .callbacks a,
|
||
|
.docs .download a {
|
||
|
color: #4278f5;
|
||
|
}
|
||
|
.docs .how-to-use a:hover,
|
||
|
.docs .callbacks a:hover,
|
||
|
.docs .download a:hover {
|
||
|
color: #0b43c6;
|
||
|
}
|
||
|
.docs .how-to-use pre,
|
||
|
.docs .callbacks pre,
|
||
|
.docs .download pre {
|
||
|
background: white;
|
||
|
border-left: 2px solid #4278f5;
|
||
|
padding: 0 2em;
|
||
|
}
|
||
|
.docs .how-to-use code,
|
||
|
.docs .callbacks code,
|
||
|
.docs .download code {
|
||
|
font-family: "Source Code Pro", sans-serif;
|
||
|
font-size: 0.9em;
|
||
|
/* 18px */
|
||
|
color: #4278f5;
|
||
|
}
|
||
|
.docs .configuration header,
|
||
|
.docs .faq header {
|
||
|
background: #50e3c2;
|
||
|
}
|
||
|
.docs .configuration strong,
|
||
|
.docs .faq strong {
|
||
|
color: #50e3c2;
|
||
|
}
|
||
|
.docs .configuration a,
|
||
|
.docs .faq a {
|
||
|
color: #50e3c2;
|
||
|
}
|
||
|
.docs .configuration a:hover,
|
||
|
.docs .faq a:hover {
|
||
|
color: #1cb18f;
|
||
|
}
|
||
|
.docs .configuration pre,
|
||
|
.docs .faq pre {
|
||
|
background: white;
|
||
|
border-left: 2px solid #50e3c2;
|
||
|
padding: 0 2em;
|
||
|
}
|
||
|
.docs .configuration code,
|
||
|
.docs .faq code {
|
||
|
font-family: "Source Code Pro", sans-serif;
|
||
|
font-size: 0.9em;
|
||
|
/* 18px */
|
||
|
color: #50e3c2;
|
||
|
}
|
||
|
.docs .license header,
|
||
|
.docs .methods header {
|
||
|
background: #edb867;
|
||
|
}
|
||
|
.docs .license strong,
|
||
|
.docs .methods strong {
|
||
|
color: #edb867;
|
||
|
}
|
||
|
.docs .license a,
|
||
|
.docs .methods a {
|
||
|
color: #edb867;
|
||
|
}
|
||
|
.docs .license a:hover,
|
||
|
.docs .methods a:hover {
|
||
|
color: #d58b19;
|
||
|
}
|
||
|
.docs .license pre,
|
||
|
.docs .methods pre {
|
||
|
background: white;
|
||
|
border-left: 2px solid #edb867;
|
||
|
padding: 0 2em;
|
||
|
}
|
||
|
.docs .license code,
|
||
|
.docs .methods code {
|
||
|
font-family: "Source Code Pro", sans-serif;
|
||
|
font-size: 0.9em;
|
||
|
/* 18px */
|
||
|
color: #edb867;
|
||
|
}
|
||
|
.docs .instructions {
|
||
|
padding: 2em 3em;
|
||
|
background: #f8f8f8;
|
||
|
}
|
||
|
.docs .faq p {
|
||
|
margin: 0 0 .5em 0;
|
||
|
}
|
||
|
.docs .faq .question {
|
||
|
margin-bottom: 2em;
|
||
|
}
|
||
|
.docs .faq .question:last-child {
|
||
|
margin-bottom: 0;
|
||
|
}
|
||
|
.controls {
|
||
|
position: absolute;
|
||
|
top: -23px;
|
||
|
left: 50%;
|
||
|
margin-left: -190px;
|
||
|
}
|
||
|
.controls a {
|
||
|
display: block;
|
||
|
width: 150px;
|
||
|
background-color: #50e3c2;
|
||
|
color: white;
|
||
|
float: left;
|
||
|
padding: .3em 1em .5em 1em;
|
||
|
text-decoration: none;
|
||
|
text-align: center;
|
||
|
font-weight: 400;
|
||
|
-webkit-transition: background-color 0.2s;
|
||
|
transition: background-color 0.2s;
|
||
|
}
|
||
|
.controls a:hover {
|
||
|
background-color: #3adfba;
|
||
|
}
|
||
|
.controls a:focus {
|
||
|
color: #d4f8f0;
|
||
|
background-color: #199b7e;
|
||
|
}
|
||
|
.controls a.rating-enable {
|
||
|
-webkit-border-top-left-radius: 999px;
|
||
|
-webkit-border-bottom-left-radius: 999px;
|
||
|
-moz-border-radius-topleft: 999px;
|
||
|
-moz-border-radius-bottomleft: 999px;
|
||
|
border-top-left-radius: 999px;
|
||
|
border-bottom-left-radius: 999px;
|
||
|
}
|
||
|
.controls a.rating-disable {
|
||
|
-webkit-border-top-right-radius: 999px;
|
||
|
-webkit-border-bottom-right-radius: 999px;
|
||
|
-moz-border-radius-topright: 999px;
|
||
|
-moz-border-radius-bottomright: 999px;
|
||
|
border-top-right-radius: 999px;
|
||
|
border-bottom-right-radius: 999px;
|
||
|
}
|
||
|
.controls a:last-child {
|
||
|
border-left: 0;
|
||
|
}
|
||
|
.controls a.deactivated {
|
||
|
background: #20c7a1;
|
||
|
color: white;
|
||
|
}
|
||
|
/* ==========================================================================
|
||
|
Media Queries
|
||
|
========================================================================== */
|
||
|
@media print {
|
||
|
body {
|
||
|
color: black;
|
||
|
}
|
||
|
h1,
|
||
|
h2,
|
||
|
h3 {
|
||
|
color: black;
|
||
|
}
|
||
|
.controls,
|
||
|
.github,
|
||
|
.antennaio {
|
||
|
display: none;
|
||
|
}
|
||
|
.section-intro {
|
||
|
margin: 1em 0 2em 0;
|
||
|
}
|
||
|
.section-intro p.tagline {
|
||
|
color: black;
|
||
|
}
|
||
|
.section-examples {
|
||
|
background: transparent;
|
||
|
}
|
||
|
.section-examples .examples {
|
||
|
padding: 1em 0;
|
||
|
}
|
||
|
.section-docs {
|
||
|
margin: 1em 0;
|
||
|
}
|
||
|
.docs .how-to-use a,
|
||
|
.docs .callbacks a,
|
||
|
.docs .download a,
|
||
|
.docs .configuration a,
|
||
|
.docs .faq a,
|
||
|
.docs .license a,
|
||
|
.docs .methods a {
|
||
|
color: black;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
.docs .how-to-use a:hover,
|
||
|
.docs .callbacks a:hover,
|
||
|
.docs .download a:hover,
|
||
|
.docs .configuration a:hover,
|
||
|
.docs .faq a:hover,
|
||
|
.docs .license a:hover,
|
||
|
.docs .methods a:hover {
|
||
|
color: black;
|
||
|
}
|
||
|
.docs .how-to-use header,
|
||
|
.docs .callbacks header,
|
||
|
.docs .download header,
|
||
|
.docs .configuration header,
|
||
|
.docs .faq header,
|
||
|
.docs .license header,
|
||
|
.docs .methods header {
|
||
|
background: transparent;
|
||
|
color: black;
|
||
|
}
|
||
|
.docs .how-to-use code,
|
||
|
.docs .callbacks code,
|
||
|
.docs .download code,
|
||
|
.docs .configuration code,
|
||
|
.docs .faq code,
|
||
|
.docs .license code,
|
||
|
.docs .methods code,
|
||
|
.docs .how-to-use strong,
|
||
|
.docs .callbacks strong,
|
||
|
.docs .download strong,
|
||
|
.docs .configuration strong,
|
||
|
.docs .faq strong,
|
||
|
.docs .license strong,
|
||
|
.docs .methods strong {
|
||
|
color: black;
|
||
|
}
|
||
|
.docs .how-to-use pre,
|
||
|
.docs .callbacks pre,
|
||
|
.docs .download pre,
|
||
|
.docs .configuration pre,
|
||
|
.docs .faq pre,
|
||
|
.docs .license pre,
|
||
|
.docs .methods pre {
|
||
|
border: none;
|
||
|
padding: 0;
|
||
|
}
|
||
|
.docs .how-to-use .instructions,
|
||
|
.docs .callbacks .instructions,
|
||
|
.docs .download .instructions,
|
||
|
.docs .configuration .instructions,
|
||
|
.docs .faq .instructions,
|
||
|
.docs .license .instructions,
|
||
|
.docs .methods .instructions {
|
||
|
background: transparent;
|
||
|
}
|
||
|
}
|
||
|
/* ==========================================================================
|
||
|
Helper classes
|
||
|
========================================================================== */
|
||
|
.hidden {
|
||
|
display: none !important;
|
||
|
visibility: hidden;
|
||
|
}
|
||
|
.visuallyhidden {
|
||
|
border: 0;
|
||
|
clip: rect(0 0 0 0);
|
||
|
height: 1px;
|
||
|
margin: -1px;
|
||
|
overflow: hidden;
|
||
|
padding: 0;
|
||
|
position: absolute;
|
||
|
width: 1px;
|
||
|
}
|
||
|
.visuallyhidden.focusable:active,
|
||
|
.visuallyhidden.focusable:focus {
|
||
|
clip: auto;
|
||
|
height: auto;
|
||
|
margin: 0;
|
||
|
overflow: visible;
|
||
|
position: static;
|
||
|
width: auto;
|
||
|
}
|
||
|
.invisible {
|
||
|
visibility: hidden;
|
||
|
}
|
||
|
.clearfix:before,
|
||
|
.clearfix:after {
|
||
|
content: " ";
|
||
|
display: table;
|
||
|
}
|
||
|
.clearfix:after {
|
||
|
clear: both;
|
||
|
}
|
||
|
.clearfix {
|
||
|
*zoom: 1;
|
||
|
}
|
||
|
/* ==========================================================================
|
||
|
Print styles
|
||
|
========================================================================== */
|
||
|
@media print {
|
||
|
*,
|
||
|
*:before,
|
||
|
*:after {
|
||
|
box-shadow: none !important;
|
||
|
text-shadow: none !important;
|
||
|
}
|
||
|
a,
|
||
|
a:visited {
|
||
|
text-decoration: underline;
|
||
|
}
|
||
|
a[href]:after {
|
||
|
content: " (" attr(href) ")";
|
||
|
}
|
||
|
abbr[title]:after {
|
||
|
content: " (" attr(title) ")";
|
||
|
}
|
||
|
a[href^="#"]:after,
|
||
|
a[href^="javascript:"]:after {
|
||
|
content: "";
|
||
|
}
|
||
|
pre,
|
||
|
blockquote {
|
||
|
page-break-inside: avoid;
|
||
|
}
|
||
|
thead {
|
||
|
display: table-header-group;
|
||
|
}
|
||
|
tr,
|
||
|
img {
|
||
|
page-break-inside: avoid;
|
||
|
}
|
||
|
img {
|
||
|
max-width: 100% !important;
|
||
|
}
|
||
|
p,
|
||
|
h2,
|
||
|
h3 {
|
||
|
orphans: 3;
|
||
|
widows: 3;
|
||
|
}
|
||
|
h2,
|
||
|
h3 {
|
||
|
page-break-after: avoid;
|
||
|
}
|
||
|
}
|