nymea/doc/main-dark.css

1076 lines
18 KiB
CSS

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* *
* Copyright (C) 2017 Georgi Yatsev <georgi.yatsev@guh.io> *
* *
* Permission is hereby granted, free of charge, to any person obtaining a copy *
* of this software and associated documentation files (the "Software"), to deal *
* in the Software without restriction, including without limitation the rights *
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell *
* copies of the Software, and to permit persons to whom the Software is *
* furnished to do so, subject to the following conditions: *
* *
* The above copyright notice and this permission notice shall be included in all *
* copies or substantial portions of the Software. *
* *
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR *
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, *
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE *
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER *
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, *
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE *
* SOFTWARE. *
* *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* 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;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.5;
background: #676767;
}
ol, ul {
list-style: list-style-type:circle;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/**
* modified version of normalize.css 3.0.2
* http://necolas.github.io/normalize.css/
*/
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative;
min-height: 100%;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn,
i, em {
font-style: italic;
}
mark {
background: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
hr {
box-sizing: content-box;
height: 0;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
a:active,
a:hover {
outline: 0;
}
a {
color: #eaeaea;
text-decoration: none;
cursor: pointer;
}
a:hover {
color: #57baae;
text-decoration: underline;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: inherit;
}
b,
strong {
font-weight: bolder;
}
:not(pre) > code,
:not(pre) > kbd,
:not(pre) > samp {
font-size: 1.0rem;
font-family: Consolas, monaco, monospace;
color: #3d8077;
white-space: nowrap;
padding: 2px 6px;
/* background: #efefef; */
}
em {
color: #d63843;
}
ins {
background: #efefef;
color: #eaeaea;
text-decoration: none;
}
mark {
background: #efefef;
color: #eaeaea;
}
q {
font-style: italic;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
audio,
canvas,
img,
video {
max-width: 100%;
height: auto;
box-sizing: border-box;
}
img {
border-style: none;
}
svg:not(:root) {
overflow: hidden;
}
p,
ul,
ol,
dl,
pre,
address,
fieldset,
figure {
margin: 0 0 20px 0;
}
* + p,
* + ul,
* + ol,
* + dl,
* + pre,
* + address,
* + fieldset,
* + figure {
margin-top: 20px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 20px 0;
font-family: "Ubuntu", Helvetica, "Helvetica Neue", Arial, sans-serif;
font-weight: normal;
color: #6767671a;
text-transform: none;
}
* + h1,
* + h2,
* + h3,
* + h4,
* + h5,
* + h6 {
margin-top: 40px;
}
h1 {
font-size: 2.625rem;
line-height: 1.2;
}
h2 {
font-size: 2rem;
line-height: 1.3;
}
h3 {
font-size: 1.5rem;
line-height: 1.5;
}
h4 {
font-size: 1.25rem;
line-height: 1.5;
}
h5 {
font-size: 16px;
line-height: 1.5;
}
h6 {
font-size: 0.875rem;
line-height: 1.5;
}
ul,
ol {
padding-left: 30px;
}
ul > li > ul,
ul > li > ol,
ol > li > ol,
ol > li > ul {
margin: 0;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
margin: 0 0 20px 0;
border: 0;
border-top: 1px solid #b7b7b7;
}
* + hr {
margin-top: 20px;
}
address {
font-style: normal;
}
blockquote {
margin: 0 0 20px 0;
font-size: 1.25rem;
line-height: 1.5;
font-style: italic;
color: #676767;
}
* + blockquote {
margin-top: 20px;
}
blockquote p:last-of-type {
margin-bottom: 0;
}
blockquote footer {
margin-top: 10px;
font-size: 0.875rem;
line-height: 1.5;
color: #676767;
}
blockquote footer::before {
content: "-- ";
}
pre {
font: 0.875rem / 1.5 Consolas, monaco, monospace;
color: #666;
-moz-tab-size: 4;
tab-size: 4;
overflow: auto;
padding: 10px;
border: 1px solid #d3d5d6;
border-radius: 3px;
background: white;
}
pre code {
font-family: Consolas, monaco, monospace;
}
::-moz-selection {
background: #57baae;
color: white;
text-shadow: none;
}
::selection {
background: #57baae;
color: white;
text-shadow: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
display: block;
}
progress {
vertical-align: baseline;
}
template,
[hidden] {
display: none;
}
iframe {
border: 0;
}
a,
area,
button,
input,
label,
select,
summary,
textarea {
touch-action: manipulation;
}
html {
color: #eaeaea;
font-family: "Ubuntu", Arial, Helvetica, sans-serif;
background: #676767;
}
.header {
overflow: auto;
height: auto;
width: 100%;
z-index: 5;
}
code {
padding-left: 5px;
}
li {
display: list-item;
text-align: -webkit-match-parent;
text-align: justify;
}
table {
border: 1px solid #d3d5d6;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 5px;
width: 100%;
}
table td {
padding: 5px 20px;
line-height: 1.5;
border: 1px solid #d3d5d6;
}
div.table {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.rightAlign {
padding: 3px 5px 3px 10px;
text-align: right;
}
.nymea-navbar {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
position: fixed;
z-index: 10;
width: 100%;
min-height: 100px;
background: #efefef;
border-bottom: 1px solid #dbdbdb;
}
.nymea-margin {
margin-bottom: 20px;
}
.nymea-logo {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
box-sizing: border-box;
min-height: 100px;
padding: 0 15px;
font-size: 14px;
text-decoration: none;
margin: 0 45px;
}
.nymea-main-logo {
height: 85px;
min-height: 85px;
max-height: 85px;
}
.nymea-navbar-center {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.nymea-navbar-center:only-child {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
position: relative;
}
.nymea-navbar-nav {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.nymea-navbar-nav li {
text-overflow: ellipsis;
/* Required for text-overflow to do anything */
white-space: nowrap;
overflow: hidden;
}
.nymea-navbar-nav li:after {
content: "";
display: inline-block;
width: 100%;
}
.nymea-navbar-nav > li > a {
color: #676767;
font-size: 1.3rem;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
box-sizing: border-box;
min-height: 100px;
padding: 0 15px;
text-decoration: none;
}
div.header + li {
color: #408a83;
font-size: 1.115rem;
line-height: 1.5;
width: 23.5%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
box-sizing: border-box;
min-height: 100px;
padding: 25px;
text-decoration: none;
z-index: 10;
position: fixed;
list-style: none;
text-align: center;
}
.nymea-navbar-center-left, .nymea-navbar-center-right {
position: absolute;
top: 0;
}
.nymea-navbar-center-left > *, .nymea-navbar-center-right > * {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.nymea-navbar-center-left {
right: 100%;
}
.nymea-navbar-center-right {
left: 100%;
}
.content {
z-index: 0;
box-sizing: content-box;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
padding: 3rem 3.3rem 10rem;
top: 101px;
width: 100%;
position: relative;
}
.content:before {
content: '';
display: table;
}
.content:after {
content: '';
display: table;
clear: both;
}
.content .headerNavi, .content .footerNavi {
text-align: center;
}
.content .headerNavi .prevPage, .content .footerNavi .prevPage {
margin: 0 20px;
}
.content .headerNavi .prevPage::after, .content .footerNavi .prevPage::after {
content: '\25c4';
padding-right: 0.5em;
position: absolute;
left: -14%;
}
.content .headerNavi .nextPage, .content .footerNavi .nextPage {
margin: 0 20px;
}
.content .headerNavi .nextPage::after, .content .footerNavi .nextPage::after {
content: '\25ba';
position: absolute;
padding-left: 0.5em;
}
.content .sidebar {
position: fixed;
top: 100px;
left: 0;
bottom: 0;
background: #676767
box-sizing: border-box;
width: 23.5% !important;
padding: 40px 40px 160px 40px;
border-right: 1px #d3d5d6 solid;
overflow: auto;
}
.content .sidebar h3 {
text-align: center;
padding-bottom: 15px;
border-bottom: 1px #d3d5d6 solid;
}
.content .sidebar h3 a {
color: #676767;
}
.content .sidebar ul li {
padding-left: 0;
list-style-type: circle;
text-align: left;
}
.content .sidebar .level1 {
font-size: 1.2rem;
line-height: 1.5;
list-style: "- ";
}
.content .sidebar .level2 {
font-size: 1rem;
margin-left: 1.5rem;
line-height: 1.5;
list-style-type: circle;
}
.content .sidebar .level3 {
font-size: 1rem;
margin-left: 2rem;
line-height: 1.5;
list-style: "→ ";
}
.content .context {
width: 90%;
margin: 0 -120px 0 auto;
overflow: hidden;
}
.content .context .small-subtitle:before {
content: "";
display: inline-block;
position: relative;
top: calc(-0.1 * 1em);
vertical-align: middle;
height: .9em;
margin-right: 10px;
border-left: 5px solid rgba(211, 213, 214, 0.65);
}
.content table {
vertical-align: initial;
}
.content ul li {
line-height: 1.5;
position: relative;
padding-left: 1;
}
.content ul li::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1.5em;
height: 1.5em;
background-image: url('data:image/svg+xml;utf8,<svg width="6" height="6" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"><circle fill="#666" cx="3" cy="3" r="3"></circle></svg>');
background-repeat: no-repeat;
background-position: 50% 50%;
float: left;
}
.content a {
text-decoration: none;
color: #57baae;
position: relative;
}
.content a:hover {
color: #57baae;
text-decoration: none;
}
.content a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #7cc09a;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.content a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.centerAlign {
text-align: center;
}
pre {
border: 1px solid #676767;
resize: both;
background: #3a4055;
-moz-border-radius: 0.7em 0.7em 0.7em 0.7em;
-webkit-border-radius: 0.7em 0.7em 0.7em 0.7em;
border-radius: 0.7em 0.7em 0.7em 0.7em;
margin: 0 1.5em 1em 1em;
padding: 1em 1em 1em 1em;
overflow-x: auto;
color: #d3d5d6;
}
pre .operator {
color: white;
}
pre .type {
color: #4f9d08;
}
pre .keyword {
color: #ffff55;
}
pre .string {
color: #aaaaaa;
}
pre .number {
color: #ff55ff;
}
span.type {
color: #408a83;
}
h2, h3.fn {
position: relative;
}
h2:after, h3.fn:after {
position: absolute;
content: '';
height: 1px;
bottom: -10px;
margin: 0 auto 0 0;
left: 0;
right: 0;
width: 100%;
background: #d3d5d6;
}
div.footer {
position: absolute;
border-top: 1px solid #dbdbdb;
bottom: -101px;
left: 0;
width: 100%;
z-index: 5;
text-align: center;
background: #efefef;
padding: 60px 0;
}
div.footer acronym[title] {
text-decoration: none;
}
div.footer p {
padding: 0;
margin: 0;
}
@media screen and (max-width: 1440px) {
.content {
max-width: 1200px;
}
.content .context {
width: 80%;
margin: 0 -40px 0 auto;
}
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
padd
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #57baaef3;
}
input:focus + .slider {
box-shadow: 0 0 1px #57baaef3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}